Tag Archives: example

Intelligent Time Duration / Estimate Slider in Flex (inspired from The Hit List)

I wrote yesterday that I am working on a time estimate slider like The Hit List. It’s finally ready!

Here’s how it looks in The Hit List.

Smart Estimate Slider in The Hit List

Smart Estimate Slider in The Hit List

And here’s how it looks in my Flex application:

Smart Estimate / Duration Slider in Flex

Smart Estimate / Duration Slider in Flex

Want to see how it works? Here’s the live example.

Want the source code? Download source MXML here.

What does this slider do?

  • Drag the slider to select estimated hours / duration.
  • The drag thumb will snap differently between 0h to 1h (every 15 minutes), 1h to 1d (every 15 minutes, but within ticks), and 1d to 1w (every 2 hours).
  • Can set the default value for slider
  • Value of slider is converted to hours
  • Can define hours in a day and days in a week
  • Estimation slider shows up when focus goes in the text field. Hides when you click Done button (or another screen element that can get focus). But not when you focus on the slider itself.

It was a challenge, and I loved solving it. Had to hard code some calculations, but it’s still flexible. Allows customizing hours in a day and days in the week. This example also demonstrates Number Formatter, and how to handle focus events.

Still haven’t converted hours into a more readable text (e.g. 40h into 1w). But that’s for later.

Here’s another thing that you may like! Card Deck animation like The Hit List!

Do you like it? How would you have done it?

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

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 :-)