Jump to content
Search Community

Tween MC's .hue

failure13 test
Moderator Tag

Recommended Posts

I have a trouble, can't get my code to work.

I have rectangle on stage, and trying to tween .hue, what i need is same effect as:

http://s2.ipicture.ru/uploads/20130222/56cfX4PQ.png

 

If S and B always 100%, and only hue is changing.

 

Can someone give me example?

I was trying colorMatrixFilter, but for some reason haven't got the same effect as i got in flash itself...

 


stage.align = "TL";
stage.scaleMode = "noScale";
stage.displayState = StageDisplayState.FULL_SCREEN;

import com.greensock.*;
import com.greensock.easing.*;

var rectangle:MovieClip = new MovieClip();
var time:int = 5;

letMeSet();

function letMeSet():void {
    rectangle.graphics.beginFill(0xFF0000);
    rectangle.graphics.drawRect(0, 0, Capabilities.screenResolutionX, Capabilities.screenResolutionY);
    rectangle.graphics.endFill();
    addChild(rectangle);
    colorRun();
}

function colorRun():void {
    TweenMax.to(rectangle, time,{colorTransform:{tint: 0xFFFF00}, startAt: {colorTransform:{tint: 0xFF0000}}, onUpdate: test});
    TweenMax.to(rectangle, time,{colorTransform:{tint: 0x00FF00}, onUpdate: test, delay: time});
    TweenMax.to(rectangle, time,{colorTransform:{tint: 0x00FFFF}, onUpdate: test, delay: time * 2});
    TweenMax.to(rectangle, time,{colorTransform:{tint: 0x0000FF}, onUpdate: test, delay: time * 3, onComplete: colorRun});
}

function test():void {
    trace(rectangle.transform.colorTransform.color.toString(16));
}

Here's what i have now, it seem to work, but i'm sure there are much more easy way to do this through hue

 

P.S. It would be also extra cool to pause / play and rewind this sequence :)

Link to comment
Share on other sites

Here's a more efficient way to handle it using the HexColorsPlugin (don't forget to activate the plugin first):

 

var time:int = 5;
var tl:TimelineMax = new TimelineLite({onUpdate:report, repeat:-1});
var proxy:Object = {color:0xFF0000};
tl.to(proxy, time, {hexColors:{color:0xFFFF00}, ease:Linear.easeNone});
tl.to(proxy, time, {hexColors:{color:0x00FF00}, ease:Linear.easeNone});
tl.to(proxy, time, {hexColors:{color:0x00FFFF}, ease:Linear.easeNone});
tl.to(proxy, time, {hexColors:{color:0x0000FF}, ease:Linear.easeNone});
function report():void {
    trace(proxy.color.toString(16));
}

That way, you can pause()/resume()/reverse() the TimelineMax anytime. 

 

Is that what you were looking for?

Link to comment
Share on other sites

For some reason I assumed you were just wanting to get the actual color value that's tweening, but it looks like you want it applied to the rectangle which is no problem. You can do the tint tween just like you did before - just tuck it into the TimelineMax and use the to() convenience method:

 

var time:int = 5;
var tl:TimelineMax = new TimelineLite({repeat:-1});
tl.to(rectangle, time, {tint:0xFFFF00, ease:Linear.easeNone});
tl.to(rectangle, time, {tint:0x00FF00, ease:Linear.easeNone});
tl.to(rectangle, time, {tint:0x00FFFF, ease:Linear.easeNone});
tl.to(rectangle, time, {tint:0x0000FF, ease:Linear.easeNone});

I assumed you wanted a linear transition between each color, but feel free to remove that ease or change it to whatever you want.

Link to comment
Share on other sites

Thx Jack, it's funny, but i already come to exactly same code by that time :D

 

But what i wanted is even more simple version of it (as i thought it would be something like this):

 

TweenMax.to(rectangle, 0, {colorMatrixFilter:{brightness:3, saturation:3, hue:0}});

TweenMax.to(rectangle, time, {colorMatrixFilter:{brightness:3, saturation:3, hue:360}});

 

Why it doesn't work like if i would move genlty hue slider on screenshot from flash?

 

Here's  what i got now:

////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////// DEFECT PIXEL TEST //////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////

stage.align = "TL";
stage.scaleMode = "noScale";
stage.displayState = StageDisplayState.FULL_SCREEN;

