Tutorials
FILE CATEGORIES
Tutorials >> Build a Flash component (Flash MX 2004 to Flash CS3)
Posted by Flashtuning
A. Preparing your future component - Create a new FLA file
The goal for the following example is to create and test the symbols and functionality necessary for your component.
You can download the source FLA file used in this tutorial by clicking the link below:
DOWNLOAD THE SOURCE FLA FOR THIS TUTORIAL
The steps presented in this tutorial for the component creation are available when creating a component for Flash Mx2004 to Flash CS3, ActionScript 2.0. For Flash CS3, ActionScript 3.0 the general steps are the same only the syntax is different. We will convert the Progress Bar AS 2.0 future component (how to achieve the component file (SWC) will be presesented in the Build a Flash component - Part 2 tutorial) to an AS 3.0 compatible component (available in the Build a Flash component - Part 3 tutorial).
1. Start Adobe Flash, open a new document and set a 30 fps in the Document Properties Panel.
2. Create a new folder in your library and name it Progress Bar Assets. Here will be placed all the necessary Movie Clip symbols for your component.
3. Create two sub folders. Name the first sub folder Progress Bar and the second one Track.
4. Next draw three graphic objects (using the Rectangle Tool) on the stage and convert them to Movie Clips. For the first graphic object draw a 5x15px rectangle, select the newly created shape and from the top menu select Modify / Convert to Symbol. Your settings should look like in the following image:
5. For the second graphic object draw a 5x15px rectangle, select the newly created shape and from the top menu select Modify / Convert to Symbol. Your settings should look like in the following image:
6. Repeat step 5 and create the TrackRightEnd symbol.
7. Repeat step 4 to step 6 and create the ProgressBarLeftEnd, ProgressBarBody and ProgressBarRightEnd symbols. Place all the symbols in their corresponding folders, like in the following picture:
B. Preparing your future component - Add the ActionScript code
The goal of this point is to get a closer look at few general ActionScript code lines necessary for your future component .
All the code in this FLA is placed inside the first frame of the component_mc_simulation Movie Clip on the stage.
1. First declare variables, corresponding to the Progress Bar slider Movie Clips from the library (the left thumb, the resizible middle symbol and the right thumb) like in the following image:
The __slider Movie Clip will contain the __sliderLeftThumb and __sliderBar and __sliderRightThumb and sliderBarMask.
2. Declare variables corresponding to the Progress Bar track Movie Clips from the library (the left track thumb, the middle portion and the right thumb) like in the following image:
The __track Movie Clip will contain the __trackLeftThumb and __trackBar and __trackRightThumb.
3. Declare variables for the bytes loaded, bytes total and percentage, like in the following image:
4. Create a function having the component name (this function is known as "constructor" in your future component class and is required). For this example the function name is MyProgressBar(), like in the following image:
5. The init() function will be used for global parameters initialiation:
6. The createChildren() method is used to attach all the symbols from the library to their corresponding Movie Clips variables previously declared. The following image is just a preview. You can check the complete source code inside the BasicFlaStructure_01.fla file available fro download.
7. The arrange() method (also known as draw() or you can give it your own suggestive name). This method handles the visual content positioning based on various actions (e.g: if you will adjust the width of your component either on the stage or via a function call, you have to also place a call to the arrange() function to adjust the layout). You can check a preview of this method in the image below:
8. The four methods previously declared: MyProgressBar(), init(), createChildren() and arrange() represents for now the core functions of your future component.
9. Other methods are: startPreloadingEngine(), stopPreloadingEngine(), checkPreloading(), getProgress() and setProgressBar(). You find each method and adjacent comments in the FLA file.
10. In the next tutorial (Build a Flash component - Part 2) you will find the necessary steps to achieve a SWC (component) file starting from your FLA file (the steps presented for the component creation are available when creating a component for Flash Mx2004 to Flash CS3, ActionScript 2.0. For Flash CS3, ActionScript 3.0 the general steps are the same only the syntax is different. We will convert your progress bar AS 2.0 component to AS 3.0 component in the Build a Flash component - Part 3 tutorial).
11. DOWNLOAD THE SOURCE FLA FOR THIS TUTORIAL
C. Create the Progress Bar component - from FLA to SWC file
The goal for the following step is to create the Progress Bar component and display it in the Components Panel.
You can download the source files used in this tutorial by clicking the link below:
DOWNLOAD THE SOURCE FLA FOR THIS TUTORIAL
You can download the source files used in previous tutorial by clicking the link below:
DOWNLOAD THE SOURCE FLA FOR THIS TUTORIAL
The steps presented in this tutorial for the component creation are available when creating a component for Flash Mx2004 to Flash CS3, ActionScript 2.0. For Flash CS3, ActionScript 3.0 the general steps are the same only the syntax is different. We will convert the Progress Bar AS 2.0 component to an AS 3.0 compatible component in the "Build a Flash component - Part 3" tutorial.
1. Start Adobe Flash, open the BasicFlaStructure_01.fla file from the previous tutorial.
2. Rename the BasicFlaStructure_01.fla to MyProgressBar.fla or leave it as it is.
3. Create a new ActionScript file (File/New) and save the newly created file as MyProgressBar.as. We will place all the previous code in this external file.
4. Switch back to the FLA file, enter the content_mc_simulation MovieClip on the stage and copy all the code from the ActionScript layer, first frame.
5. Open MyProgressBar.as file and paste (Edit/Paste) the code.
6. Write the following line of code at top of your file: [IconFile("icon.png")]. This will be the icon that will represent your component in the Components Panel.
"The image must measure 18 pixels square, and you must save it in PNG format. It must be
bit with alpha transparency, and the upper left pixel must be transparent to support masking." (extracted from Adobe Flash Help files/ Using Components / Final steps in component development / Adding an icon section).
7. Write the next two lines of code: [Event("onLoadComplete")] and [Event("onProgress")]. The [Event("YourEventName")] represents the events that the component will trigger during the loading process (onProgress) and when the loading process is completed (onLoadComplete).
8. Next add the following lines of code to your file and close the class definition accolade at the end of your file:
9. Now remove the code starting at the //FUNCTIONS CALL SIMULATION// comment and ending before the final class accolade and add the following line of code at the bottom of the variables section: var loaderMc:MovieClip; (this will be the internal component engine reference to the external target Movie Clip loading the image).
10. Add the var dispatchEvent:Function; line of code below loaderMc declaration. This function represents the component events dispatcher handler.
11. Go to getProgress() function and replace the:
progressMsg="loadInProgress"; line with: dispatchEvent({type: "onProgress", target: this});
and the progressMsg="loadComplete"; line with: dispatchEvent({type: "onLoadComplete", target: this});
12. You are still in the getProgress() function at this moment. Remove the code starting with the:
"//populate some dummy text fields...." comment and ending before the accolade.
13. Go to the end of the variables group declaration below the dispatchEvent line and add the following lines of code:
This [Inspectable...] metadata declaration allows your targetMc parameter, also known as "setter" due to "set" prefix to be visible in the Component Properties Panel and in the Component Inspector Panel.
The difference between the setter declaration and a simple parameter declaration is that you can perform various actions inside your component both in authoring environment (on the stage) and at run-time. In this
case when the component targetMc is initialized the preloading engine starts.
You can check more about "setter" and "getter" definitions and all supported metadata tags you can use in ActionScript class files in the Adobe Flash Help Panel / Using Components section.
14. Go to the end of the getters and setters declarations and add the setSize() method:
This function is called automatically when you resize the component on the stage. The new component width is given by the widthVal parameter. After a setSize() call the component symbols are re-arranged based on the _pWidth variable.
15. Replace the init() function with the following adjustments:
16. Switch back to MyProgressBar.fla file remove the "content" layer and clear the "ReadMe" layer comments.
17. Open you movie library and remove the loaderMc and component_mc_simulation Movie Clips from the auxiliary_movie_clips folder.
18. Create a new Movie Clip symbol (Insert/New symbol...) and write MyProgressBar for Name, Linkage and AS 2.0 class. Select "Export for ActionScript" option and uncheck the "Export in first frame" option.
19. Create another layer, name it "Assets" and insert a second Keyframe (Insert/Timeline/Keyframe).
20. Add a stop(); action in the first layer / first frame.
21. Go to second layer / first frame. Select the rectangle tool and draw a 200x15 pixels area.
22. Go to the second Assets layer frame and drag the TrackLeftEnd, TrackBody, TrackRightEnd , ProgressBarBody, ProgressBarLeftEnd, ProgressBarRightEnd and ProgressBarBodyMask from the movie library to the stage. Set the symbols at the same y=0 position, horizontal aligned (this is just to keep the things organized. These elements will be arranged automatically by the component engine.)
23. In your movie library go to each Progress Bar assets symbol, right click and uncheck the "Export in first frame" option. Do the same for the ProgressBarBodyMask Movie Clip.
24. Right click the MyProgressBar MovieClip / Component Definition and write MyProgressBar in the AS 2.0 class, then press ok button. You external ActionScript file is now linked with your newly created component Movie Clip. You should see the green icon displayed instead the default Movie Clip icon.
25. Right click the MyProgressBar MovieClip / Component Definition again. You should see the targetMc parameter in the Parameters area.
26. Now export your component as a SWC archive. Right click the MyProgressBar MovieClip / Export SWC file..., and give it the MyProgressBar.swc name.
27. Go to your Flash installation directory and browse to the Configuration/Components folder. Create a new folder and name it "MyComponents". Copy the "MyProgressBar.swc" file in the "MyComponents" folder.
28. Switch back to Adobe Flash, open the Components Panel (Window/Components) and from the top right menu on the Components Panel bar select Reload and you should now see the MyComponents/MyProgressBar component.
Further Reference
To learn more about the components creation process and in-depth technical guidelines and different approaches for the component creation steps consult the Adobe documentation files that are automatically installed with Flash regarding component metadata tags, getters, setters, private, public and protected class members declaration.
You can also check how the setters/constructor methods are called at run-time versus authoring environment in AS 2.0 and AS 3.0, how to create a custom user interface for your component, help files, custom actions panel reference and packaging all files in a mxp installer for distribution.
D. Create the Progress Bar component - from AS 2.0 to AS 3.0
The goal for the following tutorial is to create the ActionScript 3.0 Progress Bar component based on the previously ActionScript 2.0 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 FLA 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).
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:
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:
11. Remove the var dispatchEvent:Function line.
12. Add the following variables declarations:
13. Add and/or replace the following new Inspectable definitions:
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.
A. Preparing your future component - Create a new FLA file
The goal for the following example is to create and test the symbols and functionality necessary for your component.
You can download the source FLA file used in this tutorial by clicking the link below:
DOWNLOAD THE SOURCE FLA FOR THIS TUTORIAL
The steps presented in this tutorial for the component creation are available when creating a component for Flash Mx2004 to Flash CS3, ActionScript 2.0. For Flash CS3, ActionScript 3.0 the general steps are the same only the syntax is different. We will convert the Progress Bar AS 2.0 future component (how to achieve the component file (SWC) will be presesented in the Build a Flash component - Part 2 tutorial) to an AS 3.0 compatible component (available in the Build a Flash component - Part 3 tutorial).
1. Start Adobe Flash, open a new document and set a 30 fps in the Document Properties Panel.
2. Create a new folder in your library and name it Progress Bar Assets. Here will be placed all the necessary Movie Clip symbols for your component.
3. Create two sub folders. Name the first sub folder Progress Bar and the second one Track.
4. Next draw three graphic objects (using the Rectangle Tool) on the stage and convert them to Movie Clips. For the first graphic object draw a 5x15px rectangle, select the newly created shape and from the top menu select Modify / Convert to Symbol. Your settings should look like in the following image:
5. For the second graphic object draw a 5x15px rectangle, select the newly created shape and from the top menu select Modify / Convert to Symbol. Your settings should look like in the following image:
6. Repeat step 5 and create the TrackRightEnd symbol.
7. Repeat step 4 to step 6 and create the ProgressBarLeftEnd, ProgressBarBody and ProgressBarRightEnd symbols. Place all the symbols in their corresponding folders, like in the following picture:
B. Preparing your future component - Add the ActionScript code
The goal of this point is to get a closer look at few general ActionScript code lines necessary for your future component .
All the code in this FLA is placed inside the first frame of the component_mc_simulation Movie Clip on the stage.
1. First declare variables, corresponding to the Progress Bar slider Movie Clips from the library (the left thumb, the resizible middle symbol and the right thumb) like in the following image:
- Code: Select all
//progress (slider) bar elements
var __slider:MovieClip;
var __sliderLeftThumb:MovieClip;
var __sliderBar:MovieClip;
var __sliderRightThumb:MovieClip;
var sliderBarMask:MovieClip;
var sliderBarWidth:Number;
The __slider Movie Clip will contain the __sliderLeftThumb and __sliderBar and __sliderRightThumb and sliderBarMask.
2. Declare variables corresponding to the Progress Bar track Movie Clips from the library (the left track thumb, the middle portion and the right thumb) like in the following image:
- Code: Select all
//background bar (track) elements
var __track:MovieClip;
var __trackLeftThumb:MovieClip;
var __trackBar:MovieClip;
var __trackRightThumb:MovieClip;
var trackBarWidth:Number;
The __track Movie Clip will contain the __trackLeftThumb and __trackBar and __trackRightThumb.
3. Declare variables for the bytes loaded, bytes total and percentage, like in the following image:
- Code: Select all
//global bytes loaded, bytes total
//and percentage variables the component
//will trigger
var _bytesLoaded: Number;
var _bytesTotal: Number;
var __percentage: Number;
4. Create a function having the component name (this function is known as "constructor" in your future component class and is required). For this example the function name is MyProgressBar(), like in the following image:
- Code: Select all
function MyProgressBar() {
init();
createChildren();
arrange();
}
5. The init() function will be used for global parameters initialiation:
- Code: Select all
function init():Void {
//all the component graphic symbols will be
//placed inside this movie clip
progressSymbol = new MovieClip();
progressSymbol = this;
//set a default width for the progress bar
_pWidth = 200;
}
6. The createChildren() method is used to attach all the symbols from the library to their corresponding Movie Clips variables previously declared. The following image is just a preview. You can check the complete source code inside the BasicFlaStructure_01.fla file available fro download.
- Code: Select all
function createChildren():Void {
//the progressSymbol will contain the __track and
//the __slider Movie Clips
//the __track will contain the track thumbs from the library
//and the __slider will contain the slider thumbs from the library
__track = progressSymbol.createEmptyMovieClip('trackSymbol',progressSymbol.getNextHighestDepth());
__trackLeftThumb = __track.attachMovie("trackLeftEnd","trackLeftThumb",__track.getNextHighestDepth());
__trackBar = __track.attachMovie("trackBody","trackBody",__track.getNextHighestDepth());
__trackRightThumb = __track.attachMovie("trackRightEnd","trackRightThumb",__track.getNextHighestDepth());
__slider = progressSymbol.createEmptyMovieClip('sliderSymbol',progressSymbol.getNextHighestDepth());
__sliderLeftThumb = __slider.attachMovie("progressBarLeftEnd","sliderLeftThumb",__slider.getNextHighestDepth());
__sliderBar = __slider.attachMovie("progressBarBody","progressBarBody",__slider.getNextHighestDepth());
__sliderRightThumb = __slider.attachMovie("progressBarRightEnd","sliderRightThumb",__slider.getNextHighestDepth());
//the slider mask Movie Clip will resize based on
//the loading amount of data and will reveal only a portion
//of the slider bar during the loading process
sliderBarMask = __slider.attachMovie("progressBarBodyMask","sliderBarMask",__slider.getNextHighestDepth());
__sliderBar.setMask(sliderBarMask);
}
7. The arrange() method (also known as draw() or you can give it your own suggestive name). This method handles the visual content positioning based on various actions (e.g: if you will adjust the width of your component either on the stage or via a function call, you have to also place a call to the arrange() function to adjust the layout). You can check a preview of this method in the image below:
- Code: Select all
function arrange() {
//calculate the track/slider bar widths
//you get the current width for track and slider
//substracting the left and right thumb width
//from the global progress bar width
trackBarWidth = _pWidth - (__trackLeftThumb._width + __trackRightThumb._width);
sliderBarWidth = _pWidth - (__sliderLeftThumb._width + __sliderRightThumb._width);
//if the previously calculated values are negative
//adjust them to zero
if (trackBarWidth<0) trackBarWidth = 0;
if (sliderBarWidth<0) sliderBarWidth = 0;
//resize your __trackBar Movie Clip (this is the track middle symbol)
//and the __sliderBar Movie Clip (this is the slider middle symbol)
//to their newly calculated values
__trackBar._width = trackBarWidth;
__sliderBar._width = sliderBarWidth;
//now set the graphic elements positions from left to right
//for track and slider
__trackLeftThumb._x = __trackLeftThumb._width;
__trackBar._x = __trackLeftThumb._x;
__trackRightThumb._x = __trackBar._x + trackBarWidth;
__sliderLeftThumb._x = __sliderLeftThumb._width;
sliderBarMask._x = __sliderBar._x = __sliderLeftThumb._width;
__sliderRightThumb._x = __sliderBar._x;
}
//this function resize the slider mask based on the loaded amount
//and adjust in the same time the slider right thumb position
function setProgressBar() {
var progressFillWidth = (__percentage * sliderBarWidth)/100;
sliderBarMask._width = progressFillWidth;
__sliderRightThumb._x = sliderBarMask._x + progressFillWidth;
}//end if
8. The four methods previously declared: MyProgressBar(), init(), createChildren() and arrange() represents for now the core functions of your future component.
9. Other methods are: startPreloadingEngine(), stopPreloadingEngine(), checkPreloading(), getProgress() and setProgressBar(). You find each method and adjacent comments in the FLA file.
10. In the next tutorial (Build a Flash component - Part 2) you will find the necessary steps to achieve a SWC (component) file starting from your FLA file (the steps presented for the component creation are available when creating a component for Flash Mx2004 to Flash CS3, ActionScript 2.0. For Flash CS3, ActionScript 3.0 the general steps are the same only the syntax is different. We will convert your progress bar AS 2.0 component to AS 3.0 component in the Build a Flash component - Part 3 tutorial).
11. DOWNLOAD THE SOURCE FLA FOR THIS TUTORIAL
C. Create the Progress Bar component - from FLA to SWC file
The goal for the following step is to create the Progress Bar component and display it in the Components Panel.
You can download the source files used in this tutorial by clicking the link below:
DOWNLOAD THE SOURCE FLA FOR THIS TUTORIAL
You can download the source files used in previous tutorial by clicking the link below:
DOWNLOAD THE SOURCE FLA FOR THIS TUTORIAL
The steps presented in this tutorial for the component creation are available when creating a component for Flash Mx2004 to Flash CS3, ActionScript 2.0. For Flash CS3, ActionScript 3.0 the general steps are the same only the syntax is different. We will convert the Progress Bar AS 2.0 component to an AS 3.0 compatible component in the "Build a Flash component - Part 3" tutorial.
1. Start Adobe Flash, open the BasicFlaStructure_01.fla file from the previous tutorial.
2. Rename the BasicFlaStructure_01.fla to MyProgressBar.fla or leave it as it is.
3. Create a new ActionScript file (File/New) and save the newly created file as MyProgressBar.as. We will place all the previous code in this external file.
4. Switch back to the FLA file, enter the content_mc_simulation MovieClip on the stage and copy all the code from the ActionScript layer, first frame.
5. Open MyProgressBar.as file and paste (Edit/Paste) the code.
6. Write the following line of code at top of your file: [IconFile("icon.png")]. This will be the icon that will represent your component in the Components Panel.
"The image must measure 18 pixels square, and you must save it in PNG format. It must be
bit with alpha transparency, and the upper left pixel must be transparent to support masking." (extracted from Adobe Flash Help files/ Using Components / Final steps in component development / Adding an icon section).7. Write the next two lines of code: [Event("onLoadComplete")] and [Event("onProgress")]. The [Event("YourEventName")] represents the events that the component will trigger during the loading process (onProgress) and when the loading process is completed (onLoadComplete).
8. Next add the following lines of code to your file and close the class definition accolade at the end of your file:
- Code: Select all
class MyProgressBar extends MovieClip {
// 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;
....
....
}
9. Now remove the code starting at the //FUNCTIONS CALL SIMULATION// comment and ending before the final class accolade and add the following line of code at the bottom of the variables section: var loaderMc:MovieClip; (this will be the internal component engine reference to the external target Movie Clip loading the image).
10. Add the var dispatchEvent:Function; line of code below loaderMc declaration. This function represents the component events dispatcher handler.
11. Go to getProgress() function and replace the:
progressMsg="loadInProgress"; line with: dispatchEvent({type: "onProgress", target: this});
and the progressMsg="loadComplete"; line with: dispatchEvent({type: "onLoadComplete", target: this});
12. You are still in the getProgress() function at this moment. Remove the code starting with the:
"//populate some dummy text fields...." comment and ending before the accolade.
13. Go to the end of the variables group declaration below the dispatchEvent line and add the following lines of code:
- Code: Select all
[Inspectable(defaultValue="= enter the target Movie Clip instance name here =")]
public function set targetMc(targetMcStr:String):Void {
loaderMc = this._parent[targetMcStr];
//start the preloading engine at run-time, if the loaderMc exists
if (loaderMc!=undefined) startPreloadingEngine();
}
public function get targetMc():String {
return loaderMc._name;
}
This [Inspectable...] metadata declaration allows your targetMc parameter, also known as "setter" due to "set" prefix to be visible in the Component Properties Panel and in the Component Inspector Panel.
The difference between the setter declaration and a simple parameter declaration is that you can perform various actions inside your component both in authoring environment (on the stage) and at run-time. In this
case when the component targetMc is initialized the preloading engine starts.
You can check more about "setter" and "getter" definitions and all supported metadata tags you can use in ActionScript class files in the Adobe Flash Help Panel / Using Components section.
14. Go to the end of the getters and setters declarations and add the setSize() method:
- Code: Select all
public function setSize(widthVal:Number, heightVal:Number):Void {
_xscale = 100; _yscale = 100;
_pWidth = widthVal;
arrange();
}
This function is called automatically when you resize the component on the stage. The new component width is given by the widthVal parameter. After a setSize() call the component symbols are re-arranged based on the _pWidth variable.
15. Replace the init() function with the following adjustments:
- Code: Select all
function init():Void {
//call to parent Movie Clip class init method
super.init();
//all the component graphic symbols will be
//placed inside this movie clip
progressSymbol = new MovieClip(); progressSymbol = this;
_pWidth = _width;
_xscale = 100; _yscale = 100;
//initialize the event dispatcher method
mx.events.EventDispatcher.initialize(this);
//hide the auxiliary box movie clip used for the
//default component size
myProgressBarBoxMc._visible = false;
myProgressBarBoxMc._width = 0;
myProgressBarBoxMc._height = 0;
}
16. Switch back to MyProgressBar.fla file remove the "content" layer and clear the "ReadMe" layer comments.
17. Open you movie library and remove the loaderMc and component_mc_simulation Movie Clips from the auxiliary_movie_clips folder.
18. Create a new Movie Clip symbol (Insert/New symbol...) and write MyProgressBar for Name, Linkage and AS 2.0 class. Select "Export for ActionScript" option and uncheck the "Export in first frame" option.
19. Create another layer, name it "Assets" and insert a second Keyframe (Insert/Timeline/Keyframe).
20. Add a stop(); action in the first layer / first frame.
21. Go to second layer / first frame. Select the rectangle tool and draw a 200x15 pixels area.
22. Go to the second Assets layer frame and drag the TrackLeftEnd, TrackBody, TrackRightEnd , ProgressBarBody, ProgressBarLeftEnd, ProgressBarRightEnd and ProgressBarBodyMask from the movie library to the stage. Set the symbols at the same y=0 position, horizontal aligned (this is just to keep the things organized. These elements will be arranged automatically by the component engine.)
23. In your movie library go to each Progress Bar assets symbol, right click and uncheck the "Export in first frame" option. Do the same for the ProgressBarBodyMask Movie Clip.
24. Right click the MyProgressBar MovieClip / Component Definition and write MyProgressBar in the AS 2.0 class, then press ok button. You external ActionScript file is now linked with your newly created component Movie Clip. You should see the green icon displayed instead the default Movie Clip icon.
25. Right click the MyProgressBar MovieClip / Component Definition again. You should see the targetMc parameter in the Parameters area.
26. Now export your component as a SWC archive. Right click the MyProgressBar MovieClip / Export SWC file..., and give it the MyProgressBar.swc name.
27. Go to your Flash installation directory and browse to the Configuration/Components folder. Create a new folder and name it "MyComponents". Copy the "MyProgressBar.swc" file in the "MyComponents" folder.
28. Switch back to Adobe Flash, open the Components Panel (Window/Components) and from the top right menu on the Components Panel bar select Reload and you should now see the MyComponents/MyProgressBar component.
Further Reference
To learn more about the components creation process and in-depth technical guidelines and different approaches for the component creation steps consult the Adobe documentation files that are automatically installed with Flash regarding component metadata tags, getters, setters, private, public and protected class members declaration.
You can also check how the setters/constructor methods are called at run-time versus authoring environment in AS 2.0 and AS 3.0, how to create a custom user interface for your component, help files, custom actions panel reference and packaging all files in a mxp installer for distribution.
D. Create the Progress Bar component - from AS 2.0 to AS 3.0
The goal for the following tutorial is to create the ActionScript 3.0 Progress Bar component based on the previously ActionScript 2.0 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 FLA 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).
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:
- Code: Select all
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:
- Code: Select all
// 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:
- Code: Select all
....
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:
- Code: Select all
//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.
Twitter