categories
top authors
newsletter
Subscribe to our newsletter:
 - Part 2.png)
Create the Progress Bar component - from FLA to SWC file
The goal for the following tutorial 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 FILES FOR THIS TUTORIAL
You can download the source files used in previous tutorial by clicking the link below:
DOWNLOAD THE SOURCE FILES FOR BASIC FLA 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.
FT SPECIAL PACK
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 8-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.
You can download the source files used in this tutorial by clicking the link below:
DOWNLOAD THE SOURCE FILES FOR THIS TUTORIAL
You can download the source files used in previous tutorial by clicking the link below:
DOWNLOAD THE SOURCE FILES FOR BASIC FLA 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.
FT SPECIAL PACK
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 8-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:
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;
....
....
}
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:
[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:
public function setSize(widthVal:Number, heightVal:Number):Void {
_xscale = 100; _yscale = 100;
_pWidth = widthVal;
arrange();
}15. Replace the init() function with the following adjustments:
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;
}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.
help
and feedback
latest
news
latest
forum entries