1 Reply Latest reply on Dec 28, 2006 12:12 PM by shoehn2

    Need help creating custom button

    reid@umn.edu
      Hi folks,

      I am trying to create a custom button in AS3 using the Flex 2 SDK. It is pretty simple; I just want it to be a wedge shape that I can rotate to
      point in an arbitrary direction. My code is attached below, but I'm stuck on two issues:

      1. Making it behave as regular buttons do in terms of mouse-over and mouse-down behavior (i.e. draw it differently in these cases).

      2. Currently, when I rotate it, e.g.:

      <Arrow_Button height="12" width="12" rotation="45" click="Alert.show('hello');"/>

      it rotates around its 0,0 point (which is the upper left corner), causing it to swing out of the area where Flash "thinks" it is, messing up the layout.

      I've been wandering through the docs and Google all afternoon, but I haven't figured these things out. (I also asked this question on flashcoders and flexcoders but haven't received any useful responses.)

      I assume I'm doing something wrong, but I don't have a handle on where to look next. Any help or pointers to appropriate documentation would be very much appreciated.

      Many thanks,

      Reid


      // This class defines a button which looks like an arrow. It points up
      // and relies on the rotation property to be pointed in the right
      // direction.

      package {

      import flash.display.Graphics;
      import mx.core.UIComponent;

      public class Arrow_Button extends UIComponent
      {

      override protected function updateDisplayList(wd:Number,
      ht:Number) :void
      {
      var gr:Graphics = this.graphics;
      gr.clear();
      gr.lineStyle(1);
      gr.beginFill(0xff8800);
      gr.moveTo(0, ht);
      gr.lineTo(wd, ht);
      gr.lineTo(wd/2, 0);
      gr.lineTo(0, ht);
      }

      }
      }
        • 1. Re: Need help creating custom button
          shoehn2 Level 1
          Welcome to the club. I had the same issue. The way I did it is:

          // create the Picture or use an mx:Image
          myPic:Image = new Image();
          // add some userdefined stuff - haven't checked yet if I could use myPic.rotation
          myPic.data = new Object();
          // add property to remember last angle
          myPic.data.rotation = 0;

          rotatePainting(myPic, 90);

          private function rotatePainting(img:Image, angle:int): void
          {
          rotate.end();
          rotate.target = img;
          var currentAngle:int = img.data.rotation;
          rotate.angleFrom=currentAngle;
          rotate.angleTo = currentAngle+angle;
          rotate.play();
          img.data.rotation= rotate.angleTo;
          if (img.data.rotation >360)
          {
          img.data.rotation -= 360;
          }
          }

          It really shows the image turning as it is an effect. If you don't want the user to see the effect, you can set the image's visible-attribute to false and after turning to true.

          If you want see how its done, look into the source of "mx.effects.effectClasses.RotateInstance".

          hope it helps,
          Stefan