flash actionscript: Is there a way to control the timing and/or blending of the color changes in
this code?

import flash.geom.ColorTransform;
import flash.geom.Transform;

var colorTrans:ColorTransform = new ColorTransform();
var trans:Transform = new Transform(pages_main_mc);
trans.colorTransform = colorTrans;

page1_btn.onRelease = function() {
colorTrans.rgb = 0x000000;
trans.colorTransform = colorTrans;
};
page2_btn.onRelease = function() {
colorTrans.rgb = 0xFFFFFF;
trans.colorTransform = colorTrans;
};

Say like a 5 sec period from the time I click the pages2_btn before the color
changes to white? In other words the color is black, 3 seconds after clicking
the pages2_btn the color is 50% grey and at 5 sec the color is white? Some sort
of a timer code for the color change?

the code below the dotted line adds a new method to movieclips, colorFadeF().

to use:



page1_btn.onRelease = function() {
pages_main_mc.colorFadeF(colorTrans.rgb,100,0x000000,100,5,50);
};
page2_btn.onRelease = function() {
pages_main_mc.colorFadeF(colorTrans.rgb,100,0xffffff,100,5,50);
};


-------------------------------------------------------
MovieClip.prototype.colorFadeF = function(rgb1, a1, rgb2, a2, speed, steps) {
if (!var314159) {
var314159 = 1;
trA = ["ra", "rb", "ga", "gb", "ba", "bb", "aa", "ab"];
}
function fadeF(mc) {
if (!mc.repeatPass) {
mc.repeatPass = 1;
}
co = mc.mcCO;
tf2 = mc.tf2;
tf1 = mc.tf1;
steps = mc.steps;
intermediateTF = mc.intermediateTF;
for (var ivar = 0; ivar<trA.length; ivar++) {
num =
Math.floor(mc.repeatPass*(tf2[trA[ivar]]-tf1[trA[ivar]])/steps)+tf1[trA[ivar]];
intermediateTF[trA[ivar]] = num.toString();
}
co.setTransform(intermediateTF);
mc.repeatPass++;
if (mc.repeatPass>steps) {
clearInterval(mc.int);
}
updateAfterEvent();
}
this.mcCO = new Color(this);
this.mcCO.setRGB(rgb2);
this._alpha = a2;
this.tf2 = this.mcCO.getTransform();
this.mcCO.setRGB(rgb1);
this._alpha = a1;
this.tf1 = this.mcCO.getTransform();
this.steps = steps;
this.speed = speed;
this.intermediateTF = new Array();
clearInterval(this.int);
this.repeatPass=0;
this.int = setInterval(fadeF, 1000*this.speed/this.steps, this);
};

I'm getting this

