Tutorial. How to use free flash Preloader component.

What you will learn.

  1. How to install preloader component into Flash CS4 IDE.
  2. How to implement nice visual preloader when loading external images without a single line of ActionScript code
  3. What advanced functionality is offered by preloader component

Preloader component introduction.

Preloaderz preloader component is a free to use, open source Adobe Flash component, which was created to help flash developers with preloaders implementation.

Download.

Depending on the version of Adobe Flash you have you should download whether AS2 or AS3 version of it from our sourceforge portal.

Free preloader component installation.

In order to install any component/extension for Adobe Flash you need to have Adobe Extension Manager installed. Most of flash developers do have it already, since it’s installed with the latest Flash IDE. Those who don’t have it – can get it from Adobe website. Adobe Extension Manager is free and is a must to have for flash developers, who uses or plans to use flash components in their projects.

Having Adobe Extension Manager installed, you simply need to launch preloader mxp file downloaded from the links mentioned in download  section (Preloader_AS3.mxp for AS3, Preloaderz.AS2.mxp for AS2)

Preloaderz component in Extension Manager

FIY, MXP files are installation packages of Adobe Flash components.

You will need to restart Flash IDE in order for newly intalled component to appear.

Using preloader component.

There might be different scenarios where the preloader might be needed. Let us go the simple route and implement a preloader for externally loaded picture, this will include the next simple steps:

  1. Locate preloader component in Components window, which can be toggled through menu Window->Components or by pressing Ctrl+F7.

    Components Window with preloader component installed

  2. Drag and drop an instance of the component onto the stage

    Instance_on_stage

  3. Select the component and go to the Component Inspector (Window->Component Inspector, Shift+F7)

    Component properties

  4. Set proper path to the external image in source field

  5. Build and run flash document

    Loaded image

    That’s it :)

What happened is that preloader created a container for loaded image right in the place where the instance of component was located on stage. And while image was loading the standard built-in animation was played.

Advanced component properties.

As you may notice there more then just source property available for preloader component. What are they meant for?

  • resizeLoadedHeight and resizeLoadedWidth - as you may guess, these properties should be used if you want to resize the loaded image to a particular width and height. Set them to whatever values are needed, in pixels
  • skinSwf - the name of animation from library to be played instead of one which is built-in. In AS3 projects it’s the class name associated with movieclip, for ActionScrip2 it’s the linkage identifier.
  • skinType - there are two options available for this property – cyclic and progressive - this property defines whether prelaoder animation is played in cycle while image is loaded, or preloader animation is displayed using gotoAndStop() method, stopping on the frame which corresponds to the loaded image percentage¬† – 1st frame – 0% loaded, last frame – 100% loaded, emulating the progress loading.
  • target - this is very useful property. In most cases that wouldn’t be enough to load image just in-place of prelaoder component, instead it’s better to load the image into a proper location defined by design. This is done with target property – just put a name of container movieclip and image will be loaded into it. So you may place preloader animation anywhere you want it, and display loaded image in a different place.

