Import Images and Flash Transition Animation

Import Images and Flash Transition Animation
Now that we have customized the FlashR Preloader for SWF template, we can build our slideshow template. We already have our four placeholder images (see Photoshop tutorial). To follow the tutorial series, use the links below.

Let's give each image two seconds on the stage. Because the frames per second is set to 31 (see Document settings), we will need to give each image 62 frames. Let's round that off to 60 frames. To these 60 frames we will add fade-in and fade-out transitions that will last 10 frames each.

We begin by importing the four placeholder images into our project fla.

  1. Add a new layer to the Timeline and name it "image1". From the Menubar, click File – Import – Import to Stage. Flash will place the image1.psd image on Frame 1 of the image1 layer and place it in the Library.

    Repeat this for the other three placeholder images. You will have four layers named image1 through image4 with the imported images. Select all four layers and drag them under the Content layer. Arrange them in ascending order with image1 layer at the top of the group.

    Because the preloader will go directly to Frame 2 after everything is loaded, we need to remove the images from Frame 1. For all four layers, add a Keyframe to Frame 2 and remove the image from Frame 1.

    We will work on the image1 layer first. Because the preloader takes up Frame 1, we will set the image to fade-in over 9 frames, stay visible on the stage for 60 and then fade-out over 10 frames.

  2. On Frame 2 of the image1 layer, right-click on image1 on the stage and Convert to Symbol. Set the Type to Movie Clip and name it "image1".

  3. Right-click on the image again and choose Create Motion Tween. Drag the Tween span to Frame 80.

  4. Add a Keyframe to Frame 11, 70 and 80.

  5. On Frame 2, set the Alpha to 0 in the Properties panel (Color Effect – Style – Alpha). On Frame 11 and 70, set the Alpha to 100 and on Frame 80 set the Alpha to 0.

    The preloader code tells Flash to go to Frame 2 and stop. If we leave the code as is, the Timeline will stop on Frame 2, instead of going on to play the 80 frames.

  6. In the Actions panel, change the gotoAndStop(2) to gotoAndPlay(2).

Now we can test our movie and watch image1 fade in, stay visible for two seconds and fade-out. However, it doesn't repeat. We will add some code for that later.

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2022 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.