2 Replies Latest reply on Oct 30, 2008 6:28 AM by Gregory Lafrance

    Action Script

    simina_maria
      Hi everyone,

      I have a canvas which contains a button and when i press the button i want to draw a rectangle with 2 circles inside. I am using action script and for some reason it doesnt work. :(
      anyone has any ideas... pls?

      the code is here below:


      <mx:Script>
      [Bindable]
      public function drawTraffic()
      {
      // Draw the rectangle background for the traffic light.
      box.graphics.lineStyle();
      box.graphics.beginFill(0xFEFE78);
      box.graphics.drawRect(100, 50, 90, 200);
      box.graphics.endFill();

      // Draw the 3 circles for the three lights.
      stopLight.graphics.lineStyle();
      stopLight.graphics.beginFill(0xFF0000);
      stopLight.graphics.drawCircle(145,90,25);
      stopLight.graphics.endFill();

      cautionLight.graphics.lineStyle();
      cautionLight.graphics.beginFill(0xFF9900);
      cautionLight.graphics.drawCircle(145,150,25);
      cautionLight.graphics.endFill();

      goLight.graphics.lineStyle();
      goLight.graphics.beginFill(0x00CC00);
      goLight.graphics.drawCircle(145,210,25);
      goLight.graphics.endFill();

      // Apply a gradient bevel to the traffic light rectangle.
      box.filters = [gradientBevel];

      // Create the inner shadow (for lights when off) and glow
      // (for lights when on).

      // Set the starting state of the lights (green on, red/yellow off).
      stopLight.filters = [innerShadow];
      cautionLight.filters = [innerShadow];
      goLight.filters = [greenGlow];

      // Add the graphics to the display list.
      vbox.addChild(box);
      vbox.addChild(stopLight);
      vbox.addChild(cautionLight);
      vbox.addChild(goLight);
      }
      ]]>
      </mx:Script>

      <mx:Canvas width="100%" height="100%">

      <mx:VBox id="vbox" horizontalAlign="center" verticalAlign="top" width="100%" height="100%">
      <mx:Button label="draw" click="drawTraffic()" borderColor="#1392EC" fillAlphas="[1.0, 1.0]" fillColors="[#B9A5F9, #B9A5F9]"/>
      </mx:VBox>

      </mx:Canvas>
      </mx:Application>
        • 1. Re: Action Script
          m_hartnett Level 3
          I dont see the declaration for each object in your code here such as var stopLight : Shape = new Shape(); Perhaps it was left out.

          However if you are working in MXML then you need to declare all your objects as UIComponents like this.

          var box:UIComponent = new UIComponent();
          box.graphics.lineStyle();
          box.graphics.beginFill(0xFEFE78);
          box.graphics.drawRect(100, 50, 90, 200);
          box.graphics.endFill();

          I also dont see the variable declarations for any of your filters. Here is a quick cleaned up version of your code. I commented out the filter lines.

          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">



          <mx:Script>
          <![CDATA[
          import mx.core.UIComponent;
          public function drawTraffic():void {
          // Draw the rectangle background for the traffic light.
          var box:UIComponent = new UIComponent();
          box.graphics.lineStyle();
          box.graphics.beginFill(0xFEFE78);
          box.graphics.drawRect(100, 50, 90, 200);
          box.graphics.endFill();

          // Draw the 3 circles for the three lights.
          var stopLight:UIComponent = new UIComponent();
          stopLight.graphics.lineStyle();
          stopLight.graphics.beginFill(0xFF0000);
          stopLight.graphics.drawCircle(145,90,25);
          stopLight.graphics.endFill();

          var cautionLight:UIComponent = new UIComponent();
          cautionLight.graphics.lineStyle();
          cautionLight.graphics.beginFill(0xFF9900);
          cautionLight.graphics.drawCircle(145,150,25);
          cautionLight.graphics.endFill();

          var goLight:UIComponent = new UIComponent();
          goLight.graphics.lineStyle();
          goLight.graphics.beginFill(0x00CC00);
          goLight.graphics.drawCircle(145,210,25);
          goLight.graphics.endFill();

          // Apply a gradient bevel to the traffic light rectangle.
          //box.filters = [gradientBevel];

          // Create the inner shadow (for lights when off) and glow
          // (for lights when on).

          // Set the starting state of the lights (green on, red/yellow off).
          //stopLight.filters = [innerShadow];
          //cautionLight.filters = [innerShadow];
          //goLight.filters = [greenGlow];

          // Add the graphics to the display list.
          vbox.addChild(box );
          vbox.addChild(stopLight);
          vbox.addChild(cautionLight);
          vbox.addChild(goLight);




          }
          ]]>
          </mx:Script>

          <mx:Canvas width="100%" height="100%">

          <mx:VBox id="vbox" horizontalAlign="center" verticalAlign="top" width="100%" height="100%">
          <mx:Button label="draw" click="drawTraffic()" borderColor="#1392EC" fillAlphas="[1.0, 1.0]" fillColors="[#B9A5F9, #B9A5F9]"/>
          </mx:VBox>

          </mx:Canvas>
          </mx:Application>


          • 2. Re: Action Script
            Gregory Lafrance Level 6
            You can also wrap Sprites and Shapes in a UIComponent.

            var sp:Sprite = new Sprite();
            ... do your graphical operations on the Sprite
            var uic:UIComponent = new UIComponent();
            uic.addChild(sp);
            this.addChild(uic);