Another little cute project - ipod

Just finished a little cute project for a client who wants display movie in an ipod looking control. The controls and everything is meant to be as close to an ipod as possible. The two main (toughest) characteristics are the volume dial and the menu selection using the dial. The project detail can be found here:



The greatest difference between an ipod dial and a regular flash scrollbar is that, you can't just use _ymouse to determine where the scroll knob to be. Secondly, it's not just the _ymouse, but the angle of your mouse.

The design process of the implementation was a lengthy, and gruesome math cruncher. The whole thing is like a circular polar coordinate based scrollbar. To find out where the horizontal volume bar is, i put an invisible marker on the dial which will only walk on the dial, no matter where your mouse is. At the beginning i thought just figure out how to make that thing follow the circular path depending on the mouse would be fine (even that took me half a day to do, because there are so many options in flash: hittest, guide path, etc).

At first, seeing from a pure mathematical point of view, triagular functions (sin/cos/tan) would be the obvious choice of figuring out where your mouse relative to the center of the dial. But in order to optimize the performance, i decided to use simple similar triangle theorem, figure out where (x,y) the knob should be if my mouse is @ x1,y1. Quite simple, and it works great. The knob is following the mouse, but always on the circular path. And depending on where on the circle is, the horizontal volume would be. And then i realize... humm.. that's not exactly how the ipod works. You can actually "incrementally" move up/down the volume. The best way is to play with one, or play with the one here.

So... after thinking for a while, i found that, sin/cos/tan is my only option. After a few trial tests, i noticed that the calculations ain't that slow in flash. I guess macromedia did some thorough optimization on the implementations on those functions already.

All in all... it was doable, but it was gruesome... but it was worth it.

link