Archive for category TweenLite

Introduction to TimelineLite / TimelineMax

TimelineLite is a new library from the maker of TweenLite that enables you to group TweenLite instances (Tweens) to create the equivalent of the Flash Authoring Tool Timeline but in code. If you don’t know what TweenLite is head over to my tutorial on it first.

What is it for

The goal of this library is to give more power to the already powerful TweenLite library and to emulate some of the MovieClip’s functionalities. Once built, a TimelineLite instance will possess some methods that we’ve known for a long time: play(), stop(), gotoAndPlay(), etc. Three methods are used to create the timeline: append(), insert(), insertMultipple(). I prefer the insert method, it gives you more flexibility because you can set the time at which the Tween starts. The append() method will simply add your TweenLite instance at the end of the current timeline.

Here are some examples of how you would create a TimelineLite :

var myTimeline:TimelineLite = new TimelineLite();
 
//this will have 3 tween starting one after the one before is done
myTimeline.append(new TweenLite(mc, 1, {x:200, y:100}));
myTimeline.append(new TweenLite(mc, 0.5, {alpha:0}));
myTimeline.append(new TweenLite(mc, 0.5, {alpha:1}));
 
myTimeline.play();
 
//this one will have concurrent tweens a bit like layered tweens in the Flash Timeline
myTimeline.insert(new TweenLite(mc, 1, {x:200, y:100}), 0);
myTimeline.insert(new TweenLite(mc, 0.5, {alpha:0}), 0.75);
myTimeline.insert(new TweenLite(mc, 0.5, {scaleX:2}), 1.25);

Some of the cool stuff you can do with is that inside a TimelineLite you can insert other TimelineLite instances. Also you can add Labels and tween using TweenLite to those labels. You can tween the time of the timeline as well as the progress. Here are examples of what I just mentioned:

var myTimeline:TimelineLite = new TimelineLite();
myTimeline.insert(new TweenLite(mc, 1, {x:200, y:100}), 0);
myTimeline.insert(new TweenLite(mc, 0.5, {alpha:0}), 0.75);
myTimeline.insert(new TweenLite(mc, 0.5, {scaleX:2}), 1);
 
//Tween the timeline to any place in percent (from 0 to 1)
TweenLite.to(myTimeline, 0.5, {progress:1});
 
//Tween to a particular second in time (from 0 to the duration of the timeline)
TweenLite.to(myTimeline, 0.5, {time:0.75});

Its advantages

The major advantage that TimelineLite posesses over real timeline is the fact that it is dynamic. Meaning that you could make an function that takes a display object, that function would create an animation based on it and return a TimelineLite instance that you could use afterward. Then you could use that function to create the same animation on multiple display objects. Another example is that you could create animation based on what the user does, like you make him choose a number and you append that many instances on TweenLite in your TimelineLite (easy to do with traditionnal timeline too, but its just an example).

Its Max conterpart

As for the TweenLite library, TimelineLite has its Max equivalent, TimelineMax, which has more features like AS3 event listeners, repeat, repeatDelay, yoyo, addCallback(), removeCallback(), getActive(), etc.  Just to tell you how good this library is,  I have done a TimelineLite instance that tweened 25 display objects and 625 TweenLite instances and it worked perfectly fine, it wasn’t even slowing down.

, , , , , ,

4 Comments


Shaving some kb when using TweenLite (or TweenMax)

Introduction

