Our engineers have been sneaking away from work and tinkering around in the lab (along with a few elves) during this year to create these two winter-themed games for you to play and share with friends and family. We hope you enjoy our gift to you.

Take me to The Morphic Group Labs

Cheers!

View Example (right click for source)

In this example there are two different Value Objects: PhotoVO and QuoteVO. An FxDataContainer’s dataProvider is set to an ArrayCollection:

[Bindable]private var VODataProvider:ArrayCollection;
<FxDataContainer dataProvider=”{VODataProvider}”…

The ArrayCollection is populated with 5 Value Objects, 2 PhotoVO and 3 QuoteVO.

In the FxDataContainer the itemRendererFunction is set to a function:

<FxDataContainer dataProvider="{VODataProvider}"
	itemRendererFunction="itemRendererFunction_handler"

In the itemRendererFunction a ClassFactory is passed back based on the type of data item in the itemRenderer. In this example there is a different itemRenderer for the PhotoVO and QuoteVO. We will also pass in a function to the itemRenderer to handle clicks:

private function itemRendererFunction_handler(item:Object):ClassFactory {
	var classFactory:ClassFactory;
	if (item is PhotoVO) {
		//item is PhotoVO so use Photo ItemRenderer
		classFactory = new ClassFactory(PhotoItemRenderer);
	} else if (item is QuoteVO) {
		//item is QuoteVO so use Quote ItemRenderer
		classFactory = new ClassFactory(QuoteItemRenderer);
	}
	//pass callback click function
	classFactory.properties = {clickFunction:itemRenderClick_handler};
	return classFactory;
}

View Example with source enabled (flash 10 required)

View Example (right click for source)

The main goal of this project was to play with the new features in Catalyst and Gumbo using a close to real world example application, here is what was done:

• Start with a photoshop layout (PhotoShop file located in PSD directory)
• Use Catalyst to layout/components/skins and export FXG project
• Import FXG to Gumbo project
• In Gumbo add data/photo/etc functionality to the project
• Take project back to Catalyst for small visual edits, then back to Gumbo
• Use new Gumbo MXML tags/components
• Play with new Vector (using the new BitmapData.histogram)

Instead of detailing every step of the process there is great Gumbo Documentation and Catalyst Examples.

View Catalyst and Gumbo Photo Application (requires Flash 10 player)

I would suggest creating a unique local connection name between your applications (swfs). Check out Joey’s blog on this task - unique local connection names. In this project summary, I will not reference a unique connection name.

Here is the set up… In the first swf, I’ve set up a LC object (transSendLC) and an image object (imgOriginal). The second app (swf) somewhat mimics the first app (swf). The only difference is that I created a custom class, inheriting from LC. I’ve added a method for receiving the ByteArray and a Bitmap object. The bitmap object can be used to bind to the Image source. Note: You don’t need to create a custom class. I found that it made sense for my particular flex project.

Within my first app (swf), I have supplied an image (imgOriginal). Now with I need to chop up the data and send it to the second app (swf).

Example Code:
...
var width:Number = imgOriginal.width
var height:Number = imgOriginal.height;
var bytes:ByteArray =
   imgOriginal.bitmapData.getPixels(new Rectangle(0, 0, width, height))

var tempByteArray:ByteArray;

// limit byteArray to 40K - localconnection limit
var byteLimit:uint = uint(40000);

