While I enjoy the new power of Flash AS3.0, one of the things I really dislike 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's post 4 years ago, instead of the language getting easier....it's gotten WAY harder to do the basics, so much that many animator types are giving up on programming in flash at all, this is bad as many of these people are very bright and push the edges of media on the web.
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 fade-In, fade-Out effect, with configurable 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, or getting back
- press esc and it will take you back to the home, again useful in pitches/tours
- XXX_evt. If it sees this pattern that button will generate an XXX event (e.g. sayHi_evt generates a new Event("sayHi"), which anybody is free to listen to.
- The ability to call functions via naming instances in this style functionToCall_fn where it will call anything scoped to the same timeline named function functionToCall();
- a history state (back) , naming an instance 'lastFrame' will take it to the previous successful state/frame.
- an event is called when leaving a frame, so you can cleanup (e.g stop video or audio playing)
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.
If you want to learn how to use it in creating fast prototypes here's another post
http://troyworks.com/blog/2009/09/06/fast-prototype…ng-flowcontrolfast-prototypes-using-flowcontrol/
{ 1 trackback }
{ 0 comments… add one now }