Howto: Navigate Scenes with Arrow Keys (Similar to a Powerpoint or Keynote Presentation)

To navigate between scenes by pressing the Left and Right arrow keys, add the following JavaScript to the Head of your document. You can edit the contents of the … of your exported .html file by clicking on 'Edit HTML Head' in the Document Inspector.

If you just want to use this function on a single scene, run this code to run ‘on scene load’:

document.onkeydown = checkKey;
function checkKey(e) {
    e = e || window.event;
    if (e.keyCode == '39') {
        // right arrow
        hypeDocument.showNextScene(hypeDocument.kSceneTransitionPushRightToLeft);
    } else if (e.keyCode == '37') {
        // left arrow
        hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionPushLeftToRight);
    }
}

You may also download the attached document for a real world example: keypress.hype.zip (47.4 KB)

Want to navigate with 'X' and 'C'? Here's a list of all keycodes via: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

7 Likes

I just bought Hype for bringing Keynotes presentation to the next level.

I’ve a lot of element moving on the scene one-by-one and I discovered how I can control individual animations using keypress with “scene - on key press”.

But when I’m done with my scene animations (which means there are no animations left) I would like the keypress to trigger a jump to the next scene.

Because I’m using a remote controller which emulates the mouse click, putting a button with a “next”-behaviour is not a option.

Any idea how I could achieve that ?

TIA

Take a look at the Scene inspector. Is this what you’re looking for…?

1 Like

Thats a good call by @warrenao.

You would need to set the keypress to all your scenes.

Or you could place this in the Head

<script type="text/javascript">	
    	document.onkeypress = function (e) {
   // e = e || window.event;
   
   var thisName = 'Keypress Test'; // This is the name of your exported document
   
  var docNameCheck =  HYPE.documents[thisName] ;
  if (docNameCheck == undefined){
  thisName = 'index'  ; //- this is for testing within hype
  }
  
  
  HYPE.documents[thisName].functions().kp(HYPE.documents[thisName]) ;
  
 
    
};
    
    </script>

Which will then act on all scenes.

You will need to use your documents name.
i.e I exported my document out as “Keypress Test”

Keypress Test” is the document name that hype will use when you have exported it.

The 'index’ is the name of your hype document while previewing in hype

This code will allow you to Preview in hype and export without having to change things each time.

Just make sure you put your document name first for the : var thisName =

2 Likes

@VikingBrent @ MarkHunte

Thank you guys for those quick answers.

I realize I had to add some more details about my expectations.

I’ll try to describe it rightly…

On my timeline: I’ve some elements moving through the scene. After each mov, I use the timeline action “pause timeline”.

In the scene action, by the “on key press” action, I’ve set the action “continue timeline”.

The combination of the two allows me to trigger one action by a keypress.

At the point the scene is out of actions (read: animations), I would like the next keypress to trigger a jump to the next scene.

Both solution presented bypass the animations and result in a jump to next scene.

I hope this clarifies the situation a little bit. So, any suggestions … ?

Thanks a lot guys !

Hi @reboltof ,
I have been away so have just seen this. Can you post the hype doc

Thanks Mark for your help.

By trying and error I got yesterday to find the solution for my problem, by mixing the “head” code you proposed, and playing with the “click” actions and time line actions. Now I’m in control of my presentation :smile:

1 Like

Hi, why not just put a timeline action after the last “pause” and select Jump to next scene?

Hi,
Are you sure you posted this on the right thread??

For anyone who wants to be able to use pause timeline to use keys (or remotes) to navigate through transitions within Scenes, I modified the above code as follows:

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

var nextKeys= [40, 34, 52]; // keys to advance to next scene: 40 = down arrow, 34 = page down, 52 = 4 (>> on ikan)
var prevKeys= [38, 33, 50]; // keys to move back to previous scene: 38 = up arrow, 33 = page up, 50 = 2 (<< on ikan)
var unpauseKeys= [39, 48, 51, 32]; // keys to unpause timeline: 39 = right arrow, 48 = 0 (>|| on ikan), 51 = 3 (> on ikan), 32 = space
var reverseKeys= [37, 49]; // keys to reverse timeline  37 = left arrow, 49 = 1 (< on ikan)


$(function(){
	$( "body" ).keyup(function(e){
	var hypeDocument = getHypeDocument();
		var t = transitionType(hypeDocument, transition);
		if($.inArray(e.which, nextKeys) > -1){
			hypeDocument.showNextScene(t[0], speed);
		}else if ($.inArray(e.which, prevKeys) > -1){
			hypeDocument.showPreviousScene(t[1], speed)
		}else if ($.inArray(e.which, unpauseKeys) > -1){
			hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false)
		}else if ($.inArray(e.which, reverseKeys) > -1){
			hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionReverse, false)
		}
	});	
});

function transitionType(hypeDocument,type){
	var result = [hypeDocument.kSceneTransitionInstant, hypeDocument.kSceneTransitionInstant];
	if(type == "fade"){
		 result = [hypeDocument.kSceneTransitionCrossfade, hypeDocument.kSceneTransitionCrossfade];
	} else if (type == "swap") {
		result = [hypeDocument.kSceneTransitionSwap, hypeDocument.kSceneTransitionSwap];
	} else if (type = "push") {
		result = [hypeDocument.kSceneTransitionPushRightToLeft, hypeDocument.kSceneTransitionPushLeftToRight];
	}
	return result;
}

function getHypeDocument(){
	var name = "index";
	for(var key in HYPE.documents){
		name = key;
  	}
  	return HYPE.documents[name];
}

</script>

That seems to work for me, although it would be great if the gurus here could check if I’ve done anything bad, or advise if there’s a better way.

I have included keys that work for my ikan Elite Remote, and may well work for other similar bluetooth remotes. These are in addition to space, arrow keys and page up/down. Down and up skip to the next/previous scene, space and right resume the timeline and left reverses the timeline.

4 Likes

This is great, thanks for sharing!

Thank you sooo much! This was a great help! I’m a total noob to JS but I was able to add some functions that I need, based off of your code.

3 Likes