15 Replies Latest reply on Dec 14, 2007 1:05 PM by crazyjoemilan

    random fading in/out

      I am trying to create a grid of hexagons that randomly fade in and out at different speeds to create a "twinkling" effect. Ideally, I would be able to set a a random delay between when a mc is fully faded in or out and when it starts fading back in the other direction. This is the code I have so far. All of my mc's seem to catch up to one another and I think it is because the clearInterval is effecting all of the hexagons. Thanks for the help.

      var hex:Array = new Array(hex1, hex2, hex3, hex4, hex5, hex6);

      function fadein():Void {
      for (i=0;i<hex.length;i++){
      hex ._alpha++;
      }
      }
      function fadeout():Void {
      for (i=0;i<hex.length;i++){
      hex
      ._alpha--;
      }
      }

      var fadeinInterval:Number = setInterval(fadein, (randRange(5,30), 50));

      this.onEnterFrame = function() {
      for (i=0;i<hex.length;i++){
      if (hex ._alpha > 95) {
      clearInterval(fadeinInterval);
      var fadeoutInterval:Number = setInterval(fadeout, (randRange(5,30), 50));
      updateAfterEvent();
      } else if (hex
      ._alpha < 5) {
      clearInterval(fadeoutInterval);
      setInterval(fadein, (randRange(5,30), 50));
      updateAfterEvent();
      }
      }
      updateAfterEvent();
      };

      function randRange(min:Number, max:Number)
      {
      var randomNum:Number = Math.random() * (max - min) + min;
      return randomNum;
      }
        • 1. Re: random fading in/out
          crazyjoemilan Level 2
          use the Tween class (kirupa.com has good documentation) to actually control the fades. That will save you a lot of trouble.
          • 2. Re: random fading in/out
            Thank you. I'm much closer to achieving the effect I want. I feel like the hexagons still function as a group though even though I am getting some random effect. They fade to random alphas with random seconds, but they are all either fading in or fading out at the same time. My code is:

            import mx.transitions.Tween;
            import mx.transitions.easing.*;

            var hex:Array = new Array(hex1, hex2, hex3, hex4, hex5, hex6, hex7, hex8, hex9, hex10, hex11, hex12, hex13, hex14, hex15, hex16, hex17, hex18, hex19, hex20, hex21, hex22, hex23, hex24, hex25, hex26, hex27, hex28, hex29, hex30);


            function fadein():Void{
            for (i=0;i<hex.length;i++){
            new Tween(hex , "_alpha", Strong.easeOut, hex._alpha,randRange(60,100),randRange(.5,5), true);
            }
            }

            function fadeout():Void{
            for (i=0;i<hex.length;i++){
            new Tween(hex , "_alpha", Strong.easeOut, hex._alpha,randRange(0,30),randRange(.5,5), true);
            }
            }


            var fadeininterval:Number = setInterval(fadein, randRange(1500,4000));
            var fadeoutinterval:Number = setInterval(fadeout, randRange(1500,4000));




            function randRange(min:Number, max:Number)
            {
            var randomNum:Number = Math.random() * (max - min) + min;
            return randomNum;
            }
            • 3. Re: random fading in/out
              crazyjoemilan Level 2
              instead of just calling a random range, call the fadein function with a random interval with -

              setTimeout();

              its just like setInterval, except it will only go once - so you don't have to clear it. You can just call it.
              • 4. Re: random fading in/out
                Hmm. I don't quite follow your suggestion. If I use setTimeout() to call the fadein function, then the fadein function will only be called once after a random delay. I used setInterval because I want the shapes to continuosly fade in and out. This is my code:


                function randRange(min:Number, max:Number)
                {
                var randomNum:Number = Math.random() * (max - min) + min;
                return randomNum;
                }
                • 5. Re: random fading in/out
                  crazyjoemilan Level 2
                  What I'm thinking is this -

                  //psuedoCode//
                  1) setTimeout fadein();
                  2) on fadein() motionFinished, call setTimeout fadeout();
                  3) on fadeout() motionFinished, call setTimeout fadein();
                  ////////////////////////////

                  That way your fades are getting random numbers each time, procedurally. You'll have to port that over from calling one to calling a loop.

                  Does that make more sense?

                  HmcH / Joe
                  1 person found this helpful
                  • 6. Re: random fading in/out
                    Getting closer! I am starting to get a nice effect, but my problem is that all of the hexes in the array are getting affected every time the fadein() or fadeout() function is called. I think what I would like to do is select a random range (number) of hexes to fade in/out then use that number to select the hexes from the array that will fade. So for example, on one fadein()...hexes (1, 3, 4, 5, 11, 16, 23) might fade in then on fadeout() maybe only hexes (2, 3, 12,16, 17, 18, 26) are effected. I can't wrap my mind around how to do this. What I was originally going for was so that when one hex finished it's fade in to a random alpha, it would pause for a random time then fade out to a random alpha and then when it was finished fading out, it would pause for a random time, then fade back in. I wanted each hex to have a mind of it's own, but all my hexes function too much as a group now. I was hoping that some hexes would be fading in as others were fading out instead of all fading in/out together. I am getting a similar effect because the alpha's are random.

                    Thanks for the help on this!
                    • 7. Re: random fading in/out
                      Okay, I'm sort of answering my own question here. I searched the forums and found the shuffle() function. I am calling the shuffle function after each fade and using a random generated "i" value in my loop to decide how many hexes to fade. This code is now generating the patterns I was after. The only problem left is that the hexes still fade together. It would be ideal if some were fading in, while others were fading out. I appreciate all the help so far!!! Thanks!
                      • 8. Re: random fading in/out
                        crazyjoemilan Level 2
                        the way to get them to fade individually is to pull them out of the for loop. (although you'll need the for loop once to trigger everything).

                        The real way to do this is to make a class called TwinkleHex, and attribute the behavior to the individual object, that way it will go on its own path of randomness. So move your fadein() fadeout() randRange() code to a class, and have your class named in the linkage with the object on the stage.

                        Let me know which way you'd like to try.
                        • 9. Re: random fading in/out
                          I'd like to try creating a custom class....but I've never done this before. I created an external class file called twinkleHex (which I'm sure is wrong) and left some code in my main flash file (which I'm sure is also wrong) When I move the function definitions to the class file i get errors saying you can't use setTimeout in a class definition. And I'm getting an error in my main flash file to in the for statement, but I don't see the error. There is also an error in the syntax for creating new twinkleHex objects. I'm lost. It would be cool to learn how to do this the right way though!
                          • 10. Re: random fading in/out
                            crazyjoemilan Level 2
                            in a class, you can define vars and functions at the class level, but you can't call a function. Also, setTimeout has some wacky issues with classes, (fixable) but we'll get to that in a moment.

                            //TwinkleHex.as <-- most classes start with a capital letter.

                            import mx.transitions.Tween;
                            import mx.transitions.easing.*;

                            class TwinkleHex extends MovieClip {
                            var this_is_where_var_definitions_go:Number;

                            function TwinkleHex() {
                            //this is what will be called when a TwinkleHex object is created. It will be called once.

                            setTimeout(this, "fadein", randRange(1, 500));
                            //i think this is the syntax, but I might be wrong, look it up to check.
                            }

                            function fadeout() {
                            //kill the for loop, you're creating 1 tween for 1 object.
                            }
                            function fadein() {
                            //same - kill the loop
                            }
                            function randrange() {
                            //this function is great.
                            }
                            }
                            • 11. Re: random fading in/out
                              crazyjoemilan Level 2
                              //main timeline

                              var hex:Array = new Array(hex1, hex2, hex3, hex4, hex5, hex6, hex7, hex8, hex9, hex10, hex11, hex12, hex13, hex14, hex15, hex16, hex17, hex18, hex19, hex20, hex21, hex22, hex23, hex24, hex25, hex26, hex27, hex28, hex29, hex30);
                              for (i=0; i<hex.length; i++) {
                              var hex :twinkleHex = new twinkleHex();
                              }

                              Now here's the thing - you don't really need that array listing, because its easily replicated. If we're coding the TwinkleHexes to the stage, we'll use attachMovie - or we can quick and dirty it - and just toss em up the stage.

                              Click the Library panel, and select your hex object that should be the class. Right click it and go to "linkage." your class name is "TwinkleHex" (if its TwinkleHex.as)

                              If you toss them on the stage, you'll need no actionscript on the main timeline for now.
                              1 person found this helpful
                              • 12. Re: random fading in/out
                                Thanks again for the help. My class script and code on the maintimeline is attached. Neither of my scripts is returning any errors, but nothing is twinkling. I think I may be referencing the movieclip incorrectly in the tween script...I'm using:

                                new Tween(hex, "_alpha", Strong.easeOut, hex._alpha, randRange(50, 100), randRange(1, 3), true);

                                I think "hex" and "hex._alpha" may be wrong.
                                • 13. Re: random fading in/out
                                  crazyjoemilan Level 2
                                  var hex:TwinkleHex = new TwinkleHex();

                                  instead of calling your loop like the above- just update the linkage in your library to reference the class and layout the objects on the timeline. OR - use attatchMovie() and control the placement. For starters though - update the linkage, and place a mess of them on the stage.
                                  1 person found this helpful
                                  • 14. Re: random fading in/out
                                    I've tried using the TwinkleHex class both ways. I tried using the for loop with my array and I have also updated the linkage on the symbol. Nothing is happening. I currently have a movie clip on the main timeline that contains about 30 hexes each with instance names of hex1, hex2, etc... Each hex is a symbol that has the AS 2.0 class linkage of "TwinkleHex". Have you tried using the class or been successful using the attached code? Thanks for the help.
                                    • 15. random fading in/out
                                      crazyjoemilan Level 2
                                      I haven't directly tried your code- no. But you can run tracers in the class call function to make sure its getting called, then troubleshoot whats wrong in the code if it traces, but still doesn't work. Your for loop will do nothing on the main timeline the way its set.
                                      Try this though...