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
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Flash CS4 Image Slideshow


Many of my customers want a small slideshow on the front page of their store, blog or website. This could be a slideshow of the featured products in the store or the latest photos they have added to their blog.

This slideshow can be done in many ways including JavaScript, a gif animation and FlashR. I like to use Flash because it is an easy and fast way to create a simple slideshow that displays several images one after the other. On the other hand, it is also easy to build a more advanced XML based slideshow with transition effects between the images. In the next few tutorials, we will build an image slideshow in Flash CS4 starting with a plane image display and building up to an advanced version with transition effects.

The only things you will need for this tutorial are three jpg images and Adobe Flash. It is better if the images are all the same size. We will use only three for our tutorial but you may use as many as you wish. Just keep in mind that more images will cause the download time for your Flash swf file to increase.

Open Flash CS4, start a new ActionScript 3 project and let’s get to work.

  1. The first step is to set the stage to the same size as our images. From the Menubar, click Modify – Document. In the Document Properties dialog box, enter the Width and Height in pixels for your images. This will set the stage to match. You may also want to change the background color. Click on the small color box and choose a color. You might want to match your webpage background color.

    We will use Frame 1 on the Timeline for the Preloader code, which we will add this later. So for now, we will start building our slideshow on Frame 2.

    Each of our images will display for 100 frames. Because our Frames Per Second is set to 24 by default, this will give us about four seconds of display time for each image.

  2. Rename Layer 1 to "Background". On this same layer, right-click on Frame 300 (100 frames x 3 images) and add a blank frame (Insert Frame). This will display the Background layer during the entire animation.

  3. Add a new layer and name it "Image1". This layer will hold our first image. But we don’t want the image to appear on the stage until Frame 2. Remember, Frame 1 will be our preloader. On Frame 2 of this layer, right-click and add a Keyframe.

    Now we will add our first image.

  4. From the Menubar, click File – Import – Import to Stage. This should place our first image centered on the stage. To be sure it is aligned as we want, select the image and go to the Properties panel. The X and Y position values should both be set to 0.0.

    Save your project file.


Join us in the Flash forum.




Add Flash+CS4+Image+Slideshow to Twitter Add Flash+CS4+Image+Slideshow to Facebook Add Flash+CS4+Image+Slideshow to MySpace Add Flash+CS4+Image+Slideshow to Del.icio.us Digg Flash+CS4+Image+Slideshow Add Flash+CS4+Image+Slideshow to Yahoo My Web Add Flash+CS4+Image+Slideshow to Google Bookmarks Add Flash+CS4+Image+Slideshow to Stumbleupon Add Flash+CS4+Image+Slideshow 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