Card Deck Animation in Flex

I was trying out a GTD application the other day called The Hit List. The application is superb, and I was really impressed with their attention to detail. One thing that excited me was their card view – and especially how they animated card swaps. You see a deck of cards, and as you navigate between next / previous cards, it animates picking the card and pushing it back, or taking it from the back of the stack and putting it at top. This was very much like how you would do it manually.

So I replicated it in Flex!

Click to see Card Deck animation in action

Interesting things in this example (or what can you learn):

• Card deck is drawn using Graphics API. We draw Rounded Rectangles and give the last one a shadow.
• Animation effects are done in a sequence.
• Changing the stack ordering of the cards to give a realistic effect.

Want source? Download the source code for this Card Deck Animation in Flex.

This is only an example. I am sure there are things to improve. I learned a lot while building this and I hope it’s useful for you.

Thanks to Sunny & Pradeep for doing the ground work on this. Kudos to Potion Factory for building an inspiring application 🙂