Flash tutorials
Home 3D (2) Actionscripting (66) Animation (108) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (61) Text Effects (38)

Photo slide show

7.2.2007, 0:40    Total views: 209742

Make a great photo slide show in flash with very little scripting. You can use this slide show for any web sites, for some presentation... You will also learn how to import any image into a flash library, how to convert it into a Movie Clip Symbol, how to apply action script code on it and much more!






Click on a small image to enlarge it!




Step 1

Start Flash.Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 450 pixels and the height to 350 pixels. Select white as background color. Frame rate set to 32 fps (Frames per Second) and click ok.See the picture below.



Step 2

Take the Rectangle Tool (R), go to the Properties Panel (Ctrl +F3) below the stage and chose the following options:

1. Enter #C0C0C0 for the Stroke color
2. block the Fill color by clicking on the little paint bucket icon (1) and then on the small square with the red diagonal line.
3.Select Solid as the type of outline, with the line thickness set to 5.
4.Turn on the Stroke hinting option to get rid of any blurry edges while drawing.



Then, draw a "rectangle" 305x230px and place it on the position like it is shown on the picture below.That "recatngle" will be represent a place on which a large pictures will be shown.



Step 3

Take again the Rectangle Tool (R), and in the Properties Panel below the stage, choose the following options:

1. Block the Stroke color, by clicking on the little pencil tool icon and then on the small square with the red diagonal line.

2. Enter #ECECEC for the Fill color.



Then, draw a "rectangle" about 445x92px, and place it on the position like it is shown on the picture below.



That "rectangle" will be represent a place on which we will place a small pictures.

Step 4

Create two foledrs and name it "large pictures" and "small pictures". On the first folder you will save a big pictures - 300x225px and in the second (small pictures) folder, you will save a small pictures - 90x68px.

After that, find somewhere four picture, open it in some of graphic programs (photoshop....), could be done in flash also, and set their dimensions to 300x225 px. for large pictures, and after that, to 90x68px for small pictures.

Step 5

Go back on flash, choose File > Import > Import to Library, and Import the all "small pictures" into the Library. See the picture below.



Step 6

Using the "drag and drop" technique, move the all "small pictures" from the Library to the Stage and place it on the position like it is shown on the picture below.



Step 7

To get a symmetrical distance between the all pictures, go to the Align Panel (Ctrl+K), and choose the following options:

1. Make sure that the Align/Distribute to Stage button is turned off.
2. Click on the Distribute horizontal center button.



Step 8

Select the first picture and press F8 key to convert this picture into a Button. See the picture below.



Step 9

While the new made button is still selected, go to the Action Scrtip Panel (F9), and enter the following Action Script code inside the Actions panel:

on (release) {
gotoAndPlay(2);
}

Step 10

Click on frame 30 and press F5 key. After that, create a new layer and name it img1. Then, click on frame 2 and press F6 key.

Step 11

While you're still on frame 2, choose File > Import > Import to Stage, and Import the first large picture (300x225px). After that, using the mouse, place that picture within the first "rectangle" (See step 2). See the picture below.



Step 12

While the picture is still selected, press F8 key, to conevert this picture into a Movie Clip Symbol. See the picture below.



Step 13

Click on frame 15 of layer img1 and press F6 key. Then, go to the Action Script Panel (F9), and paste this script:

stop();

Step 14

Go back on on frame 2, take the Selection Tool (V) and click once on the picture to select it. Then, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Advanced, click on Settings button, and choose the options from the picture below.





Step 15

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



Step 16

Select the second "small picture" and press F8 key, to convert this picture into a Button.



Step 17

While the new made button is still selected, go to the Action Script Panel (F9) and enter this code inside the Actions panel:

on (release) {
gotoAndPlay(16);
}

Step 18

Create a new layer above layer img1, and name it img2.



Step 19

Click on frame 16 and press F6 key. Then, choose File > Import > Import to Stage, and Import the second "large picture" and place it within the first "rectangle" (See step 2).



Step 20

While the picture is still selected, press F8 key, to convert this picture into a Movie Clip Symobl.

Step 21

Click on frame 30 and press F6 key. After that,go to the Action Script Panel (F9), and enter this script:

stop();

Step 22

Go back on frame 16, take the Selection Tool (V) and click once on the picture to select it. Then, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Advanced, click on Settings button, and choose the options from the picture below.



Step 23

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



Now, we're done for the first two pictures. Repeat the previous steps for every other picture.

Step 24

Create a new layer above all layers and name it Action. Click on the first frame, open the A.S.Panel and enter this code inside the Actions panel:

stop();

That's it!

Enjoy!

Download source file (.fla)

Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 298655

2. High-tech city animation
Total views: 249271

3. Water effect
Total views: 227601

4. Photo slide show
Total views: 209743

5. Special Picture Effect
Total views: 185320



Related links