Using arrow keys to navigate to next/previous keyframe

peter_bright · November 28, 2017, 10:51pm

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

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

Hope you can help

JimScott · November 29, 2017, 6:48am

Hi Peter!

Just thinking out loud here…

KeyFrames
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?

peter_bright · November 29, 2017, 10:40am

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 )

Regards, Peter

Daniel · November 29, 2017, 3:56pm

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:

1-second-stepper.zip (13.1 KB)

gist.github.com

https://gist.github.com/themorgantown/2a9fbc8e94ce4aaaa41ccc1cd0c73571

placeinHead.js

	
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
// http://mikemurko.com/general/jquery-keycode-cheatsheet/
var speed = 0.8; //transition speed
var transition = "push"; //types of transition: instant, fade, swap, push

var nextKeys= [39, 40, 34];
var prevKeys= [37, 38, 33];

This file has been truncated. show original

peter_bright · November 29, 2017, 7:52pm

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

JimScott · November 30, 2017, 6:21am

@peter_bright

Here is a demo that I believe covers the basics of your initial request:
Arrow_KeyFrame_JHSv1.hype.zip (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

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.

POST EDIT:
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").
Arrow_KeyFrame_JHSv2.hype.zip (28.5 KB)

peter_bright · November 30, 2017, 11:43am

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

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

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

JimScott · November 30, 2017, 7:36pm

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.

peter_bright · November 30, 2017, 7:49pm

Thanks Jim,
It’s working
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

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

peter_bright · December 7, 2017, 11:46am

Hi @Daniel and @JimScott, Just wanted to let you know [my ‘Hype’ digital poster] (http://www.deakin.edu.au/~pbright/hype/cardiac-ecg-poster-v3/cardiac-ecg-poster-v3.html) 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

Using arrow keys to navigate to next/previous keyframe

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.