I’m pretty new to Hype, but want to have a drag and drop trigger a video. It’s a sort of branching scenario. But it looks like I can’t have two videos in the same scene be on different timelines, unless I’m really missing something. The “Video Track” doesn’t even show up on the additional timelines, and the manual keyframes don’t appear to do anything.
So, should I have the D&D move between scenes (Hype’s JS API is not nearly as robust for doing this as it is for moving between timelines) or should I put them on the same timeline in one scene and use JavaScript to build a drag and drop on a paused Timeline, where the first part of the video is up front, and then the d&d triggers a continue or moves to a specific point on the timeline? And if so, is there anywhere on the panels I can get the specific time in miliseconds where a keyframe or object is, so I can use that in my code, or do I have to do the conversion myself?
Also, does this even make sense, or am I crazy and doing this all wrong? Is there an example somewhere that would help me? My employer is being kind to me so near the holidays, but I have burned too many hours trying to figure this project out on my own. Thanks!
In general Hype doesn’t have many timeline facilities for controlling video, about the only one you can do is change the start time of when the video will play on the main timeline. (There’s lots of requests for better control, and a bit of a history why it is only this way right now). The fact you can add Keyframes for the Video Track is a bug .
The video will probably be better controlled by JavaScript. When you add a video to Hype it is a <video> element, so you can assign a Unique Element ID in the Identity Inspector and then access it via hypeDocument.getElementById("vidID") and use .play() and .pause() functions.
While Hype doesn’t show the time in milliseconds (opting for minutes:seconds.frame notation), you can simply divide the frame number by 30fps to get the fraction of the second.
A few other things that might be useful is that if you use Hype’s “On Drag” handler, the javascript you can access the event['hypeGestureXPosition'] and event['hypeGestureYPosition'] variables. Additionally you can check the time for a timeline via hypeDocument.currentTimeInTimelineNamed('timelineName') which returns a floating point number.
Thanks! I will try and implement this in my JavaScript code and see how it works. I may have some follow-up questions, should I post them here or start a new thread?
No major preference - If they are related, better to stay on this thread so there’s more context. If they are distinct enough that they’d be useful outside the context of this thread, feel free to start a new one and reference it. Thanks!
But it doesn’t seem to work. The $( this ) part is really just to test whether my function is working at all. It won’t be part of the final interaction. All I want is for the video to play as soon as the item is dropped.
In order to work with jquery, you’ll also first need to check Position with CSS left/top in the document inspector.
You can use jquery, but since the object is moving around outside of the Hype runtime’s knowledge you might not get the results that you want if you later try to animate an object that has been moved via jquery. This is especially the case if you are using relative timelines in Hype. I would take a guess that if you use the Hype Setter API on a drop event you may get it to better behave with jquery, but I haven’t tried this.
I’m not an expert on Jquery UI, but I would imagine you still will need to check Position with CSS left/top. Hype by default will use CSS’s transform:translate method if this is unchecked, but jquery uses top/left.
.