The basic idea is that there is a small overhead associated with executing the loop body, so if we unfold the loop in a way that it does the work of 8 iterations in 1 iteration, we can save some time. My tests show that in long enough loops this technique can give us 8x to 10x performance gain.

Here are the results of my tests using Grant Skinner’s performance test harness …

Here are the actual test cases .. I borrowed the implementation from Miller Medeiros’ javascript test cases and Jeff Greenberg’s original javascript implementation …

Among other things Crayons has a built in data binding framework which we’re open sourcing today. Data binding in crayons in based on Signals where an object dispatches a specialized ChangeSignal whenever a bindable property changes, for example the setter of a bindable property data in SomeModel object would look like this …

When an object signals a change in a property it has to pass in the old value of the property and the new value of the property. Unlike Flex, there is no [Bindable] metadata tag, an object can make one of its properties bindable by dispatching a ChangeSignal whenever that property changes. The ChangeSignal implementation is inspired by Jackson Dunstan’s TurboSignals instead of Rob Penner’s more flexible AS3Signals library because using a specialized signal made sense in this scenario .. just like flex, signaling a change in a property is something we do a lot in a crayons application, for example to signal change in model data or change in the property of a component, for data binding etc. so taking advantage of the speed of a specialized signal seemed reasonable. Also this especially helps data binding, since a Binding is really an implmentation of a ChangeSlot and Jackson’s already shown that such specialized slots are extremely fast. While in most cases its hard to justfy implementing a Slot interface just to add a listener and I would almost always go with adding a function listener, but in case of data binding since this is only used internally within the binding framework and the user of data binding is not bothered with it, implmentating a ChangeSlot was perfectly reasonable.

Now to use crayons data binding you can use a Binder object to bind a source ChangeSignal to a target property as follows …

The Binder class provides some other interesting apis to remove binding or to check if a binding exists. This binding implementation is heavily inspired from Eric Feminella’s implementation where he’s used as3signals. I refactored it for use with ChangeSignal and ChangeSlot and changed some other APIs for our needs.

That’s about it, you can get the complete crayons binding framework source code here on Github, do let me know what you think, any feedback would be very welcome.

Finally, I want to say thank you to Jackson Dunstan, Eric Feminella and Rob Penner who’s great work and research helped me implement this. I’ll buy you guys beer whenever we get a chance to meet

Update: Troy further improved his class here

***

Today, I needed to create a preloader for a pure AS3 application compiled with mxmlc. I couldn’t find much documentation on the topic but this post by Keith Peters describes the solution in good detail, except his post is some what old and the code there doesn’t work with the latest compiler..

As Keith describes, the first thing you need to do to implement a preloader is move your application to the second frame of the movie, this is done by adding a [Frame] metadata tag above your document class and providing it with a factory class that will initialize your application, in case of Flex this factory is mx.core.SystemManager .. we will have to write our own.

Your document class would now look something like this …

Our ApplicationLoader factory class has to extend MovieClip (not Sprite) and has to implement the interface mx.core.IFlexModuleFactory (this is the main change since Keith’s post). In the below code, I’ve stubbed out functions from IFlexModuleFactory and you can leave the code as is for most applications, you will only need to change this if your application loads other SWF’s at runtime or if you’re building an AIR application.

When we compile our Example application the compiler will generate a class (you can see it with -keep) that subclasses our ApplicationLoader factory and implements some additional functionality .. an instance of this sits in the first frame of our movie, loads the second frame that has our application and shows a preloader while the application loads …

You may change the look of your preloader in the onEnterFrame method but since this first frame needs to load quickly keep it light and avoid using any classes that are not native to Flash Player.

Finally thank’s to Keith for his post that got me started and also for all the other cool stuff I’ve learned from him over the years.

A similar attempt by Takashi Yamamiya and the eswf library on google code were quite helpful in getting me started, so thanks to them for sharing.

Here’s the slide deck from beginning of the lecture which tries to define what an RIA is and explores the architecture a typical RIA platform …

Shortcuts

Here are some Flash Builder Keyboard shortcuts I use very frequently, if you have suggestions on others that are especially handy, please let me know …

* CMD on OSX = CTRL on Windows

Customize

