Context sensitive timelines?

[Ryder]

Sorry if my guesses at meaningful terminology are sucky... I've only had my hands on Hype for a little over 24 hours.

I'm starting to see that timelines are essentially a kind of function that imply a time element... the basic building block of animation.

But for what I would consider a function to normally do is to be structured in a way as to do something in context... like making something visible... "makevis" would be used to either change the visiblity property of the calling entity... OR change the visibility property of the desired (named) object.

This is the entire point of a function... so you don't have to write the same code over and over.

Now, if I use this model for timelines (animated functions)... I don't want to have to define an animation for each context...

Say I had an animation that gently changed the opacity from 0 to 100 in 1 second (fade-in).

I might want to use that timeline on a BUNCH of things, in many contexts.

How can I call a timeline, but have it act on different elements... ? Can it be done in a sort of contextural way? Like... a mouse over the element... calls the "fade-in" timeline... in order to act on the element that called it?

I hope that makes sense.

Thank you all for your kind help.

R

[Photics]

@Ryder

Say I had an animation that gently changed the opacity from 0 to 100 in 1 second (fade-in).

I might want to use that timeline on a BUNCH of things, in many contexts.

It sounds like the "Clicky" template might help you...

Free Template Tuesday #24 – Tumult Hype "Clicky"

There are four separate elements, but they all run the same JavaScript code on click/tap.

The trick is to use the "element" parameter. When a Hype function is run... or functions in general... you can get the details of that event — what caused this to happen?

The click event is traced back to the element that was clicked. That element can then be changed. This is similar to the "multilingual" template I mentioned before. By using good ID names for the button elements, it's easier to create actions based on that. It makes the project more dynamic. It uses a two-dimensional array, so it's a scalable technique. The project only has three languages, but it could easily support hundreds... I'd probably use a dropdown or a form in that situation though. Otherwise, that's a lot of buttons.

Here's another example...

Free Template Tuesday #29 – Tumult Hype "Picturing"

The key is this line, which Hype adds automatically...

// element - DOMHTMLElement that triggered this function being called

