Archive for the 'workflow' Category

Flash: Fast Prototyping and Sketching UI with FlowControl

While I enjoy the new power of Flash9/AS3.0, one of the things I really dislike about the AS3, is how much extra work to do basic things like setup buttons to do simple timeline control, this is especially hard on designers and animators who don't code. I agree with 5etdemi post 4 years ago, the basics have ironically gotten harder to do.

What wrong with ECMAScript/Actionscript? Well, it is not especially well suited for certain tasks, the worst of which is time-based/timeline-oriented animation and declarative drawing. I mean, it seems pretty ironic that ActionScript is derived from ECMAScript which was primarily oriented at scripting in a text-based environment, HTML and the DOM. Simply put, ActionScript has leaned more and more towards heavy lifting text operations (like RegEx and the new XML implementation) and less towards building programmatically what Flash was originally meant for, animation.

While there are useful utilities like Lee Brimelow's nice event generator utility, I wanted less, as even if being good with actionscript, when you have a few minutes to put together something for (or during!) a client/skype meeting, scripting isn't really an option. Thankfully AS3 has some tricks to help!

( press RIGHT arrow key to advance)

One tennant of Sketch is using the type and instance names to do most the event binding work, largely this is to allow Designers to stay on the timeline, but the same could apply to objects created in actionscript as well. So in the above example there are 2 scenes, and a bunch of empty frames, and a nav control. What's special is the buttons you see are actually just semi-transparent buttons (I call InvisiButtons) that have instance names like 'next', 'prev', (shown in the button names) there is no other script on the timeline for them. That via the FlowControl listening to ADDED event are autowired up to call 'nextFrame()' , 'prevFrame()' etc. These InvisiButtonscould be used as a hotspot over a comped image or basic text and wireframe graphics, allowing low to high fidelity comps to be created.

In this example a ENTER_FRAME event updates the TextField off to the right to show the current scene, frame et, to show where you are.
FlowControl has some other nifty features.

• optional features is the fadein, fadeout effect, with configureable color, so while there is a normal timeline, the fade effect is free and ads a bit of polish IMHO.
• tooltips telling you where the buttons go/do.
• keypress for left/right arrow to go to the next previous frame, escape to goto first frame-useful for slide shows
• XXX_autoBtn. If it sees this pattern that button will generate an XXX event (e.g. sayHi_autoBtn generates a new Event("sayHi"), which anybody is free to listen to.

All these are in the example (as well as all the code for FlowControl) on code.google.
Flow Control can be used 'embedded' as the document level class (or extending from it) or loaded as an external swf, and I'll be demoing that in the future. That latter feature is more targetted to creating highly skinnable games which I'll be covering in future blog posts.

Teamwork: Scalable Communication

 One of the requirements for productivity recommended by GTD and 4HWW is separating and scheduling personal and business life.  This can scale even apply to roles, especially in small companies.  As if your company scales in predicatable ways, it may not be you doing wearing all the hats.   One preemptive strategy is using multiple accounts.  With email this is easy, for voice and IM, I like to use Skype with multiple logins, which is covered here.

Some potential roles are IA, PM, TechLead, QA, etc.   At which point in time a fulltime resource can be found it's easy to hand them the user and password to take over.

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.

Using fl.controls.* with FDT (and Flash CS3)

I Recently upgraded to FDT 3.0 Professional...I highly recommend if you're doing heavy actionscript projects. It's pricey, but will pay for itself quickly.

Using fl.controls with the syntax checking took a bit of research. Turns out you have to follow the steps as

• Create a new FLA, name it CS3Controls
  
• drag all the components you need into the Library
• In File> Publish Settings > Flash > checkmark "Export SWC"
• publish it
• copy the CS3Controls.swc to someplace you'll remember (e.g. a common classpath or whatever app that uses them's lib folder)
• - Now in FDT, add your SWC to your project, and in the Flash Explorer panel, right-click and add that SWC file to your classpath
• once that swc is visible in the FDT Flash Explorer, right click over it. "Source Folder">"Add to Classpath"
• after a moment you will see it above the packages, if successful, clicking the plus will show you all the classes inside it...very cool FDT team!
• in your AS class just proceed as normal eg.: <code> import fl.controls.*</code>

Found this post

What is FlashFirst?

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.

Flash CS3: Drop Shadow Filter dissapearing on art Bug +MovieExplorer rescue

Took me a bit to find this. We are importing several characters drawn in Illustrator, adding any Filter, while the filter appears fine on the timeline, it dissapears when published.
After some digging errant empty TextFields are getting inserted into the art with no name and no text, and removing them fixes the issue. Though getting to them can be tricky.

Open up Window>Movie Explorer, make sure the first button at the top with "A" is depressed but nothing else, and in the far right icon, press it and make sure symbol definitions is turned on. Then start looking for TextFields that look like "--A (empty)" in the display. Double click on it and insert a long string like "AAAAAAAAAAAAAAAAAAAAAAA" as soon as you click off you should start seeing the text start poking out of the art. If you need help, look at the bottom path on the MovieExplorer "Scene 1-> Layer 1-> Frame 1->" what may be happening is the TextField isn't on the first frame so right-click 'go to location' won't actually get you to it.
I'm unsure what is causing them, it could be the designers just clicking the Text creation tool by accident, or an Illustrator to Flash import bug. I'm pretty sure it's a bug in Flash not to render the filters, but at present I'm too busy to dig deeper.

FlashCS3: Tip to speed compilation

Flash CS3 has improved compiling speed over Flash8, however seemingly innocent use fonts can still bring compile times to a halt. with a font like Futura, an missed 'embed All' can turn your compile times to 30-45 seconds, as every compiler requires Flash to copy every character in the entire world...every time. Needless to say 15-30 seconds doesn't seem like much, but if your compiling often, this can reduce

Going through and removing font embedding from every textfield is somewhat tedious. But you can use the MovieExplorer to help drill down, you may even find text fields you've missed. I'm sure somebody has a JSFL to help.
The other tips are when using Flash CS3 and blessed with a timeline, put a temporary script (gotoAndPlay) to skip the intros and tutorials to delve into the heart of the what your working on at any given time. When using Cogs you can do similar things by passing a non-default initial state in the constructor.