Developer Snippets - An Embodiment for Developers

Making a preloader in flash is very simple. By using ProgressBar and Image Loader components, we can have a basic flash preloader in minutes.

Hmm, if you have not opened flash yet, just open it and create a new Flash document, in property panel (Ctrl+F3) just give the size of the document as you needed. After that open the Component panel if it’s not opened (Ctrl+F7 or Windows > Components). Drag the Loader component to the stage. In the Properties Inspector panel (Ctrl+F3 or Window > Properties) and adjust the size of the Loader to your requirement for loading <strong>Image</strong>. for that, give it an Instance Name of <strong>imgLoader</strong>. Now go back to your Component panel and drag the Progressbar component to the stage. In the Properties Inspector panel (Ctrl+F3) give it an Instance Name as <strong>progBar</strong>.

Now for the Actionscript to write. Select Frame 1 of the main timeline and bring up the Actions panel (press F9). Copy and paste the below code:

imgLoader.contentPath = "file_name"; //filename of the image (or) path of the image file
progBar.source = imgLoader;

You guys! can also change the label of the progress bar even color of the progress bar. This property is a string in the format “%1 out of %2 loaded (%3%%)”; %1 is a placeholder for the current bytes loaded, %2 is a placeholder for the total bytes loaded, and %3 is a placeholder for the percent of content loaded. The characters “%%” are a placeholder for the “%” character. If a value for %2 is unknown, it is replaced by “??”. If a value is undefined, the label doesn’t display. The default value is “LOADING %3%%”

By adding the above string format, now our code look like this:

imgLoader.contentPath = "file_name"; //filename of the image (or) path of the image file
progBar.label = "%1 out of %2 loaded (%3%%)"
progBar.source = imgLoader;

by default it will display our loaded files in Kilobytes (KB), we can change it by adding this line progBar.conversion=1024;

So our code will look like this:

imgLoader.contentPath = "file_name"; //filename of the image (or) path of the image file
progBar.label = "%1 out of %2 loaded (%3%%)"
progBar.conversion = 1024;
progBar.source = imgLoader;

If you want to change progress bar color, then add the below code

progBar.setStyle("themeColor", "0xEEEEEE");

If you want to change the label color of the progress bar, then add the below code

pBar.setStyle("color", "0xFFFFFF");

imgLoader.contentPath ="file_name"; //filename of the image (or) path of the image file
progBar.setStyle("themeColor", "0xEEEEEE");
progBar.setStyle("color", "0xFFFFFF");
progBar.label = "%1 out of %2 loaded (%3%%)";
progBar.conversion = 1024;
progBar.source = loader;

Once particular file has been loaded, if you want to hide the preloader then need to set the visibility to false – setVisible(false),

This one we need to add to the progress bar. Click on your progress bar to select it, bring up the Actions panel window and add the following code:

on (complete) {
this.setVisible(false);
}

Now check your application, by pressing ctrl + Enter Key. Enjoy!!!