Toxiclab.org

Image slide show with sound

30.1.2007, 0:26
Submited in: Flash | Total Views: 108103

Well, in this tutorial you will learn how to create image slide show with sound in flash 8, which you can use for any picture gallery, header..., with very little scripting. You will also learn:

1. How to aligned a picture using the Align Panel.
2. How to use Advanced color settings.
3. How to create a recatangle using the Rectangle Tool (R).
4. How to convert any layer into a Mask and more




Step 1

Create a new document in Flash. Set the movie's width to 300 and movie's height to 213. Set your Flash movie's frame rate to 90 fps.

Step 2

Find somewhere one picture, open it in some of graphic programs (photoshop....), could be done in flash also, and set its dimensions to 300x213 px as the flash document. After that, go in flash, choose File > Import > Import to Stage (Ctrl+R) and Import that picture into the flash.

Step 3

While the picture is still selected, go to the Align panel (Ctrl+K) and do the following in the Align panel:

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 4

Press F8 key (Convert to Symbol ) to convert this picture into the Movie Clip Symbol.



Step 5

Double-click on the movie clip on stage with the Selection tool (V).You should now be inside the movie clip.



Step 6

While the picture is still selected, press again F8 key and convert it again into the Movie Clip Symbol.



Step 7

Double-click on the movie clip on stage with the Selection tool (V).



Step 8

Then, while the picture is still selected, press again F8 key ( last time :) ) to convert this image again into the Movie Clip.



Step 9

Click on frame 15 and press F6 key. Then, open the Action Script Panel (F9), and enter the following Action Script code inside the Actions Panel:

stop();

After that, go back on the first frame, 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, set the following options and click ok.



Step 10

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



Step 11

Go back on image_mc scene, and create a new layer (layer 2) above layer 1.



Step 12

Take the Rectangle Tool (R), for Stroke Color choose no color, for Fill color choose any color, and draw a "rectangle" 20x250px, and place it on the left stage beginning. See the picture below.





Step 13

While the "rectangle" is still selected, press F8 key and convert this "rectangle" into a Movie Clip Symbol.



Step 14

Double-click on the movie clip on stage ("rectangle") with the Selection tool (V). You should now be inside the Movie Clip.



Step 15

While the "rectangle" is still selected, press again F8 key to convert it again into a Movie Clip Symbol.



Step 16

Click on frame 12, press F6 key and enter the following Action Script code inside the Action Panel:

stop();

Step 17

Go back on frame 1, take the Free Transform Tool (Q) and zoom in the "rectangle" a lot. Then, press and hold down Shift key, and decrease the "rectangle" maximum.





Step 18

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



Step 19

Go back on the image_mc scene.



Step 20

Select layer 2 and convert it to a mask by right-clicking on the layer 2 and selecting Mask. See the picture below.



Step 21

Click on frame 40 of layer 1 and 2 and press F5 key.

Step 22

Now, we'll need a little maths logic and Info Panel. But first, do this: Click on the first frame of layer 1, press Ctrl+C key (Copy), create a new layer above layer 2 (layer 3), click on frame 5 of layer 3, press F6 key key, and after that Ctrl+Shift+V key (Paste in Place).




Click on the first frame of layer 2, press again Ctrl+C key (Copy), create a new layer above layer 3, click on frame 5, press F6 key, and after that Ctrl+Shift+V key (Paste in Place).

Step 23

Lock all layer except layer 4, take the Selection Tool (V), click once on the "rectangle" that we're decreased in step 17 to select it, press Ctrl+I key (Info Panel), and see the x value. In my example x value is -150.2. See the picture below.



What value, you need to enter? You'll need to enter -130,2 for x value in my example! Why? because the "rectangle" width is 20px. See step 12.



Step 24

Repeat the previous steps for every other picture and "rectangle" until you came to the end. When you came to the end, click on the last frame and in A.S. Panel (F9), and type:

stop();



Note! every other rectangle and picture must start 5 frames after, by comparison with the previous "rectangle" and picture. Also, the x value will change for minus or plus 20px by comparison with the previous "rectangle" (-150,2, -130,2, -110,2, -90,2......). I hope that you understand this part of tutorial. If you don't understand, download source file, and see how to do that.

Step 25

Only one thing that I must to show you is how to Import the sound. When you complete all, create a new layer above all layers and name it sound. Then, choose any audio sound (mp3. file) and Import it into the flash library. After that, click on the first frame of layer sound and using the "drag and drop technique", move it on the stage. See the picture below.



We're done!

Have a nice day!

Downalod source file (.fla)

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials


Resources Worth visiting


Friends