1 Reply Latest reply on May 29, 2014 10:20 AM by hemanthR

    Explain loading and how to achieve smooth fast user experience


      Please explain a bit about how Edge handles loading images and what the best practices are for getting smooth, quick response for the end user.


      I have an interactive that displays small a photo (about 25k) and a photo caption on click. The project has to have a couple of hundred of these images stored. Presently I am using a JSON file to pull the images and text into divs. Is this the best way?


      Is turning an item "off" the same as "hide" and same as zero transparent and same as "fadeOut"? And do those options leave the item "active" so that it is soaking up brandwidth for the user? Or is it better to "remove" a symbol, image, or div when it is done being displayed?


      And on animated GIFs. If they (or any animation) is looping continuously, does that put a load on the user's processor and bandwidth and slow down the response and smoothness of an Edge interactive?


      Finally, my huge thanks to those of you who have been answering questions and especially providing sample files. Without your forum I would be lost in Edge.

        • 1. Re: Explain loading and how to achieve smooth fast user experience
          hemanthR Adobe Employee

          In a Animate composition playback starts ( i.e. you will see content on stage) only after all the images which are present on main stage timeline or within  a symbol timeline added to stage ,are downloaded i.e if you have added 20 images to stage ,playback will start only after all the 20  images are downloaded.This is done  to have a smooth animation playback.We try to avoid disruption of animation by starting the animation only after all the necessary assets are downloaded


          If you have image in a symbol and are added to dynamically(i.e through code) those images are downloaded as when the symbol is added to stage.This does not stop stage playback animation

          Turning as item off is setting its display css property to none where are fadeout is similar to setting opacity to 0.

          Setting the display to none removes the element from the document flow where as setting opacity to 0 does not remove element .

          According to this post setting opacity to 0 is cheaper than changing the display property High Performance Animations - HTML5 Rocks


          Whats the best practise depends on your content?Since your have a lot images it think it might be good to add symbols dynamically to stage so that assets related to it are downloaded as and when required but i should caution this might affect the smoothness of the animation.


          If you have any feedback about the way we download assets or if you have a better way to optimize asset download ,please fell free to drop me a mail

          1 person found this helpful