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… 
Or, you could load it in Safari’s responsive design mode and record with a screencast recorder like Screenflow or Quicktime.
3 Likes
I’ll look in to this solution! Thanks!
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)
7 Likes
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.
Impressive Mark, Good Job!
1 Like
Wow! Many thanks! This is incredible!
1 Like
It is already on the list! (but won't make the cut for 4.0.0)
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?
You’d need to change the size of the scene it thinks it is exporting from.
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… 
@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.
2 Likes
Will try this tomorrow, it’s bedtime in the Netherlands. Looks like a great solution!
1 Like
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)
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)
3 Likes
The solution is usable but from 2018 ...
I can easily force the layout I want using HypeLayoutRequest, but I can't make Hype respect my values I enter without that additional first scene "hack". Hype changes the stage size according to an aspect ratio for convenience, but it is very frustrating that we can't disable these calculations.
(1) Could we have this lock symbol here and unlock it, so Hype has to use whatever size we enter without changing it. Maybe even in the current Beta 730?
Another thing I found is that the forced aspect ratio change is currently only updated on blur of the input field leaving the user who entered his values wondering why they haven't been respected when (s)he clicks immediately save without "blurring" out of the input first.
2 Likes
+1 from me 
1 Like
I mean this would be a "quick win" and not that complicated in my opinion (until something even better comes along in a later Hype version) as it helps people that run into this in the meantime (it has been three years so far). This would be a "fix" without compromising the current way things are as the lock could be closed by default.
1 Like