Home Tutorials Forums Articles Blogs Movies Library Employment Press
Old 08-20-2009, 02:50 PM   #1
ThreeDollarBill
Registered User
 
Join Date: Jul 2009
Posts: 46
Default manipulate saturation / make movieclip grayscale

in the filters panel, there is an "adjust color" option.. and inside of it, there is an option there for "saturation".. setting it to the lowest (-100) will turn the movieclip / whatever object you're applying the filter to, to grayscale..

i was wondering, how would i go about this using code?

for example, if there was a movieclip on stage called "thePic" and i wanted to decrease its saturation slowly every enterframe until it finally becomes grayscale, how would i go about it?

i know how to manipulate the other filters like GlowFilter and BlurFilter through code, but it seems like there is no "AdjustColorFilter".. there is a ColorMatrixFilter, but i dont event understand how it works.. please help...
ThreeDollarBill is offline   Reply With Quote
Old 08-20-2009, 03:08 PM   #2
Obi
Jedi
 
Join Date: Mar 2008
Location: Moscow, Russia
Posts: 16
Send a message via ICQ to Obi
Default

ActionScript Code:
private var startSaturation:Number = 10; private var finSaturation = 0; private function enterFrameHandler(e:Event):void {           if(this.startSaturation > this.finSaturation) {                      this.sprite.filters = [new ColorMatrixFilter(this.getSaturationMatrix(this.startSaturation))]                      this.startSaturation -= 0.1;           } else {                      this.removeEventListener(Event.ENTER_FRAME, this.enterFrameHandler);           } } private function getSaturationMatrix(value:Number):Array {           var nRed:Number = 0.3086;           var nGreen:Number = 0.6094;           var nBlue:Number = 0.0820;           var nA:Number = (1 - value) * nRed + value;           var nB:Number = (1 - value) * nGreen;           var nC:Number = (1 - value) * nBlue;           var nD:Number = (1 - value) * nRed;           var nE:Number = (1 - value) * nGreen + value;           var nF:Number = (1 - value) * nBlue;           var nG:Number = (1 - value) * nRed;           var nH:Number = (1 - value) * nGreen;           var nI:Number = (1 - value) * nBlue + value;           return [nA, nB, nC, 0, 0, nD, nE, nF, 0, 0, nG, nH, nI, 0, 0, 0, 0, 0, 1, 0]; }

Something like that

Last edited by Obi; 08-20-2009 at 03:11 PM.
Obi is offline   Reply With Quote
Old 08-20-2009, 10:18 PM   #3
ThreeDollarBill
Registered User
 
Join Date: Jul 2009
Posts: 46
Default

thanks a lot Obi! looks like i have to analyze your code a little bit as i still dont understand what all the values are for.. but thanks!
ThreeDollarBill is offline   Reply With Quote
Old 08-21-2009, 06:37 AM   #4
Obi
Jedi
 
Join Date: Mar 2008
Location: Moscow, Russia
Posts: 16
Send a message via ICQ to Obi
Default

so, you can change saturation with folowing matrix:

a b c 0 0
d e f 0 0
g h i 0 0
0 0 0 1 0

In preceding matrix you need to determine the values of a trought i with the following equations, where red, blue, and green are luminance constants and value is the saturation value.

A = (1 - value) * Red + value;
B = (1 - value) * Green;
C = (1 - value) * Blue;
D = (1 - value) * Red;
E = (1 - value) * Green + value;
F = (1 - value) * Blue;
G = (1 - value) * Red;
H = (1 - value) * Green;
I = (1 - value) * Blue + value;

When saturation value is 0, the matrix is a grayscale matrix. © AS3 cb
Obi is offline   Reply With Quote
Reply


Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:22 PM.

///
Follow actionscriptorg on Twitter

 


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management plugin by RedTyger
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.