Flash slideshow with fade effect

During this tutorial, you will be creating a flash slideshow with a fade transition.  We will do this by ...
 
» Creating a new flash document and changing the canvas size
» Importing images into the library
» Creating, renaming and reordering layers
» Converting images to symbols so we can animate them
» Creating keyframes
» Adjusting the Alpha value (transparency) of images
» Creating motion tweens
» Locking layers to prevent changes
» Creating text
» Previewing the animation
» Publishing the animation
» Using the timeline
 
Before you start ...
 
Download these images (Right click > Save Target As ...) to make your slideshow - if you not keen on BMWs then you can choose 5 pictures of your own.  Make sure that they are the right size however - 400 x 225 pixels.
 
 
Step 1 - Create a new flash document and alter the canvas size
 
Start Flash and create a new flash document.  The default size for the canvas is 550 x 400 pixels.  Click on the 'Size' button in the properties panel and change the canvas size to 410 x 235 pixels.  Click OK and make sure the canvas size is correct.
 
Step 2 - Import the assets (pictures) into the 'library'
 
Before we can use the images in our slideshow, we need to import them into Flash.  Choose 'File > Import > Import to library ...', find the first image file (bmw_1.jpg), select it and click 'Open'.  You should see the asset listed in the Library panel on the right of the application window.  If you can't see the library panel, choose 'Window > Library' or press 'Ctrl + L'.
 
Repeat the import steps for all 5 images.
 
Step 3 - Create layers for the images and text
 
Look at the top of the application window.  You should see the timeline.  If you can't, choose 'Window > Timeline' or press 'Ctrl + Alt + T'.  Double click on the words 'Layer 1' and rename it to 'Text'.  Press enter to confirm your change.
 
Insert 5 new layers (one for each image) by clicking the 'Insert Layer' button at the bottom of the timeline or choosing 'Insert > Timeline > Layer'.  By default, new layers appear at the top of the layer list in decending order.  Click and drag the layers to reorder them so that the 'Text' layer is at the top and 'Layer 6' is at the bottom.
 
Rename 'Layer 2' to 'Image 1', 'Layer 3' to 'Image 2' etc.
 
 
Step 4 - Insert the first image and create the fade in and out
 
This is the tricky part.  Click on Frame 1 in the Image 1 layer of the timeline.  From the library, click and drag the first image (bmw_1.jpg) onto the stage.  Position it in the center with a thin white border around it.  In the Properties panel, alter the X and Y values to read 5.0 and 5.0 respectively.  This makes sure that the image is in the center of the stage.
 
Convert the image to a symbol which will allow us to animate it.  Make sure that the image is selected on the stage and press F8 or choose 'Modify > Convert to Symbol ...'.  In the dialogue box which appears, name the symbol 'bmw_1_MC', make sure 'Movie Clip' is selected and click OK.  A new movie clip should appear in the library.
 
Now, now we are ready to animate.  Click on Frame 20 in the Image 1 layer of the timeline and insert a new keyframe by pressing F6 or choosing 'Insert > Timeline > Keyframe'.  Insert two further keyframes on frames 40 and 60.  Flash copies the movie clip into frames 1 to 60.  They keyframes allow us to specify changes which we would like to happen.
 
Click in Frame 1 of the Image 1 layer.  Select the image on the stage.  In the properties panel, select 'Alpha' from the Color drop down box and adjust the slider which appears to read '0%'.  Click on Frame 20 of the Image 1 layer, select the image on the stage, select 'Alpha' from the Color drop down box in the properties panel and adjust the slider to '100%'.  Set the 'Alpha' value of the image in Frame 40 to 100% and the 'Alpha' value of the image in Frame 60 to '0%'.
 
If you 'scrub' the timeline, you'll see the image appear in Frame 20 and disappear in Frame 60.  Lets make it fade in and out.
 
Right Click Frame 10 of the Image 1 layer and choose 'Create Motion Tween'.  A faded image of the car should appear if all went well.  Right Click Frame 50 of the Image 1 layer and choose 'Create Motion Tween'.  The image of the car should fade.  Now, scrub the timeline - cool!!
 
Step 5 - Lock the first image layer to prevent changes
 
It's always a good idea when you've finished editing a layer to lock it to prevent you altering it by mistake.  Lock the 'Image 1' layer by clicking the dot underneath the padlock symbol in the timeline.
 
 
Step 6 - Insert the second image and create the fade
 
Now we're working in the 'Image 2' layer.  Click on frame 60 and press F6 to insert a keyframe. Drag 'bmw_2.jpg' onto the stage and adjust the X and Y values to read 5.0 and 5.0 respectively. 
 
Make sure 'bmw_2.jpg' is selected on the stage and press F8 to convert it to a symbol.  Call the symbol 'bmw_2_MC', select 'Movie Clip' and click OK.
 
Insert keyframes (F6) in frames 80, 100 and 120 in the 'Image 2' layer.
 
Adjust the 'Alpha' value of the movie clip in frame 60 to 0%, frame 80 to 100%, frame 100 to 100% and frame 120 to 0%. 
 
Right click in frame 70 and choose 'Create Motion Tween' and do the same in frame 110.
 
Scrub the timeline (or preview the movie by pressing Ctrl + Enter) to see the effect.
 
Lock the 'Image 2' layer to prevent changes.
 
Step 7 - Insert the third, forth and fifth images and create the fades
 
Repeat the above steps for the third image on frames 120, 140, 160 and 180 ...
Repeat the above steps for the forth image on frames 180, 200, 220 and 240 and finally ...
Repeat the above steps for the fifth image on frames 240, 260, 280 and 300.
 
Unlock all the layers and preview the movie by pressing 'Ctrl + Enter'.  Does it work?  Great!
 
Step 8 - Include a caption for the slideshow
 
Remove the stroke (set the stroke color to transparent) and select a nice fill colour from the toolbox. 
 
Click 'Frame 1' in the 'Text' layer. Choose the Rectangle tool (R) and draw a rectangle near the bottom of the stage.  Press 'V' to activate the 'Select tool' and click on the rectangle.  Adjust the W and H values in the properties panel to 400 and 30 respectively and the X and Y values to 5.0 and 200.0 respectively.
 
With the rectangle still selected, look in the color panel on the right (if it is not visible, choose 'Window > Color' or 'Shift + F9') and adjust the 'Alpha channel' value to 60%.  This will make the rectangle slightly transparent to allow you to see the images through it.
 
Select a black fill from the toolbox and select the text tool (T).  Click on top of the rectangle and type 'Fantastic BMW Slideshow' (or whatever).  Press 'esc' to exit editing mode (the text object should still be selected however) and change the font to Arial and the point size to 16.  Activate the selection tool by pressing 'V' and drag the text into the center of the rectangle.  You might need to nudge it into place using the arrow keys because it will tend to snap to the edges of the rectangle.
 
Now, scroll across the timeline and click in frame 300 of the 'Text' layer.  Press F6 to insert a keyframe and the rectangle and the text should appear there as well.
 
Step 9 - Preview and publish the movie
 
Preview the movie by pressing 'Ctrl + Enter'.  Before you can publish the movie, you should save the Flash source file you have created.  Choose 'File > Save As ...' and save it in your Documents.
 
Publish the movie (create a .swf file) by choosing 'File > Publish'.  The swf file (together with an HTML file and a javascript file) will be created in the same folder that you saved the source file.
 
 
Extension tasks
 
» Alter the caption for each image
» Overlap the images so that they 'crossfade'.  You will need to do some fancy stuff at the beginning and end of the timeline to get the last image to fade into the first!
Comments

Other Places ...