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.