Simple Flash Blog

Flash preloaders are very useful in keeping the audience involved while the main content is loading. That is why the preloaders should be fun and attractive.

 After you read this tutorial you’ll be able to create a flash preloader like the one below:

STEPS TO FOLLOW:

1.Prepare a nice Christmas picture having dimensions 200×16 pixels. I put on it ten images having dimensions 16×16.

2. Create a new flash document and save it as flashPreloader.fla. Go to Modify >> Document (Ctrl+J) and set the width to 300 pixels and height to 150 pixels.

3. Insert a tho new layers and rename them from top to bottom actions, text and content.

4. In the first frame of the content layer import the Christmas picture you prepared. Go to File >> Import >> Import to Stage (Ctrl+R) and select from your computer the desired picture then press the Open button. Align the picture to center both horizontal and vertical.

5. Select the picture and go to Modify >> Convert to Symbol or press F8 key to convert it to a movie clip. Give it the name preloaderMC, set MovieClip as type and choose center for the Registration point. While the movie is still selected go to the Properties panel and give it an instance name of preloader_mc.

6. In the first frame of the text layer insert a Dynamic Text Field using the Text tool (T) from the Tools panel. Set font Verdana, size 20, bold and choose a red color. Set the width to 200, center it on horizontal and on vertical arrange it just below the preloader_mc. Also  type loaded_txt in the Instance Name field.

7. Go back to the content layer and insert a blank keyframe (Insert >> Timeline >> Blank Keyframe or right-click >> Insert Blank Keyframne). Your Timeline should look like in the image below (having two frames on the content layer and only one frame on the other layers):

8. In the second frame of the content layer put the main content of your movie (a movie clip, a big picture or whatever you desire).

9. Now comes the most important part: the ActionScript code. Go to the first frame of the actions layer, open the Actions panel (F9) and start typing the ActionScript instructions below:

stop(); // to stop the playhead to current frame
// create a new MovieClip mask_mc for displaying the desired area of preloader_mc
this.createEmptyMovieClip("mask_mc",1);
preloader_mc.setMask("mask_mc");
mask_mc._x = 150;
mask_mc._y = 75;
var total:Number = _root.getBytesTotal(); // variable that keeps the amount of bytes of the flash movie
// the begining coordinates of drawing from mask_mc
var xstart:Number = -100;
var ystart:Number = -8;
mask_mc.lineStyle(1,0x000000,100);  // it is required to set the lineStyle when drawing with ActionScriptmask_mc.onEnterFrame = function(){
  loaded = _root.getBytesLoaded();
     this.clear();  
     var percent:Number = Math.floor((loaded/total)*100); // percent of loaded bytes
     if(loaded != total){
    // display the percent of loaded bytes
          loaded_txt.text=percent+"%";
    // drawing the mask
    var amount=Math.floor(percent/10)*20; // the value added to the drawing
          this.beginFill(0x000000);
          this.moveTo(xstart,ystart);
          this.lineTo(xstart,ystart+16);
          this.lineTo(xstart+ amount,ystart+16);
          this.lineTo(xstart+ amount,ystart);
          this.lineTo(xstart,ystart);
          this.endFill();
  }else{
          _root.gotoAndStop(2);
          this.removeMovieClip();
     }
}


10. Great! You have now a flash preloader for winter holidays.

This entry was posted on Sunday, December 2nd, 2007 at 6:50 pm and is filed under ActionScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.