Subcribe via RSS

Building ActionScript3 components in Flash CS5 (part 2)

October 7th, 2011 | Posted in ActionScript3

In the second part of this tutorial we are going to go ahead and add a custom panel for our component that will replace the parameters in the Component Inspector panel.

We have great benefits when we have a customized panel for the parameters. First of all because it’s much more user friendly and secondly because you can expose different parameters depending on other parameters.

The panel is going to be in a different file, so let’s create a new Flash ActionScript 3.0 document with name CSSLabelPanel.

In here we will need basically two TextArea components to allow us to edit the text to display and the CSS to apply. Below is how the panel looks:

CSSLabel Component Definitions Panel

Now that we have the UI ready to go, we can add the functionality. Go ahead and create a new ActionScript 3.0 class file named as CSSLabelPanel. Replace the content with the following:

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
package {
  import adobe.utils.MMExecute;

  import fl.controls.TextArea;

  import flash.display.Sprite;
  import flash.display.StageScaleMode;
  import flash.events.Event;

  public class CSSLabelPanel extends Sprite {
    private const CONTENT_TEXT:String = 'fl.getDocumentDOM().selection[0].parameters["csstext"].value';
    private const STYLES_CSS:String   = 'fl.getDocumentDOM().selection[0].parameters["styles"].value';
   
    public var contentText:TextArea;
    public var stylesCSS:TextArea;
   
    public function CSSLabelPanel() {
      this.stage.scaleMode = StageScaleMode.NO_SCALE;
      addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
    }
   
    private function init():void {
      contentText.addEventListener(Event.CHANGE, onContentTextChange);
      contentText.text = unescape(MMExecute(CONTENT_TEXT));

      stylesCSS.addEventListener(Event.CHANGE, onStylesCSSChange);
      stylesCSS.text = unescape(MMExecute(STYLES_CSS));
    }
   
    private function onAddedToStage(e:Event):void {
      removeEventListener(e.type, onAddedToStage);
      init();
    }

    private function onContentTextChange(e:Event):void {
      MMExecute(CONTENT_TEXT + ' = "' + escape(contentText.text) + '"');
    }

    private function onStylesCSSChange(e:Event):void {
      MMExecute(STYLES_CSS + ' = "' + escape(stylesCSS.text) + '"');
    }
  }
}

This class uses Flash JavaScript API to allow the comunication of the panel with the component. We have a couple of constants that point to that properties in the component (csstext and styles). Remember that those properties are exposed in the component as Inspectable.

The MMExecute is a method that runs Flash JavaScript commands from ActionScript. Using it we can retrieve or assign values to the properties of the component easily. See the way we initialize the textArea components and how we update the values when the content changes.

Note the use of escape and unescape needed here for storing the values with returns characters.

The last thing to highlight is we set the scaleMode as NO_SCALE. That is because we don’t want the panel to be resized with the window of the Component Inspector.

Now set the Document Class of the movie as CSSLabelPanel and publish the SWF.

Next we are going to do some changes from the original code in CSSLabel class.

1. Update the following methods as now the values may have return characters:

1
2
3
4
5
6
7
  public function set csstext(value:String):void {
    _text = unescape(value);
  }

  public function set styles(value:String):void {
    _styles = unescape(value);
  }

2. Update this line in the method onEnterFrame because now we are going to use embed fonts for the text:

1
  _textfield.embedFonts = true;

The last step is to add the panel to the component. For doing that we have to select the MovieClip in the library in the CSSLabel document and click the option Component Definition.

Now click the button Set for the Custom UI and browse to the SWF file of the panel. I recommend you to use the Custom UI in external .swf file when you are working on your panel as that will save you time when you republish the panel, but we have to select the option Custom UI with embeded in .fla file when we want to distribute the component.

Export your component as SWC file as we saw in the part 1 of this tutorial.

Drag the component to a new document, and open the Component Inspector. You will see the custom panel up and running!

One last thing to do is to add the fonts embeded in the movie. An easy way to do it is to create empty dynamic text fields on the stage and adding the characters to embed there. It’s important to create one per style we need like (regular, bold,…).

You can download the source files and a sample movie in Flash CS5 here.

In the next and last part of this tutorial we will add a live preview that will display the text in the Flash Authoring tool the same way it will be displayed once published.


Happy codding! :)

Related tutorials
Part 1
Part 3

This entry was posted on Friday, October 7th, 2011 at 4:25 pm and is filed under ActionScript3. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply