@sgibm
So my question is : Is there any tweak in hype that can make the transitions smoother?
Other than standard procedures for minimizing file size I'm not aware of any - if, as I think, your large images are the limiting factor here. Also, your animation has both the "current" scene & the "next" (or "previous") scene in motion. Does sliding just one image (i.e. "next" or "previous") over the current one (which stays static) improve things? The effect is very similar to having both images move with out sacrificing the overall sliding "look & feel" You are after.
Some general Hype considerations for animation issues:
- Try toggling 'use webkit acceleration'.
- Make sure 'position with css left/top' is unchecked.
- Search the Forum for "animation stutters", "jittery animation", etc. I have not found any clear cut generic solutions - but You might for your particular situation.
Additionally, there are often incidentals that can affect things - such as technique. Along these lines I have added to the commentary in my post above...
I guess I did not explain things well. I'll give it another go, this time with a video to illustrate my description. The transition from "Scene 1" to "Scene 2" takes place entirely in "Scene 1" then instantly jumps to "Scene 2"- there is no gap or blank screen. If You do this correctly it is seamless, and You have complete control over all aspects of the transition, unlike with Hype's standard transition feature.
In the video below the texts "Scene 1" & "Scene 2" are both in "Scene 1". When You see the text "Now this really is Scene Two" fade-in, the instant jump to Scene 2 has just occurred. Ditto that for Scene 3's fade-in text ("Scene 3").
Project demo: PsuedoTransition_Demo_JHSv1.hype.zip (244.1 KB)
http://forums.tumult.com:/uploads/db2156/original/2X/4/42e7c7be42c25a81f0e0ca57823180d03e975deb.mp4
> The second issue of mine is also equally serious - it takes several seconds to load initially - Is there any way in hype to load 3-4 images initially and then dynamically load the other images in the background while the user plays with the initial slides.
In the example above I load the image for the Next Scene (off screen) in the Current Scene (there is no initial preload for any images but the first image in the First Scene):
"On Scene Load" (First Scene) we load the image that will also be used in the Second Scene:
hypeDocument.getElementById("imageHolderRect1").innerHTML="<img id='imageHolderRect1' src='${resourcesFolderName}/DSC_1566-sm-xx.jpg' alt=''/>";
The Second Scene loads the image for the Third Scene, and so on.
I've used (2) approaches to loading the images (just to show different possibilities):
- An offscreen Rect... used in the transition from Scene 1 to Scene 2
- An offscreen Persistent Symbol... used in the transition from Scene 2 to Scene 3.
This is just the general concept which, if applicable for your project, will no doubt require some adjustments to meet your needs.