Same timelines (7) on different scenes

1

Hello ! I’m new here. I would like some help or explanations about timelines :
1- I have a document with 24 scenes, each scene is a page of a book.
2- I created 9 timelines for hide elements which are old photos. I created 9 buttons for play this timelines in javascript (if/else condition)
3- I created
one scene with the animation complete, and then I duplicate for having 24 scene at last

  • For the first page/scene, everything is alright, but at the second page/scene, it seems to need again 9 new timelines with specific names !
    It’s very waste of time because I have 24 page/scene with 9 buttons each time !
    I believed the timelines need specific name inside each scene, but are they need to be specific inside a whole document hype with 24 scenes ?

thank you very much every body, it’s getting urgent now !

2

Each scene has it’s own unique Timelines.

It may be worth you doing the “hide” in javascript instead of using timelines.
You most likely would need to use class names for the elements which give you scope to keep the code short.

Quick example. This also using an exention in the head file which helps select the element with the same class name on the current scene.

Each element on the scenes have the same corrosponding names, and the JS uses the extension to get the current scene element and only interact with the correct elements on that scene instead of all the elements in the document.

 var sceneInfo = hypeDocument.sceneInfo()
var currentSceneElement  = sceneInfo.sceneElement;

var el1 =  currentSceneElement.querySelector('.el1') ;
var el2 =  currentSceneElement.querySelector('.el2') ;



if (element.id == "b1"){

 	 hypeDocument.setElementProperty(el1, 'opacity', 1, 1.0, 'easeinout')
return;
}  

if (element.id == "b2"){

 hypeDocument.setElementProperty(el2, 'opacity', 1, 1.0, 'easeinout')
return;
}

The button are a persistant symbol across all scenes. And we can use the id of each button…

ShowOnScenes.hype.zip (22.8 KB)

If you post and example of your setup and JS , we may be able to help you better.

3

OhOh… I I’m just a beginner in javascript, very difficult for me to understand you. anyway, I give my document (I delete scenes 5 to 24). Just keep in mind that it’s in progress, and maybe not well done, but I try to make it simple.
You will see : it’s ok on scene “etape1” but not on “etape2”. even if it’s the same code.
thanks !
https://drive.google.com/open?id=0BwFiDTkcOl_UdC1reV8wOS1fSE0

4

I MADE IT ! I think I just forgot an } at the end of line ! I’m so sorry to disturb you ! I’m just to ridiculous !
But by the way, as now you have my document, just maybe you can observe that we need 2 clic on the button to trigger the animation (and only for the first time), any explanations ?
thank you anyway
Nirmala

5

The project is like looking through Spaghetti… :smile:

Your problem by the looks of it is when in the code you first check the display of the photo group the returned value is “inline”. Not “block” or “none”

But your **if clauses ** is looking for display == “none” .
Because it is “inline” it goes to the else block of code and sets it to “none” . The next click then works.

To be honest I do not think you need the if clause any way and can get away with just setting things as you need them.

i.e

hypeDocument.getElementById('Sphoto201').style.display = "block";
	hypeDocument.getElementById('Sphoto101').style.display = "none";
	hypeDocument.getElementById('Sphoto301').style.display = "none";
	hypeDocument.getElementById('Sphoto401').style.display = "none";
	hypeDocument.getElementById('Sphoto501').style.display = "none";
	hypeDocument.getElementById('Sphoto601').style.display = "none";
	hypeDocument.getElementById('Sphoto701').style.display = "none";
	hypeDocument.getElementById('Sphoto801').style.display = "none";
	hypeDocument.getElementById('Sphoto901').style.display = "none";
	hypeDocument.getElementById('vid01').style.display = "none";
	
	
	hypeDocument.startTimelineNamed('photo201', hypeDocument.kDirectionForward)

No if clause.

If you wanted to cut down on code. You could just use one function that all the buttons trigger.

To do this you give all the photo groups in all the scenes the same class name.

i.e photogroup

Rename the timelines in each scene.

scene one’s stays the same Sphoto101 through to Sphoto901
scene two’s timeline names change to Sphoto102 through to Sphoto902 and so on with the other scenes.

In each scene you give the buttons the corresponding names that match the timeline it will run but without the “S”

i.e

scene one’s button ids will be photo101 through to photo901
scene two’s button ids will be photo102 through to photo902.

All buttons point to the same function which will work out from the buttons id and the scene name ( the last digit ) which timeline to run, which video to hide and which image to display to block.

	var elID = element.id;
	var photogroup = document.querySelectorAll('.photogroup');
	
	
for (i = 0; i < photogroup.length; i++) { 
  photogroup[i].style.display = "none";//-- this initially sets all the photo groups to none , from inline at the start. This is the simpliest place for it
 if (photogroup[i].id ===  "S" +elID ) {
 
 photogroup[i].style.display = "block";
 
  
 }

var theVidID =  "vid0" + hypeDocument.currentSceneName().substring( 5);
 
hypeDocument.getElementById(theVidID).style.display = "none"; 
 
	
hypeDocument.startTimelineNamed(elID, hypeDocument.kDirectionForward)


}

ebook-test-hypeForum01_MHv1.hype 2.zip (2.8 MB)

NOTE: I have removed the videos so I could post this back here. You will need to re add them…

1 Like
6

oooookkkkk! first thank you for the time spend on my project, then I understand the first part of your message, but not really the second part. I didn’t know that it’s possible to rename timelines in each scene, but now I will remember it. So I think I have not enough knowledge about Javascript to understand, but the first solution (no if/else) is efficient and simple, so I take it. What I have to do now, it’s to learn (really) javascript, and then work on your second solution.
Thanks for all, hope this topic can help anyone else !
enjoy spaghetti ! :wink: