In this easy and quickly flash lesson, you will see how to create very modern and fancy hockey animation. You can use this animation for any flash header, banner, presentation. Using this lesson, you will also learn how to import Png photos into a flash library, how to convert it into a Movie Clip Symbol, how to apply Blur effect on it and much more. You don't have to use action script code to make this lesson. Let's go!



Step 1

First of all, download a Png photos of hockey players!

Step 2

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



Step 3

Take now the Rectangle Tool (R). For Stroke Color choose No color, for Fill color choose #CACBD2 and draw a rectangle about 420x90px and place it on the bottom of stage. See the picture below!



Step 4

While the Rectangle Tool is still selected, for Fill Color choose #F1F1F5 and draw a rectangle about 420x140 and place it on the top of stage.



Step 5

Choose File > Import > Import to Library. In the file explorer window that appears, find a two Png photos of Hockey players (photo1 and photo2) and Shift-click to select them. Then click open. If you now open your flash library (Ctrl+L key) you will see a two Png photos that you just imported. See the picture below.



Step 6

Take now the Selection Tool (V) and double click on layer 1 to rename its name into a background. After that, create a new layer above the layer background and name it photo 1. After that, while the photo 1 layer is still selected, move photo 2 from the Library on the stage using the drag and drop technique!

Step 7

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



Step 8

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

Click now on frame 10 and 25 and press F6 key.

Step 10

Go back now on frame 1 and place the photo on the position like it is shown on the picture below!



Step 11

Take now the Selection Tool (V) and click once on the photo! Then, go to the to the Properties Panel below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 5%.



Step 12

Select now frame 10, take again the Selection Tool (V) and click once on the photo again! Then, go again to the properties Panel (Ctrl+F3) below the stage and select Filters tab from the left side. Click after that on the plus icon and select the Blur filter. Make the adjustments as follows:



Step 13

Choose right-click anywhere on the gray area between the frame 1 and 10 and frame 10 and 25 on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



Step 14

Click now on frame 80 and 90 and press F6 key. While you're still on frame 90, repeat step 11, but for this time set alpha to 0%.



Step 15

Choose again right-click anywhere on the gray area between the frame 80 and 90 on the timeline and choose Create Motion Tween from the menu that appears.

Step 16

Create now a new layer above the layer photo 1 and name it photo 2. Click now on frame 85 and press F6 key.

Step 17

While you're still on frame 85, move photo 1 from the Library on the stage using the "drag and drop" technique.

Step 18

While the photo is still selected, repeat steps 7 and 8.

Step 19

Click now on frame 95 and 110 and press F6 key.

Step 20

Go back now on frame 95 and place a photo on the position like it is shown on the picture below!



Step 21

After that, take the Selection Tool (V) and click once on the photo to select it. Then, go to the to the Properties Panel below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 12%.

Step 22

Select now frame 95 and click again once on the photo with Selection Tool (V). Then, go again to the properties Panel (Ctrl+F3) below the stage and select Filters tab from the left side. Click after that on the plus icon and select the Blur filter. Make the adjustments as follows:



Step 23

Choose again right-click anywhere on the gray area between the frame 85 and 95 and frame 95 and 110 on the timeline and choose Create Motion Tween from the menu that appears.

Step 24

Click now on frame 165 and 175 and press F6 key. While you're still on frame 175, repeat step 14.

Step 25

Choose right-click anywhere on the gray area between the frame 165 and 175 on the timeline and choose Create Motion Tween from the menu that appears.



Step 26

Click now on frame 175 of layer background and press F5 key.

We're done!

Test your Movie (Ctrl+Enter)!

Bye!

Download source file (.fla)