It throws #2025 error when moving a image in as3/flex

Question

When i tried to run the code, it throws an error:

TypeError: Error #1034: Type Coercion failed: cannot convert mx.controls::Image@a9030b1 to mx.containers.Canvas.

When i just try to replace

var num1:int = Canvas(event.currentTarget).mouseX;

with

var num1:int = Image(event.currentTarget).mouseX;

it throws below error:

ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.

Below is the code,

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="carcan();">
<mx:Script>
    <![CDATA[

            import mx.containers.Canvas;
            import mx.controls.Image;

            private var images:Array;
            private var dragInitiator:Image = new Image();
            private const IMAGE_COUNT:uint = 5;
            private var img:Image;


            private var dragInitiator:Image = new Image();

            private var points:flash.geom.Point;
            private var offset_x:int;
            private var offset_y:int;
            private var canal:Canvas;
            private var doDrag:Boolean;

            [Embed(source='cards/2C.png')]
            private var Image0:Class;

            [Embed(source='cards/2D.png')]
            private var Image1:Class;

            [Embed(source='cards/2H.png')]
            private var Image2:Class;

            [Embed(source='cards/2S.png')]
            private var Image3:Class;

            [Embed(source='cards/3C.png')]
             private var Image4:Class;

             public function carcan():void
             {
                canal = new Canvas();
                canal.setStyle("backgroundColor","blue");
                canal.x=100;
                canal.y=50;
                canal.width=500;
                canal.height=400;
                this.addChild(canal);
                init();
             }

             public function init():void
             {
              images = new Array(IMAGE_COUNT);

                 for (var i:int = 0; i < IMAGE_COUNT; i++)
                    {
                         img= new Image();
                            images[i] = this["Image" + i];
                            trace(images[i]);

                    img.x=(i*30)+50;
                    img.source=images[i];
                    img.id="Image"+i;
                    canal.addChild(img);

                     img.addEventListener(MouseEvent.MOUSE_DOWN, md);
                    img.addEventListener(MouseEvent.MOUSE_MOVE, mm);
                    img.addEventListener(MouseEvent.MOUSE_UP, mu); 

                    }

             }

                public function md(event:MouseEvent):void
            {
                img = new Image();
                doDrag=true;

                canal.setChildIndex(Image(event.target), images.length-1);
                img.addEventListener(MouseEvent.MOUSE_MOVE, mm);


            }
            public function mm(event:MouseEvent):void
            {


                 if(doDrag==true)
                 {
                    points = new Point();
                images = new Array(IMAGE_COUNT);


                img = new Image();
                img = Image(event.target);

                points.x=event.target.x;
                points.y=event.target.y;
                points = localToGlobal(points);
                img.x=points.x;
                img.y=points.y;


                var boundar:flash.geom.Rectangle=new Rectangle(this.x, this.y, this.width/ 2 + 3 * offset_x, this.height / 2 + 3 * offset_x);
                img.startDrag(false, boundar);
                 }
            }

            public function onmove(event:MouseEvent):void
            {

                img = new Image();

            }

            public function mu(event:MouseEvent):void
            {
                canal = new Canvas();
                canal.stopDrag();
                doDrag=false;



                this.stopDrag();
                doDrag=false;
                var num1:int = Canvas(event.currentTarget).mouseX;

        if(num1 > 50 && num1 < 80){
             canal.setChildIndex(dragInitiator, 0);
             setCards();                
            }
        if(num1 > 80 && num1 < 110){
             canal.setChildIndex(dragInitiator, 1);
            setCards(); 
            }
        if(num1 > 110 && num1 < 140){
             canal.setChildIndex(dragInitiator, 2);
            setCards(); 
            }
        if(num1 > 140 && num1 < 170){
             canal.setChildIndex(dragInitiator, 3);
            setCards(); 
            }
        if(num1 > 170 && num1 < 200){
            canal.setChildIndex(dragInitiator, 3);
            setCards(); 
            }


            }

             private function setCards():void{
            var b:int = 0;
            var a:int;
            var cardsArray:Array = this.getChildren();
            for(a = 0;a < cardsArray.length; a++)
            {
                canal.getChildAt(a).x = 90+b;
                b=b+20;
            }
             }

    ]]>
</mx:Script>    
</mx:Application>

Answer 1

Instead of casting Image as a CAnvas (the first error), you need to cast it... as an Image.

import spark.components.Image;

public function mu(event:MouseEvent):void {
    var current:Image = event.currentTarget as Image; //this is the correct way to cast event.currentTarget
}

Answer 2

The two error originate from different statements: #1034 originates from var num1:int = Canvas(event.currentTarget).mouseX; because an img is not a Canvas

Where #2025 originates from one of the canal.setChildIndex(dragInitiator, ...); because img is not a child of canal, you have to addChild(...) before you can setChildIndex(...)

you can use addChildAt instead of setChildIndex it would work the same, if not a bit less efficiently.