Posts Tagged TweenLite

Using Delegate to have the right scope when using TweenLite, Tweener and Events in ActionScript 2

Not so long ago I was having a bad day using Flash 8 and ActionScript 2 just after completing a project in ActionScript 3. Now this Dan Hunter dude made a comment saying I should try using this Delegate class. Well last week I thought I should give it a try so I head over the blog post and try to figure out what it is used for. I had heard the word Delegate before, but never quite understood it.

So I look at the post and it is exactly what I hate in a post; it is very technical and not quite to the point. I don’t think I am a bad programmer and I should understand stuff like that but there is something missing in the post: why should I use this class in the first place?

Well I am going to tell you why you should used this class; because it will give you the right scope of the function called by the delegate function. Ok, ok maybe I’m not quite clear either, but go read this article on how to use the Delegate class and you should understand everything. I found it while installing the new version of Flash Develop (beta 6). The real useful thing about the Delegate class is that it permits you to use the “this” you want inside the function you want.

Here is my example using events; let’s start by using a simple button on click custom event. So you make this custom button class that handle the rollover and rollout internally and when you have a onrelease event, you send an event to the class containing the button. You do so in order to keep your code clean and well organized. Here is the code you would have for the event listener inside the class that will contain the custom button:

1
2
3
4
5
myCustomButton.addEventListener("click", handleClick);
 
function handleClick(evt:Object):Void{
  trace (this)//this will actually refer to myCustomButton instead of the containing class
}

By using the Delegate class, “this” will refer to the containing class. Here is how you do it:

1
2
3
4
5
myCustomButton.addEventListener("click", Delegate.create(this, handleClick));
 
function handleClick(evt:Object):Void{
  trace (this)//this will refer to the containing class
}

This will save you the trouble of having to find in which scope you are and also having to use this._parent all the time.

Another good use of the Delegate class is when you use the onComplete argument with Tweener or TweenLite. When you use the onComplete argument with both these Tweening engines, it will call the function you specify it when it will be done Tweening. With Tweener this function will be scoped to the MovieClip your doing a Tween on and with TweenLite the function will be scoped to the TweenLite Object which is not very convenient. Here is how you would use the Delegate class for these situation:

1
2
3
4
5
6
7
Tweener.addTween(myCustomButton, {_alpha:100, time:1, onComplete:Delegate.create(this, doNextStep)});
 
TweenLite.to(myCustomButton, 1, {_alpha:100, onComplete:Delegate.create(this, doNextStep)});
 
function doNextStep():Void{
  trace (this)//this will refer to the class containing the Tweening code
}

Well this will save me a lot of trouble. I was thinking that I was a good programmer and that experience didn’t really mean anything but these little things, like using the Delegate class to have the scope you want or know that TweenLite is faster than Tweener which is faster than the Adobe Tween classes,  can only be acquired with experience and they make your days a whole lot better. This kinda is a lesson of humility.

, ,

2 Comments


TweenLite, Tweener, GOASAP | Fun with animation packages

I have been speaking a lot about Tweener these days and for a good reason; it’s a really good as3 animation library. I can’t say I have been having trouble with it but I found evidence from different sources that it might not be the best animation package for what I want to do.

What I am doing is mostly websites and in those website I use ActionScript to make everything move; I rarely use the timeline. All of my tweens are at most 1 second long but most of the time they last about 0.5 second. I liked Tweener because it was way better than Adobe’s Tween classes but I found from 2 different sources (TweenLite, GOASAP) that TweenLite is faster for small tweens than Tweener. You might know that already, but being fast is one of the most important attribute for me in a tweening engine. Not so much because I use too much animation at the same time but more because that when I start Tweens, I don’t want them to eat all of the cpu, I want them too leave as much processing power for other stuff like timeline animations, video etc. These is all to say that I am changing all my code from Tweener to Tweenlite (that I had previously changed from Adobe Tween classes to Tweener) because I need the extra speed badly.

Something came up since I started this project. From the maker of the Fuse kit comes GOASAP. Which looks very promissing; it’s  not an animation package per say, it’s more like animation package building blocks. Since sometime there is a lot of overhead in animation engine for things that you will never use, Moses Supposes made us all animation library developers. The GOASAP code base is in AS3 and I can’t wait to start using it. In the mean time I invite you all to go and start developing your own animation code;

, , ,

1 Comment


Finally something I can show – Twist Image Holiday eCard

I didn’t write a lot these past weeks because first it’s the holidays and second because I worked pretty late on making the Twist Image holiday eCard. Basically, it’s a collection of videos that have marked the year 2007 submitted by friends of the Twist Image president Mitch Joel. I had the chance to watch these videos a lot of time and I can say they are all pretty good.

What is nice with this microsite is that I used a lot of new technologies. First and foremost it’s done using flash 9 and ActionScript 3. I also used SWFObject 2.0 and SWFAddress 2.0. You can see the deep linking in action when you go to a URL like this: http://www.twistimage.com/share2007/#/Seth-Godin/.By using SWFAddress it also enabled the use of Google Analytic. Finally I also used Tweener. I wanted to use TweenLite for my preloader but I fad a problem with it and the answer came when the site was already launched. For the snow I used the code from Galaxy Goo.

All in all this was a pretty good project, I wish I would have had more time to perfect it, like making rollover for the scrollbar and adding some sound effects but this was not a client project so it didn’t have priority in the company. Well now I am back working in ActionScript 2 and I can’t wait to get another AS3 project.

, , , , ,

1 Comment


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