Flash tutorials
Home 3D (2) Actionscripting (66) Animation (108) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (61) Text Effects (38)

3D animation by mask

8.5.2007, 2:27    Total views: 102846

In this detailed lesson made for flash, you will learn how to create 3D animation using the mask and some special flash tricks. To create this tutorial, you don't have to use Action Script. You will also learn:

1. How to use Free Transform Tool (Q),
2. How to use Align Panel,
3. How to convert any object into a Symbol and more.



Step 1

Open a new Flash document.

Step 2

Press Ctrl+J or select Modify > Document to open the Document Properties dialog. Set the width of your document to 450 pixels and the height to 400 pixels. Set the background colour as whatever you like. For Frame rate set 14 fps and click ok.

If you like, you can Import some picture and use it as background. I do that. ;).

Step 3

Create a new layer above the layer 1 (background layer) and name it lines. After that, take the Line Tool (N). Select a line color, and choose Solid as type of line, with thickness set to 1.



Then, draw a vertical line like it is shown on the picture below.



While the line is still selected, press Ctrl+G key (Group) to group it. After that, go to the Align Panel (Shortcut key: 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 4

Take again the Line Tool (N), and draw a horizontal line and place it on the position like it is shown on the picture below.



While the horizontal line is still selected, press again Ctrl+G key (Group) to group it.

Step 5

Create a new layer above the lines layer and name it rectangle 1. After that, take the Rectangle Tool (R), block the Stroke Color, for fill color choose any color and draw a rectangle about 250x90px and place it on this position:



While the rectangle is still selected, press F8 key (Convert to Symbol) to convert this recatngle into a Graphic Symbol. See the picture below.



Step 6

Click on frame 20 of layers background and lines and press F5 key. After that, click on frame 20 of layer rectangle 1 and press F6 key. Then, place the rectangle on the center of lines using the mouse or by arrows key. See the picture below.



Step 7

Take the Free Transform Tool (Q), press and hold down Shift key and decrease the rectangle maximal. See the picture below.



Step 8

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.



Step 9

Create a new layer above the rectangle 1 layer and name it rectangle 2.

Step 10

Click on the first frame of layer rectangle 2, take the Rectangle Tool (R), for fill color choose any color and draw another rectangle above the first recatngle about 350x115px. See the picture below.



Step 11

While the new made rectangle is still selected, press F8 key (Convert to Symbol) to convert this rectangle into a Graphic symbol.



Step 12

Click on frame 20 of layer rectangle 2 and press F6 key.

Step 13

While you're still on frame 20, take the Selection Tool (V), and place the top of rectangle on the center of lines. See the picture below.



Step 14

Take again the Free Transform Tool (Q), press and hold down Alt key and do like it is shown on the picture below.



Step 15

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.



Step 16

Create a new layer above the rectangle 2 layer and name it mask. See the picture below.



Step 17

Take the Line Tool (N), and draw a triangle like it is shown on the picture below.



Step 18

After that, take the Paint Bucket Tool (B) and paint the recatngle. See the picture below.



Step 19

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!

Test your Movie (Ctrl+Enter).

Bye!

Download source file (.fla)

Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 296736

2. High-tech city animation
Total views: 247566

3. Water effect
Total views: 227031

4. Photo slide show
Total views: 209320

5. Special Picture Effect
Total views: 184895



Related links