7 Replies Latest reply on Dec 2, 2010 7:38 AM by kglad

    Fadeout of movie clip when exiting frame

    Napo Monasterio Level 1

      Hi folks, I know this sounds like a simple question, but I'm kinda stumped here.

       

      I've got a timeline of events going on with about a dozen frames and about a dozen buttons. Clicking on each button will take you to a different frame. Simple enough. I have no problem with fading the specific frames in (I make the whole content of the frame a movie clip, then tween the alpha programatically as soon as you enter that frame). The issue I have is fading it out, so when you click on another button, that content on the current frame fades out and then you jump to a separate labeled frame, where the new content fades in).

       

      Does that make sense? I don't want to make tweens manually, as I'd like to keep the timeline as clean as possible.

       

      Should I try the EXIT_FRAME function?

       

      Thanks in advance!

        • 1. Re: Fadeout of movie clip when exiting frame
          kglad Adobe Community Professional & MVP

          when a button is clicked, assign the nextframe value in a variable instead of immediately applying a goto method.  start a tween to fade out whatever you want to fade-out and use a motionfinish event listener to call a function that executes that goto and uses that nextframe value.

          1 person found this helpful
          • 2. Re: Fadeout of movie clip when exiting frame
            Napo Monasterio Level 1

            Thanks for the reply! It makes a bit of sense, but I'm still trying to figure it out.

             

            Now what I need to create is a string. (Sorry, I'm still relatively new to programming.

             

            OK, so I would do something like...

             

            stop();

             

            import fl.transitions.Tween;

            import fl.transitions.TweenEvent;

            import fl.transitions.easing.*;

             

            var myButtons:String = new String();

             

            myButtons(String) = "arkSt_btn, msu_btn";

             

            var arkStTween:Tween = new Tween(arkSt_mc, "alpha", Regular.easeOut, 0, 1, 1, true);

             

            myButtons(String).addEventListener(MouseEvent.CLICK, fadeOutArkSt);

             

            function fadeOutArkSt(evt:MouseEvent):void {

             

            var arkStTweenOut:Tween = new Tween(arkSt_mc, "alpha", Regular.easeOut, 1, 0, 1, true);

            }

             

            addEventListener(Tween.MOTION_FINISH, gotoWhateverFrame);

             

            ....

             

            -- Then here I'd call up the gotoAndStop function.

             

            Question, though: I'm having issues creating the string. I get all sorts of "target of assignment must be a reference value" sort of errors.

             

            So, basically, what am I supposed to be calling up on the first event listener? And did I even set up the string correctly in the first place?

             

            Thanks!

            • 3. Re: Fadeout of movie clip when exiting frame
              kglad Adobe Community Professional & MVP

              you would use something like:

               


               

              stop();

               

              import fl.transitions.Tween;

              import fl.transitions.TweenEvent;

              import fl.transitions.easing.*;

               


               

              var arkStTween:Tween = new Tween(arkSt_mc, "alpha", Regular.easeOut, 0, 1, 1, true);

               

              yourbutton1.addEventListener(MouseEvent.CLICK, yourbutton1F);

              yourbutton2.addEventListener(MouseEvent.CLICK, yourbutton2F);
              yourbutton3.addEventListener(MouseEvent.CLICK, yourbutton3F);
              yourbutton4.addEventListener(MouseEvent.CLICK, yourbutton4F);

              var arkStTweenOut:Tween

              var gotoFrame:String

               

              function yourbutton1F(e:Event):void{

              gotoFrame="yourbuttonlink1";

              fadeoutF();

              }

              function yourbutton2F(e:Event):void{

              gotoFrame="yourbuttonlink2";

              fadeoutF();

              }

              function yourbutton3F(e:Event):void{

              gotoFrame="yourbuttonlink3";

              fadeoutF();

              }

              function yourbutton4F(e:Event):void{

              gotoFrame="yourbuttonlink4";

              fadeoutF();

              }

               

               

              function fadeoutF(){

              arkStTweenOut = new Tween(arkSt_mc, "alpha", Regular.easeOut, 1, 0, 1, true);

              arkStTweenOut.addEventListener(TweenEvent.MOTION_FINISH, gotoWhateverFrame);

              }

               

               

               

              function gotoWhateverFrame(e:TweenEvent):void{

              gotoAndStop(gotoFrame);

              }

               


               


              1 person found this helpful
              • 4. Re: Fadeout of movie clip when exiting frame
                Napo Monasterio Level 1

                Nice! This works great... once.

                 

                Basically, I click on the any button, and it will go to another frame. But then, I click on another button, and I get all sorts of null-reference errors — presumably because I'm on another frame and it's trying to call up that old frame/movie-clip.

                 

                Do I need to create functions on each frame and rename each function separately? I'm trying to figure out if there's a way to do so programatically (maybe via a variable or a string?)

                • 5. Re: Fadeout of movie clip when exiting frame
                  kglad Adobe Community Professional & MVP

                  if your buttons exist on all the frames, you should create one listener and listener function for each button.  assign another variable or use an object to associate each keyframe with the movieclip that needs to fade-out

                  • 6. Re: Fadeout of movie clip when exiting frame
                    Napo Monasterio Level 1

                    Yes, the buttons will exist on all frames.

                     

                    What do you mean about using an "object to associate each keyframe with the movieclip that needs to fade-out."

                     

                    Trying to figure out what I could use as a variable right now... I might try the target name. Any suggestions?

                     

                    Thanks so much for your continued help!

                    • 7. Re: Fadeout of movie clip when exiting frame
                      kglad Adobe Community Professional & MVP

                      you probably have different movieclips on different frames that you want to fade in and out so you could use an associate array (ie, object) or two arrays.

                       

                      in fact, you can probably replace all your code with the following.  just edit both arrays so they contain the correct frame labels (or numbers) and the correct movieclip names.

                       

                       

                      stop();
                      import fl.transitions.Tween;
                      import fl.transitions.TweenEvent;
                      import fl.transitions.easing.*;
                      import flash.display.MovieClip;
                      import flash.events.Event;

                       

                      var tl:MovieClip = this;
                      var frameLabelA:Array = ["targetframeofbutton1","targetframeofbutton2","targetframeof3rdbutton",etc];
                      var movieclipA:Array = ["movieclipnametofadeintargetframeofbutton1","mcnameintargetframeofbutton2",etc];

                       

                      for(var i:uint=0;i<frameLabelA.length;i++){
                          tl["yourbutton"+i].addEventListener(MouseEvent.CLICK,tl["yourbutton"+i+"F"]);
                      }

                       

                      var tweenIn:Tween;
                      var tweenOut:Tween;
                      var gotoFrameIndex:uint;
                      var prevFrameIndex:uint;
                      var disableGoTo:Boolean = false;

                       

                      function yourbutton1F(e:Event):void {
                          prevFrameIndex = gotoFrameIndex;
                          gotoFrameIndex=0;;
                          fadeoutF();
                      }
                      function yourbutton2F(e:Event):void {
                          prevFrameIndex = gotoFrameIndex;
                          gotoFrameIndex=1;
                          fadeoutF();
                      }
                      function yourbutton3F(e:Event):void {
                          prevFrameIndex = gotoFrameIndex;
                          gotoFrameIndex=2;
                          fadeoutF();
                      }
                      function yourbutton4F(e:Event):void {
                          prevFrameIndex = gotoFrameIndex;
                          gotoFrameIndex=3;
                          fadeoutF();
                      }
                      function fadeoutF() {
                          if(prevFrameIndex&&!disableGoTo){
                              disableGoTo = true;
                              tweenOut=new Tween(getChildByName(movieclipA[prevFrameIndex]),"alpha",Regular.easeOut,1,0,1,true);
                              tweenOut.addEventListener(TweenEvent.MOTION_FINISH, gotoWhateverFrame);
                          } else {
                              gotoWhateverFrame(null);
                          }
                      }

                       

                      function gotoWhateverFrame(e:TweenEvent):void{
                          disableGoTo = false;
                          stage.invalidate();
                          tl.addEventListener(Event.RENDER,fadeinF);
                          gotoAndStop(frameLabelA[gotoFrameIndex]);
                      }
                      function fadeinF(e:Event):void{
                          tweenIn=new Tween(getChildByName(movieclipA[gotoFrameIndex]),"alpha",Regular.easeOut,0,1,1,true);
                      }