Timeline Actions and navigation within a timeline


(Dirk de Jong) #1

I’m new to using Hype. I’m in Hype Pro and what I was hoping to do was to use timeline actions to set up the player to loop within a time range (perhaps by adding a Timeline Action set to “Go to Time in Timeline” and specifying a previous time within the same timeline) - But when I do this the player seems to play right past my timeline action rather than looping back to the previous time… I suspect I am misunderstanding how this works…

Once I got this to work my plan was to set objects on my page to have actions set to “Go to Time” setting it to jump to some other time range within the timeline on Mouse Over or something like that… Is this something that can work in Hype and if so can anyone point me toward information on how it’s done ? Thanks in advance for any suggestions.


#2

Can you share what you have so far?

I think you have the right idea: looping within a time range would require a ‘go to time in timeline action’. Whenever that action is hit, it should do it. And since the timeline is playing, no need for anything else.


(Dirk de Jong) #3

thanks for the quick response. After seeing your confirmation that it should work the way I was trying it I made a quick simple test in a new Hype document and I could see it working there as you described - so it has something to do with the particular setup in my project. What I seem to have found upon further testing is that when I’m using mp4 video assets it keeps playing past my loopback action (probably because the video file extends past that time), but if I replace the mp4 with an animated gif file it does what I would want ; it loops back to the earlier frame when the hype player hits the timeline actions while the gif keeps playing/looping separately in “its own” time… In this case I’m using the mp4 video kind of like an animated gif (looping, no sound, no controls displayed) and I’m not using animated gif because the mp4 files give me smaller file sizes and higher quality image - is there a way to get the animated gif behavior for the mp4 video (with regards to time) ? since I’m new to Hype I don’t know if making them a “Symbol” or using a separate nested timeline might offer a solution for that… maybe I’ll give that a try


#4

Video, when played, does not follow the timing you set in timelines. They have their own playback properties. Here’s how to control video. You could optionally set a ‘play’ action at the start of a timeline, and a ‘stop’ action at the end of a timeline, but this would need to be done with JavaScript using techniques described in that post.

Animated GIFs also exist in their own timelines. The Gif format says ‘play this frame, then this frame, then (optionally) loop’ – and you can’t control them with JavaScript, unfortunately, so you can’t tell a GIF to stop Giffing.


(Dirk de Jong) #5

I think my confusion was coming from a discrepancy between the playback preview in Tumult and the way it actually plays back in the browser. When using the mp4 videos playback preview in Tumult seemed to be disregarding the timeline actions telling it to loop back to a previous frame, but in the web browser it actually seems to work ; see this screencapture movie (no sound) showing it in Tumult and then in the browser - the movie shows it implemented on the first 2 mp4 files on the page ;

basically I’m using them as buttons and wanted a rollover behavior that would indicate to a user that they were buttons… in my test they are scaling up a bit and adding a white outline on mouseover - there might be other ways to achieve that but I’m doing it by using Go To Time actions


#6

There are usually a hundred ways to do the same thing, so if it works, it works :slight_smile:

I can definitely understand how dragging the playhead back in time and seeing the video frames would make it seem like there was a connection between the two. It is more of an approximate link: If you have ‘autoplay’ checked, then it will be around that point in the timeline assuming the video has downloaded, it has begun playing, and it is muted for iOS autoplay support. But moving back in time on that timeline will not reverse the video – that would require some additional JavaScript.


(Dirk de Jong) #7

I’m not trying to control the video in this case - just to have it keep looping while I use the Hype timeline to create the different states of the buttons… But see how in the screencap movie above, while previewing in Hype the player just plays right past the timeline actions that should send it back to a previous time - and then see how in the browser it works as I intended it to work… would that be considered a bug in the Hype 3 UI preview ? maybe just a limitation ? Definitely an inconsistency (and one which seems unique to using video file media - does not happen for example with animated gif)… In any case I was able to do what I was trying to do (after I realized it was only not working when previewing in Hype).


(Jonathan Deutsch) #8

Hype’s scene editor interface just doesn’t perform actions. Doing so would either be invalid or confusing in a large majority of cases and also likely interfere with editing if you are trying to preview an animation around timeline actions. This isn’t a bug. (Of course we pay attention to any confusion and are always looking for features that might help avoid it!)

The animated gif/video export essentially is a preview, and just captures the frames from that.

I generally recommend a preview in browser heavy workflow.


(Dirk de Jong) #9

Thanks. It was my first time making something with Hype so I didn’t know. Maybe adding a note explaining it would be worth adding here ; https://tumult.com/hype/documentation/3.0/#timeline-actions. I guess I remember doing similar things (a long time ago) in Flash or Director and in those cases the player in the timeline would actually jump to another time in the editor UI if there was an action telling it to do so - so I expected it to in Hype as well


(Jonathan Deutsch) #10

Thanks - good idea to explicitly document this!