2 Replies Latest reply on May 23, 2009 5:53 AM by displav

    HELP PLZ!! Array Button Menu that fades in/out content with Tweener or Tween Class...!!!

    displav

      OK.
      So I've been trying the last couple of days to make 2 different codes i had into one...

       

      The first on is using the Tweener class and everytime that I press a button it fades out the loaded content of the previous selection, waits for it to finish and then loads the content of the button pressed. Everything works fine with this part.

       

      The second code is the on that is using an Array to dynamicaly rollover, rollout and keep selected the buttons.
      It was also changing the content of the mc that everything is loaded on but without this fancy fade in - fade out...!!

       

      So i think its time for some code now...:

       

      Here are 2 different approaches:

      This is the code that uses the onMotionFinished of the Tween Class:
      var groupinfo:Array = [ {mc:about, toload:"mcHome"},
           {mc:service, toload:"mcService"},
           {mc:contact, toload:"mcContact"}];
      
      var activebtn:MovieClip;
      
      var holder1:MovieClip = _root.attachMovie("mcHome", "mcMain", 10);
      holder1._x = 0;
      holder1._y = 110;
      
      function doClick() {
      
      
      //          \/THE PROBLEM IS FROM HERE\/
      
           if (this != activebtn){
                var mcTween:Tween = new Tween(mcMain, "_alpha", Strong.easeOut, 100, 0, 1, true);
                mcTween.onMotionFinished = function() {
                     _root.holder1.attachMovie(this.p, "mcMain", 1);
                     var mcTween2:Tween = new Tween(mcMain, "_alpha", Strong.easeOut, 0, 100, 10, true);
                }
      
      
      //          /\UNTIL HERE/\
      
      
           }
           
           var prevbtn:MovieClip = activebtn;
           activebtn = this;
           this.gotoAndStop(FADEINSTOP);
           prevbtn.onRollOut();
           
      }
      
      
      function init() {
         for (var element in groupinfo) {  
            // btn is a pointer to one of the nav buttons
            var btn:MovieClip = groupinfo[element].mc;       
            // have each button remember which library/mc it is supposed to load
            btn.p = groupinfo[element].toload;       
            // assign functions to each event
            btn.onRollOver = doRollOver;
            btn.onRollOut = doRollOut;
            btn.onRelease = doClick;
           }
      }
      
      init();
      

      And the Example:

      The onMotionTween code works ok with the tweening but doesn't change the movieclip.

       

       

       

      This is the code that uses the caurina Tweener Class with no onMotionFinished:
      var groupinfo:Array = [{mc:about, toload:"mcHome"},
                                  {mc:service, toload:"mcService"},
                                  {mc:contact, toload:"mcContact"}];
      
      var activebtn:MovieClip;
      
      var holder1:MovieClip = _root.attachMovie("mcHome", "mcMain", 10);
      holder1._x = 0;
      holder1._y = 110;
      
      function doClick() {
      
      //          \/PROBLEM FROM HERE\/
      
      
      
           if (this != activebtn) {
                Tweener.addTween(mcMain,{_alpha:0, time:1, transition:"easeOutQuart"});
                var holder2:MovieClip = _root.attachMovie(this.p, "mcMain2", 11);
                holder2._alpha = 0;
                holder2._x = 0;
                holder2._y = 110;
                Tweener.addTween(mcMain2,{_alpha:100, time:1, delay:1, transition:"easeOutQuart"});          
                mcMain = mcMain2;
           }
      
      //           /\TO HERE!!!/\
      
      
      
           var prevbtn:MovieClip = activebtn;
           activebtn = this;
           this.gotoAndStop(FADEINSTOP);
           prevbtn.onRollOut();
      }
      
      
      function init() {
           for (var element in groupinfo) {
                // btn is a pointer to one of the nav buttons
                var btn:MovieClip = groupinfo[element].mc;
                // have each button remember which library/mc it is supposed to load
                btn.p = groupinfo[element].toload;
                // assign functions to each event
                btn.onRollOver = doRollOver;
                btn.onRollOut = doRollOut;
                btn.onRelease = doClick;
           }
      }
      
      init();
      

      Other Example:

      The Tweener code works perfectly this first time but the second time removes the conent and does just the fade in.

       

       

       

       

      The code for the buton group i got it from                     here...

       

       

      Please could someone help me with this thing!!
      I think its a great piece of dynamic code if we can eventualy make it  work properly!!

       

      Thanksss!!!

       

      Shorten the code...  Left only the part that needs mod!!

        • 1. Re: HELP PLZ!! Array Button Menu that fades in/out content with Tweener or Tween Class...!!!
          clbeech Level 3

          i think you may have more success if you structure your code more like the following:

           

          var groupinfo:Array = [ {mc:about, toload:"mcHome"}, {mc:service, toload:"mcService"}, {mc:contact, toload:"mcContact"} ];

           

          var holder:MovieClip;

           

          function init() {
              holder = this.createEmptyMovieClip('holder', 10);
              holder.attachMovie("mcHome", "clip", 0);
              holder._x = 0;
              holder._y = 110;
             
              for(var i=0; i<groupinfo.length; i++) {
                  groupinfo[i].id = i;
                  groupinfo[i].mc.onRollOver = doRollOver;
                  groupinfo[i].mc.onRollOut = doRollOut;
                  groupinfo[i].mc.onRelease = doClick;
              }
          }
          init();

           

          function doClick() {
              var mcTween:Tween = new Tween(holder, "_alpha", Strong.easeOut, 100, 0, 1, true);
              mcTween.onMotionFinished = function() {
                  holder['clip'].removeMovieClip();
                  holder.attachMovie(groupinfo[this.id].toload, "clip", 0);
                  new Tween(holder, "_alpha", Strong.easeOut, 0, 100, 1, true);
              }
          }

          • 2. Re: HELP PLZ!! Array Button Menu that fades in/out content with Tweener or Tween Class...!!!
            displav Level 1

            clbeech, Thank you but doesnt do anything either....!!It is a  bit usefull but... !!

             

             

            The problem is that the code cant give the "this.p" to the movieclip...

             

             

            Here is the mess i've made with few changes from your part... and alot of treces to wich detected that the this.p is can't get in the onMotionFinished function...

             

            its only the doClick function:

            function doClick() {
                 
                 trace ("---------vars after click----------")
                 trace ("activebtnStart  "+  activebtn);
                 trace ("this.p  OutPre:  " + this.p);
            
                 if (this != activebtn){
                      trace ("mcMainAlphaBefore:  " + mcMain._alpha);
                      trace ("mcMainBefore:  " + mcMain);
                      var mcTween:Tween = new Tween(mcMain, "_alpha", Strong.easeOut, 100, 0, 1, true);
                      mcTween.onMotionFinished = function() {
                           holder["mcMain"].removeMovieClip();
                           
            //               trace ("mcMainStart:  " + mcMain);
            //               trace ("mcMain2Start:  " + mcMain2);
            //               trace ("mcMainAlphaStart:  " + mcMain._alpha);
            //               trace ("mcMain2AlphaStart:  " + mcMain2._alpha);
                           trace ("this:  " + this);
                           trace ("this.p  Pre:  " + this.p);
                           holder.attachMovie(btn.p, "mcMain", 1); 
                           holder.alpha = 0;
                           trace ("this.p  After:  " + this.p);
            //               mcMain = mcMain2;
                           new Tween(mcMain, "_alpha", Strong.easeOut, 0, 100, 10, true);
            //               mcMain._alpha = 100;
            //               trace ("mcMainEnd:  " + mcMain);
            //               trace ("mcMain2End:  " + mcMain2);
            //               trace ("mcMainAlphaEnd:  " + mcMain._alpha);
            //               trace ("mcMain2AlphaStart:  " + mcMain2._alpha);
                      }
                 }
                 
                 trace ("this.p  OutAfter:  " + this.p);
            
                 var prevbtn:MovieClip = activebtn;
                 activebtn = this;
                 this.gotoAndStop(FADEINSTOP);
                 prevbtn.onRollOut();
            
                 trace ("this.p  "+  this.p);
                 trace ("this  "+  this);
                 trace ("prevbtn  "+  prevbtn);
                 trace ("activebtn  "+  activebtn);     
            }
            
            

             

             

            Pfff.....

             

             

            I think its best to Attach the .fla!!
            Please have a look on it if you have anytime..!!

             

            Thanks for your interest..