I was working on some banners lately and with banners, every kilobytes counts. So I downloaded the new version of  TweenLite for AS2 (because I can’t do shit without TweenLite) and noticed so weird behavior (not so weird once you understand about the file size. I mostly has to do with the new plugin architecture, which I wasn’t acustumed to.

When you unpack the downloaded file from TweenLite, there is in there, a very usefull Plugin Explorer to help you understand how plugins work and to generate the code you need to activate only the plugins you want which looks something like:

import gs.plugins.*;
TweenPlugin.activate([ColorMatrixFilterPlugin, BlurFilterPlugin]);

With that code you would activate the ColorMatrixFilter plugin and the BlurFilter Plugin. I tought at first that that would be the only plugins activated and so the Plugin Explorer was telling me that if you activate only these plugin TweenLite should only add 5.5kb to my file.But that wasn’t what I was seeing it was more around 8kb (I know that isn’t much different but when you do banners, you fight for every kb).

Here is the solution

It turns out that when call the TweenPlugin.activate method, even if you say to activate only 2 plugins, it doesn’t deactivate the plugins that are activated by default. In order to do so, you have to go in the file TweenLite.as and comments the lines where these are activated like this:

...
//this starts on line 257 of the TweenLite.as file VERSION: 10.09
 
public function TweenLite($target:Object, $duration:Number, $vars:Object) {
if (TweenLite.timerClip._visible != false || !_tlInitted) {
 
TweenPlugin.activate([
 
//ACTIVATE (OR DEACTIVATE) PLUGINS HERE...
 
//TintPlugin,
// RemoveTintPlugin,
//   FramePlugin,
//   AutoAlphaPlugin,
//    VisiblePlugin,
//     VolumePlugin,
//   EndArrayPlugin
 
//So by commenting these previous lines, these plugins won't be activated thus saving you some kb
]);

You have to get your hands dirty, but in the end you gain a lot of flexibility plus you have only what you need activated.

More stuff on TweenLite

Well I’m always playing with TweenLite, so the other day I was using the ColorMatrixFilterPlugin on some really big MovieClips (9000px large). Well it turns out that Flash isn’t able to do bitmap manipulations (Matrices or Filters) on MovieClip bigger than 2800px.  So my Tweens on them would just not work (not TweenLite’s fault). What you have to do is segment your big MovieClip in chunks of 2800px and do a Tween on each of them at the same time.

Lastly, on the TweenLite website today you could read that Jack Doyle (TweenLite creator) and Grant Skinner (creator of gTween) will be working together on the next version of TweenLite/TweenMax. This can only mean great things for the future of this Tweening library! I look forward to the next version.

, , , , , ,

2 Comments


ActionScript 3 TweenLite Basic Tutorial

If you have been following this blog for some time now you have witnessed my evolution in the use of tweening engines. I was first using the Tween classes from Adobe and made a tutorial about them. After that I found Tweener, which I liked a lot for it ease of use and its speed improvement so I modified my tutorial to explain Tweener. My new evolution in the field of tweening engine is TweenLite mostly because it is faster and lighter than Tweener. Since I did a tutorial on how to use the two previous tweening engines; it is only normal that I do one also for TweenLite.

Well the first thing you have to do is download the classes of TweenLite. After that you need to import the class in order to use it; here is the import statement:

1
2
import gs.TweenLite;
import fl.motion.easing.*;

TweenLite as the name states is really light; it weights only 2k which is better than Tweener(10k). As you can see in the previous code I also imported the Adobe easing function. If you want to use easing, you will have to do that also which will had an additional 1k to the package.

TweenLite syntax is really similar to Tweener which is good since that was an advantage of using Tweener. Here is a simple tween using TweenLite:

1
TweenLite.to (rectangle, 3, {x:300, ease:Linear.easeIn});

The difference from Tweener’s syntax is that the second parameter in TweenLite is duration(how much time in seconds will the tween last) in this case 3 seconds. So this line of code will make the displayObject rectangle move from its currents position to a new position where its x value will be 300 in 3 seconds.

The same way you did it with Tweener, you can also tween multiple properties with TweenLite, here is an example:

1
TweenLite.to(rectangle, 1, {x:300, alpha:1, scaleX:1.5, scaleY:1.5, delay:2});

So this the rectangle will go to the x position 300, its alpha will raise to 100%, it will grow to 1.5 its original scale, all that in one second after a 2 second delay.

As you can see TweenLite offers all the advantages that Tweener offers with 2 more being light weight and being faster. I hope this tutorial will help you.

,

10 Comments


Using TweenLite in Preloaders

In the current project that I am doing, I need to do some Tweens in the preloader, nothing really fancy, just the habitual fade in / fade out ou move in / move out. I didn’t want to use Tweener because my preloader was only weighting 7k and using Tweener would have more than doubled the size of my preloader.

I was thinking at first about using the default Tweens classes from Adobe, but I decided to check out TweenLite. I was pretty amazed of what it can do. First it weights only 2k, but doesn’t include any easing functions, so if you want those you have to import the same classes as the Tween classes. If you use easing it adds 1k to the weight so it’s not too bad. So in total it’s only 1k more than the Tween classes.

So why use TweenLite instead of the Tween classes? Well the major advantage is that it uses a syntax really similar to Tweener. Since I use Tweener in the main Flash movie, I think it’s better for people that are going to use my code after me, they won’t have two syntax to learn in order to understand my code. Also this syntax is easy to understand and I can write it without have to copy and paste previous code.

Here is an example of code using TweenLite:

1
2
import gs.TweenLite;
TweenLite.to(mc, 1, {x:46, y:43});

, ,

4 Comments