if(bytes.length > byteLimit){

   var currentSize:uint = byteLimit;
   var position:uint = 0;
   var totalSize:uint = 0;

   while(totalSize < bytes.length){
      tempByteArray = new ByteArray();
      tempByteArray.length = currentSize;

      // Write bytes from position to current size
      tempByteArray.writeBytes(bytes, position, currentSize);

      //send ByteArray chunk
      transSendLC.send(uniqueLCName, "sendSnapShot",
              tempByteArray, bytes.length, width, height);

      //get current total and get next position
      totalSize = totalSize + tempByteArray.length;
      position = totalSize;

      //set current size based on limit
      currentSize = bytes.length - totalSize;
      if(currentSize >  byteLimit){
         currentSize = byteLimit;
      }
  }
  else{
     //less than limit - send Byte Array
     bytes.writeBytes(tempByteArray, 0, uint(bytes.length));
     imgLCSend.send(uniqueLCName, "sendByteArrayData",
                 tempByteArray, bytes.length, width, height);
  }
...

Next in my second app (swf), I need to build the sendCopy method within my custom object (inheriting from LC). Note: It is assumed that you have logic to connect the shared local connection name, a Bitmap and a ByteArray object in your custom class.

Example Code:
public function sendByteArrayData(bytes:Object, bytesLength:Number,
                              width:Number, height:Number):void {
   var byteArray:ByteArray = bytes as ByteArray;

   //New ByteArray size
   if(byteArraySnapShot == null){
      byteArraySnapShot = new ByteArray();
      byteArraySnapShot.length = bytesLength;
      byteArraySnapShot.position = 0;
   }

   //Write byte array
   byteArraySnapShot.writeBytes(byteArray);

   //Once length/size is filled based on total bytes create bitmap
   if(byteArraySnapShot.bytesAvailable == 0){
      var bitmapDataSnapShot:BitmapData = new BitmapData(width, height);
      byteArraySnapShot.position = 0;
      bitmapDataSnapShot.setPixels(new Rectangle(0, 0, width, height),
            byteArraySnapShot);

      var bitmapSnapShot:Bitmap = new Bitmap(bitmapDataSnapShot);
      snapShotImg = bitmapSnapShot;

      byteArraySnapShot = null;
   }

}

There perhaps a few ways to achieve the functionality. My purpose here is to show the process of reading and writing ByteArray in a real world application set.

In the last couple of days, I decided to go through my notes, collect all the presentation files (powerpoints, pdfs and zips) and find blogs that reference the keynotes. Essentially I wanted to reflect and review “the Happening” that was Adobe Max 2008, my first Max.

For the most part I was impressed with this, my first, Adobe convention. It did not fail to inspire and to inform developers and designers on the future of Adobe and their products. In fact, when I got home I wanted to buy the latest Creative Suite right away, based on the feeling that I’m missing out on new and exciting features. Call it the rabid consumer in me. Like all the conventions I’ve attended in the past, I feel that most of the session only skimmed the surface of what I expected to learn. Keep in mind that I’ve attended Flash in the Can three times and FlashForward last year. The big difference is the session security lock up. You had to be assign to you time slot session via your id card. If you changed your mind, you had to log in to the system and change your schedule. In other conventions, you could wonder around to another session if the assigned session you were slated to attend went south. I can understand this method reduces the congestion and interruptions of people running around and crashing into the middle of a presentation. My hat goes off to anyone who prepares and presents ideas to a group as large as the Max crowd or any crowd for that matter.

These are the sessions that impressed me the most in no particular order:
The Flex Architecture Faceoff - “to be or not to be” using a Framework. It had as much drama as a Shakespeare play - Starring Todd Anderson, Josh Noble, Chafic Kaznoun and Yakov Falin. I only wish it could have lasted a bit longer. Chafic and Yakov voiced their disdain for using a framework in projects. The idea being that they contain a lot of code that can be unnecessary. They found that an “al a carte” setup with a smaller, tighter group of developers is best for their projects. Ideally using a blackbox approach, passing data providers, is what one should strive for. Other suggestions include passing events on data changes rather than using data binding and using code generation. If there was an opposing side to this argument, it was held by both Josh and Todd. They touted that frameworks are best in large group project where developer level may vary. It is also a means to standardize the work/code. This makes it easier for another developer to maintain the project after the fact. Cairngorm was the framework most referenced in the discussion. There was also a discussion on using Prana with Cairngorm (http://www.pranaframework.org/), to implement inversion of control and dependency injection. From what I understand you can swap out services willy nilly and test object instances via xml file. I heard something about this from the Flex show Podcast. Never used it, but I should definitely try it out. There was a reference to using PureMVC (puremvc.org). No doubt it was a lively discussion. At the end of the session, I think everyone was in agreement on a few points, on when to use and not use a framework. Both sides voiced sensible opinions. Those who attended benefited from their knowledge.

Google Maps with Flash/Air applications: More dynamic views of the map content (3D), Embed video and animation assets. Now support Air… What I got out of this session- I’m interested in building an Air Application using this library verses MapQuest’s library.

Adobe XDCE - Air User Experience Model - Demos on Aggregators, Utilities, Media Consumers… Probably the most impressive application demo - the International Herald Tribune - Basically brings the New York Times layout and design to Adobe Air. What I got out of this session, ideas on Air applications that could be built.

Flex framework features to support large applications: Build the case for the Marshall Plan - Dividing the work between sub application domains / different versions of Flex Framework. This plan will start to be implemented from Flex 3.2 on up to newer versions. Many limitations - No strong typing, No Managers/Singletons, Security issues, and Remote Object Data services have serializing issues. The idea is to support legacy frameworks from this point forward when updating legacy projects cannot be accomplished. What I got the most out of this session was the idea of using modules, RSL to break up application and make applications faster.

Session on 2Advanced: I learned that a company that started around the Internet Crash of 2000 happened can still survive and thrive by having employees multitask. I was very impressed with their work ethic and their creative portfolio.

The major keynotes on Monday and Tuesday focused on The Flash Platform and sneak peeks - Flash Player 10, Adobe Catalyst (Thermo), Adobe Air 1.5, Gumbo (Flex Builder 4) The major trends - Client and Cloud computing, Social computing, Devices and desktop computing. They had a small mention of Adobe Alchemy, which allows you to run C/C++ code into Actionscript (hmm interesting).
Links (good accounts of the major keynotes):
http://flashthusiast.com/2008/11/17/liveblogging-max-2008-day-1-general-session-keynote-click-refresh/#more-102
http://flashthusiast.com/2008/11/18/liveblogging-max-sneak-peeks-and-awards-refresh-yo/
http://blogs.adobe.com/pdehaan/2007/10/adobe_max_2007_keynote_day_2_e.html

I am really thankful that my company (TMG) allowed me to attend this conference. It was great to finally meet my fellow talented Morphicians from the West Coast. This was the crème al la crème of conferences, a way to see what can and will be next in our industry.

Please feel free to respond with comments or any thoughts on Max 2008.

If you have questions then you can certainly post comments. Since I’m traveling I cannot guarantee a fast reply. However, I will field comments when possible, and other readers might have useful replies as well.

Joey Lott (author and co-founder/partner at The Morphic Group) has embarked on a cross-country lecture series.

Joey will be speaking to hundreds of developers across the nation on best practices in Flex, Flash and AIR development. As well as teaching, Joey will also be spreading the word on career opportunities at The Morphic Group. 

Here is Joey’s tour schedule:

Detroit - September 23

St. Louis - October 4 - AS3 Apex in St. Louis
Presenting Flex, Actionscript, and Flash. Space is limited so please RSVP.

Cleveland - October 9 - Cleveland Flex User’s Group
Presenting Flex, Actionscript, and Flash.

Harrisburg - October 10 - Central PA Adobe User Group & Central PA Flash User Group
Presenting “How To Architect Flex Applications.”

Philadelphia - October 22 - Philadelphia Flex User Group
Presenting Flex, Actionscript, and Flash.

Raleigh - October 25 - More information to come.

Lafayette - November 3 - Acadiana Adobe User Group
Joey Lott, author of the upcoming O’Reilly book Programming Flex 3 will speak on “How to Architect Flex Applications,” as well as answer questions! Join us to welcome this noted Flex author to Acadiana!

Austin - November 5 - Austin CFUG
Joey Lott is internationally recognized as one of the pre-eminent authorities on Adobe Flash technologies. A best-selling author and frequent speaker at industry conferences, Joey strives to inform, engage, and empower his audience.

Tucson - November 10 - Tuson Adobe User Group
3pm at the Arizona State Museum

How To Architect Flex Applications:
When building Flex applications the whole is greater than the sum of its parts. You may know how to work with the pieces of Flex (layout, styling components, data components, etc.) but it’s still rather easy to get tangled up and frustrated when trying to stitch the piece together into a coherent application. In this presentation we’ll look at strategies you can use to build Flex applications in the best way possible. Rather than presenting one boiler plate solution as the “right way” this presentation looks at the bigger picture and common patterns you can employ.

Phoenix - November 10 - GoToAndStop.org
We have the great opportunity to hear from Joey Lott on November 10, 2008 @ 8 PM. This will be our last meeting of the year due to the holidays and isn’t on our normal meeting date because of Joey’s travel plans. He’ll be in Tucson on the 10th presenting earlier that day and will make it here at 8 PM to speak.

Las Vegas - November 13 - VegasFlex
We will be having an extra super special event with Joey Lott (yes, THE Joey Lott) giving a presentation on How to Architect Flex Applications.

Santa Rosa - November 24 - http://nbaug.com/
Joey Lott will be presenting on a variety of Flash-related topics. Joey works with ActionScript during the day, and by night he’s a super-secret international man of mystery, rescuing animals and children from harms way, righting wrongs, working for global peace and the rights of all living beings and the environment. Joey is the author (or co-author) of a veritable arsenal of ActionScript and Flash-related titles, including the ActionScript Cookbook, Programming Flash Communication Server, and the Flash 8 Cookbook. In his free time he likes to write poetry, pursue competitive origami, and train in the art of aikido

Salt Lake City - December 2 - More information to come.

Seattle - December 8  - http://www.seaflexug.org
Joey will be speaking to the Seattle Flex User Group on December 8^th at 6:30pm at the Adobe campus in Seattle.  He’ll discuss deep linking in Flex applications.  The Seattle Flex User Group meets monthly to hear from distinguished Flex developers and network with one another.  Past presenters have included members of the Flex engineering team, inventors of technologies built around Flex, and businesses whose services are built with Flex to name a few.  The meetings are open to all who are interested, regardless of experience.

> For additional information click here

Be among the first to see the CS4 big picture at this special joint meeting of 7 Northern California user groups hosted by Adobe. Enjoy free pizza and special prizes.

If you are in the San Fransisco area please join us:
When: September 30, 2008 at 6:30 PM
Where: Adobe San Francisco Building - 601 Townsend at 7th
Cost: FREE!!

RSVP: http://www.baadaug.org/

Here is what this example DataGrid/ItemRender demonstrates:

• MXML based ItemRenderer
• Override ItemRenderer ’set data’ have data as a known ValueObject
• Swap icons/images based on data values
• Highlight selected ItemRenderer
• Enable ItemRenderer to dispatch an event to remove a person from the grid

View the Example with source enabled

DataProvider and ValueObjects
The first thing we’ll look at in the example is the data and data provider for the Grid. Keep in mind this is just a quick demo way to load sample data, the goal is to create an ArrayCollection of Value Objects. The sample XML data is loaded via an HTTPService. When the result comes back from the service we cast the result as an ArrayCollection, we then loop through each item in that result ArrayCollection. Each item is an Object containing the ‘person’ data defined in the XML. For this example we want to place each person data in a person ValueObject (VO). This VO provides a known data type that we will use as the ‘data’ in the ItemRenderer. Often when using AMF taking to ColdFusion/BlazeDS/Java/Etc the VO will be aliased to a data type on the server, so this example simulates the DataGrid provider being an ArrayCollection of VOs.

This result function populates the DataProvider with our Person VOs:

private function httpResult_handler(evt:ResultEvent):void {
	if (evt.result.people.person) {
		//result
		var resultAC:ArrayCollection = evt.result.people.person as ArrayCollection;
		//loop through each item in data
		for (var i:int=0;i<resultAC.length;i++) {
			//create person VO
			var person:Person = new Person();
			//add data
			person.fill(resultAC[i]);
			//add person to main data provider
			peopleDataProvider.addItem(person);
		}
	}
}

ItemRenderer and Override of ’set data’
Next we’ll look at how the data is dealt with inside the ItemRenderer. The DataGrid’s only column is set to have an ItemRenderer. When the DataProvider is populated the DataGrid is going to set the ‘data’ property on each row’s ItemRenderer with the the associated VO in the DataProvider ArrayCollection. We want to make sure that the data inside the ItemRenderer is actually a Person VO object (not a generic Object), so we need to override the ’set data’ function. When we override this function we are now able to cast the data value as a Person VO. This will allow us to refer to data inside the ItemRenderer as that VO with known attributes rather than a generic Object that it would otherwise be:

[Bindable]private var person:Person;
override public function set data(value:Object):void {
	super.data = value;
	if (value is Person) {
		person = Person(value);
	}
}

When overriding the set data function make sure to remember set ’super.data=value’. The ItemRenderer still needs to know the value of the data otherwise it will be treated like an empty row in the DataGrid.

Swap ItemRenderer Images Based on Data
As a nice UI feature let’s display a male/female icon based on the person’s gender. This is easy to do, we know the data will be a Person VO. So we can have the Image component ask for the correct image based on the ‘person.gender’ value:

<mx:Image id="gender_img" source="{getGenderImg(person.gender)}"...

Since the person variable is Bindable if there is a change the ‘getGenderImg’ function will be asked to give the image its source:

private function getGenderImg(gender:String):Class {
	if (gender == Person.GENDER_FEMALE) {
		return imgUserFemale;
	} else {
		return imgUserMale;
	}
}

Highlight Selected ItemRenderer
Next let’s add some nice functionality to make the ItemRenderer stand out a little more when it is selected. To do this we need to override another function. This time we’re going to override the updateDisplayList function, this will allow us to set some styles and graphical elements to the ItemRenderer is if is the selected itemRenderer. Using ‘ListBase’ we are able to find out if the ‘owner’ (the DataGrid) has this data selected:

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
	super.updateDisplayList(unscaledWidth, unscaledHeight);
	if(ListBase(owner).isItemSelected(data)) {
		name_lbl.setStyle("styleName","pnameselected");
		selected_img.visible = true;
	} else {
		name_lbl.setStyle("styleName","pname");
		selected_img.visible = false;
	}
}

Enable ItemRenderer to dispatch a remove person event
Lastly we’d like the trash can icon to remove a the person when clicked. There are other (maybe more preferable, but that’s for a different example) methods, but for this example let’s have the ItemRenderer dispatch an event and have a listener set to catch that event. On the click event of the trash can icon there is an event dispatched:

public static const DELETE_PERSON_EVENT:String = "deletePerson";
private function deleteClick_handler():void {
	var dEvt:Event = new Event(DELETE_PERSON_EVENT,true);
	this.dispatchEvent(dEvt);
}

This ‘deletePerson’ event is dispatched by the ItemRenderer and importantly has ‘bubbles’ set to true. This bubbling enables the parent component to simply add a listener for the event:

myDG.addEventListener(PersonItemRenderer.DELETE_PERSON_EVENT,deletePerson_handler);
private function deletePerson_handler(evt:Event):void {
	if (myDG.selectedIndex != -1)
		peopleDataProvider.removeItemAt(myDG.selectedIndex);
}

That’s it for this example. The next example will build on this but go the route of a dynamic ItemRenderer, while they a little bit more complicated can be very flexible allowing for dynamic properties to be set on the itemRenderers.

View the Example

ConnSets lets you save network settings configurations and switch from one to another with a click of a menu option. Here are some tips for working with ConnSets:

Create a Default Setting

After installing ConnSets, you get the default option “none - Standard” as shown in this screenshot:

Selecting “none - Standard” essentially turns off ConnSets. If you’ve changed your network settings and then choose “none - Standard” it does not reset your settings to the default “Direct connection to the Internet”. Create a default setting and use that instead of “none - Standard”.

1. Go to: Tools > Options > Advanced > Network
2. Select “Direct connection to the Internet:”
3. Click OK to close out of Connection Settings
4. Click OK to close out of Options
5. Go to: Tools > ConnSets > Store
6. Enter “default” for the key in the dialog and click OK
7. Enter any value for the location (default = “Location”) in the dialog and click OK

You should now see the default option as in this screenshot:

Using ConnSets with ServiceCapture

1. Install ServiceCapture
2. Go to: Tools > Options > Advanced > Network
3. Select “Automatic proxy configuration URL:”
4. Enter “file:///C:/Program%20Files/ServiceCapture/firefox.js”
5. Click OK to close out of Connection Settings
6. Click OK to close out of Options
7. Go to: Tools > ConnSets > Store
8. Enter “ServiceCapture” for the key in the dialog and click OK
9. Enter a value for the location (default = “Location”) in the dialog and click OK

You should now see the ServiceCapture option as in this screenshot:

To view FireFox traffic through ServiceCapture, Go to Tools > ConnSets > ServiceCapture - Location

To stop viewing FireFox traffic through ServiceCapture, Go to Tools > ConnSets > default - Location

Using ConnSets with Fiddler

1. Install Fiddler
2. Go to: Tools > Options > Advanced > Network
3. Select “Manual proxy configuration URL:”
4. Enter 127.0.0.1 for HTTP Proxy
5. Enter 8888 for Port
6. Click OK to close out of Connection Settings
7. Click OK to close out of Options
8. Go to: Tools > ConnSets > Store
9. Enter “Fiddler” for the key in the dialog and click OK
10. Enter a value for the location (default = “Location”) in the dialog and click OK

You should now see the Fiddler option as in this screenshot:

To view FireFox traffic through Fiddler, Go to Tools > ConnSets > Fiddler - Location

To stop viewing FireFox traffic through Fiddler, Go to Tools > ConnSets > default - Location

Save Yourself a Click

You can add a ConnSets button to your Toolbar to save yourself a valuable:

1. Go to: View > Toolbars > Customize
2. Find the ConnSets button
3. Drag it to your Toolbar

I use the Icons view and added the ConnSets button right next to my address bar as in this screenshot:

• 1046: Type was not found or was not a compile-time constant: [class with static consts].
• 5001: The name of package ‘[class package]‘ does not reflect the location of this file. Please change the package definition’s name inside this file, or move the file. [class pointing to library symbol]

Of course we couldn’t find any issues with the code or .fla. After much trial and error it was discovered that if you exported the source files (thus removing all SVN hidden files) it published without any errors. After even more trial and error, it was discovered that there is some threshold of files in SVN that when exceeded causes those mysterious errors (this related post tipped me off.). In one project there were roughly 200 class files and the mysterious errors appeared. After running SVN cleanup (which removes temporary hidden SVN files), the errors went away. This unfortunately didn’t help in another larger project. As a work-around we can publish on exported files.

What bothers me is that Flash CS3 publishing is affected by files it’s not told to look for. Could it be related to the fact that SVN hidden files include copies of the versioned files (e.g. .svn/text-base/MyClass.as.svn-base)?

I’m not surprised that I couldn’t find much information on this bug because most people who version control larger Flash projects are likely using Flex Builder.

I’ve submitted a bug to Adobe but hope there’s a more direct solution. Is anyone else having such an issue? Does anyone have any insight into how Flash CS3 publishes or how SVN hidden files affect other applications?

We think the PDK is one of the coolest projects we’ve seen in a long time. We really like PermissionTV, and we think they’ve got a real edge over their competitors because they are willing to innovate in ways that others simply aren’t. Working with PermissionTV is a genuinely great experience. They seem to “get it” when it comes to the marketplace, and (for us) more importantly, when it comes to engineering. The PDK shows this, I think. Unlike many of their competitors PermissionTV’s PDK is a well-documented and well-engineered (which should go without saying since we had a hand in building it) complete (yet extensible) solution for building video applications.

package examples {

import flash.external.ExternalInterface;

public class JavaScript {

    public static function getProperty(name:String):Object {
        var property:Object;
        if (ExternalInterface.available) {
            property = ExternalInterface.call("function() { return " + name +"; }");
        } else {
            property = new Object()
        }
        return property;
    }

    public function JavaScript() {}
}
}

The getProperty() method creates a dynamic anonymous function that simply returns a value.
With such a utility, you can easily access JavaScript properties like so:

trace(JavaScript.getProperty("window.location.href"));

Who needs the FABridge? Just kidding…

You would essential extend the linkButton class by creating your own custom linkButton. This custom component would override createChildren and measureText methods. In createChildren(), you would enable “textField” to workwrap and allow multiple lines. Then in measureText(), the correct height and width needs to be set by getting line metrics of the “textField”.

Note: “textField” is a Text Field property in the base class.

...
override protected function createChildren():void
{
     super.createChildren();
     if (textField){
         textField.wordWrap = true;
         textField.multiline = true;
     }
}

override public function measureText(s:String):TextLineMetrics
{
     textField.text = s;
     var lineMetrics:TextLineMetrics = textField.getLineMetrics(0);
     lineMetrics.width = textField.textWidth;
     lineMetrics.height = textField.textHeight;

     return lineMetrics;
}
...

It is important to set the width within your custom tag. For the best results, you should set the height though it is not necessary.

Please let me know if you have a better workaround or any comments on other extensions of Flex components.

The Adobe Solution Partner Program benefits partners who extend, enhance and support Adobe products and technologies in the solutions they deliver to customers. As a member, The Morphic Group recognized the additional benefits and opportunities Adobe’s program provides. And by integrating new technologies into their products, The Morphic Group is able to extend their reach as well as provide superior support.

So what was I to do? After reading the Flex docs and scanning the Text, Label, and TextField source, I decided to subclass the Text component. Here is the resulting component:

package com.themorphicgroup.controls {

   import flash.text.TextLineMetrics;

   import mx.core.mx_internal;
   import mx.core.UITextField;
   import mx.controls.Text;

   use namespace mx_internal;

   public class LineLimitText extends Text {

       protected var _maxLines:uint = 0; // max lines to show; 0 = do nothing;
       private var _isTruncated:Boolean = false;
      private var explicitHTMLText:String = null; 

      public function get maxLines():uint {
         return _maxLines;
      }

      public function set maxLines(value:uint):void {
         if (_maxLines != value) {
            _maxLines = value;
            invalidateDisplayList();
            invalidateSize();
         }
      }

      /**
       * Returns the number of lines displayed.
       */
      public function get numLines():int {
         var lines:int;

         if (_maxLines > 0) {
            var metrics:TextLineMetrics = textField.getLineMetrics(0);
            var textHeight:Number = Math.ceil(metrics.height) * _maxLines;
            if (textField.height > textHeight) {
               lines = _maxLines;
            } else {
               lines = textField.numLines;
            }
         } else {
            lines = textField.numLines;
         }
         return lines;
      }

      override public function set text(value:String):void {
         super.text = value;
         explicitHTMLText = null;
      }

       override public function set htmlText(value:String):void {
          super.htmlText = value;
          explicitHTMLText = value;
       }

      /**
       * Overriding measure and trucating the lines here.
       * If not HTML and is truncated, add ellipses.
       */
      override protected function measure():void {
         super.measure();

         // if not html
         if (!isHTML) {
            // if previously truncated, reset the text to the original
            if (_isTruncated) {
               textField.text = super.text;
               textField.validateNow();
            }
         }         

         // if want to limit lines
         if ((_maxLines > 0) && (textField.numLines > _maxLines)) {
            // if not html
            if (!isHTML) {
               _isTruncated = true;

               var newText:String = "";
               var line:String;
               // loop through lines and collect text
               for (var i:uint = 0; i < _maxLines; i++) {
                  line = textField.getLineText(i);
                  if (i < (_maxLines - 1)) {
                     newText += line;
                  // if on last line
                  } else {
                     // remove end and add ...'s
                     line = line.substr(0, line.length - 3);         // cut 3 chars off end
                     line = line.substr(0, line.lastIndexOf(" "));   // cut at last space
                     newText += (line + "...");
                  }
               }
            }

            // calc and set the measured height
            var metrics:TextLineMetrics = textField.getLineMetrics(0);
            var newTextHeight:Number = Math.ceil(metrics.height) * _maxLines;
            measuredHeight = newTextHeight + UITextField.TEXT_HEIGHT_PADDING;

            // if not html
            if (!isHTML) {
               textField.text = newText;
            }
         } else {
            // if not html
            if (!isHTML) {
               // if truncated before, but dont need it anymore, reset size
               if (_isTruncated) {
                  textField.autoSize = "left";
                  measuredHeight = textField.textHeight + UITextField.TEXT_HEIGHT_PADDING;
               }
               _isTruncated = false;
            }
         }
      }

       private function get isHTML():Boolean {
         return explicitHTMLText != null;
      }
   }
}

The key to this component was overriding the protected measure() method and accessing the protected textField variable. The measure() method uses the new maxLines property and limits the number of lines in the textField if necessary. Now this new measure() method is more expensive so I wouldn’t go and use it everywhere.

Here is an example application that uses LineLimitText:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:controls="com.themorphicgroup.controls.*" layout="absolute">
   <mx:Script>
      <![CDATA[
         [Bindable]
         private var _lipsum:String = “Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam et mi. Sed mi. In sit amet tortor. Curabitur eget neque. Ut nisi quam, convallis eget, elementum at, condimentum vitae, lorem. Vestibulum adipiscing hendrerit ligula. Donec vitae dolor id libero ultricies condimentum. Nulla dapibus sapien. Aliquam consectetuer lacus non nisl. Suspendisse rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.”;
      ]]>
   </mx:Script>
   <mx:Style>
      FormItem {
         backgroundColor: #FFFFFF;
      }
   </mx:Style>
   <mx:Form>
      <mx:FormItem label=”mx:Label, width=200″>
         <mx:Label text=”{_lipsum}” width=”200″/>
      </mx:FormItem>
      <mx:FormItem label=”mx:Text, width=200″>
         <mx:Text text=”{_lipsum}” width=”200″/>
      </mx:FormItem>
      <mx:FormItem label=”mx:Text, width=200, height=60″>
         <mx:Text text=”{_lipsum}” width=”200″ height=”60″/>
      </mx:FormItem>
      <mx:FormItem label=”controls:LineLimitText, width=200″>
         <controls:LineLimitText text=”{_lipsum}” maxLines=”4″ width=”200″ color=”#FF0000″/>
      </mx:FormItem>
   </mx:Form>
</mx:Application>

This results in the following screenshot:

The text in red in the screenshot uses LineLimitText. Also in the screenshot is a Text component with a defined height. That one doesn’t have the fancy ellipses though. This component was an interesting exercise in understanding Flex components, reading docs and source.

I’ve been using FlexUnit for a few years. And during this time I naively thought you _had_ to write tests using the structure that Darron Schall wrote about (http://www.darronschall.com/weblog/archives/000216.cfm). However, I never really cared much for that structure. I found it strange, and it didn’t provide the flexibility I wanted in unit tests. For client work I just accepted this. However, recently I started writing a new chapter for the pending Programming Flex 3, and I decided to mention unit tests with FlexUnit. It was at that point that I thought “there must be a better way to write these tests.” It was only then that I ran a Google search and read Theo’s blog post.

Although Theo’s blog post describes how you can alternately write FlexUnit tests I’ll summarize with examples as well.

Basically, the popular FlexUnit approach is to use a static method that returns a TestSuite for every test, and the test’s constructor accepts a string parameter naming the test method to run. This is the approach that Darron writes about. It’s an approach that was unfamiliar to me until working with FlexUnit. My previous experience with unit testing was purely via the (excellent) book Test Driven Development By Example, and in that book the tests are structured differently. Theo describes how to structure tests in that way. That way requires that the test constructor does not require a parameter, and instead the test runner will run all methods on the test class where the method names start with “test”. I’ll show a simple example.
Consider the following, very complex and useful class that you need to test.

package {
	public class Adder {

		public function Adder() {
		}

		public function add(a:Number, b:Number):Number {
			return a + b;
		}

	}
}

The following shows a simple example test case class. This class defines three test methods, which is clear because the method names start with “test”.

package {
	import flexunit.framework.TestCase;

	public class AdderTest extends TestCase {

		public function AdderTest() {
			super();
		}

		public function testPositiveInts():void {
			var adder:Adder = new Adder();
			assertEquals(adder.add(5, 4), 9);
		}

		public function testNegativeInts():void {
			var adder:Adder = new Adder();
			assertEquals(adder.add(-5, -4), -9);
		}

		public function testNaN():void {
			var adder:Adder = new Adder();
			assertTrue(isNaN(adder.add(5, NaN)));
		}

	}
}

The test runner looks like the following.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="creationCompleteHandler();" xmlns:flexui="flexunit.flexui.*">
	<mx:Script>
		<![CDATA[
			import flexunit.framework.TestSuite;

			private function creationCompleteHandler():void {
				var suite:TestSuite = new TestSuite();
				suite.addTestSuite(AdderTest);
				testRunner.test = suite;
				testRunner.startTest();
			}

		]]>
	</mx:Script>
	<flexui:TestRunnerBase id=”testRunner” width=”100%” height=”100%” />
</mx:Application>

Note that we use addTestSuite() to add a reference to the test case class to the test runner. This will automatically run all the methods starting with “test”.
Apart from the simplicity and clarity of this way of structuring tests you also get to use setUp() and tearDown(), which automatically run before and after every test method. The following is another example illustrating setUp() and tearDown(). This time we’ll use a sort-of VO class called Example that has a static method for creating a new Example object from XML data.

package {
	public class Example {

		private var _a:String;
		private var _b:String;

		public function get a():String {
			return _a;
		}

		public function set a(value:String):void {
			_a = value;
		}

		public function get b():String {
			return _b;
		}

		public function set b(value:String):void {
			_b = value;
		}		

		public function Example() {
		}

		static public function parseFromXml(xml:XML):Example {
			var example:Example = new Example();
			example.a = xml.a.toString();
			example.b = xml.b.toString();
			return example;
		}

	}
}

The test for this looks like the following.

package {
	import flexunit.framework.TestCase;

	public class ExampleTest extends TestCase {

		private var _example:Example;

		public function ExampleTest() {
			super();
		}

		override public function setUp():void {
			_example = Example.parseFromXml(Value 1Value 2);
		}

		override public function tearDown():void {
			_example = null;
		}

		public function testA():void {
			assertEquals(_example.a, “Value 1″);
		}

		public function testB():void {
			assertEquals(_example.b, “Value 2″);
		}

	}
}

Notice that both setUp() and tearDown() are overridden.

We were asked to build a presentation that featured video of a person talking about the client’s product while presenting statistic and data in an exciting visual way. We decided to do this presentation with Flash Timeline animation, Actionscript, FLV video files and some luck. The idea was to get a production house to produce video excerpts with alpha layers. A script was conceived and the video assets were delivered within a few weeks to a month (give or take the corrections and post-production snafus). While we were waiting for the video to arrive, I built the shell application that would house the video sections (SWF files with external video). Each section would contain the various video takes in the order of the production script. You never know how a script like this will play until you actually build the different sections. This was definitely the case for this project.

For me…. The developer… I wanted to control everything to the nth degree. The shell loads all of the video sections (swfs), animates the transition moving from one section to another via script, and has a navigation link bar with a drop down menu, all the things we do best in the programming structured discipline. But for the video sections themselves, it is a different story. I needed to consider the best environment for the animator/designer to work freely, to give them enough space for their animations and somehow gel the programming and video together.

That is where cue points come in (and save the day). The designer/animator created a list of titles for the animation in order of the video script. We developed a system where the cue point names would be the frame titles for the main movie clip; which would house the animations. I embedded cue points into the video to then play animation content at different instances of the presentation. This planning and collaborating was done well before any flash production started.

Example event handler for the cue points from the FLVPlayback (videoPlayer)
….
videoPlayer.addEventListener(”cuePoint”, onCuePointHandler);
….

function onCuePointHandler(event:MetadataEvent){

var cuePointName:String = event.info.name;
mainAnimation.gotoAndStop(cuePointName);
}

This is not a perfect system by any means. Most developer would poo poo the notion of using FLVPlayback, instead creating a video player class and going the route of a fully Actionscript solution. But I needed to keep in mind that the animator/designer would be using the timeline as his tool. We needed to see everything on the timeline. Animators/designers who work with the timeline seem to come up with amazing yet manageable animations that could never be created via script. Besides, it is a visual medium after all.

After creating one video section, we began to developer an organic workflow with the other sections. I built the FLAs with the cue point embedded video and code for referencing frame sections (named by the animation names). The designer/Animator added animations within the empty frame sections that are called based on the cue points fired. We had a system and we stuck to it throughout the project. The results were easy to see. The process of removing and moving parts that did not work was simple.

It is true that nothing is ever written in stone when you create a presentation like this. Here is an example of this fact. When we tested pieces of the presentation on the web, we noticed a big problem. The video did not always synch up with animation. Keep in mind that most of the animations consisted of movie clips embedded within movie clips. The solution was to create additional cue points, directly fire (or play) beginning/ending animations when needed and remove unnecessary frames. This improved the performance greatly and solved the lag problem on the web.

I will be honest with you. This approach is a bit wacky. In fact, I would revise the process if another projects like this comes up again. It got the job done and it did not break the original plan and system. As long as you keep things consistent and have a plan, you will always find a way out of any jam.

Perhaps what I’m about to say is common knowledge and nothing of any interest to anyone. However, I thought it was interesting and worth posting about. The first parameter for the ExternalInterface.call() method is a string containing a name of a JavaScript function. When executed the call() method effectively appends the function call operator (the () ) to the function name and evaluates that expression. I hadn’t seen an example using an anonymous function definition in place of a function name, but I figured it might work, and it does. I figured this would work because in JavaScript you can do the following.

function() { alert('example'); }();

Notice the function call operator appended to the anonymous function. It causes the function to execute in JavaScript. Therefore, I figured that from ActionScript you could do the following.

ExternalInterface.call("function() { alert('example'); }");

That will work, which is neat. Not only that, but you can easily pass values from ActionScript to the JavaScript. The most obvious way to do that is as in the following example.

var message:String = "example";
ExternalInterface.call("function() { alert('" + message + "'); }");

However, you can also pass values as in the following example, which is a little nicer, in my opinion.

ExternalInterface.call("function(message) { alert(message); }", "example");

These examples are really simple to illustrate the point. However, you can also create much more complex functions. In fact, you can define functions that define functions, as in the following example.

var javascript:String = "function() { " +
                                    "timeoutHandler = function() { " +
                                        "alert('example', 2000); + "
                                    "};" +
                                    "setTimeout(timeoutHandler); }";
ExternalInterface.call(javascript);

In the library I wrote the functions configure event handlers for JavaScript events, and they use ExternalInterface callbacks to call ActionScript functions when the events are dispatched.

I guess this use of anonymous functions might not be the most efficient way to write or run JavaScript. It might even be bad memory management. I don’t claim to be a JavaScript expert. I just think it’s a neat use of ExternalInterface, and it has been very useful.

In this case I had a requirement to create a unique name to use when connecting a LocalConnection. The idea is that two .swf files need to communicate over this LocalConnection, and both of them need to know the name of the connection. Seems simple enough. I could just hard code the same value into both .swf files. However, the deal is that these two .swf files exist in the same HTML page, and I also would like to be able to open more than one instance of the HTML page in different browser windows. If the name of the connection is hard coded into the .swf files then it will work for one instance of the page, but subsequent instances will throw errors because the connection will already be in use. In such cases the error might be something like the following (which is particularly unhelpful in diagnosing the actual error since it doesn’t really indicate what caused the error.)

Error #2044: Unhandled statusEvent:. level=error, code=

Note that you might see this error in other cases, and it doesn’t necessarily indicate that the solution described in this post is appropriate. This error could be caused by lots of different scenarios. For example, you would see this error if you were trying to send requests across domains and the .swf files weren’t properly configured (see allowDomain() in the LocalConnection documentation.) Probably the best way to determine the actual cause is to listen for status events on all LocalConnection object, and log the status codes. However, in this particular case the errors were because an .swf (in a new HTML window) was trying to establish a connection using the same name as a pre-existing connection.

One obvious solution to this would be to create a unique name using JavaScript, and then I can pass that in to each of the .swf files using FlashVars. That would allow each HTML page to create a unique name and pass in the same name to each of the .swf files, ensuring that those two .swf files can communicate over the same channel, but other .swf files in other pages wouldn’t conflict. That would work except that in this particular case one of the .swf files is not embedded directly in the HTML page, and it does not have access to the JavaScript in the HTML page. This is because one of the two .swf files is embedded inside another plugin that is, itself embedded in the HTML, and that plugin doesn’t have a way to pass a value from the HTML page to the Flash Player instance it embeds.

Therefore, the solution I’m using follows. Note that we’ll refer to the .swf files as sending.swf and receiving.swf. In this case sending.swf is the instance embedded in the HTML page directly, and receiving.swf is embedded in the plugin.

1. Initially receiving.swf calls connect() for a LocalConnection object using a hard coded value of _defaultConnection.
2. Receiving.swf’s local connection client defines a method called setNewConnectionName(), which accepts a string parameter. When this method is called it first calls close() for the LocalConnection object, and then it calls connect(), using the parameter value.
3. Once both .swfs are loaded into their respective players sending.swf creates a new, unique connection name. You could use any algorithm to create a unique name. In this case I use the following: var connectionName:String = “_” + (new Date()).getTime();
4. Then sending.swf calls send(”_defaultConnection”, “setNewConnectionName”, connectionName); for the LocalConection object.
5. After that point sending.swf always calls send() with the new, unique connection name.

Since SWFObject is the defacto standard for embedding Flex and Flash applications I find it odd, though not out of character for Adobe, that BrowserManager relies entirely on a very specific HTML template that ships with Flex. If you’ve ever looked at the Flex HTML templates then you know the code is…how to put this nicely…not what you’d want to put on your site. This is part of the reason SWFObject is the standard. Apart from the fact that SWFObject works really well, it also allows you to write really nice-looking, standards-compliant HTML code. We _always_ use SWFObject. We _never_ use the Flex HTML templates for production. The obvious dilemma then is how can we use the deep linking feature from Flex 3 AND use SWFObject if the deep linking feature is seemingly entirely dependent on a specific Flex HTML template?

Note that for this post I’m only talking about SWFObject 2.0, and none of this is relevant to SWFObject 1.5 or earlier.

The solution to this dilemma is not entirely great, but I think it’s better than having to use the Flex HTML template. I should add that there is a third-party deep linking solution called SWFAddress (www.asual.com/swfaddress) that integrates well with SWFObject without any silly workarounds. However, since deep linking does work quite well with BrowserManager, and BrowserManager is built into the Flex 3 framework, I prefer to use the “official” solution in this case. (And yes, I know that it’s rather silly that I’m quick to throw out the “official” HTML solution but reticent to throw out BrowserManager.) The solution that I’ve found requires modifying the JavaScript file used by BrowserManager slightly. I’ll explain the few changes I made to get it to work.

Note that these details are also outlined in the soon-to-be-published Programming Flex 3

Basically the issue is that history.js, the JavaScript file used by BrowserManager (included in the Flex SDK) has a bit of lousy logic in how it finds the Flash Player instance for the Flex application. If you look at line 103 of the standard history.js file (in Flex Builder you’ll find this in the history subdirectory of the html-templates directory) you’ll see the getPlayer() method. This code assumes that the Flash Player is embedded using an <embed> tag nested in an <object> tag. It also assumes that you have only one .swf embedded in a page, or that you want to use history management/deep linking with the first .swf embedded in a page. These are bad assumptions. Even if you have only one .swf in the page this is still not going to work with SWFObject, which uses standards-compliant nested <object> tags. There are a handful of ways you could theoretically resolve this. The manner I use and that we’re using currently at The Morphic Group is to modify getPlayer() by adding the following code at the beginning of the function.

    	if(BrowserHistory.flexApplication != null) {
    		return BrowserHistory.flexApplication;
    	}

Then we need only to assign the Flex application instance to BrowserHistory.flexApplication from within the HTML page. When using SWFObject this requires using the swfobject.addLoadEvent() method to handle the load event before assigning the value. Then you can call swfobject.getObjectById() to get the reference to the Flex application. The following is an example of the necessary JavaScript code in the HTML page. This registers the object, handles the load event, and assigns the BrowserHistory.flexApplication reference.

		swfobject.registerObject("content", "9.0.0", "expressInstall.swf");
		swfobject.addLoadEvent(loadEventHandler);
		function loadEventHandler() {
			BrowserHistory.flexApplication = swfobject.getObjectById("content");
		}

Note that we’re assuming in this example that the id of the outer <object> tag is content. Also, you can read more about the SWFObject API at the SWFObject site.

This post is not original. Many others have posted about the Firefox “issue” regarding displaying content at 100% height. I’m just posting a reminder, and a Flex and SWFObject-specific version.

The “issue” is that in most cases you probably won’t see the content or you may only see part of the content depending on the _actual_ height of the container of that content. When we build Flex applications they frequently are the only visible content in an HTML page, and the .swf itself is embedded in an otherwise empty <div> tag. The result is that if we’ve forgotten about this issue we’re likely to wonder why we don’t see the Flex application at all in Firefox. The reason is that Firefox is (apparently, from what I’ve read) compliant with the W3C specification for how to treat height. Apparently that specification says that when height is set to a percentage the height of the object should be a percentage relative to the height of it’s container. This is the important part. If the container of the object doesn’t have enough actual height then the content for which you’ve set the percentage will not display as you expected. Typically when we set the height to 100% we expect the content to occupy the entire height of the browser. If we haven’t correctly configured the containers to have enough height we won’t see anything showing up in Firefox.

The solution is to set the height of all the containers as well. Assuming that you’re embedding the .swf in a div tag nested inside the body tag, which is itself nested in the html tag then you can use the following CSS to allow the content to really display at 100%.

html, body, div {
  height: 100%;
}

We use SWFObject to embed Flex and Flash content, and we use the static publishing method with nested <object> tags. Therefore, the following is an example of a simple HTML page we might have to embed an .swf to 100% width and height in the browser.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <title>Flex Example</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <script type="text/javascript" src="swfobject.js"></script>
  <script type="text/javascript">
    swfobject.registerObject("flexApplication", "9.0.0");
  </script>
  <style>
    html, body, div {
      height: 100%;
    }
  </style>
</head>
<body>
  <div>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        width="100%" height="100%" id="flexApplication">
        <param name="movie" value="example.swf" />
        <!--[if !IE]>–>
          <object type=”application/x-shockwave-flash” data=”example.swf”
               width=”100%” height=”100%”>
        <!–<![endif]–>
          <p>This site is best viewed as a Flex application, which requires
                       Flash Player 9. For users who prefer not to use Flash Player we have
                       provided a <a href=’textVersion.html’>text-only version
                       of the site</a/>.</p>
        <!–[if !IE]>–>
          </object>
        <!–<![endif]–>
    </object>
  </div>
</body>
</html>

By programmaticly skinning the buttons, I was able to add uniquely formatted text to a sprite that is then drawn to the button state skin. If you’re new to Programmatic Skinning, check out Joey Lott and Chafic Kazoun’s book - Programming Flex 2.

Here is a scaled down version of this functionality. In most cases, you would use a different background image per button state. In this example, I am embedding one background image and a text element with an embedded font.

package com.myProject.skins
{
   import flash.display.BitmapData;
   import flash.display.IBitmapDrawable;
   import flash.display.Sprite;
   import flash.text.TextField;
   import flash.text.TextFieldAutoSize;
   import flash.text.TextFormat;
   import flash.text.AntiAliasType;
   import mx.controls.Button;
   import mx.core.UIComponent;
   import mx.skins.ProgrammaticSkin;

   public class CustomButtonSkin extends ProgrammaticSkin
   {

      [Embed(source='C:\\WINDOWS\\Fonts\\framd.ttf',
      fontName='FranklinMed', mimeType='application/x-font')]
      private var FranklinMed:Class;

      /* This path is assuming that you have an image in this folder */
      [Embed(source="assets/images/skinsRed.png")]
      private var skinImgRed:Class;

      public function CustomButtonSkin(){}

      override protected function updateDisplayList(unscaledWidth:Number,
           unscaledHeight:Number):void
      {
           var _backgroundImg:Sprite = new Sprite();
           var _mainSprite:Sprite = new Sprite();
           var _bitmapData:BitmapData =
                new BitmapData(int(unscaledWidth), int(unscaledHeight));
           var _mainBitmapData:BitmapData =
                new BitmapData(int(unscaledWidth), int(unscaledHeight));
           var _skinImg:IBitmapDrawable = new skinImgRed();

           /*
               Drawing the embedded image to sprite(backgroundImg)
               and then add it to mainSprite.
           */
           _bitmapData.draw(_skinImg);
           _backgroundImg.graphics.beginBitmapFill(_bitmapData);
           _backgroundImg.graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
           _backgroundImg.graphics.endFill();
           _mainSprite.addChild(_backgroundImg);

           /*
              Create and format the textfield. Then add it to mainSprite.
              Note: Using an embedded font in order to change the rotation.
           */
           var _labelName:TextField = new TextField();
           _labelName.embedFonts = true;
           _labelName.textColor = 0xffffff;
           _labelName.autoSize = TextFieldAutoSize.RIGHT;
           _labelName.text = “dynamic text”; // example - Button.Data property
           var _textFormat:TextFormat = new TextFormat();
           _textFormat.font = “FranklinMed”;
           _textFormat.size = 14;
           _labelName.antiAliasType = AntiAliasType.ADVANCED;
           _labelName.setTextFormat(_textFormat);
           _labelName.rotation = -90;
           _labelName.y = 10 + _labelName.textWidth;
           _mainSprite.addChild(_labelName);

           /* Draw mainSprite to CustomButtonSkin object */
           _mainBitmapData.draw(_mainSprite);
           graphics.beginBitmapFill(_mainBitmapData);
           graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
           graphics.endFill();

      }

   }

}