13 Replies Latest reply on Feb 15, 2010 9:32 AM by DishDev

    Drag Image

    DishDev

      Hi,

       

      I hope someone can help me here. Im just trying to create a small application that I can use to drag an image from one location on the stage to another without dropping it on another component. I have a new multi touch notebook and im trying to move these images so that I can manipulate them(zoom) so forth apart from each other. Is there a way to do this without dropping. Hope this makes sense. You help is greatly appreciated.

       

      Stephan

        • 1. Re: Drag Image
          choisington

          So you want to be able to drag a smaller version on the file onto a stage (like a canvas) and have it blow up in to a larger file for viewing?


          • 2. Re: Drag Image
            DishDev Level 1

            Kinda. I want to add an image to the stage via actionscript,(which I've done). But I want to move the image via drag to anywhere on screen. I just want it draggable.

            Make sense?

             

            Thanks for ur reply.

             

             

             

            -- Stephan Jenkins

            719.210.8369

            • 3. Re: Drag Image
              choisington Level 1

              yea. That is doable.

               

              Assign the dragDrop property on the stage something like this:

               

                    private function  doDragDrop():void

                             {

                                      img = new Image();
                                      img.source = (event.dragInitiator as Image).source;
                                      img.addEventListener(MouseEvent.MOUSE_DOWN, doDragStart);
                                      img.buttonMode = true;
                                      stage.addChild(img);

                             }

               

                   and you will need a dragStart to put on the image it self

               

              something like this:

               

              private function doDragStart(event:MouseEvent):void
                  {                               
                  var dragInitiator:Image = event.currentTarget as Image;
                  var dragSource:DragSource = new DragSource();
                  var dragProxy:Image = new Image();           
                  dragProxy.source = dragInitiator.source;
                  dragProxy.width = dragInitiator.width;
                  dragProxy.height = dragInitiator.height;
                  dragSource.addData(event.localX, "localX");
                  dragSource.addData(event.localY, "localY");
                  DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);           
                  }

               

              oh and a drag enter maybe on the stage too

               

              private function doDragEnter(event:DragEvent):void
                  {
                  DragManager.acceptDragDrop(UIComponent (event.target));
                 
                  }

               

               

              you will have to play with it but that should do the trick

              • 4. Re: Drag Image
                choisington Level 1

                basicly use the drag manager. Dont forget to import it.


                • 5. Re: Drag Image
                  DishDev Level 1

                  Awesome,

                   

                  Sorry I was out and about when you replied. Im having an issue and I think i might be doing something wrong here. Your code makes total sense, but im evidently messing up somewhere. Maybe you can peek at my source and let me know how much of an idiot I am =).

                   

                  Heres my code below:

                   

                  <?xml version="1.0" encoding="utf-8"?>

                  <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init(event);">

                  <mx:Script>

                  <![CDATA[

                  import mx.events.DragEvent;

                  import mx.core.IUIComponent;

                  import mx.controls.Image;

                  import mx.core.UIComponent;

                  import mx.core.DragSource;

                  import flash.events.TransformGestureEvent;

                  import flash.ui.Multitouch;

                  import mx.events.FlexEvent;

                  import mx.core.DragSource;

                  import mx.managers.DragManager;

                   

                  // The mouseMove event handler for the Image control

                  // initiates the drag-and-drop operation.

                   

                  private function  doDragDrop(event:DragEvent):void

                  {

                  var img = new Image();

                  img.source = (event.dragInitiator as Image).source;

                  img.addEventListener(MouseEvent.MOUSE_DOWN, doDragStart);

                  img.buttonMode = true;

                  stage.addChild(img);

                  }

                   

                  private function doDragStart(event:MouseEvent):void

                  {                               

                  var dragInitiator:Image = event.currentTarget as Image;

                  var dragSource:DragSource = new DragSource();

                  var dragProxy:Image = new Image();           

                  dragProxy.source = dragInitiator.source;

                  dragProxy.width = dragInitiator.width;

                  dragProxy.height = dragInitiator.height;

                  dragSource.addData(event.localX, "localX");

                  dragSource.addData(event.localY, "localY");

                  DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);           

                  }

                   

                  private function doDragEnter(event:DragEvent):void

                  {

                  DragManager.acceptDragDrop(UIComponent (event.target));

                  }

                   

                  public function init(event:FlexEvent):void

                  {

                  Multitouch.inputMode = MultitouchInputMode.GESTURE;

                  var ii:Image = new Image();

                  ii.source = "img/Lighthouse.jpg";

                  ii.y = 10;

                  ii.height = 100;

                  ii.width = 100;

                  ii.addEventListener(MouseEvent.MOUSE_DOWN, doDragStart);

                  this.addChild(ii);

                  }

                   

                  ]]>

                  </mx:Script>

                   

                  <mx:TextInput height="49" width="100%" id="eventLabel" text=""  x="11" y="486"/>

                  </mx:WindowedApplication>

                  • 6. Re: Drag Image
                    choisington Level 1

                    You dont need var img = new image.

                     

                    Also you dont need to import multiple UIComponets. One import statement works. But otherwise I think it all looks right. Make sure you are setting the dragDrop dragStart and dragEnter in the mxml.

                    • 7. Re: Drag Image
                      choisington Level 1

                      so u just need img = new Image();

                       

                      not var img = new Image();

                      • 8. Re: Drag Image
                        DishDev Level 1

                        Wierd,

                         

                        When i take out "var" it says Access of undefined property img.

                        Ill look at it some more.

                         

                        Thanks

                        • 9. Re: Drag Image
                          choisington Level 1

                          ohh duh ok I got it.

                           

                          do this:

                           

                          private function  doDragDrop(event:DragEvent):void

                          {

                          var img:Image;

                          img = new Image();

                          img.source = (event.dragInitiator as Image).source;

                          img.addEventListener(MouseEvent.MOUSE_DOWN, doDragStart);

                          img.buttonMode = true;

                          stage.addChild(img);

                          }

                          • 10. Re: Drag Image
                            DishDev Level 1

                            Codes not throwing any errors, but its not dragging. I get an hand cursor over the image and when i move the image its the circle with a line through it.

                            Can you see if it works for you? BTW your awesome, i really appreciate this. Some of the Gestures you wont need im guessing.

                             

                            <?xml version="1.0" encoding="utf-8"?>

                            <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init(event);">

                            <mx:Script>

                            <![CDATA[

                            import mx.events.DragEvent;

                            import mx.controls.Image;

                            import mx.core.UIComponent;

                            import mx.core.DragSource;

                            import flash.events.TransformGestureEvent;

                            import flash.ui.Multitouch;

                            import mx.events.FlexEvent;

                            import mx.core.DragSource;

                            import mx.managers.DragManager;

                             

                            // The mouseMove event handler for the Image control

                            // initiates the drag-and-drop operation.

                             

                            private function  doDragDrop(event:DragEvent):void

                            {

                            var img:Image;

                            img = new Image();

                            img.source = (event.dragInitiator as Image).source;

                            img.addEventListener(MouseEvent.MOUSE_DOWN, doDragStart);

                            img.buttonMode = true;

                            stage.addChild(img);

                            }

                             

                            private function doDragStart(event:MouseEvent):void

                            {                               

                            var dragInitiator:Image = event.currentTarget as Image;

                            var dragSource:DragSource = new DragSource();

                            var dragProxy:Image = new Image();           

                            dragProxy.source = dragInitiator.source;

                            dragProxy.width = dragInitiator.width;

                            dragProxy.height = dragInitiator.height;

                            dragSource.addData(event.localX, "localX");

                            dragSource.addData(event.localY, "localY");

                            DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);           

                            }

                             

                            private function doDragEnter(event:DragEvent):void

                            {

                            DragManager.acceptDragDrop(UIComponent (event.target));

                            }

                             

                            public function init(event:FlexEvent):void

                            {

                            Multitouch.inputMode = MultitouchInputMode.GESTURE;

                            var ii:Image = new Image();

                            ii.source = "img/Lighthouse.jpg";

                            ii.y = 10;

                            ii.addEventListener( TransformGestureEvent.GESTURE_ZOOM, gestureEventHandler);

                            ii.addEventListener( TransformGestureEvent.GESTURE_ROTATE, gestureEventHandler);

                            ii.addEventListener( TransformGestureEvent.GESTURE_PAN, gestureEventHandler);

                            ii.addEventListener( TransformGestureEvent.GESTURE_ZOOM, gestureEventHandler);

                            ii.addEventListener(MouseEvent.MOUSE_DOWN, doDragStart);

                            ii.addEventListener(MouseEvent.MOUSE_UP,doDragDrop);

                            ii.buttonMode = true;

                            this.addChild(ii);

                             

                             

                            var ii:Image = new Image();

                            ii.source = "img/Tulips.jpg";

                            ii.y = 200;

                            ii.addEventListener( TransformGestureEvent.GESTURE_ZOOM, gestureEventHandler);

                            ii.addEventListener( TransformGestureEvent.GESTURE_ROTATE, gestureEventHandler);

                            ii.addEventListener( TransformGestureEvent.GESTURE_PAN, gestureEventHandler);

                            ii.addEventListener( TransformGestureEvent.GESTURE_ZOOM, gestureEventHandler);

                            ii.addEventListener(MouseEvent.MOUSE_DOWN, doDragStart);

                            this.addChild(ii);

                            }

                             

                            protected function ccHandler(event:FlexEvent):void

                            {

                             

                            //this.addEventListener( TransformGestureEvent.GESTURE_ZOOM, gestureEventHandler);

                            //this.addEventListener( TransformGestureEvent.GESTURE_ROTATE, gestureEventHandler);

                            //this.addEventListener( TransformGestureEvent.GESTURE_PAN, gestureEventHandler);

                            //this.addEventListener( TransformGestureEvent.GESTURE_ZOOM, gestureEventHandler);

                            }

                            protected function gestureEventHandler (event:TransformGestureEvent):void

                            {

                            event.currentTarget.scaleX *= event.scaleX;

                            event.currentTarget.scaleY *= event.scaleY;

                            event.currentTarget.rotation += event.rotation;

                            trace(event.rotation);

                            eventLabel.text =  event.toString() + "\n" + eventLabel.text  ;

                            }

                            ]]>

                            </mx:Script>

                             

                            <mx:TextInput height="49" width="100%" id="eventLabel" text=""  x="11" y="486"/>

                            </mx:WindowedApplication>

                            • 11. Re: Drag Image
                              DishDev Level 1

                              BTW, im gonna mark this as the correct answer, wasnt holding out =);

                              • 12. Re: Drag Image
                                choisington Level 1

                                hmmm okay. I will look at it.


                                • 13. Re: Drag Image
                                  DishDev Level 1

                                  Any Luck?