Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks &
Illustrator Tutorials
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Flash Tutorials & Resources > Timeline Preloader   

Flash Tutorials

Basics

Animation & Effects

Actionscript

Creating a Website

Miscellaneous

Flash Articles

Free Flash Resources

Other Flash Resources

Flash Timeline Preloader

This tutorial will explain how to create Timeline 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 Graphic Symbol

  • First and foremost type "LOADING" on your center stage. Select the word LOADING and press F8 to convert it to a symbol.
  • Name the symbol "loading", choose Graphic behavior and press OK.

Create a "LOADING" Movie clip

  • Press Ctrl+F8 to create a new Movie clip.
  • Name this Movie clip "loading_mc", choose Movie clip behavior and press OK.
  • Insert your loading Graphic Symbol in Frame1.
  • Press F6 to insert keyframe in frame5 and in frame10
  • Now go back to frame5. Select "LOADING", still keeping the playhead in frame5, choose Alpha 0 from color pop-up menu of your property panel.
  • Choose any frame between 2 and 4 and select Motion from the tween pop-up menu in the Property inspector.
  • Choose any frame between 6 and 9 and select Motion from the tween pop-up menu in the Property inspector.
  • Your Movie clip is ready, Now come back to Scene1.

Create Bar Preloader

  • Insert 5 layers and name them as shown below.

  • Now go to frame1 of loading layer, drag loading_mc to your center stage. Center Align the movie clip. Press F5 on your 40th frame of loading Layer.
  • Select frame1 of your mask layer and draw a rectagle as shown below.

    Press F5 in frame 40
  • Double click on this rectangle, Copy ( Ctrl+C), go to Layer bar and press (Ctrl+Shift+V) to paste it exactly in the same position. Now select only its border, Cut (Ctrl+X) and paste (Ctrl+Shift+V) in frame1 of your border layer.
  • Press F5 in frame 40 of border layer
  • Now come back to your bar layer, Push the rectangle to the left as shown below
  • Go to Frame 40, keeping playhead on frame 40, pull the rectangle onto the other side as shown below
  • Now select any frame between 2 and 39 and select Shape from the tween pop-up menu in the Property inspector.
  • Now go back to layer mask, right click on the label and select mask.

Insert script in the action panel

  1. Go to action Layer, insert keyframe in 1st,2nd,5th,6th,10th,11th,15th,16th,20th,21st,25th,26th,30th,31st,35th,36th and 40th Frame
  2. Copy & Paste the following script into the action panel of Frames mentioned below.

    ifFrameLoaded ("s1") {
    x = 1;
    play ();
    }
    Frame 1
    ifFrameLoaded ("s2") {
    x = 2;
    play ();
    }
    Frame 5
    ifFrameLoaded ("s3") {
    x = 3;
    play ();
    }
    Frame 10
    ifFrameLoaded ("s4") {
    x = 4;
    play ();
    }
    Frame 15
    ifFrameLoaded ("s5") {
    x = 5;
    play ();
    }
    Frame 20
    ifFrameLoaded ("s6") {
    x = 6;
    play ();
    }
    Frame 25
    ifFrameLoaded ("s7") {
    x = 7;
    play ();
    }
    Frame 30
    ifFrameLoaded ("s8") {
    x = 8;
    play ();
    }
    Frame 35
    gotoAndPlay ("start"); Frame 40


    if (x != 1) {
    gotoAndPlay(1);
    }
    Frame 2
    if (x != 2) {
    gotoAndPlay(5);
    }
    Frame 6
    if (x != 3) {
    gotoAndPlay(10);
    }
    Frame 11
    if (x != 4) {
    gotoAndPlay(15);
    }
    Frame 16
    if (x != 5) {
    gotoAndPlay(20);
    }
    Frame 21
    if (x != 6) {
    gotoAndPlay(25);
    }
    Frame 26
    if (x != 7) {
    gotoAndPlay(30);
    }
    Frame 31
    if (x != 8) {
    gotoAndPlay(35);
    }
    Frame 36

Your preloader is now ready. You can start building your main movie from the 41st frame and call the 41 frame "start" . After your main movie is ready. Divide the total frames used by your main movie by 8. Name them s1, s2, s3 and so on.

Download the .fla file


Now building a website is as easy as 1-2-3!

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

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


Looking for high-quality Flash Website Design? Choose from over 6000 templates!

Gorgeous Page Roll Image Transition Effect in Flash

Creating Page Curl Transition

Creating a Rotating 3D Planet in Flash

Creating Realistic 3D Planet

Best Flash Photo Gallery Website Templates

Best Flash Photo Gallery Website Templates

Burning Image Effect in Flash

maskmn_image055

Realistic Rippling Water Animation in Flash

r_water

Awesome 3D Flash Website Templates

Awesome 3D Flash Website Templates

 

Featured Template
Template # 57649
Type: Responsive JavaScript Animated
Price: $69

Flash Photo Galleries