Toxiclab.org

Advanced puzzle animation with sound

5.6.2008, 13:55
Submited in: Flash | Total Views: 37086

In this lesson made for Flash 8, I will teach you how to make a cool and very advanced puzzle animation with sound using some special flash tips and tricks. You don't have to use action script code to make this lesson. This animation, you can use for any flash header, banner, animation, presentation....



Step 1

Open a new Flash document by selecting File > New > Flash document and clicking ok. Set the dimensions of your Flash movie to 300 by 200 pixels and set the speed (frame rate) to 80 fps. Select white as background color and click ok.



Step 2

First of all, download the sample images for this lesson that you'll use to quickly create this lesson.

Step 3

Select File > Import > Import to Library. In the file explorer window that appears, find the three images (image1,image2 and image3) and Shift-click to select them all. Then click Open. If you now open your flash library (Ctrl+L key) you will see a three images that you just imported. See the picture below.



Step 4

Take the Selection Tool (V), and using the "drag and drop" technique, move the first image from the library on the stage.

Step 5

While the 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 layer 1 to rename its name in image1. After that, click on frame 100 and press F5 key.

Step 7

Create a new layer above the layer image1 and name it image2.

Step 8

After that, select the layer image 2 and using the "drag and drop" technique again , move the second image from the library on the stage.

Step 9

Then, repeat step 5.

Step 10

Create a new layer above the layer image2 and name it mask1. Afte that, select the mask1 layer and take the Rectangle Tool (R).

Step 11

In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose #D6D6D6 and draw a “rectangle” about 38x24px and place it on the top left position of image. See the picture below.



Step 12

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

ˇ

Step 13

After that, click on frame 15 and press F6 key. Then, go back on the first frame and repeat step 5.

Step 14

After you have aligned the rectangle with the background, select it again and take the Free Transform Tool (Q). Then, decreas it a lot like it is shown on the picture below.



Step 15

After that, take the Selection Tool (V) and click once on the rectangle to select it. Then, 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 0%.



Step 16

Right-click anywhere on the gray area between frame1 and frame 15 on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



Step 17

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



Now you have this:



Step 18

Create now a new layer above the layer mask1 and name it again image2 again. After that, go back on the first frame of layer image2 and press Ctrl+C key (Copy). Then, select frame 10 of layer image2 again and press F6 key. After that, while you're still on frame 10, press Ctrl+Shift+V key (Paste in Place).

Step 19

Create now a new layer above the layer image2 again and name it mask2. Afte that, click on frame 10 and 25 of layer mask2 and press F6 key.

Step 20

Then, go back on layer mask1, select the frame 15 and press Ctrl+C key (Copy). Then, go back on frame 25 of layer mask2 and press Ctrl+Shift+V key (Paste in Place). Then, while you're still on frame 25, move that rectangle a little right using using the arrows key on the keyboard. See the picture below.



Step 21

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

Step 22

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

Step 23

Click now on frame 100 of layer mask2 and press F5 key.

Step 24

Repeat now step 17.

Step 25

It's time for sound, so create a new layer above the last layer and name it sound.

Step 26

Download now, my sound file.

Step 27

Go back into a flash stage. Choose File > Import > Import to Library and import my sound into a Library.

Step 28

After that, click on frame 30 of layer sound and press F6 key. Then, using the drag and drop technique, move the sound file from the library on the stage. See the picture below.



We're done!

Repeat this preocess until you don't fill the all image.

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