Flex FlipCard Component
- July 11th, 2008
- Write comment
UPDATE: There is a more recent post about the FlipCard
FlipCard is a component for Flex 3 that allows you to put content on two sides of a 3D “card” and flip between the front and back. The compiled library as well as full source code can be downloaded from the project page on google.com.
Click on the screenshot below for a demo:

Using the component is simple. Once you add flipcard.swc to your project, you can just drag the component into your Application from Design view, or hand-code the MXML yourself. The example shows how little code is needed to use it. The front and back of the flip card can be whatever UIControl you want them to be. In the example I use a VBox for the front and a Canvas for the back. Additionally the look and feel is all defined with CSS which you can override to match your own application.
The 3D effects were written by tink.ws which utilizes PaperVision3d. At first glance this FlipCard may just seem like a stripped-down of tink’s “flip” example, but I think there’s a few cool differences. Mainly the FlipCard is meant to be a familiar UI component in an application for showing settings, options, etc in a limited space. Your users may have seen similar interfaces in mac and iPhone apps. FlipCard is compiled and packaged into a component so you don’t have to grab PaperVision from SVN and piece all the sample code together. FlipCard also uses some cool tricks to make it work like a native Flex component in that you add your front/back side by simply dragging two sub-components inside it – just as you would add sub-components to a VBox, Panel, etc.
I would be interested to see any application that you build using this component. Please feel free to post a link to your app, suggestions or modifications in the comments section.

