Can I control the timeline with Javascript?


(Greg) #1

I would like to control the timeline with Javascript and if/else statements but I don’t know how to write up the code for that.

So for example, if the current time on the timeline is 5 seconds, I would like the timeline to move forward by 2 seconds. But if the timeline is 7 seconds, I would like the timeline to move back by 2 seconds (back to 5 seconds).

I would appreciate help with the code as I don’t know how to check current time, and play the timeline (forward and in reverse) with javascript.

Thanks!


(Greg) #2

Try a search of this forum for “timeline javascript”…

http://forums.tumult.com/search?q=timeline%20Javascript


#3

Hi Greg!

I would definitely check out the posts that @gasspence links to.

I have created a demo Hype Project: timelineAdjust.zip (17.7 KB) that shows a bare bones example.

In this Demo project the buttons at the “5” second & “7” second mark trigger a function called “timelineAdjust”. We use the variable “whatTime” to get the current time (expressed in seconds) in the “Main Timeline” when the button is clicked. If you look in the Script Editor under the “Timelines” sub-head You will find some useful code for working with Timelines (please see screen shot at the bottom of this post).

Note: In this Demo We are not playing the timeline forward and back - rather we are jumping to a specific time on the Timeline. If You want to play back and forth then insert something like:

"hypeDocument.continueTimelineNamed(‘Main Timeline’, hypeDocument.kDirectionForward)"
and
"hypeDocument.continueTimelineNamed(‘Main Timeline’, hypeDocument.kDirectionReverse)"

in place of “hypeDocument.goToTimeInTimelineNamed…” in the code.

You would then probably want to put a “Pause Timeline” Timeline action at the 5 & 7 second marks.


Just below: the “timelineAdjust” function

    whatTime = hypeDocument.currentTimeInTimelineNamed('Main TimeLine');

	if(whatTime == '5') {
		hypeDocument.goToTimeInTimelineNamed(7, 'MainTimeline');
	} else if(whatTime == '7') {
		hypeDocument.goToTimeInTimelineNamed(5, 'MainTimeline');
	}


Screen Shot showing the bottom left of the “Script Editor” screen.


(Greg) #4

WOW!!! Thanks a lot for the code JimScott. I just started learning JS and often struggle with the syntax. It’s also useful to have a list of functions which can be used to control the timeline. Finally, I just realised you can use multiple timelines in one project but I still want to learn the code.


#5

@grzesiek.rogala

You are welcome Greg!

A book that really helped me get a grip on the general concepts of JavaScript is: “JavaScript & jQuery: The Missing Manual” (Amazon has used versions for around $15)

Even if You are not interested in learning jQuery (a JavaScript library) - the introduction to JavaScript itself is excellent and worth the price of admission just for those parts of the book. A very succinct informative read that does not overwhelm You with detail and in lucid terms goes into the vocabulary, syntax & grammar of JavaScript.

The book in general is aimed at designers not gear heads.

There are an abundance of useful examples that are well annotated; with none of the sort of thing that can sometimes crop up in these types of introductory books - “Why did they do that?!!”

==========

Another recommended read is from one of the denizens of the Hype Forum: @Photics
"A Book About Hype"
https://photics.com/books/a-book-about-hype/

I found this book to be a good introduction to Hype and well worth the $$. ( I know - your beer money is taking a hit this week ;-> )

The main value to these reads is they will quickly get You up to speed on the basics and will allow You to really take advantage of the specialized (and often advanced) knowledge found on this Forum.