Boxely TV Episode One : Layout Transitions

As some of you know, our team has been hoping to release Boxely as a fun toy for others to play with (most likely unsupported initially but will allow folks to experiment with their own applets and creatives). Seems we're making progress on that front, hope to have more news in the short term. In the meantime, I thought I'd provide a few teasers.

Over the next month or so I'll highlight some of the features of Boxely I feel have not been taken advantage of fully in our production applications. I will mostly focus on interface dynamics and procedural effects or functionality that we provide stock as part of the Boxely SDK.

This video (requiring Flash 8) centers on the concept of layout transitions. A very simple mechanism allows content authors to modify the layout parameters (algorithm, alignment, orientation) of a particular container box, while allowing the elements managed by that box to animate to their new positions from their old. The core toolkit orchestrates everything required to get the job done.

The first snippet presents a very simple boxely scene that transitions a number of fixed positioned elements between random placements. The second shows how one can affect the "dynamics" of the same transition - in this case a juiced up spring is applied.

Layout transitions have many practical uses - some of which are sorting lists or items, gracefully switching between one or more configurations or orientations of an interface, or revealing new UI elements to a scene or gliding them away...

The final three portions of the video demonstrate how layout transitions can be applied in other real world instances:

Our "Hitchhikers Guide To Boxely" (work in progress) is shown transitioning from a compact view to a more content focused view.

I mocked up a web browser thumbnail sorter - a sample to show how a flow panel can transition between states, first alignment is tweaked, then the flow panel is asked to switch to vertical flow from horizontal flow.

Lastly I demonstrate my inability to play simple guessing games - an homage to Grant Robinson's "Guess-The-Google" was thrown together in less than an hour. The scene will search Google's image repository for a random (secret) term and present the results as a thumbnail grid using random layout transitions. Object is to guess the term that was used to find the images. Fun Fun.

Next up I'll show off some of Boxely's desktop gadgetry-foo!