Monthly Archives: April 2006

Beamed into the MotherShip called Adobe


Monday morning I begin work at Adobe Systems as a Flex Evangelist. I wanted to publicly thank Mike Downey, Mike Chambers, David Mendels, Ben Watson, and Christophe Coenraets for their efforts in beaming me aboard the best ship in the galaxy. I am really excited to be joining such an amazing team and company.

I really believe that the next 10+ years belongs to the Flash Platform in regard to rich application development tools and technologies. Having spent the better part of 9+ years working with Flash technologies, I continue to see signs that the platform is entering a great phase of growth. It is a very exciting time to be working with Flex and Flash and I am very excited to join the Flex team at Adobe.

There are some big changes in progress at my blog so mind the construction. By Monday I should have the onFlex.org site up and running.

Regards,

Theodore E. Patrick
Flex Evangelist – Adobe Systems

Custom Flex 2 Builder Compiler Options


There are 3 important compiler options that everyone should know for Flex 2. These allow you to set the background color, size, and Frame Rate within the output SWF file. These settings are currently undocumented but not for long!

In Flex Builder 2:

1. Open Project Properties >> Flex Compiler

2. Add the following into “Additional compiler arguments:” in single line:

-default-frame-rate 50

-default-background-color #FFFFFF

-default-size 800 600

These are very important settings as they set values within the SWF header directly. These will be present within your application before any ActionScript is executed and before your application is preloaded.

The “-default-background-color” will color the preloader in your Flex application and avoid the brief flash of color when CSS style initializes within your flex application. It is a good practice to set this value the same as your backgroundColor and soon the new CSS Application fill-colors property.

The “-default-frame-rate” is very important in relation to performance. The framerate will determine the maximum rate per second that the DisplayList is rendered. As ActionScript execution is interleaved between every render to the DisplayList, changing the frame rate can double and triple your application performance.

Note: The maximum frame rate is limited to machine performance, if this value is set too high the player will simply run at the fastest rate that it can on the given machine.

The “-default-size” property sets the width and height of the SWF file in the header. If you open the SWF within the standalone Flash Player this is the size the window will default to.

Keep these in your back pocket, you will need them. More to come!

Regards,

Ted :)

Destination Toronto –> FITC


Headed to FITC arriving at 3PM. I am not speaking this year (that I know of!) so I am going to be at the sessions and hanging with friends. Make sure to find me at the conference and say hello. Odds are you will find me at any of the AS3 / Flex 2 sessions or in the lounge coding as usual.

See you in Toronto!

Cheers,

Ted :)

My "Flex Derby" Entry – Shakespeare Explorer


I decided to submit this application into the Flex Derby, I could always use a 2nd Xbox 360. The application contains the complete works of William Shakespeare, loaded as zlib binary compressed xml, displayed using E4X in Flex 2.0 Beta 2.

Shakespeare Explorer

Shakespeare Explorer Source

The application uses the zlib compression library built into the flash.util.ByteArray class to uncompress Shakespeare in XML. Once the data is loaded into the Flex 2 Application, I used E4X to dynamically display the information within. Simply select a Play, then an Act, then a Scene and you will see all the characters and their lines. Just click on the characters name to see their lines.

I also added a few dynamic links that are in context with the selected play and made sure all text in the application resized correctly.

I also went ahead and published the full source for the application so you can take a deeper look into what this actually does behind the scenes. For encoding the XML into Zlib binary, I used python to batch compress all of the XML.

What I think is really cool about the application is the size of the data:

Raw Shakespeare XML = 8.68 Mb !!!
ZLIB Shakespeare XML = 2.18 Mb !!!

That is allot of bandwidth savings any way you slice it. Go Zlib !

The best part is that I can use any server as the compression is portable across any type of web server and browser. The key is that zlib is build into the new Flash Player that will ship with Flex 2.

So why haven’t you entered the Flex Derby?

Cheers,

Ted :)

Flex 2 – Using mx:State within Components


I have been working with the new State tags in MXML. These are really powerful tags designed to simplify changes within components or applications. State allows you to define a name for a series of changes to the UI or components. Change the ‘currentState’ property and many things happen.

I was curious about Sho’s Sliding Drawer components and implemented some of the features using mx:State within an MXML component. The two designs are very different but the end result is similar. The handy thing is that exposing state in a component allows you to have external components react to inner component state. It provides a simple string based interface to managing components vs. setting properties externally or calling methods. In the example I have a set of buttons that can change the state or the panels. Additionally, the enabled value of the Button is bound to the State of the target control. When the state changes, buttons are enabled and disabled.

DrawerPanel using mx:State (View Source Included!)

I think the take away here is that State provides you a simple way to manage many things at once. Change ‘currentState’ and many things happens within the UI layer. The real power of using mx:State comes in the the encapsulation of change within a single property ‘currentState’. Seeing how easy this was to put together, it took me 15 minutes, and how reusable it is within components, mx:State adds allot of value to Flex 2.

