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:
Continue reading

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.
Continue reading

My First Curve-To-Curve Intersection Tests.

Finding the intersection of two lines is a fairly straightforward algorithm. You find their slopes, factor the equation, simple. But finding the intersection between two quadratic bezier curves doesn’t seem to have a simple equation. From the sources I’ve read (I’ll try and find them again so I can cite and quote them) curve-to-curve intersection can only be solved as an approximation.

There are a lot of cool things you can do once you have both line and curve intersections figured out. For example you can combine two shapes wherever they overlap. You can also do some less obvious things such as path offsets (equivalent to Flash authoring’s Modify > Shapes > Expand Fill)
Continue reading

<XML> Graphics

I’ve been doing some heavy research lately in FXG and Degrafa, digging through source code and everything. FXG and Degrafa are both graphics formats in XML markup (like SVG), both opensource, both pretty cool. I wasn’t particularly in favor of a markup format for graphics, with designing applications via MXML and such. I’ve now been converted. I think it’s really cool, useful for things like versioning, etc, and provides a more approachable file specification for developers to implement.

I still think designing is best done (for the most part) in a design tool like Photoshop and Illustrator. I’ve built several ActionScript-based design/editor apps in the past and wanted to put that experience toward a really great design tool that supports the two formats. Somewhere in the process I got a little excited (this will be no surprise to anyone who knows me) and started building my own graphics format. It serves no real purpose that FXG and Degrafa don’t cover, but I love it and it’s been very fun to build.

I’ll be getting back on track now with a FXG/Degrafa design app. Because of my under-the-hood time with the two formats I’d like to present on the formats and XML Graphics in general. I’ll get into the pros and cons and the future predictions sometime on the blog too.

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.
Continue reading