| Register
Sunday, May 11, 2008   

Optimizing Large Pizza

Created By  Benjamin Mace, at  9/13/2005 - 14 comments.

Click to view this author's website.

The #1 draw to Flash since it was Future Splash (see you learned something already) has been lightweight, vector based graphics. The ability to deliver rich media at runway model size (and have it move as sexy as them) opened new doors in an age of narrowband oppression. With broadband, many of us have become sloppy in our development and design in reference to art. Instead of waiting for a small kb sized Flash movie to load on a narrowband connection in about 60 seconds, we are making users wait for a larger megabyte++ movie to load in about 60 seconds. No benefit from broadband here really. Most of them push the envelop in visual effects or contain video now, but many of us are simply spending less time with optimization knowing more and more pipes are being upgraded around the world.


Just because more people are switching to broadband, it doesn't mean we should make bulkier projects because our end users can deal with it. The truth is that as you grow as a Flash developer or designer, broadband will expand but newer forms of communication and media distribution will arise. Optimizing for today means that you won't have such a learning curve developing for newer hardware like games for phones or interfaces for applications on handheld devices.


Using vector graphics doesn't always fit the build, or provide a smaller size than a jpeg for some art but symbols do. Symbols allow us to reuse art at no extra cost. We can name them, manipulate them, attach and remove them and overall, lose weight with them.


Over the years I have found a super easy example to explain this to students, new Flash designers and yes of course, vets who don't have time to care. Pizza.


Pizza is something that can be reused many symbols and get across weight loss quickly. Ironic that I'm using a fatty food to show weight loss isn't it? I usually like to start out with a terrible clip art jpeg of a pizza. You can find loads of them on Google's image search and walk through this example in front of a group in minutes. The idea is that you can take some (and not all) art and convert it into reusable symbols in moments and lose 99% of the file size most of the time. Remember we're talking clipart here, not Picasso or Eric Jordan (for those of you to digital to know who Picasso is.)


Next up I'll import the jpeg of the pizza into Flash. I then export the file to a swf and show the bandwidth profiler. Here we have a lovely black and white pizza weighing in at about 63kb. From there I will go back into Flash, select the pizza on the stage and go to Modify>Bitmap>Trace Bitmap… This will convert the bitmap to vector art. Depending on the pizza and the curve settings, this may drop about 10% to 20% off the file size. In some cases it may make it bigger but we aren't done.


From there I delete ½ of the pizza on the stage in its vector form. I then cut 2/3 of the remaining pizza off at 60°. This leaves us with 1 slice of ugly clip art pizza. The remaining slice of vector eye candy is all selected and made into a symbol of a slice of pizza. The slice is then duplicated and rotated 5 times to make up a pizza of 6 slices. The eyes open and it gets interesting as the file size drops to several kb or less. Even Jenny Craig is jealous right about now.


After a single slice becomes 6, I then edit the original slice symbol within the library and select each topping and create a symbol for each. Pepperoni, mushrooms and onions all have their own symbol in the library along with the slice we first made. Once again I export and point to the bandwidth profiler showing at least another kb down. We can still reduce our file size by quickly redrawing some of the art vs. using the rough traces created by our modify tool. Each symbol is quickly redrawn in the library with the oval and rectangle tools. Pepperoni, mushrooms and onions can all be represented with simple geometry quickly.


After cleaning up the art we export again and look at our bandwidth profiler one last time to see yet another kb or so fall off our file's waistline. While our file is small, the pizza looks a bit unnatural and very symmetrical. We can fix this by going back into our library and duplicating the original slice a few times. Now that we have 2 or 3 slices in the library doing nothing more than housing topping art, we can rearrange the toppings on each slice to make them look a bit different. Back on our stage we can then select a slice at random, choose Swap Symbol from our properties panel and select a different slice. The result is a piece of clip art that looks very similar to our original yet weighs next to nothing.


The pizza example is very crude but it always gets the point across clearly. Forests of tress, clouds in the sky or scales on a fish can all be done in the same manner. You aren't limited to vectors of course. If you create a nice cloud as a png file with alphas, you can still create a symbol of it and stretch flip and skew the symbol on the stage to make it appear different in some manner. The thing to remember is that the more you use symbols within your art, the more likely you are to have a trimmer file size the day your project is delivered to the client and smaller files make everyone smile. You can download the example files from my site located here.


Need Professional Help For Your ActionScript Project?
ActionScript.com Consulting Services provide top quality professional ActionScript consulting to businesses around the globe. If you have a professional project in need to world-class talent, tell us about your project by requesting a quote today.

Reader Comments

  1. zikey  Replied:
    ( 9/13/2005 At 2:43 PM)

    well! I'll take into account my flash weight!

  2. Tony Norvnaniani  Replied:
    ( 9/14/2005 At 3:01 AM)

    I used to teach this concept about 3 years ago, that was one of the first things that got my attention when I started using flash...a few years back

  3. none  Replied:
    ( 9/20/2005 At 6:30 AM)

    I'm going to have to show this to a few of the sloppy peeps in our office. Thanks.

  4. Jack  Replied:
    ( 9/20/2005 At 9:35 AM)

    Pizza is something that can be reused many symbols and get across weight loss quickly.

  5. Dieter Struik  Replied:
    ( 9/29/2005 At 11:55 AM)

    Benjamin J. I got your point.
    Greets, Dieter

  6. James  Replied:
    ( 10/6/2005 At 2:30 PM)

    Wow, using the tracer is neat.

  7. khawar  Replied:
    ( 10/26/2005 At 12:02 PM)

    goo..d
    but the idea should be made computerized
    the mathematically algorithms should be able to do this as well
    good job
    cheers

  8. joshua  Replied:
    ( 11/7/2005 At 11:05 PM)

    hello i like pi

  9. Wong PoKér Hu  Replied:
    ( 11/9/2005 At 1:47 AM)

    Wow, thnx for the article. Nice way to explain it. The trace plugin is sexy indeed.

  10. chozoJedi  Replied:
    ( 12/8/2005 At 6:04 AM)

    Awesome. Never looked at it this way before.

  11. telewizory plazmowe  Replied:
    ( 12/10/2005 At 4:26 AM)

    This theme is very interesting, with attention I will read next registration fees.

  12. larifari  Replied:
    ( 12/13/2005 At 5:07 AM)

    Where can i find this wonderfull pizza picture?

  13. Jonathan Chapman  Replied:
    ( 5/7/2006 At 1:52 AM)

    I'm hungry :)

  14. Jay Doshi  Replied:
    ( 6/22/2006 At 3:43 AM)

    Nice Interesting Awesome Article
    Thnx for this Benjamin :)

Login to post your comments. If you do not have an account with us please Register.
Copyright 2005 by ActionScript, Inc.   |  Privacy Statement  |  Terms Of Use  |  ActionScript Client Extranet