How to Create an FLV Preloader in AS3
If your Flash application is getting larger and more complex, the time it takes to fully load is increasing. Your visitors might get irritated and leave your website before the animation loads. To overcome this problem you can create a preloader that shows the reader how long he has to wait until the FLV file is completely loaded. The progress is calculated using a relatively simple ActionScript 3 (AS3) script. All you have to do is create the graphical interface and use the AS3 code.
Other People Are Reading
Instructions
-
-
1
Open Adobe Flash and create a new Flash movie using ActionScript version 3.0. You do not need to modify any settings.
-
2
Double-click the default layer on the timeline, type Content and press "Enter" to rename it. Click the "Insert Layer" button to create a second layer, and name it Actions.
-
-
3
Click the Content layer, select the Rectangle Tool, select some colors and draw a rectangle inside your layer. You'll use this rectangle as the preloader bar.
-
4
Select the Select Tool and select the bar outline. Press "F8" to convert it to a symbol, select Movie Clip as the symbol type and name it Outline.
-
5
Click the body of the bar with the Select Tool still active, press "F8," set the type to Movie Clip, name it Bar and set the registration point to the left side. Press "OK."
-
6
Go to the Properties Inspector while the bar is still selected, type "bar_mc" without quotes in the Instance Name text box and press "Enter." Go to the Modify menu, select the Arrange option and click Send to Back to ensure that your bar does not cover the outline.
-
7
Select the Text Tool and draw a small text field under the bar. Set its type to Dynamic Text in the Properties Inspector. Set the font type and type "loader_txt" without quotes in the Instance Name box.
-
8
Click the Actions layer, right-click the default frame and select Actions from the drop-down menu to open the Actions window.
-
9
Insert this code in the Actions window:
stop();
this.addEventListener(Event.ENTER_FRAME, loading);
function loading(e:Event):void{
var total:Number = this.stage.loaderInfo.bytesTotal;
var loaded:Number = this.stage.loaderInfo.bytesLoaded;
bar_mc.scaleX = loaded/total;
loader_txt.text = Math.floor((loaded/total)*100)+ "%";
if (total == loaded){
play();
this.removeEventListener(Event.ENTER_FRAME, loading);
}
}You start with the stop(); function to make sure the preloader does not start before all the data is present and ready. The loading() function retrieves the amount of data that needs to be loaded and the amount of data already loaded, displays how much data has been loaded (as a percentage) and verifies that all data has been loaded before starting the Flash application.
-
10
Close the Actions window and save and build your project to create the FLV preloader.
-
1
