Flash Tutorials

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

The goal for the following tutorial is to create the ActionScript 3.0 ( AS3 ) Progress Bar component based on the previously ActionScript 2.0 ( AS2 ) component and display it in the Components Panel in Flash CS3 and change the default component skins with new skins having rounded corners.

You can download the source files used in this tutorial by clicking the link below:

DOWNLOAD THE SOURCE FILES FOR THIS TUTORIAL

The AS 2.0 directory included in the ZIP file represents the ActionScript 2.0 component files. The AS 3.0 represents the ActionScript 3.0 component files (final).

Below are the steps you may wish to perform (not necessary in this order) to convert the AS 2.0 component to its AS 3.0 equivalent.

1. Create a working directory and name it as you like.

2. Copy all the files from the AS 2.0 directory in your newly created directory.

3. Start Adobe Flash CS3 and open the MyProgressBar.fla file.

4. From the top menu select File / Publish Settings and select for Version: Flash Player 9 and for ActionScript version: ActionScript 3.0 and click the OK button.

5. With the MyProgressBar.fla file opened, select the Assets layer / frame 1 and select the myProgressBarBoxMc Movie Clip from the Stage , open the Properties Panel and remove the instance name. Save the file and leave it opened.

6. Open the MyProgressBar.as file and include a package { ... } definition at the begining of the MyProgressBar.as file.Open also the final MyProgressBar.as (ActionScript 3.0) file included in the AS 3.0 directory and either start making all the necessary changes by yourself over the AS 2.0 file or just watch both files to see the differences. The new things that have been added/removed in the AS 3.0 version are explained below.

7. Add the following import statements after the package declaration:

package {

import flash.display.MovieClip;
import flash.events.Event; 
import flash.display.Loader; 
import flash.net.URLRequest;
import flash.utils.getDefinitionByName; //used by isLivePreview variable declaration
import flash.utils.getQualifiedClassName; //used in createChildren() method
........

8. Add the [Event("onIOError")] at the bottom of the [Event("..")] statements.

**9. Change the class MyProgressBar extends MovieClip to public class MyProgressBar extends MovieClip.

10. Remove the following lines of code:

// Components must declare these to be proper
// components in the components framework
static var symbolName:String = "MyProgressBar";
static var symbolOwner:Object = MyProgressBar;
var className:String = "MyProgressBar";

// this Movie Clip size will set 
// the default width and height for the component
private var myProgressBarBoxMc:MovieClip;

11. Remove the var dispatchEvent:Function line.

12. Add the following variables declarations:

....

var loader:Loader;
var request: URLRequest;

var isLivePreview:Boolean = (parent != null && getQualifiedClassName(parent) == "fl.livepreview::LivePreviewParent");

....

13. Add and/or replace the following new Inspectable definitions:

//target Movie Clip will be used to display the loaded image/SWF
[Inspectable(defaultValue="= enter the target Movie Clip instance name here =")]
public function set targetMc(targetMcStr:String):void { 
loaderMc = this.parent.getChildByName(targetMcStr); 
}

//target movie clip visible in Component Inspector and Components Panel paramter declaration 
[Inspectable(defaultValue="= enter the image/SWF path here =")]
public function set source(src:String):void { 
_source = src;
//start the preloading engine at run-time
if (!isLivePreview) startPreloadingEngine();
}

14. Replace all the all the AS 2.0 properties such as _width, _x, _xscale, _yscale with their AS 3.0 equivalent width, x, scaleX, scaleY and so on. Also replace Void with void.

15. Check the init(), createChildren() and startPreloadingEngine() to see how the new methods were built.

16. Export the SWC file and add it to the Flash directory (you can check the SWC export steps in the previous tutorial if necessary).

17. Modify the AS 2.0 example to work with the new component (as a simple task) or go directly and check the examples included in the AS 3.0 directory.

The default Progress Bar assets have different colors to show how the elements are re-arranged on the stage and to separate the left and right ends from the body portion of the Progress Bar track and slider.

When changing the skin elements make sure the component symbols you want to adjust are exported for ActionScript / First Frame.

(i) The component can be further converted to a FLA based component including a compiled clip (called "component shim", you'll probably name it MyProgressBarShim to keep the naming convention) in the MyProgressBar.fla library, then you'll copy MyProgressBar.fla file in the Flash Components directory instead the SWC file and you will be able to double-click and edit the component skins directly on the stage. The advantage of having the symbols in the library is that you can duplicate them and create "per instance" skins (meaning you can achieve different component instances with different skins). The "per instance" skins are not implemented for the component included in this tutorial but you can easily extend its functionality to support such a feature.

Further Reference

Check the Adobe Flash Help files regarding component metadata tags, Loader and URLRequest classes and another way of creating components by extending classes other than Movie Clip. For packaging the extension check the Librarian MXP's tutorial.

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