If you press CMD+3 and type “keys”, you’ll see the keyboard customization preferences panel for Flash Builder, I recommend spending some time customizing Builder for your own needs, for example I use CMD+1 and CMD+2 to switch between Develop/Debug perspectives. I barely use the NumPad on my keyboard so I’ve customized it to be all keyboard shortcuts, pressing CMD+0 inserts snippets

Snippets

Having a good snippets plugin can greatly improve a developer’s productivity, I love how Snippets work in TextMate, I’m still searching for a good solution for this in Flash Builder, till now I’ve been using CFEclipse’s SnipTreeView but the problem is it only works with AS3 code and can’t handle MXML. I was so desperate one day that I figured out that it fails because the CFEclipse InsertSnippetAction class on Line No 71 assumes that the editor is an ITextEditor, while this is true for most Eclipse editors, the MXML editor is actually made of 2 editors a Design Editor and an ITextEditor, so the type cast on Line 71 fails … I never got to building CFEclipse on my own though. But, it looks like Lee Brimelow did, he has released a fix which makes SnipTreeView work with MXML editor, unfortunately though Lee’s fix doesn’t work for me because of a Java version issue on OSX Leopard.

Another handy Mac only tool is TextExpander. It sometimes breaks your formatting in eclipse, but that has gotten better with Flash Builders new auto formatting improvements.

Multi Clipboard

A multi-clipboard tool is another must have for all developers, I use Jumpcut on OSX and it is a big big productivity boost to not have switch between files and applications when copying and pasting. I don’t know any good equivalent for Windows, so if you know of one, please let me know.

Finally, I have to thank Chetan Sachdev because he got me hooked to optimizing my workflow using the keyboard while we were working together on a project earlier this year.

I would love to know if you have any other handy tips on Going Commando.

Here are two quick layouts we wrote during the meeting as I showed everyone how easy it is to write a custom layout …

Random Layout

Step Layout

These layouts are currently somewhat crude but the idea was to convey how easy it is to write your own layouts … here the code for RandomLayout … just one simple function …

Of course, these layout algorithms can get more complex … here’s the StepLayout code …

For more elaborate examples you may want to checkout the ConcentricLayout example I posted last week or Ryan Campbell’s very cool 3D Layouts. Evtim, an engineer on the Flex SDK team also has some detailed posts on how to write Layouts on his blog.

Flex 4 is awesome.

UPDATE: You can view the complete source of the above example here or download it from here.

ConcentricLayout arranges layout elements in such a way that their centers are aligned and their size sequentially decreases. The width of each layout element is less than the previous element by a value specified using the horizontalGap property and the height of each layout element is less than the previous element by a value specified using the verticalGap property. If the element has an explicit width or an explicit height it still aligns its center but is not resized. You can tell the layout to force a resize of all elements and ignore their explicitly specified size using the forceResize flag

Here’s a quick example:

View Source

Download Source

Most of the problems we had were related to gradients, here are some snapshots …

1. The first strip is original graphic created in Illustrator
2. The second strip FXG Exported from Illustrator
3. The third strip is original Illustrator file imported into Catalyst and then FXG exported from Catalyst

Clearly, all of them are different. While this difference may not feel significant when looked at in this isolated manner, if you have many gradients in your design it can significantly affect the fidelity of the design.

Here’s the code generated by Illustrator’s FXG export feature ..

Here’s the code generated by first importing the Illustrator file into Catalyst and then exporting FXG ..

Note that the colors exported by each are different.

Suggestion: Illustrator’s FXG export should have a way to add namespace prefixes while exporting, would be helpful

At this point, I asked about this problem on an Adobe forum and one of the team members replied and suggested I should … In Illustrator, convert colors to SRGB and turn off color management. So I did that.
Here’s the original followed by what it looks like with the new settings …

So, our designer will have to redo some work in the new settings to create the original look, that’s fine, as long as we can get the exact same look in out final Flex application. But that didn’t work out either ..

1. The original graphic with the new color settings applied
2. FXG exported from illustrator
3. FXG exported from Catalyst
4. The original graphic without the new color settings

Here’s the code of FXG exported from Illustrator …

Here’s the code of FXG exported from Catalyst …

Note that this time both the FXGs are exactly the same except they still don’t look like the desired look drawn in Illustrator. Even if we use different color settings.

Now I noticed that Illustrator also allows exporting to SVG so I exported my original graphic as SVG …

1. Original
2. SVG exported from Illustrator

