Flash Tutorial: Funy Flash Picture Animation

This tutorial will teach you how to create on a simple way, with no action script code very useful picture animation in flash which you can use for any picture presentation, animation, flash banner, flash site....Let's go!

Step 1

First of all, save my picture that we will use for this tutorial! ;)



Step 2

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 322 pixels and the height to 484 pixels (as the dimensions of picture). Select any color as background color.Set your Flash movie's frame rate to 35 and click ok. See the picture below.



Step 3

Choose File > Import > Import to Stage (Shortcut key: Ctrl+R) and import my picture into a flash stage.

Step 4

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, we have aligned a picture with the background!

Step 5

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



Step 6

Press F6 key twenty times. See the picture below!



Step 7

Click aftre that on every second frame except last two frames and press delete key on the keyboard. See the picture below.



Step 8

Click after that on frame 25 and 30 and press F6 key.

Step 9

Go back on frame 25, take the Free Transform Tool (Q), press and hold down Shift key and enlarge the picture a lot. After that, take the Selection Tool (V) and click once on the picture. 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 0%.



Step 10

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



Step 11

Select frame 30 and press F6 key Then times. After that, repeat step 7. See the picture below.



Step 12

Click on frame 45 and 50 and press F6 key.

Step 13

Go back on frame 40. Then, in the Properties Panel below the stage for Tween choose Motion, for Ease 100 and for Rotate CW. See the picture below.



Repeat this process also for frame 45, but for time, for Ease set 100 and for Rotate CCW. See the picture below.



Test your Movie (Ctrl+Enter).

Enjoy!

Download source file (.fla)

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)

Flash Tutorial: Flash Car animation Tutorial

This lesson will teach you how to create on a simple way very attractive animation using a picture of Bmw 3 series.You don't have to use action script code to make this lesson. You will also learn how to apply flash filters on any picture, object... You can use this animation for any flash banner, header, picture presentation... Let's go!

Step 1 First of all, save my picture of Bmw 3 seriese which we will use for this tutorial. Step 2 Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 400 pixels and the height to 300 pixels. Select white color as background color.Set your Flash movie's frame rate to 33 and click ok. See the picture below. Step 3 Choose File > Import > Import to Stage (Shortcut key: Ctrl+R) and Import my picture into a flash stage. Step 4 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 a picture with the background. Step 5 While the picture is still selected, press F8 key (Convert to Symbol) to convert this picture into a Movie Clip Symbol. Step 6 Click on frame 15 and press F6 key. After that, while you're still on frame 15, take the Selection Tool (V) and click once on the picture 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 23%. After that, Select Filters tab from the left side. Click after that on the plus icon and select the Blur filter. Make the adjustments as follows: 1. Blur X and Y : 12 2. Quality : Low Step 7 Go back on the first frame, select the picture again using the Selection Tool (V) and go again to the Properties Panel (Ctrl+F3). On the right, you will see again the Color menu. Select Alpha in it and put it down to 0%. Step 8 Choose right-click anywhere on the gray area between the frame 1 frame 15 on the timeline and choose Create Motion Tween from the menu that appears.See the picture below. Step 9 Select again frame 15 and press F6 key then times. See the picture below. Step 10 Go back on frame 16, and using the mouse, or by arrows key move the picture a little up. After that, select frame 17, and move it a little down. Then, select frame 18 and move it a little right. After that, select frame 19 and move the picture a little left. Then, select frame 20 and using the Free Transform Tool (Q) rotate the picture a little on the right side. See the picture below. Select aftera that frame 21 and rotate it a little on the left side. Step 11 Select frame 22 and move the picture again a little up. After that, select frame 23 and move it a little left. Then ,select frame 24 and move it a little right. Step 12 Click on frame 30 and press F6 key. After that, while you're still on frame 30, take the Selection Tool (V) and click once on the picture to select it. Then, go again to the Properties Panel (Ctrl+F3). On the right, you will see again the Color menu. Select Alpha in it and put it down to 48%. Then, select again Filters tab from the left side. Click after that on the plus icon and select the Blur filter. Make the adjustments as follows: 1. Blur X and Y : 10 2. Quality : Medium Step 13 Choose right-click anywhere on the gray area between the frame 25 frame 30 on the timeline and choose Create Motion Tween from the menu that appears. Step 14 Select frame 30 and press F6 key five times. Step 15 Go back on frame 31 and move the picture a little up. After that, select frame 32 and move the picture a little right. Then, select frame 33 and usign the Free Transform Tool (Q) rotate it a little right. Select after that frame 34 and move the picture a little left. Step 16 Click on frame 45 and press F6 key. Afte that, take the Selection Tool (V) and click once on the picture to select it. Then, go again to the Properties Panel (Ctrl+F3). On the right, you will see again the Color menu. Select Alpha in it and put it down to 78%. Then, select again Filters tab from the left side. Click after that on the plus icon and select the Blur filter. Make the adjustments as follows: 1. Blur X and Y : 5 2. Quality : Medium Step 17 Choose right-click anywhere on the gray area between the frame 35 frame 45 on the timeline and choose Create Motion Tween from the menu that appears. While you're still on frame 45, press F6 key again five times. Step 18 Go back on frame 46 and rotate the picture a little on the right side using the Free Transform Tool (Q). After that, move it also a little on the left side. Select frame 47 and move the picture a little up. Select after that frame 48 and move the picture a little right. Then, select frame 49 and move the picture a little down. Step 19 Click on frame 60 and press F6 key. After that, take again the Selection Tool (V) and click once on the picture to select it. Then, go again to the Properties Panel (Ctrl+F3). On the right, you will see again the Color menu. Select Alpha in it and put it down to 100%. After that, select again Filters tab from the left side. Click after that on the plus icon and select the Blur filter. Make the adjustments as follows: 1. Blur X and Y : 0 2. Quality : Medium Step 20 Click on frame 100 and press F6 key. Test your animation (Ctrl+Enter). We're done! Download example