7 Replies Latest reply on Dec 27, 2011 8:11 AM by GSIDesign

    Some questions about creating web animations with lighter data and exporting to vector Flash format.

    GSIDesign Level 1

      Hi, I will be creating animations in After Effects mostly using Illustrator vector files and will be exporting to SWF or XFL for using the animations on the web.

      One of the priorities is light data as possible to provide viewers with slower connections with better experience. However the animation should also impress and I need to find a balance between performance and possible imagery.  The animations may have sound and voice narrative.

      I need help with understanding which type of non-vector data is heavier than others. Non-vector image data or sound and voice? And from non-vector image data is some of it lighter or heavier than other - for example motion blur vs smooth gradient vs many colors?

       

      I would greatly appreciate any suggestions, tips, pointers, etc.,

        • 1. Re: Some questions about creating web animations with lighter data and exporting to vector Flash format.
          Rick Gerard Adobe Community Professional & MVP

          If it's lightest data that you want then you should be working in Flash or Flash Builder directly. If you're using AE, then export XFL and clean up the animations and limit the data in Flash. AE is NOT a great flash animation tool, but it is a very good way to create FLV movies that can be accessed remotely in flash to stream to users. This keeps the swf file size way down, speeds up the load times, and still allows end users to enjoy high quality HD movies streaming to their flash player. The total download size is as big as it needs to playback the HD movie, but the swf footprint and load time is very small.

          • 2. Re: Some questions about creating web animations with lighter data and exporting to vector Flash format.
            Mylenium Most Valuable Participant

            Hi, I will be creating animations in After Effects mostly using Illustrator vector files and will be exporting to SWF or XFL for using the animations on the web.

            One of the priorities is light data as possible to provide viewers with slower connections with better experience. However the animation should also impress and I need to find a balance between performance and possible imagery.  The animations may have sound and voice narrative.

            I need help with understanding which type of non-vector data is heavier than others. Non-vector image data or sound and voice? And from non-vector image data is some of it lighter or heavier than other - for example motion blur vs smooth gradient vs many colors?

             

            Let's do a little "Myth Busters" on that one, shall we?

             

            1. Vector data is per se not "lighter" than pixel data. You could have complex paths for which storing the information of the individual nodes takes up more space than a pixel image of the object.
            2. Dynamic rasterization of vector data costs CPU performance and may in effect make things more slow than just playing a series of pixel images. That would apply to anything from path strokes to gradients.
            3. All your pretty AI vectors don't mean anything if they are constructed in such a way that either AE or Flash need to rasterize them on import. Anything from converting Bezier paths to paths consisting of dense linear segments to converting fills, patterns, gradient meshes and so on to pixel data
            4. Pixels are pixels. It does not matter whether they are gradients, mothionblur or just non-antialiased shapes. Flash doesn't care and neither image format that may be used in Flash stores any more or less info. They only differ in their methods, but in the end it's for you to decide whether you use JPEG, PNG8 or PNG24. They all have their pros and cons.
            5. It makes a difference, if data is embedded in an SWF or if it is externally linked just as it makes a difference whether you enforce audio sync or not, playing every frame or not.

             

            So for all intends and purposes, it's still up to you to make up your own mind and find the best solution. And Rick has a point - if you're really that concerned about efficiency, then do it in Flash or Flash Catalyst and consider the options there that may help like GPU accelerated layer styles for drop shadows etc., dynamic text or your vector data remaining vector in teh first place.

             

            Mylenium

            • 3. Re: Some questions about creating web animations with lighter data and exporting to vector Flash format.
              GSIDesign Level 1

              Rick Gerard wrote:

               

              ... AE is NOT a great flash animation tool ....

              Do you mean as animation capabilities and tool set  to create vector animations or as lighter data of the vector animations produced? I I'm more interested in the latter.

              For my project I will be animating vector graphics originally created in Illustrator. To make sure I understand your statement, I will give an example:  let's say  I have a simple vector graphic like a simple logo created in illustrator, then use this .ai file imported to animate the logo with a few simple transformations like moving from side to side, some rotating, scaling, fading, and eventual motion blur.  If I create this animation identically once in After Effects and then again in Flash and export it to  SWF file, will there be difference between the data created with After Effects and Flash?

              • 4. Re: Some questions about creating web animations with lighter data and exporting to vector Flash format.
                GSIDesign Level 1

                ....

                1. Vector data is per se not "lighter" than pixel data. You could have complex paths for which storing the information of the individual nodes takes up more space than a pixel image of the object.
                2. Dynamic rasterization of vector data costs CPU performance and may in effect make things more slow than just playing a series of pixel images. That would apply to anything from path strokes to gradients.
                3. All your pretty AI vectors don't mean anything if they are constructed in such a way that either AE or Flash need to rasterize them on import. Anything from converting Bezier paths to paths consisting of dense linear segments to converting fills, patterns, gradient meshes and so on to pixel data

                ...

                Is this valid if I am concerned with data that is affected mostly by the Interenet connection/download speed and not data that is processed on the viewer's computer. The aniamtions will be with a size and imagery that I'm asuming will be handled easily by the computers of the intended viewers but we are concerned that their internet connections may not be fast.

                • 5. Re: Some questions about creating web animations with lighter data and exporting to vector Flash format.
                  Mylenium Most Valuable Participant

                  Is this valid if I am concerned with data that is affected mostly by the Interenet connection/download speed and not data that is processed on the viewer's computer.

                   

                  Well, nothing personal, but you have the wrong priorities here. It's just the other way around. Just for one moment consider that half your viewers may be visiting your site with mobile devices whose processor may not be that super fast or run in energy saving mode to conserve battery time, but who visit your site via W-LAN, HSDPA or UMTS. Or in other words: Those users probably couldn't care less about whether that file is 500kB or 2 MB. And despite being stuck with a crappy 1.5 Mbit DSL in a rural area, I wouldn't consider those file sizes to be a problem in any way for stationary conenctions, either. And it really isn't - users who are on connections even slower than that will shun Flash sites like the devil, anyway, and have your stuff filtered/ blocked or they are infinitely patient and will wait. I mean, look around - people download apps, video clips, audio and otehr stuff al lthe time, many times larger than even eleaborate Flash content.... Also lot of Flash content is built on pixel data and in particular games use PNGs over vectors for performance reasons many times. Nobody would try to retain vectors at all cost when ultimately he's designing to a fixed resolution... And one more thing: all your optimizations will not mean anything, if your server isn't fast enough or some internet providers throttle connection speeds to conserve bandwidth. You must always look at the bigger picture here. Even if technically it may be possible to create "the perfect vector SWF", it might still be an Edsel in terms of practicability for your users....

                   

                  Mylenium

                  1 person found this helpful
                  • 6. Re: Some questions about creating web animations with lighter data and exporting to vector Flash format.
                    Rick Gerard Adobe Community Professional & MVP

                    Depends on the logo design and the animation, but in 95% of the cases I can think about Flash will give you a more efficient file.

                    1 person found this helpful