PDA

View Full Version : Fade to White Picture Gallery effect


smegedd
10-10-2005, 11:07 AM
Hi, Hope some one can help with this and I think its worth while. I have just discovered the built in templates in Photoshop CS2 for an Online Web Gallery. If you have it you will know there are two flash templates and a third available to download. This question is regarding the 'Fade to white' effect these galleries user when changing from one picture to another. I think the effect is subtle but beautiful and I want to recreate this effect for other uses. I just want to have a picture and use this fade to white effect. It actually looks more like you are turning the exposure up gradually to complete white.
I have downloaded the source files and it seems this effect is achieved through a single action script file that is included in the first frame of the flash file.
I do not understand the script but wonder if anyone can figure out how to apply this effect in a simple 1 picture movie?
The script is:

// This handles the image dissolve to white effect

// usage
// image_mc.colorFade(100, 0, 100, 0, 100, 0, 100, 0, this, 'done');

MovieClip.prototype.colorFade = function(r1, r2, g1, g2, b1, b2, a1, a2, obj, callback) {
var c = new Color(this);
var tV = [r1, r2, g1, g2, b1, b2, a1, a2];
var speed = 1.5;
var margin = 10;
this.onEnterFrame = function() {
cV = [c.getTransform().ra, c.getTransform().rb, c.getTransform().ga, c.getTransform().gb, c.getTransform().ba, c.getTransform().bb, c.getTransform().aa, c.getTransform().ab];
change = {ra:tV[0]-(tv[0]-cV[0])/speed, rb:tV[1]-(tv[1]-cV[1])/speed, ga:tV[2]-(tv[2]-cV[2])/speed, gb:tV[3]-(tv[3]-cV[3])/speed, ba:tV[4]-(tv[4]-cV[4])/speed, bb:tV[5]-(tv[5]-cV[5])/speed, aa:tV[6]-(tv[6]-cV[6])/speed, ab:tV[7]-(tv[7]-cV[7])/speed};
c.setTransform(change);
if (cV[0]>tV[0]-margin && cV[0]<tV[0]+margin && cV[1]>tV[1]-margin && cV[1]<tV[1]+margin && cV[2]>tV[2]-margin && cV[2]<tV[2]+margin && cV[3]>tV[3]-margin && cV[3]<tV[3]+margin && cV[4]>tV[4]-margin && cV[4]<tV[4]+margin && cV[5]>tV[5]-margin && cV[5]<tV[5]+margin) {
obj[callback]();
delete (this.onEnterFrame);
}
};
};

The effect can also be demonstrated at http://www.thisisventure.co.uk/gallery/default.asp


Hope some clever bod out there can help

blue_halo
10-10-2005, 07:35 PM
I can't sit and try to figure it out at the moment (and you probably wouldn't want me to either, I'm no AS master) but I found a source file by Senocular a while back dealing with this, infact he has it available on his site for download. If you look around in there I'm sure you could figure something out. Sorry I can't be of much more help, but this should atleast point you in the right direction.

http://www.senocular.com/flash/source.php?id=0.141

smegedd
10-11-2005, 09:46 AM
Halo this is exactly what I have been looking for Cheerz Bud!. :D

Would still love to understand how the Photoshop template works.

Thanks again M8

nmaxfield
10-28-2005, 03:13 AM
I was looking for the exact same thing. Thanks so much.

KRESAT
01-09-2007, 09:22 PM
Where and how can i change the fade color at this script?
Help me please

// This handles the image dissolve to white effect

// usage
// image_mc.colorFade(100, 0, 100, 0, 100, 0, 100, 0, this, 'done');

MovieClip.prototype.colorFade = function(r1, r2, g1, g2, b1, b2, a1, a2, obj, callback) {
var c = new Color(this);
var tV = [r1, r2, g1, g2, b1, b2, a1, a2];
var speed = 1.5;
var margin = 10;
this.onEnterFrame = function() {
cV = [c.getTransform().ra, c.getTransform().rb, c.getTransform().ga, c.getTransform().gb, c.getTransform().ba, c.getTransform().bb, c.getTransform().aa, c.getTransform().ab];
change = {ra:tV[0]-(tv[0]-cV[0])/speed, rb:tV[1]-(tv[1]-cV[1])/speed, ga:tV[2]-(tv[2]-cV[2])/speed, gb:tV[3]-(tv[3]-cV[3])/speed, ba:tV[4]-(tv[4]-cV[4])/speed, bb:tV[5]-(tv[5]-cV[5])/speed, aa:tV[6]-(tv[6]-cV[6])/speed, ab:tV[7]-(tv[7]-cV[7])/speed};
c.setTransform(change);
if (cV[0]>tV[0]-margin && cV[0]<tV[0]+margin && cV[1]>tV[1]-margin && cV[1]<tV[1]+margin && cV[2]>tV[2]-margin && cV[2]<tV[2]+margin && cV[3]>tV[3]-margin && cV[3]<tV[3]+margin && cV[4]>tV[4]-margin && cV[4]<tV[4]+margin && cV[5]>tV[5]-margin && cV[5]<tV[5]+margin) {
obj[callback]();
delete (this.onEnterFrame);
}
};
};

Is the same above, but i dont know how to change colors.
Thanks
________
Sorry my mistakes, i'm not english

gd1008
02-21-2007, 07:30 PM
I am also trying to find out how to change color from white to black in this script.

Can someone help please!!!!!

gd1008
02-21-2007, 09:12 PM
It seems like "display.class.as" not the "colorFadePrototypes.as" has to be modified.
I was trying to modify Display.prototype.fadein function and Display.prototype.fadeout in "display.class.as" file and was able to control how long fadein-fadeout lasts, but couldn't change from white to black. I assumed that I should change from 255 to 0, but it didn't help.

Asking for help again.

gd1008
02-22-2007, 02:54 PM
I finally was able to change fadeout color by modifying Display.prototype.fadeout function in display.class.as file.
I changed following line in this function:
this.image_mc.hold.colorFade(0, 100, 0, 100, 0, 100, 100, 0, this, 'scaleParts');

Unfortunately I still couldn't use newly generated gallery.swf since page titles disappeared after that.

Dirk2512
07-31-2009, 10:35 AM
Hi can some one tell me what i need to make my flash gallery to open the the web page tinted out and the galleryin the foreground, for a better explanaition look at www.game.co.uk (http://www.game.co.uk/Xbox360/Action/~r336246/Velvet-Assassin/) and click open gallery.

Thanks In advance