1 2 Previous Next 68 Replies Latest reply on May 14, 2007 6:31 AM by kglad

    how to setup a Desaturation Tween

    Sketchsta Level 1
      Hi just a quick question, i have a function to swap depths and tween the _alpha property of some movie clips, ---=> Thanx kglad <=--- but i was wondering if theres a way to change the color property without filters??
      im especially interested in the Saturation / De-Saturation for this idea i have.

      or do i need to use import flash.filters to do this?

      if this is the only way, i dont think it will be worth it, unless creating a function for it is simple.

      Thanx in advance.
        • 1. Re: how to setup a Desaturation Tween
          kglad Adobe Community Professional & MVP
          you could use tweening and the color class or colortransform class if you want to avoid bitmaps.
          • 2. Re: how to setup a Desaturation Tween
            Sketchsta Level 1
            thanx for the help again =)

            i had a read through the help docs, and i found and tried this code.

            how can i combine this with the _alpha tween you helped me with before?

            thats a whole lot of paramiters to remember too...I was thinking something like..
            six._color = 0x995588 ;

            but i guess that would just be too easy. =)
            • 3. Re: how to setup a Desaturation Tween
              kglad Adobe Community Professional & MVP
              yes, there's no super easy way to handle color in flash. the color class is the easiest and most intuitive to understand but it has its own share of problems when you use it because you must make an effort to control each color component (r, g and b) separately.

              here's an example:

              • 4. Re: how to setup a Desaturation Tween
                Sketchsta Level 1
                WOW!!!

                i cant even begin to understand that...
                I can sort of guess what it does by the few lines of code that i understand and know... but the bulk of it..it's just out of my league..

                the comments are gonna help me abit.. but i dont even understand the syntax you used...

                all i hoped to do is add color to the menu that is clicked and tween to grayscale when not in focus..
                but i dont think thats gonna happen with this menu. =)

                thanx alot anyway. but you've shown me that this is out of my league. =)
                • 5. Re: how to setup a Desaturation Tween
                  kglad Adobe Community Professional & MVP
                  here's that code without the array notation (and only for the r or red component of the color):

                  • 6. Re: how to setup a Desaturation Tween
                    Sketchsta Level 1
                    hahaha, you knew exactly what i was having problems with.. =P

                    yeah that makes more sense to me now. All thats left is for me to play round with it until I fully understand it.

                    from looking at it ( for the last 20mis ) this is a tween on it's own right?
                    it increases every 50ms and clears tetsI when it reaches max red.

                    what about the 16? what is that ?
                    only thing i can think of is the HUE of the red, from 0 - f... is that right?

                    col += rCom+"0000"; if i was to change these values, would it have an effect on the color?
                    or does it need to be declared as green and blue?

                    ok, well im gonna go try this in a new .fla, and see what i can learn from it.

                    Thanx again dude, with your help i'll be as good as you in half my life time..=P
                    • 7. Re: how to setup a Desaturation Tween
                      kglad Adobe Community Professional & MVP
                      yes, that's a tween using a setInterval() loop.

                      the toString(16) converts that number to a base 16 (hexadecimal) number. otherwise, flash converts those hex numbers (like 0xff) into decimals. and with decimal numbers it's more complicated to control the red, green and blue colors.

                      i think the best way to learn is to experiment. so, go for it. try:

                      col+=rComp+"00ff";
                      // and then try
                      col+=rComp+"ff00";
                      // etc
                      • 8. Re: how to setup a Desaturation Tween
                        Sketchsta Level 1
                        yeah thats the first thing i tried. =)
                        the only problem is that the green and blue values are applied right from the start, which i kinda already guessed..
                        but the point is that i know they can be changed now.

                        i tried it with one of the folder symbols from the main .fla, to get an idea of what strength i want the color..
                        and i also added the new thing i learnt... Tween the _alpha. =)

                        it's looking not as good as i thought it would, but with abit more tweaking it could be alright.

                        i'm gonna try n write your function by myself, but for the green and blue.
                        I know this is alot of extra typing, making a separate function for each..but atleast this one i understand. and by typing it, i will remember it.

                        Are arrays really important to know?
                        I dont know what really good uses they have, so I never stumbled accross any use for them to learn..

                        One thing i REALLY have to learn, is how to make custom functions ( I dont know what else to call them ).
                        The kind where you can call it AND tweak it by adding properties.

                        for example, i make 3 buttons to call to this function you made, but from each button the function is called, i can set the properties for it.

                        btn1.onRelease = function(){
                        testF(12,55,90);
                        }

                        like that...to set the 3 colors.
                        I need to study a couple of those type of functions. I have one for drawing a rounded rectangle, LuigiL gave me a while ago.
                        i'll get on that after i learn more tweening and maybe learn the array function you gave me first. =)

                        You know what... people like You, David Stiller, and LuigiL, should write the help docs for Flash.. everyone would learn alot easier if the help docs were easier to understand.

                        anyway, THANX yet again,
                        you're always a good source for learning. =)
                        • 9. Re: how to setup a Desaturation Tween
                          kglad Adobe Community Professional & MVP
                          you can use the tween class to control the red, green and blue variables if you get inspired:

                          • 10. Re: how to setup a Desaturation Tween
                            Sketchsta Level 1
                            thats kool, you just made your own function hey?

                            I dont understand why it works though. I thought the params for Tween are...

                            (movieClip, " what attribute to tween ", extra effects, start, destination, length, seconds or timeline);

                            i see all of those in your function, but i dont see the attribute to tween.. I see where you set r to be 0, but thats it.
                            i dont see how r is a attribute to be changed...

                            also, the beginning of the attributes, you have Obj as the movieClip... the way i understand and the way i would have tried to do this, is to have mc instead of Obj, because the movieClip called mc is the one im trying to affect..

                            You have just confused me with the little that i know about Tweens =)
                            It's probably a good thing though, if i dont learn this way of doing it, i might be learning the Tween class all wrong.
                            • 11. Re: how to setup a Desaturation Tween
                              Sketchsta Level 1
                              its like the setInterval i learnt a while ago... I still dont really understand why it works, because of the params.

                              the way i know setInterval is..

                              interval_name.setInterval( function name , how often);

                              two params..

                              the one that i still dont understand is..

                              interval_name.setInterval( timeline, " command ", how often );

                              i use this to pause the playhead..and sure enough, it works like magic.. but i dont understand why..
                              because theres no function being called...and this doesnt repeat like the one i use, this stops, for the amount you set in the last param..

                              I looked at it for ages, and tried to read the help docs on setInterval... but couldnt find anything.. so i just gave up, but i still use it. =)
                              • 12. Re: how to setup a Desaturation Tween
                                kglad Adobe Community Professional & MVP
                                actually the tween class is much more flexible than just handling movieclips and their properties. it's able to handle any object and its property.

                                so, with the color tween i created an object (obj=new Object() ) which serves no other purpose than to allow me to create a property of that object ( r ) that can be tweened from 0 (=0x00) to 255 (=0xff).

                                the only place i need to use the movieclip is to create a color object of the movieclip (c=new Color(mc) ). it's the color object that i'm going to manipulate (using setRGB() ).
                                • 13. Re: how to setup a Desaturation Tween
                                  kglad Adobe Community Professional & MVP
                                  the two ways to use setInterval() are explained in the help documents under actionscript 2.0 language reference/actionscript classes/index/setInterval().
                                  • 14. Re: how to setup a Desaturation Tween
                                    Sketchsta Level 1
                                    hmm... i think i understand it now. I can follow along when i read it. But i will need alot of practice on this before i would be able to make another function like yours.

                                    Im slowly starting to write bigger and fairly complex ( complex for me ) functions, so i think i will have to make the most of creating variables like you do. The problem is, im not fluent enough in AS yet to think ahead.

                                    thanx for the info on setInterval(), i just found it.
                                    theres abit to read and try on there, so it's gonna have to wait abit, while im learning tweens, and trying to adopt your methods of writing functions.
                                    hope you dont mind. =P
                                    • 15. Re: how to setup a Desaturation Tween
                                      kglad Adobe Community Professional & MVP
                                      no, go for it. noone offers help here and expects their revealed techniques to be proprietary.

                                      like everything else, there should be no rush to learn everything. learn what you can and keep trying. even if you can only learn a little at any one time, if you stick with something long enough, you'll become an expert.
                                      • 16. Re: how to setup a Desaturation Tween
                                        Sketchsta Level 1
                                        Thanx kglad.
                                        and Yes, trying to learn alot of things at one time is disastrous to my brain. =)

                                        I learn AS according to what ideas i get for websites. and alot of times i come here to ask how, and if theres better ways of doing it.
                                        I guess thats why i dont know anything about Arrays, Loading from XML, external as files, creating variables, etc.. because all i can think about is how to do it in the Actions Pannel. =)

                                        I gave up learning almost everything else except Actionscript. I see too many things that AS can do, and i LOVE it.
                                        and this forum is the biggest help. Especially since stupid Australia doesnt sell AS2.0 books. No store around my area sells them.

                                        Ohh by the way, if you're a Manchester Utd fan... we won this morning against Roma, 6 - 1
                                        We're in the Semi's =)

                                        anyway, back to work.. gonna finish this navigation transitions, and get started on the pages.
                                        Thanx again kglad, always the AS Genius! =)
                                        • 17. Re: how to setup a Desaturation Tween
                                          Sketchsta Level 1
                                          I marked this as the answer because everything KGLAD said is the answer, but with different techniques.

                                          So... read it. =)
                                          • 18. Re: how to setup a Desaturation Tween
                                            kglad Adobe Community Professional & MVP
                                            you're welcome sketchsta. and congrats on the semis!!!
                                            • 19. how to setup a Desaturation Tween
                                              Sketchsta Level 1
                                              Hey kglad, i've been messing around with the setInterval() version of your code, and I came up with this.. ( Is this kinda the same as the code you gave me first, with the Array?? )

                                              anyway, it doesnt work exactly as i hoped.
                                              I tried ALOT of variations, some of which make no sense...but i tried anyway, and still didnt get it right. =)

                                              Is there a way to set the MAX each (r, g, b) can go to?
                                              as you can see at the bottom, i tried to cheat...but to no avail..

                                              is there any hope for my modified version of your code, or did i just waste afew hours for nothing?
                                              • 21. Re: how to setup a Desaturation Tween
                                                Sketchsta Level 1
                                                Hmm... this means i've had it right for a while now.. except for the clearInterval() part..

                                                when i was clearing the interval, i was clearing it from ( r ) because i was seeing it as one big 6 digit number.
                                                i wasnt looking at it as 3 separate 2 digit numbers.. but this makes sence tho.

                                                im calling to this function the same time im calling the swapDepths() and alpha tween, which makes this transition quite slow, so i changed the incrementation from 01 to 10.
                                                makes it abit harder to hit the target max number, but it's nice n fast now.

                                                now comes my next part...have to make this run in reverse
                                                ( i know, i know....i want too much..) but hey..thats what a designer does right? =)

                                                this would be a good place to have this as one of those functions where you can specify the params for it.. I might look into that before trying to write this in reverse.

                                                wish me luck =P
                                                and thanx again..=)
                                                • 22. Re: how to setup a Desaturation Tween
                                                  kglad Adobe Community Professional & MVP
                                                  the code below the dotted line allows you to fade any movieclip from a color of rgb1 and alpha of a1 to a color of rgb2 and alpha of a2 in speed seconds using any number of steps. to apply to a movieclip mc2:



                                                  • 23. how to setup a Desaturation Tween
                                                    Sketchsta Level 1
                                                    WOW.. with this code i dont think i'll even need the _alpha Tween you helped with before...

                                                    How did you get so AS smart?? tell me your secret dude.. was it something you eat?? maybe drink??

                                                    I wish i could just download your AS knowledge...even at dialup speed, i'll wait the 2 full months to get all the knowledge you have, i dont care.. =P

                                                    but anyway, im getting an error from line 4.
                                                    I dont know what the assignment operator is, my best guess would be that MovieClip needs to be changed somehow..

                                                    the error code is...

                                                    **Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 4: Left side of assignment operator must be variable or property.
                                                    MovieClip.prototype.colorFadeF = function(rgb1, a1, rgb2, a2, speed, steps) {

                                                    • 24. Re: how to setup a Desaturation Tween
                                                      kglad Adobe Community Professional & MVP
                                                      send me a link to your fla that results in that error message.
                                                      • 25. Re: how to setup a Desaturation Tween
                                                        Sketchsta Level 1
                                                        all it is, is a rectangle movieClip on _root, and on another layer i have the code.

                                                        the movieClip has an instance name of mc2

                                                        Heres the FLA

                                                        Im doing something stupid aren't i???
                                                        • 26. Re: how to setup a Desaturation Tween
                                                          Sketchsta Level 1
                                                          ohh damn it.... the error was because i didnt remove the dotted line... =(
                                                          i knoew i was doing something stupid.

                                                          but im still not getting anything happening tho..

                                                          Im gonna mess aound with it abit more.
                                                          I bet im doing something stupid again..
                                                          • 27. Re: how to setup a Desaturation Tween
                                                            kglad Adobe Community Professional & MVP
                                                            ahh, well that wasn't the most clever manuever. but i can also say that i've had more than my share of rock-head errors.

                                                            you need to remove the dotted line. that's not bonafide actionscript. that will stop the error message.

                                                            and the movieclip.prototype code should be place before any code that uses the prototype.
                                                            • 28. Re: how to setup a Desaturation Tween
                                                              Sketchsta Level 1
                                                              ohhhhh... yeah now it works. =)

                                                              did you put it that way just to test me??? see just how dumb i am?? =P

                                                              prototype??
                                                              does that mean that you are creating a function that Flash doesnt know, but if it follows the code you specify, you get the result you are hoping for??

                                                              maaan.... you know Flash better than Flash knows it's self... I bet all the people who Developed Flash and Actionscript would come to you for guidence.

                                                              I need to pick up my game if i ever hope to know even a fraction of what you know..
                                                              • 29. Re: how to setup a Desaturation Tween
                                                                kglad Adobe Community Professional & MVP
                                                                no, when prototype is used it's adding a new method to some class. in this case it's adding the colorFadeF() property to all movieclips.

                                                                movieclips come standard with a nice selection of predefined methods (and properties). but those methods and properties can be expanded to suite user's needs.

                                                                using the prototype is the old-school way of adding methods. using class definitions is the new-school way. but that's much harder to communicate to someone and have them get it working properly and much harder for them to understand. so, i still use prototypes to help people on this forum.

                                                                recently i've tried passing some class extensions but i don't think anyone's been able to implement them correctly so i don't think i've helped anyone with those.
                                                                • 30. Re: how to setup a Desaturation Tween
                                                                  Sketchsta Level 1
                                                                  hmm, well i dont really understand the prototype() just yet, nor arrays. So i have quite abit of learning to do. =)
                                                                  i hope you have the patience to put up with me every now and then, until i learn =P

                                                                  anyway, the color functions you gave me have to wait abit, i just got a call from my boss, he said the clients for a site i did want 3 pages changed, AND they want a Pic Gallery added...and to make things worse, they wat the gallery to be like a Carousell view with the thumbs...... *shakes head*

                                                                  this should be fun... and i have to get this ready by tomorrow evening. =(
                                                                  French people are verry demanding... grrrr !!!

                                                                  but after this, i'll get back to you about this prototype() business...I think if i learn this, it will be a really big leap in the sense of getting things to animate like i want...no matter how weird the idea may be. =P
                                                                  • 31. Re: how to setup a Desaturation Tween
                                                                    kglad Adobe Community Professional & MVP
                                                                    here's code for a carousel. give a movieclip a linkage id of obj:

                                                                    • 32. Re: how to setup a Desaturation Tween
                                                                      Sketchsta Level 1
                                                                      HOLY CRAP.... How did you do that???

                                                                      sooo much maths in there... im scared just reading it. =P

                                                                      You're God's Gift to Actionscript......Honestly dude...is there anything you dont know how to do??

                                                                      I feel like i should pay you for all this code you give me..

                                                                      I've read abit about attatchMovie, and adding a incremented number to the instance name, so i know that part of your code..

                                                                      but the rest......

                                                                      s#it...i gotta finish up these 3 pages, and get to studying hardcore on this 3D wonder of actionscript....

                                                                      ohh man you shouldnt have shown me this.... im desperate to learn this now... =P
                                                                      • 33. Re: how to setup a Desaturation Tween
                                                                        kglad Adobe Community Professional & MVP
                                                                        and i used array notation again to save typing so that's going to make it tougher for you to understand. it's just so much more convenient that typing everything out on its own line.

                                                                        in the initialization parameters you can customize all those numbers. what they do is clear from the variable names. maxA and minA are explained with the commented lines above them and contain the max and min values for those three properties listed in the propertiesA.
                                                                        • 34. Re: how to setup a Desaturation Tween
                                                                          Sketchsta Level 1
                                                                          yeah the array will make it abit tougher, but after the last code i re-typed i think i should be able to re-type this one too.

                                                                          believe it or not, i make it a point NOT to copy n paste any code i write, because the more i type code, the more practice i get and it eventually sticks to me. =)
                                                                          so i dont mind the extra typing.


                                                                          so far with this "Wonder of AS " i have been messing around with the variables, and read through it trying to keep up, not too much luck there tho.. but i did figure out to draw a rectangle on stage to accompany the last few lines of code.

                                                                          yes your comments hinted as much...but me being the newbie that i seem to be, i just thought you were reffering to the actual stage. =P

                                                                          Im done playing round with it, now im gonna make a copy and start re-typing it, maybe then i can work my way up to even include thumbs through a XML file.

                                                                          one question though... can i say something like..

                                                                          the biggest _scale object, move to highest depth?

                                                                          is it possible to have something like..

                                                                          this.swapDepths(_yscale+100);

                                                                          the way im thinking there is, which ever of the attachedMovies are the tallest will be at that depth plus 100, just to make sure. =)

                                                                          maybe im way off on that one... but atleast im trying rite? =)
                                                                          • 35. Re: how to setup a Desaturation Tween
                                                                            kglad Adobe Community Professional & MVP
                                                                            just after the assignment of d in the spinF() function you can add:

                                                                            • 36. Re: how to setup a Desaturation Tween
                                                                              Sketchsta Level 1
                                                                              see how your code resizes each clip thats attached? this makes any image i put in there look really pixelated.

                                                                              is there any way to make the pic look nice and sharp while it's scaled down like that?

                                                                              If not, i may have to give up the freedom of being able to resize each movieClip, and have pre-set width and height.. just for this project tho.

                                                                              it's having afew issues because the swf im having this code in, is smaller than the main swf that loads it.. so the math equations are abit off.
                                                                              i've used _lockroot, but i dont think that applies to math??

                                                                              The only thing thats keeping me alive is being able to easily change values of certain variables... ( I love this Ultra big function =P )

                                                                              Right now, it's like playing " mix 'n' Match " cuz i still dont know enough to alter the code...only change variables =)
                                                                              • 37. Re: how to setup a Desaturation Tween
                                                                                kglad Adobe Community Professional & MVP
                                                                                that's not a problem with the code. that's the way it is with all bitmap graphics. as you scale them up, they look pixelated.

                                                                                the solution is to start with an image that looks good at its largest displayed size. then when it's downsized, it will still look good.

                                                                                using this._lockroot=true, applies to _root references but not to anything else.

                                                                                for positioning, sizing and angling the basic carousel just use the centreX, centreY, radiusX and radiusY variables.
                                                                                • 38. Re: how to setup a Desaturation Tween
                                                                                  Sketchsta Level 1
                                                                                  ohh yeah i didnt mean there was something in your code that was making the pics pixelated.
                                                                                  I was referring to your code in the sense that it resizes the movieClip where i add pictures, and that ( the scaling ) is making them pixelated.
                                                                                  Which is why i said i might just pre-set the width and height of the attached clips, and make thumbs the same size.

                                                                                  and yeah, for positioning and sizing, thats what i mean when i said its like playing Mix 'n' Match. I keep changing variables everywhere until i got it right =P

                                                                                  i think im almost ready to try and import some pics with XML.
                                                                                  i'll upload it for you to see if you want when im done.

                                                                                  I'm looking for a Topic that was on here a while ago, about setting transitions for dynamically loaded pics.. I dont supose you remember seeing it? =)
                                                                                  • 39. Re: how to setup a Desaturation Tween
                                                                                    kglad Adobe Community Professional & MVP
                                                                                    no, i don't remember. but i can tell you the most common reason for transition failures when loading pics: transitions should NOT start until loading is complete. ie, you'll need preloader code or the onLoadInit() method of the moviecliploader class listener.
                                                                                    1 2 Previous Next