Home of:

5ml, Developer Resources

Two and a Half, Man!

0
Sotiris Frontend Developer | 5ml
March 27, 2013

5ml version 2.5 is coming soon™For some peculiar reason, the human species tends to favor big, round and easy numbers. For instance, the celebration was special for most of the denizens of this planet when the calendar turned to the year 2000 (though we –the nerdier ones- will throw the big celebration on the year 2048). Two point five is not a very round number per se, but in terms of software development, it’s a pretty big one. And as such, we wanted to celebrate 5ml’s 2.5 release by packing it with features upon features and tidbits for you to play with, and make your life easier.

 

 

Animate in Depth

In 2.4 we introduced the animation editor. It’s time we took it a step further and expanded it to the third dimension. The “transform” css property is now among the available animatable properties in the editor. You can translate, rotate, scale and skew any widget in 2D or 3D and perform animations on those properties. That beautiful 3D animation that you always wanted to make is now just a few clicks away. For instance:

This rotating cube above took literally 4 minutes to create. Two minutes to construct it on the page, one minute to add the animations on the timeline, and one more minute for polishing, small tweaks and a glass of water. Make sure you check the example above on a browser that supports CSS 3D transformations (currently Chrome, Firefox and Safari).

 

Animate with Speed

Let’s not stray away from the animation editor just yet though. Up to now, the animation timeline was a nifty representation of what’s going on animation-wise in your project. While it’s cool and all, it was just that… a representation. We didn’t like that, so we changed it to be a useful and interactive tool. Don’t like the timing of your animations?

Drag around or extend the bars in the animation editor

No problem. Drag the bars and move them around the timeline, all the while changing each animation start and end times visually. Feeling unhappy with the duration of your animations? Simply drag the edge of the bars and expand them or contract them in time. 5ml will safeguard you and prevent you from making any mistakes in the timing of your animations. Easy-peasy lemon-squeezy.

 

Animate with Ease

And just before we move away from animations, we also added 21 new easing functions that you can apply to your animations, or transitions. Cubic, Quadratic, Circular, Exponential–it’s all there. The full Monty!

 

Points in Transition

But why settle with just easing functions for transitions and not add some more transitions while at it? We’ve added two more 3D transition effects in the lot. The “Flip” transition, which acts like a flipcard, and the “Swap” transition where the first view retreats to one side, while the second view, emerges into the screen from deep:

Rose and Candy alternating in 3d

 

 

Why No U Transform?

While there has been support for CSS 3D transformation on 3D capable browsers, barring the rotation of widgets, all of the 2D transformations had been neglected. But that’s not the case anymore. We stripped the rotation property from the Appearance properties tab, and tucked it in neatly in the Transformation properties tab which is now always available for all widgets. By default, translateX, translateY, rotateZ, scaleX, scaleY, skewX and skewY are enabled. If the widget is inside a 3D Stage (and the browser supports CSS 3D Transforms), then translateZ, rotateX, rotateY, and scaleZ are also enabled.

 

Let’s not drag this. Or maybe… let’s just drag it some more

Reordering widgets is now a breeze

Putting a couple of widgets on the page and playing around with them is not that much of a daunting task (if there was ever any in 5ml). However, in a project that has tens, if not hundreds, of elements on the page, manipulating the widgets can become a nuisance.  We decided that this should no longer be a cause for frustration, and we tweaked the Page Outline so it transforms into a powerful and time saving tool. You can now drag new widgets on the Page Outline tree instead of the page, and they will stay exactly where you dropped them, in that particular position on the page. Want to put a Facebook Like widget inside a VBox which is squeezed among 34 other widgets on the page? Just drag the widget from the library and hover it over the VBox entry in the Page Outline. Wait two seconds there and the VBox will expand. Then proceed to drop it inside the VBox at the exact location you want.

And if you drop the Facebook Like Widget at an undesirable position by mistake, worry not! Click on its entry inside the Page Outline, and drag it somewhere else on the Page Outline… or even on the page itself!

 

Regarding Facebook

The whole family of Facebook social pluginsSpeaking of Facebook Like, we had a “one-on-one” with the widget and it complained about its solitude. We were so moved by its plea, and as such we brought on board the whole array of its Facebook Social Plugins siblings. Apart from the “Facebook Like Button”, you can now add the “Facebook Send to a Friend”, “Facebook Comments”, “Facebook Recommend”, “Facebook Likebox” and “Facebook Facepile” plugins as widgets onto your page.

 

 

 

Bug squashing

The rule for programming is that “He, who codes for 24 hours, debugs for 6 months”. As usual, we have located and eradicated quite a few well-hidden bugs. We can sleep with the windows open now.

 

Ready to use (2.)5ml yet?? Login, or get started, here. We are excited with the features in this upcoming release, and even more we are looking forward to seeing what spectacular projects our users will come up with using these new features.
 
 

Leave a Reply

 

See What People
Are Saying

tmobile-logo

“T-Mobile was able to delight customers with a fun game that could work across virtually any phone, with Velti making it possible. Velti was great to work with & their commitment to the success of the program was excellent.” - Chad Hodge, T-Mobile USA

Pic Stitch_logo

“The thing I love about Mobclix is its simplicity--sign up & you have instant access to over 35 ad networks. Not only that, but I’ve already seen a 400% increase in revenue from March, and 12M impressions a week!” - Alex Keim, Creator of Pic Stitch, Big Blue Clip  

Halfbrick

"Mobclix greatly helps manage & control the quality of our ads, and as a result, our Fruit Ninja app made over $400,000 in April 2012 alone off of ad-network sales." - Jared Oats, Advertising Manager, Halfbrick

tinyco

“TinyCo is thrilled to be working with the Velti Exchange—we’ve seen great results from the campaigns we’ve run so far and are excited about the future of our relationship!” - Growth & User Acquisition Team, Tinyco

mtc_logo_n

“We strongly believe that mobile marketing and advertising is here and we have already taken the first successful steps in partnering with Velti in this new era for the mobile industry.” - MTC Russia

mbcgroup

“Velti has shown consistent respect for policies and procedures, in addition to designing and implementing the campaigns. We look forward to continuing this fruitful cooperation in the future.” - MBC Group

Follow us

 

Who is Velti?

Subscribe to Newsletter