Carlos Escalante // Personal Blog // design flash php music

Creating an animated button with a MovieClip.

Posted by PaGe | Filed under Flash & AS

Have you ever seen a flash button that have transitions between RollOver and RollOut? Well, this thing is done by creating an animated movieclip with a little bit of actionscript:

First, create a movieclip, and inside create your button design: a square shape with a text field or anything you want.
Edit this movie clip.
Create an animation with your shape and text inside this movie clip.

Then, insert a new layer in this movie clip, and insert this ActionScript in the first frame


//all this code is inside the complex button so you can stick as many as you want
//on the stage and all will work.. they all will have this code in it..

stop(); // stop the movie clip from playing (stop button from growing, we want that when the mouse rolls over only

this.onEnterFrame = function(){
	if(rewind == true){   //if rewind switch is set to true play backwards
		prevFrame();        // play backwards
	}
}

this.onRollOver = function(){
	rewind = false; //set variable (or switch) that decides wether ot not to play backwards...
	play();    // play this movie clip.. (grow the button(tween));
}

this.onRollOut = function(){
	rewind = true;    //set or rewind switch to true so it will play backwards...
}

Now create a Keyframe at the end of the animation in this Layer, and insert a stop(); in the Actionscript panel.
And finally, save the document, publish it, and test it!