Toxiclab.org

Trendy presentation of image using a mask technique, action script code and Oval shapes

10.2.2009, 17:57
Submited in: Flash | Total Views: 6381

With this thoroughly explained, detailed flash lesson, you will learn how to create very trendy and cool image presentation using a mask technique and Oval shapes. This animation you can use when you want to present something, as flash banner, header, for some flash elements on web site... 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 Motion and Shape Tween, how to draw Oval shapes using the Oval Tool, how to use Free Transform Tool and much, much more! To make this lesson, you have to use a little action script code.

example:



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 350 pixels and the height to 264 pixels. Select white as background color. Set your Flash movie's frame rate to 33 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 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.



Step 6

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 7

Select the Selection Tool (V) and click once on the image to select it. After that, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 40%.



Step 8

Click now on frame 80 and press F5 key.

Step 9

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

Step 10

Using the Oval Tool (O), draw a circle shape about 20x20px and place it on the position like it is shown on the picture below!



Step 11

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



Step 12

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



Step 13

Click now on frame 25 and 50 and press F6 key. While you're still on frame 50, go to the Action Script Panel (F9) and enter this code inside the actions panel:

stop();

Step 14

Go back now on frame 25 and using the Free Transform Tool (Q) and Selection Tool (V), do like it is shown on the picture below!



Step 15

While you're still on frame 25, select again the Free Transform Tool (Q) and do like it is shown on the picture below!



Step 16

Select now frame 50, take again the Free Transform Tool (Q) and do like it is shown on the picture below!



Step 17

Select now frame 1 and go to the Properties Panel (Ctrl+F3) below the stage. On the left side, you will see Tween drop down menu. Select shape on it!



do this also for frame 25!

Step 18

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

Step 19

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



Step 20

Create now a new layer above the layer mask and name it image again. After that, click on frame 10 and press F6 key. Go back now on the first frame of layer image and press Ctrl+C key (Copy). After that, select frame 10 of layer image again and press Ctrl+Shift+V key (Paste in Place).

Step 21

Select again the Selection Tool (V) and click once on the copied image to select it. After that, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 50%.



Step 22

Create now a new layer above the layer image again and name it mask again. After that, click on frame 10 of layer mask and press F6 key.

Step 23

Go back now on frame 1 of layer mask and press Ctrl+C key (Copy). After that, select frame 10 of layer mask again and press Ctrl+Shift+V key (Paste in Place).

Step 24

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



Now, repeat this process until the alpha is not 100%!

Have a nice day!

Download example

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

Browse by category


Most popular tutorials