ActionScript3:Animating an Object

From virtualMV2015wiki
Revision as of 16:01, 14 January 2015 by Hesperides (Talk | contribs) (1 revision imported)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
 Home  Flash10 (CS4), Flash11 (CS5) <

Introduction

Animating an Object using ActionScript 3

Icon Objective.png

Objective

By the end of this exercise you should:

  • Use ActionScript 3 to animate a square across the stage.

Setting the Stage

Open a new ActionScript 3 movie. On the first layer, create a rectangle to use as a button. With the rectangle selected, convert to a button symbol. Double Click, add a new layer and add the text Click Me. Return to the stage. Give your new button a unique name, in this exercise its called clickMe. Place on the stage at an appropriate position.

With the shape tool, create on the stage a new shape - any will do. Convert this shape to a movieClip with an appropriate name. Now, delete the shape you have just created from the stage, don't worry it is still available in the library.

Open the library panel, select the shape you have just created, right click, select properties. Tick the boxes under linkages - Export for ActionScript and Export in frame 1. Give it a class name (we will need this to call later), in this example it is called smallSquare.

Sd smallSquare.png

Just click Ok if you get a message about the class definition not being found.

On your stage now, there will just be a button with a label saying click me. Now we add the ActionScript.

Adding the ActionScript

Create a new layer, and call it actions. Open the actions panel on frame one of the actions layer. Insert the following ActionScript:

var greenSquare:smallSquare = new smallSquare();
clickMe.addEventListener(MouseEvent.CLICK, moveSquare);

This code deals with declaring a variable greenSquare, and referencing the smallSquare you created to it. The next piece of code listens for a mouse click on the clickMe button and calls a function called moveSquare which will be created next.

Add the following Actionscript below that which you have just completed:

function moveSquare(evt:MouseEvent):void 
    {	
	this.addChild(greenSquare)
	greenSquare.x = 50;
	greenSquare.y = 170;	
	addEventListener(Event.ENTER_FRAME, onLoop);
    }

This code adds the object stored in the variable greenSquare (the smallSquare) at the x and y coordinates of the stage, dynamically adding the object at runtime instead of having it set up on the stage initially. Also added is an .addEventListener that looks for each time the frame is entered as the movie runs and causes the next piece of ActionScript to be executed:

function onLoop(evt:Event):void
    {
 
	if (greenSquare.x < 500)
	{
		greenSquare.x += 5;
	}
	if  (greenSquare.x  == 500)  
	{
	removeEventListener(Event.ENTER_FRAME, onLoop); 
	}
    }

This function states that while the greenSquare is at a position less than 500 on the x axis, each time the frame is entered, the greenSquare will advance its position by 5 px. When position 500 px is reached, the ENTER_FRAME event is removed and no further action takes place.

The Completed Code

The completed code is shown here - note the nested functions in this case:


var greenSquare:smallSquare = new smallSquare();
clickMe.addEventListener(MouseEvent.CLICK, moveSquare);
 
function moveSquare(evt:MouseEvent):void 
   {  
     this.addChild(greenSquare)
     greenSquare.x = 50;
     greenSquare.y = 170;
 
     addEventListener(Event.ENTER_FRAME, onLoop);
 
     function onLoop(evt:Event):void
     {   
         if (greenSquare.x < 500)
         {
             greenSquare.x += 5;
         }
         if  (greenSquare.x  == 500)  
         {
         removeEventListener(Event.ENTER_FRAME, onLoop); 
         }
 
     }        
   }

Each time you click the clickMe button, the code will execute and move the green square left to right across the stage. This code could be modified to be used in any number of ways. Instead of animated an object across the stage you could set its static position and use the onloop function to change its alpha value giving fade in or fade out effects, increase the size of an object or even add rotation for example. The animation at its resting point shown here:

Sd movethesquare.png

Extensions

The following code modifies the above slightly, and introduces an alpha increase to a static square. Adding an eventListener and associated function to the square itself, you can now click on it and it will remove itself from the stage. Adding buttonMode=true to the greenSquare ensures a hand mouse pointer appears when you mouse over the square so the user knows something can happen when you click on it.

var greenSquare:smallSquare = new smallSquare();
clickMe.addEventListener(MouseEvent.CLICK, showSquare);
greenSquare.addEventListener(MouseEvent.CLICK, removeSquare);
 
 
function showSquare(evt:MouseEvent):void 
{
	this.addChild(greenSquare)
	greenSquare.alpha = 0;
	greenSquare.x = 100;
	greenSquare.y = 100;
 
	addEventListener(Event.ENTER_FRAME, onLoop);
 
	function onLoop(evt:Event):void
 
	{
		if (greenSquare.alpha < 100)
		{
			greenSquare.alpha += 0.01;
		}
		if (greenSquare.alpha > 1)
		{
			greenSquare.buttonMode = true;
			removeEventListener(Event.ENTER_FRAME, onLoop);		
		}
	}
}
 
function removeSquare(evt:MouseEvent):void
	{
			this.removeChild(greenSquare);
	}


Icon References.png References


 

Day, S. (2010). ActionScript3:Animating an Object. Retrieved December 18, 2017, from http://www.virtualmv.com/wiki/index.php?title=ActionScript3%3AAnimating_an_Object