Creatively sharing Flash Creations, News, and Tutorials

Flash and AS Tutorial - Fades picture sample by little action script

See this step by step tutorial and learn how to create fades picture sample in flash using a little Action Script. You will also learn:

1. How to import an image in Flash,
2. How to convert a bitmap image into a symbol,
3. How to apply Alpha on image and more.



Step 1

Create a new flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 320 pixels and the height to 240 pixels. Select white as background color. Set your Flash movie”s frame rate to 16 fps (Frames per Second) and click ok.



Step 2

Download the sample images for this tutorial that you”ll use to quickly create this tutorail.

Step 3

Choose File > Import > Import to Library . In the file explorer window that appears, find a three images ( img1, img2…). Then, press and hold down Shift key and select them all. After that, click Open. If you now open your Library (Ctrl+L), you will see them. See the picture below.



Step 4

While the flash library it still open,take the Selection Tool (V) and move the first image from the Library on the stage.

Step 5

While the image is still selected go to the Align Panel (Window > Align). Then, 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

After that, while the image is still selected, press F8 key (Convert to Symbol) to convert this image into a Graphic Symbol. See the picture below.



Step 7

Click on frame 15, 30 and 45 and press F6 key.

Step 8

Go back on frame 1, take the Selection Tool (V), click once on the image to select it and 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%.



Do that also for frame 45.

Step 9

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



After that, click on frame 46 and press F7 key (Blank keyframe).



Step 10

Double click on layer 1 to rename its name in image 1. After that, create a new layer above the image 1 layer and name it image 2.

Step 11

Click on frame 30 of layer image 2 and press F6 key. After that, move the second image from the flash library on the stage.

Step 12

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



Step 13

Repeat step 5.

Step 14

Click on frame 45, 60 and 75 and press F6 key.

Step 15

Go back on frame 30 and repeat step 8. Do that also for frame 70.

Step 16

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



Step 17

Click on frame 76 and press F7 key.

Step 18

Create a new layer above the image 2 layer and name it image 3.

Step 19

Click on frame 60 of layer image 3 and press F6 key. After that, take the Selection Tool (V) and move the another (third) image from the flash library (shortcut key: Ctrl+L) to the stage.

Step 20

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

Step 21

Repeat step 5.

Step 22

Click on frame 75, 90 and 105 and press F6 key.

Step 23

Go back on frame 60 and repeat step 8. Do that also for frame 105.

Step 24

Right-click anywhere on the gray area between the frame 60 and 75 and frame 90 and 105 on the timeline and choose Create Motion Tween from the menu that appears.

Step 25

Go back on layer image 1, click on the first frame and press Ctrl+C key on the keyboard (Copy). After that, click on frame 90 and press F6 key. Then, press Ctrl+Shift+V key (Paste in Place).

Step 26

After that click on frame 105 and press again F6 key.

Step 27

While you”re still on frame 105, take the Selection Tool (V), click once on the image to select it and 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 100%.



Step 28

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

Step 29

It”s time for a liitle script, so create a new layer above the all layers and name it action. See the picture below.



Step 30

Click on frame 15 of layer action and press F6 key. After that, go to the Properties Panel (Ctrl+F3) below the stage. On the left side, You will find the Instance name input field there. Call this keyframe “restart”. See the picture below.





Step 31

Click on frame 105 of layer action and press again F6 key. After that, go to the Action Script Panel (F9) and enter the following action script code inside the actions panel:

gotoAndPlay(”restart”);




Have a nice day!

Download source file (.fla)