Airport Style Flipboard type?


(Cam Macduff) #1

Anyone here tried this? I can find jquery examples but I want to be able to control the animation with a slider and also have some control over the flow of letters and numbers.
The jquery ones I can find are random letter generators. Although you can set the last lot of words it finishes on.


(Mark Hunte) #2

This is not perfect but its and idea,


Controlled by JS
flip2.hypetemplate.zip (20.0 KB)


Controlled only from Timeline Actions- ( Just did this by accident!. But it turns out putting the symbol action (start timeline) on the slide timeline and having the oval’s drag action controlling the slide timeline allows us to control the symbols rather than start them. I probably knew this and jus forgot… :grin: )

flip_MHv1.hypetemplate.zip (20.3 KB)


It dawned on my that you may have meant you want something like this.

( The actual project speed is set to 3x faster on the drag. But cannot record that for the video )


Updated gif. Managed to use VLC to adjust the video speed. ( [see this post of how to do that ](http://forums.tumult.com/t/adjust-video-animation-speed/9559/3?u=markhunte) )


flip_MHv2.hypetemplate.zip (30.8 KB)


Duplicating the Letter Symbols and setting up is pretty easy.


Duplicate the Symbol and then drag it onto the scene.

Step 2,
Enter the symbol and select the top groups text element.
You will see its innerHTML property keyframes.

They are in segments. Each segment is a segue fro one letter to the next. The next segment on will start with the same letter the last segment ended on.



So all you need to do is follow that rule when changing letters.
The last segment will be the ending Letter.


You then add a start time line action for it to the slide’s symbol timeline actions.

And extend the slide’s oval’s drag duration to finish at the same time as the last letter finishes in the slide timeline


Adjust Video/Animation Speed
(Cam Macduff) #3

Oh wow!!!
Thanks Mark, that pretty much answers my questions and solves my problem.
I’m downloading and will have a play.
I had a look at the example slider in Hype’s gallery for Lake Mead Level, and there’s script attached to their slider that I’m not sure what it does.
Doesn’t look like your approach requires any additional scripts. Nice.