Using Hype to Create a Slideshow with Random Image Order


(Andy) #1

This might be a feature request, but it might not. What I want to do is use Hype to create a slideshow that draws from a set list of images, but always in random order each time the page loads. Additional features desired include that the transition between images be configurable, and the images are links. Can I do this in Hype today? If so how? Thanks for your help. :smiley:


#2

It can be done with JavaScript… especially if all of the images are all the same size.

  • Create an array of image names and links.
  • Drag and drop the images into the library
  • Use JavaScript to change the contents of a DIV

Here’s how you can access library images manually… Newbie Question

…and document.getElementById(“ID-NAME”).innerHTML can be used to change the content inside an HTML element.


#3

If you had separate images loading on separate timelines, here’s how you can trigger separate timelines:

var timelineNamesForJumping = ["Timeline A", "Timeline B", "Timeline C"];
var randomTimelineIndex = Math.floor(Math.random() * timelineNamesForJumping.length);
var randomTimelineName = timelineNamesForJumping[randomTimelineIndex];

hypeDocument.playTimelineNamed(randomTimelineName);

Or if you instead had your images on random scenes, here’s how you can jump to random scenes:

var firstSceneIndex = 0;
var lastSceneIndex = hypeDocument.sceneNames().length - 1;
var randomSceneIndex = 0;
var currentSceneIndex = hypeDocument.sceneNames().indexOf(hypeDocument.currentSceneName());

do {
randomSceneIndex = Math.floor(Math.random() * (lastSceneIndex - firstSceneIndex   1)   firstSceneIndex);
} while (randomSceneIndex == currentSceneIndex );

var randomSceneName = hypeDocument.sceneNames()[randomSceneIndex];

hypeDocument.showSceneNamed(randomSceneName);

Knowledge base: Guides from the Tumult Team
(theron_hp) #4

Hi Daniel

The random display of the scenes in my project is exactly what I need. I tried implementing your script for random scenes when a specific timeline finishes. (…finish. Every layout in a scene has a timeline like this) It does not trigger anything yet. I implemented your scripts as is, and do not know if I need to customise it. I thought I would not need to, so I will really appreciate it if you could assist.

The project is attached.

Gclef_DnD.hype.zip (1.4 MB)
Kind regards


#5

Hi @theron_hp

You need to replace this line in your JS function

randomSceneIndex = Math.floor(Math.random() * (lastSceneIndex - firstSceneIndex   1)   firstSceneIndex);

with

randomSceneIndex = Math.floor((Math.random() * (lastSceneIndex - firstSceneIndex)) + firstSceneIndex);

This will then give you random scenes after you correctly choose the right note (*finish timeline is triggered)

D


(theron_hp) #6

Thanks DBear. Prefect!


(justincarter) #7

Hello - i was wondering if you could help me out further with this js code - I’m doing 100 or so random scenes with it and i was wondering if there was a way to make it so it didn’t repeat a scene.

Thanks,
Justin


#8

HI @justincarter

As I am feeling generous … here is an example using the code above but tweaked so that it will not repeat a scene and will also include an opportunity to fire a possible action at the end of the sequence.

Obviously, you can adapt it, if you need to, to your own project.

randomScenes.zip (101.9 KB)


(Ryan Thorpe) #9

I’m very new to javascript. Is there a way within this code to protect scenes from the random selection? I see the main scene is eliminated as a possibility but what about only looking to show random scenes from a small group of them? Thank you!


#10

Hi Ryan @T76

Using the template document above (randomScenes.zip) you can change the init() function and instead of creating an array using the built in Hype function (hypeDocument.sceneNames()) you can just create an array of the scenes you want. e.g

if (window.array) { // check for array and if it exists do nothing, else create it
	
	} else {
		window.array = ["Main Scene", "Scene3", "Scene7", "Scene5"];
		array.shift();
		window.sceneNames = array;
	}

(Ryan Thorpe) #11

Fantastic! Thank you!


(Paul Baird) #12

Hi Daniel,

Long time no speak and I’m delighted to see how successful and how amazing hype has become since we started using it…

I have a question that I hope you can answer for a project were working in - I used the above example to automatically start a scene in hype - Works really well.

However I want to adapt it slightly but my java is terrible and I cannot get my head around how.

Is there a way to exclude a scene from playing even if its there –

The reason is say I have Scenes 1,2,3,4,5,6
But say Scene 4 automatically goes into 5 – Ie I never want to start with 5. - Reason is on some complex animations we may have more than one scene – Think of them as chapters … Some made of one scene (Thats fine) but some say of several scenes

Would there be a way to exclude a scene, and not count the scene so its random nature is still random ?

I can see this in the code on how it plays a scene

// show the random scene
hypeDocument.showSceneNamed(randomSceneName);

Thanks


(Paul Baird) #13

Doh - Ignore that I just read the next post…