Flex skinning techniques range from embedding graphic assets to programmatic skins (see Adobe Flex 3 Help.) Most techniques visually result in static states, with “view stack” type transitions between them. Enhancing the dynamics of Flex skins can be achieved in two non-mutually exclusive ways:

• smooth skin state transitions via stateful skins;
• use of dynamic content for the skin states themselves.

The former is well documented. The latter is not common, for performance reasons certainly, but can really bring creativity to different levels when used adequately. Dynamic skin content can be implemented through swf movie clip symbols, or video clips. While Flash movie clips are preferrable for vector-based animations—which may demand more CPU power at runtime—, video clips are good alternatives for bitmap-based movies, the bandwith of which can be adjusted for optimal experience. (Note that Flex does not allow to embed video clips.)

As motion graphic designers often use Adobe AfterEffects for their creative work, benefiting from a realm of extremely diverse and powerful plugin effects (including 3D), footage is usually available in .mov video format. So I’ll make this post about video skinning with state transitions.

Example: video-skinning a button with 3 states

To see a full page demo (with source view), click here.

··· continue reading ···

The PanScrollingCanvas is a Flex container that scrolls its children on mouse move. Fully skinnable buttons appear when hovering over the container. The behavior of those buttons can be customized on the client side, by listening to events that this container will fire on button rollover, rollout, and click.

This component is inspired from Doug McCune’s ButtonScrollingCanvas, which is part of flexlib. Using Doug’s component, users interact with one of the four buttons laid out over the container, in order to initiate a scrolling effect–in the direction indicated by the button. I wanted to do something similar, but without relying on the buttons for scrolling the content. Here, the interaction consists of panning the mouse over the container, with a goal-based ease out to give an organic feel to it. Also, 8 directional buttons (instead of 4) are introduced for control affordance and client custom behavior.

Let’s jump to a demo, before getting to the nitty gritty…

Example: exploring Yahoo! maps

To see a full page demo (with source view), click here.

··· continue reading ···

The support for multiple languages in a Flex application is well integrated in Flex 3. The Adobe documentation gives an excellent overview of the general process and the technical details associated with internationalizing your application.
The documentation, however, does not explicitly cover the case where some localized parts of your application reside in one or more Flex libraries (.swc files.) We are addressing that case here below.

A while ago, Vic on Flex had posted an article describing how to organize resource bundles and localized libraries so that one can build a localized Flex application that depends on them. The presented method produced one swc file per locale, per library, and also involved changing compilation parameters manually for each generated swc. Although the solution still works, it cannot be automated easily in FlexBuilder. Moreover, if your application requires switching locales at runtime, the resulting application’s swf file will bundle as many copies of your library as the number of locales to support.

So following up on Vic’s approach, here is a fully automated way to localize a Flex library with multiple locales in one single swc file with no overhead.

0. Check the Flex SDK
1. The resource bundles
2. The library
3. The application
4. Demo

··· continue reading ···