AS: Dynamically changing colors

[Rantzien]

AS: Main

Dynamically changing colors

Here is an example of the use for this. Just a simple effect achieved by using the Color class. I won't explain the code, unless you ask for it of course.

First, draw a circle or something that you want to change colors on. Remember that the code we will write will change the color of the whole Movie Clip, so if you are going to do shades and lines like in the example, do it separately later on.

Turn what you drew into a Movie Clip (F8 > Movie Clip > OK). Go to the Properties panel (Ctrl+F3), and in the box where it says "<Instance Name>", enter "myShape" (without the quotes).

Now, we will make a new color object. Add this to the frame's actionscript:
var myColor:Color = new Color(_root.myShape);

Then, draw a button. Make it a button (F8 > Button > OK), and add this to it's actionscript:
on (release) {
balloon_color.setRGB(0xFF0000);
}

Now, if you test the movie and click the button, the shape you drew should turn red (if, of course, it wasn't red already).

Related AS threads:
AS: Variables
AS: OOP (Object Oriented Programming) by Inglor
AS: Photo Negative by Glaiel_Gamer

[Denvish]

At 8/25/05 05:08 PM, Rantzien wrote: Dynamically changing colors

Yeah, I use this often, it's definitely a very useful thing to know.
Normally, I just use this on the MC itself when I want to switch colours:

new Color(this).setRGB(0xFF0000);

Your way is clearer to understand though.

[Rantzien]

Thank you Denvish! It's great to get comments and criticism, both good and bad.

[Mogly]

is there a way of using this for everytime an animation loops that it will change its colour?

[noob-toast]

I guess it'd be something like setting up an array of colors, and at the end of the animation you'd take a random number from the array and set the mc's color to it.

[Rantzien]

At 8/26/05 10:06 AM, Mogly wrote: is there a way of using this for everytime an animation loops that it will change its colour?

Yes, you can do as the other guy said, like this:
On the first frame:

clrs = [ "0x000000", "0x333333", "0x666666", "0x999999", "0xCCCCCC", "0xFFFFFF" ];

On the first frame of the loop:

myColor.setRGB(_root.clrs[Math.ceil(Math.r
andom()*_root.clrs.length)]);

The problem (or not?) with this is that the avaliable colors is only the ones you specify in the array. I think there's a way to randomize colors, but I think that involves hexadecimals, which I'm not very familiar with.

[Denvish]

At 8/26/05 04:30 PM, Rantzien wrote: myColor.setRGB(_root.clrs[Math.ceil(Math.r

andom()*_root.clrs.length)]);

Why not just myColor.setRGB( _root.clrs[random(_root.clrs.length)]);?

[Rantzien]

At 8/26/05 04:33 PM, Denvish wrote:

At 8/26/05 04:30 PM, Rantzien wrote: myColor.setRGB(_root.clrs[Math.ceil(Math.r

andom()*_root.clrs.length)]);

Why not just myColor.setRGB( _root.clrs[random(_root.clrs.length)]);?

Because my way is more up-to-date =P
I know that they do the same thing in this particular case, but it's just a matter of principle.

[Denvish]

random() should never have been depreciated IMO. It performs a seperate and perfectly valid alternative to Math.random() (ie, returning an integer). A large number of coders (including myself) still use it for that very reason.

[Rantzien]

At 8/26/05 05:03 PM, Denvish wrote: random() should never have been depreciated IMO. It performs a seperate and perfectly valid alternative to Math.random() (ie, returning an integer). A large number of coders (including myself) still use it for that very reason.

I know it's simpler and stuff, I guess the AS developers think something along the lines of: If two functions can do the same things, only the other one can do more, then deprecate the other one. I also guess that they prefer collecting many mathematical functions under one top-level class.

I'm not defending their case, I'm just reasoning.

[Starogre]

There seems to be a variable misinterpretation in the tutorial you just wrote above. I'm not understanding...

[Rantzien]

At 8/26/05 05:26 PM, Starogre wrote: There seems to be a variable misinterpretation in the tutorial you just wrote above. I'm not understanding...

Oh shit. I made a fatal error. It shouldn't say balloon_color there, it should say myColor! Goddamn it!

Thanks for notifying me anyway.

[Starogre]

Lol. I knew it, but it still doesn't work.

[Rantzien]

At 8/26/05 05:33 PM, Starogre wrote: Lol. I knew it, but it still doesn't work.

I need some kind of clue to have even the slightest idea of what the problem may be.

[Starogre]

Frame 1:
var myColor:Color = new Color(_root.myShape);

Red Circle Button:
on (release) {
_root.myColor.setRGB(0xFF0000);
}

Blue Gradient MC:
Instance name: myShape

The button isn't changing the blue circle's/balloons color.

[BlackmarketKraig]

I'm also having problems getting it to work...

[Rantzien]

At 8/26/05 05:39 PM, Starogre wrote: The button isn't changing the blue circle's/balloons color.

I copied and pasted all that info into mine, and it worked just fine. What version of Flash do you use? This function was implemented in Flash Player 5.

[Starogre]

LOL MX here, well, i'm mad now >.> oh well...

[Rantzien]

At 8/26/05 05:48 PM, Starogre wrote: LOL MX here, well, i'm mad now >.> oh well...

Anyone knowing what the problem may be? I don't fancy having an AS thread that doesn't work for some.

[Rantzien]

Alright, the built-in Flash help tells you to do this. If this fails, you're probably doing something wrong.

1. Select a movie clip on the Stage.

2. In the Property inspector, enter carColor as the instance name.

3. Create a button named color chip, place four instances of the button on the Stage, and name them red, green, blue, and black.

4. Select Frame 1 in the main Timeline, and select Window > Development Panels > Actions.

5. To create a Color object that targets the carColor movie clip, add the following code to the Actions panel:
myColor = new Color(_root.carColor);

6. To make the blue button change the color of the carColor movie clip to blue, add the following code to the Actions panel:
_root.blue.onRelease = function(){
myColor.setRGB(0x0000ff)
}

The hexadecimal value 0x0000ff is blue. The following table displays the other colors you'll use and their hexadecimal values:

7. Repeat step 6 for the other buttons (red, green, and black) to change the color of the movie clip to the corresponding color. Your code should now look like this:
myColor = new Color(_root.carColor)
_root.blue.onRelease = function(){
myColor.setRGB(0x0000ff)
}
_root.red.onRelease = function(){
myColor.setRGB(0xff0000)
}
_root.green.onRelease = function(){
myColor.setRGB(0x00ff00)
}
_root.black.onRelease = function(){
myColor.setRGB(0x000000)
}

8. Select Control > Test Movie to change the color of the movie clip.

[BlackmarketKraig]

At 8/26/05 06:25 PM, Rantzien wrote: Alright, the built-in Flash help tells you to do this. If this fails, you're probably doing something wrong.

Blah blah blah 1. 2. 3. whatever...

Hey that one works...
Thanks! I guess I should have looked through the AS dictionary...

I wonder why the original one doesn't work for me...?

[Rantzien]

At 8/26/05 07:33 PM, BlackmarketKraig wrote: I wonder why the original one doesn't work for me...?

Yep, that's weird. They're almost the exact same, I can't find something that would make a difference.

[piefi]

ah i wondered why the last code wasn't working.I put the instance name as colour(the english spelling) instead of color

[GuyWithHisComp]

Yay look what I did :)
Just make a MC called myShape and place this in the frame AS:
var myColor:Color = new Color(_root.myShape);
onEnterFrame=function(){
myColor.setRGB(colour);
colour="0x"+random(999999);
}

[4as]

At 11/30/05 12:46 PM, GuyWithHisComp wrote: Yay look what I did :)
Just make a MC called myShape and place this in the frame AS:
var myColor:Color = new Color(_root.myShape);
onEnterFrame=function(){
myColor.setRGB(colour);
colour="0x"+random(999999);
}

Well, your changing number into a string, and then string into a number...
Just do that instead:
var myColor:Color = new Color(_root.myShape);
onEnterFrame = function():Void {
myColor.setRGB(Math.random()*0xffffff);
}

[phyconinja]

is there any way to use this to change the colour of the text in a dynamic textbox?

good tutorial by the way!!
=)

[Cema]

Very nice tutorial. I will deffinetly use this sometime in the future.

[mayoarm11]

how do i change the color not to a solid color, but to a gradient color (linear / radial)?

[Brycearoni]

At 8/26/05 08:13 AM, Denvish wrote:

At 8/25/05 05:08 PM, Rantzien wrote: Dynamically changing colors

Yeah, I use this often, it's definitely a very useful thing to know.
Normally, I just use this on the MC itself when I want to switch colours:

new Color(this).setRGB(0xFF0000);

Your way is clearer to understand though.

thanks Denvish! (I think your way is easier) Also it was a nice tutorial tho!