wanna change the color of movieclip on roll over with transition

[rajesh_kumar78]

wanna change the color of movieclip on roll over with transition

will any body help?


u can see the file attached here. i want to change the movieclip color on rollover with transition by using only actionscript. no tweening plzzz.

[pixelwit]

Hope you have FlashMX. If not, you're going to need to adapt this code to make things work://
//
var frames = 24;
var defaultHex = 0x0066CC;
//
// FIGLEAF SOFTWARE RGB to Hex
function rgbToHex (r,g,b){
return(r<<16 | g<<8 | b);
}
// PiXELWiT REVERSE ENGINEERING
function hex2rgb (hex){
var red = hex>>16;
var grnBlu = hex-(red<<16)
var grn = grnBlu>>8;
var blu = grnBlu-(grn<<8);
return({r:red, g:grn, b:blu});
}
// Color Object
var myCO = new Color(rectangle);
myCO.setRGB(defaultHex);
// Fading Function
function fadeToHex(goalHex, steps){
var nowHex = myCO.getRGB();
var nowRGB = hex2rgb(nowHex);
var goalRGB = hex2rgb(goalHex);
var stepRGB = {};
stepRGB.r = (goalRGB.r-nowRGB.r)/steps;
stepRGB.g = (goalRGB.g-nowRGB.g)/steps;
stepRGB.b = (goalRGB.b-nowRGB.b)/steps;
var inc = 0
onEnterFrame = function(){
if(inc<steps){
var newR = (Math.round(nowRGB.r+=stepRGB.r));
var newG = (Math.round(nowRGB.g+=stepRGB.g));
var newB = (Math.round(nowRGB.b+=stepRGB.b));
var newHex = rgbToHex(newR, newG, newB);
myCO.setRGB(newHex);
inc++;
}else{
myCO.setRGB(goalHex);
onEnterFrame = null;
}
}
}
//
// Button Function Assignments
Blue.onRollOver = function(){
fadeToHex(0x0066CC, frames);
}
Pink.onRollOver = function(){
fadeToHex(0xFF33CC, frames);
}
Red.onRollOver = function(){
fadeToHex(0xFF0000, frames);
}
Gray.onRollOver = function(){
fadeToHex(0x999999, frames);
}
Green.onRollOver = function(){
fadeToHex(0x33CC00, frames);
}
Black.onRollOver = function(){
fadeToHex(0, frames);
}
Yellow.onRollOver = function(){
fadeToHex(0xFFCC00, frames);
}
//
Blue.onRollOut =
Pink.onRollOut =
Red.onRollOut =
Gray.onRollOut =
Green.onRollOut =
Black.onRollOut =
Yellow.onRollOut = function(){
fadeToHex(defaultHex, frames);
}File attached.

Hope it helps,

-PiXELWiT
http://www.pixelwit.com

[rajesh_kumar78]

thank u very much.

[pixelwit]

Kept tweaking the code. Now it's a handy Color prototype and fades color over a set time period rather than a set number of frames. Also uses setInterval rather than onEnterFrame so it will work no matter how high or low your frame rate.

Here's the code:// Some Variables
var fadeTime = 1000// in milliseconds;
var defaultHex = 0x0066CC;
// FIGLEAF SOFTWARE RGB to Hex
Math.rgbToHex = function(r,g,b){
return(r<<16 | g<<8 | b);
}
// PiXELWiT REVERSE ENGINEERING
Math.hex2rgb = function(hex){
var red = hex>>16;
var grnBlu = hex-(red<<16)
var grn = grnBlu>>8;
var blu = grnBlu-(grn<<8);
return({r:red, g:grn, b:blu});
}
// PiXELWiT Color Object Prototypes
// http://www.pixelwit.com
Color.prototype.fadeToHex = function(goalHex, milSecs){
clearInterval(this.v.intrvl);
this.v = {};// An object to store "V"ariables
this.v.milSecs = milSecs;
this.v.startTime = getTimer();
this.v.startHex = this.getRGB();
this.v.startRGB = Math.hex2rgb(this.v.startHex);
this.v.goalHex = goalHex;
var goalRGB = Math.hex2rgb(goalHex);
this.v.change = {};
this.v.change.r = goalRGB.r-this.v.startRGB.r;
this.v.change.g = goalRGB.g-this.v.startRGB.g;
this.v.change.b = goalRGB.b-this.v.startRGB.b;
this.v.intrvl = setInterval(this, "colorShift", 1);
}
Color.prototype.colorShift = function(){
var ratio = (getTimer()-this.v.startTime)/this.v.milSecs;
if(ratio<1){
var r = this.v.startRGB.r+ratio*this.v.change.r;
var g = this.v.startRGB.g+ratio*this.v.change.g;
var b = this.v.startRGB.b+ratio*this.v.change.b;
this.setRGB(Math.rgbToHex(r, g, b));
}else{
this.setRGB(this.v.goalHex);
clearInterval(this.v.intrvl);
delete(this.v);
}
}
// Make Color Object
var myCO = new Color(rectangle);
myCO.setRGB(defaultHex);
// Button Function Assignments
Blue.onRollOver = function(){
myCO.fadeToHex(0x0066CC, fadeTime);
}Hope you find it handy,

-PiXELWiT
http://www.pixelwit.com

[CyanBlue]

WoW... You gotta be kidding me...

You are really making me depressed, huh??? :D

Great job... ;)

[pixelwit]

Originally posted by CyanBlue
WoW... You gotta be kidding me...

You are really making me depressed, huh??? :D

Great job... ;) Didn't mean to depress you but, thanks and you're welcome. ;)

-PiXELWiT
http://www.pixelwit.com

[rajesh_kumar78]

thank u very much.



rajesh kumar

[goku]

You tha man pixelwit!!


sorry to trouble you - any chance of saving your file in flash 5


cheers:D

[pixelwit]

It wouldn't be very easy Goku since the code makes use of either dynamically created enterFrame events or setInterval to do the actual color fading.

You could probably adapt some of the concepts to work in F5 but I don't think it could still be used as a prototype.

-PiXELWiT
http://www.pixelwit.com

[Wes]

Hi Pixelwit,

If I paste your code in a new movie it works. But if it is pasted in an existing one, I get the following error:

**Error** Scene=Scene 1, layer=script, frame=3:Line 3: There is no property with the name 'rgbToHex'.
Math.rgbToHex = function(r, g, b) {

**Error** Scene=Scene 1, layer=script, frame=3:Line 7: There is no property with the name 'hexToRGB'.
Math.hexToRGB = function(hex) {

**Error** Scene=Scene 1, layer=script, frame=3:Line 86: There is no method with the name 'hexToRGB'.
var goalRGB = Math.hexToRGB(goalHex);

How can I solve this? I am using Flash MX 2004. Thanx.

[pixelwit]

How's this for a prompt reply... ;)

The code I provided requires you to set your publish settings to AS1. If you want to use it in an AS2 project you'll need to search for all occurrences of "Math." (making sure to include the period) and delete them from the sample code.

If you'd like to see a more finalized version of the Color Fading code with a very detailed explanation you can read my Color Fade tutorial (http://www.actionscript.org/resources/articles/162/1/Color-fade/Page1.html) on this site.

-PiXELWiT
http://www.pixelwit.com