Subcribe via RSS

Adobe MAX 2011 sneak peeks online!

October 17th, 2011 | No Comments | Posted in General

Adobe just shared the sneak peeks of Adobe MAX 2011. We can see some new cool features that we may have available in Adobe products. They are doing an amazing work!

You can watch the videos on Adobe TV here.



Building ActionScript3 components in Flash CS5 (part 3)

October 13th, 2011 | 2 Comments | 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

Building ActionScript3 components in Flash CS5 (part 2)

October 7th, 2011 | No Comments | 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

We will remember you forever Steve Jobs

October 6th, 2011 | No Comments | Posted in General

Today we say goodbye to one of the most important people in the technology world.

He was a visionary, revolutionary and innovator that we will sorely miss.





Following one of his phrases that always inspire me:

“The only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle. As with all matters of the heart, you’ll know when you find it.” Steve Jobs

Building ActionScript3 components in Flash CS5 (part 1)

October 3rd, 2011 | No Comments | Posted in ActionScript3

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.

CSSLabel Properties Panel

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.

CSSLabel Component Definitions Panel

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!

Related tutorials
Part 2
Part 3