Controlling a symbol timeline with Javascript


(jangeltun) #1

I’m new to Javascript, and I’m trying to continue a symbol timeline with Javascript from the scene timeline.

I’ve attached a test file.

symbol timeline test.zip (11.7 KB)


(Steve Flowers) #2

There might be another way, but I’d tackle it through custom behaviors. Within your symbol, create a custom behavior to run the timeline you want to continue.

Then you can trigger this either using a regular action or through Javascript like this:
hypeDocument.triggerCustomBehaviorNamed(‘symbol-run-color’);

symbol timeline test.zip (21.8 KB)


(jangeltun) #3

Thanks Steve!

The custom behavior is a great solution.

Joachim


(Alexandre Yamamoto) #4

I also have the same question. The custom behaviors do work for simple stuff, but I have a more complex situation which requires some javascript to control the timelines inside a symbol.

Essentially, I want to create a button that when CLICKED, it TOGGLES the timeline. No, I don’t want to mouse over or something else to reverse or continue the timeline. I do need the button to toggle the timeline INSIDE a symbol.

I know this script works for timelines in current scene:

if ((typeof this.timelineState == "undefined") || (this.timelineState == "LR")) {
hypeDocument.playTimelineNamed("departament-menu-click");
this.timelineState = "RL"; } else {
hypeDocument.playTimelineNamed("departament-close");
this.timelineState = "LR"; }

I want this same script to toggle timelines inside symbols. Can you guys help me with that, please?

Thanks in advance.


(Hans-Gerd Claßen) #5

hope this’ll work for your needs:
toggle.hype.zip (12.2 KB)

Nice day :smile:
Hans


(Steve Flowers) #6

Don’t know of a way to do that aside from creating 2 custom behaviors and a global variable to track state.

Unless I’m wrong, there’s no way to target a timeline inside of a symbol from outside of the symbol without custom behaviors. Or… you could setup a variable listener inside of your symbol and switch the variable value with Javascript from your main timeline. Seems like a custom behavior would work just as well.

Is it possible to put your button inside of the symbol, or does the symbol move too?


(Steve Flowers) #7

Ah! I’m guessing this is what h_classen posted. Looks like there’s an easier way to do this than custom behaviors:
http://tumult.com/hype/documentation/3.0/#symbols131

cSymbol=hypeDocument.getSymbolInstancesByName("symbol-name")
cSymbol.startTimelineNamed("departament-menu-click", kDirectionForward)

(Alexandre Yamamoto) #8

Thanks a lot man! This worked like a charm!!


(Alexandre Yamamoto) #9

Yeah, it worked. Thanks a lot too stflowers. I think this post should be pinned down. I mean, lots of people without javascript knowledge might don’t know how to do it yet.


#10

For others with this question, this post explains how to target a symbol with JavaScript:


(Tim Bobo) #11

Ok I am stumped.

cSymbol=hypeDocument.getSymbolInstancesByName('letter-A')
console.log (cSymbol);
cSymbol.startTimelineNamed('Main Timline', hypeDocument.kDirectionForward);

I have this in my script. And the console.log shows me that I have the symbol with all the functions and everything. But then if gives me this error say that cSymbol.startTimelineNamed is not a function.

[Log] Error in resetKeyboard: TypeError: cSymbol.startTimelineNamed is not a function. (In ‘cSymbol.startTimelineNamed(‘Main Timline’, hypeDocument.kDirectionForward)’, ‘cSymbol.startTimelineNamed’ is undefined) (HYPE-552.thin.min.js, line 14)

I am sure I am doing something wrong, but what is it?


(Tim Bobo) #12
cSymbol=hypeDocument.getSymbolInstancesByName('letter-A')
console.log (cSymbol);
cSymbol[0].startTimelineNamed('picked', hypeDocument.kDirectionReverse);

I needed t reference the first hit in the array. Now it is working.


(Tim Bobo) #13

Just in case anyone finds this later. I almost alway set up behaviors in my symbols now to start timelines. Much easier and quicker, and I can modify them to do more than start a timeline if I want. Still nice to know how to start one manually, but I highly recommend just setting up a behavior with each symbol that has a timeline you want to control with Javascript. Call the behavior and your are done.


(Tim Bobo) #14

I am reviving this old conversation go ask a question. Can you trigger a custom behavior for a SPECIFIC symbol. I have a bunch of toggle buttons that are all one symbol with many instances. I am able track the state of each one by the ID. But it would be nice to be able to call a custom behavior to set each one to a specific value. But it seems that custom behavior hits every instance of the symbol. So I can turn them all off or all on, but I cannot target one to trigger the behavior. Let me know if I am wrong. For now I am just going to write javascript to manipulate the timelines manually, but it is more cumbersome than just being able to use the behavior.


Hype GlobalBehavior (Custom Behavior Extension)
(Mark Hunte) #15

Can you post a quick example, saves us re inventing the wheel.
It would be much easier for use to possibly help if you post something


(Jonathan Deutsch) #16

It is correct you cannot target a specific symbol instance with a custom behavior. The best way to do this right now would be in javascript to use hypeDocument.getSymbolInstanceById(id) and then use the Hype API on that result to perform any timeline operations.


(Tim Bobo) #17

Thanks Jonathan, that is exactly what I did. It was simple enough.