dcsimg
A Flash Developer Resource Site

Page 1 of 2 12 LastLast
Results 1 to 20 of 23

Thread: How to color the tint of a movieclip using as3

  1. #1
    Senior Member
    Join Date
    Oct 2002
    Posts
    126

    How to color the tint of a movieclip using as3

    Hi...

    I am trying to figure out how to color the tint of a movieclip using as3.
    Using as2 I would do the following :

    var clSymbol:Color = new Color(mcSymbol);
    clSymbol.setRGB(0xFF0000);

    ..and the movieclip mcSymbol would turn red.
    Very easy using as2 but I don´t know how to do the same thing using as3.

    Any idea ?

    thx

  2. #2
    hippie hater Cimmerian's Avatar
    Join Date
    Oct 2006
    Location
    over there
    Posts
    599
    Use the colorTransform object
    If you can't explain it simply, you don't understand it well enough.
    Albert Einstein

  3. #3
    Senior Member
    Join Date
    Oct 2002
    Posts
    126
    Thx,

    var colorTransform:ColorTransform = mcSymbol.transform.colorTransform;
    colorTransform.color = 0xFF0000;
    mcSymbol.transform.colorTransform = colorTransform;

  4. #4
    Junior Member
    Join Date
    May 2007
    Posts
    10

    Great - I can change the color BUT can I do it with a tween class?

    Can I change the tint over time (like alpha) using a tween transition?

  5. #5
    Flash Your Flex
    Join Date
    Apr 2007
    Location
    Provo, Utah
    Posts
    45
    a tween transition can change any "property", but not objects, and color is an object. So alpha, x, y, width, height, scale, etc...

    But you could set up a timer interval that would change the color slowly
    Last edited by malihk; 05-11-2007 at 12:49 AM.

  6. #6
    half as fun, double the price senocular's Avatar
    Join Date
    Feb 2002
    Location
    San Francisco, CA (USA)
    Posts
    4,361
    here is an example using the Tween class with a tint. Assumes a movie clip with the instance name "clip"
    Code:
    import fl.transitions.*;
    import fl.transitions.easing.*;
    
    // function to transition from one colorTransform to another
    function interpolateColor(start:ColorTransform, end:ColorTransform, t:Number):ColorTransform {
    	var result:ColorTransform = new ColorTransform();
    	result.redMultiplier = start.redMultiplier + (end.redMultiplier - start.redMultiplier)*t;
    	result.greenMultiplier = start.greenMultiplier + (end.greenMultiplier - start.greenMultiplier)*t;
    	result.blueMultiplier = start.blueMultiplier + (end.blueMultiplier - start.blueMultiplier)*t;
    	result.alphaMultiplier = start.alphaMultiplier + (end.alphaMultiplier - start.alphaMultiplier)*t;
    	result.redOffset = start.redOffset + (end.redOffset - start.redOffset)*t;
    	result.greenOffset = start.greenOffset + (end.greenOffset - start.greenOffset)*t;
    	result.blueOffset = start.blueOffset + (end.blueOffset - start.blueOffset)*t;
    	result.alphaOffset = start.alphaOffset + (end.alphaOffset - start.alphaOffset)*t;
    	return result;
    }
    
    // start and end colors for tween
    var startColor:ColorTransform = new ColorTransform(); // default color, no tint
    var endColor:ColorTransform = new ColorTransform();
    endColor.color = 0xFF0000; // end color of red
    
    // create tween; use "" for property since no
    // property is being tweened; just using the
    // Tween class here to handle the animation
    // using the values 0 and 1 (0% to 100%)
    // over a time period of 50 frames
    var tween:Tween = new Tween(clip, "", Strong.easeOut, 0, 1, 50);
    // listen for the TweenEvent.MOTION_CHANGE event to 
    // perform the custom color tween
    tween.addEventListener(TweenEvent.MOTION_CHANGE, tweenTransform);
    
    // TweenEvent.MOTION_CHANGE handler using interpolateColor
    // to set the colorTransform of clip (tween.obj) based on
    // the startColor and endColor properties defined earlier
    function tweenTransform(event:TweenEvent):void {
    	// use tween position for interpolation of
    	// start and end colors (value 0 - 1)
    	clip.transform.colorTransform = interpolateColor(startColor, endColor, tween.position);
    }
    Last edited by senocular; 05-11-2007 at 11:34 AM.

  7. #7
    Flash Your Flex
    Join Date
    Apr 2007
    Location
    Provo, Utah
    Posts
    45
    good post senocluar! I like how you use the tween class as an interval timer. Good creativity!

  8. #8
    Junior Member
    Join Date
    May 2007
    Posts
    10

    Thanks!

    WOW. That was much more than I expected. I'm not a programmer but I willl try your code and see if I can get it to work in my animation.

    Thanks for taking the time to post this.

  9. #9
    half as fun, double the price senocular's Avatar
    Join Date
    Feb 2002
    Location
    San Francisco, CA (USA)
    Posts
    4,361
    This could also be done with a motion tween and the color option in the Property Inspector if you didnt want to do it in code

  10. #10
    Junior Member
    Join Date
    May 2007
    Posts
    10
    Yes, but it is for a menu and I really like to keep it in the code so i don't have to jump around in the timeline for each change. Thanks for the suggestion.

  11. #11
    Junior Member
    Join Date
    May 2007
    Posts
    10
    I'm getting errors when I test the movie -
    The class or interface "ColorTransform" cannot be loaded
    The class or interface "Tween" cannot be loaded
    The class or interface "TweenEvent" cannot be loaded

    The only change I made was to change "clip" to the actual name of my movieclip.

    Any ideas?

  12. #12
    half as fun, double the price senocular's Avatar
    Join Date
    Feb 2002
    Location
    San Francisco, CA (USA)
    Posts
    4,361
    Are you using Flash CS3?

  13. #13
    Junior Member
    Join Date
    May 2007
    Posts
    10
    yes

  14. #14
    half as fun, double the price senocular's Avatar
    Join Date
    Feb 2002
    Location
    San Francisco, CA (USA)
    Posts
    4,361
    Make sure your publish settings are set for ActionScript 3, not 2.

  15. #15
    Junior Member
    Join Date
    May 2007
    Posts
    10
    duh. I assumed it would default to that

    Thanks

  16. #16
    Junior Member
    Join Date
    May 2007
    Posts
    2
    Quote Originally Posted by senocular
    Make sure your publish settings are set for ActionScript 3, not 2.

    What if you are using flash 8 professional? Because I get the same error and I dont think I have actionscript 3. Help

  17. #17
    Junior Member
    Join Date
    May 2007
    Posts
    2
    Quote Originally Posted by senocular
    Make sure your publish settings are set for ActionScript 3, not 2.

    What if you are using flash 8 professional? Because I get the same error and I dont think I have actionscript 3. Please Help!!!

  18. #18
    Senior Member
    Join Date
    Aug 2004
    Location
    London
    Posts
    211
    publish to flash player 9 is supposed to work for as3 compilation ?

    I'd like to continue to use f8 professional a while longer..
    ----------------------------
    Advertise a travel service related link for free
    e.g. Hotel, Tour, or just contribute a Travel Tip to the forum

    www.landed.at
    ----------------------------

  19. #19
    Senior Member
    Join Date
    Aug 2004
    Location
    London
    Posts
    211

    and applyying to a part thereof ?

    wondering if i wanted to do this for a part of the bitmap where would I drop the rectangle argument

    i tried putting it in the end one but didnt work...

    Code:
    var endColor:ColorTransform = new ColorTransform(rect,null);
    Quote Originally Posted by senocular
    here is an example using the Tween class with a tint. Assumes a movie clip with the instance name "clip"
    Code:
    import fl.transitions.*;
    import fl.transitions.easing.*;
    
    // function to transition from one colorTransform to another
    function interpolateColor(start:ColorTransform, end:ColorTransform, t:Number):ColorTransform {
    	var result:ColorTransform = new ColorTransform();
    	result.redMultiplier = start.redMultiplier + (end.redMultiplier - start.redMultiplier)*t;
    	result.greenMultiplier = start.greenMultiplier + (end.greenMultiplier - start.greenMultiplier)*t;
    	result.blueMultiplier = start.blueMultiplier + (end.blueMultiplier - start.blueMultiplier)*t;
    	result.alphaMultiplier = start.alphaMultiplier + (end.alphaMultiplier - start.alphaMultiplier)*t;
    	result.redOffset = start.redOffset + (end.redOffset - start.redOffset)*t;
    	result.greenOffset = start.greenOffset + (end.greenOffset - start.greenOffset)*t;
    	result.blueOffset = start.blueOffset + (end.blueOffset - start.blueOffset)*t;
    	result.alphaOffset = start.alphaOffset + (end.alphaOffset - start.alphaOffset)*t;
    	return result;
    }
    
    // start and end colors for tween
    var startColor:ColorTransform = new ColorTransform(); // default color, no tint
    var endColor:ColorTransform = new ColorTransform();
    endColor.color = 0xFF0000; // end color of red
    
    // create tween; use "" for property since no
    // property is being tweened; just using the
    // Tween class here to handle the animation
    // using the values 0 and 1 (0% to 100%)
    // over a time period of 50 frames
    var tween:Tween = new Tween(clip, "", Strong.easeOut, 0, 1, 50);
    // listen for the TweenEvent.MOTION_CHANGE event to 
    // perform the custom color tween
    tween.addEventListener(TweenEvent.MOTION_CHANGE, tweenTransform);
    
    // TweenEvent.MOTION_CHANGE handler using interpolateColor
    // to set the colorTransform of clip (tween.obj) based on
    // the startColor and endColor properties defined earlier
    function tweenTransform(event:TweenEvent):void {
    	// use tween position for interpolation of
    	// start and end colors (value 0 - 1)
    	clip.transform.colorTransform = interpolateColor(startColor, endColor, tween.position);
    }
    ----------------------------
    Advertise a travel service related link for free
    e.g. Hotel, Tour, or just contribute a Travel Tip to the forum

    www.landed.at
    ----------------------------

  20. #20
    Junior Member
    Join Date
    Mar 2008
    Posts
    1

    Unhappy

    I've returned this error:

    TypeError: Error #1010: A term is undefined and has no properties.
    at MethodInfo-226()
    at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunctio n()
    at flash.events::EventDispatcher/dispatchEvent()
    at fl.transitions::Tween/setPosition()
    at fl.transitions::Tween/::update()
    at fl.transitions::Tween/set time()
    at fl.transitions::Tween/nextFrame()
    at fl.transitions::Tween/fl.transitions:Tween:nEnterFrame()


    Any idess???


    Thanks

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