**Error** Scene=Scene 1, layer=Action, frame=1:Line 10: Left side of
assignment operator must be variable or property.
MovieClip.prototype.colorFadeF = function(rgb1, a1, rgb2, a2, speed,
steps) {

Total ActionScript Errors: 1 Reported Errors: 1

I what var or prop am I missing?

import flash.geom.ColorTransform;
import flash.geom.Transform;

var colorTrans:ColorTransform = new ColorTransform();
var trans:Transform = new Transform(pages_main_mc);
trans.colorTransform = colorTrans;

page1_btn.onRelease = function() {
pages_main_mc.colorFadeF(colorTrans.rgb,100,0x000000,100,5,50);
};
page2_btn.onRelease = function() {
pages_main_mc.colorFadeF(colorTrans.rgb,100,0xffffff,100,5,50);
};


-------------------------------------------------------
MovieClip.prototype.colorFadeF = function(rgb1, a1, rgb2, a2, speed, steps) {
if (!var314159) {
var314159 = 1;
trA = ["ra", "rb", "ga", "gb", "ba", "bb", "aa", "ab"];
}
function fadeF(mc) {
if (!mc.repeatPass) {
mc.repeatPass = 1;
}
co = mc.mcCO;
tf2 = mc.tf2;
tf1 = mc.tf1;
steps = mc.steps;
intermediateTF = mc.intermediateTF;
for (var ivar = 0; ivar<trA.length; ivar++) {
num =
Math.floor(mc.repeatPass*(tf2[trA[ivar]]-tf1[trA[ivar]])/steps)+tf1[trA[ivar]];
intermediateTF[trA[ivar]] = num.toString();
}
co.setTransform(intermediateTF);
mc.repeatPass++;
if (mc.repeatPass>steps) {
clearInterval(mc.int);
}
updateAfterEvent();
}
this.mcCO = new Color(this);
this.mcCO.setRGB(rgb2);
this._alpha = a2;
this.tf2 = this.mcCO.getTransform();
this.mcCO.setRGB(rgb1);
this._alpha = a1;
this.tf1 = this.mcCO.getTransform();
this.steps = steps;
this.speed = speed;
this.intermediateTF = new Array();
clearInterval(this.int);
this.repeatPass=0;
this.int = setInterval(fadeF, 1000*this.speed/this.steps, this);
};

Oops

SUPER!!! You rock Kglad! I'm going to look through your code and see what makes
things tick. I found the timing for the buttons. One other question and I may
find it while looking at the code closer: Anyway for the buttons to have a
memory of what the last buttons color was? Say I make page1 button 0000ff and
page two ff0000 color is black to start I click page2 and the color goes from
black to ff0000 I then hit page 1 and insted of the color going back to black
the page one button knows that the current color is ff0000 and fades from that
to 0000ff.
Once again thank you

you can use:



c=new Color(pages_main_mc);
col=c.getRGB(); // <- col is current color of pages_main_mc

to obtain the current color (except when your swf first starts, unless you
assign pages_main_mc a color at the start using actionscript).

Ok, so I need to attatch that code and I am guessing add the "col" somewhere
in the button code? Sorry, still grasping Flash and I have tried a few ways
with no success. I seems I need for the button to know that col (or the current
color of pages_main_mc) before it can make a fade to the new color. Humm, or
would that mean the "col" needs to be in the fade function. I.E. function
starts finds out what the current color is and then proceeds to fade to new
color. That would make more sence. Well to me it would LOL but I wouldn't be
here asking if I knew would I!

in your button handlers:



page1_btn.onRelease = function() {
if(!pages_main_mc.c){
pages_main_mc.c=new Color(pages_main_mc);
}
col=pages_main_mc.c.getRGB();
pages_main_mc.colorFadeF(col,100,0x000000,100,5,50);
};

page2_btn.onRelease = function() {
if(!pages_main_mc.c){
pages_main_mc.c=new Color(pages_main_mc);
}
col=pages_main_mc.c.getRGB();
pages_main_mc.colorFadeF(col,100,0xffffff,100,5,50);
};

Wow, once again I wanted to thank you for helping me with this. My main pages
look and dance around with color! Now after thinking a bit more I've got
another idea. Leave it to me! Anyway, I am using an XML gallery on my site and
figured why not try and incorporate this with the gallery. So, is it possible
to use the import flash.geom.ColorTransform; code with XML to have the XML call
the background change function? I have tried a few ways I.E. having the XML
call a SWF with code in it telling the parent to change the background and that
seems to work somewhat(but not exactly). So then I started thinking what if i
make a new node in the XML called <bgcolor> and used this code I used to tweak
my gallery:


function loadXML(loaded) {

if (loaded) {

xmlNode = this.firstChild;
image = [];
description = [];
thumbnails = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {

image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
thumbnails[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
thumbnails_fn(i);

}
firstImage();

} else {

content = "file not loaded!";

}

}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {

if (Key.getCode() == Key.LEFT) {

prevImage();

} else if (Key.getCode() == Key.RIGHT) {

nextImage();

}

};
Key.addListener(listen);
previous_btn.onRelease = function() {

prevImage();

};
next_btn.onRelease = function() {

nextImage();

};
/////////////////////////////////////
p = 0;
this.onEnterFrame = function() {

filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {

preloader.preload_bar._alpha = 100*loaded/filesize;

} else {

preloader._visible = false;
if (picture._alpha<100) {

picture._alpha += 10;

}

}

};
function nextImage() {

if (p<(total-1)) {

p++;
if (loaded == filesize) {

picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();

}

}

}
function prevImage() {

if (p>0) {

p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();

}

}
function firstImage() {

if (loaded == filesize) {

picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
picture_num();

}

}
function picture_num() {

current_pos = p+1;
pos_txt.text = current_pos+" / "+total;

}
function thumbNailScroller() {

// thumbnail code!
this.createEmptyMovieClip("tscroller", 1000);
scroll_speed = 10;
tscroller.onEnterFrame = function() {

if ((_root._ymouse>=thumbnail_mc._y) &&
(_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {

if ((_root._xmouse>=(hit_right._x-30)) && (thumbnail_mc.hitTest(hit_right))) {

thumbnail_mc._x -= scroll_speed;

} else if ((_root._xmouse<=110) && (thumbnail_mc.hitTest(hit_left))) {

thumbnail_mc._x += scroll_speed;

}

} else {

delete tscroller.onEnterFrame;

}

};

}

function thumbnails_fn(k) {

thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
tlistener = new Object();
tlistener.onLoadInit = function(target_mc) {

target_mc._x = hit_left._x+(eval("thumbnail_mc.t"+k)._width+5)*k;
target_mc.pictureValue = k;
target_mc.onRelease = function() {

p = this.pictureValue-1;
nextImage();

};
target_mc.onRollOver = function() {

this._alpha = 50;
thumbNailScroller();

};
target_mc.onRollOut = function() {

this._alpha = 100;

};

};
image_mcl = new MovieClipLoader();
image_mcl.addListener(tlistener);
image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);

}

And tweaked that to add:

bgcolor = [];

bgcolor[i] = xmlNode.childNodes[i].childNodes[3].firstChild.nodeValue;

I believe that has Flash recognize the new node bgcolor.

Then add the code you helped me with setting up the background change function
minus the page buttons but adding code that tells Flash if it goes to the XML
and loads say image 13 it would see this:

<pic>
<image>img/bri/bri_13.jpg</image>
<caption>Image #13</caption>
<thumbnail>img/bri/bri_sm_13.jpg</thumbnail>
<bgcolor>0x0000ff</bgcolor>
</pic>

That would tell Flash to load the decription, thumbnail of image 13, and if
this thumbnail is released load the actual image 13 and change the color of the
background to 0000ff using the cool fade function.

Am I in way over my head this time?