Looping behaviors... (I think)

Animation
1

I just started using Hype yesterday. I was a long time user of Flash, write a great deal of PHP code and spend much of my days staring at databases. All self-taught with many learning curves.

I have circles on a map. I'm trying to get them to pulse as a User enters the page. I've created my Symbols (8 of them) and created the Behavior I want (maybe).

The circle expands and quickly fades out.

The Behavior was created in Symbol panel, and I have applied them to two of the circles. The Behavior was applied in the Actions Panel on the Main Timeline.

  1. Am I doing that correctly so far?

  2. How do I get it to loop?

  3. As I apply them to the other buttons, is there a way to randomize them?

Thank you.

2

Sounds fine to me -- you can use either individual symbols, or different timelines. Both work functionally the same.

The easiest way is with timeline actions placed at the end of the symbols timeline that restarts the timeline. A demo can be found here: Tumult Hype Documentation

What aspect do you want to randomize?

3

I'll answer this one quickly then dig into the demo you linked for me.

The Behaviors on the circles. I know I can 'hard code' it in by using the timeline, but I wondered if there was a way to randomize it.

4

I still don't know what you want to randomize -- their animations? Color?

5

Randomize when they pulse. The answer is probably no, and I just have to apply Behaviors multiple times for each Symbol, which is fine.

6

As for looping, I had tried Go To Time in Timeline, set to 0:00:00. It hasn't worked yet. I'll keep working on it, but one question...

Where do I set Go To Time in Timeline?

image

7

Start timeline always restarts the timeline anyway. So no need to reset to 0 on the other hand continue timeline would need such a step.

For randomization you can always use a JavaScript call and call the Hype API that provides some of the functionality and a subset of the properties found in the Interface.

Math.random would be your friend in these cases.

I am on the road but a function triggered on the timeline (timeline action) with the following content would delay a restart by 1000ms + 0-500ms


setTimeout(function(){

    hypeDocument.startTimelineNamed(event.timelineName);

}, 1000 + Math.round(Math.random()*500));
2 Likes
8

It's not looping though. I'm sure it will end being easy, I'm just not sure which timeline or how to apply the Behavior. (The old days of Flash, Behaviors wold loop if you didn't put a Stop in it.) This isn't doing that.

9

image
image276×738 30.9 KB

image
image831×182 13.1 KB

10

Although Hype is somewhat similar it has its own logic. I would not try to find Flash features in Hype but give it a chance as a new partner in life for HTML5 tasks (with all its weaknesses but also many advantages!).

I looked at your screenshots and seams like you hooked up a custom behavior called "Pulse" to trigger a timeline called "Pulse". They share the name but the only link is that the custom behavior triggers the timeline using start timeline. Hence, you would have to trigger the custom behavior from time to launch a pulse.

Think of a behavior in Hype as a visual subroutine in the command stack land. The behavior name is what triggers every stack by that name across symbols and your current scene. But it needs a trigger… that can be done by a click, timeline action or the Hype AP (using JavaScript).

2 Likes
11

I just was referring to my background to explain why my brain might be having issues with the nuances.

The Pulse Timeline was created after my initial post here. So I was having issues getting the the Pulse behavior to loop before doing that. That's what I'm looking for. How do I get that Behavior to loop?

12

Pulse examples:
Pulse.hype.zip (53,1 KB)

1 Like
13

Thank you for that Max.

My issue was not getting my Behavior to loop. So I'll dig into what you have set up there. I'm clearly missing a setting.

I even have the Loop button clicked on my Behavior:

image

14

Note that the loop button is a playback control; it only affects animations run within Hype's scene editor.

@MaxZieb's example uses a timeline action to restart the animation. This technique can also be applied in the symbol's timelines to perform a loop.

1 Like
15

I'm at that point now where I'm copying what others are telling me, but I'm not fully understanding it. Which is to say to start out, I got my pulse to work, but I'm still not sure why. :slight_smile:

The timeline action, to start it, I have it playing Pulse. At the end I have starting the Main timeline.

Does that range in the Main Timeline have to be longer than the Pulse animation?

image
image1255×86 13.2 KB

image
image1246×150 17.7 KB

I wish I could show you fully what I'm doing, but I'm bound by an Non-disclosure agreement. I can't put any details in public.

16

I'm also trying to stop the animation on a Mouse Over. So I'm pausing both Pulse and Main Timeline, but it just stops it for a bit then starts over.

17

I suspect you may be making this more complicated than need be. To give an overview:

A symbol contains:

  • elements which can be shapes, images, text, etc., or even instances of other symbols
  • Timelines which contain animations, a playhead, and actions.
    • Animations are just transitions from one element's property value to another. Multiple timelines can be animating the same elements at the same time (though each property only gets controlled by one timeline at once).
    • Timelines each have an independent playhead, so that there's a specific time they are at in playback. There's also state if the playhead is playing, paused, or complete.
    • Timeline Actions allow playing actions. These actions can do a lot, like controlling the playhead position and playback state.

A scene, is pretty much just a top-level symbol. It also has elements and timelines.

Symbols therefore having their own timelines, can behave fully independently from scenes. Symbol instance elements do have "symbol actions" which are similar to timeline actions but just meant for a parent element to help control playback. It is an easy way to kick off a main timeline of a symbol.

For your purposes, it seems like you just need to have single main timeline within a symbol that does the pulse. At the end of this main timeline, you can have an action which restarts the timeline.

Inside the symbol, you can also have elements that help control playback of the symbol's timelines, such as pausing on mouse over and continuing on mouse out.

Here's a basic example:

PulsingSymbols.hype.zip (33.4 KB)

1 Like