If two buttons are clicked - play timeline

Using JavaScript with Hype
1

I’m quite new to hype and fairly new to javascript and can’t get it to work. Was wondering if anybody knows the solution?

Multiple buttons on a page with different variables but if two of them (A,C) are clicked it will play a timeline (A,C).

If two different buttons are clicked (A,B) it will play the timeline (A,B).

In over my head on this one.

Thanks,

Ben

2

Okay, I’ve triggered this using click masking instead and multiple timelines. If anyone has a cleaner way using variables please let me know :slight_smile:

Thanks!

3

Here is an example with JS.

All there buttons have an id each. a_button, b_button, c_button
All three buttons have the same class added timelineButton

All three buttons call the same function.

At the end of both timelines there is a timeline action that also call the same function.

The buttons will change colour when clicked. To start a timeline button A must always be clicked first.
When a timeline has completed the button colours will reset.

The function is full commented.

	//-- we need a global var so if it does not exist we create it
	if (! window.currentClicked ){window.currentClicked = ""}
	
	//-- create array of all buttons with a class timelineButton
	
	var timelineButtons = document.querySelectorAll(".timelineButton");
	
	
	 //-- Each end of timeline has a Timeline Action to call this function. We check if this call was that.
	if (element.className === "HYPE_scene" ) {
	
	//-- end of timeline playing so we reset the button colours
	Array.prototype.map.call(timelineButtons, function(obj) {
	obj.style.backgroundColor = "#E8EBED" });
	
	//-- we use return to exit this whole function at this stage and not continue.
	return;
	}
	 
	 //-- A button called the function so we get it's ID.
	var buttonID = element.id;
	
	
	//-- We see if it was button A that was clicked 
	if ( buttonID == 'a_button' ) {
	//--if so we put it's ID into the global var.
	window.currentClicked =  buttonID;
	//- change its colour
	element.style.backgroundColor = "#FFFC79";
	
	//-- we use return to exit this whole function at this stage and not continue.
	return;
	}
	
	//-- To get here buttons B or C must have been clicked.  We check which one and also if button A has already been clicked.
	if  ( buttonID == 'b_button' && window.currentClicked === 'a_button') {
	
	//-- we run the correct time line
	hypeDocument.startTimelineNamed('AB', hypeDocument.kDirectionForward) 
	//- change the buttons colour
	element.style.backgroundColor = "#FFFC79";
	//-- we reste the global var
	window.currentClicked = "";
	
	//-- we use return to exit this whole function at this stage and not continue.
	return;
	}
	
	if  ( buttonID == 'c_button' && window.currentClicked === 'a_button') {
	hypeDocument.startTimelineNamed('AC', hypeDocument.kDirectionForward) 
	element.style.backgroundColor = "#FFFC79";
	window.currentClicked = "";
	return;
	}

MultiButtonClicked_MHv1.hype.zip (19.2 KB)

4 Likes
4

YOU ARE MY HERO! Thank you!

1 Like