Tutorial: Flash Dawning city animation by flash tricks

Read this lesson and see how to create dawning city animation in flash with no action script code.

Step 1

First of all, download my picture that you have to use to make this lesson.



Step 2

Create a new flash document.

Step 3

Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 400 pixels and the height to 348 pixels. Select any color as background color and set your Flash movie's frame rate to 28 fps. Then, click ok.

Step 4

Choose File > Import > Import to Stage and Import my picture into a flash.

Step 5

While the picture 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.



Now you have aligned the picture with the background.

Step 6

Double click on layer 1 to rename its name in picture.

Step 7

After that, click on frame 25 and press F5 key.

Step 8

Create a new layer above the layer picture and name it animation.

Step 9

Select the animation layer and take the Rectangle Tool (R). 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 black color and draw a “rectangle” on the position like it is shown on the picture below.



Step 10

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



Step 11

Click on frame 10, 15 and 25 and of layer animation and press F6 key.

Step 12

Go back on frame 10. 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 75%.See the picture below.



Step 13

Click on frame 15 and repeat the previous step, but for this time, put the Alpha down to 55%. See the picture below.



Step 14

And finally, click on frame 25 and repeat the previous step, but for this time, put the Alpha down to 0%. See the picture below.



Step 15

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



We're done!

Test your Movie (Ctrl+Enter).

Download source file (.fla)