Advice on creating an interactive scroll clock?

Troubleshooting gui
1

Hi,

I need to create a scroll similar to this:

http://www.youtube.com/watch?v=5kgwIq3EqUQ&feature=related


Goto 4:20 to see the clock im talking about.



I need to be able to set the variable to 0-360 degrees, and I need it to spin verticaly aswell.

Sofar I got a similar image of the clock done, with the fading separate and some text under it.

It looks like this:

http://i39.tinypic.com/21oynnr.png

And I can set the text to whatever I wish.

Problem is, how do I make it slide nicely like in the video…

Can I do some position offset on the text element or something?

Or should I simply do it another way?

2

Look closely at the clock and you can see they are cheating. They move the text down but they don’t actually resize it, they just fade it out to give the illusion.



Try building:



Black layer

Light grey writing on top

On top of that a mask 100% opaque black at top and bottom, fading to 0% opaque at 25% in from top and bottom with white low-opacity highlight in the center.



Scroll the writing up and down and you should get a result similar to what they have.

3

(For the sliding it depends on what you are using. In nifty make it an absolutely positioned element with layout absolute-inside (to clip it to the boundary box) and then adjust the x/y co-ordinates into the text appropriately. You could just draw the whole text out and slide it or be more clever and just work out which ones you need. Either way the key is to gradually adjust the x and/or y co-ordinate.