5 Replies Latest reply on Aug 6, 2009 3:59 PM by bendayan

    Problems with events in flex

    bendayan Level 1

      Hi there. I'm a AS2 and Flash CS3 guy. I started to learn AS3 and transfer to Flex 3. But I got a problem w/ Events in AS3. I'm adding a canvas component to the stage. On that canvas, I added 3 different events: mouse down, mouse move, and mouse up. When mouse move is fired, there is no way for me to get mouse up event fired, and viceversa, when mouse up is fired, there is no way to get the mouse move event fired. Is there any one to help this newbie with this particular problem? Any help will be very appreciated.

      Code:

       

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
      <mx:canvas id="myCanvas" x="50" y="50" width="500" height="500" click="event_1();" mouseMove="event_2();" mouseUp="event_3();">
      </mx:Canvas>

      <mx:Script>
      <![CDATA[
      import mx.controls.Alert;
      import flash.events.*;
      public function event_1():void
      { Alert.show("First event fired"); }
      public function event_2():void
      { Alert.show("Second event fired"); }
      public function event_3():void
      { Alert.show("third event fired); }
      </mx:Script>
      </mx:Application>

        • 1. Re: Problems with events in flex
          Gregory Lafrance Level 6

          I'm getting all three events firing appropriately.

           

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
          <mx:Canvas id="myCanvas" x="50" y="50" width="500" height="500"
          click="event_1();" mouseMove="event_2();" mouseUp="event_3();"
          backgroundColor="0xFF0000">
          </mx:Canvas>
          <mx:Script>
          <![CDATA[
          import mx.controls.Alert;
          import flash.events.*;

          public function event_1():void{
          Alert.show("First event fired");
          }

          public function event_2():void{ Alert.show("Second event fired"); }

          public function event_3():void{ Alert.show("third event fired"); }
          ]]>
          </mx:Script>
          </mx:Application>

          1 person found this helpful
          • 2. Re: Problems with events in flex
            bendayan Level 1

            Hi Greg. Thank you for your replay. The question is I didnt want to bother you with the complete code and post it with the minimal expression. But here I give you the full code w/corresponding package. What I'm trying to do is drawing a line over an empty canvas (I got it very easily in Flash AS2)

             

            Code:

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="
            http://www.adobe.com/2006/mxml" layout="absolute" initialize="addChild(p1)">
            <mx:Canvas id="wrapper" x="10" y="10" width="600" height="600">
              <mx:Canvas x="50" y="50" width="500" height="500" id="imageView" backgroundColor="#F8F3F3" click="startDraw();" mouseMove="drawLine();" mouseUp="noDrawLine();" >
              </mx:Canvas>
            </mx:Canvas>
            <mx:Button x="263" y="618" label="Draw Line" click="prepToDraw();"/>
            <mx:Script>
            <![CDATA[
              import com.myDomain.Lines.Main;
               import mx.graphics.*;
               import mx.binding.utils.BindingUtils;
               import flash.events.IOErrorEvent;
               import flash.events.Event;
               import flash.display.*;
               import mx.controls.Alert;
              
               import com.myDomain.Lines.Main;
               public var p1:Main = new Main();
              
               public var pre:Number = 0;
              
               public function prepToDraw():void
               {
                pre = 1;
               }
              
               public function startDraw():void
               {
                if(pre == 1)
                {
                p1.graphics.clear();
                var newColor:int = 0xFF00FF;
                var iniX:Number = mouseX;
                var iniY:Number = mouseY;
                var lineWidth:Number = 10;
                p1.graphics.lineStyle(lineWidth, newColor);
                p1.graphics.moveTo(iniX, iniY);
                }
               }
               
               public function drawLine():void
               {
                if(pre == 1)
                {
                 p1.graphics.lineTo(mouseX, mouseY);
                }
               }
               public function noDrawLine():void
               {
                if(pre == 1)
                {
                 Alert.show("noLine");
                }
               }
              
              
            ]]>
            </mx:Script>
            </mx:Application>

             

            The package:

             

            package com.myDomain.Lines
            {
            import flash.display.Shape;
            import flash.display.Stage;
            import flash.events.MouseEvent;
            import mx.core.UIComponent;

            public class Main extends UIComponent
            {
             
              public function Main()
              {
               super();
              }
             
              public var p1:Shape = new Shape();
            }
            }

             

            If you go apply the code, you will see: 1) The first event to fire is mouseUp, then you eill start drawing the line, but again, you will not be able to stop this event with mouseUp. If you can help me, I will be very appreciated. Thanks.

             

            • 3. Re: Problems with events in flex
              Kenny Yates Level 2

              The problem is that your event listeners were not set up correctly.

              Your "p1" needed to listen for the "mouseUp" event since it was handling the events at that moment.

               

              Here is your modified and test code, as long as the mouse is down on the Canvas it will draw the moment you "mouseUp" the drawing stops.

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
              <mx:Script>
              <![CDATA[
                import com.myDomain.Lines.Main;
                 import mx.graphics.*;
                 import mx.binding.utils.BindingUtils;
                 import flash.events.IOErrorEvent;
                 import flash.events.Event;
                 import flash.display.*;
                 import mx.controls.Alert;
                 import com.myDomain.Lines.Main;
                
                 public var p1:Main;
                 public var pre:Number = 0;
                
                 public function initApp():void
                 {
                         p1 = new Main();
                         this.addChild(p1);
                        
                 }
               
                 public function prepToDraw():void
                 {
                  pre = 1;
                 }
               
                 public function startDraw(event:MouseEvent):void
                 {
                  if(pre == 1)
                  {
                      p1.graphics.clear();
                      var newColor:int = 0xFF00FF;
                      var iniX:Number = mouseX;
                      var iniY:Number = mouseY;
                      var lineWidth:Number = 10;
                      p1.graphics.lineStyle(lineWidth, newColor);
                      p1.graphics.moveTo(iniX, iniY);
                  }
                 
                  imageView.addEventListener(MouseEvent.MOUSE_MOVE, drawLine);
                  p1.addEventListener(MouseEvent.MOUSE_UP, stopDraw);
                 }
                
                 public function drawLine(event:MouseEvent):void
                 {
                  if(pre == 1)
                  {
                   p1.graphics.lineTo(mouseX, mouseY);
                  }
                 }
                 public function stopDraw(event:MouseEvent):void
                 {
                      imageView.removeEventListener(MouseEvent.MOUSE_MOVE, drawLine);
                 }
               
               
              ]]>
              </mx:Script>
              <mx:Canvas id="wrapper" x="10" y="10" width="600" height="600">
                <mx:Canvas x="50" y="50" width="500" height="500" id="imageView" backgroundColor="#F8F3F3"
                    mouseDown="{startDraw(event)}">
                </mx:Canvas>
              </mx:Canvas>
              <mx:Button x="263" y="618" label="Draw Line" click="prepToDraw();"/>
              </mx:Application>

               

              HTH,

              Kenny

              • 4. Re: Problems with events in flex
                Gregory Lafrance Level 6

                Don't know why you were missing mouseUp, but here is a workaround.

                 

                If this post answered your question or helped, please mark it as such.

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
                  layout="absolute" initialize="addChild(p1)">
                  <mx:Canvas id="wrapper" x="10" y="10" width="600" height="600">
                    <mx:Canvas x="50" y="50" width="500" height="500" id="imageView" 
                      backgroundColor="#F8F3F3" mouseDown="startDraw();" 
                      mouseMove="drawLine(event);">
                    </mx:Canvas>
                  </mx:Canvas>
                  <mx:Button x="263" y="618" label="Draw Line" click="prepToDraw();"/>
                  <mx:Script>
                    <![CDATA[
                      import com.myDomain.Lines.Main;
                      import mx.graphics.*;
                      import mx.binding.utils.BindingUtils;
                      import flash.events.IOErrorEvent;
                      import flash.events.Event;
                      import flash.display.*;
                      import mx.controls.Alert;   
                      import com.myDomain.Lines.Main;
                      public var p1:Main = new Main();   
                      public var pre:Number = 0;
                      public var lineDone:Boolean = false;
                         
                      public function prepToDraw():void{
                        pre = 1;
                      }
                   
                      public function startDraw():void{
                        if(pre == 1){
                          p1.graphics.clear();
                          var newColor:int = 0xFF00FF;
                          var iniX:Number = mouseX;
                          var iniY:Number = mouseY;
                          var lineWidth:Number = 10;
                          p1.graphics.lineStyle(lineWidth, newColor);
                          p1.graphics.moveTo(iniX, iniY);
                        }
                      }
                    
                      public function drawLine(evt:MouseEvent):void{
                        if(evt.buttonDown && pre == 1){
                          p1.graphics.lineTo(mouseX, mouseY);
                          lineDone = true;
                       }else if(evt.buttonDown && lineDone){
                          pre = 0;
                        }
                      }      
                    ]]>
                  </mx:Script>
                </mx:Application>
                
                1 person found this helpful
                • 5. Re: Problems with events in flex
                  bendayan Level 1

                  Thank you very much (to both, Kenny and Greg). Both answers always me to move forward in my project (I received the Kenny answer sooner). I think you guys are "Flex gurus". Hopefully, I will learn enough AS3 to meet you in heavens... By now, I see AS3 as a ocean of packages, classes, propperties and methods. Madrid.