So that’s not perfect either but its much closer than any of the FXG output above …

When I looked at the code of the exported SVG …

Clearly there is more color detail in there, it has 10 gradient stops as opposed to only 3 in the FXG output we got, this explains lower fidelity of our FXG output .. so I translated this SVG manually to FXG ..

Here’s the original followed by the final FXG I created manually …

Not perfect, but fairly close.

Suggestion: Illustrator and Catalyst FXG export should not drop gradient stops

Since, Catalyst is still in beta, I think Adobe will probably fix this by the time it releases but till then you can use the SVG workaround if you run into a similar situation.

I had to convince our designer to settle at “fairly close” for now, but if this Designer-Developer Workflow thing has to work, we need to get better at generating the exact look a designer draws in his/her design tool, at the click of a button.

EllipticalArc is a FilledElement so it can have a Fill and a Stroke just like other FilledElements Rect, Ellipse etc.

View Example

View Source

I haven’t yet implemented some of the layout related functionality that other primitives like Rect, Ellipse etc implement … but it seems to work fine with basic layouts, which is what I needed for now. The class is hosted on Google code under the Apache 2.0 License, just in case someone wants to improve it.

Thank you to the Degrafa team for sharing their amazing work that saves me loads of time every now and then.

FlexMania is a Brazilian online event organized by Igor Costa. The event is focused on the Flash Platform and has a great collection of Flash/Flex/AIR related talks.

Although, most of the talks are in portuguese, there are some interesting english sessions as well like Laura Arguello on Mate Framework, Stephen Downs (a.k.a Tink) on Efflex and Iiley Chen on AsWing

I will also be presenting in english, my talk is “A Flex 4 Component’s Lifecycle” on Monday, July 6th at 15:30 GMT.

SLIDES AND CODE: The slides and code from the talk can be found here

Here are the slides and experimental code from the talk …

Here’s the code we played with to understand how frame rates work in the flash player …

Here’s the code we wrote with to understand the Elastic Racetrack …

Here’s the experiment to understand marshaled slices …

Download Slides
Download Source Code

The presentation was slightly long and I’ve already heard that some people found it boring but I hope that wasn’t the case for everyone

I would like to thank all the awesome people in the Flash/Flex community who have helped me understand all this by publishing some great articles and blog posts … here are just some of the articles that I’ve found very useful …

Ted Patrick on the Elastic Racetrack
Sean Christmann’s Updated ‘Elastic Racetrack’ for Flash 9 and AVM2
Ely Greenfrield on Building a Flex Component [PDF] (Thanks Ted Patrick for making it available on his blog)
“Diving Deep With the Flex Component Lifecycle,” by Brad Umbaugh and RJ Owen
White Paper by the guys at Development Arc on Component Lifecycle

Please do let me know what you thought of my talk and how I can improve it.

The talk will be an in depth walk through of the life cycle of a component in Flex 4. The Flex 4 component model (Spark) is built on top of Flex 3 component model (Halo), so we will also take a detailed look at the Flex 3 lifecycle.

I am not planning to do a feature by feature overview of new features in Flex 4, so it would help if you already know a little bit about that. These articles are a good place to start ..

Matt Chotin on What’s new in Flex 4 Beta
Joan Lafferty on Differences between Flex 3 and Flex 4 beta

Check out the event page for registration and other details.

Look forward to seeing you all there.

UPDATE: I’ve posted the slides and code from the talk here

Since I needed these in several skin files I did not want to deal with clunky Path elements which would’ve looked something like this..

So I created a quick AIR application …. that that converts the elements into AS3 classes that extend from spark.primitives.Path and look something like this …

This way all my path data sits in one place I can use this library of visual elements in a reusable way across several applications and changing something would be really easy. Also, unlike the generated code from Flash Catalyst (Thermo) all my components are not inside Groups which are fairly heavy components.

Watch this quick video of a detailed demo of how to use the tool …

If you think this is something useful for you to ….

Download and Install

Since I did this in very little time the code is quick and dirty but it works and is available under the Apache 2.0 License on Google Code so feel free to to modify for your own needs.

View Source at Google Code

An after thought was that this should probably not be called FXG to Component since the generated classes do not inherit from UIComponent but instead from Path which is a GraphicElement. Anyways, who cares as long as it does what its supposed to do.

Please do let me know if you find this useful.