Using arrow keys to navigate to next/previous keyframe

Hi All,

I know you can use arrow keys (and others) to navigate to the next /previous scene but I was wondering if anyone has come up with a way to use arrow keys to (a) navigate to next/previous keyframe or (b) continue timeline?

I have a digital poster presentation that uses animations at different keyframes within a scene so using the above method would not work in this instance, as clicking the right arrow key jumps to the next scene.
The last keyframe in the timeline would then jump to the next scene.

I want to do it this way so I can use a wireless remote for the conference presentation.

Screen capture movie of what I mean.
I know the text on the first slide needs work, this is still in progress :wink:

Note: I might use the left arrow key to navigate to the previous scene using the method above.

Hope you can help :wink:

Hi Peter!

Just thinking out loud here…

As far as keyframes I don’t know of a Hype API mechanism during runtime. My best guess would be to create a list~array of your keyFrame timeline locations and the left~right arrow keys would move to them each in turn; or use a variable whose starting value You added to (right arrow key) and subtracted from (left arrow key) and go to that time (feasible if your keyFrames were at regular intervals).

Continue Timeline
Why can’t You just substitute “continueTimelineNamed…” for the “Show Next~Prev” scene swapping in the example link You provided - picking whatever keys You wanted?

Hi Jim,

Thanks for reaching out.
I’m a Javascript newbie so I wasn’t aware I could substitute “continueTimelineNamed…” for the “Show Next~Prev”.
I’ll give that a try and see how I go!
Having said that if someone wants to post a small, working demo file it would be much appreciated.
( I love your Ministry Jim :wink: )

Regards, Peter

1 Like

I think setting your keyframes at individual seconds would give you the most control. When you place an animation at a time on the Hype timeline, it is split into seconds:frames. To access a specific ‘frame’ in Hype’s JavaScript api, you’re actually calculating the number of seconds into the timeline, so it requires some voodoo to convert the 30 fps value to a hundredth of a second. If you can stand having all your key moments setup either 1.5 (1 second and 15 frames) or 1.0, this will make it easier to create your starter/stopper JavaScript.

I modified that first arrow key listener to do this (with just a single timeline action that at the start of a timeline) and 1 second steps: (13.1 KB)

Hi Daniel,
Thanks for the suggestion. Appreciate your help and the code. I tried out the code in my project and it worked as written but my project’s keyframes/animations are of varying durations, 1 sec, 2 sec, 4 secs, etc so although I can set the time for one duration in the Javascript, it pauses at the wrong spot for the other durations but it’s good to know for the future :wink:
Can I set up more than one ‘speed’ variable?
e.g. Have one keystroke for 1 sec duration, another keystoke var for 2 sec duration etc
(e.g. I could cheat and use the ‘prev’ key for the 2 sec duration as I don’t think I’ll need to go backwards during the poster presentation).
If not, what I might do is set it for the most common duration throughout the project and use a wireless mouse to progress the timeline for the longer durations.
Thanks again :wink:


Here is a demo that I believe covers the basics of your initial request: (28.4 KB)
Online Demo here.

• “Left/Right” arrow keys (i.e. prev & next) jump to programed keyframes.

• “Down” arrow key triggers “continue timeline” from that location.

You can use both the “keyframe” & “continue timeline” key strokes together…
e.g. jump to a keyframe and then continue the timeline from that location.

There is one function called “arrowKeyFrame” that does the work.

This function is triggered by “On Scene Load” (“Scene Inspector”).

All You need to do is fill in the keyframe times for your project in the very first line of this function, between the brackets [ ] … don’t forget the commas as the value separators.

keyFrameTimes = [0, 2, 3, 6]; // array - put your keyframe timeline values (in seconds) between the brackets

Read more about “arrays” here.

Also the timeline being referenced in this function is the “Main Timeline” - You will need to change each instance (4 total) if You are using another timeline.

Important Note: This demo is not intended to be bullet proof… there may be adjustments needed depending on your circumstances… so consider this as an example along the lines of your request.

Below is another file that is structured to be a little easier to read~follow. It has the exact same features and is thoroughly annotated. The “arrowKeyFrame” function is triggered by “On Key Down” (“Scene Inspector”). (28.5 KB)

Thanks Jim,
Appreciate all the effort you have put into this :wink:
I’ll have a go tomorrow.

Q: Will this work if I have multiple scenes with differently spaced keyframes in each?

  • Scene 1 - keyframes at: 2, 5, 6, 7 secs
  • Scene 2 - keyframes at: 1, 4, 6 secs
  • Scene 3 - keyframes at: 2, 6, 7, 10 secs

Yes - look at the timeline values I used:
0 seconds, 2 seconds, 3 seconds, 6 seconds

keyFrameTimes = [0, 2, 3, 6];
// array - put your keyframe timeline values (in seconds) between the brackets

The “arrowKeyFrame” function is scene based - in either version.

1 Like

Thanks Jim,
It’s working :wink:
I decided to change the code so the right arrow key advances the timeline as I’ll be using a remote and it only has a left arrow and right arrow button on it.
Now I can do the presentation at the conference with the remote :wink:

Note: It’s still good to know about the keystroke options for future projects so thanks to you and @Daniel again!


Hi @Daniel and @JimScott, Just wanted to let you know [my ‘Hype’ digital poster] ( won the “Delegate Choice Best Poster” at the ASCILITE Conference in Toowoomba, Australia this week. I wanted to present something more than PowerPoint and not give folk motion sickness like some Prezi animations I’ve seen and Hype let me do that, including making a virtual AR marker that tilted so you could hold your iPhone/iPad up to the screen.
It could still do with some fine tuning on the text layout but I’m pretty happy with it.
Oh, and the ‘D’ shapes and masks reflect our university’s new corporate look.
Thanks again :wink:

1 Like