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.

Implementation Notes

• For this post, I created 3 videos in AfterEffects using the CC Star Burst effect.
  The footage for the up and over states is 5 seconds long, and loops seamlessly using a technique similar to that described by winCustomize, which consists of duplicating and shifting the movie in separate layers so that the beginning and the end of the footage are consecutive frames, while blending the middle using a third copy.
  The footage for the down state is 2 seconds long, and is not meant to loop.
• Videos have been transcoded to .flv format, bringing a 1.2 MB .mov footage down to 262 KB, in medium quality (400kbps.)
• The text label and styles are handled by the Flex Button control and CSS.
• The VideoSkin is set through CSS, and adds some bevel filter on top of the video.
• Flex transitions take care of the alpha-blending of the videos between states.
• For addressing performance, video components stop playing when not visible. This required listening to state transition effects events, and triggering the playback/stop at the right moment.
• The down video clip will play in its entirety without looping, no matter the actual state of the button after the click.
• For testing locally, I had to use the Flex compiler option -use-network=false to allow access to the video assets.

Happy video skinning!