Reflex at 360|Flex

Reflex was finally demoed for the first time at the recent 360|Flex Conference. This new component framework is familiar to the Flex Framework in features and use though it is completely independent. Reflex extends the Flash Player through composition adding a robust layout, skinning, a component suite and an MXML workflow.

Probably the most unique aspect to the design of the Reflex system is a concept called Behaviors. A Behavior defines specific logic or interaction for a component, which is usually made up of several behaviors. As with component skins behaviors may be added and replaced at runtime and will utilize the styling features of the Flash Builder.

Through skinning and changing behavior a component can be completely redressed without extension. Below is an example of a list of data, moon phases and their cycle percentage:
(more…)

Flash Layout Engine in Reflex

As a component platform Reflex is built on a foundation of core libraries and utilities. Because of the unique culture of the project most of these solutions are independently useful to the Flash developer. Its layout engine is one of Reflex’s profitable solutions and can structure the visual flow of any member of ActionScript’s display list.

The following demo illustrates one of the default layout algorithms in Reflex, named Dock (notice the minimal use of containers used to achieve the structure). Click and drag to resize:
(more…)

Reflex: Rethinking Component Design

So is the title of the upcoming 360|Flex presentation on Reflex, a toolkit for Flash developers that has been in the works. The conference in March will finally mark its début:

With the emergence of so many new technologies it is an exciting time to be a developer. Embracing the spirit of advancement, Reflex was created to extend the Flash Platform with a component toolset worthy of its industry. Reinventing the features of Flex for the creative workflow, Reflex enhances the Flash Player (rather than abstracting it) to meet the demands of next generation applications and devices. Come be among the first to see what Reflex can do and learn about its unique architecture, the details of the project, its goals and its future. (session description)

The presentation will begin at 1:00pm on Tuesday, the 9th of March. Right after lunch. Be sure to come early for a good seat.

Flight {heart} 360|Flex

I just got word that I can pick up our Flight t-shirts on Friday. Provided by ZenPrint these bad boys were designed by Bryant Robertson specifically for the 360|Flex Conference (if you haven’t registered yet you better get tickets). The ZenStudio design tool was built on an earlier version of Flight and the ZenPrint guys have graciously offered to sponsor the project at the conference. Thanks again, you guys rock! And of course props to our designer, we’re told we have the coolest logo of any other framework.

Flight is an application framework for ActionScript 3 (Flash & Flex) – you can read more about it on the website. My brother Jacob and I will be handing out the shirts and some print material at the conference where we’re making some announcements for the Flight Framework.

Hope to see you there!

Finally! Undo in Flash/Flex TextFields

One of those things that the browser has built in that you wish would just work in Flash – a simple TextField undo & redo. My brother recently released a really slick solution to the problem. It isn’t a UI component – it sits above the display list and works with all types of Flash TextFields: Flex components, Flash components, bare naked TextFields. It’s really small (1 manager and 3 command classes) and you attach it to the highest level display object necessary for a custom level of influence – so if you want the whole app to be effected then you attach it to the root.

Here’s what the API looks like:

var undoTextFields:UndoTextFields = new UndoTextFields();
undoTextFields.target = this;


Boom! done. (sound effect not included) And it works just like the browser – each TextField has its own undo/redo independent of the others.

NOTE:
The component uses the Flight Framework history without adopting the rest of the framework methodology. A great use of Flight, as it prescribes utility and a minimalistic approach to development. I’ll probably demo this utility at my upcoming presentation.

AS3 Button Behavior Made Easy

I posted a rant on “releaseOutside” earlier this month – finally, here is the example and the code for making anything a Button in ActionScript 3. I’ve also added some really nice features since then. I realized after venting about dragOver, dragOut, and releaseOutside that, unless you built custom components in ActionScript 2, you probably have no idea what these events actually mean for a Button. So now, instead of imparting the boring details of exactly how a Button should work, I’ve implemented 3 new events: stateUp, stateOver and stateDown.
(more…)

Dynamic Assigment of AS2.0 Classes

Riddle~

Assigning ActionScript classes to MovieClip library assets has changed the way we develop user interfaces. Components add behavior directly to a display element, combining function with the design. The ability to extend the MovieClip class simplifies relationships and allows for powerful display objects that can be reused. But it can only be achieved through the linkage of a MovieClip in the library. TextFields and Buttons (Flash native Buttons, not to be confused with other component Buttons) are exempt, as well as a very important MovieClip: the root.

Answer: (more…)

JSFL Slicing for Skin Resizing

Slice-9 has been a beautiful solution to resizing skins but sometimes you’re restricted to using a pre-8 FlashPlayer. Shortly before the beta of 8 I wrote a couple scripts in JSFL to solve the tedious task of manually slicing my designs into 9 pieces. They will take any MovieClip (including their child MovieClips) and slice it up into 9 unique library assets named and preped for resizing. This process has been long and monotonous for many designers and can now be as easy as the Slice9 introduced in FlashPlayer 8.
(more…)

The Problems with Managing Depth in ActionScript

Riddle~

Is it important to keep track of depths in ActionScript for all of my display assets? It’s something extra to worry about, but there’s always the danger of killing something by overwriting the depth. It’s also important to have control on what graphics go in front of others. The “right way” is to have those depths explicitly defined along with each element so it’s clear who has what depth and it keeps the children from fighting. But then that doesn’t work for graphics placed on the stage at design time.

Answer: (more…)