Does the complete timeline load when a scene is loaded or only a section of the timeline up to the first pause action.
I am planning that when a button is clicked the timeline continues to the next pause action and reveals a new image. I am looking to do this for a number of images so wondered if all the images would load with the complete timeline or if they will load as the timeline progresses with the button clicks.
Hope I have managed to explained my question clear enough for someone to hopefully answer.
You want to apply pause actions within a timeline and have the button continue the timeline?
If so, you will need to drop an action anywhere in the timeline to pause at any point in the timeline and continue adding pause points along the timeline.
Secondly, You’ll need to add an action to the button to continue timeline(s).
Thanks for your response. I have currently got what you have suggested all setup and working, but was wondering when the scene loads if it will load the complete timeline (all the animation and related content) until there is no more animation, or will it simply load the first part of the timeline (and related content) up until the first pause action.
I am asking this as I have a large amount of images which are revealed individually, however if they are all loaded when the scene first loads it may take to long.
Update:@jonathan mentioned something I forgot to relay. Hype by default will import images with preload enabled but you can disable this. Thats why I said, It should preload
I should also mention compression of the images is something crucial, You might want to use an app like imageoptim, tinypng… Additionally, if you feel the experience is a bit heavy in general you can add a pre-loader or loading indicator.
By default, images inserted into a Hype document are set to Preload which will download them before any part of the document is shown. You can disable this behavior in the Resources Library for images that you know might come in later and shouldn't hold up showing the document. It sounds like this is probably the best option.
Assuming your elements are not animating the Background Image property (that is, they only ever have one background image set), then when it gets downloaded is a bit dependent on the browser. So even if have preloading disabled, the browser may decide to download as soon as it can, or at a later point if you animate via the Display property. To be a little more specific to the flow of when an image might be downloaded:
If the image is set to Preload (the default) it will be downloaded immediately
If the image is not set to preload, but Display is visible, the download will start when the scene is shown
If the image is not set to preload, and Display is hidden, the download will start when the timeline animates it to visible for some browsers. Others will start the download when the scene is shown.
I wasn’t aware that the display property could be used in that way. So if I animate between pause actions the display property from hidden to visible of the individual images, this could be a good way to load the images when needed?
To give a little more of an idea, it is a slideshow style project with a ‘next’ and ‘previous’ button, so whichever direction the buttons are clicked the relevant individual image should then load.
Do you still see this as the best method for this style project as there will be roughly 25 different images (between 400kb-700kb each) as I do see you have mentioned it may work differently within certain browsers.
Take a look at this slider made with Hype. Download the file and see how it was created.
It uses different timelines as oppose to a single main timeline with pause breaks or scenes. http://www.hypedocks.com/downloads/slider-template/
Only some browsers have the behavior where they won't download if invisible, so you can't be dependent on this. I only mention it in case you were already using the display option.
It depends how you animate them in and if there's a risk of not showing content. Ultimately that's a bit your call! Chrome's developer tools has a feature to simulate the download speed under different network conditions, so you might want to try there and see what type of behavior works best for your content.
Like @petester mentioned above, the best thing to do is to first try to reduce image sizes! And you can always have a preloader screen as a last resort.