That’s all for now. Please feel free to ask any questions. Our forum is especially meant for them ;)

  • Posted by Alice On March 16, 2010

    Im too new in flash, and I want to know about the source and target in the component inspector. Exactly, what can I put in that without having an error window?

    Thanks.

  • Posted by Darts700 On December 2, 2010

    Can’t you put resizeLoadedHeight and resizeLoadedWidth in % (percent) not only in pixels??

  • Posted by JPinheiro On February 16, 2011

    It just does not appear in Components windows
    It does not appear anywhere at all :(

  • Hi JPinheiro,

    Are you sure you have installed it using Adobe Extension Manager?

  • Posted by q On March 12, 2011

    Set proper path to the external image in source field

    // this is very confusing… what is proper path? can u give an example?

  • @Q,

    Path to external image depends on what image you want to download through preloader.
    For example your swf file is uploaded to your website:

    http://www.q-website.com/flashfile.swf

    Inside this flash movie you want to download image which also located at your website, let’s say:

    http://www.q-website.com/images/picture.jpg

    to load this image and display preloader during the download process to your user, you will need to drop an instance of preloader component onto your stage, and specify path to the image in ‘source’ field. Remember it can be absolute or relative – so you can enter the following as a ‘source’ value:

    1) Source = http://www.q-website.com/images/picture.jpg
    or
    2) Source = images/picture.jpg (since your swf file is at the same level as ‘images’ folder)

    For files on your local computer you can use paths like C:\FolderName\ImageName.jpg or again relative path according to the location of your swf.

    I hope this is clear – if not – let me know

  • Posted by Beplural On March 14, 2011

    It works. Though it shows a square-shape pre-loader instead of a round one that is on stage. How do I change the style of the preloader?

  • Posted by Asaf On April 27, 2011

    If i want this preloader to load a movie how do I go about using it in the source. I tried putting the absolute url of the swf file but it does not load anything.

  • Posted by djdobey On July 15, 2011

    okay i must be just plain dumb…because i really can not get this to work at all…using flash cs5…..help please

  • Posted by nobe On November 7, 2011

    is this will work on flash cs3? thanks

  • Dear Nobe,
    Both AS2 and AS3 versions of the preloader components do work in Flash CS3

  • Posted by Gary James On November 8, 2013

    I bought your bubbles preloader and I am having issues using your component to get it working. I am trying to use type 3 bubbles and this is the error I get:

    ArgumentError: Error #2109: Frame label null not found in scene null.
    at flash.display::MovieClip/gotoAndPlay()
    at NavMenu3_fla::bubbleType03_colourSB_63/frame2()
    ArgumentError: Error #2109: Frame label null not found in scene null.
    at flash.display::MovieClip/gotoAndPlay()
    at NavMenu3_fla::bubbleType03_colourSB_63/frame2()
    ArgumentError: Error #2109: Frame label null not found in scene null.
    at flash.display::MovieClip/gotoAndPlay()
    at NavMenu3_fla::bubbleType03_colourSB_63/frame2()
    ArgumentError: Error #2109: Frame label null not found in scene null.
    at flash.display::MovieClip/gotoAndPlay()
    at NavMenu3_fla::bubbleType03_colourSB_63/frame2()
    ArgumentError: Error #2109: Frame label null not found in scene null.
    at flash.display::MovieClip/gotoAndPlay()
    at NavMenu3_fla::bubbleType03_colourSB_63/frame2()
    ArgumentError: Error #2109: Frame label null not found in scene null.
    at flash.display::MovieClip/gotoAndPlay()
    at NavMenu3_fla::bubbleType03_colourSB_63/frame2()
    ArgumentError: Error #2109: Frame label null not found in scene null.
    at flash.display::MovieClip/gotoAndPlay()
    at NavMenu3_fla::bubbleType03_colour_65/frame2()
    ArgumentError: Error #2109: Frame label null not found in scene null.
    at flash.display::MovieClip/gotoAndPlay()
    at NavMenu3_fla::bubbleType03_colourSB_63/frame2()
    ArgumentError: Error #2109: Frame label null not found in scene null.
    at flash.display::MovieClip/gotoAndPlay()
    at NavMenu3_fla::bubbleType03_colourSB_63/frame2()
    ArgumentError: Error #2109: Frame label null not found in scene null.
    at flash.display::MovieClip/gotoAndPlay()
    at NavMenu3_fla::bubbleType03_colourSB_63/frame2()
    ArgumentError: Error #2109: Frame label null not found in scene null.
    at flash.display::MovieClip/gotoAndPlay()
    at NavMenu3_fla::bubbleType03_colourSB_63/frame2()
    ArgumentError: Error #2109: Frame label null not found in scene null.
    at flash.display::MovieClip/gotoAndPlay()
    at NavMenu3_fla::bubbleType03_colourSB_63/frame2()
    ArgumentError: Error #2109: Frame label null not found in scene null.
    at flash.display::MovieClip/gotoAndPlay()
    at NavMenu3_fla::bubbleType03_colourSB_63/frame2()
    ArgumentError: Error #2109: Frame label null not found in scene null.
    at flash.display::MovieClip/gotoAndPlay()
    at NavMenu3_fla::bubbleType03_colour_65/frame2()
    ArgumentError: Error #2109: Frame label null not found in scene null.
    at flash.display::MovieClip/gotoAndPlay()
    at NavMenu3_fla::bubbleType03_colourSB_63/frame2()
    ArgumentError: Error #2109: Frame label null not found in scene null.
    at flash.display::MovieClip/gotoAndPlay()
    at NavMenu3_fla::bubbleType03_colourSB_63/frame2()
    ArgumentError: Error #2109: Frame label null not found in scene null.
    at flash.display::MovieClip/gotoAndPlay()
    at NavMenu3_fla::bubbleType03_colourSB_63/frame2()
    ArgumentError: Error #2109: Frame label null not found in scene null.
    at flash.display::MovieClip/gotoAndPlay()
    at NavMenu3_fla::bubbleType03_colourSB_63/frame2()
    ArgumentError: Error #2109: Frame label null not found in scene null.
    at flash.display::MovieClip/gotoAndPlay()
    at NavMenu3_fla::bubbleType03_colourSB_63/frame2()
    ArgumentError: Error #2109: Frame label null not found in scene null.
    at flash.display::MovieClip/gotoAndPlay()
    at NavMenu3_fla::bubbleType03_colourSB_63/frame2()
    ArgumentError: Error #2109: Frame label null not found in scene null.
    at flash.display::MovieClip/gotoAndPlay()
    at NavMenu3_fla::bubbleType03_colour_65/frame2()

  • Posted by Gary James On November 8, 2013

    Oh I an using the AS3 version..

Post a Comment

(required. But it will not be published)


three × 4 =

WP-SpamFree by Pole Position Marketing