Flash Components - Tutorials - Flashtuning Progress Bar

categories

top authors featured authors

see more

newsletter

Subscribe to our newsletter:

Go To

Tutorials list

Posted by : Flashtuning on 11/04/2007 - 2457 pageviews: Awaiting 3 votes.

Set up the Progress Bar with two loading objects

The goal for the following example is to set up the 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.

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

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

4. 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.

5. 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.

6. 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.

7. 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);

8. 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.

(!) The trial version of the component used in the online trial samples available for download in the Downloads area has a limit of max 3 target objects and watermark attached, as a trial limitation. There are no restrictions on the full version.

(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.

FT SPECIAL PACK