Simple Flash Preloader

This tutorial will explain how to create a simple Preloader in Flash MX 2004. The download .fla is included at the end of the tutorial.

Please note:
1. You need to have Flash Player 7.0 installed to view the Flash animation.
2. Flash MX 2004 must be installed in your system to download the .fla file.

STEPS TO FOLLOW

Create a Movie clip.

1. Draw a borderless rectangle.
   If your color mixture panel is not open press Shift+F8 to open it.
   Select your rectangle, go to color mixture panel and choose linear from the drop down menu.
   Now change your linear fill accordingly, with white on right end and your background color on the other end.
   
2. Select this rectangle and press F8 to convert this rectangle to a symbol. Name this symbol "Bar" and choose Graphic behavior. Press OK.
   
   
3. Press Ctrl+F8 to create a new movie clip for preloader effect.
   Call it "preloader_mc". Choose movie clip behavior and press OK.
4. Draw a borderless zigzag as shown below on the first frame and press F5 on the 90th frame.
   
   
5. Insert a new layer and pull it below Layer1.
6. Insert the bar graphic symbol into this new layer "Layer2".
7. Adjust the height of the bar such that its height is equal or little more than the zigzag height.
8. Position this bar graphic as shown below.
   
   
9. Press F6 on the 35th frame. Keeping framehead on 35th frame, pull the bar graphic onto the other side of zigzag as shown below.
   
   
10. Select any frame between Frames 2 and 34 and select Motion from the tween pop-up menu in the Property inspector.
11. Select frame 40 and press F6 to insert a new keyframe on the 40th frame.
12. Keeping the framehead on the 40th frame select bar graphic and go to main menu,
    Modify>Transform>Flip Horizontal.
13. Select frame 85 and press F6 to insert a new keyframe on the 85th frame.
14. Keeping the framehead on the 85th frame pull the bar graphic symbol to its initial position as in frame 1.
15. Select any frame between Frames 41 and 84 and select Motion from the tween pop-up menu in the Property inspector.
16. Select frame 90 and press F5.

Adding Preloader to your Scene1

1. Now go to your Scene1.
2. Insert 3 new layers.
3. Drag "preloader_mc" from your library onto your working area. Place it at the center of your working area. Press F5 on the 2nd frame
4. Type in "LOADING" on the 1st frame of your 2nd layer.
5. Copy and Paste the below script in the action panel of your 1st frame of 1st layer.
   
   

   ifFrameLoaded ("end") { gotoAndPlay ("start"); }

   
   
6. Press F6 on the 2nd frame of 1st layer and insert the below script in the action panel of your 2nd frame of 1st layer.
   
   

   gotoAndPlay (1);

Start your Main movie from the 3rd frame onwards.
Name the 1st frame of your main movie "start" and the last frame "end".

Download the .fla file

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!