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

I hope the information helped. If you have any questions or comments, please don't hesitate to post them on the kirupa.com Forums. Just post your question and I, or our friendly forum helpers, will help answer it.

The following is a list of related tutorial and help resources that you may find useful:

How to use the Forums
New, Upcoming, and In-Progress Tutorials
How to Help out kirupa.com
Writing Tutorials
 

Cheers!

Kirupa Chinnathambi
kirupaBlog | twitter

 

 

SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple. flash components
The Text Animation Component for Flash CS3
Check out the great, high-quality flash extensions. Buy or sell stock flash, video, audio and fonts for as little as 50 cents at FlashDen.

Flash Transition Effects

Flash Effect Tutorials

Digicrafts Components
The best flash components ever! Upload, publish, deliver. Secure hosting for your professional or academic video, presentations & more. Screencast.com
Streamsolutions Content Delivery Networks Flipping Book - page flip flash component.
Learn how to advertise on kirupa.com

cdn
content delivery network (cdn)