import com.greensock.*;
import com.greensock.easing.*;

// timing of loop
var time:int = 13;
var rectangle:MovieClip = new MovieClip();
var timeline:TimelineMax = new TimelineMax({onUpdate: test, repeat: -1});

letMeSet();

function letMeSet():void {
    // create display
    rectangle.graphics.beginFill(0xFF0000);
    rectangle.graphics.drawRect(0, 0, Capabilities.screenResolutionX, Capabilities.screenResolutionY);
    rectangle.graphics.endFill();
    addChildAt(rectangle, 0);
    // center text messages
    //text.x = Capabilities.screenResolutionX * 0.5;
    //text.y = Capabilities.screenResolutionY * 0.5;
    // add keyboard listeners
    stage.addEventListener(KeyboardEvent.KEY_DOWN, control);
    // colorize display
    TweenMax.to(rectangle, 0,{colorTransform:{tint: 0xFF0000}, onComplete: colorRun});
}

function colorRun():void {
    timeline.append( new TweenMax(rectangle, time,{colorTransform:{tint: 0xFFFF00}}) );
    timeline.append( new TweenMax(rectangle, time,{colorTransform:{tint: 0x00FF00}}) );
    timeline.append( new TweenMax(rectangle, time,{colorTransform:{tint: 0x00FFFF}}) );
    timeline.append( new TweenMax(rectangle, time,{colorTransform:{tint: 0x0000FF}}) );
    timeline.append( new TweenMax(rectangle, time,{colorTransform:{tint: 0xFF00FF}}) );
    timeline.append( new TweenMax(rectangle, time,{colorTransform:{tint: 0xFF0000}}) );
}

function test():void {
    trace(rectangle.transform.colorTransform.color.toString(16));
}

function control(event:KeyboardEvent):void {
    TweenMax.to(text.textfield, 0,{alpha: 1});
    if (event.keyCode == Keyboard.SPACE) {
        if (timeline.paused == false) {
            timeline.pause();
            text.textfield.text = "PAUSE";
        }
        else {
            timeline.resume();
            text.textfield.text = "PLAY";
        }
    }
    if (event.keyCode == Keyboard.LEFT) {
        timeline.reverse();
        text.textfield.text = "<< REV";
    }
    if (event.keyCode == Keyboard.RIGHT) {
        timeline.resume();
        text.textfield.text = "FWD >>";
    }
    if (event.keyCode == Keyboard.UP) {
        text.textfield.text = "LIGHT";
    }
    if (event.keyCode == Keyboard.DOWN) {
        text.textfield.text = "DARK";
    }
    // i key
    if (event.keyCode == 73) {
        text.textfield.text = "133 Defect pixel test";
    }
    TweenMax.to(text.textfield, 2,{alpha: 0});
}

if (timeline.paused == false) {

 

This part doesn't work as i thought it would be, i think i've messed with syntax word, it's not "paused"?

 

And also i got strange trouble with controls, when i play left - it's cool, it gets reversed as it needs to, but when i play right - it doesn't play back normally...what's wrong?

 

P.S. I think you got some bug in forum's css, please note this, shadow doesn't continue:

http://s2.ipicture.ru/uploads/20130222/ODVfc1or.png

Link to comment
Share on other sites

ColorMatrixFilter just doesn't work that way in Flash - I can see why you'd think it should, but unfortunately it simply doesn't. It'd be really difficult to explain why. It's a fundamentally different effect than just applying a specific color to every pixel (which is what tint does). 

Link to comment
Share on other sites

paused is a method, not a property in v12. That way, it can be used as a getter or setter and it's chainable.

 

if (timeline.paused()) {
   // do stuff
}

And resume() honors whatever direction it currently is - reversed or forward. In other words, it doesn't change direction. If you want it to play forward, just use play(). Or of course you could set reversed(false) and then resume() - same thing. 

  • Like 1
Link to comment
Share on other sites

var tl:TimelineLite = new TimelineLite({onComplete:loop, onReverseComplete:loop});

...add stuff...

function loop():void {

    if (tl.reversed()) {

        tl.reverse(0); //0 is a special value for reverse() that tells it to jump to the end - it's the same as doing tl.time(tl.duration()).reverse();

    } else {

        tl.play(0);

    }

}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...