Perpetual Loop of Symbol while on stage


(Steve) #1

Hello,
Can someone tell me what I am missing in getting a symbol to loop when on the stage?

Scenario:
Timeline Animation happens and symbol is revealed via Display parameter. Expected behavior is the Symbol to run it’s own timeline which includes a timeline Action that tells it to go back to an inner Timeline to Frame1. Frame 1 says to Play which I should (or so I thought) restart the Symbol Timeline again creating a loop.

I looked at firing a Behavior on the main timeline but I will have multiple looping symbols and want them to display at different times.

LoopSymbol.hype.zip (28.6 KB)


(Steve) #2

Further review shows that my loop “should” work but something is different than the newly included example from a prior post by @nick

Now to determine why my symbol loops don’t loop when they should be the same (in methods) as nicks.

LoopSymbol_r2.hype.zip (19.2 KB)


(Kalle) #3

Open the “FireworksFinale” symbol. In information -> symbol create a new custom behaviour. The behaviour should be like “continue timeline (can restart timeline)”. Change the timeline action in the end to gotoTimeInTimelin (0) + continueTimeline (can restart Timeline). On the main timline ceate a timeline action where ever you want and start the custum behaviour you created inside your symbol. Hope, this helps.LoopSymbol.hype.zip (16.9 KB)


(Steve) #4

Thank you that totally works. Though I am still confused and trying to figure out the logic…

Is there a hidden panel that stores and allows access to our created Custom Behaviors?


(Kalle) #5

There are two ways, to talk to a timeline inside a symbol (or a symbol´s main Timeline): a) you can do this via javaScript b) you can do this by calling a custom behaviour inside the symbol you´re adressing. Concerning the loop: it´s just not enough to tell the timeline “start”. You have to tell the timeline where (at which time) to start over and then tell again, to start (continue) at all…


(Kalle) #6

You can find the custom Behaviour, where you created it… In this case, i created it in your Fireworks Finale symbol.


(Kalle) #7

Sorry, I´m working with the german version of Hype… “Verhalten” means custom Behaviour


(Steve) #8

No problem but I don’t see “Verhalten” in your screenshot only the Timelines.


(Kalle) #9

… and “fireworksFinale_start” is the name of the custom Behaviour


(Kalle) #10

Just click the screenshot and look at the bottom


(Steve) #11

OK, I now see it :slight_smile:


(Kalle) #12

Good, you can create new custom Behaviours there (in this case inside your symbol), and you can always find and edit them, where your created them. There´s no central place to do this for the whole document.


(Steve) #13

So I have this working and it’s a bit odd that we repeat the same directive as our last frame in the Symbol (goto and play 00:00) when creating the Custom Behavior. No problem, I understand this now.

But I’m trying to get this symbol to exist as multiple Instances and fire/run independently.
Since the Custom Behavior is assigned to the Symbol and triggered from the Main Timeline we can’t separate the Custom Behavior to allow multiple triggers of the Symbol loop without creating Duplicate Symbols (each with their own Custom Behavior). Again, no problem but is seems it would make more sense to be able to trigger a Symbols timeline as it exists as an Instance.

I suppose the answer is to trigger via Javascript based on the Instances ID.
Would I be correct in this current assumption?


(Jonathan Deutsch) #14

Just to clarify, inner symbol timeline actions that might cause a loop aren’t triggered from the Hype editing environment.

Yes, and this may be the easiest way.

But there’s actually two ways to call into a specific symbol instance from the UI:

  1. If you select the symbol element, mouse actions for timeline manipulation can dive into the symbol’s timelines.
  2. Symbol Actions - In this regard at the top level you could make an alternate timeline, select the symbol element, then in the Properties area add a symbol action that triggers one of its timelines. You’d then start this alternate timeline.

(Kalle) #15

Yes it is. Played around with your hype file. There´s a problem with your finale-symbol - if you go inside of it, it always says: “unnamed instance” - don´t know, where this comes from. Anyway - deleted it. Theres a new symbol “finale” now - gave it the id “fin” and started it with the javaScript function startFireworksFinale():

var symbolInstance = hypeDocument.getSymbolInstanceById(‘fin’);
symbolInstance.continueTimelineNamed(‘Main Timeline’, hypeDocument.kDirectionForward, true);

This should work, and this should work on other instances…LoopSymbol 2.hype.zip (20.8 KB)


(Steve) #16

OK, so what is the best way to use Symbols, that loop as Instances on the Stage and be triggered by a Timeline event? I Understand that Behaviors can be used to fire the Looping Symbol and using the Display Parameter can be used to show the Symbols are different times and they will be running and looping due to a single Custom Behavior execution.

We then have the call from the Timeline to run a Javascript that starts the Symbols timeline and loop.

Also we can have multiple Timelines in the Symbol and have those called from a Custom Behavior at a unique time on the Timeline (PS: I even thought of this one with my beginner status :slight_smile: ) I’m expecting the multiple timelines if triggered at unique times result in non-parallel / sequenced loops while the other methods start the same inner Timeline so all loops on each instance are happening at the same time…?

So we have a three different ways to achieve the same goal of starting a symbol.

Since I want to understand and use the “best” method, which is this? Is Javascript usually the best as it isolates the events away from the Timeline? Which will translate best to the next version of Hype?


(Kalle) #17

I would prefer javaScript - always - it´s the most flexible solution in my opinion.


(Jonathan Deutsch) #18

I don’t think there’s a singular best method, but depends on what you’re trying to do. Re-reading the thread I’m a little unclear on your exact end goal so you’re welcome to elaborate a little more. I’d basically boil advice down to:

  • If you have interactivity, javascript will be easier
  • If this is all time based, instead use Symbol Actions

There are no major differences here for the next version, so any route will be fine.


(Steve) #19

I went with the Javascript method that starts the Symbol loop globally. This creates a more uniform effect which we wanted to be somewhat subtle.

You can see the current implementation here Click on July to see the Fireworks Finale text effects.


(Jonathan Deutsch) #20

Nice, I do love the fireworks!