I made a complex animation. I enabled preloading.
A short flickering can be seen at the transitions. I tried both: Animation in Hype and Animation in After Effects and import after that. Both of them are flickering. What’s the right way to avoid the flickering?
General question: is hype generally made for creating complex animations? i have the feeling there are performance problems very soon when I using multiple images. all images are optimized with ImageOptim.
‘Short flickering’, You mean when you go from scene 1 to Scene 2?
That is a know thing (You can search for “white flash”).
A solution to this can be adding a static image of the first frame from Scene 2 to the end of Scene1 then instead of an instant transition choose for a swap (or other transition form) of something like 0.2sec. from Scene 1 to Scene 2.
Yes I mean that. Thanks, I will try this.
I took a glance at your document. The white flicker is because the browser is taking a while to display the first frame of the video in your third scene.
As suggested by @Rick4F the best approach is just to cover up the video momentarily with a shot of that first frame. You can either take a screenshot or probably extract from video tools. While you could use Hype’s PNG Sequence export, since your document has flexible layout it is probably better to make sure the shot is the size of your entire video and set to flex the same way.
Sometimes browsers need more than one frame to do an initial render of images that are very large or from complex SVGs. But this is usually for sizes more like 5000x5000 pixels. Your document looks pretty good in all other respects and I think it is just the video giving issues.
Thank you @jonathan
Is it generally better to work with video for such a complex animation or is it possible to work with hype animation (with many pngs) as well? I have tested both in my document: video and animation.
Whats the best resolution for pngs and video for best quality?
Unfortunately there’s no single answer, it is highly dependent on your assets, document goals, and the target browser/device on which they will be run.
The first two scenes that use native animations in Hype look like they are pretty well structured and the assets are cropped and sized minimally. I think it would probably run well on any device. That said, your document does use flexible layout, yet the images are sized for the iphone layout, thus they will be a bit blurry when scaled up. So it is up to you if you want to potentially sacrifice some load time and possible performance by boosting the asset sizes for if this were to ever show up on an iPad or much larger Desktop browser.
One important aspect to remember is that just because a file size of a PNG is small, that does not mean it will not incur large render times or affect performance. I’ve seen PNGs that are only 50 KB but occupy 10,000 x 10,000 pixels. The browser eventually has to convert this to a bitmap based representation. This would be 381 MB in memory! Just moving that around and then scaling/drawing to the screen will take a lot. If you can, avoid images that are larger than 2,048x2,048. Ideally as small as possible.
Generally speaking I prefer working as “natively” in Hype as possible - that is avoiding pre-rendering to video. This gives more control for preloading and animation. But sometimes depending on the content a video is the way to go.
Thanks
There are a few options