Here’s a proof of concept for an idea I’ve had for a while … basically it’s a “grid based” UI for Flash Lite content … very simliar to some of the subway system scrollers that many Flash Lite folks have done …

To demo the concept, click the .swf below and then press 1-9 … you can also download (right click & save) and install on your phone.

Due to 176×208 restrictions on most Flash Lite enabled phones … we as FL designers and developers have to come up with easy and effective ways of navigating content. This content grid idea is not something new, as something similar has already been done with Pocket PC Flash (which incidentally is no longer being supported by Macromedia … that’s reserved for another post).

I am using Tim Walling’s tweening code. You can tweak the settings to get the effect you are looking for (fps, speed settings in the .fla). I haven’t really had time to test on a lot of devices, but with a little fiddling it should perform decently on most … although, if content areas are filled with more than just static elements, the app could slow down quite considerably (more testing is required) …

It’s further proof that Flash UI is one the top selling points to FL as opposed to other technologies. This took relatively no time to do ( around an hour), compared to implementing it in something like J2ME, etc … and it’s only around 8k to boot.

Another thought … as this UI does take a fair amount of CPU … I wonder if we’ll start to see selections like “Use Animation? Y/N?” start to appear in FlashLite UI’s … basically a prompt like this would disable CPU intensive operations and allow the user to navigate in a less “fluid” manner (less animations, tweens, etc) … say if they were running an older phone with less CPU, etc … my 6680 runs this proof pretty smoothly … again, as a rule of thumb, FL designer’s/developers should always target the lowest common denominator … which in my view is something like a 3650.

This thought is just based on some of what the XD team have written about thus far about what works well in Flash Lite design & usability. I guess it’s a tradeoff … but as devices get more processing power and memory, we should see much more interactivity in FL apps … but for now, I suppose less is *sometimes* more.

Back to UI … this proof actually forces the user to understand a new navigation paradigm in mobile, so some UI folks might frown upon it … but what the hay, most people should get it with a little instruction.

I guess it comes down to the user & the app … are they looking for something quick and dirty to get results (a data app, 2 presses and you get the content you want) or are they there more for the user experience (say a game … keypress and navigate to area 3, to 4, etc …)?

The XD team has talked about tradeoffs here in their recent articles on Flash Lite (”less is more” in terms of animation in FL).

Anyways, I’ve posted the .fla here or .zip for you to download, try, & modify.

Some features that I’ll probably add later:

1. A persistent “map” in one of the corners of the 176×208 viewable gridspace … this would tell you were you were … like a H.U.D (Heads Up Display).

2. Multiple paging once you are in a particular area on the grid/map. So if you enter area 1. Then there would be sub pages the user could select there (possibly using up/down/left/right).

3. Use up/down/left/right to navigate instead of 1-9 … especially if there are more than 9 screens to move between (see below).

4. Apply the navigation to a game … where each area is a separate piece of the game world (2d scroller type game).

5. Add mask to the displayed area (in case user has > 176×208 … ).

6. Add a zoom-in/out effect … might be too much CPU … but might add to the overall experience.

This entry was posted on Thursday, October 6th, 2005 at 10:01 pm and is filed under Flash, flashlite. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.