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

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Flash CS5 SWF Preloader Sample File

In the new FlashR CS5, AdobeR has included a few sample files to help you get started on your projects. For example, the Preloader for SWF sample file, is a basic preloader for any project. Let's take a look.

Open Flash and choose Sample Files from the Create from Template section. In the New from Template dialog box, choose the Preloader for SWF file. The finished preloader opens into the Flash workspace. We have three layers on the Timeline. The Background layer contains a patterned background and the Content layer contains a dynamic text box and the word "LOADING". The Actions layer has all the ActionScript code that runs the preloader.

  1. Click on Frame 1 of the Actions layer. Open the Actions panel ( Window Actions ) to see the code.

    For this tutorial, we want to keep the ActionScript untouched. But we can customized the rest of the preloader to match our project.

  2. Still on Frame 1, go to the Background layer and unlock the layer. Click on the empty area of the stage and go to the Properties panel. We can see that this layer has no Stroke color and the Fill color is dark gray. Click on the Fill color box and change the color to white or the color of your choice.

  3. Still on Frame 1, click on the Content layer. You will see that we have two elements on this layer. Click on the bottom box and go to the Properties panel. This box is a dynamic text box with an Instance Name of "percent_txt". It is a dynamic text box because the ActionScript code will display the amount/percent of the file that has downloaded. This text will change each time Flash checks for a new percentage.

    In the Character section, we can change the Font Family, Style, Size and other text controls for the dynamic text to match the style for our project. In other sections of the Properties panel, we have many other controls for the text box such as size and position.

  4. Also on the Content layer, we have the red text "LOADING". If we click on that, we can see in the Properties panel that it is a Movie Clip. Double-click on the red text to enter Edit Mode for this Movie clip. Inside the Movie Clip we have another Timeline with one layer. This layer contains a Tween that has 31 frames. If we scrub along the Timeline, we can see that the Tween animation expands and contracts the text.

  5. Go back to Scene 1 and move the Playhead from Frame 1 to Frame 2. Notice that the contents on the Background layer still display but the contents of the Content layer has changed to say "Large content here". Of course, you will want to replace this with your own content. As you can see, Frame 1 is for the preloader and Frame 2 begins the rest of your project.

*Adobe provided a review copy to me free of charge.

Join us in the Flash forum.

Add Flash+CS5+SWF+Preloader+Sample+File to Twitter Add Flash+CS5+SWF+Preloader+Sample+File to Facebook Add Flash+CS5+SWF+Preloader+Sample+File to MySpace Add Flash+CS5+SWF+Preloader+Sample+File to Del.icio.us Digg Flash+CS5+SWF+Preloader+Sample+File Add Flash+CS5+SWF+Preloader+Sample+File to Yahoo My Web Add Flash+CS5+SWF+Preloader+Sample+File to Google Bookmarks Add Flash+CS5+SWF+Preloader+Sample+File to Stumbleupon Add Flash+CS5+SWF+Preloader+Sample+File 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
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor