Flash Tutorials

Check also other great FlashTuning.net products by clicking the image below:

The goal for the following example is to set up the FREE Progress Bar with two objects.

1. Start Adobe Flash, open a new document and set a 30 fps or higher in the Document Properties Panel to achieve a smoother animation.

1. Open the Components Panel ( (m) Window/Components). You will find the component in the Flashtuning folder.

1. Drag the component (FtProgressBar) from the Components Panel to the stage. The component graphic symbol should now be displayed on the stage.

2. Drag an Adobe Loader component from the Components Panel / User Interface to the stage.

• Give the Loader component an unique instance name (in the Properties Panel) like: loader1.

1. Create an empty Movie Clip symbol ((m) Insert/New Symbol). Drag the newly created Movie Clip symbol from the Library to the stage

• Give the Movie Clip symbol an unique instance name (in the Properties Panel) like: loader2.

1. Select the Progress Bar component on the stage and configure its parameters in the Parameters Panel or in the Component Inspector Panel ( (m) Window/Component Inspector):

• Instruct the component to count the loading progress for the Loader and Movie Clip instances as the Progress Bar target seppareted with a comma (loader1,loader2).

• Set the easeDelay value to 0.

• Leave the rest of the parameters unchanged unless you want to adjust some values, as they are already populated with default settings.

1. Add the following lines of code to the first frame in the timeline:

   //default hide the visual content to synchronize
   //the Progres Bar animation with the loading content
   loader1._alpha = 0; loader2._alpha = 0; 
   
   //start loading the external preloader_image1.swf file 
   //using the loader2 Movie Clip
   loader2.loadMovie("resources/preloader_image1.swf");
   
   //start loading the external preloader_image2.swf file
   //using the loader1 Loader component
   loader1.autoLoad = false;
   loader1.scaleContent = false;
   loader1.contentPath="resources/preloader_image2.swf";
   loader1.load();
   
   //implement the onLoadComplete event ( onLoadComplete //triggers when all objects are loaded and the Progress Bar //fill animation ends
   
   listener.onLoadComplete = function(evt) {
   loader1._alpha = 100; //display images
   loader2._alpha = 100; 
   //this.remove(); //optionally remove or hide the Progress Bar instance from the stage
   }
   
   //attach the listner to the Progress Bar instance
   pb1.addEventListener("onLoadComplete",listener);
   

2. Test the scene (Control/Test Movie).

(!) The Progress Bar fill animation is tween based. The Progress Bar data is synchronized with the easing and easing duration you choose.

To prevent the loading content display before the actual Progress Bar completes loading hide the visual objects by default and implement the onProgress and onLoadComplete Progress Bar events to handle the loading objects status and perform various actions.

Check the Sample 1 in the component's Downloads section for a better understanding on how the Progress Bar works.

(i) Please refer to the Flashtuning Progress Bar component Flash Help Book for more information and options included with the Progress Bar.

The component comes with a built in Help Book with all the supported methods/properties and events explained and you can access the files via the Flash Help Panel. You will find the book under the name Flashtuning Progress Bar or you can perform a search under the flashtuning or adjacent keyword and the documentation files will be automatically displayed.

Check also other great FlashTuning.net products by clicking the image below: