Using an animated SWF as a drag and drop drag proxy.

You can specify a symbol within a SWF file, perhaps created in Flash CS4, as the drag proxy, as in the following example.

This example allows you to drag two Text controls to a Canvas to copy the text.

When dragging the "Smiley Face" Text control the drag proxy is symbol smily1 in swf file smily1.swf, and when dragging the "Smiley Animation" Text control the drag proxy is symbol smily2 in the same swf file.

smily2 is a symbol with the background color of the smiley face changing from yellow to orange and then back to yellow each second. The swf file smily1.swf was created in Flash CS4. Creating the symbols in Flash is not discussed in this tutorial, but you must ensure the "Export for ActionScript" checkbox is checked for the symbols in Flash when creating the SWF. The Flex Builder project accompanying this tutorial includes the SWF file.

<?xml version="1.0"?>

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

  backgroundColor="0xFFFFFF" verticalGap="10"

  viewSourceURL="srcview/CustomProxy2SRC.html">

  <mx:Script>

    <![CDATA[
import mx.collections.ArrayCollection;
      import mx.managers.DragManager;
      import mx.core.DragSource;
      import mx.events.DragEvent;
      import flash.events.MouseEvent;
      import mx.controls.Image;

      [Embed(source="assets/swf/smily1.swf",
symbol="smily1")]

      [Bindable] public var smileyImage:Class;     

      [Embed(source="assets/swf/smily1.swf",
symbol="smily2")]

      [Bindable] public var smileyAnimation:Class;     

      private function moveHandler(evt:MouseEvent):void{     

        var textData:String = evt.currentTarget.text;
        var dragInitiator:Text = Text(evt.currentTarget);
        var datasource:DragSource = new DragSource();
        datasource.addData(textData, "text");  

        var imageProxy:Image = new Image();
        imageProxy.source = (textData == "Smiley Face") ?
smileyImage : smileyAnimation;

        DragManager.doDrag(dragInitiator, datasource, evt,
imageProxy, -20, -20, 1);

      }

      private function dragEnterHandler(evt:DragEvent):void {

        if (evt.dragSource.hasFormat("text")){
           DragManager.acceptDragDrop(Canvas(evt.currentTarget));

        }

      }

      private function dragDropHandler(evt:DragEvent):void {

        var text:Text = new Text();
        text.setStyle("fontSize", 20);
        text.setStyle("fontWeight", "bold");
        text.text =
evt.dragSource.dataForFormat("text").toString();

        var globalPoint:Point = new Point(this.mouseX,
this.mouseY);

        var localPoint:Point =
Canvas(evt.currentTarget).globalToLocal(globalPoint);

        text.x = localPoint.x - 25;

        text.y = localPoint.y - 25;

        evt.currentTarget.addChild(text);

      }
]]>

  </mx:Script>

  <mx:HBox horizontalGap="100">

    <mx:Text text="Smiley Face" fontSize="20"
fontWeight="bold"

      mouseMove="moveHandler(event);" selectable="false"/>

    <mx:Text text="Smiley Animation" fontSize="20"
fontWeight="bold"

      mouseMove="moveHandler(event);" selectable="false"/>

  </mx:HBox>

  <mx:Canvas id="workarea" width="590" height="590"
borderStyle="solid" 
             backgroundColor="0xf59fb6"
dragEnter="dragEnterHandler(event);"

             dragDrop="dragDropHandler(event);"
borderColor="0xe22052"

             borderThickness="4"/>

</mx:Application>

The animated SWF is attached but you may have to unzip it and change the name of the file. It should be placed in the assets/swf directory inder the src directory for the project.

smily1.swf.zip