Easing preloader as3

Published
by
Armen Abrahamyan
on March 17, 2009
in Actionscript, Download, Flash and Tutorials
. Tags: , , .

Here is the example of easing, reusable preloader that I am using in some of my projects.
The general idea is to tween the loader bar to the next point instead of just jumping to it.
The easiest way to achieve that effect is using one of the tweening libraries. My favorite one is Tweenlite, which you can get from http://blog.greensock.com/tweenliteas3/
 (I'm still using the old library for this example).

Another point is that in most cases it is nice to add and remove preloaders with some effect, for example fade in/out. And for this reason loading actually starts when preloader fades in, and loaded content should be visible when preloader is fade out.
Note that preloader itself is not monitoring loading process, it is just contains method to set progress.

Example:

Get Adobe Flash player

Preloader.as

PLAIN TEXT
Actionscript:
  1. package com.abrahamyan.util
  2. {
  3.    
  4.    
  5.     /**
  6.      * ...
  7.      * @author Armen Abrahamyan | http://www.abrahamyan.com
  8.      */
  9.    
  10.     import flash.display.MovieClip;
  11.     import flash.events.Event;
  12.     import gs.TweenLite;
  13.     import gs.OverwriteManager;
  14.     import gs.easing.*;
  15.     /**
  16.      *
  17.      */
  18.     public class Preloader extends MovieClip
  19.     {
  20.        
  21.         public static const ON_SHOW:String = "onShow";
  22.         public static const ON_HIDE:String = "onHide";
  23.         public static const ON_PROGRESS_FINISH:String = "onProgressFinish";
  24.         public static var fadeTime:Number = .6;
  25.         public static var progressIntTime:Number = .3;
  26.         /**
  27.          *
  28.          * @param   pLabel
  29.          * @param   pXpos
  30.          * @param   pYpos
  31.          */
  32.         public function Preloader(pLabel:String = "Loading...", pXpos:Number = 0, pYpos:Number = 0):void
  33.         {
  34.             alpha = 0;
  35.             visible = false;
  36.             bar_mc.scaleX = 0;
  37.             label = pLabel;
  38.             move(pXpos, pYpos);
  39.            
  40.         }
  41.         /**
  42.          *
  43.          * @param   pXpos
  44.          * @param   pYpos
  45.          */
  46.         public function move(pXpos:Number, pYpos:Number):void
  47.         {
  48.             this.x = pXpos;
  49.             this.y = pYpos;
  50.         }
  51.         /**
  52.          *
  53.          */
  54.         public function set label(pLabel:String):void
  55.         {
  56.             label_txt.text = pLabel
  57.         }
  58.         /**
  59.          *
  60.          */
  61.         public function get label():String
  62.         {
  63.             return label_txt.text;
  64.         }
  65.         /**
  66.          *
  67.          */
  68.         public function show():void
  69.         {
  70.             TweenLite.killTweensOf(this);
  71.             TweenLite.to(this, fadeTime, { autoAlpha:1, onComplete:onShowComplete});
  72.         }
  73.         /**
  74.          *
  75.          */
  76.         private function onShowComplete():void
  77.         {
  78.             dispatchEvent(new Event(ON_SHOW));
  79.         }
  80.         /**
  81.          *
  82.          */
  83.         public function hide():void
  84.         {
  85.             TweenLite.killTweensOf(this);
  86.             TweenLite.to(this, fadeTime, { autoAlpha:0, onComplete:onHideComplete});
  87.         }
  88.         /**
  89.          *
  90.          */
  91.         private function onHideComplete():void
  92.         {
  93.             MovieClip(this.parent).removeChild(this);
  94.             dispatchEvent(new Event(ON_HIDE));
  95.         }
  96.         /**
  97.          *
  98.          */
  99.         public function setProgress(pProgress:Number):void
  100.         {
  101.             if (pProgress<0 || pProgress>1)
  102.             {
  103.                 throw new Error("Progress range should be in [0-1] interval");
  104.             }
  105.             TweenLite.killTweensOf(bar_mc);
  106.             TweenLite.to(bar_mc, progressIntTime, {scaleX:pProgress, onComplete:onProgressComplete} );
  107.         }
  108.         /**
  109.          *
  110.          */
  111.         private function onProgressComplete():void
  112.         {
  113.             if (bar_mc.scaleX == 1)
  114.             {
  115.                 dispatchEvent(new Event(ON_PROGRESS_FINISH));
  116.             }
  117.         }
  118.         /**
  119.          *
  120.          */
  121.         public function destroy():void
  122.         {
  123.             TweenLite.killTweensOf(this);
  124.         }
  125.     }
  126.    
  127. }

Download source files

Releated Posts


8 Responses to “Easing preloader as3”

Feed for this Entry Trackback Address
  1. 1 John Barrett
    March 18, 2009 at 1:21 am

    Hi, great Example!
    I tried to download, but could not ope the fla is it in CS 4? If so since I only have CS 3 that would explain why.

    Anyway, I think that I can get it working with my own graphics, get work and blog`-`

  2. 2 admin
    March 18, 2009 at 2:03 am

    Hi John, thx
    FLA is CS4 :)

    U have to create MovieClip in library with progress bar(bar_mc) and textfield(label_txt) that refers to Preloader.as

  3. 3 John Barrett
    March 18, 2009 at 3:53 am

    thanks, I thought that it might be CS 4. Yeah I should have no problem with the graphics. the text field is easy, and the process bar will just be with rectangle tool. I will post tomorrow and let you know how it work out. This is a great example`-`

    John

  4. 4 John Barrett
    March 19, 2009 at 2:57 am

    Hello again, I think that I might done it wrong:(
    I set the doc class to point to Preloader.as, but I get an error:
    Cannot create property bar_mc on com.abrahamyan.util.Preloader.
    at flash.display::Sprite/constructChildren()
    at flash.display::Sprite()
    at flash.display::MovieClip()
    at com.abrahamyan.util::Preloader()

    I was wondering if you can look at:
    http://blog.meleana.info/?p=279

    To see if I did something really wrong?
    Thanks`-`
    Johnny

  5. 5 admin
    March 19, 2009 at 9:11 am

    Hi John. You have to create your preloader as MovieClip, export in first frame and in linkage->class use com.abrahamyan.util.Preloader

  6. 6 John Barrett
    March 20, 2009 at 2:58 am

    Hi,
    Thanks for your help`-` I was able to get rid of those errors, but it seems when I try to access the as file in the fla
    var bar_mc = new bar_mc();
    var label_txt = new label_text();

    I get:
    A conflict exists with definition bar_mc in namespace internal
    A conflict exists with definition label_txt in namespace internal

    Without this in the fla I get a undefined variable.

    Yikes, I think this might be a little above my knowledge:(
    Thanks so much for all your help, your work is an inspiration to an aspiring flasher like me`-`

  7. 7 admin
    March 23, 2009 at 7:04 pm

    CS3 fla file is included in ZIP now.
    thx

  1. 1 Johnny Flash » preloader
    Pingback on Mar 19th, 2009 at 2:32 am

Leave a Reply