View Full Version : Opacity transition between scenes

29 Nov 2011, 2:25 AM

I'm producing an interactive picture book project using Sencha Animator and I've pretty much learned my way around it. I am not however a Javascript ninja. Each picture book page is a scene and clicking a button will trigger the next scene. I don't like the sudden transition tho.

Does anyone have a tip for adding a soft fade-in/out transition between scenes? I would love to do a page-flip effect like "20 Things I Learned About Browsers and the Web" but an opacity transition would do fine for now.

Thanks for any help.

29 Nov 2011, 7:36 AM
Currently the best way to do this would be to modify/add your own javascript to the exported file to handle scene transitions (not trivial).

Another way of doing transitions, perhaps not very elegant, is to create new scenes between your current scenes where you animate the transition. This can be hard to maintain because you now need to make sure the beginning of the transition scene is always identical to the last state of the previous scene, and the end of the transition scene is identical to the beginning of the next scene.

1 Dec 2011, 4:27 AM
I thought as much. Yes, that was my first DIY solution, but it won't be seamless I think, as triggering a page advance would occur anytime in the animation loop. Unless of course I allow the page advance only after a pause in the animation.

I'll experiment with that. Also with some DIY Javascript if I can manage.

Thanks for the prompt reply!