Optimization in Flash MX

1

I thought I’d write a quick tutorial before I go out with my new lady friend tonight… I hope you guys like this… This gives you information about how to optimize your code or your movies in Flash…

Great for those of you who want to know information about what certain shapes do and how many of them your computer can most likely handle…

Optimization in Flash MX

Curves
The number one killer for most flash movies would have to be the “curves” and everything dealing with them. When you have an object that has 100+ curves in them and you try to move a couple of these things around at the same time… Things start to slow down in Flash.

Well Flash’s easiest Optimization tool is included with it… Modify - Optimization. While barely taking out any visual accuities of looking at that curve… It can make a 100+ curved object to about 70 without losing it’s original touch… And that is a big difference when you have a dozen of these fthings flying around.

Alpha
The story is… Alpha is slow… Many of you might think it’s a great effect but when your movieclip has an alpha less than 100… it starts to eat up time and memory… But why you are wondering…

Well… When a graphic has an alpha on it of say 75%… If that color is green and you run over another object that’s blue… Isn’t the area that those 2 objects intersect at a different color now?

See how they intersect and make new colors? That takes alot of extra calculations to make those new colors show themselves… Not too grand now is it? hehe…

Text
The truth is… text is slow… Especcially when you do alot of things with text… It is incredibly slow. The amount of curves in a single letter… And then having them in words… or even sentences can really rack up… And that isn’t good.

You don’t have to stay away from fonts or text… But try and minimize the number of changes you do to them dynamically… I’ll guarantee it’ll speed things up :slight_smile:

Gradients
Gradients are beautiful… Aren’t they? It seems like everything that’s beautiful is bad… lmao… But it’s true… Everything that is beautiful can be pretty much bad for optimization… it doesn’t matter which fill style you use with gradient… There are alot of colors in it and this makes it bad.

Try to not use gradients whenever you can and just substitue it with some extra lines in the curve and extra filling… You’re movie speed will thank you alot :wink:

Math Calculations
Another truth with Flash is… it’s not a Math Program… Of course it gives you all those lovely features for you to play with like sine and cosine and tangent and OoOoo… Goodies huh? Don’t use them…

Memory is alot faster than your computers calculations especcially in Flash… Use a look-up table to store all your cosine and sine datas… And then just multiply it out like that… Look up tables can be created easily and can be doen as soon as the movie loads up. That way it’s not performing caluclations while your movie is playing and it won’t put any additional sizes onto your movie either.


for(i=0; i<360; i++)
{
   mycos* = Math.cos(i * (Math.PI / 180));
   mysin* = Math.sin(i * (Math.PI / 180));
}

Now you can just call the mycos and mysin lookup tables and multply it that way… Makes your movie ALOT faster when you use look up tables instead of performing calculations outright during movie time. So always remember… Having 100+ variables is better than calculating things 100 times.

Since memory sdtandards are pretty much set at 64 megs and above… 100+ variables is nothing to that… hehe…

PC vs Mac’s FPS
This is a chart that I found… From Friends of Ed actually… That displays the differences in framerates between a PC and a MAC… Now these are avrages and different framerates are expecting for different comps… But kepe in mind… Make the Mac Speed high… The pc speed goes up to… Gotta keep it fair…

PC - MAC
1 - 1
2 - 2
3 - 3
4 - 4
5 - 5
6 - 6
7 - 7
8 - 8
9 - 9
10 - 9
11 - 10
12 - 10
13 - 12
14 - 12
15 - 12
16:20 - 15
21:30 - 19
31:58 - 29
59:120 - 57

That concludes my first section on Optimization… when I gte back form my date tonight… I’ll finish this off with actual MovieClips and their framerates when used in numbers. Helps out I swear.

2

Hey playa!
That is a really nice tutorial. Would you be interested in having it up on the site - I’ll add it up if you want me to :slight_smile:

Cheers!
Kirupa :block:

3

This is some great stuff. Thanks very much for all the hints. It’s a great read when you are starting a new animation, lot’s of things to look out for

4

Aww… thanks guys…

I’ll say this once… When I post tutorials on here they are “kirupa-exclusive” tutorials so feel free to psot any tutorial I write on here… I’ll be writing alot more as I find it enjoyable to :slight_smile: I’ll finish off this one tonight then… I was a little… Errm… Buys? so to speak last night :wink:

5

also see
http://www.kirupaforum.com/forums/showthread.php?s=&threadid=17210

esp. note the links at the bottom

6

Done Deal for this All.

7

The Final Tutorial for Flash MX Optimization

I have done some research and have found a good set of information on all of this stuff found in the old Flash Games Studio Book. This is an EXTREMELY helpful chart showing you the possible FPS with so many objects on screen at a given time and moving around using a certain function.

There are 9 objects that are tested in this chart.

  1. A solid circle with an outline around it.
  2. A radial gradient filled circle with an outline around it.
  3. A linear gradient filled circle with an outline around it.
  4. A random shape with an outline, consiting of 43 curves.
  5. The same random shape without an outline.
  6. A solid circle with no outline.
  7. 25% alpha circle with no outline.
  8. Bitmap textured circle.
  9. Complex vector image from a traced bitmap consisting of 240 curves.

The tests were done in seperate runs of 10, 20, 30, 50, and 100 of each of the objects. So for a test they would put 100 of object 6 (the solid circle no outline) and each of those objects were given the instruction to move across the screen at random speeds, creating one of the worse case scenarios in flash, where each frame is completely different.

The experiments were done on a Pentium III 800 mhz machine. The movie was running at an onscreen resolution of 550 px by 400 px.

High Quality

Object # – 10 – 20 – 30 – 50 – 100
Object 1 – 71 – 43 – 34 – 26 – 16
Object 2 – 57 – 38 – 29 – 22 – 14
Object 3 – 59 – 40 – 33 – 23 – 14
Object 4 – 39 – 24 – 16 – 10 – 05
Object 5 – 63 – 43 – 34 – 27 – 17
Object 6 – 85 – 67 – 54 – 46 – 33
Object 7 – 72 – 50 – 32 – 20 – 10
Object 8 – 85 – 57 – 47 – 31 – 17
Object 9 – 53 – 33 – 24 – 16 – 09

Medium Quality

Object # – 10 – 20 – 30 – 50 – 100
Object 1 – 86 – 55 – 47 – 37 – 24
Object 2 – 69 – 50 – 39 – 31 – 20
Object 3 – 80 – 51 – 42 – 32 – 21
Object 4 – 54 – 35 – 25 – 17 – 08
Object 5 – 78 – 55 – 45 – 37 – 24
Object 6 – 95 – 79 – 62 – 56 – 42
Object 7 – 88 – 66 – 44 – 29 – 17
Object 8 – 91 – 60 – 50 – 34 – 19
Object 9 – 68 – 45 – 35 – 24 – 14

High Quality

Object # – 10 – 20 – 30 – 50 – 100
Object 1 – 98 – 62 – 54 – 42 – 27
Object 2 – 75 – 57 – 46 – 36 – 23
Object 3 – 88 – 57 – 47 – 36 – 23
Object 4 – 65 – 41 – 30 – 20 – 09
Object 5 – 87 – 63 – 51 – 47 – 27
Object 6 – 103 – 85 – 68 – 61 – 45
Object 7 – 99 – 80 – 48 – 36 – 23
Object 8 – 101 – 69 – 61 – 43 – 27
Object 9 – 83 – 57 – 45 – 32 – 18

Now… Here are a couple of things you might want to take note after looking through this test.

  1. Minimize the number of curves in any one object.
  2. Minimize the use of gradients, and if you must use gradients, try and use simple linear gradients instead of radial gradients.
  3. Simple solid shapes are by far the fastest. Try and make your games out of those. You can fit 100 or more on screen at one time, in full motion and still maintain a good frame rate. That’s a lot of objects and that has a lot of promise for good performance in games. Though they are merely circles, they’re representative of any simple shape.
  4. For very complex images, use a bitmap image of it rather than its vector equivalent.
  5. Keep your alpha values at 100% and if you must have semitransparency, keep it stationary and keep its shape simple.
  6. Remember that real estate = clock ticks = decrease in performance. Keep things small because the smaller things are, the fewer pixels must be rendered.
  7. Try to keep your on-screen resolution at a low, and decrease the perceived real estate by suggesting to your players that they lower their resolutions on their monitor.

Have a good one… Hope these help you guys out.

8

What about using tweens, or should movement and placement be done wit code?

9

try and stay away from tweens as much as possible… They contort the shape around and add and subtract different amounts of curves into the figure…

Also, it would be hard to measure a tween’s speed. Just think of it lie an advanced calculation.

10

Ok, I will do.

Ratbaggy goes off to learn AS more thoroughly

So for advance animations, i.e. more than an MC moving from A to B how would you structured the code? Or is there a point when scripting motion becomes rediculous.

I went to a design conference last night, Matt Sawkill of http://www.sawks.com/ spoke there. One commercial site he worked on was entirely created with code and data was DB driven so the initial SWF was summin like 40kb, which is way cool. How’s about some tips on creating a layout with code etc.

I’ll see if I can dig up the site Sawx spoke bout.

11

Creating an entire layout with code? You mean going from curves to lines and fill ins and everything else?

That’s really not my domain… I don’t really handle straight flash sites around my area… Some flash but more or less PHP and DHTML…

I could do it though… Go from a db of information into a layout… If you really wanna know that?