Da Vinci: User interface


Da Vinci is a component architecture that solves some problems that are specific to Flash and Actionscript 3.

This might sound like an odd introduction but I really don’t think we need another set of Flash UI components; there are plenty of frameworks out there already. What’s here resulted from the need to scratch a very specific itch and I don’t have any great plans for it beyond it’s educational value.

The BaseComponent class grew out of a series of posts about the design of a component architecture. I think the Building a UI component framework in AS3 series of articles are probably more valuable than the downloads. They explore some of the decisions and theory behind building components: Planning , Events and Inheritance , Garbage Management , Suspend and resume , Deferred rendering and The Finished BaseComponent Class. Before I went re-inventing the wheel I also looked at the simplicity of the Bit-101 Components and compared a few others in Choosing an AS3 Component Framework.

Working with components (and by this I mean any MovieClip bound to an AS3 class) is prone to generating memory leaks. This is especially true when working on the Flash timeline. If a blank keyframe is placed directly after a frame containing a component, the component is removed from the DisplayList. Timers continue to run, sounds continue to play, and listeners continue to listen. Unlike in AS2, the component still exists – it’s just not on the timeline. Timers and listeners all maintain references which prevent the class from being garbage collected. The primary reason for the BaseComponent class is to tackle Garbage Management in a methodical and systematic way.

The Objective: Flash user interface components in AS3
To develop a simple way to memory manage bespoke UI components in Flash and AS3. The components should be easily skinnable in Flash.

Deliverable: BaseComponent class
[status: beta] org.computus.ui.core.BaseComponent.as
The BaseComponent class is finished and in beta. It overcomes the garbage management problem by calling the function init() when placed on the DisplayList and destroy() when removed. Child components can override these functions to start and stop listeners as well as any other memory management housekeeping that is required.

The class also supports a rudimentary redraw buffering. You can see some examples of this in action in the component examples below. The only addition to the class since I released it was to add an event management optimisation posted by Grant Skinner.

Deliverable: other Components
[status: alpha]
I have created a few components that extend BaseComponent. These have largely been teaching aids to illustrate typical problems and solutions encountered by component developers. You can find example components in these posts: Animated Button , NextPrevious Button , NumberStepper and TimeStepper .


Journal entries
All the journal entries for this project can be found here.

Essential reading:
– Flash: Grant Skinner on garbage collection, resource management and weak listeners.
– Flash: Alex Hurai on Garbage Collection and Memory Leaks in AVM2.
– Flash: Jim Corbett and Lee Thomason on Flash Player Internals.
– Viz: University of Virginia The Temporal Modelling Project

Leonardo Da Vinci

Building a user interface requires both artistry and engineering and it seems appropriate to name this project after the archetypal polymath Leonardo di ser Piero da Vinci (1452 – 1519).

Although famed as an artist (The Last Supper and Mona Lisa are two of the most iconic images ever created) it’s his sketchbooks and journals I find most interesting. They are filled with gloriously insightful observations and theories; all meticulously illustrated and documented in Leonardo’s own backward script.

“Art is never finished, only abandoned.”

Leonardo DaVinci
Italian Renaissance polymath

Leave a Reply