What usually needs to happen on a project is a combination of some or all of the above. Not having a single point of reference for skinning creates quite a bottleneck.

From different approaches, two surfaced as having the best pipeline: Illustrator CS3 and Degrafa. If we are talking speed and ease of graphic design, I would now default to Illustrator CS3. For advanced skinning and interactions Degrafa holds first place.

Speed, of course, is a major factor. A lot of projects do not need advanced skinning, but just a step forward from useful but many times seen default Flex skins. By that I mean applying the brand guidelines of the company or product/service.

After a long time I gave Illustrator another chance and the CS3 version proved remarkably useful. Illustrator with Flex CSS that is.

My goal was to create the fore mentioned single point of reference for skins and I did it in Flex CSS. Good people of Adobe even made a script for Illustrator to speed things up which I gladly use. Process works fine without the script too (maybe even faster, but you have more skins to track yourself), and you can find a tutorial for that version here.

For the streamlined version you can find Illustrator scripts here (together with scripts for other apps) and you need to have a free Adobe account to download.

STEPS:

1. Download the Illustrator scripts from here. You can find the installation instructions in the downloaded archive.

2. Create your skins for various states of the component in Illustrator as you would do usually using all the wonderful features of Illustrator.

3. Convert your skins to Symbols.

      a. Open the Symbols panel in Illustrator (Window -> Symbols).

      b. Select a particular skin graphic that you have made.

      c. Click the "New Symbol" icon in the bottom right corner of the Symbol panel.

      d. Naming the symbol is important. For example, if you want to automate creating an "up" state skin for a button, you would name it myButton_upSkin. For "down" state you would select an appropriate graphic to create a symbol from and name it myButton_downSkin. So for every state you want, you would add an underscore and state name after the symbol name that needs to be camelCase.

      e. I would highly recommend setting the "Flash Registration" point to upper left corner to be in sync with standard flex registration point.

      f. If you want to have the symbol to scale using 9-slice approach, check the box labeled "Enable guides for 9-slice scaling". You can later go back to your symbol and adjust the slices position.

4. Now that you have made the symbol (and adjusted slicing if need be), you can export it by choosing:

File -> Scripts -> Flex Skin -> Export Flex Skin.

A SWF file will be created by name of your choice.

5. Go to Flex Builder and choose:

File -> Import -> Skin Artwork

6. Set up parameters in the dialog box like this:

      a. Select "SWC of SWF file" and point to the file you've just created in Illustrator.

      b. Select the folder you want to import it in.

      c. Click "Next".

7. At this window you will be prompted to select the skins that you want to import. No reason not to "Check All" here. For the selected skins you will now see the states of the particular skin in the "Skin Part" Column.

8. Click "Finish" and a Flex CSS file will be made with all the skins appropriately declared.

9. All you have to do now is to apply the name of a particular skin to your components Style name.

This skining approach has proven very fast and error free for me.

I'm enjoying the 9-slice scaling, vector graphic crisp scaling and mouse interaction only with visible pixels.

With RIA technologies, classic Interaction Patterns are only building blocks, not solutions. With raised possibilities, Patterns have become more complex.

So what are UI Interaction Patterns?

Wiki notes: “In interaction design/HCI, an interaction design (ID) pattern is a general repeatable solution to a commonly-occurring usability or accessibility problem in interface design or interaction design.”

In other words, it’s a high level abstraction of Interaction that can be applied throughout the Project as it grows and changes.

For example, Interaction Pattern would be definitions of handling screen transitions, button interactions, error messages, focus switching, refreshing data, status messages and in RIA case navigating maps, data mining, 3D space navigation, graph filtering and many other creative approaches to interacting with data.

Timing makes for good results

How does one approach this challenge in Project Management makes a lot of difference to outcome and quality of a project. Recently, while working on a project with an excellent Project Manager and colleague Alice Toth, we came up with a place for Interaction Design in project planing that makes a lot of sense to me as a RIA Developer.

While analyzing the project we were working on I noticed that I didn’t abstract the Patterns enough at the time we were adding small features at the end of the project.

I was giving too much focus to individual components of the interface and that was not facilitating incoming features from extending the application because they were all "unique".

Every time a new feature was introduced which is a given in Agile software development, I would have to spend time thinking about the Interface Interaction Design and how to incorporate it with the rest of the app seamlessly.

That felt like a waste of time. RIA interfaces, creative and unique as they are still have some patterns. Even when an Interface Component is a brand new idea, it still follows some brand new patterns.

While going over Alice’s good Project Management practices, we found a good spot to incorporate the UI Interaction Patterns Design.

Right after Application Features and User Roles and Scenarios are defined and at the same time as designing the Data Model and back-end Architecture. It would seem premature, but it has some great advantages.

Data Model and Interaction Design are far more correlated than it meets the eye. Some of work on the back end can be cut if the Interactions are defined. You get a better sense of which methods and requests do you really need and what will be up for extending in the future. You might catch something on the back-end  that needs to be done that would otherwise be unnoticed until front end development.

The biggest value of designing Interactions at an early stage is that you can have a more objective picture of priorities and still have a very abstract perspective which you can use to design broader solutions and in that way save time. If you gauge which Patterns can cover the most cases, imminent and potential, you can have more time to develop them to a greater quality.

This in turn makes for a good Flex Project class architecture that reduces the number of hacks and exceptions that solve small problems at a big cost of time.

First thing that came to my mind when I initially heard about the iPhone was the multi-touch possibilities that would start changing the way we create Flash/Flex interfaces (hopefully through SDK extension supporting multi-touch on Adobe's side triggered by iPhone release).

It looked very promising and natural to me in the beginning that this will be the route. Flash is a great part of the Internet experience and iPhone is a great mobile device for, among other things, Internet access.

Long time passed, and still all I can find on this topic is gossip.

Ranging from initial optimism:

iPhone Adobe Flash Support Coming
Mossberg: Apple working on Adobe Flash support for iPhone
Flash on iPhone is just around the corner
Adobe says Flash is coming to the iPhone

...to some doubts about the timeline:
Adobe Flash Coming To Apple's iPhone -- Maybe, Someday
Flash iPhone project stumbles: SDK insufficient

...to some doubts about the outcome:
Adobe bites its tongue after iPhone Flash jab
Steve Jobs: Flash Not Good Enough For iPhone. Is Microsoft's Silverlight?

...to advanced angles on the topic:
Flash on iPhone Political Calculus

After all this (and much more) gossip, I came up with the following conclusion: It has never been a better time to learn Objective-C.

If the Flash support ever pans out, I will be waiting and ready. In the meantime, it seams like a waiste not to apply all the interface development techniques learned through Flash/Flex development on iPhone and learn something new.

I dare to say that Flash/Flex developers should have an edge on at least the interface logic, and learning a new language should be on everybody's agenda from time to time.

In a project that I am currently a part of, we inherited Ruby on Rails from our client's system and project front-end was designated to be developed in Flex. RubyAMF came naturally.

I have been working with two other AMF frameworks prior to this: AMFPHP and WebOrb. My experience with both was that they are fairly hard to set up and once you go through that minefield, everything works excellent. No need to say that I am a great advocate of AMF in general. RubyAMF brings the same good old AMF but with a stunning ease and speed of development!

My colleague working on the Ruby side, Justin Ficke, introduced me to code and architecture of Ruby on Rails and I was impressed to see with what ease, precision and speed can one develop it.

Justin and I put a little test together of this architecture and here is a screen cast of it.

All the lovely custom typed objects and speed of data transfer are there. Beauty of it, appart from obvious benefits from AMF, is that the development process couldn't have been better and faster.

A big issue that was overlooked is support for mouse wheel event on Mac OSX. A pretty basic functionality you would think. If your interface is heavily relying on mouse scrolling, your audience on Mac's will probably have a "so how does this work" blank stare.

Google didn't overlook this in their implementation of Maps, but most apps I've seen online did.

There is a very nice and simple solution to this issue coming from hasseg.org and I find it very important to put this little effort in to maintain same look and feel of application interface across platforms.

Solution is executed with help from JavaScript. Mouse wheel events get passed to Flash player and parsed to simulate regular functionality.

A lot of praise to hasseg.org for coming up with and publishing working source code of this solution.

You can find the full explenation on this blog post.

Flash technology has gone a long way from simple vector animations. Today it has support for video and audio, 3d rendering and interaction, all kinds of advanced data visualization libraries, great components of all shapes, sizes and purposes.

What caught my eye lately is that there is a lot of 2D and 3D Physics engines being added to the list.
Physics beyond the obvious add a whole new level to user experience, in which I'm particularly interested.
Physics allow developers to create interfaces that are replicating laws of nature that a user can easily understand and has experience with.

Of course, from step one there is a danger of these tools being misused and thrown on top of interfaces for some make-up effects. That is not what I'm talking about. I'm talking about using physics to help the user understand the software interface and it's process by guiding him/her using these principles.

There are some basic and insightful guidelines and examples in an excellent article by Rob Adams called "Guiding with motion".

Here are some engines and examples that deal with 2D/3D physics in Flex/Flash:

ROXIK -
Bone example
Gravity boot
Interactive cloth

Box2DFlashAS3

Glaze
Example

Chipmunk
Domino smash
Sketches
The Machine
Domino pyramid

Foam
Example 1
Example 2

Ape
Example 1
Example 2

Motor2

Wow
3D picture
rope, box
cloth 01
cloth 02
cloth 03

SpringGraph

As a coder, I go over tremendous amount of information on daily basis. My case is no different than anybody's else living in the world today. Regardless of where we live and how we spend our time we are saturated with all kinds of information, a lot of it that we don't care about and a lot of it that we wish we had fast access to, if at all.

Ironically, computer technology adds to the problem more often than not. All that computational power is often just creating more data that we will never experience because there's just too much of it everywhere and all the time. Traditional techniques of consuming information are becoming too slow and narrow to handle this kind of pace.

We have all heard that a "picture speaks a thousand words". Doesn't that sound like an efficient way to consume information? Now, there are pictures and there are pictures.

There are pictures that strike a cord with you and there are pictures that leave you bland. Which one are you more likely to remember and allot the time of your mind?

Here are some libraries for data visualization in Flex/Flash as well as some artful experiments that I found to be good tools/examples of data visualization.

Flare
Flare is a very comprehensive library ranging from graph and charts to timelines and treemaps and then some.
Example 1
Example 2:

yFiles
yWorks offers the same graphing solution for Flex, Ajax, .NET
Solutions include DOM Tree, Graph Canvas, Drag and Drop, Collapsible Tree, GraphWikiand they are all very well documented.
Flex Examples

ILOG Elixir
ILOG Elixir offers 3D Charts, Gauges and Dials, Map Displays, Gantt Charts, Organization Charts, Treemap Charts and Radar Charts.
All demos can be found here.

SpringGraph
SpringGraph is a lovely Flex component that deals as its name says - a Spring Graph, which is a self arranging graph.
Example 1: Roamer Demo
Example 2: Molecule Viewer

Levitated.net
Levitated.net shows beautiful visual experiments with algorithms. Their business application is yet to be discovered.
Examples

Andy Zupkos blog
Andy is blowing the lid of Papervision3D, a 3D engine written in AS2 and AS3.
You can see his masterful explorations here.

Mathieu Badimon Lab
Mathieu has published a few eye catching experiments.

This example covers how to build a simple 360 degrees gauge Flex component. It has public properties that allow you to easily adjust the appearance of the component for colors, size, font size, guideline thickness and such. It also fires a custom "angleChanged" event that helps you integrate it with the rest of your app.

There's a little trigonometry involved, but it's straight forward. This component can be used as a base for further extending into your "complex" gauge component.

It's contained in a single "MXML Component" file so it's easy to deal with.

One thing to keep in mind when using it is to make sure that width an height of the component are the same, otherwise the layout blows up.

You can see the example here.

You can see/download the source here or by right-clicking on the example and selecting "View Source".

Here we have a demonstration to an age old problem in Flash (inherited in Flex) - the Preloader. I think that the Flex community has long ago grown bored with the default preloader, which I am very thankful to Adobe engineers for providing us in the first place. It's just that we keep seeing it over and over and over...

Another important thing that the default preloader naturally doesn't provide is some branding while the user is waiting for the loading to complete.

There are some great examples out there like Ted's and the one that I'm using as a base for this demonstration from Andrew.

Andrew's example allows us to have a lightweight preloader base that we can extend and solve the following problems that I think every preloader should:

- What is the status of loading - both numerically and graphically

- Some branding to show what are we waiting for that would involve some imagery, like a logo

- Possibility of actually making the preloader entertaining enough to keep the users attention

Problem in Flex more so than in Flash is keeping the preloader lightweight. So we have to achieve the visual appeal, animation, some basic text rendering without all the convenient native Flex components that would make the delay before seeing the preloader too long. So we have to keep it simple. Kudos to Andrew for publishing a great way to do this.

I would like to point out a couple things:

1. So we want to show the percentage loaded, right? Well, the Label component just won't work out. Label comes with following inheritance:

Label -> UIComponent -> FlexSprite -> Sprite -> DisplayObjectContainer -> InteractiveObject DisplayObject -> EventDispatcher -> Object

That is a good part of the Flex framework that we want to avoid for the preloader. Instead, because we just want to render the text, we can use the TextField object which comes with following inheritance:

TextField -> InteractiveObject -> DisplayObject -> EventDispatcher -> Object

And another thing is that we want to avoid any custom fonts in the preloader because that will surely blow it up.

2. Any imagery that we want to show up should naturally be in the single digit kilobytes to begin with. Photoshop offers a lot of ways to optimize the size of the image.

Than again, we don't want to use the convenient Image component because it comes with the following inheritance:

Image -> SWFLoader -> UIComponent -> FlexSprite -> Sprite -> DisplayObjectContainer -> InteractiveObject -> DisplayObject -> EventDispatcher -> Object

Instead, we can fill up a DisplayObject that comes with following inheritance:

DisplayObject -> EventDispatcher -> Object

To do this you:

- embed your small image in the preloder like so:

[Embed("Assets/Pathfinder_Logo_Blue.png") ]
[Bindable] public var Logo:Class;

- pass the Logo class to DisplayObject and add it to stage, like so:

var b:DisplayObject=new Logo();
addChild(b);

and then set it's size and position parameters.

We only want to show the image pixel, so this will do. We can still make our logo DisplayObject available throughout the whole preloader class so we can play with it a little, like making it follow the progress bar by changing it's X parameter.

The rest you can pick up from the source code, available here.

You can see the example here.

Again, thanks to Andrew, Ted and Adobe Flex Team.

The purpose of this demonstration is to use Yahoo Map and Papervision3D as a base for creating/importing 3D Objects with reference to actual locations on planet Earth using the Adobe Flex framework.

In this post I will be covering how to integrate Yahoo Maps AS3 API as an Interactive Material in PV3D 2.0 and solutions to the following problems:

- Security sandbox violation when using Yahoo Map as MovieMaterial (i.e. BitmapData.draw problem)
- Mapping Longitude and Latitude values to X and Y coordinates of a PV3D material
- Dragging Yahoo Map in PV3D (avoiding the map panning collision with PV3D)
- Simple gauge component from the ground up using basic trigonometry
- Simple tilt component again using basic trigonometry
- Making a visual component using Degrafa

Demonstrations of these solutions are packed in this air application for which you can also see and download fully functioning source code.

The application was built in Flex 3 using following API's:

Yahoo Maps AS3
You can download it here.
Also don't forget to acquire a free API key to run your app online. It is not necessary for local testing in debugger through Flex.

Papervision3D 2.0 (Great White)
You can find excellent tutorials here.
Source is available as a SVN repository here.

Degrafa
Official site: http://degrafa.com/
SWC is available here.

Security sandbox violation when using Yahoo Map as MovieMaterial i.e. BitmapData.draw() problem

When processing a MovieMaterial, PV3D uses the infamous BitmapData.draw method in MovieMaterial/bitmapDraw. This is a problem because the method will not yield a result if the origin of BitmapData is not in the same domain.
In case you have access to the server that you are loading the image data from, you can solve this problem by adding an appropriate crossdomain.xml file to that server.

This article from Adobe’s Deneb Meketa covers security updates in Flash Player 9 including very important changes to the crossdomain.xml structure. Whenever you have a Flash security based headache, this is a good starting point.

In case you can’t put crossdomain.xml on the image origin server, as is the case with Yahoo severs, you are supposed to use the checkPolicyFile property of the LoaderContext class, but that works only if we are directly loading the image data ourselves.

In our case image (map tiles) loading is being handled by YahooMap.swc and we don't have access to the aforementioned process. We could do an override, if we knew where the darn thing was, which I don't.

Sadly, the only solution for this problem that I could implement was by using Air, which is why I'm sharing this as an Air app rather than via a browser version - Air is much easier to deal with when it comes to security. As far as I'm concerned, problem solved for now.

I did hear some gossip that this will be sorted out in Flash Player 10, but who's going to wait for that?

I still haven't quite given up on this issue, as it is highly annoying roadblock to some cool browser based projects.

Mapping Longitude and Latitude values to X and Y coordinates of a PV3D material

This is done very straightforwardly by capturing the YahooMapEvent. It goes something like this:

private function getAllCoordinates(e:YahooMapEvent):void
{
clickedLong=Number(e.data.latlon.lon);
clickedLat=Number(e.data.latlon.lat);

clickedX=Number(e.data.point.x);
clickedY=Number(e.data.point.y);
}

You add a listener with this line:

yahooMap.addEventListener(YahooMapEvent.MAP_MOUSE_CLICK, handleMapClick);

Although this is a very simple thing, it allows you to convert Latitude and Longitude to the X and Y coordinates of the referring Material and you can play with it from then on. For instance, I used it to map flight trajectories based on GPS data (including GPS altitude) in 3D space. Fun stuff!
Dragging Yahoo Map in PV3D (avoiding the map panning collision with PV3D)

Dragging a YahooMap is super simple using the Yahoo Map API. It’s a convenient single line:

yahooMap.addPanControl();

When the map is processed by PV3D and you try to drag it, it starts jumping all over the screen, probably because of some event collision with PV3D. Luckily, we can get around this one by making our own custom dragging method as follows (note that this only describes the concept, the working version is in source):

private function mMove( e:InteractiveScene3DEvent ):void
{
// This code is run when the mouse is moved on the plane.
movieParent.x = mouseX -e.x;
movieParent.y = mouseY -e.y;

if(Application.application.stopMovingMap==false)
{
Application.application.yahooMap.panControl.panEnabled=false;
f=true;
}
else if(Application.application.stopMovingMap==true && Application.application.isAnythingBeingDragged==false)
{
if(f)
{
oldX = e.x;
oldY = e.y;
f=false;
}
Application.application.yahooMap.panControl.panEnabled=true;

newX=e.x
newY=e.y

xDiff= newX-oldX;
yDiff= newY-oldY;

Application.application.yahooMap.setCenterByPixels(new Point(xDiff,yDiff));

flightsContainer.x = flightsContainer.x-xDiff;
flightsContainer.y = flightsContainer.y-yDiff;

oldX=newX;
oldY=newY;
}
}

You can look at the missing variables and event listeners in the source.

Simple gauge component from ground up using basic trigonometry

What I wanted to achieve was to rotate the 3D cube on which the map rests around the Z axis. Simple, right? So I used a VSlider component and gave it a range from 0 to 360 to capture the angle of rotation. And that’s where problems started. When the 3D map is under VSlider, both start acting up and jumping across the screen. All the issues in this app smell of the same thing - something to do with Mouse Down and Mouse Move events in PV3D. I’m still looking.

Being annoyed by the problem I started thinking about other approaches and a gauge component came to mind as the best visual representation of the functionality I was trying to achieve.

I naturally tried using some of the ready made gauge components available online, but with all of them I had some kind of issue. Either it was the inability to skin them properly, or to set the scope to full 360 degrees.

In the end I decided to refresh my trigonometry knowledge and made the component myself.

At the same time, this solved the VSlider going crazy issue. Why? I’ll post it when I find out.

Simple tilt component again using basic trigonometry

When in Rome... I used the same principle as in simple gauge component to add to user experience and visually show the angle that the 3D map is tilted by.

Making a visual component using Degrafa

Degrafa is such a priceless framework. Just in case you don’t know, it’s used for manipulating SVG’s (vector based graphics) in Flex 3, giving you a lot of power in customizing your visual components. It is the best solution for mapping in Flex that I have ever seen!

In this particular app it wasn’t absolutely necessary but it’s there to visually enhance the arrow button. I really wanted the arrow to look like it does in the example. Look at the source to see the details. Actual SVG data was created in Illustrator.

All in all, combining API’s is certainly going to get you into trouble. But combining ideas can amount to a sum greater than it’s parts. I love it.

If anything is not clear to you, look at the code to see all the in’s and out’s. If it’s still not clear, shoot me a message.

"This greatly lowers the bar to using Flash as a photo editor, document manager, customized application experiences, marking up content and saving locally, all without the need for server side script."

And then: "It is only beta (Flash 10) but there are great market opportunities to prepare for when this launches."

Flash is just getting better.

Also, do check out the other great posts from http://drawlogic.com

This prototype is in part being used to test performance of Flash Player running the excellent PV3D. So far it holds pretty good.

PV3D has amazing capabilities. That said, it's also a work in progress so the API is not super clear, but it's well worth the hassle. It's open source so you can always look at the source code to figure out something troublesome. It doesn't take long to get started either because of the well documented common steps.

Of particular help was http://papervision2.com/ where you can find all the necessary first steps to take like:

- Getting the PV3D 2.0 source

- Extremely helpful base template that sets up all the basic elements that you can easily build on

- And the priceless tutorial that sets you off on 3d interaction path (i.e. the fun part).

On this prototype I was primarily working with LineMaterial and MovieMaterial (for interaction), then Line3D / Lines3D which proved very easy to build but not so easy to manipulate.

For such purpose it is a good idea to get to see DisplayObject3D class and understand how containers work in PV3D. More about that in Part II.

Performance can be fine tuned but it's necessary to keep in mind at every line of code that there is a ton of processing going on all the time and you want to build and manipulate your objects sparingly because otherwise you will see your browser locking in a millisecond.

Part III will cover collisions between Yahoo Maps AS3 API and PV3D. In one sentence, there is nothing you can not solve through a well arranged series of Events and this is applicable to any AS3 situation.

Part II next week.

Although there are many sources on the internet on this topic and FWA doesn't represent Flex apps like http://flex.org/showcase/ does or the fantastic Papervision3D, it still gives an excellent overview of the latest achievements using Flash technology.

At FWA I saw some of the most innovative user experiences ever, something I dare to label cutting edge. To add to that, best Flash material doesn't necessarily have to use the latest classes to be fabulous. There are sites listed there that use some basic Flash techniques and have a far better user experience than the latest ones with all the bells and whistles.

Now, nobody is perfect and FWA does misfire every now and then with their reward, but in general, I'd say that it's the best single spot on the internet to see where's Flash at.

+ =

I was very wrong about Mac. And I was very wrong about coding on a Mac. In a nutshell, my productivity went up considerably since the switch. On a day to day basis, I use primarily Flex Builder, then Dreamweaver, Flash, Photoshop, Illustrator, an FTP client and as of today Snackr.

Flex Builder 3 acts exactly like it does on a Windows machine, with all the blessings and bugs included. No difference at all (I've been using Flex since 2.0 was released on Windows). Productivity boost comes from OS's fantastic interface which allows me to switch windows, not get bothered by focus steeling, run multiple screens with ease, find stuff easily (spotlight), organize files easier and more.

I use Firefox 2 as my primary testing browser, although Safari works just as well. I used to say: "I don't test for Mac, who cares, it's a small market anyhow..." but now I get to test on a Mac "for free".

I initially wanted to install a Windows VM, but so far I don't see the need.

So if anybody wants to code AS3, Mac is the way to go.

Usually you get around it by having to publish your content twice. Once for the user, a RIA experience, and once for the crawlers, some dynamically generated text in XML or HTML, so that it can be properly read and indexed. For sites that need visibility (and most do) this created "extra" work. No work is extra in solving a problem, the extra part comes in price of it, ergo the snag.

All that might be at an end. Google announced on their blog that they have been "..developing a new algorithm for indexing textual content in Flash files of all kinds, from Flash menus, buttons and banners, to self-contained Flash websites."

Sounds good, doesn't it? Well let's give it a test drive. Bellow is a link for a Flash file that loads text from an XML file residing on another server. Let's leave it a couple of weeks to simmer and see if we can find this page on Google by "unique" string of keywords from this Flash file.

Cheers to people from Google for making this happen!

Google Flash indexing test link

Web standards are not something particularly interesting to me as an Adobe Flex developer. After all, one of the reasons I've chosen this technology is that I can develop web applications without those standards limiting my imagination.

Adobe Flash technology is in part setting the standards of what Web 2.0 (and Web 3.0) really mean. Web experiences made using it are on the high end of what's available today and that's where I want to be.

One major lacking of this technology is that it is not utilizing web standards which makes some tasks harder, like making sites and apps search engine friendly, for example. I personally decided that its benefits significantly outweigh the problems.

Whatever one's perspective, I think that lack of full implementation of web standards causes a huge waste of time for people developing content for the web. Until that happens, I choose to ignore them altogether and use a medium that gives the same results on all platforms. To the best of my knowledge, content developed in Flash years ago still looks and acts the same in all browsers and operation systems.

You can find some great insight on what might be the future of web standards in Nik's article. In the meantime, my money stays with Flex.

To name some:

• flexlib, library of components
• spring graph, by Mark Shepherd
• Flex Exchange (hoping it gets bigger)
• ILOG Elixir, impressive and commercial
• Flex IFrame, a lifesaver
• FX SlideShow

Here's two links with a comprehensive list of Flex components from flex.org and FlexBox.

Beware Flex developer, this is a double edged sword. It's very tempting to jump in and grab components left and right to compose your custom application. In my experience this randomly has a happy ending.

First off, you have to get to know your component really, really good. Really. By now, I can group the related problems into following:

• Using only a part of the component's purpose
• Components with bugs
• Components with performance issues
• Components with a closed source (SWC's)

Using only a part of the component's purpose
Good rule of thumb is not to have anything in your project that is not actually being used. You'd think it wouldn't matter but more often than not it does. Typical problem is performance. You want to get the best bang for your buck. By buck, I mean computer resources. By bang, I mean perceived value. All those methods and properties that you are not using are still being initiated and are using system resources to do so, but you are not exploiting all that crunching. Repeat that component a few times in your project and the problem grows with it. And often it grows to a point where it impedes the overall performance of your application.
You would solve this by overriding the stuff that you are not using. If the component is complex, this requires a lot of work. Sometimes more work than it would take to build it from scratch yourself. But don't restrain from this solution because of its hardship because this is one of the best ways to truly master the Flex framework.

Components with bugs
A lot of components look good on a screen shot but you always want to see a fully working example of a component before you use it. It happened a number of times that I took the time to implement something that I thought was awesome, only to see after all that work that it doesn't really work as advertised. If you're going to fix any bugs, they better be yours because you will use more time to analyze somebody else's work and only than start with debugging.

Components with performance issues
Some components actually work as advertised but at a big cost. Remember, you are most often browser and Flash Player bound. You only have so much to work with. If the execution is lagging, there goes the user experience. So ideally you want to see your potential component under real working conditions beforehand. What happens to the component if you load it up with the real amount of data that it is going to be using? Is it still responsive as it was with your small test data?

Point being, first test your component under extreme conditions so you get to know it's performance boundaries. This is most often noted when trying to stuff Builders Charting components and (Advanced) Data Grid with too much data. Inquire in detail upfront what are the ceiling expectations of a component.

Components with a closed source (SWC's)
This is a real tricky one and should be avoided unless you bought it and it comes with a warranty. The reason is obvious – If anything is wrong with it, you're stuck. There is nothing you can do about it. Ask yourself, what if I want to override something? Is the documentation of this component really complete? Is something going on behind the scenes that I might not be aware of? Basically, you really need to have trust in the source of that component and accept that you are rolling the dice.

In general, I suggest trying to build your own components whenever possible because only you know what you exactly need. Flex documentation has gotten significantly better and there are examples online for most problems that you would encounter in your daily work.

Try not to start with extending an already complex component unless you're really sure you're doing. It's hard to track all the ins and outs of something like that.

Get to know the Flash Player! That is how you deliver your work and it works significantly different than standard browser bound solutions. There are some great articles about it, and boring as they may be, they are the very essence of Flex development.

In the end, the advantage of Flex platform is not so much in the fact that you have all these ready made components but that you can create and expand your own intricate framework however you please.

Kudos to Flex developer community that is sharing their work and experience! 

By great power, I'm talking about the available possibilities when using Flash to create user interfaces. They are limitless. As a consequence of so many possibilities the default options are rather unusual. Flash developers should incorporate good practices as the ones mentioned in Brian's post about user input and don't reinvent the wheel where it's not of benefit. But the fact is that you can do amazing things with Flash technology and the only thing you have to know is exactly what you want.