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


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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


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