Shape animation using the AS

Date: 25.2.2010, 14:40    Total views: 35554

In this thoroughly explained, detailed flash lesson, I will show you how to create shape animation using the AS code and mouse cursor. You can use this animation for some web banner. Let's start!









Example:

Move your mouse cursor over the image!



Step 1

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



Step 2


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

Step 3

Create a new layer above the layer background and name it shape.

Step 4

Select shape layer and draw a red circle shape about 100x100 px.

Step 5

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



Step 6

While the new made Movie Clip is still selected,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.

Step 7

Select the Selection Tool (V) and click once on the shape to select it. Then, go to the AS panel (F9) and enter this code inside the actions panel:

onClipEvent (load) {
 setProperty(this, _xscale, (200 - _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 8

Create a new layer above the layer shape and name it AS.

Step 9

Select the first frame of layer AS and go to the AS panel (F9). Then, go to the AS panel (F9) and enter this code inside the actions panel:

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

Step 10

Select frame 2 of layer AS and hit F6 key. While you're still on frame 2, go again to the AS panel and enter this code inside the actions panel:

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

Step 11

Select frame 3 of layer AS and hit F6 key. While you're still on frame 3, go again to the AS panel and enter this code inside the actions panel:

gotoAndPlay(_currentframe - 1);

We're done!

Test your animation and enjoy!

Download source file (.fla)

  Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!
Share
ShareSidebar