failure13 Posted February 22, 2013 Share Posted February 22, 2013 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 More sharing options...
GreenSock Posted February 22, 2013 Share Posted February 22, 2013 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 More sharing options...
GreenSock Posted February 22, 2013 Share Posted February 22, 2013 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 More sharing options...
failure13 Posted February 22, 2013 Author Share Posted February 22, 2013 Thx Jack, it's funny, but i already come to exactly same code by that time 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 More sharing options...
GreenSock Posted February 22, 2013 Share Posted February 22, 2013 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 More sharing options...
failure13 Posted February 22, 2013 Author Share Posted February 22, 2013 Oh, ok, pity that it's can't be as simple as in flash itself, but anyway thx for help Please check my updates in last post Link to comment Share on other sites More sharing options...
GreenSock Posted February 22, 2013 Share Posted February 22, 2013 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. 1 Link to comment Share on other sites More sharing options...
failure13 Posted February 22, 2013 Author Share Posted February 22, 2013 everything is cool now) Link to comment Share on other sites More sharing options...
failure13 Posted February 22, 2013 Author Share Posted February 22, 2013 Oh, i also forgot, if it's reversed and get to the beginning - it doesn't loop backwards, how to loop it also backward? Link to comment Share on other sites More sharing options...
GreenSock Posted February 22, 2013 Share Posted February 22, 2013 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 More sharing options...
failure13 Posted February 22, 2013 Author Share Posted February 22, 2013 Perfect! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now