Control timeline with Javascript | Play from a certain time on the timeline


(Jeroen) #1

Hello,

I’m just starting to use Hype 3.0. I’ve used Adobe Edge in the past and I’m testing Hype at the moment. I’d like it a lot. I have a question about controlling the timeline with javascript.

I have an image slider with 5 image thumbs. I’ve read on the forum about image sliders that were made with different timelines. I’m trying to do it different. I don’t know if it is possible so I hope someone can assist me.

When a thumb is clicked it will play from a certain time in the timeline. When the slider is after a certain time in the timeline and the thumb will be clicked then the slider will play reversed from a certain time in the timeline.

In Adobe Edge it works with the following script. Is this also possible in Hype?

var mainTimeline = sym.getComposition().getStage();

if (mainTimeline.getPosition()<=2000){
mainTimeline.play(1001);

}

else if (mainTimeline.getPosition()){
mainTimeline.playReverse(2999);
}

When the slider is before the 2 (2000) second point the slider will play forward. Everything behind the 2 second point the slider will play in reverse and start just before the 3 second point.

I hope this is possible. I’m more a designer then a programmer but I have a little knowledge of javascript.

Thanks


(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #2

I’m not exactly sure what you’re trying to do, but here’s some general information.

You could create a script that uses the “element” that is clicked. That way, you only need one script. So, if “button1” was clicked, the “element” value will equal “button1”.

Then, a corresponding timeline will be checked. They can have the same names.

Using the Hype JavaScript API, the current time can be grabbed.

var value = hypeDocument.currentTimeInTimelineNamed(element)

So, that should return a value. Based on the time, the timeline can be played forward or backwards.

Anyway, that’s just theoretical. I’m still waking up.


(Jeroen) #3

Ok, i’m going to try it out. Thanks

Be more clear if you click for example button2 I want the timeline to start at 2 seconds and it stops at 3 seconds with a pause on the timeline. When someone is for example at the end of the slider and the person clicks on button2 I want the timeline to start at 3 seconds and play in reverse to the 2 second point.


(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #4

You can add “Timeline Actions” to stop a timeline. So, at the 3 second location, there would be a timeline action that pauses the timeline. The problem is that timeline action might stop the action when the timeline is played in reverse… from 3 to 2.

To prevent that, you could start the reverse at just below 3 seconds or you can add a JavaScript to the Timeline Action. Detect the direction the timeline is going. If forward and the timeline is >= 3, then pause. Otherwise, play in reverse. Variables might he helpful to keep this straight.


(Hans-Gerd Claßen) #5

to go with relative timelines should give expected results link


(Jeroen) #6

Is it possible that you give me an example of the script?


(Jeroen) #7

Hello Hans,

I’ve seen your example before. But I don’t want to see all the images when the slider needs to go from the end to the beginning.

Thanks anyway for your tip!


(Hans-Gerd Claßen) #8

just provide a sample and your wishes become clearer :slight_smile: may be show the edge result would be the best


(Jeroen) #9

Here is the example file. I quickly change the images for copyright matters. So the images aren’t in proportion.

example.zip (2.7 MB)

And here is the link to the page what is made in Adobe Edge (it hangs because of a stop function on the timeline. You need to press the next button underneath the text):
Link to the Edge example

Thanks for helping!


(Mark Hunte) #10

So you have two buttons in the example that continues the main timeline in either directions.
And you want to be able to click the thumbnails and jump to the correct time in the timeline for that thumb instantly.

Is that right.?

With the current setup all you need to do is add the mouse click actions on the thumbnails to go to time in timeline…

Also with you current setup you do not need to make the timeline relative.

But I would move your animations of the main timeline and onto a new one. Doing all of them on the main timeline can limit future needs.

To do this simple duplicate the main timeline in the Scene inspector.
Rename the new Timeline.

Remove all the animation keyframes and actions from the main timeline.

Go to the new timeline remove the first Pause action. Then change all the others to pause the new timeline.
Change all your mouse clicks to continue the new timeline instead of the main one.

This should take you about 1min or less to do so I have just done it here.
You will notice that not having the first pause means you do not have to click twice now for the first button click.exampleSlide.hypetemplate.zip (2.8 MB)


(Hans-Gerd Claßen) #11

xxx.hype.zip (2.7 MB)

mixed up marcs and yours document a bit :slight_smile: guess this way it works like the edgeexample …


(Mark Hunte) #12

Oh, I see, did not want instant or to se ALL of them slide past. But slide it must.


(Jeroen) #13

Wow, great work! Thanks for the marvelous support!!!


(Jeroen) #14

Hello Michael,

I have a new problem and I think your solution will do the trick. The other solutions (further in this post) were great and I used it for another project. I created a demo project so you can see what I’m talking about. It is also a slideshow and this will be controlled by 4 bullets. I’ve tried a lot of solutions to implement your suggestion, but I can’t figure it out. If you have the time could you look at the Demo file and create a start for me. I have a little knowledge of javascript.

I hope you can help me out.

Thanks

Bullet-Demo.zip (314.1 KB)


(Jeroen) #15

I found the solution. Again use multiple timelines and set to relative. I’m new to multiple timelines but I get the hang of it.