Archive for April, 2008

Flash: FDT and AIR 1.0

Recently upgraded from FDT Professional to FDT Enterprise. I was excited to see that AIR is now supported. Of course it's been out for several months, just haven't paid any attention to it. Updating since a few things have changed since AIR went 1.0

1. Download + Install the AIR runtime (now released)
2. Download the Flex SDK (now open sourced),
3. unzip the Flex SDK to someplace reasonable e.g. C:\CodeProjects\AS3.0\Flex3.0.0.47\
4. Go to 'Window>Preferences' then click on the 'AS3 Core Libraries' Tab, then the 'Add' button
   
5. This will get you to the Define a New Path Variable
6. 
7. Finally you'll want to update the Core Library for the package you are using via right clicking over the project and selecting 'properties' then the 'Change Core Library' button on the bottom right:
8. 
9. After you select the Core Library you created earlier, it will update and rebuild all the projects, and here's what it will look like after:
10. I typically add the CS3CoreComponents too, as I do lots of project that are Flash First instead of Flex Based.
11. Past that follow the instructions starting with step 5. on adding the sample AIR resources folder,
12. download and replace the HelloWorld Application Descriptor, else you will get a series of errors like here
    
13. modify the HelloWorld to match whatever you are using.
14. Open up the Build_AIR.xml for editing
15. change the 'sdk_dir' to point to the Flex3 path on your harddrive you downloaded earlier,
16. change the 'app_name' to whatever you called your app, e.g.
17. Then follow steps 8 and on, to build the swf and package it for AIR, if successful, you should then get something that looks like this. Congratulations!.
    

If your curious about what else has changed since the original article check the devnet.

IA, IxD Deliverables defined….Prototypes, Mockups, Flows oh my!

I develop RIA and games, where I find that webpage methodologies break down, and use several terms/tools in the early phases to capture various facets of the system.   Lately on the IxD mailing list there has been some confusion as what is what so here's my list:

• Wireframe - a single screen as output by IA's, typically representing one state at a time, a skeleton to serve as a container for available copy and for graphic design to flush out as 'Comps'
• Sitemap - a rought organization of wireframes into sections and navigation between pages.
• Storyboard - sequence of wireframes + graphical interaction (mouse clicks, drags), typically a one way trip through a system,  trying to get buyin from the entire team.  Can be expansive in covering a wall, often required in team discussion to jump around and interrelate, or played back in a video like format.  Frequently the beginning of a usecase/workflow.
• Comps - aka composition, a single screen as output by graphical designers based on Wireframes, and provided copy.
• Interactive Wireframe - aka clickthroughs, wireframes stacked in time,selectively hiding an showing things, to help flush out the interactive architecture. As somethings have to be played to be understood.
• Mockup - a high graphic fidelity, but limited in interactivity similar to a theme park ride. Great fun on the ride, but get a few feet off the track and the whole thing breaks down.  A version that faithful covers all the use cases states to be conveyed, can also be called  a simulation.
• Statemap/Lifecycle - a heirarchical statechart of all system states and events between them, frequently having links/thumbnails to various fidelity comps. Like a subway map it should encompass at varying levels of detail the entire system of states relevant. I find this missing in most designs. Screw this up then everything is already broken. Been compiling a library of common LifeCycles (user registration, media players), as I find that they are constantly rediscovered, and getting them right..can be tricky. I'll publish them as I have time.
• Flow - a particular usecases/workflow across the statechart + sitemap etc.
• Prototype - a typically technically driven 'spike' to answer a narrow question if something is feasible or not, or better than another scenario. typically disposable. Often using whatever is available ducktape, wood, paper + glue. Tehcnically anything that isn't building the final release meets the definition of a prototype. Thus I find it's more practical to have more specific terms (like mockup) to describe what I expect of a deliverable, what it does and what it won't do. However in the case for questions like 'can we sort 10000 items clientside, based on the dominate color' generally there isn't any other term available, so I use spike/prototype.

Soo many acronyms and deliverables: IA, IxD, UX, PX, XD, UCD….

In an ongoing series of articles on the early phases of RIA or Game project development one is likely to come across this menagerie of terms and titles:

• IA - information architecture, the organization of all the data in an application into logical bundles, and a clear navigation between. The careful choosing of the right ui components to match the underlying dimensionality of the data (e.g. a grid for multicolumnar) and single/multiple selection.
• IxD -interaction design, the consideration of the bi-directional communication of a user, armed with a mouse joystick and keyboard 'talking' with your application to collaboratively achieve a desired goal.
• UCD - User Centric Design, focusing on a particular end user capabilities and needs first, rather than technical merit, or business concerns first. It should focus on current or designed target audience, and often leads to workflows optimized to those User profiles, e.g a 7 year old editing a photo, has different requirements than an adult.
• UX - user eXperience, the summation of good copy, good graphic design, good motion design and smooth workflow, minimizing boredom, confusion.
• PX - player eXperience, the special considerations of user experience in games., or what makes games fun, typically involving [1] and progressive dynamic difficulty adjustment [2]
• XD - eXperience designer, can mean various things, typically someone skilled in blending a workflow (the minimal path to achieving a particular goal) with a narrative/plot to make it emotionally compelling and engaging. Often this is some blend of AfterFX, and Flash, and can involve actors and writers to script the experience.

Here's a paraphrase of how the IxD list views the blurry overlaps:
Information and Content are the nouns,
IA is the grammar,
IxD are the verbs,
Graphic Design are the adjectives,
Your app is the poem
Experience Architects are the poets....