• Pin It

Tutorial: Simple Transition Menu – ActionScript 3.0

This tutorial is addressed to those flash beginners who want to find out how tweens works in ActionScript 3. I’ll create a simple and useful menu from scratch. I’ll try to be as clear as i can but for those who get lost on the way i’ll gladly answer your questions/comments.

Here is what we’ll end up with:

1. Open up Flash and create a new ActionScript 3.0 file.

2. Create a new MovieClip (Insert->New Symbol). I named it “mainButton”. Check the “Export for Actionscript” box. We will use this generic button to create the other buttons using Actionscript.


3.a Now inside the MovieClip we will create the button elements. Select the Text Tool and type “Home”. You can change it to whatever you like. Give it an instance name – “txt1”. Also don’t forget to embed the font because we will use it for animation. See the image below for other properties.


3.b Create a new layer and draw a rectangle. I gave it a radial gradient and here are the other values: width: 100 ; height: 1.8 ; x: -50; y: 10;


3.c Create another layer. Draw another rectangle and copy the “Home” TextField and paste it in this layer you created. Change the instance name with “txt2”. Select both the rectangle and the TextField and press F8 to create another MovieClip with them. Name it “txtButtom”. Also give it an instance name “txtButtom”. See the images below for reference.


3.d Now we will create a layer mask. Make a new layer and move it to the top. Here you will draw a rectangle(see the images below for reference, the red rectangle is the mask) and after that right click on the layer and select “Mask”. Move the other layers according to the image below. The last layer is the hit area, copy the rectangle from the mask layer and paste it here and set the Alpha property for the rectangle to 0.


4.a Now we’ll move to the Actionscript. Get out from the “mainButton”. In the first layer of the scene, open up the Actions tab. We’ll import the transitions libraries and create instances of the “mainButton”.

import fl.transitions.easing.*;
import fl.transitions.*;

var home = new mainButton();

home.x= 80;

var portfolio = new mainButton();

portfolio.txt1.text = "PORTFOLIO";
portfolio.txtButtom.txt2.text = "PORTFOLIO";
portfolio.x= home.x + home.width;

var contact = new mainButton();

contact.txt1.text = "CONTACT";
contact.txtButtom.txt2.text = "CONTACT";
contact.x= portfolio.x + portfolio.width;

4.b We’ll add button properties and listenes to the instances for RollOver and RollOut.

home.buttonMode = true;
home.useHandCursor = true;
home.mouseChildren = false;

portfolio.buttonMode = true;
portfolio.useHandCursor = true;
portfolio.mouseChildren = false;

contact.buttonMode = true;
contact.useHandCursor = true;
contact.mouseChildren = false;

home.addEventListener("mouseOver", mouseRollOver);
portfolio.addEventListener("mouseOver", mouseRollOver);
contact.addEventListener("mouseOver", mouseRollOver);

home.addEventListener("mouseOut", mouseRollOut);
portfolio.addEventListener("mouseOut", mouseRollOut);
contact.addEventListener("mouseOut", mouseRollOut);

4.c And finally create the mouseRollOver and mouseRollOut functions.

function mouseRollOver(e:MouseEvent) {
	var easingFunc = Back.easeOut;
	var xsa = 30;
	var xfa =-5;
	var duration =0.5;
	var myTween:Tween = new Tween(e.target.txtButtom, "y", easingFunc, xsa, xfa, duration, true);

	var easingFunc2 = Regular.easeOut;
	var xsa2 = -16.3;
	var xfa2 = -46;
	var duration2 =0.5;
	var myTween2:Tween = new Tween(e.target.txt1, "y", easingFunc2, xsa2, xfa2, duration2, true);


function mouseRollOut(e:MouseEvent) {
	var easingFunc3 = Regular.easeOut;
	var xsa3 = -5;
	var xfa3 =30;
	var duration3 = 0.5;
	new Tween(e.target.txtButtom, "y", easingFunc3, xsa3, xfa3, duration3, true);

	var easingFunc4 = Regular.easeOut;
	var xsa4 = -46;
	var xfa4 = -16.3;
	var duration4 = 0.5;
	new Tween(e.target.txt1, "y", easingFunc4, xsa4, xfa4, duration4, true);

5. Enjoy and experiment with other tweening effects. Download the source file.

Author: Alin

Passionate about web and graphic design, photography and climbing. Follow me at Twitter , Facebook and Google+