Multiple Layout Video Export

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… :slight_smile:

@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)

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

Thanks @MarkHunte
This works perfectly!

1 Like

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.

1 Like

+1 from me :+1:t3:

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

But - why doesn´t the video export just apply the stage size of my selected layout (the layout I´m currently working in...). This is what I would expect - without having to place additional scripts, that force layouts etc. ...

@ktewes That is also an interesting approach, but Hype starts the export always at the first scene. Just like a web preview doesn't preview the current scene by default. It would require additional UI to select the scene to include in an export. Also, you can jump from scene to scene using JavaScript and all these things happening on stage are respected. That is actually a good thing! It is just that Hype offers an aspect ratio lock and then chooses a scene based on the regular logic (first scene) to arrive at the aspect ratio factor. That factor can't be overridden… giving us a "quick win" if we could disable it.

The video export takes the measurements of the first scene.
What I do to be able to export different layouts involving different sizes is simply to put the scene I want to export in the first position.
It works great for me without having to add or change anything.

1 Like

It doesn't work the moment you have layouts as Hype locks you into the aspect ratio of the biggest layout of the first scene only for some convenience.

Unfortunately, it isn't so simple as not locking in the aspect ratio - the size listed is the image frame size and not the web page size. These are separate concerns and would need another set of sizes.

(This is a bug on our "annoying things about Hype" list :slight_smile:)

True, when there is more than one design per scene it takes the larger size.
As the output to video in these cases is more for work presentations I came up with the following solution without touching code:

  1. Duplicate the document (for security)
  2. Duplicate the scene with the different layouts as many times as layouts -1.
  3. Leave one layout per scene and delete the rest.
  4. Export each scene to video, putting it first.

This is my export process for video with scenes of different sizes:

1 Like

This was my working assumption (how things are).

Hype calculates the aspect ratio to avoid cutting off or adding empty stage and scales the WebKit instance according to the width ratio. In this example the original width is 320px and the user inputs 960px, so the scale factor is 3X… height is calculated accordingly.

This is my suggestion for unlocking

Now if we can unlock the image frame in this example the original width stays 320px and the user inputs 960px, so the scale factor is 3X (based on width only)… but the height is set arbitrary by the user. Hence this start cropping or adding empty stage. I can see how this "state" could be confusing to a regular user at face value but…

For people manipulating the scale or using flexible layout

We could do whatever we want to fill the screen. Manipulate responsive settings in Hype (flexible layout, pinning and scaling etc.) or JavaScript like HypeLayoutRequest and user calculated scales/positions etc.


The red scale factor is still something that wouldn't have an input, and it would still be always derived from the first scene, so either "unlocking" additionally allows manipulation of this value or we just ignore it for now.

Correct me where I am going wrong or if this now makes sense.

As a side not to your process, two items we'd like to tackle at some point are exporting individual scenes/layouts, and also having Advanced Export with movie-based formats so you could choose particular scenes/layouts to include. (But no promises on the timeline for this!)

Oh, it makes complete sense, and I do believe is needed! Mainly replying to why this isn't a quick change - the way it works now means that simply having a lock/unlock ratio button wouldn't result in the change that you want... it would result the end video being stretched. Instead there needs to be two areas that control for the web page size and the image size. The image size specifically is really important because it is measured in physical pixels, so a common flow is doubling it for retina image sequence exports.

Video Export Helper

CleanShot 2021-04-30 at 11.01.01

This file helps to export different layouts and hiding elements on video export. The setup can be used while leaving the code in for web previews. The layout for the video export is determined by dragging the one you need to first position (thanks for the idea @Saeta!).

If you want to add this solution to an existing project transfer the Head HTML found in the example below to your Head HTML and create two empty layouts matching your layout dimensions name like your export layout name.


Adding the classname 'hideOnVideoExport' hides the element with that class on video exports (thanks for that idea @ktewes).


Update: Adding the class name 'hideOnWebExport' hides the element with that class on web exports. Simplified code and hard-coded first scene name as "Start" (you can easily change it).


Example File Download:
VideoExportHelper.hype.zip (72,4 KB)

3 Likes

Bravo @MaxZieb ! You are absolutely amazing.
I'm glad I contributed to the community without knowing it. :grin: