logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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.





Add Import+Images+and+Flash+Transition+Animation to Twitter Add Import+Images+and+Flash+Transition+Animation to Facebook Add Import+Images+and+Flash+Transition+Animation to MySpace Add Import+Images+and+Flash+Transition+Animation to Del.icio.us Digg Import+Images+and+Flash+Transition+Animation Add Import+Images+and+Flash+Transition+Animation to Yahoo My Web Add Import+Images+and+Flash+Transition+Animation to Google Bookmarks Add Import+Images+and+Flash+Transition+Animation to Stumbleupon Add Import+Images+and+Flash+Transition+Animation to Reddit



 



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


For FREE email updates, subscribe to the Flash and Animation Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


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

g


g features
Motion 5 Parallax Effect - The Graphics

Animate Lower Third in Motion 5

Drop Zone and Lower Third in Motion 5

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor