For instance, I always have Action Script Language Reference, Wikipedia, some library API site(s), Gmail and a dozen other ones open + the debug version of the app at hand.

So what used to happen when you but a breakpoint in Flex Builder with all these tabs? They would be unavailable and any process happening inside of them could not be relied on. Since not all code runs well on first attempt, if the app crashed while testing ( think 3D, data intensive apps, etc.) the browser and all the tabs went down with it.

My solution so far was to use Firefox as a development browser and Safari ( since I'm Mac based ) as a browser for references and everything else. For crashing resolution, Firefox has a nice "Restore" option but it's not fun waiting for 15 tabs to reload.

So Google Chrome recently came out for Mac. It didn't impress me on Vista so I didn't care much. I guess I was in between of curious and bored so I decided to give it a spin.

What a pleasant surprise to see every tab running in a different process. My workflow feels so much better now that I'm not afraid that a bad line of code is going to take down my whole browser.

I've heard that IE8 also runs tabs as different processes but I'm not crazy about returning to development on Windows. I did try out Chrome on Windows 7 as a result of the Mac test and all the issues I've seen the first time around have been addressed. Kudos to Chrome development team.

Let's not forget to mention all the features that are missing on Google Chrome for Mac, primarily the lack of Bookmark Management, but Google Bookmarks or any online bookmarking service will do for now.

I can not wait to see more development being done on Google Chrome for Mac and it getting out of beta. I will not uninstall Firefox anytime soon but as a Flex developer I give Google Chrome for Mac high scores for beta.

Related posts:

1. Why Chrome OS is the Future of Netbooks
2. How much Excel can we get in Flex?
3. Using Adobe Flex Builder 3 on a Mac

The market says that about 15% of people today are using IE6 which is 8 years old now.

Nothing to be surprised about.

Recently, we at Pathfinder were presented with statistics of usage for a desktop software created in-house showing the biggest drop in workflow at software installation reinforcing the point that people have a hard time installing software, so why would they go around installing a new browser when they already have one? Most people are under the impression that "the site" or "the internet" doesn't work and not the browser they are using and there's nobody there to tell most people what the problem really is.

Microsoft is not going anywhere and it didn't listen to it's own developers and users pleading for mercy and help. So why would anybody go through the horror of using or developing for IE6 when there a great browser options today that implement HTML and CSS standards comprehensively (including IE8 which is not bad)? Because they don't know any better.

That's where people who do know better should step up and offer insight. "Oh, but that's too much work and I don't care about educating people about browsers". Fellow internet dweller, next time you are writing a hack for IE6 and wasting your creative energy, write an email to your mother, friend or cousin and inform them about other browsing options and tell them to pass the word. That small ripple will have a bigger effect than all your hacks and related whining put together.

Or - to make it the least effort possible (because we don't want anybody to strain a typin' finger ) , you can use this code to inform people about their choices, that they are possibly even not aware of.  Maybe even, and I'm just talking crazy here, offer a suggestion.

JavaScript is adopted from Microsoft's article "Detecting Internet Explorer More Effectively" which is exactly what we want to do.

What to pass in the message is a thing of your personal flavor and a good place to really get creative.

Here is my lite take on it.

Thanks to my colleagues from Pathfinder on inspiration who have put together a similar but way more creative informing system on one of our internal applications, not to mention the the development cost reduction it resulted in.

Related Services: Ajax Rich Internet Applications, Custom Software Development

Related posts:

1. IE6: The zombie browser
2. .NET Web Browser Control Gotchas
3. GWT 2.0: Cool Beans on In Browser Development Mode

Sketches are considered a throwaway byproduct of the design process. What I would like to point out is the value of sketches and why they should be given an official slot in development process.

Since Pathfinder does Agile, understanding the value of user based testing comes naturally - "Release early, release often", right? How quickly can you release a sketch in order to get that ever so valued feedback? That's the key to reducing cost through sketching. By reducing cost you can make a better product within a given budget.

To really get the best of this "quick release testing", there are several things that need to be understood upfront:

1. A sketch should be done with pencil and paper or equivalent. There is no quicker medium for visually explaining an idea.

2. Making a sketch should take seconds. otherwise it's not a sketch.

3. Everybody can make a sketch. You don't have to be a visual designer. Don't try to make it into an art piece because that's a misguided effort. Leave details for when you figure out the basic idea. The point is that at least you understand what you've sketched.

4. A sketch is not a wireframe. They both have  different purposes: sketches should be used to explore and "test" ideas cheaply, wireframes should be used to explain IA.

5. Paper will take anything. When sketching, one has a rare opportunity to think without boundaries. Don't take technology, standards or any other consideration into account when sketching, nothing but  user end goals. You would be surprised how apparently challenging interfaces can be produced efficiently if developers get to understand them really well.  A good sketch is the beginning of that process.

6. Without fail, sketches generate discussion because of their associative power. Make more sketches and you will have more discussion. The more aspects you discuss, the more unknowns you will discover. The more unknowns you cover, the less money & time you will spend trying to wedge a square peg in a round hole.

It's an interesting exercise to organize sketches chronologically and see the progress of an idea. A lot can be learned about what you didn't know at the beginning and you might consider from the start the next time.

My hope is that in the near future visual interfaces will have to be bound less to existing standards for ease of production.  This would create a need for visual interfaces not yet seen which makes them exploration for which plain old sketches are the best tool.

Related posts:

1. The Art of the Thumbnail
2. Developing Good Wireframes Ahead of Visual Design
3. The Hidden Power of Canvas

Before anything else said, Axiis is a brand new framework so I have to give it some credit if all the bells and whistles are not there. What intrigued me about it in the first place is that Axiis is heavily relying on Degrafa, a well proven declarative graphics framework that I have a lot of good experience with.

After looking at Axiis examples, here are my first impressions of how it stands against Flare.

Firstly, they are both open source. Needless to say, this goes a long way.

Axiis, unlike Flare, is solely Flex based because of its reliance on Degrafa. Not that I'm crazy about doing data visualization projects in Flash, but it is a good feeling to have options.

Axiis code looks better structured and organized - at a first glance. While it is a little bit tricky to organize Flare code, I have made it a standard to use it in conjuction with PureMVC, (my favorite MVC framework) and that setup makes it much easier to deal with Flare code. Code in Flare examples looked scary at best when I saw it the first time. Axiis code in the examples they provided is mostly neat MXML, but there is only so much of MXML per component that I'm willing to look at. My guess is that combining it with an MVC framework and AS3 would be a nice thing for me to try and see how that workflow looks like.

Flare was not quick to jump into in my experience, but well worth the trouble. Jumping into Axiis with previous knowledge of Degrafa took a really short time. Although there is example code for Flare, I didn't learn a lot from it because of the very different coding style from what I generally do. I learned most about it from forums, fidgeting with classes and somewhat reading through the source code. Axiis example code is clear as day and a ready source for your first Axiis project.

What rocked my world about Flare to begin with were the layout transitions and how well they performed with larger data sets. I haven't seen that in Axiis examples. I'm not sure if I should care about transitions that much but I think that it is not to ignore when it comes to interactive data visualizations. Performance testing is the first thing I'm going to pay attention to when it comes to Axiis.

So at the end I will do a prototype in Axiis to see how is it to work with and how well it performs. It definitely seems very promising but I'm not going to drop Flare anytime soon.

What will be hard to top about Flare is that I keep finding new ways to do things with it and new wonderful expressions made possible with its endless flexibility.

Related posts:

1. Flare on PureMVC in Flex example
2. Flex Camp Chicago ‘09 Community Showcase Presentation Summary
3. Data visualization and the art of conveying information

Before anything else is said, I am truly convinced that any creative work should start with a sheet of paper and a pencil. By creative, I mean any work where you have to come up with something, well, new. When creating wireframes for an enterprise piece of software that idea is restricted to initial brainstorming sessions and pretty much nothing else since you have to move to a computer for the sake of efficiency. And there is so much more work to be done. And revisited. And refined. And shared. And packaged for the final deliverable. When you add Agile process to the equation (which I think is a win right there) you will revisit your wireframes a lot of times.

Just to paint an example, let's say we have about 20 wireframe screens. And let's say that in the course of creating requirements, somewhere towards the middle of the road we decide to change some element in our application header that is repeated over the 20 pages. Ouch! This can be a cumbersome task if you are not using the right software because you would need to make the same change 20 times. Now imagine you have to do it daily because refining and testing the idea is the purpose of creating wireframes in the first place. Did I mention that there might be a lot of wireframes?
Right choice of software for creating wireframes is very important because if one doesn't  think it through, it can balloon the time needed to maintain them by several hundred percent.

I used to create wireframes exclusively in Adobe Illustrator, but on the latest project, I switched to Omnigraffle 5 because there are a number of people working on the wireframes besides me, and I thought that it would provide greater collaboration tools, plus there is the availability of its widely known stencils created by other UXD people.

Before using Omnigraffle, I thought that Illustrator was a good option, but even greater is the combination of the two to take advantage of their strengths.

Stencils
Stencils are also extremely important when you have multiple IA’s on a project because they provide a way to deliver uniform material.  However, while you can find a lot of them freely for a lot of different purposes, they may not necessarily support your purpose, which means you’ll need create a new stencil and add it to your Stencil Library.

Drawing vector graphics in Omnigraffle feels like having one hand tied behind my back. My guess is that Omnigraffle is not meant for detailed vector graphic creation.
This is where synergy of Illustrator and OmniGraffle  shows the best. Create your symbols/stencils in Illustrator and easily import them into Omnigraffle by first exporting them as PDF from Illustrator. Omnigraffle picks up PDF and retains the vector editing capabilities. That gives me a great sense of relief because with that option I can create my own stencils far detailed and easier and they’ll give a polished edge to my deliverables. In addition, I now have a stencil library the entire team can share so all the wireframe elements are uniform, regardless of who created them.

Single point that a spoiler is that when you update/edit a stencil in Omnigraffle it does not propagate to wireframes where it is already placed - you need to manually swap them. That to me sounds unacceptable for an efficient workflow. Illustrator has Symbols, Flash has a Library of Movies, Flex has components and so on. You edit the object in the library and that change propagates to all the places where the object is placed. I’d really like to see this feature added to OmniGraffle 6.

Shared Layers
Stencils not updating automatically in OmniGraffle is not such a tragedy because of the Shared Layers option.
From OmniGraffle help: You can share a layer between multiple canvases. That way, whenever you change the layer, it affects every canvas that shares that layer.
So you still have to swap out your edited stencil but you need to do it only once vs. 20 times.
Shared Layer concept doesn’t compare one to one to a library of stencils because a shared layer implies shared coordinates too which might turn out to be more that you bargained for.

CONCLUSION

OmniGraffle on its own is a good tool but in my opinion an incomplete one.  If you prop it up with Adobe Illustrator, you get a truly good solution. Add a file versioning system and now you can work with a piece of mind . Since OmniGraffle folks seem to be adding nice features in each version I’m already looking forward to the next one.

Related posts:

1. Developing Good Wireframes Ahead of Visual Design
2. Exactly What are Wireframes?
3. Skinning Flex with Illustrator CS3

Optimizing Flash performance is certainly the most boring part of Flash Platform development but it's a cornerstone without which you, the Flex developer, can not do without.

An app is worth nothing unless you provide that effortless flow of interaction at all times.

There is not too much information on this topic as it is not the most interesting one but here are some simple guidelines that have helped me tremendously over the time, as well as a few great papers.

Firstly, one simple rule: Don't try to do too much at the same time. As a RIA developer, figure our a way to engage the user usefully while you spread out the workload so the app doesn't choke. Remember, we are dealing with people. People don't need to have something done faster for 14 milliseconds, they need to know what's going on.

Second simple rule. I know we are all developing on flying fortresses of computers because we need a lot of juice in development. But start testing early on a crappy machine. Not that your end user will necessarily have a crappy machine but it will show tell-tell signs of where the app might need some improvement.

Than for Flex Builder users, do use the Profiler. The more you use it, the more it will make sense and after a while you will start seeing some really useful information that you might have not found out about otherwise.

Other than that, read these articles. They really helped me a lot to understand the way Flash Player works and plan accordingly in the shortest time.


Optimizing Flex Application by David Coletta

David makes a great point: designating between improving actual performance vs. perceived performance. That point is worth gold. Also provides excellent examples/solutions for particular problems.


Garbage Collection from Alex’s Flex Closet

Hardcore nuts and bolts of garbage collection. Look for the link to ppt.


ActionScript 3 Performance Tuning by Matt Chotin

A great overview of what Flash Player does with your code.


Some Actionscript 3.0 Optimizations by Dennis Ippel

Apart from some really nice examples, there is a list of references for Flash optimization at the bottom of the post.


And at the end, seeing is beliveing. Try these suggestions and see for yourself what makes a difference.

Related posts:

1. Flash Player on iPhone gossip
2. Mouse wheel (scroll) Event in Flash Player running on a Mac
3. Flash Technology vs. Flash Developer

Now we have a new player in Flash Remoting arena - ZendAMF. Why should anybody care when AMFPHP was just fine?

A few reasons.

1. First of all, both come from Wade Arnold, who has provided the Flash community with these custom tailored, top shelf, free, Flash Remoting systems.
As far as I’ve noticed, Wade is putting his time now in ZendAMF which is a tell-tell sign to begin with.

2. I really like the custom class mapping in ZendAMF. It offers quite some flexibility in comparison to AMFPHP. Options are explained (options - wow!) under "3.2.4. Typed Objects".

Of the three approaches, I personally prefer the setClassMap method in the bootstrap file because it provides me with a single point of reference.

3. It's a part of a PHP MVC framework called Zend. Not that I have tried it out much so far, but it sounds appealing that there is a MVC framework that you can rely on behind this.

4. Once you get through all the quirks, it is really easy to set up. The major issue that I had was making PHP files always processed as PHP5 which is necessary for the Zend Framework to run.

I didn't know that at the time so I was cursing away but eventually I found this little line for .htaccess file that did just that:

AddType x-mapp-php5 .php

Otherwise, Zend setup is easy as pie and you can read about it here.

5. Lastly, Adobe supports it. Sure sounds good.

Here are also some video tutorials that might be useful to start with:

Zend_Amf-classmapping

Getting Started with Zend AMF (Zend_Amf) - Part One

I'm curious to hear opinions about ZendAMF as I'm about to adopt it as a standard in production.

Related posts:

1. Google learns to crawl Flash
2. Using Flex Code Generator (FCG) with Flex & PureMVC
3. Flash Technology vs. Flash Developer

Spreadsheets are necessary because people use them because they know how to use them. It is a straight forward interface that can yield good in high complexity situations.

Now most people want to use them online. And luckily there are plenty to go around.

EditGrid , Expresso , ThinkFree , Zoho and Google Docs to name a few. So why build another one in Flex?

Integration, for first. It would be much easier for Flex developers and cheaper for Flex shops to have a component or an API to handle this task easier and faster.

Further, interaction design is very important for user efficiency and you can do a lot there to improve on a vanilla spreadsheet. If the actual spreadsheet wasn't based on Flash Platform, how would you as a Flex Developer handle the interaction development, if possible at all?

So we need them and we need the in Flex too. There is something cooking in this area too.

Idubee has claims to be working on it, but there example link was not working when I was checking them out. I will be back to see if that changes.

Rouge Development does have a working example, albeit a not very complex one. But - it's working good and it's a step in the right direction.

blist which is in beta suprised with their level of detail. It has a very nice amount of functions and plenty of examples and templates which is a victory in itself. I just opened an account and will be checking them out more.

If you know any Flash/Flex based spreadsheet component, library or anything similar, please leave a comment.

Related posts:

1. Flex Camp Chicago ‘09 Community Showcase Presentation Summary
2. Using Flex Code Generator (FCG) with Flex & PureMVC
3. Flex Gauge Component Example with source

Here is some follow up information from the Flex Camp Chicago '09 Community Showcase presentation.

Beer Hunter

Technologies:

• Adobe Flex
• Ruby on Rails (RubyAMF)
• Degrafa

Flight-Tracking

Source and other resources for this prototype can be found here.

Technologies:

• Adobe Flex
• Papervision3D
• Yahoo Maps
• Degrafa

Pathfinder-Development.com

Technologies:

• Adobe Flex
• TweenMax
• Google Analytics
• PureMVC
• Degrafa

Related posts:

1. Using Flex Code Generator (FCG) with Flex & PureMVC
2. Upcoming Conference: FITC Chicago 2008, June 22-23
3. Hedge Fund Analytics in Flex

Out of all visualization frameworks for Flash Platform that I came in contact with, Flare is looking like the most customizable. I also like it's structure. At first I didn't, but now I love the fact that Visualizations are based on Sprites. I find that good for performance and transitions. You have to do a little extra work, but you will be happy with the result. All in all, I'm sold on it for now.

I was happy to see that PureMVC plays well with other kids (frameworks). In this example you can see among other things:

• How to run Flare on PureMVC
• How to dynamically register Proxies and Mediators

Now I'm not saying this is the best way, but a prototype that I'm working on is doing really well with this approach.

One important thing missing in this example is removing Proxies and Mediators when you delete an object. The principle is exactly the same as is for dynamically adding them, so I didn't go into it.

I would be very curious to hear any comments on this approach.

You can view/download the source here.

Hold Control(Windows) or Command(Mac) and click on a node to add a child node.

Related posts:

1. Using Flex Code Generator (FCG) with Flex & PureMVC
2. Flare vs. Axiis
3. Griffon and a PureMVC Plugin: Some Initial Thoughts

Starting out with PureMVC is not a particularly easy task. It is a good thing that there are decent documentation and examples, at least for AS3. At first when I read the documentation, it made sense only on a high level, but translating that high level understanding to code right away was out of the question. I solved this initial sticking point by looking at a couple of AS3 examples like CafeTownsend and EmployeeAdmin, where you can see how the framework works on the right size demo app, not too big and not too small.

One of the things that you will first notice is a constant repetition of code when creating your Mediators and Proxies. Nothing bad about it, it's all for a good cause, but it's extra time. Flex Code Generator (FCG) by David Deraedt is an excellent tool that saves you time by automatically doing the obvious. And more.

• It creates Mediators and Proxies.
• It can create AS3 Value Object out of PHP, Java or C#.
• It can create AS3 Commands and Business Delegates out of your Remote Service files.
• It can publish AS3 files you made directly to your development environment.

The greatest thing about it is that it has an extremely easy to use interface. Like any other code generator, it can not do all the work for you. That is your job. But for the part that it does -- and it's the laborious part too -- it does it well. I have read comments about bugs but I haven't experienced them myself yet. The author of the project is not thinking of taking this any further than it is at the moment because Adobe seems to be picking this issue up. You can read about this more at the bottom of this page. Until they do, FCG is a great tool to use to bump up your Flex productivity with PureMVC. Kudos to David for making it available!

Related posts:

1. Flare on PureMVC in Flex example
2. Learning PureMVC the Hard Way (is there any other way?)
3. PureMVC, Spanning the Platform Spectrum?

Libraries for Flash and Flex can be downloaded here. I used the one for Flex called analytics.swc.

Installation is as simple as dragging the analytics.swc file into the libs folder in your project.

Once you do that, you have the FlexTracker MXML component available. Setting up the parameters for the component is also easy.

One parameter that I would highlight is visualDebug which if set to "true" provides you with a debugging mode where you can easily see what kind of page views and events you actually are tracking, which shortens debugging time in comparison to the traditional approach tremendously.

The library is accompanied by very good API documentation that you download together with the library. And like all good things in life, it's free : )

Now the down side. The library is pretty darn big! It's 100kb on disk and turns into about 50kb when compressed in a release build. That doesn't sound like too much, but if you are fighting for every kilobyte in optimizing your app, this "spike" in size isn't welcome.

In conclusion, I think this is an excellent solution for Flash Platform web usage statistics. Basically you get out-of-the-box functionality, zero learning curve, very useful data, maximum flexibility and you just have to make peace with a few extra kb.

Additionally, no bugs noticed so far.

Related posts:

1. Pathfinder releases version 1 of its Flash Platform microsite (codename Mica)
2. Google learns to crawl Flash
3. Hedge Fund Analytics in Flex

You can see the site here. Come often as it will be updated on a regular basis.

The goal of this site is to shed more light on what is it that we do here at Pathfinder with the Flash Platform.
We would be very grateful to hear feedback about the site from any perspective.

The Site was developed using Flex Builder 3.

We were focusing on several things:

• Presenting our work in a manner that is fast and easy to consume
• Fast loading times of site and content
• Maintaining the same experience on any screen resolution, major browsers and OS’s
• Testing SEO optimization for Flash Platform
• Uniformity and reusability of interaction effects
• Ease of dynamic content maintenance

Presenting our work in a manner that is fast and easy to consume

We decided to present our work mostly using screen casts of apps being used. We thought that this would be the quickest way for our visitor to get a good taste of our work.

Fast loading times of site and content

We used Amazon's Cloud Front CDN to store streaming video content.  Setting up cross domain permissions was a little tricky.  Images loaded from Cloud Front would have a slight delay loading right after initialization of the site, otherwise they acted great. We're still looking into this issue as we think that using Cloud Front is potentially a great approach for storing content like images and videos, at a substantially lower cost than Akamai or Limelight Networks.

All content was optimized for web using Adobe Photoshop and QuickTime Pro. The Site’s interface is entirely created out of vectors, for screen resolution scalability and fast loading times. Vector content is either programatic, either imported from Adobe Illustrator as mentioned in this post.

Maintaining the same experience on any screen resolution, major browsers and OS’s

Flash does take care a lot of this business out of the box.

Though this is a Flex application, we chose to use good ol’ Flash Stage resizing method:
stage.scaleMode = StageScaleMode.SHOW_ALL .

The catch with this one is that your flash movie size (width/height) in HTML has to be 100% or the line will not work.
It turned out that this was not a bad idea at all. It allowed us to focus on one layout of known proportions that will fit any screen size the same way.
Plan B would have been to use the standard Flex constraints system for display objects, but in this case the results were so different (naturally) that the site would have had tremendously different appearance based on screen resolution.

Testing SEO for Flash Platform

As mentioned in this post Google doesn’t index Flash dynamic content. We had to go back to standard SEO techniques for Flash Platform.

To name a couple:

• We embedded a lot of text content in the Flash file itself.
• We filled the HTML wrapper as any HTML page sans the body content.

Uniformity and re-usability of interaction effects

We wanted to have standard effects for particular interactions.
For interaction effects we created various effect classes that would have two parameters in constructor:

• Targeted UIComponent
• Function to be executed at the end of effect.

All the timers and listeners for the effect are stored in the effect class.
First parameter makes the effect useful work for pretty much anything.
Second parameter proved useful for execution based on the effect timing.

Ease of dynamic content maintenance

Since there is not a whole lot of content to be maintained, we decided to have all the content catalogued in two XML files, one for the Case Studies and one for the image gallery. This has proved yet again to be the fastest and easiest way to setup and maintain small scale content.

Related posts:

1. Google Analytics Tracking Component for Flash Platform
2. Performance Optimization for Flash Player
3. Flash Technology vs. Flash Developer

Flex Builder unfortunately does not have that option so we have to look somewhere else for a solution for testing.

While there are many applications that simulate various network conditions, Charles stud up as the most practical for Flex developers, in my opinion.

First thing that I liked about Charles is the ease of configuration. And you can configure a few things that are precious when developing a Flex app.

1. Charles supports No Caching per location. This means that you can block caching for your app that you are testing while keeping it on for other internet content that you as a Flex developer are always searching for reference. When does this comes in handy? Anytime your is loading dynamic content and especially for multimedia projects.

2. Charles supports Throttling. Works the same as Flash bandwidth profiler but also enables you to throttle specific locations. So you can set your network bandwidth to a desired speed and see if your user experience holds up.

3. As Charles shows you HTTP headers and AMF0 & AMF3 content being sent back and forward, it is extremely useful for checking data integrity. Basically, it shows you content of any data being passed through the network that has to do with your application and more. I am a great fan of AMF3 and this feature is a life saver when you are trying to debug AMF3 related issues.

Having all these wonderful features, it is also easy to use and takes about a minute to install and start using.

There is also a fully featured free version that is limited only by you being able to use it 30 min at a time. Not that it is too much of a trouble, but for convinience of developing I recomend getting the licence that is moderately priced.

Related posts:

1. Flex Widget for Graphing Elections and Debt
2. How much Excel can we get in Flex?
3. Skinning Flex with Illustrator CS3

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.

Related posts:

1. Using Flex Code Generator (FCG) with Flex & PureMVC
2. Bandwidth profiling Flex projects and more with Charles
3. Can your Selenium do that? Testing flash/flex and silverlight in web apps with iMacros

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.

Related posts:

1. Using Flex Code Generator (FCG) with Flex & PureMVC
2. How much Excel can we get in Flex?
3. Agile Development for Product Managers: Why Agile Testing Rocks

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.

Related Services: iPhone Application Development, Flex, Flash and Air, Custom Software Development

Related posts:

1. Performance Optimization for Flash Player
2. Mouse wheel (scroll) Event in Flash Player running on a Mac
3. Where is Flash at?

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.

Related posts:

1. Pathfinder Launches Beer Hunter, A New Flex + Ruby RIA
2. Rails, AMF and Flex
3. A Java Programmer’s transition to Ruby on Rails

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.

Related posts:

1. Flash Player on iPhone gossip
2. Performance Optimization for Flash Player
3. Flash Technology vs. Flash Developer

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

Related posts:

1. Flash Technology vs. Flash Developer
2. Using Flex Code Generator (FCG) with Flex & PureMVC
3. Performance Optimization for Flash Player