Question

I’m using Flash builder 4.6 for mobile applications. I need to drag an image over another image in a container and I have to initially position the draggable image with dynamic positioning by getting values from another view. I’m new to mobile application developments in flex. guide me with some tutorials or examples.

Answer 1

Here to get you started… a draggable red circle

MyApp.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:comps="*">
    <comps:MyCircle width="100%" height="100%"/>
</s:Application>

MyCircle.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:UIComponent 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[
            import flash.filters.*;

            public static const SHADOW:Array = [ new DropShadowFilter(10, 80, 0x000000, 0.5, 32, 32, 1, 1, false, false, false) ];
            private var dX:Number, dY:Number;
            private var circle:Shape = new Shape();

            override protected function createChildren():void {
                super.createChildren();
                circle.graphics.beginFill(0xFF0000);
                circle.graphics.drawCircle(0, 0, 20);
                addChild(circle);
                addEventListener(MouseEvent.MOUSE_DOWN, handleDown);
            }

            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                circle.x = unscaledWidth / 2;
                circle.y = unscaledHeight / 2;
            }

            private function handleDown(event:MouseEvent):void {
                dX = circle.x - stage.mouseX;
                dY = circle.y - stage.mouseY;
                circle.scaleX = circle.scaleY = 1.5;
                circle.filters = SHADOW;
                stage.addEventListener(MouseEvent.MOUSE_MOVE, handleDrag);
                stage.addEventListener(MouseEvent.MOUSE_UP, handleUp);
            }

            private function handleDrag(event:MouseEvent):void {
                circle.x = stage.mouseX + dX;
                circle.y = stage.mouseY + dY;
                event.updateAfterEvent();
            }

            private function handleUp(event:MouseEvent):void {
                circle.filters = null;
                circle.scaleX = circle.scaleY = 1;
                stage.removeEventListener(MouseEvent.MOUSE_MOVE, handleDrag);
                stage.removeEventListener(MouseEvent.MOUSE_UP, handleUp);
            }
        ]]>
    </fx:Script>
</mx:UIComponent>