ActionScript using rollover to fill a bar

[nsb2040]

hi,

I am using Flash CS4 and actionscript 2.0.

does anyone know what you would do to make it so that when you mouse over a rectangle, as you move the cursor to the right the bar "fills up" (changes color) as you move it?


thanks!

[Nightwalker83]

I'm not exactly sure what you mean by "bar", do you mean change the colour of the rectangle?

Secondly, why are you using actionscript 2.0 in CS4?

Edit:

Try this:

this.createEmptyMovieClip("rectangle", 1);
rectangle._x = 100;
rectangle._y = 100;
with (rectangle) {
    lineStyle(1, 0xCCCCCC);
    beginFill(0xEEEEEE);
	    moveTo(0, 0);
    lineTo(80, 0);
    lineTo(80, 60);
    lineTo(0, 60);
    lineTo(0, 0);
    endFill();
		    
};
rectangle.onRollOver = function() {
with (rectangle) {
	beginFill(0x006600);
		    moveTo(0, 0);
    lineTo(80, 0);
    lineTo(80, 60);
    lineTo(0, 60);
    lineTo(0, 0);
    endFill();
};
};

The above code changes the colour of the rectangle when the mouse moves over it.

[nsb2040]

by bar I just mean the rectangle object that I am moving the mouse over.

so yeah, I would like so when I move the cursor over the rectangle to the right, it will look like it's "filling up" by changing color (just in the area you have moved over so far) as you move the mouse further to the right.

does the code just go in the actions layer? thanks for posting it i will try it out later on when I get back onto my mac

[Nightwalker83]

does the code just go in the actions layer?

Yes, just place the code in the actions layer, save the project then press "Ctrl" + "Enter"

[nsb2040]

well, using that code it fills the whole rectangle with a different color on rollover, but what I had in mind was something like when you move the mouse over the beginning (left side) of the rectangle, the area that changes color is only the part where you have the mouse. Then as you move the mouse over to the right, the color gradually changes and the part to the left of the mouse is the new color and the part to the right of the mouse is still the old color....kind of like a loading bar but you are controlling it with the mouse.

if you know how this can be done, that'd be sweet - but either way thanks for your help!

[Nightwalker83]

I doubt that is possible because there is no way to tell which part of the rectangle the mouse is over!

[nsb2040]

Okay, gotcha.

could you tell me the syntax for changing the color of the rectangle when you roll over it, and then reverting back to the original color when you roll off?

I know it's just the onRollOver and onRollOff events, but what's the syntax for changing the color?

[Nightwalker83]

To change the colour the first time use the code in post #2. To change the colour on mouse out add:

rectangle.onRollOut = function() {
with (rectangle) {
	beginFill(0xEEEEEE);
		    moveTo(0, 0);
    lineTo(80, 0);
    lineTo(80, 60);
    lineTo(0, 60);
    lineTo(0, 0);
    endFill();
};
};

Edit:

beginFill tells Flash start the colour fill! EndFill tells Flash to stop the colour fill process.

[nsb2040]

cool, that works.

the only issue is, it generates a rectangle that it uses and i already have a rectangle on the stage of a certain size that i want to use. can i make it so it just references the rectangle i already have on the stage?

[Nightwalker83]

cool, that works.

the only issue is, it generates a rectangle that it uses and i already have a rectangle on the stage of a certain size that i want to use. can i make it so it just references the rectangle i already have on the stage?

I have already tried it and it doesn't work because the normal shape creation doesn't use the "instance name" tag. The instance name refers to an object.

If you want to change the height or width of the rectangle created by te above code change the numbers in the brackets, example:

   lineTo(800, 0);
    lineTo(800, 600);
    lineTo(0, 600);
    lineTo(0, 0);

Edit:

Please append the original post thread title to include "Resolved" if you quest have been answered.