Flash Component(SWC) Developemnt in AS3.0 – Part I

What is SWC?

Shock Wave Components are component files for Flash and Flex. A component is a movie clip or compiled clip that the Flash developer can drag out of the Components panel into a FLA file. The movie clip should be exported for ActionScript and also should expose parameters that can be set in the Parameters tab of the Property inspector or in the Components inspector. It is packaged as a ZIP archive and can easily be inspected or expanded.

View Demo Download

My intention is to create a simple beginner level article about the SWC development. Let’s start here.

Step1:

Create a new Flash file for Action Script 3.0. and name it as SquareBox.fla (you can use your component’s name or any meaningful name )

Step2:

Create a new movie Clip symbol by pressing Ctrl+F8 and enter the fields as shown in the image below. The Class name for the Class which we gonna write the class definitions. Base class is Optional. Check the “Export for ActionSctipt “and “Export in Frame 1” Options. Press okey button after filling the fields.

Step3:

Draw a simple box for something in the movieclip(here SquareBox) .

Step4:

Now you can see the Library containing the movieclip and its linkage name. Right Click on the clip and check the symbol properties.

Step5:

Next step is to define the Component Definitions, by right click on the movieclip and select the component definition option form the list and add the required fields as shown in the following image. Please note the class path of the linkage class(SquareBox.as), name should be end with the extension.

Step6:

Check the Icon change of the squarebox clip at the library.

Step7:

Write the action script code for the SquareBox.as file.

package
{
 import SquareBox.*;
 import flash.display.*;
 import flash.text.*;

 public class SquareBox extends Sprite
 {
 private var _height:Number = 0;
 private var _width:Number = 0;
 public var _text:String = "";
 private var _background:Sprite;
 private var _tf:TextField;

 public function SquareBox()
 {
 init();
 createChildren();
 draw();
 return;
 }// end function

 protected function draw() : void
 {
 _background.graphics.clear();
 _background.graphics.beginFill(2236962, 1);
 _background.graphics.drawRoundRect(0, 0, _width, _height, 10, 10);
 _background.graphics.endFill();
 var _loc_1:* = new StyleSheet();
 _loc_1.parseCSS("h2{color:#ff0000; fontWeight:bold; fontSize:30;}a:link{text-decoration: none;}a:hover{text-decoration: underline;}");
 _tf.styleSheet = _loc_1;
 _tf.htmlText = "<h2>" + _text + "</h2>";
 _tf.x = Math.floor((_width - _tf.width) / 2);
 _tf.y = Math.floor((_height - _tf.height) / 2);
 return;
 }// end function

 public function setBox(param1:Number, param2:Number, param3:String) : void
 {
 _width = param1;
 _height = param2;
 _text = param3;
 draw();
 return;
 }// end function

 private function createChildren() : void
 {
 _background = new Sprite();
 _tf = new TextField();
 _tf.autoSize = "left";
 _tf.textColor = 4342338;
 addChild(_background);
 addChild(_tf);
 return;
 }// end function

 private function init() : void
 {
 _width = width;
 _height = height;
 scaleX = 1;
 scaleY = 1;
 removeChildAt(0);
 return;
 }// end function

 }
}

Step8:

I think you did all the above mentioned things. Well, then you are ready to export your first SWC component from Flash . So RightClcik on the squareBox clip on the library and select the “Export SWC File” option from the list.

Step8:

The other important thing is the save path. If you want to just use the component from the Windows->Components or Ctrl+F7, you need to save that in the configuration folder of the where the flash is installed. On your machine sometimes the path for the component folder may be in different location. if you find something like “C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Components”.

Step9:

The Final file looks like this.

Congratulation you are successfully created the first Flash component.

1. Now you need to make the installation package called mxp.

2. Then use the extension in your new project.