g
Printer Friendly Version

editor  
BellaOnline's Flash and Animation Editor
 

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.



Join us in the Digital Art and Design forum.





Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 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.



| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor