Printer Friendly Version

 Diane Cipollo BellaOnline's Flash and Animation Editor

Generating Random Numbers and the ActionScript Math.random() Method

In our last FlashR CS3 particle system snow scene tutorial, we learned how to generate several instances of the same movie clip by using an ActionScript for loop code. We applied this to our snow scene to generate snow flakes across the top of the stage. However, the flakes are all at the same vertical height because they all have the same Y position.

The scene would be better if we could place the flakes at different and random Y positions. This will cause the flakes to begin falling from different heights in the scene. We can do this by generating a random number for the Y position for each flake using the random() method of the Math class. The Math class is one of the built-in ActionScript classes and contains several methods that perform common math functions such as generating random numbers and rounding numbers. This is only one of the built-in classes that will help to make your life as a Flash programmer much easier.

The first step is to generate a random number between 0 and 1. This only takes one line of code and the number that is generated can be anything from 0 up to but not including 1. You might be thinking that this will not give us very many numbers. But, since the random number can have an infinite number of decimal places, the possibility of different random numbers is infinite. So, here is the magic code.

 Math.random();

Here are some examples of the numbers that you might get.

0.03886883286759257
0.48858183017000556
0.7633519941009581

Now, we can take this random number and use it as our Y position. But the difference between the resulting Y positions on the stage is very small making it difficult to see any visible difference. The flakes will still look like they are lined up in a row. It would be better to generate a random number between 0 and 40. To do that, we will multiply the generated random number by 40 which will give us a Y position between 0 and 40 (not including 40).

 Math.random() * 40;

Here are some examples of the numbers that you might get this time.

5.424067657440901
6.018269108608365
16.194872967898846

OK, we are ready to add this to the ActionScript for our snow scene. Here is what our code looks like at this point. Now, we will add code to position each flake at a random Y position between 0 and 40. We just need to add one line of code that sets the Y position for our _Snowflake to a random number between 0 and 40.

 _Snowflake.y = Math.random() * 40;

Go to Frame 1 on the Actions Layer in the Timeline. Open the Actions Panel and add this line of code just before the closing curly bracket.

Test your movie several times and you will see that the flakes are in different positions each time.

OK, now that we know that it does work, let's do the same for the placement of the flakes along the horizontal line. We just need to change the line of code that places each instance of the movie clip 50 pixels apart.

 _Snowflake.x = i * 50;

We can use the same Math.random() function to place the flakes at random positions along the horizontal axis. Let's replace the code "i * 50" with "Math.random() * 40;". Test your movie again. What happened? We have all the flakes bunched together at the left of the stage. Why? Our stage is 550 pixels wide and we are using random numbers between 0 and 39. We need to change the "50" to "550" and test again.

OK, that's better but some of the flakes are being cut off on the right edge of the stage. We need to narrow our scope just a little to take into account that the flakes are 35 pixels wide. Let's change the 550 to 510 and test again. Now the flakes are falling within the stage and not being cut off at the edge. That's good enough for now. Here is the code that we have written.

 var _Snowflake:mcSnowflake;for (var i:Number = 0; i < 10; i++){ _Snowflake = new mcSnowflake(); addChild(_Snowflake); _Snowflake.x = Math.random() * 510; _Snowflake.y = Math.random() * 40;}

For reference, save your snow scene as SnowScene3.fla.

Flash and Animation Site @ BellaOnline