Output:



Download Source Files

Step 1: Open a new flash document and select Flash File(ActionScript 3.0)

Step 2: Select the Oval tool (o) from tools panel.

Step 3: Draw a circle in the center of the stage.

Step 4: Convert the circle to a movieclip.

Step 5: Give myBT as instance name to the circle.

Step 6: Now, Create Motion Tween animation of circle growing. (upto frame 30)

Step 7: Insert a new layer, and name it as actions. Here we will write our
actionscript 3 code.

Step 8: on the first frame copy & paste this code:


stop();
var rewind:Boolean = false;
myBT.addEventListener(MouseEvent.ROLL_OVER,growUP);
myBT.addEventListener(MouseEvent.ROLL_OUT,growDown);
myBT.addEventListener(MouseEvent.CLICK,gotoSite);

myBT.buttonMode = true;
myBT.useHandCursor = true;

function growUP(e:MouseEvent):void{
play();
rewind = false;
}

function growDown(e:MouseEvent):void{
rewind = true;
}
function gotoSite(e:MouseEvent):void{
navigateToURL(new URLRequest("http://www.getw3help.com","_blank"));
}

this.addEventListener(Event.ENTER_FRAME,revFrame);
function revFrame(e:Event):void{
if(rewind == true){
prevFrame();
}
}


Step 9: On the last frame create a blank keyframe and give stop(); command to it.

Step 10: Ctrl + Enter to test the flash movie.


Code Explanation:


var rewind:Boolean = false;


A variable used to store the rollover condition of the button. If the button is rolled over it will be assigned as true and if the button is rolled out, rewind will be false. If the button is rolled over it will be assigned as false and if the button is rolled out, rewind will be true.



myBT.addEventListener(MouseEvent.ROLL_OVER,growUP);
myBT.addEventListener(MouseEvent.ROLL_OUT,growDown);
myBT.addEventListener(MouseEvent.CLICK,gotoSite);


Adding event listeners to the button. On rollover state we call growUP function. On rolled out state we call growDown function. When the button is click we call gotoSite function.


myBT.buttonMode = true;
myBT.useHandCursor = true;


Since we are using a movieclip, to get the hand cursor on the button we have to enable the buttonMode and useHandCursor.


function growUP(e:MouseEvent):void{
play();
rewind = false;
}


This function is called when the movieclip is rolled over, this function calls the play(); and lets the flash movie to play.


function growDown(e:MouseEvent):void{
rewind = true;
}


When the movieclip is rolled out, we assign rewind as false.


function gotoSite(e:MouseEvent):void{
trace("hello");
navigateToURL(new URLRequest("http://www.getw3help.com"));
}

This function is called when the movieclip is clicked. We call the navigateToURL to go to the required URL.


this.addEventListener(Event.ENTER_FRAME,revFrame);
function revFrame(e:Event):void{
if(rewind == true){
prevFrame();
}
}

This code is similar to onEnterFrame in AS2, it keeps checking rewind, if rewind is true it just goes back to the previous frame from the current frame.

- End of Tutorial

Labels: ActionScript 3, Flash

Post a Comment

This is a great tutorial! The only thing I'm missing is how to use this in the context of multiple animated buttons. The project I'm working on requires 4 buttons on the stage. How do I implement this interaction in that way?

Thanks!

By  JonCole, at October 23, 2008 7:14 AM  

hi joncole,
Its easy, create a new movieclip, copy and paste these frames in that movieclip. Similarly for other 3 buttons too..

By  makubex, at October 25, 2008 3:09 AM  

Thank you!! This tutorial helped me so much! I have been trying to figure out how to do this for a long time now and finally I have the answer!

By  NIKLOKE, at November 9, 2008 6:41 AM  

The code Explanation "When the movieclip is rolled out, we assign rewind as false." is wrong.

Rewind should be True as this moment.

By  Hermus, at November 13, 2008 12:58 AM  

@Hermus
Thanks for reporting the error, I have changed it.

By  makubex, at November 13, 2008 7:41 AM  

Amazing tutorial, made very simple for newbies like me.
My only problem, is when I have copy and pasted the movie clip buttons to my site, I dont know where to add script to navigate the buttons to frame labelled sections on my main stage...

I have tried adding it to the original script from the tutorial, but replacing go to site with appropriate script, but no luck :(

If anyone could tell me where I am going wrong, it would be very much appreciated!

Thanks in advance for any help!

By  radium, at January 27, 2009 11:43 AM  

Hey !
That's cool but i think the easiest way to do that is to use _frame properties of tweener

By  Poilane, at February 2, 2009 6:45 AM  

Great Tutorial! Exactly that, what I needed!

But with one thing, I need your help:
It would be perfect, if you'd have the whole tween and scripts not in the scene1 but in the movieclip (e.g. 'myCircle').

The advantage would be that you could add more than one Button to a bigger project (like a homepage), where the frames of scene1 are needed for a preloader and the single pages...
That would also solve the problem of radium.

So, I hope, that you can help me (I'm new at Flash and so it'd take a lot of time, to trie to do this at my own)

By  Pascal, at February 2, 2009 10:01 AM  

Help Please!!! I am getting my butt kicked by this. I am a newbie in actionscript so i am sure this will help me to better understand lots of things .... I am trying to play 3+ buttons in my movie and I can not make it work. I am able to get all the buttons to function at the same time but not as they are supposed to... 1 at a time.

Makubex you said "Its easy, create a new movieclip, copy and paste these frames in that movieclip. Similarly for other 3 buttons too.." << This ain't working for me can you please break this down just a little further for me please.

By  tattoosnme, at July 5, 2009 6:15 PM  

Okay ... the lights are on and I am now home. I figured it out. Call me Dangerous.

Thank you this tutorial is great!

By  tattoosnme, at July 6, 2009 5:45 AM