Flash between scenes

[caverbook (Carey)]

Hello!

When I preview my hype document in the browser, there are white flashes between each scene. The setting is set on instant for transition. How do I get these flashes to go away? See the video link below for an example.

[JimScott]

Hi Carey!

Perhaps the following link will help...

Browser Cache for your Tumult Hype document & resolving flashing Images during scene transitions & animations

You may be hitting this issue if: You see see flashing images when changing scenes using the instant transition Images don’t appear as quickly as they should, even though you're pretty certain they're 'preloaded' After updating and re-uploading your document, reloading the .html page doesn't refresh your document. This is most likely an issue with server caching, and commonly occurs on sites hosted on Dropbox’s public folder. Dropbox does not cache any content in public folder, so you'll need…

[caverbook (Carey)]

Hi Daniel,

I used the resources in this and another post (Decreasing load times and optimizing performance: Preparing a Large project in Hype), but the flashes are still there. I haven’t yet uploaded my site to a server, I’m only using the preview. I optimized the images, but there are still flashes. I kept preload on. I do have 42 scenes - this is a storytelling website. I don’t know if that’s just too much? Not sure what to do from here. Here is an example of the flash that I am seeing:

Thanks,
Carey

[jonathan (Jonathan Deutsch)]

(I moved the other post back to this topic)

Since it sounds like the tips here/in the decreasing post didn’t help, it’d be useful to get a zip of your .hype document to further investigate. Feel free to shoot it as an email to support@tumult.com if it is too big for the forums or you need us to keep it confidential.

[jonathan (Jonathan Deutsch)]

(took a look at the files that were sent)

In this case, I believe it is simply that the browsers have a lot of processing to do on the images, and can’t load and display them fast enough before showing a blank (white) area. You’ll notice that if you make the window smaller (or disable flexible layout), the flashing will go away because the browser has less work to do in scaling and putting the pixels on the screen.

There’s no specific trick that will help, but there’s a few things you could probably do:

• Use smaller images. The images are currently 2500x1669, which is pretty big. (and because Flexible Layout is enabled, Hype’s automatic optimization won’t resize them at all as they could grow to be any size). This is probably the best option to consider

• Use crossfade transitions instead of instant transitions. If you use a short time, like .2s, it kind of creates a camera flash effect, which is interesting. Longer times means they won’t really be noticeable. You could also try push transitions.

• Add the images to the first scene, but put them behind the title image or at a really low opacity. This will cause the browser to do a fair amount of the loading, so there will be a lot of the data cached for subsequent scenes. However I can’t really recommend this since it will eat up a lot of memory!

Also note that your images are set to Preload. While this is meant to help ensure there’s delays in showing the image (at least from the network traffic!), you do have a lot of images and data, so this could hold up showing the initial page, especially for folks on slower connections. So if you plan for this document to be online, you may want to consider structuring the document around what it would be if there was no preloading.

[caverbook (Carey)]

Hi Jonathan! I’ve already resized all the images once to get them to 2500px long side. Is there a way to resize the images that are already in the tumult file rather than resize them externally and replace the images that are in the tumult file? I’ll try this first!

Thanks so much!

[Daniel]

@caverbook

I've already resized all the images once to get them to 2500px long side. Is there a way to resize the images that are already in the tumult file rather than resize them externally and replace the images that are in the tumult file?

Unfortunately not -- you'll need to make your edits outside of Hype. But if you edit a file which you have dropped into Hype, you'll be asked whether you want to update that resource when you save the file (if you haven't moved the original image after adding it to Hype).

You can then click 'Original Size' in the metrics inspector with you're resized image to update the dimensions of your image.

[caverbook (Carey)]

I think this might be what I was asking "if you edit a file which you have dropped into Hype, you’ll be asked whether you want to update that resource when you save the file (if you haven’t moved the original image after adding it to Hype). "

So, all of the jpgs that I already have in hype - how do I access them to resize them directly?

Or is that not possible? Thanks so much!

[Daniel]

If you dragged a file from you desktop into Hype, then edit the file (still on your desktop) Hype will ask you if you want to update. Once you move the file into a different folder, its link will be lost.

@caverbook

So, all of the jpgs that I already have in hype - how do I access them to resize them directly?

You can't really access them directly, but you can export, then edit a file in your exported resource folder, then replace individual images.