Poster image different from PNG Sequence (bug?)


In some cases, like the attached example, the poster image may lack some elements that are present when exporting a PNG sequence (the "old" way for creating fallback images for banner ads). (25.5 KB)

As you can see, the poster image does not show the arrow coded inside the button, whereas the PNG export does:



Thanks for sharing the document, I can reproduce this.

It looks like the poster capture is having issues with the background image + ${resourcesFolderName} variable.

Here's a version that embeds that image as a regular image (not inline) if you need it: (34.2 KB)

Thank you Daniel.

Many thanks for your quick reply.

The reason for the arrow not being used as a regular Hype element in the first place is that there was a small CSS animation when hovering over the button (which I removed from the example to avoid confusion).

So I agree that when all images are regular elements the poster capture is perfectly ok.

My question was : why is the poster capture result different from the PNG sequence export (which displays the arrow correctly)?


It is ultimately just a detail on how Hype works under-the-hood. The difference is because a video-style export goes through the whole export process and captures each frame as if it were from a browser. The Poster Image feature (and other thumbnails like for the scenes listing) works differently - it grabs the current DOM, ships it off to a secondary web view, and then makes a capture. Due to the interactive nature of exported Hype documents, you can't really do a full export and say "go to this scene and time" and expect it to look like the current editor. There's also other technical and performance reasons for making thumbnails in a separate web view than the one the scene editor uses.

That may be more than you wanted to know :slight_smile:. Ultimately this is a bug in the thumbnail creator due to all that complexity!

1 Like

Thank you Jonathan, every bit of this information has been fully appreciated ! :slight_smile: