Prototype ¬ Detail

PROTOTYPE I'm Not Only The Prototype, I'm Also A Member.

home ▪ stats ▪ search ▪ linkback ▪ about ▪ FAQ | user: guest, login, register

author: senocular [+], Submitted: 12.02.02 11p • Last Edit: 04.08.03 1p
Avg. Rating: 4

// blendRGB uses this Number prototype
// converts a (hex) number to r,g, and b.
Number.prototype.HEXtoRGB = function(){
	return {rb:this >> 16, gb:(this >> 8) & 0xff, bb:this & 0xff};
}
Color.prototype.blendRGB = function(c1,c2,t){
	if (arguments.length == 2){
		t = c2;
		c2 = this.getRGB();
	}
	if (t<-1) t=-1;
	else if (t>1) t=1;
	if (t<0) t=1+t;
	c1 = c1.HEXtoRGB();
	c2 = c2.HEXtoRGB();
	var ct = (c1.rb+(c2.rb-c1.rb)*t) << 16 | (c1.gb+(c2.gb-c1.gb)*t) << 8 | (c1.bb+(c2.bb-c1.bb)*t);
	this.setRGB(ct);
	return ct;
}
 
/******************** EXAMPLE ********************/
 
// from blue to red over 100 frames with a mouse down
onClipEvent(load){
	// make a new color object (col) for this clip
	col = new Color(this);
	// set doBlend variable to 0
	doBlend = 0;
}

onClipEvent(enterFrame){
	// if doBlend is true or non 0
	if (doBlend) {
		// call the colors new blendRGB method.  Make the color a
		// range between red and blue based on doBlend
		col.blendRGB(0xFF0000, 0x0000FF, doBlend);

		// decrement doBlend everyframe, thereby going from 1
		// to 0 and shifting the colors accordingly. Once doBlend
		// is 0, the shifting will stop (from the if statement)
		doBlend -= .01; // for 100 frames: 1/100 = .01

		// check to make sure doBlend stops after reaching 0 
		//(just in case it goes past zero from the decrement)
		if (doBlend < 0) doBlend = 0;
	}
}

onClipEvent(mouseDown){
	// when the mouse is pressed, set doBlend to 1
	doBlend = 1;
}

usage

[big]Color [b]BLENDRGB[/b]: takes two hex colors and sets the color
of the color object to a blend of those two colors
based on the 3rd argument t[/big]
 
[b]Arguments:[/b]
- [i]c1, c2[/i]: (Color 1 and Color 2 (optional)) Hex values of the colors to blend. If only one
color and t is passed, the color is blended with the current color of the color object.
- [i]t[/i]: a value between -1 and 1 which blends the passed colors together.  The range is
actually 0 to 1 [i]or[/i] 0 to -1.  Using negative numbers just reverses the blend from
color 1 to color 2 to color 2 to color 1.  However, in any case, a 't' of 0 is color 1.
 
[b]Returns:[/b]
- the new HEX value of the color blend
 
[b]Example:[/b]
red = 0xFF0000;
blue = 0x0000FF;
colorObj.blendRGB(red, blue, t);
...
Going from a t of 0 to 1 will go from red to blue.
Going from 0 to -1 will go from blue to red (though 0 itself is still red)

msg1 { senocular [+], posted: 08.12.03 4a•-, top [^] }

I saw recently a post on a forum that said layer51 had no proto for blending colors :-\ well thats what I made this for. Heres another example - this will blend between a list of colors in an array:

onClipEvent(load){
        colors = [0x000000, 0xff0000, 0x00ff00, 0x0000ff];
        myColor = new Color(this);
}
onClipEvent(enterFrame){
        if ((t += .05) > 1){
                t -= 1;
                colors.push(colors.shift());
        }
        myColor.blendRGB(colors[0], colors[1], t);
}

msg2 { senocular [+], posted: 10.19.03 8a•03.15.04 6a, top [^] }

to enforce the above statement :-\ Heres an example (in MX)

[ Download ]

msg3 { Bl4deRunner [+], posted: 06.22.07 5a•-, top [^] }

It work's nicely.
But something I'm wondering, slightly off-topic is this:
As in the above example,

myColor = new Color(this);

this works.
But, me being used to AS2 & using data typing, when I do:

var myColor:Color = new Color(this);

this DOESN'T WORK!

I'm' sure I'm missing some fundamental clue here, I hope someone can enlighten me.

msg4 { senocular [+], posted: 06.22.07 7a•-, top [^] }

Bl4deRunne: You're probably running into a confusion between variable scope. By using var in a function, you are making a variable that exists only for that function call - a variable local to that function. That is not something you would want to do in this case since that color object needs to be accessible everywhere (or at least within the methods relating to the color transition). For that you would need to define the property without var, or using this.property or by defining it with var in the frame outside of a function (then it becomes defined within that timeline and therefore accessible to each function within that timeline).

msg5 { drawingboard10 [+], posted: 12.07.07 3p•-, top [^] }

Hello everyone
I am new to actionscript and this forum, but hello to all. I was wondering if there is a way to find out what the on and off set percentages are to the gb , ba , bb , aa , ab color I would like to change my object into. I only see the rgb but no on and off set percentages.