How do you manage file size with heavy animations?
A Flash Developer Resource Site

Page 1 of 3 123 LastLast
Results 1 to 20 of 42

Thread: How do you manage file size with heavy animations?

  1. #1
    Member
    Join Date
    Jan 2007
    Posts
    48

    How do you manage file size with heavy animations?

    Greetings all!

    We have been building a flash multiplayer online board game, like the one at tacticsarena.com - board with squares, rendered 3D units moving on the board.

    Here is the biggest problem. We have 22 models to be animated (tacticsarena.com has 20). And, there are about 4 animations for each. And, 4 directions for each. That makes it a total of 22 x 4 x 4 = 352 final animation renders. This I suppose would be a similar number for tacticsarena.

    However, at the lowest quality where the models do not get distorted, we are able to only manage 450 KB @ 30 fps and 50 KB @ 4 fps per attack animation. At 4 fps, the animation is extremely choppy.

    Now, the question is, how does tacticsarena do it?! Seed's total file size for the flash game is only 3 MB! According to our calculation, even at the very choppy 4 fps, the file size comes to more than 10 MB easily (given that the turn and impact animations are not as long as the attack and move animations).

    Is there a solution?

    Thanks all in advance!

  2. #2
    Trainee coder Viza's Avatar
    Join Date
    Sep 2006
    Location
    Melbourne, Down under
    Posts
    513
    What method are you currently using? For example, are you just placing bitmap images into frames and doing a frame-by-frame animation, using simple vector art with tweens, etc.?

    From what I know the best way to do it is by creating a sprite sheet bitmap and using scrollRect(). This should also save you fps with the advantage of using a bitmap.

    Viza.

  3. #3
    Senior Member tonypa's Avatar
    Join Date
    Jul 2001
    Location
    Estonia
    Posts
    8,227
    Common way to reduce filesize and amount of work is by flipping the same thing horisontally so you only have 2 different directions. While it makes the animation look slightly wrong ("the char was holding sword in left hand and now the sword is in right hand"), most people dont care.

    Also depends on how you animate, using bitmaps means each frame needs to be included as full bitmap, while using Flash vector graphics you can reduce the filesize to minimum.

  4. #4
    Member
    Join Date
    Jan 2007
    Posts
    48
    It would be a complete PNG file render for each frame of the animation, depending on the fps that would be decided.

    Tony, we thought about the mirroring, but as in tacticsarena.com, the squares are diamond shape - 45 degree angles x 2. But, am I wrong here? Can the mirroring still be done?

    Viza, I know zilch about coding. What is the sprite sheet bitmap? Sounds like a very nice option. Where can I find more information about it before talking to the coder? Is that what tacticsarena is using?

    And, isn't flash vector graphics the 2D stick animations? Or is it possible to render 3D characters as vector too?

  5. #5
    Trainee coder Viza's Avatar
    Join Date
    Sep 2006
    Location
    Melbourne, Down under
    Posts
    513
    I have no idea what tacticsarena would use as I've never bothered to play it, but here's a bsaic sprite sheet:
    http://board.flashkit.com/board/show...0&postcount=29

    As you can see that's the same image just rotated, but in your case the sprite sheet would contain different frames of one type of animation along the x-axis, and in rows you could have a different type of animation (eg. first row contains shooting animation, second row contains walking animation, third row contains standoing animation ,etc.). Then your coder could create some simple code to tell the engine which part of the sheet should be visible (scrollRect() is pretty muh like a mask, only showing a 'window' of an image), based on which animation should be playing and what frame it is up to. Because you just need the one image as a bitmap, you should be saving memory ( i think).

    I probably don't know enough about the subject, so you may want to do some research yourself on the subject or listen to the people on ths board that actually know what they're talking about.

    Viza.

  6. #6
    M.D. mr_malee's Avatar
    Join Date
    Dec 2002
    Location
    Shelter
    Posts
    4,140
    is it the transparency that causes the filesize?

    maybe try importing as jpeg with black background and using the screen blendMode to key it out. Works for special effects in most of my games, filesize is much smaller with jpg.

    a spritesheet is something like this:

    http://tsgk.captainn.net/index.php?p...sy&sy=7&ga=242

    not sure if filesize will differ, but sure would be easier to manage.
    lather yourself up with soap - soap arcade

  7. #7
    Member
    Join Date
    Jan 2007
    Posts
    48
    Thanks, I will talk to the coder about the spritesheets. And, thanks for the jpeg suggestion too.

    Btw., just wondering. Would anyone happen to know the kind of compression that Flash by itself applies on .PNG images? I mean, if the total size of the images in a .fla file is 10 MB, what would be the size of the images part of the final .swf file at maximum compression?

    Thanks!

  8. #8
    M.D. mr_malee's Avatar
    Join Date
    Dec 2002
    Location
    Shelter
    Posts
    4,140
    go to your fla settings in the properties panel

    click, "generate size report"

    and modify compression settings to see. Aim to get each image around 8 - 9kb compressed, and you should be good.
    lather yourself up with soap - soap arcade

  9. #9
    Senior Member hatu's Avatar
    Join Date
    Jan 2007
    Posts
    480
    One useful program with PNGs is PNGOUT. It takes all the useless stuff out of png's and especially with alot of small files it probably makes quite a bit of difference.

  10. #10
    Senior Member
    Join Date
    Sep 2004
    Posts
    633
    Generally true, but whether jpg compression results in smaller files will also depend on colors used. Even if you use medium compression it may look bad ( red color for example ).

    The trick for the past 10 years has been to use .png for static, or basic animation, the one you are staring at 90% of the time ( like a basic stance or walk ), but once you trigger a faster animation/different moves, all those frames can be done as jpgs with a lot more compression, nobody will notice it because of movement.

    If you have a lot of frames this can save a lot of KB, or even MBs, without sacrificing the look of the game.

    Hard to say how much this helps in your case without seeing the actual animations.

  11. #11
    Hype over content... Squize's Avatar
    Join Date
    Apr 2001
    Location
    Lost forever in a happy crowd...
    Posts
    5,928
    Some quick pointers which may help:

    Delete every other frame, no one will notice.

    Save the images as 8 bit png's with alpha blending using Fireworks.

    Jpeg the arse off every other frame, again no one will notice ( So say your jpeg quality setting is 70, every other image in the animation knock down to 20 ).
    This last one works really well for explosions.

    At a real push, half the size of the bitmaps, and then double scale them in game, maybe using a blur with a setting of 0 to soften them up again ( Or smoothing on if it's running at high / best quality ).

    Squize.

  12. #12
    M.D. mr_malee's Avatar
    Join Date
    Dec 2002
    Location
    Shelter
    Posts
    4,140
    Save the images as 8 bit png's with alpha blending using Fireworks.

    care to elaborate on that Squize. Is that similar to what I mentioned using a blendMode to key out the black. I didn't know 8bit png's supported transparency. This could change a few things
    lather yourself up with soap - soap arcade

  13. #13
    ism BlinkOk's Avatar
    Join Date
    Aug 2001
    Location
    , location, location
    Posts
    5,001
    yeah fireworks will save an image using 8bit encoding with alpha transparency or index transparency. you can also reduce the palette. this can provide big savings compared to 24bit png's.
    Graphics Attract, Motion Engages, Gameplay Addicts
    XP Pro | P4 2.8Ghz | 2Gb | 80Gb,40Gb | 128Mb DDR ATI Radeon 9800 Pro

  14. #14
    Hype over content... Squize's Avatar
    Join Date
    Apr 2001
    Location
    Lost forever in a happy crowd...
    Posts
    5,928
    Yep, it's fantastic.

    It pretty much halved the image size for the sprites in Loved Up, and made Polarity playable without having to have a T1 line.

    I really don't know how they've done it, but it's pretty much like a gif ( Remember those ? ) but with all the alpha goodness.
    The one caveat is to convert the images and save them to a different folder, as when you load them into something like Paintshop pro ( Not sure about Photoshop ) they aren't displayed correctly.

    Squize.

  15. #15
    Member
    Join Date
    Jan 2007
    Posts
    48
    Thanks a million everyone for all the suggestions! I can't wait to try each one of them. I especially love the 8 bit PNG idea. Thanks a lot!

    If anyone does have anymore ideas, please do not let this post stop you from posting it.

    Good day everyone!
    Stanley.

  16. #16
    Elvis...who tha f**k is Elvis? phreax's Avatar
    Join Date
    Feb 2001
    Posts
    1,836
    Have all the anims as external spritesheets (not imported to the library), and load them when needed. Don't load it all, if you don't need it all! Only load the anims needed when going into an attack and if all characters are not visible there's no need showing them! I haven't played tacticsarena either, so I don't know if this will work in your case but it helps with size limitations!
    Streets Of Poker - Heads-Up Texas Hold'em Poker Game

  17. #17
    Member
    Join Date
    Jan 2007
    Posts
    48
    Quote Originally Posted by Squize
    Yep, it's fantastic.

    It pretty much halved the image size for the sprites in Loved Up, and made Polarity playable without having to have a T1 line.

    I really don't know how they've done it, but it's pretty much like a gif ( Remember those ? ) but with all the alpha goodness.
    The one caveat is to convert the images and save them to a different folder, as when you load them into something like Paintshop pro ( Not sure about Photoshop ) they aren't displayed correctly.

    Squize.
    Hello Squize,

    We are finally at the stage where I can send all the frames of the animations to the coder. Presently each PNG is about 10 KB.

    Anyway, I used Fireworks, opened the image and changed the optimization to PNG-8, colors to 256 and transparency to Alpha. The fully transparent layer is displayed in the palette. I export it and the file size is about 3 KB. But, I preview it or use it in any program like Photoshop, I don't see the transparency. It is replaced by other shades of grey and white. I tried various other settings like Adaptive, Exact etc. to no avail. Export to SWF does not work well either (same while background). The only way that seems to work is to export it to PSD and then export from Photoshop as a PNG-8. This way transparency is retained but the image quality goes down 50-fold.

    What am I doing wrong?

    The 32-bit image is at: http://www.stan.in/idle_NE.png
    The 8-bit image is at: http://www.stan.in/idle_NE_8.png

    Thanks in advance!
    Stanley.

  18. #18
    M.D. mr_malee's Avatar
    Join Date
    Dec 2002
    Location
    Shelter
    Posts
    4,140
    Quote Originally Posted by Squize
    The one caveat is to convert the images and save them to a different folder, as when you load them into something like Paintshop pro ( Not sure about Photoshop ) they aren't displayed correctly.
    do they work directly in flash?
    lather yourself up with soap - soap arcade

  19. #19
    Member
    Join Date
    Jan 2007
    Posts
    48
    When exported from Fireworks to SWF? Nope. It looks just like the second image in Flash. Doesn't work in Firefox as well. However, when I open the image in Fireworks again, it loads fine.
    Last edited by Stanley Lyndon; 03-18-2008 at 03:52 AM.

  20. #20
    ism BlinkOk's Avatar
    Join Date
    Aug 2001
    Location
    , location, location
    Posts
    5,001
    you should export it back to a .png. then import the .png's into flash
    Graphics Attract, Motion Engages, Gameplay Addicts
    XP Pro | P4 2.8Ghz | 2Gb | 80Gb,40Gb | 128Mb DDR ATI Radeon 9800 Pro

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width


HTML5 Development Center

Poll by Flashkit.com