10 Replies Latest reply: Apr 16, 2012 11:35 AM by bjgough RSS

    Character Animation—managing data rates for "heavy" SWF files?

    bjgough Community Member

      I am currently taking a digital character animation course using Flash CS5. I am producing short cutout character animations completely inside of Flash (no imported bitmaps). My final SWF files are only 10 second looping animations with a file size around 300kb. And yet, my instructor is saying that they are too heavy or too clunky and that I need to watch my data rate for my final project. My final project is supposed to be upwards of 20 seconds long.

       

      At one point, it was suggested that I export my Flash project as a PNG sequence—import into After Effects—export the AE sequence... to what? I wasn't told. But, I tried both SWF and MOV. The MOV ran okay, the colors were pretty washed out. But the SWF files were completely perplexing. My original 300kb file ran fine (on my computer). But the AE SWFs were a nightmare. I exported three to see what the difference was: the first was at the highest quality (10) and came out a whopping 39 MB. Quality 5 came out 9 MB. And Quality 0 came out at 4.9 MB. ???

       

      None of them looked as good as the original 300kb file.

       

      My question(s): I'm trying to figure out how to manage Flash so that I can produce—not just a 20 second project for this class, but—short animated stories. How are people using Flash on the web to do anything longer than 10 seconds IF those 300KB are too heavy and stumble on playback? Why is Flash Player choking on what I consider a relatively small file?

       

      If someone is willing to take a look at the file and discuss this with me, I'd be happy to send a link. A crappy version of the MOV exists here:

        • 1. Re: Character Animation—managing data rates for "heavy" SWF files?
          adninjastrator Community Member

          You may find that there are many different ways to accomplish what you are attempting... so without going into detail, here's just a few basic things to consider.

          First, set the Flash stage to exactly match the final display target size.... don't create a 1000 x 500 stage if the final Web page display is only 500 x 250.

          All/most of the graphics should be vector rather than bitmaps (jpg, png, gif, tiff).

          If you do have to use any bitmaps, be sure to resize them outside of Flash to the exact dimensions needed on the stage..... don't bring a large image into the library and then scale down in Flash.... doing so just bloats the file size.

          Elements on the stage can be broken down into smaller sections and turned into symbols that can be used over and over. That way you won't need to create a whole new item if only one small part is moving/changing. Look at each element and movement sequence and determine what is the least number of moving parts you need to accomplish it..... reuse, repeat, recycle.

          I would stay away from ANY video format if file size is a concern.... you will not do any better than .swf.

          As for a 300kb file size... I wouldn't be too concerned if that was my file.... but the instructor has a very good point, learn from the very beginning to optimize the elements of a Flash doc and keep the file size small... choose the correct dimensions to start with... don't scale, keep Library elements to bare minimum... re-use, re-peat, re-cyle those elements.

          And I don't presume to question you instructors comments, rather I'll hopefully add a little to your knowledge and understanding of "data rate".... though I'm not sure that "data rate" would be the best terms to use.

          Data rate, or data "bitrate" is the amount of data that must continually flow into the display media (in this case the .swf) to display the animation uninterupped.

          A simple .swf will differ from a video, for example, in that all the data may need to be downloaded before the animation can start, while in a video, only a small part of the video .... the first hundred frames or so... needs to download, then as the video displays, the downloading will "progress" and finish downloading the file.

          How fast the file is downloaded is a function of the viewers Internet connection speed. This download speed is measured in kilo bits per sec.

          So how long would it take to download a 300kb file? Well that of course depends on the viewers connection speed.

          300kb(ytes) = 300 x 8 (bits/byte) = approx 2400bits

          On a 1Mb(it) connection it would take approx 2.5 sec.

          On a 6Mb(it) connection it would take approx .4 sec.

          Test you connection speed here:

          http://www.speedtest.net/

          You can also approximate download time with the Flash bandwidth profiler. That and other Flash "Optimization Practices" are discussed here:

          http://help.adobe.com/en_US/flash/cs/using/WSd60f23110762d6b883b18f10cb1fe1af6-7b23a.html# WSd60f23110762d6b883b18f10cb1fe1af6-7b1aa

          Best wishes,

          Adninjastrator

          • 2. Re: Character Animation—managing data rates for "heavy" SWF files?
            bjgough Community Member

            Thanks adninja—

            I will definitely check out the Optimization Practices link.

            As far as the other stuff:

            • My stage is set 540x400 which is standard for all our assignments.
              • Incidentally, we aren't posting these assignments on the web for viewing.
              • They are posted in a class discussion forum, where viewing requires downloading onto your local machine and then viewing in Flash Player.
              • So, we aren't relying on a data connection to view, only to download. 
            • All graphics are created inside Flash—there are no imported images.
            • Everything has been converted to symbols and nested within symbols (this is a pretty simple run cycle with looping background elements)
            • I agree SWF has produced the best results compared to the anything AE was able to produce with the exported PNG sequence.
            • Library elements to a bare minimum... I have created a folder structure in the library and timeline (there is only one Scene) to organize symbols... does that increase file size?
            • Data rate = bitrate I think is a fair interpretation.
            • So, a SWF needs to download entirely before playing back? (it doesn't stream like a video does?)
              • If that is the case, then I would really not expect any lagging in the SWF since it should have all the pieces it needs to run the clip.
              • If that is not the case, I would still think a 300kb file ought to stream as smoothly as any 4MB video file... (admittedly, I know very little on the subject)

             

            Thanks for taking the time to respond! I think I'm just puzzled that Flash is reportedly choking on its own creation. Sure, I could make a photoshop file that tanks Photoshop, or Illustrator... but those would have to be excessively large files. I would expect to be able to make a relatively simple Flash movie that lasts a couple minutes without compromising its ability to play in the Flash Player.

             

            I've asked my instructor basically the same question posted here... I'll update with the response I receive.

             

            Now, I'm heading over to check out the Optimization Practices.

            • 3. Re: Character Animation—managing data rates for "heavy" SWF files?
              adninjastrator Community Member

              So, a SWF needs to download entirely before playing back? (it doesn't stream like a video does?)

              Actually this depends a little on the particular .swf. For example, if you have a .swf that makes good use of re-use, re-peat, and re-cycle, the .swf may need all the library content downloaded in order to display frame 1, after that, all action on the stage simply reuses some or all that library content... then all content needs to be downloaded before the .swf starts.

              Where as another .swf with a long timeline may be constantly displaying new stuff.... so then there can be time to download the content used in frame 250 for example.

              "stream" like a video is not quite the correct terminalogy... what you most likely mean is "progressive download" like a video. Although video files can be "streamed".... that's a different subject.

              Progressive downloading means that the video file downloads the data for the first hundred frames or so, then the display starts while the rest of the download progesses, until the entire file is downloaded.

              But yes, .swf files CAN be progressively downloaded.... for example:

              http://www.cidigitalmedia.com/tutorials/vid_sync/vid_sync.html

              click the link and watch the download progress bar in your browser..... display starts and "progresses" as the .swf plays.

              This is a single .swf of 28MB. In this case it's an embedded video where the contents of frame 200 is not needed at all to display the first 199 frames... so it can be progressively downloaded. And in case you are wondering, the embedded video has a bitrate of 400kbps.

              So approx 6 sec of data from this .swf would equal the file size of your .swf... pretty tiny by comparision .... your .swf would play for 10 sec while mine only plays for 6.

              But yours may need all or nearly all that content loaded to display frame 1... so you may need to download the entire .swf before display starts.

              Now how about this... take and copy your entire timeline and paste it onto the end of the current timeline (save as test.fla). You may find little or no increase in file size because you are simply reusing content.

              So your 20 sec final version will not necessarily be twice the file size of your 10 sec version.

              • They are posted in a class discussion forum, where viewing requires downloading onto your local machine and then viewing in Flash Player.

              If this downloading is done over a LAN, or closed network, downloading should be very fast, most likely much faster than any Internet connection. 300kb should download in the blick of an eye.

              And once on your local machine, there is little or no reason for

              compromising its ability to play in the Flash Player.

              it will play just fine once on your local machine:

              too heavy or too clunky

              then really loses all meaning. I'm sure your instructor meant that in the sense of heavy or clunky in downloading the file.

              It sounds like you have already pretty well optimized your .swf... and like I said 300kb is not that large a file. But still, it's best to learn to mimimize/optimize from the beginning.

              Best wishes,

              Adninjastrator

              • 4. Re: Character Animation—managing data rates for "heavy" SWF files?
                bjgough Community Member

                I've been using the CTRL+OPT+SHFT+C on my drawings to further reduce the information stored in the Flash file. Not sure if that's overkill, but one thing you mentioned that I realized might have caused some clunkiness was when creating new symbols, I was drawing them on the size of my screen and not really paying attention to their relative size to the stage. So, all my symbols are actually 1.5—2x the height of the stage. So, now, when I go in to create a new symbol, I draw a rectangle the size of the stage as a guide layer and then delete after I've got my scale appropriately figured out.

                 

                it will play just fine once on your local machine:

                too heavy or too clunky

                then really loses all meaning. I'm sure your instructor meant that in the sense of heavy or clunky in downloading the file.

                It sounds like you have already pretty well optimized your .swf... and like I said 300kb is not that large a file. But still, it's best to learn to mimimize/optimize from the beginning.

                I can't imagine that the problem is downloading off the internet. I have noticed inconsistencies in Flash Player when playing back these class assignments. Sometimes the sound is off, sometimes it's on. They are always looping sequences so, it's interesting to watch it loop—get off track, out of sequence, REloop, be BACK on track...weird.

                 

                Anyway, thanks for your discussion on this.

                • 5. Re: Character Animation—managing data rates for "heavy" SWF files?
                  adninjastrator Community Member

                  Well it's still my opinion that a 300kb .swf file played from a local machine is anything but "heavy and clunky".

                  That's a very small file and should play back smooth.

                  I have noticed inconsistencies in Flash Player when playing back these class assignments

                  If this is in a classroom of students who are just learning Flash, I'd say there is a better chance of problems with the Flash files that the students are creating than problems with the Flash player itself.... and I'm speaking as a former student myself!

                  Now when you talk about sound in the Flash file, you are talking about something all together different!

                  Sound can be sort of a tough challenge when learning Flash. Remember that there are basically two ways for Flash to handle sound, "Event" sounds which play from beginning to end regardless of what else is going on on the timeline... like a short "beep" or musical tone when a button is clicked or door opens..

                  The second way Flash uses sound is "streaming", meaning Flash will play the sound and the animation going along with it may or may not keep up. This will vary depending on the Flash doc frames per sec, the size and complexity of the Flash file as well as the ability to download data into the Flash player fast enough to keep up.

                  So all it takes is a few missed labeled sound clips ... event when it should be streaming... streaming when it should be event..to really sound whacky. It's not the players fault, it's the student that mis-used the sound type that's the root cause.

                  http://www.utexas.edu/learn/flash/sound.html

                  http://www.awdsf.com/courseware/flash/flash6_sound.htm

                  to name just a few links that discuss this.

                  So yes you should be creating all content to the exact dimensions needed in Flash... Do NOT scale in Flash.

                  But if you get a 300kb Flash file that is "heavy and clunky".... show me.

                  I still say "heavy and clunky" relates to download speed. IF it plays slow or acts clunky on a local machine, the fault is not the fact that the file is 300kb, it's that the content was not created or managed properly... final size had nothing to do with it.

                  Best wishes,

                  Adninjastrator

                  • 6. Re: Character Animation—managing data rates for "heavy" SWF files?
                    bjgough Community Member

                    I've sent you a link to two SWFs. One with sound (lip sync and an explosion sound effect) and another with no sound—a run cycle.

                    • 7. Re: Character Animation—managing data rates for "heavy" SWF files?
                      adninjastrator Community Member

                      Got 'em!

                      Here's my two cents worth...

                      The animation with sound seems to run fine. I don't notice any sync problems.

                      The running animation on the other hand seems to be rather "heavy and clunky"....

                      Here's me eating my words ..()[]()[]()[]()[]...

                      OK so you can have a 300kb .swf that is heavy and cluncky!

                      When I click and open the running animation, it opens at a small size ... 600 x 400 or something like that. And it actually runs just fine! Where it really starts to get "heavy and clunky" is when I start to enlarge it. As I drag to enlarge from original size to full screen, the animation starts to slow down, and by full screen is at less than half speed.

                      Since nothing is being added to the animation as it goes along, the only reason it would be slowing down is that the CPU and graphics display on my machine is struggling to keep up.

                      While not a new machine, it is a dual core 4GB ram and the monitor is 1680 x 1050.... yet it struggles at full screen.

                      To test my theory, I used Task Manager to monitor the CPU.

                      The run animation at original size is running the CPU ar almost 50% (pretty darn CPU intensive) and then goes up from there as the display size increases. The result is that the animation appears sluggish, heavy, and clunky.

                      But it really has nothing to with the file size, rather it's because in the animation, every single pixel on the monitor is constantly changing.... having to be redrawn (moving background, animated characters, cloud bursts, etc). That is a very intense process and is overwhelming the capacity of my machine.

                      Now you might test on a new i7 64GB RAM SuperDuper VidSlammer card and get it to play just fine.... But I think the lesson is that you need to be aware of the graphic demands put on the machines CPU/graphics unit.

                      The fewer pixels that are changing at any one time, the less work the machine will have to do.... making for snappy animations.

                      Do your own CPU tests as you run the animation to see your own results.

                      Best wishes,

                      Adninjastrator

                      • 8. Re: Character Animation—managing data rates for "heavy" SWF files?
                        bjgough Community Member

                        Thanks again for the continued discussion on this:

                        The original stage size is 540x400, so, I wouldn't expect it to perform better scaled up... (although, these are vectors, right!? )

                         

                        Here's what's still puzzling to me:

                        The run animation at original size is running the CPU ar almost 50% (pretty darn CPU intensive) and then goes up from there as the display size increases. The result is that the animation appears sluggish, heavy, and clunky. But it really has nothing to with the file size, rather it's because in the animation, every single pixel on the monitor is constantly changing.... having to be redrawn (moving background, animated characters, cloud bursts, etc). That is a very intense process and is overwhelming the capacity of my machine

                        How is this any different than say an .mov or .wmv file that has constantly changing pixels onscreen? Granted, the same .swf exported to an .mp4 is much larger at 4MB. It generally retains the same level of quality as the 300KB .swf... I know I'm branching out into all sorts of territories with my ignorance—CPU speeds, compression codecs, file types, and so on.

                         

                        I find it curious that a 300KB file could so monopolize the computer and yet be so small in size. Big things in little packages, I guess. I'll have to get more familiar with Activity Monitor as I further build my skills in the Flash/Video environment.

                        • 9. Re: Character Animation—managing data rates for "heavy" SWF files?
                          adninjastrator Community Member

                          The original stage size is 540x400, so, I wouldn't expect it to perform better scaled up... (although, these are vectors, right!?)

                          But remember, it's precisly because these are vector images, the color at any one location is not set from one moment to the next. A mathmatical computation involving both the scaling as well as the new color (as the animation scrolls across the screen) has to be handled by the CPU. As you scale a vector, new mathmatically calculations are constantly being done.

                          Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygon(s), which are all based on mathematical expressions, to represent images in computer graphics.

                          From:

                          http://en.wikipedia.org/wiki/Vector_graphics

                          This is not the case with a bitmap...as a video or jpg image. While the color of a particular pixel may change as the animation scrolls by... there is no math computation involved.

                          And, since the resolution of a video is set at rendering time, there is no real mathmatical scaling involved, rather if one pixel is red and you quadruple the display size from 320 x 240 to 640 x 480.... now there are four red pixels. The CPU and/or graphics card are able to compute the color of those 4 pixels much easier scaling a bitmap than scaling a vector. The video simply gets blurry as the display dimension increases (take the color of the neighboring pixel and use that)... degrading the quality, unlike the vector image which the computer attempts to keep at exactly the same quality, pixel for pixel.

                          Of course this is a very simplistic explanation. Going into detail of video codecs and bitrate would best be left for another post.

                          While vectors are great for scaling, it's the continual movement of so many elements of your Flash project that is causing the problem. It's not the fact that the images are vectors and it not because the file is 300kb... it's the contstant movement of every pixel on the screen.

                          To verify my theory, test your running man against a stationary background... turn off/get rid of other constantly changing elements, like the cloud bursts. I assume those are created in actionscript using a random number, random size, and random location. These mathmatical calculations also absorbs CPU power. Test without the cloud bursts.

                          Do some experimenting and find the biggest problem element... then maybe change or eliminate that.

                          More (animation) is not necessarily better animation. Take a look a movies and video on the Web. Most clips have a stationary background... short clips can be pieced together to change the viewers perspective. Especially for video intended for the Web, panning or zooming the camera is greatly discouraged because it takes a much greater bitrate (datarate) during that portion of the video.

                          Anyway, best of luck on your project!

                          Adninjastrator

                          • 10. Re: Character Animation—managing data rates for "heavy" SWF files?
                            bjgough Community Member

                            I'm going to reveal just how novice I am here.... I didn't realize that the movies played back AS vectors. Not sure why I assumed they were converted to bitmaps. But, that makes total sense, as long as things are moving around, the CPU has to continually calculate the vector size/shape/color/alpha, etc...

                             

                            The cloud bursts (and nearly everything else) are movie or graphic symbols that I created by hand. I couldn't actionscipt my way out of a wet paper sack.

                            More (animation) is not necessarily better animation. Take a look a movies and video on the Web. Most clips have a stationary background... short clips can be pieced together to change the viewers perspective. Especially for video intended for the Web, panning or zooming the camera is greatly discouraged because it takes a much greater bitrate (datarate) during that portion of the video.

                            I agree. However, the assignment called for run cycle on panning background with horns growing off of our character. I had been chastised the week prior for not drawing hands, so I threw in the Hand of God to rectify my instructor's understanding of what I could and couldn't do... Anyway, only 5 weeks left of the course, and then I can drop Flash for character animation and start using ToonBoom Animate.

                             

                            Thanks (x1M)