I am not sure which drawer components I like better? Sho’s definitely have lots more jazz, mine are much simpler. The more choices the better. :)

Cheers,

Ted :)

MacBook Pro running XP Pro and Flex Builder 2


Over the past month my laptop was showing its age. With an unsolvable glitch in the video card I bought a new machine. I bought an Apple MacBook Pro 2.16 Core Duo with 2GB RAM. Simply put it is one the fastest laptops I have ever owned. It is awesome.

Apple did a killer job with Bootcamp. The drive partitioning, os installation, driver installation are much better than any windows OEM even in Beta format. Windows XP is unbelievably fast on this machine and 2GB of RAM makes compilation on Flex 2 Beta2 much faster.

Here is what I like the most:

1. Long Battery Life – 3hours per battery running XP. Dim the display a bit for longer battery life. I flew from San Francisco to Washington DC on Sunday and with 2 batteries used the machine for 5 straight hours.

2. Fast – Core Duo is for real and it has a profound affect on machine performance. All of my applications are faster and run without any performance limitations.

3. BootCamp – When you start the machine, just press “Option” to select a boot OS. Otherwise the machine will automatically boot into the last one used. Its seamless, easy, and stays out of the way.

4. Hardware – The details on the MacBook are really great, from backlit keyboard to the power meter on the battery, its slick. Its also light as a feather even sporting 2 batteries for travel.

5. Video Card – The card in this laptop is really great. At the Apple store, I had them power a 30″ display and it worked at 2600 resolution in addition to the laptop screen.

Problems:

1. No Backspace Key – On the MacBook Pro ‘delete’ is backspace but there is no key that maps to ‘DEL’ System key. On MacTel XP CTRL+ALT+DELETE does nothing. I have got to find a workaround for this.

2. ‘fn’ and ‘ctrl’ keys have swapped positions. I need to flip these somehow.

3. Bootcamp does not support XP hibernate yet.

4. Bootcamp does not support the camera yet. This is just a driver change.

5. Heat – There is one area of the machine that gets very hot. I need to get a usb powered laptop cooler for it.

All around if your looking to buy a laptop, take a look at the MacBook Pro units. They are expensive but they are worth every penny. I use my laptop every single day and considering that 100% of my earnings emanate from its use, having something killer makes a world of difference.

Now this may disappoint some Mac users but my partitioning says allot:

15GB OSX
98GB WIN XP Pro

I will be playing with OSX and when the apps I use regularly arrive, I will switch.

Considering my experience thus far in buying an Apple, I am going to purchase some Apple shares as well.

Cheers,

Ted :)

Flash 8 Hidden Feature – Timeline Toolbar Positioning


In Flash 8 with an FLA open, press SHIFT + ALT and Double-Click on the Timeline ToolBar (Above the timeline, below the FLA Tab). The toolbar will move adjacent to the stage allowing you quick access to the Stage or Scene settings.

Follow the exact same steps to return the toolbar to its original position. Special thanks to Flash engineering for sneaking this jem in!

Cheers,

Ted :)

Magic with flash.util.Proxy


There are so many new classes in AS3 but I have been exploring flash.util.Proxy lately. This is one crazy class and very useful if you know what your doing. With Proxy you can control how instances behave at a very low level.

You never use Proxy directly, you always subclass it and override methods to control behavior. Essentially any type of access to an instance has a method to override in Proxy. Think of it as the base interface on any object within the Flash Player at runtime. Here are a few examples, assume that myInstance is an instance of a Proxy Subclass:

// GET operation
myInstance.dog;
// identical to calling: (must be called from the flash_proxy namespace!!!)
// flash_proxy myInstance.getProperty( ‘dog’ )

// SET operation
myInstance.dog = 1;
// identical to calling: (must be called from the flash_proxy namespace!!!)
// flash_proxy myInstance.setProperty( ‘dog’ , 1 )

// CALL operation
myInstance.dog( 1 , 2 , 3 );
// identical to calling: (must be called from the flash_proxy namespace!!!)
// flash_proxy myInstance.callProperty( ‘dog’ , 1 , 2 , 3 )

There are several other methods to override in proxy which allow you to control the following:

callProperty – a method operation
deleteProperty – a delete operation
getDescendants – E4X Related operation
getProperty – a get operation
hasProperty – a has operation
isAttribute – testing the presence of an attribute in XML/E4X
nextName – enumeration support
nextNameIndex – enumeration support
nextValue – enumeration support
setProperty – a set operation

Using Proxy is best reserved for situations when you want very fine grained control of behavior. The are very useful for dynamic method calls, like WebServices, Remoting, or in general creating a Facade for any type of object.

SINGLETON implemented via flash.util.Proxy

