How-to

To learn more about TweenMax and TweenLite, go to

To learn about the flash transition class

Draw a rectangle the size of the screen (240 x 380px) on the stage.

Convert the rectangle to an mc named “box”.

Double click on the mc to get to the box timeline.

Create a new layer named “button”.

Draw a rectangle and convert it to a button named “circle_btn”.

Name the instance of the button “circle_btn” in the properties inspector.

Go back to the main timeline and name the instance of the box on the stage “box” in the properties inspector.

Create a new layer named “actions” and paste the following code in the actions palette:

import com.greensock.*;
import com.greensock.easing.*;

// ————VARIABLES——————————————–

//object position variables
var xPos:Number = stage.stageWidth / 2;
var yPos:Number = stage.stageHeight / 2;

// ————ADD OBJECT TO STAGE———————————-
/*
//add child to stage variables
var box:MovieClip = new box_mc();

//add the movieclip from the library to the stage
addChild (box);
*/

// ————SET INITIAL STAGE POSITIONS——————————————–
//object name and postion (refer to position variables above)
box.x = xPos;
box.y = yPos;

// ————LISTENER AND FUNCTION FOR CLICK ON BOX——————————————–
box.circle_btn.addEventListener(MouseEvent.CLICK, onCircleClick);

function onCircleClick (event:Event):void{
//add tween for box currently on stage
TweenMax.to(box, 1, {x:-120, y:yPos, alpha:1, ease:Circ.easeOut, delay:.15});
}

Drag the same pink and black box mc’s from the previous demo onto the stage.

Name them “box_gray” and “box_pink” respectively.

Create a new layer named “actions” and paste the following code into the actions palette:

box_gray.addEventListener(MouseEvent.MOUSE_DOWN, dragGray);
box_gray.addEventListener(MouseEvent.MOUSE_UP, dropGray);
box_pink.addEventListener(MouseEvent.MOUSE_DOWN, dragPink);
box_pink.addEventListener(MouseEvent.MOUSE_UP, dropPink);

//box_gray.addEventListener(Event.ENTER_FRAME, enterGray);
box_pink.addEventListener(Event.ENTER_FRAME, hit);

function dragGray (event:MouseEvent) : void {
event.target.startDrag();
}

function dropGray (event:MouseEvent) : void {
event.target.stopDrag();

}

function dragPink (event:MouseEvent) : void {
event.target.startDrag();
}

function dropPink (event:MouseEvent) : void {
event.target.stopDrag();

}

function hit (event:Event) : void {
if (box_pink.hitTestObject(box_gray)) {
box_gray.alpha = .25;
} else {
box_gray.alpha = 1;
}
}

Create a pink box on the stage and convert it to an mc named “box_pink”. Before clicking okay, check the radio button to “export for Actionscript”.

Create a black box on the stage and convert it to an mc named “box_black”. Before clicking okay, check the radio button to “export for Actionscript”.

Delete both instances from the stage.

Select the first keyframe in the timeline and paste the following code into the actions panel:

var boxBlk:MovieClip = new box_black();
var boxPink:MovieClip = new box_pink();

var xPos = stage.stageWidth / 2;
var yPos = stage.stageHeight / 2;

boxBlk.x = xPos;
boxBlk.y = yPos;
boxPink.x = 120;
boxPink.y = 150;

addChild (boxBlk);

boxBlk.addEventListener(MouseEvent.CLICK, onBlackClick);
boxPink.addEventListener(MouseEvent.CLICK, onPinkClick);

function onBlackClick (event:MouseEvent) : void {
removeChild (boxBlk);
addChild (boxPink);

}

function onPinkClick (event:MouseEvent) : void {
addChild (boxBlk);
removeChild (boxPink);
}

Create a box on the stage and convert it to a movieClip named “box”.

Name the instance of the mc “box” using the properties inspector.

Create a new layer named “actions” and paste the following code into the actions panel:

//add child to stage variables
var box:MovieClip = new box_mc();

//add the movieclip from the library to the stage
//addChild (box);

//position box on stage
box.x = stage.stageWidth / 2;
box.y = stage.stageHeight / 2;

//scale and transparency box
box.scaleX = .25;
box.scaleY = 1;
box.alpha = .1;

//enter frame listener and function to animate when movie begins
box.addEventListener (Event.ENTER_FRAME, animate);

function animate (event:Event) : void {
event.target.scaleX += .01;
event.target.scaleY -= .01;
event.target.alpha += .05;
event.target.rotation += .5;
}

Bookmark this page and refer to it when you are trying to learn anything new on the computer.

It will be your best friend

http://tutsplus.com/