Symbol timeline behaviour question

I have a simple animation inside a symbol called “Bug_Box_Glow”. At the end of the symbol’s timeline there is an Timeline Action: Go to Time in TImeline, Main Timeline (which I guess means the main timeline of the symbol?), Time 00:00:00 This should cause the symbol’s timeline to go back to the start and stop, if I understand correctly how timelines work in HYPE. However, when I trigger the symbol’s time line from a button using this:

var symbolInstance = hypeDocument.getSymbolInstanceById(‘Bug_Box_Glow’);
symbolInstance.startTimelineNamed(‘Main Timeline’, hypeDocument.kDirectionForward);

What happens is that the Bug_Box_Glow timeline plays to the end, and when it hits the Timeline Action to return to the start, it starts playing from the start again, rather than stopping at 00:00:00.

Is there a way I can get the symbol to actually stop rather than continuously loop?

Thanks for any help.

@Daniel
Hmm does seem to be a bug in Go to Time…

I tried a new proj and normal elements. It does the same thing… ( even on a different timeline other than Main)

Thought it may be a version thing on the Mac I was on was the last version before the recent update. But no after update same thing

blur.hype.zip (9.2 KB)

I see. Thanks for checking it out. I wonder if there is work around for what I need to do. Maybe js could be used? Though I’m not sure how that would work in HYPE. Basically I’d need to tell the timeline of a symbol to go to a particular position and stop. But that timeline would then need to be free to start again when triggered by another button.

Just add a pause action after the GTT

Thanks, but what is “GTT”?

I need to somehow add the pause to this I guess?

var symbolInstance = hypeDocument.getSymbolInstanceById(‘Bug_Box_Glow’);
symbolInstance.startTimelineNamed(‘Main Timeline’, hypeDocument.kDirectionForward);

Any help with that would be hugely appreciated. Thanks.

the timelineaction … should consist of two actions …
first got to time
second pause timeline

Got To Time...

Can anyone give me an idea of how to amend my code to include a pause?

var symbolInstance = hypeDocument.getSymbolInstanceById(‘Bug_Box_Glow’);
symbolInstance.startTimelineNamed(‘Main Timeline’, hypeDocument.kDirectionForward);

I tried to do all this using the built in actions but I could see no way to choose one of the symbol’s timelines. The choices are Main Timeline and create new. But I could see no way of accessing the already existing timelines of symbols.

Thanks for all the help.

@Antiphones

Hype project Demo: Symbols_Timelines.hype.zip (13.2 KB)

I went the "Timeline" route here - along with a "Custom Behavior" - no scripting. After You read this post revisit @h_classen & @MarkHunte's replies - I believe this was what they were referencing.

Details:

Step 1
Open the Symbol called "Symbol Pink Square" to view the timeline "Timeline 1" (could have used "Main Timeline" for this Symbol instead). The element "Pink Square" inside the Symbol simply moves to the right over a (3) second time period.

At (3) seconds there is a "Timeline Action" with two parts:
• "Go To Time in Timeline..." (Time: "0" seconds) followed by a
• "Pause Timeline" - both set for "Timeline 1".

18 AM



Step 2
In the symbol "Symbol Pink Square" I created a "Custom Behavior" (near bottom of the "Symbol Inspector") called "Custom01" which Continues... "Timeline 1", and has the "Can restart timeline" box checked.

46 AM


Step 3
A button was created and assigned a "Trigger Custom Behavior..." action using the "Custom01" behavior in the "On Mouse Click" handler of the "Actions Inspector".

03 AM

Thanks for this Jim! The only thing is, I need to play a timeline which is inside a symbol. How do I use the method above to play, not the main timeline, but a specific symbol’s timeline?

Thanks.

When you’re inside a Symbol, you’ll create a ‘custom behavior’ which can be referenced outside of that symbol. This is what Jim did in Step 2 above.

Here’s a bit more on custom behaviors: https://youtu.be/GU4aXyyBdIU?t=4m9s

The other problem I’m having in general being new to HYPE, is how symbol’s timelines work. It looks like every symbol (when you double click to go inside it) has it’s own timeline. However you can also create timelines in HYPE and then choose to start any timeline with a button. However, I can’t see a way of creating a named timeline inside a symbol. When I am in a symbol, all timelines except MainTimeline are greyed out. It’s all rather confusing (despite having read about timelines in the manual. It may be because I’m coming from Flash and Edge Animate that I’m thinking in the wrong way.

Many of the things I need to do involve triggering an stopping animations which are inside symbols. So I need to selectively start and stop timelines inside symbols from buttons outside these symbols and from inside the symbol. Basically any or all combinations of these things. Is all this possible with HYPE?

Ah this might be what I need. Many thanks for this, I’ll check out the video.

I think I’m getting the idea of custom behaviours and how I can use then to control different timelines. Many thanks for that. What I can’t figure out is how to name the timeline for each individual symbol, so that I can control them. If I create a new timeline, I am not able to select it when I’m inside a symbol (it is greyed out). Is there another way to make a symbol have it’s own named timeline?

Thanks.

when you are within the symbol you can create new timelines …

a symbol has its own world … think of it as a scene …

When I create a new timeline from within a symbol, that timeline does not show up in the Action lists outside the symbol or in the Animation Timelines in the scene panel. This means I can’t then trigger the symbol’s timeline from outside the symbol.

@Daniel is this a known bug now..?

I feel we are going in circles… :smiley:

1, create a timeline inside a symbol. ie name the timeline Foo
2, create a custom behaviour inside a symbol. Give it a name that describes what it does. i.e startSymbolTimeLineFoo

3, Set the Actions for the custom behaviour to trigger your timeline in step 1.

Outside of the symbol and in any Action you can the set the action to Trigger Custom Behaviour and the Behaviour name to : startSymbolTimeLineFoo

1 Like

as @MarkHunte said … timelines within as symbol can be triggered from outside with a custombehaviour or with Hypes JS API

hint -> hype has got a online documentation: https://tumult.com/hype/documentation/3.0/
it’s worth reading! :slight_smile:

1 Like

Let me see if I have this right.

You can create a named timeline inside a symbol but that timeline cannot be seen in any inspector outside the symbol.

However you can create a custom behaviour inside the symbol (because that’s the only way to reference it’s timeline in an inspector).

Custom behaviours can be referenced via an inspector from outside the symbol even if it was created inside a symbol. This allows a symbol’s timeline (otherwise invisible outside the symbol) to be referenced from outside the symbol.

Do I have this right?