A Flash Developer Resource Site

Results 1 to 20 of 20

Thread: Actionscript for tweening advanced color settings?

Hybrid View

  1. #1
    Member
    Join Date
    May 2003
    Posts
    95

    Actionscript for tweening advanced color settings?

    Hello!

    Is it possible to use actionscript to tween the advanced color settings in a movieclip? I'd like to tween a picture from 0 to 255 (R, G, B, A) and then back to normal. I can do this using the timeline, but I would love to learn how to do with with actionscript instead.

    I'll attach an example to this posting of the effect I'm trying to create.

    Thanks!
    Attached Files Attached Files

  2. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Chicago
    Posts
    174
    sirenetta1,

    Ahh.... venerable photo flash effect. I love it. I use a lot myself. Anyway you can accomplish this using the onEnterFrame function. Which uses time base iteration ( loops ) as oppossed to processor baser iterators ( for...I, do...while, etc ). I'm not sure if you are familiar with the onEnterFrame function but I will post the code in the next couple of minutes that accomplishes what you need.

    Samuel Agesilas
    http://www.levelofindustry.com

  3. #3
    Senior Member
    Join Date
    Jun 2005
    Location
    Chicago
    Posts
    174
    sirenetta1,

    As promised here is the code...

    PHP Code:
    var start:Number 0;
    var 
    end:Number 250;
    var 
    myColor:Color = new Colorthis.imgMC );
    var 
    rate:Number 20;

    function 
    setColorTransformationval:Number ) : Object
    {
        var 
    myColorTransform:Object = new Object();
        
    myColorTransform.ra 100;
        
    myColorTransform.rb val;
        
    myColorTransform.ga 100;
        
    myColorTransform.gb val;
        
    myColorTransform.ba 100;
        
    myColorTransform.bb val;
        
    myColorTransform.aa 100;
        
    myColorTransform.ab val;
        
        return 
    myColorTransform
    }

    this.onEnterFrame = function() : Void
    {
        if ( 
    start end )
        {
            
    delete this.onEnterFrame;
        }
        
    myColor.setTransformsetColorTransformationstart ) );
        
    start += rate;

    Hope this helps

    Samuel Agesilas
    http://www.levelofindustry.com

  4. #4
    Senior Member
    Join Date
    Aug 2000
    Location
    Montréal
    Posts
    14,141
    This function would whiten the picture movieclip then go back to normal. You'll find out that sometimes, frame based tweens are simpler ;)

    PHP Code:
    function recolor(trc) {
        
    done=false;
        var 
    = new Color(t).getTransform();
        
    t.onEnterFrame = function() {
            
    col = new Color(this);
            
    col.setTransform(o);
            if (--
    r) {
                for (var 
    i in c) {
                    
    o[i] += (c[i]-o[i])/r;
                }
            } else {
                
    done=true;
                
    delete t.onEnterFrame;
            }
        };
    }
    recolor(a124, {rb:180bb:170,gb:160});
    this.onEnterFrame = function() {
        if (
    done) {
            
    recolor(a124, {rb:0bb:0,gb:0});
            
    done=false;
            
    delete this.onEnterFrame;
        }
    }; 
    In the function call recolor(a1, 24, {rb:0, bb:0,gb:0})
    the picture movieclip instance name is: 'a1'
    the rate, which can be modifed is '24'
    and the rb, bb and gb vars are the rgb values.

    gparis
    Last edited by gparis; 07-28-2005 at 10:18 AM.

  5. #5
    Member
    Join Date
    May 2003
    Posts
    95
    Samuel/gparis:

    Thanks for your code!! Samuel, I had an error appear when I tried to test.. could you let me know what is wrong?

    Error:

    Scene=Scene 1, Layer=Layer 2, Frame=1: Line 6: '{' expected
    function setColorTransformation( val:Number ) : Object {

    Scene=Scene 1, Layer=Layer 2, Frame=1: Line 18: Unexpected '}' encountered
    }
    Attached Files Attached Files

  6. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Chicago
    Posts
    174
    sirenetta1,

    Hmmm... That's strange, well I have included the fla with the code placed inside of it. I tested it and it works( I'm using Flash MX 2004 ).

    Let me know if it works



    Samuel Agesilas
    http://www.levelofindustry.com
    Attached Files Attached Files

  7. #7
    Member
    Join Date
    May 2003
    Posts
    95
    It worked! Thanks! :-)

  8. #8
    Senior Member
    Join Date
    Jun 2005
    Location
    Chicago
    Posts
    174
    sirenetta1,

    Glad to here it. Let me know if you need anymore help.

    ciao,
    Samuel Agesilas
    http://www.levelofindustry.com

  9. #9
    Member
    Join Date
    May 2003
    Posts
    95

    One last question...

    I have another question! Is it possible for the tween to do this:

    0 alpha ---> 255 Advanced (R, G, B, A) ---> Normal

    If so, how could I do that?

  10. #10
    Senior Member
    Join Date
    Aug 2000
    Location
    Montréal
    Posts
    14,141
    Hi Sirenetta,

    You want the code already made or help in how to structure it?

    gparis

  11. #11
    Senior Member
    Join Date
    Aug 2000
    Location
    Montréal
    Posts
    14,141
    We’ve got a busy server today, so i’ll try and post something while it’s still possible!

    In case you want to try and learn, here's a possible structure:

    first set some variables:

    - set the object’s _alpha to 0
    - use setTransform() to set the rb, bb, and gb variables to 255 (so your object is white)

    Adapt the color transformation script so the rb, bb, and gb variables go to 0 (instead of 255), so your object becomes ‘normal’ again.

    Write an alpha fade in function where, when the object _alpha reaches 100 the color transformation script is called.

    Calling that alpha fade in function would start the ‘chain reaction’.

    Good luck, and post back if questions.

    gparis
    Last edited by gparis; 07-28-2005 at 12:23 PM.

  12. #12
    Member
    Join Date
    May 2003
    Posts
    95
    Gparis, sounds great... well, this code almost does what I need, but I don't know how or where to add the alpha.. Can you help?

    Code:
    var cColor;
    MovieClip.prototype.fadeColor = function(cto, ease) {
    	var d = 0;
    	var myColor = new Color(this);
    	// myColor.setTransform({ra:100, rb:255, ga:100, gb:255, ba:100, bb:255, aa:100, ab:0});
    	this.onEnterFrame = function() {
    		for (var c in cColor) {
    			cColor[c] += (cto[c]-cColor[c])/ease;
    		}
    		myColor.setTransform(cColor);
    		d++;
    		if (d>20) {
    			cto = {ra:100, rb:0, ga:100, gb:0, ba:100, bb:0, aa:100, ab:0};
    			ease = 10;
    		}
    	};
    };
    pic.fadeColor({ra:100, rb:255, ga:100, gb:255, ba:100, bb:255, aa:100, ab:0}, 5);
    var myColor = new Color(pic);
    cColor = myColor.getTransform();
    Last edited by sirenetta1; 07-29-2005 at 09:14 AM.

  13. #13
    Senior Member
    Join Date
    Aug 2000
    Location
    Montréal
    Posts
    14,141
    I don't know how or where to add the alpha
    You make a separate function for the alpha. And in that function you call the fadeColor(parameters) function. As the fade in function is called first, you may want to set the variables in it. Then check for the moment when _alpha is almost at 100.
    Something like:
    code:
    if (pic._alpha>99) {
    fadeColor(params);
    } else {
    pic._alpha+=5; // fade in
    }



    small recap. Events in that order:

    call the fade in function:
    - set _alpha to zero
    - set color of image to white: colorObject.setTransform({rb:255, bb:255, gb:255});
    use the if statement and
    call the fadeColor function: to turn gb,bb and rb to 0.

    gparis
    Last edited by gparis; 07-28-2005 at 11:25 PM.

  14. #14
    Member
    Join Date
    May 2003
    Posts
    95

    Sorry...

    Gparis,

    Thanks! I think I'm getting closer but need some more help! I tried incorporating your code into the code I posted, and I think I added them in the right place, but it doesn't work? Also, could you give me an example of what is found in the (parameter) parentheses? Thanks so much for your help!

    Code:
    var cColor;
    
    MovieClip.prototype.fadeColor = function(cto, ease) {
    
    	var d = 0;
    
    	var myColor = new Color(this);
    
    	// myColor.setTransform({ra:100, rb:255, ga:100, gb:255, ba:100, bb:255, aa:100, ab:0});
    
    	this.onEnterFrame = function() {
    
    		for (var c in cColor) {
    
    			cColor[c] += (cto[c]-cColor[c])/ease;
    
    		}
    
    		myColor.setTransform(cColor);
    
    		d++;
    
    		if (d>20) {
    
    if (pic._alpha>99) {
    
         fadeColor(params);
    
    } else {
    
        pic._alpha+=5; // fade in
    
    } 
    
    			cto = {ra:100, rb:0, ga:100, gb:0, ba:100, bb:0, aa:100, ab:0};
    
    			ease = 10;
    
    		}
    
    	};
    
    };
    
    pic.fadeColor({ra:100, rb:255, ga:100, gb:255, ba:100, bb:255, aa:100, ab:0}, 5);
    
    var myColor = new Color(pic);
    
    cColor = myColor.getTransform();
    Last edited by sirenetta1; 07-29-2005 at 09:15 AM.

  15. #15
    Senior Member
    Join Date
    Aug 2000
    Location
    Montréal
    Posts
    14,141
    You still need to make a separate function for the alpha.

    When i say 'params' i mean the parameters of your function.

    gparis

  16. #16
    Senior Member
    Join Date
    Aug 2000
    Location
    Montréal
    Posts
    14,141
    Guess i was not clear enough. this is what should happen:

    Fade in function:

    set image alpha to 0
    set image color to white: set the rb, gb and bb variables to 255.
    start a loop (enterFrame)
    check if it’s bigger than 99
    if yes: call the debrightening function
    else: make the alpha go up

    debrightening function:

    start a loop (enterFrame)
    bring the rb, gb and bb variables back to 0.
    when they are delete the enterFrame.

    when all is done call the fade in function.

    gparis

  17. #17
    Member
    Join Date
    May 2003
    Posts
    95

    Help!

    Gparis,

    Well, I think I'm a little better now, but I haven't tested it... Is this what I needed to do?

    Code:
    pic._alpha=0
    
    var cColor;
    
    MovieClip.prototype.fadeColor = function(cto, ease) {
    
    var d = 0;
    var myColor = new Color(this);
    
    this.onEnterFrame = function() {
    
    for (var c in cColor) {cColor[c] += (cto[c]-cColor[c])/ease;}
    
    myColor.setTransform(cColor);
    
    d++;
    
    if (d>20; pic._alpha>99) {cto = {ra:100, rb:0, ga:100, gb:0, ba:100, bb:0, aa:100, ab:0};
    ease = 10}; pic._alpha+=5)
    
    };
    
    };
    
    pic.fadeColor({ra:100, rb:255, ga:100, gb:255, ba:100, bb:255, aa:100, ab:0}, 5);
    
    var myColor = new Color(pic);
    
    cColor = myColor.getTransform();

  18. #18
    Senior Member
    Join Date
    Aug 2000
    Location
    Montréal
    Posts
    14,141
    can't say you followed my instructions

    gparis

  19. #19
    Member
    Join Date
    May 2003
    Posts
    95
    Dang! And I actually thought I was doing something with it. Honestly, I am new to this so it's difficult for me!! But, I'm sure it gives you some smiles.

    Let's see... I guess it didn't work... Should I rather place the alpha code on the movie clip or should it be in with this code?

  20. #20
    Senior Member
    Join Date
    Aug 2000
    Location
    Montréal
    Posts
    14,141
    Should I rather place the alpha code on the movie clip or should it be in with this code?
    neither. The alpha has to be in a different function

    gparis

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center