Toxiclab.org

Image animation using the AS

15.3.2009, 17:57
Submited in: Flash | Total Views: 9391

Using this thoroughly explained, detailed flash lesson, you will see how to create advanced Image animation using the Action Script code and mouse moving. You can use this animation for some flash banner, presentation...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 instance name, how to apply action script code on it and much much more!

Move your mouse cursor over the image!

Example:



Step 1

First, find any image which you like to use for this lesson!



Step 2


Choose now File > Import > Import to stage (Ctrl+R) and import the image into a flash stage.

Step 3

While the image is still selected, press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 4

While the new made Movie Clip (image) is still selected, go to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip "image". See the picture below!



Step 5

Select now the Selection Tool (V) and click once on the image to select it. After that, go to the Action Script Panel (F9) and enter this code inside the actions panel:

onClipEvent (load) {
 setProperty(this, _xscale, (300 - _root._xmouse) * 2);
 setProperty(this, _yscale, (300 - _root._ymouse) * 2);
 setProperty(this, _alpha, 100);
}
onClipEvent (enterFrame) {
 setProperty(this, _xscale, _xscale - 10);
 setProperty(this, _yscale, _yscale - 10);
 if (_alpha > 4) {
  setProperty(this, _alpha, _alpha - 5);
 }
}

Step 6

Click now on frame 3 and hit F5 key.

Step 7

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 8

Create now a new layer above the layer image and name it action. Click now on the first frame of layer action and go again to the Action script panel (F9). After that, enter this code inside the actions panel:

i = 0;
setProperty("image", _visible, false);

Step 9

Select now frame 2 of layer action and press F6 key. After that, enter this code inside the actions panel:

duplicateMovieClip("image", "image" + i, i);
removeMovieClip("image" + (i-15));
if (i > 14) {
 i = 0;
}
i++;

Step 10

Select now frame 3 of layer action and press F6 key. After that, enter this code inside the actions panel:

gotoAndPlay(_currentframe - 1);

Step 11

Press Ctrl+J key on the keyboard (Document Properties) and set your Flash movie's frame rate to 26 and click ok.



Step 12

Select the Selection Tool (V) and select the image. After that, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



We're done!

Enjoy!

Download example

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

Browse by category


Most popular tutorials