How do you stitch scenes together in an animated video?

Creating my first animation in Hype (Pro)—though I’m hardly that. I’ve built several scenes thinking these would be easy to stitch together, but after researching the topic can’t find the solution. I was thinking that I could create separate scenes (to match a storyboard concept), rather than having one long timeline, but I’m unsure at this point.

Was thinking it would be “upon scene unload” > “jump to next scene”—which isn’t working.

Appreciate your patience with newbie questions, but searched the forum and couldn’t find an ans.

You could use a Timeline Action. So, at the end of the first scene, you can set it to auto jump to the next scene.

Would it just be easier (or more correct) to just have 1 scene with multiple timelines? Or just have one long fluid timeline? Video will run either 60 sec, 90 or 120 sec , one fluid timeline might be a bit cumbersome to work with.

I guess I’m looking for best practices suggestions too, as to how best to set up a freestanding animation file (with no user interaction). I originally only set up scenes as I thought those would work best, but since the video doesn’t have/need user interaction/input to make something else happen…I’m not sure the suggested action will work?

thanks in advance!

Hi Leslie!

I'm not 100% clear about what You are trying to do. Your first post does not mention video at all... the second one does. If You are trying to get a scene jump when a video segment ends try the code below which I copied from a post @Daniel put up. I can't find the post right now, but here is the code - works great. The function name is my own. Replace 'myElement' with the id of the video piece You want to transition from when the video ends & replace 'myScene' with the name of the scene You are transitioning to. You have the option to spec the transition type (and duration of transition). If You do not it will use the default of "Instant".

This code should be placed in the "on scene load" handler for the scene containing the first video (which will transition to the second video).

function videoEnded(hypeDocument, element, event) {    	
	hypeDocument.getElementById('myElement').addEventListener('ended',myHandler,false);
	function myHandler(e) {
    if(!e) { e = window.event; }
   	hypeDocument.showSceneNamed('myScene', hypeDocument.kSceneTransitionCrossfade, 5.0)
	}
}

I think You ned to evaluate things on a case by case basis.
I am working on a project with over 20 videos. The videos typically are 3-5 minutes in length. I find, in this scenario, that working with one long timeline is impractical. So I've broken the videos into scenes - bit size chunks - that I find far easier to work with.

Also, I do as much of my work as possible using code for long pieces. I'm up to 25 minutes of video so far (with a ways to go) and the "Main Timeline" is "0" seconds long at this point. Another reason for this state of affairs is it is not possible to set up triggers on a video's timeline.

=======================================

Also, found the "original" post where I got the code, Daniel's is the sixth one down.

1 Like

For whatever reason really struggling with this. I’ve tried a myriad of options (including placing your JS code) and I can’t get it to work—I hope/know it must be something really simple.

Wondering if you would take a take a peek at my source file and let me know what I’m missing/doing wrong! Unfortunately this is really holding up my project—building the animations hasn’t proved too difficult for me, considering this is my first project, but I need to get this transition element figured out ;(

Posted to dropbox, file containing 2 simple scenes (Hype file: io_TestGraphic):

thanks in advance if you have time to take a peek…
-Leslie

Hi Leslie!

Just downloaded your example, will get back to You.

Thanks, Jim!

Hi Leslie!

I was thinking the video You were referencing was a file (e.g. “.mp4”) that You had imported into Hype. But on seeing your example - the project will become a video. Sorry for the confusion. In any event the code I provided above isn’t going to work in this scenario.

@jtcreate (2nd post from top) was on the mark really. Attached is an image showing the set-up to create a timeline trigger~keyframe at the end of a scene. Also attached is the Hype scene transition (“io_GraphicTest_v2.hype.zip”) I created based on your example. If I have misinterpreted your request again let me know ;->

io_GraphicTest_v2.hype.zip (224.6 KB)

  1. Move the Playhead to the end of the scene (“Scene 2” in this case).
  2. In “Timeline Actions”, at the right of the field, click the diamond with the plus in it.
  3. A keyframe or marker will appear at the Playhead location on the Timeline.
  4. Double-click this keyframe marker and a “Timeline Action” dialog opens with choices for the action.

Hi Jim,

HUGE thanks! I swear I had tried that to no avail…but glad it works, so thanks for your help. I will have to tie video footage at the beginning and the end of this animation—so perhaps your previous help will also go to good use.

I may be back for more help, so watch this space! Again, can’t thank you enough.

-Leslie

Thanks for your thoughts!