Controlling animations with keys

Using JavaScript with Hype
1

Hello guys,

I’m looking for some help to realize a simple thing with keyboard keys.
I have a search-mask that just needs two letters as input and I want to visualize
that an A shows up as soon as I press A on the keyboard.
Two letters are predefinded, so there is no need to make this possbile with any letter.

I tried to do changes on the javascript-file attached in the paddles-keyboard.hype file,
but I’m not able to make it work.

Here is my version with my changes:

        if(event.keyCode == 65) { // A
            hypeDocument.startTimelineNamed('timeline-1');
        } else if(event.keyCode == 66) { // B
            hypeDocument.startTimelineNamed('timeline-2');
        }

In detail, that’s what I want:
Press Letter 1 (A): timeline-1 starts and letter A will be displayed in the scene.
Press Letter 2 (B): timeline-2 start, Letter A stays in place, and the next letter B shows up.

I care about:

  • If I press any other letter (D,E,F…) nothing should happen.

I don’t care:

  • If I press B first, it’s okay, when something goes wrong. I will press the keys in the presentation.

Maybe someone knows of a good template for me?

Thanks!

2

maby this is what you´re looking for. i use this to start timelines or call functions …
keypress.hype.zip (47,9 KB)

also you have to stop current timeline, if it was played:

if(event.keyCode == 65) { // A
        hypeDocument.startTimelineNamed('timeline-1');
        var tl = hypeDocument.currentTimeInTimelineNamed('timeline-1');
          if(tl ==1){
                 hypeDocument.pauseTimelineNamed('timeline-1') 
         }
     }
    } else if(event.keyCode == 66) { // B
        hypeDocument.startTimelineNamed('timeline-2');
    }
3 Likes
3

Hey, thanks for your help! This file did help me a lot.

Unfortunately I got a problem.

document.onkeydown = checkKey;

function checkKey(e) {

e = e || window.event;

if (e.keyCode == '76') {
    // L
    hypeDocument.startTimelineNamed('Insert_L', hypeDocument.kDirectionForward);
    hypeDocument.pauseTimelineNamed('Hauptzeitachse')
}
else if (e.keyCode == '77') {
    // M
    hypeDocument.startTimelineNamed('Insert_M', hypeDocument.kDirectionForward);
}
}

Wanted direction of pages:
Frontpage > L > M

When I press L on the first page, Hype does start the timeline “Insert_L” for me.
But afterwards I’m not able to press M anymore. Why?

When I press M first, it jumps to timeline “Insert_M” without any problems.

How to solve that problem?

4

it´d be helpful if you post your doc to test.

5

Hey,
that’s the file:

{deleted}

6

you have to put this keycode in a function

var key = function (e) {
e = e || window.event;
var k = e.keyCode || e.which;

 //L
if (k == 76) {
hypeDocument.startTimelineNamed('Insert_L', hypeDocument.kDirectionForward);
hypeDocument.pauseTimelineNamed('Hauptzeitachse')
};

//M
if (k == 77) {
hypeDocument.startTimelineNamed('Insert_M', hypeDocument.kDirectionForward);
};
};

document.onkeydown = key;

and

document.onkeydown = key;

must be at the end.
attached working example, if it is what you want to do?!? :grinning:

StartseiteKorr.hype.zip (354,5 KB)

2 Likes
7

Hey, I totally forgot to respond. Thank you for you work! Unfortunately the problem did not disappear.
If you take a look into the Insert_M timeline, you will notice that the animation is different from the animation that is being played after pressing the second letter.

When I press L (first letter), everything is fine (Intert_L timeline starts), but when I press M (2nd letter), just one part of the animation is being activated.

When I skip pressing L (Letter M first), everything is fine.

I did not figure out why?

Thanks! :slight_smile:

8

i cannot follow your logistic meaning of this game,
but you can see, the keys are working and the timelines are playing.
i always create a rectangle to see, whats going on.
you´re hiding the letter in the wrong place in “Insert_M”.
so, this timeline is played, but the letters aren´t shown.
in “Insert_L” you have to record visible, what will come visible in “Insert_M”.

here´s the working example - enjoy!
StartseiteKorr.hype.zip (358,1 KB)

1 Like
9

Thank you very much! I absolutely didn’t figure out the problem.