Hey guys, sorry that I haven’t been updating or writing any tutorials for some time. Life has been busy since I started work at Hybrid. Things are constantly going on in the company, you barely have time to breathe and to be honest, I don’t feel the impact of the economy crisis working in there. So for the past week, I’ve been finishing work at 8+ and played a little pool with my coworker before heading back, and without having time to do much, it’s already the end of the day to welcome the new day. From what I see going on in the company, it’s going to be a good busy year ahead. Anyway I hope to write up something this weekend.
So GTween has released the 5th Beta and it’s looking really promising. Check the demo out here.
Update: TweenLite/TweenMax has also released version 10. I’m still stuck in between the two in choosing the right one. Leave your opinions
A few days ago, I posted about different tween engines and Doris requested that I post more about GTween,so here we are, with my first real tutorial on this blog about GTween. Basically, it’s just a basic setup to showcase how GTween can be used, and how you would write the code for tweenings. Make sure you download the class here.
The above example shows two circles with one “follower” and one “reverser”. They function just like how they’re being named! I would expect that you already know the basics of Actionscript 3 and Event LIstener and I wouldn’t be going through on those.
Here’s the code:
import com.gskinner.motion.GTween;import fl.motion.easing.*;var tween:GTween;var reversed:Boolean;stage.addEventListener(MouseEvent.CLICK, reposition,false, 0,true);function reposition(e:MouseEvent):void{stage.removeEventListener(MouseEvent.CLICK, reposition);
reversed = false;
tween = new GTween(click_txt,.3,{alpha:0},{ease:Quadratic.easeIn});
tween = new GTween(follower,.6,{x:mouseX,y:mouseY},{ease:Quadratic.easeOut});
tween = new GTween(reverser,.6,{x:mouseX,y:mouseY},{ease:Quadratic.easeOut, autoReverse:true, completeListener:handleComplete});}function handleComplete(e:Event):void{if(reversed){
tween.autoReverse = false;stage.addEventListener(MouseEvent.CLICK, reposition,false, 0,true);
tween = new GTween(click_txt,.3,{alpha:1},{ease:Quadratic.easeOut});}
reversed = true;}
There are three movieclips on stage: follower, reverser and click_txt. The code is pretty straightforward and I’m going to go through what it means.
The first line is the import for GTween class and the second line is to import Flash extended easing class that will be used for adding easing to GTween.
function reposition(e:MouseEvent):void{stage.removeEventListener(MouseEvent.CLICK, reposition);
reversed = false;
tween = new GTween(click_txt,.3,{alpha:0},{ease:Quadratic.easeIn});
tween = new GTween(follower,.6,{x:mouseX,y:mouseY},{ease:Quadratic.easeOut});
tween = new GTween(reverser,.6,{x:mouseX,y:mouseY},{ease:Quadratic.easeOut, autoReverse:true, completeListener:handleComplete});}
The reposition is our main function, we set the reversed boolean to false whenever the user clicks as the reverser has not reversed yet. The next 3 lines show the GTween with its first property being the movieclip it’s tweening, second as the time it’ll take to tween, the third will be an object that holds each property you want to tween, and the fourth is another set of object for easings, event listeners and other extra controls (in this case, I have used the autoReverse property). And you’ll see that I added a completeListener where it will run the handleComplete when the tween completes.
function handleComplete(e:Event):void{if(reversed){
tween.autoReverse = false;stage.addEventListener(MouseEvent.CLICK, reposition,false, 0,true);
tween = new GTween(click_txt,.3,{alpha:1},{ease:Quadratic.easeOut});}
reversed = true;}
The handleComplete function will run when the tween completes, so for our case, it will run before it is being reversed, which is why I added a boolean to track it, it will check if it has reversed to its position, if not, it will set it to true, and the next time the handleComplete runs again, it will run the if function where I then set the autoReverse property to false, and add the mouse click listener again.
So as you can see, GTween is no harder than any other tweening engines and it does give you alot of controls. Play around with it for now and I’ll be posting another advanced tutorial on GTween in a few days.
I’m going to kick start my blog about Flash with the question that people asked me most of the time. Which tween engine should I use? I would say it’s going to be based on your own preference when it comes down to this. With Actionscript 3, the one that I used most of the time will be Tweener. It allows you to tween different sets of properties in one single line, such as:
However, while I was working back at Neoganda, we worked mostly in AS2, therefore I was introduced with MC Tween, which is also developed by Zeh Fernando, who’s also the man behind Tweener. MC Tween is not a class file, so, all you need to do is just #include the as file on your first frame and you would never need to import it anymore. It is pretty simple to be called upon as it adds on properties to all the display objects. Instead of writing all the properties in one line like Tweener, this is how you would write to move the y position of an object.
mc.yTo = 250;
Pretty straightforward eh? Recently, I’ve moved on to use GTween by Grant Skinner. It is still currently at its beta phase, but it is already looking really promising. GTween is built to be fast and small. It is also and Object Oriented Tween Engine that will best suits developers with its flexibility. How you would create this tween is by writing:
var myTween:GTween = new GTween(mc, 1,{x:250});
So you could then add event listeners to these tween to listen for onComplete events or such.
So as you can see, there’s a wide list of Tween enines that you could use, or you could even write your own tweens from scratch. These list of Tween engines are here as an option to make your life easier. I’ve came across this article a while ago, “Speed Test - Tween Engine Comparison Tool” that shows you the performance of different tween engines, apparently tweener is running really slow with TweenLite/TweenMax leading with its fast performance. However, it is also one of the tween engines that I haven’t get my hands on. Guess I’ll be looking into it and probably write a short tutorial and feedback about it a few days later. So for now, go hop on to it and run the test yourself so you could decide which suits you the most.
No matter which one you decide to use, the way to use and write them wouldn’t be that big of a difference. Therefore it wouldn’t be hard for you to hop on a new engine if you’re working on someone’s file who is using the other tween engine. So no worries on that and happy tweening.