3 Replies Latest reply on Dec 29, 2010 6:44 AM by kglad

    Tooltip movieclip wierdness

    Desprez10 Level 1

      So I've been trying to add tooltip functionality, but I'm getting some strange behavior. e.g. duplicate clips appearing, clip not loading completely, clip not fading in correctly.

       

      I've been able to make some ugly hacks to get around the problems, for the most part. But I want to clean it up to get it working the way it should.

      Also, I'm not that proficient at actionscript yet, so there is a good chance that I've just made some kind of fundamental error. Hopefully an easy fix.

       

      Goal:

      Tooltip box that quickly fades in after a short delay. Must resize to accomodate varying number of lines and line lenghts.

       

      Structure:

      The tooltip movieclip holds three other clips in this layer order:

      1) clip with a texbox

      2) clip with the yellow box background

      3) clip with a black box for the border (this box is 2 pixels larger than  the box background, effectively leaving a 1 pixel border.)

       

      These clips exsist transparent on a timeline for about a half second, then start to fade in to full opacity by the last frame.

       

      So, the button code consists of assigning some text to a variable, then calling a function to make the tooltip visible via rollOver, and a hide function on rollOut. The idea is:

       

      rollOver

      1) use startDrag to place the clip by the mouse

      2) Assign the text to the text box

      3) Resize the background and border to match the size of the current text

      4) Make the tooltip clip _visible = true

      5) Play the tooltip clip, causing the delay and then fade in. (stop at last frame)

       

      rollOut

      1) make tooltip clip _visible = false

      2) gotoAndStop(1); (reset clip)

       

      Now for the problems:

      1) Improper (loading?)

      Upon opening the flash file, If I do anything that causes the tooltip move to stop playing, or if the showTooltip() function get called before that playback is done, the clip will no longer play. And it will be stuck at whatever frame it was on at the time of interrupt everytime the tooltip is shown thereafter.

       

      2) Duplicate clips

      If my main timeline has more than one frame, and extra instance of the tooltip appears from 'somewhere' - which is odd because there is only one tooltip movieclip and it's there from the begining.

       

      3) Fade not working

      The setting of the box size seems to be somehow interfering with the alpha of the parent clip. I've had to resort to using _visible on the tooltip timeline to control the delayed visibility of the box. (Removal of the box sizing causes the clip to fade properly.)

       

      Relevant code:

       

      Main timeline

       

      startDrag("_root.tooltip", true);
      tooltip._visible = false;

       

       

      Tooltip clip

       

      onClipEvent(load) {
           function showTooltip() {
               this.tooltip_text.textbox.text = _root.tooltiptext; //inset the text to be diplayed

               //find the sizes to make the background and border
               boxwidth = this.tooltip_text.textbox.textWidth + 8;
               boxheight = this.tooltip_text.textbox.textHeight + 3;
               this.tooltip_box._width = boxwidth;
               this.tooltip_box._height =  boxheight;
               this.tooltip_border._width = boxwidth + 2;
               this.tooltip_border._height = boxheight + 2;
               this._visible = true;
               this.gotoAndPlay(1);
           }


          function hideTooltip() {
               this.gotoAndStop(1);
               this._visible = false;
           }
      }


      onClipEvent(enterFrame) {
           this.swapDepths(100000);
      }

       

       

      Typical button

       

      on (rollOver) {
           _root.tooltiptext = "Short description here";
           _root.tooltip.showTooltip();
      }
      on (rollOut) {
           _root.tooltip.hideTooltip();
      }

       

      Message was edited by: Desprez10

        • 1. Re: Tooltip movieclip wierdness
          kglad Adobe Community Professional & MVP

          remove all code from objects.  attached to a frame that contains tooltip use:

           


          Main timeline

           

          //startDrag("_root.tooltip", true);

           

           

          Tooltip clip


               function showTooltip() {

          // this should be done using the autoSize property of tooltip.tooltip_text.textbox

                   //find the sizes to make the background and border

          /*
                   boxwidth = tooltip.tooltip_text.textbox.textWidth + 8;
                   boxheight = this.tooltip_text.textbox.textHeight + 3;
                   tooltip.tooltip_box._width = boxwidth;
                   tooltip.tooltip_box._height =  boxheight;
                   tooltip.tooltip_border._width = boxwidth + 2;
                   tooltip.tooltip_border._height = boxheight + 2;


          */         tooltip.gotoAndPlay(1);
               }


              function hideTooltip() {
                   tooltip.gotoAndStop(1);
               }



           

          Typical button (use movieclip buttons)

          yourtypicalbutton.onRollOver=function() {
          tooltip.tooltip_text.textbox.text
          = "Short description here";
          showTooltip();
          // depending on your movieclip button's reg point the code below may need to be adjusted
          tooltip._x = this._x;
          tooltip._y=this._y-this._height;

          }
          yourtypicalbutton.onRollOut {
          hideTooltip();
          }


          1 person found this helpful
          • 2. Re: Tooltip movieclip wierdness
            Desprez10 Level 1

            I made some changes, but some of the same problems still remain.

             

            I moved the code out of the tooltip object (is it bad form to place code there?) and tried it as you suggested.

            autoSize is certianly cleaner.

             

            You removed startDrag and swapDepths, but they don't seem to be contributing to the problems as I tried it with and without.

            1) I'm using startDrag to anchor the tooltip to a position relative to the mouse (so they can move the tooltip around as they move the mouse)

            2) I still need swapDepths to keep the tooltip on top of everything else. Though I did change it to use getNextHighestDepth()

             

            Changing the size of the backgrounds still interferes with the fade. Removing the size change still restores the fade.

            The text does not fade correctly no matter what I do.

            Still resorting to _visible = true on the timeline.

             

            However, I was able to fix the loading issue by replacing the initial code on the _parent timeline with:

             

            tooltip._visible = false;
            tooltip.gotoAndStop("end");

             

            I don't know why that fixed it. The only difference between that and hideTooltip() is placing the clip on the last fame as opposed to the first. But if I don't do it that way, the movie will get stuck if stopped/played too early.

             

            All in all, the tooltip works acceptably. Mainly it doesn't fade in, it just appears after a delay. However, it would be nice to know what the issue is that it doesn't work as intended. Presumably it's a conflict with alpha and text and size changes. Not sure about the playback/loading issue.

             

            Code as it stands now:

             

            _parent Timeline

            tooltip._visible = false;
            tooltip.gotoAndStop("end");

             

            Tooltip MC (Frame 1)

            function showTooltip() {
                startDrag("_parent.tooltip", true);
                tooltip_text.textbox.autoSize = true;
                boxwidth = tooltip_text.textbox._width;
                boxheight = tooltip_text.textbox._height;
                tooltip_background._width = boxwidth;
                tooltip_background._height = boxheight;
                tooltip_border._width = boxwidth + 2;
                tooltip_border._height = boxheight + 2;
                this.swapDepths(getNextHighestDepth());
                gotoAndPlay(1);
            }

             

            function hideTooltip() {
                this._visible = false;
                gotoAndStop(1);
            }

             

                 (Frame 15)

            this._visible = true;

             

                (Frame 20 "end")

            stop();

             

            MC Button

            on (rollOver) {
                _parent.tooltip.tooltip_text.textbox.text = "Short description";
                _parent.tooltip.showTooltip();
            }
            on (rollOut) {
                _parent.tooltip.hideTooltip();
            }

            • 3. Re: Tooltip movieclip wierdness
              kglad Adobe Community Professional & MVP

              make sure your font is embedded.


              1 person found this helpful