Multiple Layout Video Export

layouts
video

(René) #1

I have a document with multiple layout and want to make a video export of each layout (different kind of aspect ratio’s). I assumed that the selected Layout will export as video, but it only exports the layout with the highest breakpoint width. The only solution now is to duplicate the document for each layout… :confused:


#2

Or, you could load it in Safari’s responsive design mode and record with a screencast recorder like Screenflow or Quicktime.


(René) #3

I’ll look in to this solution! Thanks!


(Mark Hunte) #4

Or you could temporarily put this in the head.

    <script type="text/javascript">	
	
	function videoCallback(hypeDocument, element, event) {
 var layoutName = 'iPhone'    // - set the video duration to 2.25s  // // Desk is  2s
 
 if (hypeDocument.currentLayoutName() !== layoutName){
 hypeDocument.showLayoutNamed(layoutName) 
 }
  
}

if("HYPE_eventListeners" in window === false) {

window.HYPE_eventListeners = Array();

}
window.HYPE_eventListeners.push({"type":"HypeSceneLoad", "callback":videoCallback});
 
</script>

Which allows you to use the Hype Movie Export.
Just change var layoutName = ‘iPhone to the next layout name.
You can set the time in the video export to match the maintimeline duration of each layout if the time is shorter or longer than the defualt duration that pops up.

This works in my quick test and was pretty quick to do…

Layout Video export Calls.hype.zip (18.8 KB)


(Jonathan Deutsch) #5

Genius solution @MarkHunte!


(Pete) #6

I did the same exact thing a few days ago when I started my journey with the video export. I think this calls for a feature request - @Jonathan perhaps you’d like to add it to your list? I’d feel comfortable by just right clicking on the layout and seeing the export video option.


(Pete) #7

Impressive Mark, Good Job!


(René) #8

Wow! Many thanks! This is incredible!


(Jonathan Deutsch) #9

It is already on the list! (but won’t make the cut for 4.0.0)


(René) #10

Works almost perfectly. The width-height of the video-export window are still locked together, so I can’t export a video with the right dimensions. The ‘phone’ layout is in portrait, but the video exports in landscape (screen ratio form the ‘desk’ layout). Is there a way to trick the video export window to unlock width-height?


(Jonathan Deutsch) #11

You’d need to change the size of the scene it thinks it is exporting from.


(René) #12

When I try this, the exported video is still in landscape mode and has a vertical scrollbar in it. https://forums.tumult.com/uploads/db2156/original/2X/a/a72b610578b469ce0e8f13a31a06fa936503752a.mp4

The thing is: I have hype document from a page from an interactive storybook. It has three layouts: one for ipad ratio (1024x768, 3:4), one for iPhone 4.0"/4,7"/5.5" (1334x750, 16:9) and one for iPhone X 5.8" (1624x750, 19:9). I need to export a video for each layout: 3:4 in 1600x1200, 16:9 in 1920x1080 and 19:9 in 1920x886.
It’s for an App Store Preview video. I need to export three pages, all in 6 different languages. So there are a lot of video’s to export.
I tried screencapture with actual devices, but then it’s a lot of work to stitch edit each video with the exact same timing. Exporting video’s from hype, makes video-editing 18 video’s very easy… :slight_smile:


(Mark Hunte) #13

@jonathan is correct. Here is a second example.

We add a new temp scene to the project and move it to the first scene position.

Uncheck - Apply to matching layoust on this new temp scene. And you can also delete any extra layouts it picks up.

We change the code a little to:

<script type="text/javascript">	
	
	function videoCallback(hypeDocument, element, event) {
 var layoutName = 'iPhone'    // - set the video duration to 2.25s  // // Desk is  2s
 
 hypeDocument.showNextScene(hypeDocument.kSceneTransitionInstant, 0)  //-- This will move use from scene 1 which should be the temp scene.

 if (hypeDocument.currentLayoutName() !== layoutName){
 hypeDocument.showLayoutNamed(layoutName) 
 }
  
}

if("HYPE_eventListeners" in window === false) {

window.HYPE_eventListeners = Array();

}
window.HYPE_eventListeners.push({"type":"HypeSceneLoad", "callback":videoCallback});
 
</script>

Now on temp scene 1 we can change it’s size to match the layout we want.

Layout Video export Calls v2.hypetemplate.zip (93.1 KB)


(René) #14

Will try this tomorrow, it’s bedtime in the Netherlands. Looks like a great solution!


(Mark Hunte) #15

Slight Change of tact…

Create the Temp Scene as explained above.

Instead of adding the code to the head. Add this Symbol to the Temp Scene.

Do your sizing for the Temp Scene as explained above.

Change the Symbols ID to the Layout name you want.


LayoutVideo.hypesymbol.zip (40.2 KB)



(Mark Hunte) #16

An Update,

I realised that you may have more than one scene as well as layouts so this Symbol version works similar to the one above but;

You now add the scene name that you wish to switch to in the Symbols Alternative text.
This means you can then choose what scene and layout to record.

LayoutVideo_v2.hypesymbol.zip (117.9 KB)


Outputting a specific responsive layout to a png-sequence. How?
(René) #17

Thanks @MarkHunte
This works perfectly!