July 2006

Brian Riggs of the Kiwi project has worked out a way to load graphical Flex skins at runtime. This could be useful if you want to create different themes for the same app without compiling them all in at once, or if you want to create an app like WinAmp that other people can skin without recompiling your source code.

Digg!digg this | del.icio.usdel.icio.us | 6 Comments

Jason Langdon took my reflection component and made a new version that adds blur, which actually makes it look a good deal more realistic (higher levels of blur make it look like it’s on a less polished “table”). Very cool.

Digg!digg this | del.icio.usdel.icio.us | 1 Comment

UPDATE 2/21/2008: See this post for the latest version of Reflector.as. I’ll reintegrate it into the source code linked to from this post eventually, but for now you’ll need to download the code from this post, then replace Reflector.as with the version from the newer post.

Okay, enough highfalutin’ chatter. This entry actually has (arguably) useful code in it.

The reflection effect is destined to become one of those gratuitous UI clichés, like brushed metal and gleaming highlights. But hey, the kids seem to like it, so I figured I’d try to make a similar component in Flex.

Before jumping into the explanation, here’s the demo:

You can drag the panel around to watch the reflection follow it, and play with the sliders to tweak the look of the reflection.

I’m not the first to attempt this: Trey Long created a reflection effect in an early beta of Flex 2 (the demo pointed to from that link no longer works with the shipping version of Flash Player 9). However, his version created static reflections—so, for example, you could see the reflection of a Button, but if you moused over or clicked on it, the reflection wouldn’t update to reflect (no pun intended) the visual changes to the Button.

I decided to make the reflection “live”—as you interact with the components being reflected, the reflection actually updates in (near) real-time. I also componentized the reflector itself, so you can just target it at a component and it automatically positions itself appropriately. I used code very similar to Trey’s reflection filter to render the reflection bitmap, though the way I actually draw it to the screen is a little different.

Read on for an explanation of the code: (more…)

Digg!digg this | del.icio.usdel.icio.us | 48 Comments