WARNING… THIS IS A TEST, IT IS NOT INTENDED FOR ACTUAL USE!!!

In exploring Proxy, I created a Singleton implementation using flash.util.Proxy as a test, yes a test. The goal was to see if I could use the ‘new’ operator during Singleton instantiation such that any call to new SingletonClass() would emit a Singleton with the exception of the first call when a new instance of the Singleton value could be passed in. It works but it has some subtle holes in the implementation. Hopefully showing this publicly can highlight the holes and might push this into a usable implementation.

SINGLETON PROXY in AS3

import com.ted.pattern.*
import flash.util.*

//create an instance passing a new Array
a:SingletonProxy = new SingletonProxy( new Array() )

//call some operations
a.push( ‘Hello’ );
a.push( 2 );
flash.util.trace( a[1] ); //2

//create a 2nd Singleton instance
b:SingletonProxy = new SingletonProxy();

trace( b.length ); //2
trace( b[0] ); //1
trace( b[1] ); //2

//comparison operations fail unless valueOf is called
trace( a == b ); //false
trace( a === b ); //false
trace( a.valueOf() == b.valueOf() ); //true
trace( a.valueOf() === b.valueOf() ); //true

In summary, flash.util.Proxy is a very very handy class to understand. It is very useful in controlling object behavior and is widely used within the Flex Framework. Actually many the mx.collections.* Classes are based on it. :)

The more I dig into AS3 and Flex2, the better it gets.

Cheers,

Ted :)

Perfect KeyBoard Pro – The best utility for Flex development


I have adopted a new utility that adds keyboard macros into any text editor. Basically it watches you type and runs macros in the background. It has dramatically accelerated my Flex and ActionScript development and is ideal for any text editing task.

Perfect Keyboard Pro – $29.95

1. In any editor, type: /x2:bu
2. It is replaced with:

I know…right now your saying naaaahhhh my text editor does this. Actually no it doesn’t. Bear with me, this is a subtle change. Note I didn’t press any special keys, I just types a series of keystrokes, no CTRL+Shift+ALT+D key crud, nada.

Basically you can write macros that are triggered by a set of keystrokes on your system. This extends any text editor and essentially makes any place you can type a command line. Its very simple and seamless. Where code completion only works on words at a time, this toolset can replace blocks of any size. The pasted text can be templated and supports dialogs and data input.

It gets better…

1. In any editor, type: /x2:app
2. It is replaced with:

Note: The cursor is placed between the mx:Vbox tags and it looks much better in FB2 :)

Basically the toolset watches you type and runs macros in the background. In a few keystrokes I can go from an empty document to a working Flex 1.5 or Flex 2.0 application. The best part is that its customizable and scriptable with dialogs.

Another example with dialog:

1. In any editor, type: /x2:wbu
2. Dialog appears with fields for ‘id’, ‘label’, ‘click’
3. Optionally fill out the ones I want and press enter.
4. It is replaced with:

I am writing a large library of these macros for Flex 1.5, Flex 2.0, ActionScript development and will be sharing these for free here. Basically it doesn’t lock you into an a text editor and allows you to take your favorite macros with you. Any application that uses text can be extended with these macros.

ASCII Text, so simple, so powerful, and so underestimated. Stop wasting time typing and automate your text workflow.

Best of all this just extends the goodness built into Flex Builder 2.0 (and notepad)!

Cheers,

Ted :)

RSLBuilder or Put your Flex apps on an RSL Diet


Making the perfect SWS file for RSL creation in Flex is not easy on large projects. The key is to obtain the smallest RSL containing only components in use across several applications. I wrote this Python script to read a filesystem for MXML and generate a perfect SWS file.

Download RSLBuilder

Download Python

This script speed reads all MXML files in a directory recursively and obtains all tags in use in the mx namespace. I have tested the script on both Flex 2 and Flex 1.5 apps and it works perfectly including FlexStore, Flex Explorer, Cynergy Projects, and some 150 IFBIN Flex examples. The output is a perfect SWS file containing only the mx components in use. I typically run the script in the Tomcat WebApps directory to obtain an RSL that optimizes an entire server of Flex apps.

To optimize your application to use the RSL:

1. Add an ‘rsl’ attribute to your mx:Application tags as follows:

2. Use COMPC to create an RSL SWF file from common.sws and place this SWF file at “/common.swc.swf” on your server.

In many cases, this will remove about 250Kb of redundant size from every Flex app running on your server. If you add a component that is not in the RSL, it will just add some weight to the app where its used. Think of the script as an instant weight loss plan for your entire Flex site, that actually works!

Automation like RSLBuilder has saved me untold hours of time on mind numbing problems. As Flex is XML it can be parsed and machine processed easily, might as well automate it to the nth degree!

Put those Flex apps on a diet with RSLBuilder.py!

Cheers,

Ted :)