1 Reply Latest reply on Mar 10, 2010 3:48 PM by jsd99

    Actionscript component questions

    jsd99 Level 3

      I am creating a custom component in ActionScript.  I'm extending UIComponent for this.  The component will be a triangular volume control with spoked lines.  I'm encountering some bizarre behavior though.

       

      In the updateDisplayList, I started off by just drawing a rectangle around the component.

       

      override protected function updateDisplayList(w:Number, h:Number):void {
        super.updateDisplayList(w,h);
        var g:Graphics = this.graphics;
        g.clear();
        g.moveTo(0, 0);
        g.lineStyle(1, 0xFF0000, 1);
        g.drawRect(0, 0, w, h);

      }

       

      I was surprised to see that this drew a box outside of the component's boundaries.  In my MXML I defined it as x=0, y=0, width=100, height=24.  The actual rectangle comes out at x=100, y=12.

       

      The MXML is:

       

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
          <local:VolSlider width="100" height="24" x="0" y="0"/>

      </mx:Application>

       

      Well, fine, I can compensate by moving the drawing coordinates, so I did.

       

      x = 0; y = 13; h=12;
      while (x < w) {
          if (x < xpos) {
                g.lineStyle(1, 0x00FF00, 1);
          }
          else {
                g.lineStyle(1, 0x000000, 1);
          }
          g.moveTo(x-w, y);
          g.lineTo(x-w, h);
          x+=2; h--;
      }

       

      This draws the spoked lines I wanted in the right place.  Now I want to be able to detect mouseover and mousedown events.  However, it only actually fires the event if I click on one of the lines drawn with g.lineTo.  I want it to be able to detect a click anywhere within the component's coordinate space, but I don't want to paint the background.  How do I do this?

        • 1. Re: Actionscript component questions
          jsd99 Level 3

          I figured out part of my problem: I was modifying the x & y properties of the component, not local variables.  Whoops!  Renamed the variables and now everything draws in the right place.  The second part still stands though - how do I get the component to respond to mouse events over its entire surface, not just the parts where there is actual Graphics drawing?