TweenMax / TweenLite Grayscale to Color Tweening: A Review of Things You Should be Able to Do on Your Own by Now:)

Hi there Carl I been follow the tutos man, guess the file i sent you was all fashion code jeje, well im learning more, so i can apply the e. target or e. Current Target to buttons also?

for example:

myMCclip.buttonMode = true;

myMCclip.addEventListener(MouseEvent,ROLL_OVER, overBtn);

myMCclip.addEventListener(MouseEvent,ROLL_OUT, outBtn);

myMCclip.addEVentListener(MouseEvent.CLICK, clickBtn);

function overBtn(e:MouseEvent):void{

var button_mc:MovieClip = MovieClip(e.target);

//THEN MY TWEEN//

And the same way for the other listeners?. Well Thanks for you time. Ind Im still waiting the text tuto after the NBC one take care

Hey, Great to have you back. Just sent an email about the file you sent. Sorry it took this long. So glad you reminded me.

Yes, you can apply the listeners to buttons as well. The advantage to the method I use and that is available in the sample files is that you keep all your buttons or movieclips inside of a container movieclip : nav_mc in my example. Then you apply MOUSE_OVER and MOUSE_OUT listeners to the container.

keep up the great work!

Carl

Carl,

Your tutorials have been helping me get a head around Greensock. I appreciate that. What do you think about GAIA framwork. Is is worth the time learning it? I will share this video on twitter once i get home. I am at work right now where twitter is prohibhited.

Hey DJ Girish. Thanks for the twitter-love.

I had to google GAIA. Didn't even know what it was. From a quick glance it looks like it could be pretty cool. I will watch the video they have on adobe tv and let you know.

thx again
Carl

You did not know about it for real?

Watch this:

http://zunskigraphics.com/zblog/archives/195

Its a pretty good tutorial on GAIA framework. Its been about a year I have played around with flash and i have doing okay so far.. read a lot about actionscript and object oriented. then when i found jack doyle's website and his tutorial on tweenlite and tweenmax.. i got enlightned.. and then came u… i cant explain how much help you guys have been – both jack and you – carl. since, i am kinda new to flash – i am trying to learn the smarter way.. to get upto speed quick.. thanks for the love man

here's my website. recently built after i got enlightened by jack's tweenlite – http://djgirish.com

(Feel free to give me comments on my website or if i can approach a certain thing differently).

keep posting so that i can apply what i have learnt from you also.. and keep adding to my skills.

Carl, so you already got a #1 fan. Can I be your #2 fan?

Dj Girish, I just checked my records and it appears I do have an opening for a #2 fan. The position is all yours:)

Your site is really cool. I love the slick tweens and I enjoyed reading about you. I am very similar in that I am attracted to the problem-solving aspects of flash and I used it initially just for fun. It is amazing what you can do with it if you just practice a little here and there.

The only constructive criticism I would add for your site is to make sure the text in your buttons / navigation movieclips is not selectable. When I rollover your buttons my cursor changes to the Text Selection cursor. Its totally minor but fixing it will enhance the user experience. Keep up the great work!

Carl

Thanks for the appreciation Carl. i tried:
about_mc.buttonMode = true;
about_mc.useHandCursor=true;

For some reason, it just doesnt seem to work…. you have any suggestion? BTW. i just tweeted your video on my twitter.. and Wow! jack doyle commented on your video post.. i hope to in that position too where jack and Carl will comment on my blog.. mad respect to both of u.. your #2 fan.

the button issue with the selectable text may just be how you have your textfields set up in flash.
edit your about_mc. select the text. check the properties panel to see if the “selectable” option / button is activated. It is a little button with Ab, the b has a black background.

also check out this issue:
http://www.flepstudio.org/forum/tutorials/408-tips-tricks-movieclip-mousechildren.html

Hey Carl,

Great site you have here!

I have just dived into GreenSock tools straight out of AS2 – hahahahah!

As you can imagine I am facing one hell of a disaster so many thanks for providing cool little tutorials – they are awesome!

If you don't mind – post more on GreenSock!

How about LiquidStage / Liquid Area tutorials next!? That would be nice

Keep up the great work!

Thanks for the help on mousechildren. I hadn't seen your reply until I was revisiting your site and reading all your posts. So, basically I am not getting your replies on my email or my twitter inbox. I wont know it until i re-visit the page. You may have to put this feature on your website – Just my two cents.

Side tracked question: “Have you viewed the http://actionscript3video.flepstudio.org/english/ video tutorials yourself yet? Do you recommend it?”

Dj Girish,

Thanks for the link, i'll check it out.

I don't believe that signing into disqus (the comment system that i use) with your twitter account notifies you of replies to your comments. The benefits for me using this comment system are many:
1) I can moderate comments from my phone
2) It very reliably notifies me of all comments via email
3) It allows people using many different social networks and sites: facebook, twitter, yahoo, openID etc to easily post and have their avatar show up.

