actionscript-3 - フレックスモバイルで画像の上に画像をドラッグして動的に配置する

Question

モバイルアプリケーション用に Flash ビルダー 4.6 を使用しています。コンテナ内の別の画像の上に画像をドラッグする必要があり、別のビューから値を取得して、最初にドラッグ可能な画像を動的な位置に配置する必要があります。Flex でのモバイル アプリケーション開発は初めてです。チュートリアルや例を教えてください。

Answer 1

ここから始めましょう... ドラッグ可能な赤い円

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>