g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Kidney Disease
Today in History
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


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

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 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 features
Up and Running with Hype lynda.com

Web Motion for Beginners: An Overview by Tom Green

Halloween Haven Interactive Video Webpage

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor