Skip to main content
lcdarnell
Participating Frequently
December 28, 2015
Answered

Using AS 2.0 How do i fade the color of a object from blue to red while using a button

  • December 28, 2015
  • 1 reply
  • 978 views

I want to create a template, in this template i want the user to be able to view certain object in whatever color they choose, in addition to them choosing a color i want the color to fade into the next color smoothly.

This topic has been closed for replies.
Correct answer kglad

don't attach code to objects and you can use colorF to color tween the first argument using the colors in the 2nd and 3rd arguments over the 4th arguments duration (in seconds):

import mx.transitions.Tween;

import mx.transitions.easing.*;

import flash.geom.ColorTransform;

var rTween:Tween;

var gTween:Tween;

var bTween:Tween;

var colorObj:Object = {};

var mc_color:MovieClip;

var ct:ColorTransform;

colorF(mc,0xff0000,0xaaffff,1);

function colorF(mc:MovieClip,startColor:Number,endColor:Number,duration:Number):Void{

    rTween = new Tween(colorObj,'red',None.easeNone,(startColor&0xff0000)>>16,(endColor&0xff0000)>>16,duration,true);

    gTween = new Tween(colorObj,'green',None.easeNone,(startColor&0x00ff00)>>8,(endColor&0x00ff00)>>8,duration,true);

    bTween = new Tween(colorObj,'blue',None.easeNone,startColor&0x0000ff,endColor&0x0000ff,duration,true);

    mc_color = mc;

    ct = mc.transform.colorTransform;

    rTween.onMotionChanged = colorChangeF;

}

function colorChangeF():Void{

    ct.rgb = Math.round(colorObj.red)<<16 | Math.round(colorObj.green)<<8 | Math.round(colorObj.blue);

    mc_color.transform.colorTransform = ct;

}

1 reply

lcdarnell
lcdarnellAuthor
Participating Frequently
December 28, 2015

here is the code im trying to use

on (release) {

  colorme.colorTo(0x00FF00,2.5);

}

kglad
Community Expert
kgladCommunity ExpertCorrect answer
Community Expert
December 28, 2015

don't attach code to objects and you can use colorF to color tween the first argument using the colors in the 2nd and 3rd arguments over the 4th arguments duration (in seconds):

import mx.transitions.Tween;

import mx.transitions.easing.*;

import flash.geom.ColorTransform;

var rTween:Tween;

var gTween:Tween;

var bTween:Tween;

var colorObj:Object = {};

var mc_color:MovieClip;

var ct:ColorTransform;

colorF(mc,0xff0000,0xaaffff,1);

function colorF(mc:MovieClip,startColor:Number,endColor:Number,duration:Number):Void{

    rTween = new Tween(colorObj,'red',None.easeNone,(startColor&0xff0000)>>16,(endColor&0xff0000)>>16,duration,true);

    gTween = new Tween(colorObj,'green',None.easeNone,(startColor&0x00ff00)>>8,(endColor&0x00ff00)>>8,duration,true);

    bTween = new Tween(colorObj,'blue',None.easeNone,startColor&0x0000ff,endColor&0x0000ff,duration,true);

    mc_color = mc;

    ct = mc.transform.colorTransform;

    rTween.onMotionChanged = colorChangeF;

}

function colorChangeF():Void{

    ct.rgb = Math.round(colorObj.red)<<16 | Math.round(colorObj.green)<<8 | Math.round(colorObj.blue);

    mc_color.transform.colorTransform = ct;

}

lcdarnell
lcdarnellAuthor
Participating Frequently
December 29, 2015

ok im still pretty new at this so i have my three test buttons set up and the area i want to be colored.. if i understand you correctly

import mx.transitions.Tween;

import mx.transitions.easing.*;

import flash.geom.ColorTransform;

var rTween:Tween;

var gTween:Tween;

var bTween:Tween;

var colorObj:Object = {};

var mc_color:MovieClip;

var ct:ColorTransform;

colorF(mc,0xff0000,0xaaffff,1);


this part all goes into by button area and the rest goes onto the stage area//// or does it go inside the object i want to be colored