Entrepreneur Geek

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

Related posts:

1. Intelligent Time Duration / Estimate Slider in Flex (inspired from The Hit List) I wrote yesterday that I am working on a time...
2. Notification Components in Flex If you are building a Flex application, you may need...
3. Flex Regular Expression Online Testing / Learning Tool When it comes to Regular Expressions, I start feeling giddy....
4. Scrolling with mouse wheel in Flex application – even on Mac By default Flex components do not scroll as you scroll...
5. Auto Complete Text Component for Flex Was looking for ways to skin a combobox and found...