Simple "Flash" Slide Show
This Flash slide show is simple, with no controls for advancing images, and requires that all images be the same size. Still, it’s a good way to add images to a page when user control is not important.
In this tutorial, you’ll open Flash, change the default document size to the image size I’m using, add images to the Library and convert them to movie clips, then animate them. Finally, you’ll publish the Flash movie to a format you can use on the web.
Any time you want to check your movie’s progress you can press CTRL+Enter/Cmd+Return on a Mac to view the movie in the Flash player.
Step 1 – Open Flash
The Flash work space with the default layer The Flash work space with the default layer Open Flash CS4. From the Welcome screen choose “Create New” Flash file (Action Script 2.0), or the “File” Menu, select “New…” The Flash workspace will open. By default, there is one layer “Layer 1” on the timeline. If you can’t see the timeline, go to the “Window” menu and click on Timeline in the drop down menu, or press ctrl+alt+T
Step 2 – Modify the work space
Modify the screen size from this properties panel Modify the screen size from this properties panel In the “Properties” panel – and using the “properties” dropdown arrow – modify the size of the document to 600px X 400px. The default size is 550px X 400px. If you can’t see the Properties panel, go to the “Window” menu and click on Properties in the drop down menu, or press ctrl+F3. Keep the frames per second (FPS) at 24.
Step 3 – Import images
From the “File” menu, select “Import > Import to Library…”. Select two 600px wide X 400px high images from your files and click “Open”. The images will appear in the library panel. Drag one of the images to the stage.
You can physically center the image or in the properties panel, under the “position and size” drop down, you can make sure that the X and Y coordinates are both set to zero. This image, by default, in on “Layer 1” in the timeline. Double click the text “Layer 1” in the timeline and rename it to match the contents of your image. Press “enter” or “return” on your keyboard.
Step 4 – Prepare the image for animation
Change the image to a movie clip here. Click the image to select it. Press F8 (option F8 on a Mac) to convert the image to a symbol. In the dialog box that appears, type in a name for your image. I suggest adding “mc” to the end of the name so you know that it’s a movie clip. Make sure that “Type” Movie Clip is selected. Click OK. Now that the image has been converted into a movie clip, you can animate it.
The name of the movie clip will appear in the library, with a gear type of icon representing it.
Step 5 – Animate the image
This is the actions panel. This is the actions panel. In frame one of the timeline (all of the rectangles of the timeline represent frames) you will see a filled black circle. That means that the frame is a “keyframe”. Changes in action or animation take place at keyframes. We are going to leave this image on the stage for 5 seconds before fading it out. We can use 120 frames to do this, or, to reduce the number of frames, we can use a small amount of Action Script to pause the animation for 5 seconds, then resume it.
Click F9 (option F9 on the mac), or “Window > Actions” menu, to open the Actions panel. With the movie clip image selected, type the following in the Actions panel:
stop()
pauseAnim=setInterval(this,”nextFrame”,5000);Type it just like this, no spaces, the two commands will take up two lines. There will be a small “a” in the keyframe. You are stopping the animation for 5 seconds, then going to the next frame, where a little more Action Script will start the animation again.
Step 6 – Resume the animation and fade the image
Select frame 2 in the timeline and press F6 (option F6 on a Mac) to make frame 2 a keyframe. Again, you will see a filled circle in the frame. Open the Actions panel as in step 5 and type the following code in it:
clearInterval(pauseAnim);
play();You are telling Flash to clear the Stop command then start playing the timeline again.
Select frame 26 (about 2 seconds) and press F6 (option F6 on a Mac) to insert a keyframe. You’ll notice that the intervening frames have filled in with gray. While on frame 26, click on the image on stage to view its properties. In the “Color Effect” dropdown, select Style > Alpha. You’ll see that the image disappears.
Right click anywhere between frames 2 and 26. Using the context menu select “Create Classic Tween”. You’ll see a solid left to right arrow appear between the frames. Your fade-out animation has been created.
Click ctrl+enter (cmd+return on a Mac) to view the animation.
Step 7 – Insert a second image
Create a new layer using the “Insert > Timeline > Layer” menu or the new layer icon at the bottom left of the timeline. Rename this layer to match the image you’ll use as in Step 3. With the new layer selected. Drag a second image from the library to the stage as in Step 3. The image will be on the new layer.
Click on the first frame of the second image, hold the Shift key, then click on the last frame. All frames will be selected. Click and hold somewhere between the frames and drag the frames to the right until the first frame of the new image is at frame 15. All of the new layer’s frames will have moved accordingly.
Step 8 – Prepare this image for animation
Prepare the second image by converting it into a movie clip as in Step 4.
Step 9 – Fade in the image
The first frame of this second image (frame 15) is a keyframe. Click on frame 39 and insert another keyframe (F6 or option F6).
Click on frame 15, then click on the second image on stage to view its properties. In the “Color Effect” dropdown, select Style > Alpha. You’ll see that the image disappears. You may see the first image exposed.
Right click anywhere between frames 15 and 39. Using the context menu select “Create Classic Tween”. You’ll see a solid left to right arrow appear between the frames. Your fade-in animation has been created.
Step 10 – Pause the animation of the second image
Insert Action Script into the keyframe 39 by following Step 5.
Step 11 – Resume the animation and add other images
Follow steps 6-10 to resume the animation, add other images and animate them.
Step 12 – Creating a smooth transition back to the starting image
Return to the opening image and add a keyframe at frame 53 (F6 or option+F6). Add another keyframe at frame 76. You should have a blank screen because the first image is still faded out, but you should see a small circle in the middle of the screen. Click on that and you will see the image properties in the Properties panel.
The “Color Effect” dropdown should show Style: Alpha. Use the dropdown menu to change that to Style: None. The first image will reappear. Right click between frames 53 and 76 and select “Create Classic Tween”. You will see a solid left-to-right arrow appear between the frames. You have created the fade-in animation.
The default behavior for the animation at the last frame is to repeat from the first frame. So, when the animation timeline reaches the last frame – where the initial image fades in – it automatically goes back to the first frame where the initial image is initially held on the stage. The result is that you have a smoothly looping slide show.
Step 13 – Publishing the slide show
The publish screen. After you name your movie, you can leave the other settings. The publish screen. After you name your movie, you can leave the other settings. You have a completed slide show, but it’s in a .fla format. This is the working file in Flash and these files don’t get put on the internet, but if you ever need to change the movie, you can open up this file and make your changes.
You need to publish this file as a web ready .swf file. From the top menu, Select “File > Publish Settings”. In the dialog window that opens, int the “Formats” tab, deselect HTML (you’ll only be publishing the Flash movie). I recommend using the folder icon to the right of the “Flash” text area to find a location for your movie and give it a name. The name should be formatted similar to “movie.swf”.
Click on the “Flash” tab. Unless you are specifically targeting people with older versions of the Flash player, leave it at the default setting. You don’t need to change any settings on this panel. Click publish.
You have created your Flash movie that is ready to put on your web site.
