Flash Preloader

First things first, the Stage. Set the stage to 450 x 250, Stage color doesn't matter for this.

Next, We need to create another Layer. So, you should have 2 Layers Nows. Make Sure each Layer has 2 Frames in it, then Name them as follows:

image 1

  • Actions - (Top Layer) - This layer will be used to place the actions for the preloaded.
  • Loading Bar - (Bottom Layer) - This layer will be used to place the Loading Bar for the preloaded.

Now on to the Loading Bar. Select the Loading Bar layer and go to Insert > New Symbol (Shift+F8), Create a new MC and name it 'bar'.

Next, Create Two new layers inside the 'bar' MC. Each with 10 Frames, Then name them as follows:

  • Actions - (Top Layer) - This layer will have a Stop Action on it.
  • Outline- (Middle Layer) - This Layer will have the Outline for the loading bar
  • Fill - (Bottom Layer) - This layer will have the fill color for the Loading bar. This layer will also have a few different KeyFrames on it for the motion of the bar loading.

image 2

Select the 'Outline' layer and then select the Rectangle Tool (r) , and Create a Wide but short rectangle with the Outline color Black and a fill color of your choice.

Next, Select the Fill Color, and Copy it then Delete it. Then Select the 'Fill' layer and Press CTRL+SHIFT+V or EDIT > Paste In Place. Now you have a Full Loading Bar. With the Fill Color still selected, Go to Insert > Convert to Symbol (F8) and name it fill.

Next, Insert a KeyFrame on Frame 10 of the 'Fill' layer. After that, go back to frame one of the 'Fill' Layer and Resize the fill bar to 50px x 16px. And Place it
to the left of the Outline. (See Images below for this part)

Resize info Box

image 4

Resized Fill Bar

image 5

After you have resized the fill bar your will need to add a Motion Tween to Frame 1. So it tweens to frame 10.

Lastly on the Loading bar. Select the 'Actions' layer, Then place a Stop() action on the First Frame.

Now go back to the Main Stage. With Layer: Loading Bar selected we need to place 4 Text Fields. Two will be Static Text and the other Two are Dynamic Text.

Create the two Static Text Fields. Have one read "Bytes Loaded" and the Other read "Total Bytes".

Next Create the two Dynamic Text Fileds. Allow these to be able to fit at least 12 characters in length on a Single line.

Name the First one "tbytes" with a var name of the same name, then align it to the Static Field that reads "Total Bytes".

Then name the Second one "bloaded" with a var name of the same name, then align it to the Static Field that reads "Bytes Loaded"

Or arange them any way you wish, Just as long as bloaded is with "Bytes Loaded" and like wise with tbytes and "Total Bytes".

Example for Dynamic Text Field

Click to enlarge
Click to enlarge

Now, Lock the Loading Bar Layer, then select the Actions Layer. Select Frame 2 and Go to > Insert > KeyFrame (F6) or right click on frame 2 and Select Insert KeyFrame.

On Frame 2 Insert a gotoAndPlay(1); action.

The following Action script will be for Layer: Actions Frame: 1.

Copy and Paste the Following Script into Frame 1 on the Actions Layer:

// tbytes = Total Bytes
tbytes = getBytesTotal()
// bloaded = Bytes Loaded
bloaded = getBytesLoaded()
/*
Basically the code below takes the Total bytes for the swf
the multiplies them by a percentage.
Example = .25 = 25% Loaded, 50 = 50% loaded. .75 = 75% loaded ect...
It then checks the Bytes Loaded to the Total Bytes, If it is Higher
than the current statement it then executes the tellTarget actionscript
*/
if (bloaded >= Number(tbytes * .25)){
tellTarget(box){
gotoAndStop(3);
}
}
if (bloaded >= Number(tbytes * .50)) {
tellTarget(box){
gotoAndStop(5);
}
}
if (bloaded >= Number(tbytes * .75)) {
tellTarget(box){
gotoAndStop(7);
}
}
if (bloaded >= Number(tbytes * .90)) {
tellTarget(box){
gotoAndStop(9);
}
}
if (bloaded == tbytes) {
tellTarget(box){
gotoAndStop(10);
}
gotoAndPlay(11);
}
// end of Script

Final Timeline

image 7

Text Fields

image 8

The fla I made available [coming soon in the flash downloads section] has an added Scene that I did not tell you to add. This Scene Was added to allow for the movie to load. Otherwise it would load to quick and not have been able to view when tested. I placed a few Images and text in the Second scene to add to the size of the file. After adding a new scene with some images the next thing to do is Test the Movie. When testing the Movie, Go to View > Show Streaming. this Starts the movie over and simulates the movie loading as if it were being downloaded.


Close    To Top
  • Prev Article-Flash:
  • Next Article-Flash:
  • Now: Tutorial for Web and Software Design > Flash > Basic > Flash Content
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Geek Tutorial
     

    Blogging Tutorial

      RSS Tutorial
      Podcasting Tutorial
    Graphic Design Tutorial
      Coreldraw Tutorial
      Illustrator Tutorial
      3D Tutorials
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial/ Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial/ Articles
     

    XML Style

      AJAX Tutorial
      XML Mobile
    Flash Tutorial/ Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial/ Articles
      Linux Tutorial
      Symbian Tutorial
      MacOS Tutorial
    Personal Tech
      Hardware Tutorial
      Software Tutorial
      Online Auction