Toxiclab.org

Movie Clip Animation on mouse click using the AS3

26.2.2009, 18:57
Submited in: Flash | Total Views: 18928

This, step by step action script 3 flash lesson, will show you how to create movie clip animation using the mouse click and image. Using this lesson, you will also learn how to import any image into a flash stage, how to convert it into a Movie Clip Symbol, how to create Linkage class and much much more!



Step 1

First save the image below, which we will use for this lesson!





Step 2


Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 300 pixels and the height to 225 pixels. Select white as background color. Set your Flash movie's frame rate to 30 and click ok.



Step 3

Call the current layer image. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 4

Choose now File > Import > Import to stage (Ctrl+R) and import the image that you just saved in step 1!

Step 5

While the image is still selected, press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol. Note! - Don't close the Movie Clip Window.



Step 6

While the Movie Clip window is still open, click on Advanced button, select Export for ActionScript, and for class type image and click ok!



After that, ActionScript Class Warning panel will open - just hit ok!



Step 7

Select now new made movie clip (image ) on the stage and press delete key on the keyboard.

Step 8

Select now the first frame of layer image and press F9 key to open the Action Script Panel. After that, enter this code inside the actions panel:

function Main() {


stage.addEventListener(MouseEvent.CLICK, AddCircle);

}
Main();
 
function AddCircle(e:MouseEvent):void {

var newCircle:image = new image();
this.addChild(newCircle);
 

newCircle.x = mouseX;
newCircle.y = mouseY;
 

newCircle.scaleX = 0;
newCircle.scaleY = 0;
 
newCircle.alpha = 0;
 

newCircle.addEventListener(Event.ENTER_FRAME, ZoomCircle);

}
 
function ZoomCircle(e:Event):void {


var circleMC:MovieClip = MovieClip(e.target);
 

circleMC.scaleX += .05;
circleMC.scaleY += .05;
 

if (circleMC.scaleX < 3) {

circleMC.alpha += .03;

} else {

circleMC.alpha -= .03;
 

if (circleMC.alpha < .1) {

circleMC.removeEventListener(Event.ENTER_FRAME, ZoomCircle);

}

}

}

We're done!

Test your movie!

Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials