If two buttons are clicked - play timeline


(ben) #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


Onclick function Call doesn't work in smartphone browser / ipad safari etc
(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!


(Mark Hunte) #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)


(ben) #4

YOU ARE MY HERO! Thank you!