Building ActionScript3 components in Flash CS5 (part 1)
Components provides great advantages when we build our UI as they let you add functionality very quickly and ready to be used with components like Button, TextInput, ComboBox and so on.
Building our own components is a fantastic idea and it saves you a lot of time when you work on big projects that need the same functionality in different places over and over again.
I am going to show you how you can build a custom component not based on any standard component and it will have the following capabilities:
- Display of a dynamic HTML text with CSS styling
- Custom UI Panel
- Live Preview
This component will give you a great overview about what you can do with components and how you can build your own.
This tutorial will consists of three parts being the same as the above list.
Ready? Let’s go!
The first thing we have to do is to give a name to our component. In this case I will name it as CSSLabel. Now go ahead and create a folder in your project workspace.
Next step is to create an ActionScript 3.0 document and save it in the folder as CSSLabel.
This component will be based on UIComponent class and therefore we will need to add to our source classpath an extra location. For doing that, open your ActionScript Settings and add a new entry to the Source path pointing to:
$(AppConfig)/Component Source/ActionScript 3.0/User Interface
Now we have to create an ActionScript class named CSSLabel in the same folder of our Flash document.
Go ahead and use the following content for the class:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | package { import fl.core.UIComponent; import flash.display.Sprite; import flash.text.AntiAliasType; import flash.text.StyleSheet; import flash.text.TextField; import flash.events.Event; import flash.utils.getQualifiedClassName; public class CSSLabel extends UIComponent { private var _textfield:TextField; private var _text:String; private var _styles:String; public function CSSLabel() { super(); _text = ""; _styles = ""; addEventListener(Event.ENTER_FRAME, onEnterFrame); } override public function setSize(w:Number, h:Number):void { super.setSize(w, h); drawSquare(); } private function drawSquare() { super.draw(); graphics.clear(); graphics.lineStyle(1,0x999999); graphics.beginFill(0x0000FF, 0); graphics.drawRect(0, 0, width, height); graphics.endFill(); } private function onEnterFrame(e:Event):void { removeEventListener(e.type, onEnterFrame); var isLivePreview:Boolean = (parent != null && getQualifiedClassName(parent) == "fl.livepreview::LivePreviewParent"); if (isLivePreview) { drawSquare(); } else { graphics.clear(); var styles:StyleSheet = new StyleSheet(); styles.parseCSS(unescape(_styles)); _textfield = new TextField(); _textfield.width = width; _textfield.height = height; _textfield.autoSize = "none"; _textfield.wordWrap = true; _textfield.multiline = true; _textfield.antiAliasType = AntiAliasType.ADVANCED; _textfield.selectable = false; _textfield.embedFonts = false; _textfield.styleSheet = styles; _textfield.htmlText = csstext; addChild(_textfield); } } [Inspectable (name = "csstext", variable = "csstext", type = "String", defaultValue = "")] public function get csstext():String { return _text; } public function set csstext(value:String):void { _text = value; } [Inspectable (name = "styles", variable = "styles", type = "String", defaultValue = "")] public function get styles():String { return _styles; } public function set styles(value:String):void { _styles = value; } } } |
Let’s take a look at what we are doing in this class:
At the bottom of the class you can see a couple of component parameters that we expose to be able to add the text to display through csstext and the CSS styles through styles.
This first version of the component uses a basic preview that permits to manipulate the component easily in the Flash authoring tool. We will display a square that delimits the area for our text display. That is done with the method drawSquare.
With the overriden method setSize we can handle the redraw of the square to keep updated the area of the component.
Note that we are using the Event.ENTER_FRAME to create the content of the component. This is done this way to ensure that all the component parameters are available when we build the content.
The last thing to mention about this code is the use of the following code:
var isLivePreview:Boolean = (parent != null && getQualifiedClassName(parent) == “fl.livepreview::LivePreviewParent”);
With this code we can detect if the component is being rendered in the Flash authoring tool or by the Flash Player when we run the movie. We use this check to draw the square only when we are in the Flash tool.
Now we have all we need to install our component!
Open your CSSLabel Flash document and create a MovieClip called CSSLabel. Inside go ahead and create a solid rectangle shape. This step is very important as Flash will use the MovieClip to manipulate the component in the Stage. Use here the size you want for the default size of your component.
We are nearly there! Select the MovieClip in the library and open the Properties of the item. You have to select Export for ActionScript and the Class field will be filled automatically. If you followed all the steps correctly and click the check button, Flash will confirm the class is found.
Now we need to open the Component Definition of the MovieClip and select the option Display in Components panel. In here you can add the name of your component and we also have the option to specify the minimum requirements to use it.
Everything is ready to install our new component now. Right click on the MovieClip in the library again and select the option Export SWC file. You will need to navigate to the folder like:
Windows:
C:UsersamendezAppDataLocalAdobeFlash CS5.5en_USConfigurationComponentsMyComponents
Mac:
/Users/amendez/Library/Application/Support/Adobe/Flash/CS5.5/en_US/Configuration/Components/MyComponents
The folder depends on your computer user name, the version of Adobe Flash you have installed and the language. The folder MyComponents will appear in the components panel and will help you to organize all the components you may have available.
If the installation is correct you won’t get any error and you can go ahead and refresh the components panel with the option Reload Components.
Now you can drag and drop your new component to a new Flash ActionScript 3.0 document.
We are going to add the following content to our component:
CSS:
1 2 3 4 5 6 7 8 | .title { font-size: 24px; color:#FF9933; } .body { font-size: 14px; color:#666666; } |
TEXT:
1 2 3 | <span class="title">CSSLabel Component example</span> <br/><br/> <span class="body">In this simple example we see the component in action displaying <b>HTML</b> text with <b>CSS</b> styles.</span> |
Open the Properties Inspector panel with the component selected and you will see the two fields csstext and styles. As the fields are one line we will introduce the same but in one line format.
CSS:
.title { font-size: 24px; color:#FF9933; } .body { font-size: 14px; color:#666666; }
TEXT:
<span class=”title”>CSSLabel Component example</span><br/><br/><span class=”body”>In this simple example we see the component in action displaying <b>HTML</b> text with <b>CSS</b> styles.</span>
If you publish the movie you will see the following result:
You can download the source files and a sample movie in Flash CS5 here.
In the next part of this tutorial we will add a custom panel that will improve the way we add the component parameters to our component.
Stay tuned!