Flash / AS

Silverlight

WPF

ASP.net / PHP

Photoshop

Forums

Blog

About

 


FlashComponents
  Galleries
  Slideshows
  Menus
  Design & Effects
  Audio & Video
  User Interface
  Templates

 

 

 

 

 

 

 

 
Random Color Generator

As I was checking out some experiments on several Flash sites, I saw an animation that had what I thought was a random color generator. So, after playing around with the ActionScripting code, I finally found a way to make it work.

 The example below will show you how your final animation may look:

Click on the Yellow Circle Above

Random Colors

Before we start, please download the partial source below. Don't worry, the partial source will not have the key elements to make it work...you'll do that with the information found below. Click here to download the source.

Here's How:

  1. What you need to do, is practically copy and paste code on your example. Right click on a square (at random maybe?) and choose Actions. From the window that pops up, click on the arrow on the top right of the window. Choose "Expert Mode". See image below:

  1. From there, you can actually type in custom commands. So, simply copy and paste this code into the actions window.:

onClipEvent (load) {
            myNum = _name;
}
onClipEvent (enterFrame) {
            _root["r"+myNum+"Diff"] = _root["r"+myNum+"New"]-_root["r"+myNum+"Old"];
            _root["r"+myNum+"Change"] = _root["r"+myNum+"Diff"]/10;
            _root["g"+myNum+"Diff"] = _root["g"+myNum+"New"]-_root["g"+myNum+"Old"];
            _root["g"+myNum+"Change"] = _root["g"+myNum+"Diff"]/10;
            _root["b"+myNum+"Diff"] = _root["b"+myNum+"New"]-_root["b"+myNum+"Old"];
            _root["b"+myNum+"Change"] = _root["b"+myNum+"Diff"]/10;            
            swatchColor = new Color(this);
            swatchColor.setRGB(_root["r"+myNum+"Change"]<< 16 | _root["g"+myNum+"Change"] << 8 |

           _root["b"+myNum+"Change"]);
            _root["r"+myNum+"Old"] -= _root["r"+myNum+"New"]-_root["r"+myNum+"Change"];
            _root["g"+myNum+"Old"] -= _root["g"+myNum+"New"]-_root["g"+myNum+"Change"];
            _root["b"+myNum+"Old"] -= _root["b"+myNum+"New"]-_root["b"+myNum+"Change"];
}

Now, copy and paste that code into all the other squares as well. So, you should have four squares with the exact same code in it. 

  1. Now, it's time to add the code for the Button that will invoke this action script. Simply go back into Expert Mode (make sure you have the Action window for the middle button) selected. Copy and paste this code for the button:

on (release) {
       for (i=1; i<5; i++) {
           _root["r"+i+"New"] = random(255);
           _root["g"+i+"New"] = random(255);
           _root["b"+i+"New"] = random(255);
           _root["b"+i+"New"] = random(255);
    }
}
 

Now, you can preview the animation, and it should work.

Adding More Elements To Be Randomly Colored:

Surely, on your animations, you will not be using 4 squares. You can use up to a million squares if you want to hehe. But, you do have to do two important things before you can go about adding your million squares (you can add as many or as few as you want). 

If you look at the Instance name for each square, you should see that I numbered it. For good reason too; the numbers help the code to determine which movie should be updated. So if you add more elements, make sure you number them sequentially as well. (Square 5) will have an instance name of "5". Now, here comes one of the most important steps. Modify the code for the button to incorporate new squares. I'll be referring you to the highlighted code below (this is the same code as the one for the button):

on (release) {
      
for (i=1; i<5; i++) {
           _root["r"+i+"New"] = random(255);
           _root["g"+i+"New"] = random(255);
           _root["b"+i+"New"] = random(255);
           _root["b"+i+"New"] = random(255);
    }
}

The code that is highlighted in Red has to be modified. Where it says "i<5" add one extra for 6 squares. In other words, if you have 10 squares, the code would be the same except for "i<11" Also, you need to copy the line: _root["r"+i+"New"] = random(255); repeatedly for each square. So a 10 square animation will have this following code for the button:

on (release) {
      
for (i=1; i<11; i++) {
           _root["r"+i+"New"] = random(255);
           _root["g"+i+"New"] = random(255);
           _root["b"+i+"New"] = random(255);
           _root["b"+i+"New"] = random(255);
           _root["g"+i+"New"] = random(255);
           _root["r"+i+"New"] = random(255);
           _root["g"+i+"New"] = random(255);
           _root["b"+i+"New"] = random(255);
           _root["r"+i+"New"] = random(255);
           _root["g"+i+"New"] = random(255);
    }
}

Notice that I alternated the "r", "g", and "b" in the code above. That will specify what portion of the color RGB value to randomize. It also simply assigns actions to that statement as well.

So, that is all there is to creating randomly colored movies. You can even change it to where the user doesn't even have to click the button for random colors; you can make it where the user can rollover, etc. So, add this in to some of your animations. It is quite fun and "random" each time :) For the final source code, please Click Here

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

Kirupa's signature!

 

 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.