Introduction: How to Create an Adobe Flash Slide Show



Don't just send people a stack of static photo files; share them in style by creating a slide show in Flash.

You will need:

A computer with internet

Adobe Flash CS4

And digital photos

Step 1: Create New Flash Document

In Adobe Flash, select "Flash File (Actionscript 3.0)" from the "Create New" menu. Switch the workspace layout by clicking on the drop-down menu box in the upper left of the top menu bar and selecting "Designer." Change the size and color of the document by adjusting the settings in the "Properties" Panel.

Step 2: Create Layers

From the timeline panel, click the "New Layer" button until you have three layers. Double-click on each layer to rename it. Starting from the bottom, name the layers: Actions, Thumbnails, and Pictures.

Step 3: Import Pictures

Import your pictures by going to File, Import, Import to Library. Browse the pictures you want to import. You can select multiple pictures by holding down the Control key and clicking multiple images. Once you've selected your images, click "Open." You'll see the imported images in the Library panel.

Step 4: Create the Thumbnail Menu

With the Thumbnails layer selected in the timeline, drag one of the imported images onto the document. In Properties, click on the chain-link icon to unconstrain the width and height values. Then, resize them both to 100. Position the image at the bottom left of the document. Repeat this process for the remaining images so that they are in a row at the bottom of the document.

TIP: Adjust the images' alignment in the row by selecting all of them and choosing the desired options from the Align panel.

Step 5: Convert the Menu to Buttons

Select the first image and hit the F8 key on the keyboard. Change the name to "btn1," change the type to "button," and click OK. In the Properties panel, change the instance name to "button1." Select the next image from the menu and repeat the process, naming it "btn2" and "button2." Continue the process for each menu item.

Step 6: Create a Photo Display

From the timeline, select the first frame of the Pictures layer. In Properties, change the name of this frame to "pic1." Drag the image corresponding with the first menu item onto the stage. Resize it in the Properties panel, remembering to click on the chain-link icon to reconstrain the width and height values. Move the image to the center of the document above the menu.

Step 7: Insert Frame

In the timeline, right-click (or command click on a Mac) on the second frame of the Thumbnails layer and select "Insert Frame."

Step 8: Add the Remaining Images

Right-click on the second frame of the Pictures layer and select "Insert BLANK keyframe." In Properties, change the name of this frame to "pic2." Now drag the next image onto the document, resizing and centering it above the menu. Repeat this process for the remaining images, incrementing the frame names each time.

Step 9: Write the Actionscript

In the timeline, select the first frame of the Actions layer and hit F9 to bring up the Actions panel. On the first line, type the stop function to stop the pages from cycling through. Hit Enter. On the next line, write a script that assigns a function to "button1." Call this function "showpic1," and hit Enter to skip a line to write a script for button2, calling the function "showpic2." Repeat for the remaining buttons.

'stop();
button1.addEventListener(MouseEvent.CLICK,showpic1);
button2.addEventListener(MouseEvent.CLICK,showpic2);
button3.addEventListener(MouseEvent.CLICK,showpic3);'

TIP: To preview the document, go to Control, Test Movie from the top menu.

Step 10: Write the Functions

Step 10. [Write the functions] When you are finished, hit Enter to skip a line and create the "showpic1" function, telling the animation to go to the "pic1" frame and stop. Hit Enter to skip to the next line and type the "showpic2" function, telling the animation to go to the "pic2" frame and stop. Repeat this process for the rest of the buttons.

'stop();
button1.addEventListener(MouseEvent.CLICK,showpic1);
button2.addEventListener(MouseEvent.CLICK,showpic2);
button3.addEventListener(MouseEvent.CLICK,showpic3);'

function showpic1(Event:MouseEvent):void{
gotoAndStop("pic1");
}

function showpic2(Event:MouseEvent):void{
gotoAndStop("pic2");
}
function showpic3(Event:MouseEvent):void{
gotoAndStop("pic3");
}''

TIP: To preview the document, go to Control, Test Movie from the top menu.

Step 11: Publish and Upload

Publish the web site by going to File, Publish Settings. Check both the SWF and HTML boxes. Rename both files and select a location to save. Then click publish, and upload all of the published files to your web server. To access the flash page, navigate to the HTML file on your web server.

Comments

author
scrapbooksbyvanessa (author)2015-01-27

Hello, first off thank you for posting this tutorial! I followed it to the letter, but for some reason I am having a few problems, that I am hoping you can help with.I am new to Flash, so please bare with me. I am using Flash professional cs5.5. First thing is the pictures change so quickly you can't even see what they are. Also I got several errors:

Scene 1, Layer 'Actions', Frame 1, Line 2 1120: Access of undefined property button1.

Scene 1, Layer 'Actions', Frame 1, Line 3 1120: Access of undefined property button2.

The same errors for up to 5 buttons. Can you please help!! Thank you

author
gemoks (author)2014-06-24

Hey there. Thank you so much for your tutorial. But i've forgot that I'm using actionscript 2.0. It says that "The class or interface 'MouseEvent' could not be loaded.""" function play9(Event:MouseEvent):void{""". Ofcourse it could not be loaded because its an actionscript 2.0. Can you help me with this ? what should i put in the script ? cause i can't find any void and mouse event in this script. Please help me :( hope to get reply from you a.s.a.p. Thank you very much for your help.

author
tcambrón (author)gemoks2015-01-16

I don't know how to use the Flash Builder but in ActionScript then you might need to import the MouseEvent. In ActionScript package something like this will be needed:

package {

import flash.events.MouseEvent;

public myFunctions():void {

//add MouseEvent listeners

}

}

author
tcambrón (author)tcambrón2015-01-16

look through the ActionScript API Reference:

http://help.adobe.com/en_US/FlashPlatform/referenc...

author
ginaunique (author)2011-01-17

Thanks for the great tutorial on Adobe Flash Slide show! I truly enjoyed learning from your video.

author
Chicken2209 (author)2009-07-27

please dont take other peoples work and post it here

author
gigafide (author)Chicken22092009-07-27

I am a Howcast emerging filmmaker. This is a Howcast video I made specifically for Instructables (note the Instructables logo at the end of the video). Many of my posts are going to be like this. I'm only telling you this because I'm hoping not to see these comments as recurring.

author
Chicken2209 (author)gigafide2009-07-28

Im sorry. Its just that some people actually come on here and just steal from the howcast videos I didnt watch the entire video, i did now, but thank you for correcting me

About This Instructable

139,045views

7favorites

License:

More by gigafide:DIY Vintage Streaming Radio With a Raspberry PiTurn an Old Cell Phone Into a SmartwatchAlexa Ruxpin - Arduino & Raspberry Pi Powered Voice Assistant
Add instructable to: