Circular mask animation

19.5.2009, 12:51
Submited in: Flash | Total Views: 15681

Using this thoroughly explained, detailed flash lesson, I will explain to you how to create advanced circular mask animation using the action script code and some special flash tricks. Using this lesson, you will also learn how to convert any layer into a mask, how to import any image into a flash stage, how to apply action script code on it and much much more! You can use this circular animation for some flash banner, or for some presentation. Let's start!


Step 1

First, save the image below!

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 248 pixels. Select white as background color. Set your Flash movie's frame rate to 28 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 into a flash stage. While the image is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.

Step 5

While the new made Movie Clip (image) 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 6

Double-click on the movie clip (image) on stage with the Selection tool(V). You should now be inside the Movie Clip.

Step 7

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

Step 8

After that, select 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) {
 var radius = 12+Math.random()*45;
 var speed = 6+Math.random()*20;
 var xcenter = this._x;
 var ycenter = this._y;
 var degree = 0;
 var radian;
onClipEvent (enterFrame) {
 degree += speed;
 radian = (degree/180)*Math.PI;
 this._x = xcenter+Math.cos(radian)*radius;
 this._y = ycenter-Math.sin(radian)*radius;

Step 9

Go back now on the main scene (Scene 1).

Step 10

Create a new layer above the layer image and name it mask.

Step 11

After that, select the Oval Tool (O) and draw a circle shape about 230x230 px. Then, while the circle shape is still selected, repeat 5. No, you get this:

Step 12

Select mask layer and convert it to a mask by right-clicking on the mask layer and selecting Mask. See the picture below.

We're done now!

Test your Movie (Ctrl+Enter) and enjoy!

Download example

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

Browse by category

Most popular tutorials