1 Reply Latest reply on Jun 22, 2010 12:13 PM by Ninarama

    reduce file size vector graphics

    jiggy1965 Level 1

      When it comes to imported vector graphics are there any methods to decrease the swf's file size as much as possible?

       

      So far I have:

      - imported an illustrator ai file (strokes 'expanded' in illustrator and unneeded swatches/brushes etc. deleted and with no raster images embedded)

      - exported the file in illustrator as swf and imported that swf into flash

      - imported ai file and breaking it down to flash shapes

      - optimized those shapes as much as possible

       

      I rather use vector as much as possible. For a banner for examle, I've imported vector images of trees. I couldn't get it below 40 kb so I exported all illustrator files to png files which helped. Can detailed vector images be optimized just as much? Or is it better to use bitmap files when it comes to more detailed graphics? Does it matter if it is a vector images made in flash or a imported vector file even if both have the same number of paths?

       

      Any other ideas I might try besides the things I've already tried?

        • 1. Re: reduce file size vector graphics
          Ninarama Level 1

          There is a certain threshold when a bitmap can actually be smaller than a detailed vector graphic. Especially when working on small image sizes, bitmaps can often be quite smaller.

          For a vector graphic, you can't do more than reducing the number of vertexes which may result in a poorer graphic.

           

          With bitmaps, you can do a lot more:

          Keep in mind that bitmaps with an alpha channel use up much more memory than bitmaps without alpha information. So try to reach your goal without using transparent bitmaps - which seems hard in the beginning, but as Flash provides different blending modes, you can, for example use the blending mode "multiply" for a black logo on a white background with just a grayscale bitmap instead of a bitmap with alpha channel information.

          The same is valid for a white logo on a black background: Use the "add" blending mode instead, then.

          I have also written some Photoshop Plugins to reduce the alpha-channel bit-resolution which sometimes gives me the extra 3-4kb I needed. Instead of using 256 shades of alpha, it reduces them to maybe 8 or 16. Alpha-Channels are comressed like GIF/PNG images inside of flash, so having as few different shades of alpha as possible will make images smaller. I even use dithering sometimes for softer alpha areas.

          In some rare cases, you can also gain some bytes if you convert text to vector graphics (pressing CTRL-B twice), but this only works when there's not much text at all. That's because the metric information for text glyphs take up a bit more space then just the shapes. So you can imagine that this may only work if there is just one text element with all different letters. So you won't get much size reduction by converting "abracadabra". But you will get some reduction if you convert "the quick brown fox jumps" into shapes.

           

          This all can help if you have restrictions like 30kb or even 20kb to create a full animated flash banner.