I like Adobe AfterEffects, I like soundtracks, and I like strolling around in Hollywood, CA. So I combined these interests in a single project, which resulted in producing a little teaser about Hollywood on top of a soundtrack by Harry Gregson-Williams. I really enjoyed working with AfterEffects for this project: it’s really a one-stop shopping for this kind of short movies. I also posted some still transition shots from the movie in my Flickr photostream. Check out the movie below, or click here.

This movie is structured as a sequence of 32 segments. Each segment has a match elsewhere in the sequence; they are also articulated around a narrative technique called “mise en abyme“, which is a segment whose own structure reflects the structure of the whole entity containing it. In addition to that structural segment, other segments also contribute to revealing the overall anatomy of the movie, by expressing duality and contradiction in several forms, including time. Numbers 2 and 3, and fractional number 1/2 govern the (de)construct in many ways.

Welcome to Hollywood!

This movie can be watched in better resolutions—including HD—at http://www.youtube.com/watch?v=HOZa6srNxKc.

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 ···

I recently spent some time developing a WordPress theme for this blog. On the one hand, I needed a local environment for development and testing, in order to avoid frequent remote server updates. On the other hand, as understanding and wading through all the WordPress php template files can be overwhelming—especially the first time—, navigating and accessing the framework code was an issue, as well.
Luckily, there are tools out there that, once together, make the development less tedious and much more productive.

Here are the pieces I pulled together as my “WordPress theme development” environment:

··· 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 ···