Subcribe via RSS

Building ActionScript3 components in Flash CS5 (part 3)

October 13th, 2011 | Posted in ActionScript3

This is the last part of this tutorial and we are going to implement to our component a live preview that will display the text with the CSS styles in authoring time.

First of all we need to simplify the original implementation of the component class as we have functionality there for the preview of the component.

CSSLabel.as

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
package  {
  import fl.core.UIComponent;
  import flash.text.AntiAliasType;
  import flash.text.StyleSheet;
  import flash.text.TextField;
  import flash.events.Event;
 
  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);
    }
   
    private function onEnterFrame(e:Event):void {
      removeEventListener(e.type, onEnterFrame);
     
      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 = true;
      _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 = unescape(value);
    }

    [Inspectable (name = "styles", variable = "styles", type = "String", defaultValue = "")]
    public function get styles():String {
      return _styles;
    }
   
    public function set styles(value:String):void {
      _styles = unescape(value);
    }
  }
}

We have removed the drawSquare method and now in the onEnterFrame we just add the textfield.

Now the functionality for the live preview will be implemented in a separate file. Go ahead and create a new ActionScript 3.0 document named as CSSLabelLivePreview and save the file in the folder of the component. Do the same for a new ActionScript 3.0 class with the same name.

Here is the implementation we are going to use for the class:

CSSLabelLivePreview.as

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
86
87
88
89
90
91
92
93
94
95
package {
  import fl.core.UIComponent;

  import flash.text.AntiAliasType;
  import flash.text.Font;
  import flash.text.StyleSheet;
  import flash.text.TextField;
 
  public class CSSLabelLivePreview extends UIComponent {
 
    public var txtField:TextField;
    private var _csstext:String;
    private var _styles:String;
    private var _css:StyleSheet;
 
    public function CSSTextComponentLivePreview() {
      _width = super.width;
      _height = super.height;
      _csstext = "";
      _styles = "";
    }
   
    override public function setSize(w:Number, h:Number):void {
      _width = w;
      _height = h;
      draw();
    }

    public override function get width():Number {
      return _width;
    }
   
    public override function set width(w:Number):void {
      setSize(w, height);
    }

    public override function get height():Number {
      return _height;
    }
   
    public override function set height(h:Number):void {
      setSize(width, h);
    }
   
    public function set csstext(value:String):void {
      _csstext = value;
      invalidate();
    }
   
    public function get csstext():String {
      return _csstext;
    }

    public function set styles(value:String):void {
      _styles = value;
      _css = new StyleSheet();
      _css.parseCSS(unescape(_styles));
      invalidate();
    }
   
    public function get styles():String {
      return _styles;
    }
   
    override protected function draw():void {
      try {
        removeChild(txtField);
      } catch(e:Error) {}
     
      graphics.clear();
      graphics.beginFill(0xFFFFFF, 0);
      graphics.drawRect(0, 0, _width, _height);
      graphics.endFill();
      graphics.lineStyle(1, 0x333333, 0.3);
      graphics.drawRect(0, 0, _width, _height);
      drawTextField();
     
      super.draw();
    }

    public function drawTextField():void {
      txtField = new TextField();
      txtField.antiAliasType = AntiAliasType.ADVANCED;
      txtField.embedFonts = false;
      txtField.styleSheet = _css;
      txtField.width = _width;
      txtField.height = _height;
      txtField.multiline = true;
      txtField.wordWrap = true;
      txtField.htmlText = csstext == null ? "" : unescape(csstext);
     
      addChild(txtField);
    }
  }
}

Let’s understand what we do here. Pay attention to the class we extend from. It’s UIComponent and it’s the same as the component itself.

In the first part of this class we see that we override the setSize method as we need to manage the updates in size in the component.

In the second part we have setters and getters for the same properties we exposed with Inspectable in the component. This will connect the component properties to this class properties automatically so it’s essential to use the same names here.

In the last part we override the draw method where we draw a square and call the method drawTextField where we essentially add the textfield for displaying the text.

Now it’s time to put this all together! In the CSSLabelLivePreview Flash file we are going to use the following Document Class:

fl.livepreview.LivePreviewParent

This class provides the timeline of the component and manages the resize in authoring time.

We are going to set up now the classpaths needed for this movie. Remember that the class extends from UIComponent and for using that class we need to add this path:

$(AppConfig)/Component Source/ActionScript 3.0/User Interface

The same happens with the LivePreviewParent. We will need to add the following path:

$(AppConfig)/ActionScript 3.0/projects/Flash/src

The next thing we are going to do is add the preview graphics and link them to our class. Just create a new MovieClip with name Avatar and inside we will add a solid rectangle shape. It’s very important the size of this rectangle matches exactly the same size of the one we used in CSSLabel Flash file.

Now go ahead and create a new MovieClip with name CSSLabelPreview and place the Avatar MovieClip inside. Take care all the MovieClips has the same center coordinates and same location. I am using top-left and 0,0 for all the MovieClips positioning.

Once we have that ready open the properties of CSSLabelLivePreview from the Library and select Export to ActionScript. That will add the class name automatically with the same name as the MovieClip.

Now that all is in place let’s publish this movie!

Go back to CSSLabel Flash file and select the Component Definitions. Click the Set button for the Live Preview and add select Live Preview with .swf embeded .fla file. Browse to CSSLabelLivePreview.swf and click OK.

The component is now ready to be published. Following the same we did in the previous parts of this tutorial, select the option Export SWC File and overwrite the previous version.

Refreshing the Components Panel you can now drag and drop the component to a new Flash document and see that typing in the text field or the CSS in the Component Inspector the changes are being displayed in the component instantly.

Pretty cool huh? :)

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

I hope this tutorial is helpful and let you get started with Flash custom component development.

Related tutorials
Part 1
Part 2

This entry was posted on Thursday, October 13th, 2011 at 11:42 am 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.

2 Responses to “Building ActionScript3 components in Flash CS5 (part 3)”

  1. Developer Says:

    October 13th, 2011 at 5:42 pm

    Nice tutorials, especially the up to date component tutorial. By the way, the part 3 CSSLabelExample.fla is saved as a CS 5.5 format, and cannot be opened by CS 5 users.


  2. Alejandro Mendez Says:

    October 14th, 2011 at 9:17 am

    File saved as CS5 now. Thanks for your comment and for the good catch!


Leave a Reply