make pic gray leaving background intact

[aneuryzma]

How can I make a picture gray using as3 leaving the white background intact ?

Is only possible to make the background transparent using photoshop ?

Thanks

[surf]

How can I make a picture gray using as3 leaving the white background intact ?

Is only possible to make the background transparent using photoshop ?

Thanks


i wish i could help, its just that i m not picturing what u tryin to do...
have u got a print screen??

[aneuryzma]

I've attached the files.

Probably what I want is to manipulate the saturation.

I want the first image slowly become the second one. (without having to duplicate the picture of course).

thanks

[asmitty911]

I've attached the files.

Probably what I want is to manipulate the saturation.

I want the first image slowly become the second one. (without having to duplicate the picture of course).

thanks

the best way to do it would be to use TweenLite. http://blog.greensock.com/tweenmaxas3/.
you can tween the saturation. If you go to that link and look at the plugin explorer about half way down you will say some examples. its called colorMatrixFilter.

[aneuryzma]

Hi thanks for reply.

I would prefer to use standards tweens.. would it be complicated ?

[asmitty911]

its pretty simple. you just import the new tweens in the beginning. tweenlite is much better for processing then the standard tweens. and you have a lot more options with them. very easy to use.

[greensock]

I would prefer to use standards tweens.. would it be complicated ?

Yep. Not only is the Tween class slower, it's MUCH more complicated. What TweenLite/Max can do in one line of code, Tween needs around 70-80. Here's how they compare:

TweenMax code:

import gs.*;
TweenMax.to(mc, 3, {colorMatrixFilter:{saturation:0}});

Tween code:

import fl.transitions.Tween;
import flash.filters.ColorMatrixFilter;
import fl.transitions.easing.Regular;
import fl.transitions.TweenEvent;

var myObject:DisplayObject = image_mc; //the object whose saturation you want to tween
var matrix:Array;
var changeValues:Array; //stores information about the amount of change for each element in the matrix
var tween:Tween;
var filterIndex:uint; //position of the filter in myObject's filters Array
var tweenInfo:Object = {progress:0}; //just for tracking the progress of the tween. We'll need to tween many elements of the Array, but to maximize performance and to make sure all of the elements are updated before applying the changes on each frame, we'll only use one Tween instance to drive everything.

function tweenSaturation($amount:Number, $duration:Number):void {
var fltrs:Array = myObject.filters;
var i:uint;
matrix = null;
filterIndex = 0;
//loop through the existing filters (if any) to find the starting matrix values
for (i = 0; i < fltrs.length; i++) {
if (fltrs[i] is ColorMatrixFilter) {
matrix = fltrs[i].matrix;
filterIndex = i;
}
}
if (matrix == null) {
matrix = [1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0]; //identity matrix (default)
fltrs.push(new ColorMatrixFilter(matrix));
filterIndex = fltrs.length - 1;
}

var inv:Number = 1 - $amount;
var r:Number = inv * 0.212671;
var g:Number = inv * 0.715160;
var b:Number = inv * 0.072169;
var end:Array = applyMatrix([r + $amount, g, b, 0, 0, r, g + $amount, b, 0, 0, r, g, b + $amount, 0, 0, 0, 0, 0, 1, 0], matrix);
changeValues = [];

for (i = 0; i < matrix.length; i++) {
changeValues.push(end[i] - matrix[i]); //record the amount of change for each element
}

tween = new Tween(tweenInfo, "progress", Regular.easeOut, 0, 1, $duration, true);
tween.addEventListener(TweenEvent.MOTION_CHANGE, updateFilter);
}

function updateFilter($e:TweenEvent):void {
var tweenedMatrix:Array = [];
var progress:Number = tweenInfo.progress;
var i:int;
for (i = matrix.length - 1; i > -1; i--) {
tweenedMatrix[i] = matrix[i] + (changeValues[i] * progress);
}
var fltrs:Array = myObject.filters;
fltrs[filterIndex] = new ColorMatrixFilter(tweenedMatrix);
myObject.filters = fltrs;
}

function applyMatrix($m:Array, $m2:Array):Array {
var temp:Array = [], i:int = 0, z:int = 0, y:int, x:int;
for (y = 0; y < 4; y++) {
for (x = 0; x < 5; x++) {
if (x == 4) {
z = $m[i + 4];
} else {
z = 0;
}
temp[i + x] = $m[i] * $m2[x] +
$m[i+1] * $m2[x + 5] +
$m[i+2] * $m2[x + 10] +
$m[i+3] * $m2[x + 15] +
z;
}
i += 5;
}
return temp;
}

tweenSaturation(0, 3);

That code was written so you could just throw it on the timeline and go, but you may want to modularize it and stick it into a class or something so you could do more than one Tween at a time. Believe it or not, I tried to use the minimal amount of code possible. Maybe someone else has a better idea. It's 2:30am and my brain is a bit fried. :)

If you prefer the Tween way, no problem. I hope that code helps. You might want to check out the speed comparison at http://blog.greensock.com/tweening-speed-test/ before making your final decision, though. You may find that TweenLite/Max can save you a lot of time and make your application run more smoothly. Or not.

Happy tweening.