If having email notifications is helpful, you can “post as guest” and there is an option to subscribe via email.

Also if you set up your own disqus profile you can definitely have all reply comments emailed to you and reply to a discussion via email without even coming back to the site! Also a disqus profile allows you to hook up your twitter profile so that if you post a comment while logged into disqus then your comment will get posted to twitter and/or facebook AND you get all the notifications.

Also having a disqus profile helps you promote yourself. If someone clicks on your avatar in a comment they will see all the sites / blogs that you own and have access to your twitter name and facebook page + others.

you can read more here: http://disqus.com/profile/

Also once you get a disqus profile you will find it very easy to see all your comments and everysite that uses it one place. It really is pretty cool.

It is a very popular and robust comment system. I'm sure it isn't perfect for everyone. Do you know of other sites that you post on with your twitter account and you get notified of replies? I'd love to research other options.

I appreciate all your contributions and support!

Carl

Thanks for sharing. I am replying this msg with my new disqus profile after your recommendation.

Very cool. Thanks for going through the effort of getting a disqus profile. I hope you find some advantages and it is not at all troublesome. Catch you soon.

hey ogy, thanks for the ideas. i really want to get my hands into liquidStage. it is really cool.

cool!

while you are at it – how about basics on LoaderMax too?

looking forward to your further tutorials!

keep this page awesome

all the best

Hey Ogy,

I need to learn LoaderMax for myself. Have you seen the examples on this

page?

http://www.greensock.com/learning/

I know there are more loaderMax tutorials coming soon, I'll keep you posted

if I hear anything.

Carl

Carl,

Fantastic tutorial! I was trying to take one step further by with no success! I am trying to:
-change the initial color of all dudes (this part is done)
-when rollover one dude, the others turn dark
-roll off and all are bright again

Would this be an easy addition to your tutorial code?

Hey Kyle,

Thanks for dropping in. Thanks for the compliment and question.
Just to clarify, the dude you rollOver is NOT CHANGING, only the other 2. Correct?

I'll whip something up by tomorrow and send it to you. I'll also most likely do a tutorial on this as it is a cool effect.

Carl

Carl,

Thanks for the extra tutorial! That it exactly what I was attempting to do! Thanks for keeping the awesome tutorials coming!

Hey Carl ,
I am you new in action script and You website is helping me a lot thank you so much
I am trying to implement your code inside my creative code using OOP , the problem is nothing happend and its getting me crazy !!!!!!

Can i send you my code to have a look at ?
Thanks in advance & hope to hear from you soon

Hana

Can i send you my code to have a look at it !
Really need your hlep

Hi;

For black/white to color tweenings I prefer to do it with ColorMatrixFilter. This is how it’s done in TweenLite;

//Tweens to black and white
TweenLite.to(DisplayObjectYouWantToTween ,1,{colorMatrixFilter:{matrix:[0.3,0.59,0.11,0, 0,0.3,0.59,0.11,0,0,0.3,0.59,0.11,0,0,0,0,0,1,0]}});

//Tween from black and white to Color
TweenLite.to(DisplayObjectYouWantToTween,1,{colorMatrixFilter:{matrix:[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0]}});

More of my snippets you can found at http://snipplr.com/users/burnandbass/

Hey Carl,
Thanks for all the great work. In the last week alone I’ve used your infinite scroller, target v. current target, and this vid in ONE project. I’ve had a few years with flash but sometimes the simplest things can be the most difficult to grasp.

That’s amazing. I’ve found that regardless of how complex a flash project is it all boils down to how you mix and match just a small handful of concepts / features.

You can build so much after having just a few tricks in your bag.

Keep truckin.

Carl

Hi Carl,

Great tute.

