What is FlashFirst? November 30, 2007

Let's define an RIA as a stew of tasty graphics, sounds, business logic, script assets, controls etc. The end product might be a game, might be a traditional website with non-page based navigation, might be serious application like Photoshop or Word. Across all of these, separating the UI elements from the underlying logic leads to easier to maintain applications.

FlashFirst describes the workflow of using Flash CS3 output to ignite the experience, much as in normal 'test movie' or 'publish' outputting say "UI.swf" with the key difference that all the script is in a second swf file (e.g.
script.swf) , which may be built from Flash or Flex. This is the opposite of most Flex workflows where Flex compiling has control and loads up the appropriate graphical assets from Flash.

FlashFirst in it's best incarnation, follows MVC design patterns near perfectly, the User interface is from flash (e.g. UI.swf) the controller loaded up by UI is a separate swf (e.g. controller.swf) with no/minimal User Interface, and the model is often from XML, jpg, CSS, AMF.

The two patterns for FlashFirst

The default way it works is UI.swf->Engine.swf->assets... So in detail user starts up the UI.swf, which pauses itself, loads up the controller Engine.swf into itself, which takes over the preloading of assets, fonts, internationalization, configuration. Once through preloading the engine tells the swf to resume playing, as things are added and removed from stage and via the magic of addFrameScript to well defined contracts in the form of instance names, class types, and framelabels. The UI elements are enhanced with interactivity, possibly based on configuration on stage.

Say in a jigsaw puzzle, you have a MovieClip on stage, with instance name 'game1_jigsawpuzzle_mc', inside that clip on a frame script might be something like

var config:Object = new Object();
config.numPiecesVertical = 4;
config.numPiecesHorizonatl = 4;

Which the listening game engine (e.g. jigsawpuzzle_engine.swf) would be listening for scene requiring it's services (e.g th instance name of the clip "game#_jigsaw") to be loaded, and then using to slice up the image on stage into 16 pieces.

A second case is a Starter.swf loads in the UI and passes it some initial configuration settings that override the defaults, say jump to level2,. So in that case Starter.swf->UI.swf->Engine.swf->assets... This is similar to using FlashVars passed into a swf running inside a webpage.

Why FlashFirst?

The clean separation between UI and Logic, allows for easy maintenance, both in reskinning and feature enhancement. Say you have a game, that you want to be rethemed for every season, one logic, clone the Skin file a few times, adjust the graphics to fit each season. Sometime later it's decided that there is a bug to be fixed in that game, but the UI Files and fonts were lost in the great harddrive crash of 2007, and the primary designer (on a Mac) was killed in a bizarre velcro wall accident. Despite these horrible occurances, provided the contracts are the same, a new engine can be deployed just by dropping in a new file, without finding and republishing the UI.   Even better, if the UI is generic enough, new products can be created by different engine features not known at the time of developing the original UI.  e.g. for a math game,  simple, intermediate, and advanced addition, a new series on multiplication is added.

Adobe is pushing Flex hard, as they should, it's a great ...if heavy handed tool/framework. One of the things that have always appealed to me is Flash's ability to push beyond standard UI and work on high experience quickly, prototyping, new components, and historically Flex starts to break down. Most of the projects I work on, it's really the Flash Designer hitting compile a billion times tweaking the graphics and tweens that is pushing that creative edge, often in constraints that Flex can't squeeze in either size or framework.

Another gripe is many apps produced with Flex look, "Flexy", and while generally superior in UX to RIA's DHTML+Javascript, Flexy doesn't represent the brand and experience that most client and designers want.

Flash is awesome rapid prototyping application. I've creating essentially functional (meaning only the bare essence) mockups and prototypes *while sitting in meetings with the client* given the ability to draw, drag and drop, work on a timeline and integrate photos from whiteboards or video.

The Creative First frequently has designers designing in a vacuum outside of IA and Useability, miss critical things or overshoot on experience resulting in overbudget catastrophies that aren't useable.... like reinventing scrollbars, and creating obnoxious keyholes everywhere, as they haven't mastered fluid layout yet, and in the Flash world it has to be built by hand.