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

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  

hello, i have used your code and it works great :)

however, i would like to be able to use motion XML instead of the actual timeline to create the tween, and achieve the same results. is this possible?

By  prycey, at November 5, 2009 10:29 AM  

Wow, I cannot get this to work for the life of me...anyone have any idea why???

By  rit, at November 29, 2009 12:30 AM  

Nevermind, I figured it out. For some reason I couldn't just copy the code in the page...I had to use the code from the source file.

How do you do the same effect but with multiple buttons? I tried creating a new movieclip with a different instance name and then added a few lines of code but it didn't seem to work too good. Anyone figure this out?

Thanks for posting this script btw...I've been trying to figure this out for hours!

By  rit, at November 29, 2009 1:37 AM  

navigateToURL(new URLRequest("http://www.getw3help.com","_blank"));

There's an error in this line. The correct syntax is:

navigateToURL(new URLRequest("http://www.getw3help.com"),"_blank");

Cheers,
Elias

By  Elias, at December 7, 2009 2:32 PM  

...Sorry, i forgot: but thanks for the great tutorial ;) Very helpful for me!

By  Elias, at December 7, 2009 2:33 PM  

Thanks Elias, corrected it...

By  makubex, at December 8, 2009 8:46 AM  

amazing tutorial, I used it on 11 buttons in my project and is working well.
Really spectacular
thanks

By  Pedro, at December 12, 2009 6:09 AM  

Hi -

I successfully completed my own version of this tutorial - but I also have the same problem as others - I can't seem to make multiple buttons work separately...

I do not understand the following thread from makubex here below that instructs how to solve this

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

I don't understand what is meant by "these frames" and how would you paste them into a "movie clip." Please ... someone help me!

Thank You

.

By  blogosaurus, at December 30, 2009 8:15 PM