I’m trying to do something very similar to what you have done here but I’ve
run into a bitmap/glowFilter issue. Like in your tutorial, I’m using a bitmap
image in Flash but I can’t seem to get the glowFilter to surround the image WHEN MOUSING OVER THE WHOLE IMAGE as you have done. 
What I have is a
square vector container  and a bitmap image sitting on
top of this on stage
(all created in Illustrator). All layers are separate when importing. So in Flash I’ve
created MC that wraps all the objects. However, I only get the glow effect when the
mouse is at the very edge(because there is a thin lip of the container around the edge) But the glow doesn’t
appear when you mouse over the bitmap image itself, very strange? I did get the
glow to work over the whole MC (as you have done), only after I imported all the graphics as a single
bitmap image but in doing so I lost the quality of the image and of course you
can’t scale it up etc…I think it may have something to do with the combination
of layers (vertor and bitmap) of the graphic in a single MC? Any suggestions? If
you had a chance to look at the file it may be easier to diagnose.
 Let me know and I’ll send you the file if you have time. 

Cheers Ben.

Hey Carl,
Great tutorials, I am learning quick and surprised that can already do a lot (never thought of being able to do that much with the code)
I started to implement your code/tutorials into my own site and run into some logistical problems.

I am looking for a solution to streamline the code for the array of 20+  buttons located inside the scroll pane.I know I can make an array if all the buttons would have a unified code executable change, i.e. they would become larger and brighter.My problem is that each button represents an product image in the “lights off” stage, then on rollover it is a “lights on” stage so I have to import two images in the on and off stage and play around with the opacity.Additional problem is that each button has to link to a different label.My question is: is it possible to unify the code if buttons have that much individuality or I have to make each one of them as in the example below:// makes a hand cursor appear over a mc acting as a button for all the buttons inside the scrollpnaeBckgrnd_mc.scrollpaneBckgrnd_btns_mc.MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.buttonMode = true;MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.useHandCursor = true;  ///////////////INDIVIDUAL BUTTONS      MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.FloraLyte_btn.FloraLyte_ON.alpha = 0;  var  FloraLyte_btn_Tween:TweenLite = TweenLite.to(MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.FloraLyte_btn.FloraLyte_ON, .5, {alpha:1, paused:true});           MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.FloraLyte_btn.addEventListener(MouseEvent.ROLL_OVER, overHandler_FloraLyte_btn);  MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.FloraLyte_btn.addEventListener(MouseEvent.ROLL_OUT, outHandler_FloraLyte_btn);         MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.FloraLyte_btn.addEventListener(MouseEvent.CLICK, onClick_floralytePopUp);         function onClick_floralytePopUp(event:MouseEvent) :void {  gotoAndPlay(“floralytepp”);   }                 function overHandler_FloraLyte_btn(e:MouseEvent):void{         FloraLyte_btn_Tween.play();         trace(“you rolled over me”);         }         function outHandler_FloraLyte_btn(e:MouseEvent):void{         FloraLyte_btn_Tween.reverse();         trace(“you rolled off me”);         }    //////////////////////////    MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.FloraLytell_btn.FloraLytell_ON.alpha = 0;  var  myTween:TweenLite = TweenLite.to(MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.FloraLytell_btn.FloraLytell_ON, .5, {alpha:1, paused:true});           MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.FloraLytell_btn.addEventListener(MouseEvent.ROLL_OVER, overHandler);  MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.FloraLytell_btn.addEventListener(MouseEvent.ROLL_OUT, outHandler);         MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.scrollpaneBckgrnd_btns_mc.FloraLytell_btn.addEventListener(MouseEvent.CLICK, onClick_floralytellPopUp);         function onClick_floralytellPopUp(event:MouseEvent) :void {  gotoAndPlay(“floralyte2pp”);   }        function overHandler(e:MouseEvent):void{         myTween.play();         trace(“you rolled over me”);         }           function outHandler(e:MouseEvent):void{         myTween.reverse();         trace(“you rolled off me”);         }  ///////////////////////////////////////////////////////////////////////////////////////////////////////////////

Hi, i want this swf start with saturation=0, then mouseover=1 and mouseout=0, Please tell me how, thanks!

that’s basically what it does right now, except I use saturation of .1. feel free to change that to 0 in the appropriate spots. you can get rid of the initial automatic tween by changing the last line to:
TweenMax.allTo(dudes_arr, 1, {colorMatrixFilter:{saturation:0, brightness:.5}}, 1)

yeah, that’s what i want! thanks for your support!