It's part of Hype's API. That comment is added at the top automatically. (In the early years of Hype, I simply ignored that part. I didn't realize the power of those parameters.) That project only has four pictures, but the technique scales nicely. Here's an example with 16 puzzle pieces...

Free Template Tuesday #33 – Tumult Hype "Jigsaw"

This is a very important concept to learn with. By using the ID, and targeting elements dynamically, you don't have to create a bunch of timelines. This technique can save a lot of time.

[MaxZieb (Loves Hype)]

Timelines are functions under the hood but by applying them to a element visually you are assigning them parameters. This can be viewed as hard coded function calls. Hence they can’t be reassigned as they are earmarked to the element. You can animate using the API on properties and each of these animations will create a “timeline” but the runtime API is very limited as Tumult doesn’t want to expose much of it to limit support requests. You will have to use a third party animation engine to benefit from true timeline API support like Anime (search the forum) and sync the end state back to Hype. You can always also use tricks with setTimeout and the regular setElementProperty interface to hack programmatic timeline functionality.

[Ryder]

@Photics

The click event is traced back to the element that was clicked. That element can then be changed. This is similar to the "multilingual" template I mentioned before.

Thank you...

Certainly one can set simple numeric/text properties based on the calling function...

But in this case, the timeline is the critical issue... because timelines are powerful and complex... with various ease in/out behaviors, paths and other things that are very difficult (impossible?) to code. For mere mortals at least.

So the idea is still to somehow apply a timeline to a chosen element... and I may be missing it, but I don't see how to get there with clicky.

Apologies for my sketchy understanding. Hashtag nooblife.

And thank you so much for your kind help.

R

[Photics]

@Ryder

So the idea is still to somehow apply a timeline to a chosen element... and I may be missing it, but I don't see how to get there with clicky.

In the "clicky" template, JavaScript is being run based on which element is clicked. In your case, it seems like you want to run a specific timeline based on which element was clicked.

Perhaps the "Navigating" template is a better example...

Free Template Tuesday #31 – Tumult Hype "Navigating"

The "Menu" template is similar too...

Free Template Tuesday #22 – Tumult Hype "Menu"

Based on which button was pressed, a scene is loaded. That's accomplished by using Hype's API. It's JavaScript. The difference is that you want to run a timeline. So, just use Hype's API...

You're basically in advanced territory of Hype, but you just got started. There's a lot to learn, but it sounds like you're close. Anyway, I gotta go.

[Ryder]

Thanks again...

Part of this is me starting to truly visualize the overall structure in Hype... as I see it more clearly, my questions will get better.

Many will answer themselves.

Part of this is me conflating Timelines, and a specific, singular set of keyframes for a given parameter (Timelines being a collection of all used keyframes/parameters).

What I seem to be searching for... is a way to throw a set of keyframes (developed/stored elsewhere), and throw them at another chosen element parameter on the fly.

That might not be at all possible.

Like "fade in" and "fade out" keyframes on an opacity parameter... with specific ease settings.

One could see how this could be used all over the place in a fairly generic sense...

But for now, all I can see is literally copying the keyframes into a custom timeline for each an every element that I might ever want to "fade in" or "out"... and then somehow managing the 50 timelines I would need for 50 objects.

(imagine removing, with a fancy fade, every chess piece on a chess board in the event they are captured).

WhiteRook1CaptureTimeline
WhiteRook2CaptureTimeline
...

Etc. x 32 pieces. I sure don't want 32 timelines... just to perform a fade if the piece gets captured.

What I would really want to do is borrow the opacity keyframes from somewhere, and just apply them on whatever piece was just captured...

[h_classen (Hans-Gerd Claßen)]

Have a look at Hypes API and see what can be done ...

[jonathan (Jonathan Deutsch)]

@Ryder

That might not be at all possible.

Like "fade in" and "fade out" keyframes on an opacity parameter... with specific ease settings.

One could see how this could be used all over the place in a fairly generic sense...

Basically it sounds like you would like the symbols feature, but just to hold a set of keyframes. Then there could be various instances of this throughout the document - changing one could change them all. You can also build up a library of them so they are easy to apply.

This is actually a feature I've wanted to do for a while - in fact our feature tracker shows prior to Hype 1.0's release!

The main reasons it hasn't been implemented is that Symbols overlap a bit with the need for this, as do custom named timing functions. Also, I haven't been able to envision a UI that isn't simple enough to justify the feature. Making animations in Hype or copy/pasting is pretty easy, so not many folks have requested it.

That said, I'd still like easier ways to apply common animations like "fade in" and such. So it is still on the table as part of that feature.

[Ryder]

Hi Jonathan (love Hype, BTW... I'm really green though, which is why my questions look insane).

For a UI approach to a "keyframe repository", one might consider a right clicking on a property and "save to project repository"... enter a name... and they all get saved with the project (or maybe a global file... to use across all projects?)

As long as the name/property combo is unique, it would be allowed.

Right click "insert from project repository" might produce a sortable list... (by name, etc) that return what is available for that property... drop in at the current head location.

Certainly, what happens if the new keyframes stomp on preexisting ones is a challenge, but one could pop up a "insert/overwrite/cancel" requester...

Also, I don't "get" symbols yet... not fully... so maybe I'm missing opportunities there.

For example, if I were to make a "standard control", that was a gizmo of sorts... with buttons on the left and right... and numerical fields in the center, incorporating click events and drag events... as well as a "tool tip" behavior... I could use that over and over in a project (essentially part of the style of the project for consistent UI)...

But one of the problems is that each one might need numerical constraints (min max values, tool tip text and start value) which somehow have to be set for each instance.

Anyway, thanks for the assist and considering my ramblings!

All the best.

R

[jonathan (Jonathan Deutsch)]

I think those all make sense - and yes the complexity comes about from the representation on the timeline with questions like: how does it look? How do multiple property animations show that they are 'together?' how does it determine if you want a one-off edit or edit all? What happens when you intersect one animation/keyframe with the symbolic version? And so forth .

Also, I don't "get" symbols yet... not fully... so maybe I'm missing opportunities there.

The best way to conceptually think of Symbols is as a reusable scene-within-a-scene. Pretty much all the scene constructs (elements, timelines, animations, actions) are in a symbol. There's of course plenty in the docs to go through and learn about so I won't make this a lesson .

@Ryder

For example, if I were to make a "standard control", that was a gizmo of sorts... with buttons on the left and right... and numerical fields in the center, incorporating click events and drag events... as well as a "tool tip" behavior... I could use that over and over in a project (essentially part of the style of the project for consistent UI)...

But one of the problems is that each one might need numerical constraints (min max values, tool tip text and start value) which somehow have to be set for each instance.

The answer is sort-of. You could build these items and reuse them. While instances live at runtime and you could potentially script in these values, there's presently no per-instance override in Hype's UI for any values. This of course would be good to add in a future release . So until then, you'd either need to duplicate the symbol itself (not make a new instance) and edit that, or make your own javascript hooks.

@Ryder

Hi Jonathan (love Hype, BTW... I'm really green though, which is why my questions look insane).

Glad to hear that! Your questions are great - I personally love hearing from folks who start using the app since this is the period where I can learn about incoming expectations. Hype of course has ways where it is familiar with some other apps that hopefully make it easy to learn, areas where it has its own ideas about solutions where we can better educate, and then also areas that aren't yet implemented which we can take note of or build. Please keep the feedback/questions coming! .