Convertir Imagen a Movieclip

Muy buenas gente, ante todo, gracias por los aportes, dudas y sobre todo soluciones, hace que se aprenda mucho. Tambié deciros que soy nuevo en el foro.

Al trapo. Os resumo en que estoy trabajando:

Dentro del proyecto que estoy haciendo, he incluido un carrusel de imagenes, cargadas por un xml. Actualmente si haces clic se abre en un MC contenedor, hasta aquí bien.

Una funcionalidad que quiero y necesito integrar, es cargar cuantas imagenes se quieran en dicho MC contenedor.

La funcionalidad principal es que se puedan arrastrar las imagenes dentro del MC contenedor donde se quiera, con drag and drop, que ya se como funciona y lo tengo claro.

El tema es que por ahora solo he conseguido que funcione el drag and drop, con MC, y no con imagenes.

La consulta, duda o peticion de ayuda, com querais verlo, es que quiero saber si se puede convertir una imagen en MC, o en su defecto, como puedo hacer para crear un MC que contenga cada una de las imagenes del xml, para poder darle la funcionalidad drag and drop..

O si sabeis otra solucion para poder hacer esto.

Un gran saludo, y muchas gracias. Os presentaré el proyecto en que trabajo una vez esté acabado.

genera un contenedor tambien para cada imagen cargada ... si pudiste hacer las cargas de xml y las imagenes , debera ser pan comido lo que te sugeri.

Jonathan

Aquí os adjunto el codigo donde tengo la galeria de imagenes, y que actualmente al hacer clic se cargar en el contenedor "cargador", pero unicamente se carga como imagen, no he logrado hacer que cargue como movieclip .

He intentado cargar el MC que contiene cada imagen cargada, pero no lo he conseguido.

Espero que me podrais ayudar ya que teneis mucha más experiencia que yoy aún me hago un poco lio con el código.

Recuerdo que lo que necesito es cargar en el contenedor "cargador", la imagen grande en un MC para poder usar la funcion drag and drop, como este :

Código ActionScript :

// Register mouse event functions
[b]Imagen ya cargada[/b].addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
[b]Imagen ya cargada[/b].addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

function mouseDownHandler(evt:MouseEvent):void {
   var object = evt.target;
   object.startDrag();
}
 
function mouseUpHandler(evt:MouseEvent):void {
   var obj = evt.target;
   obj.stopDrag();
}

El código que hay a continuación funciona, carga la galeria de imagenes thumb desde el XML, y la hacer click carga la imagen grande en el contenedor correspondiente.

Código ActionScript :

import caurina.transitions.*;
import flash.display.MovieClip;
import flash.display.Graphics;


//CArgamos xml
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML(); 
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
   
var xmlPath:String = "image-scroller.xml";
xmlLoader.load(new URLRequest(xmlPath));
trace("loading xml from: " + xmlPath);

function LoadXML(e:Event):void {
   trace("xml loading complete");
   xmlData = new XML(e.target.data);
   //trace(xmlData.image);
   buildScroller(xmlData.image);
}


var scroller:MovieClip = new MovieClip();
var speed:Number;
var padding:Number = 20;
var thumbFadeOut:Number = .2;
var thumbFadeIn:Number = 1;
var thumbSmall:Number = 1;
var thumbLarge:Number = 1.1;
this.addChild(scroller);
scroller.y = scroller.x = padding;

//Construimos en scroll desde el xml
function buildScroller(imageList:XMLList):void{
   trace("build Scroller");
   for (var item:uint = 0; item < imageList.length(); item++ )  {
      var thisOne:MovieClip = new MovieClip();
      
      //outline
      var blackBox:Sprite = new Sprite();
      blackBox.graphics.beginFill(0xFFFFFF);
      blackBox.graphics.drawRect( -1, -1, 142, 107);
      blackBox.alpha = thumbFadeOut;
      thisOne.addChild(blackBox);
      thisOne.blackBox = blackBox;
      
      thisOne.x = thisOne.myx = (140 + padding) * item;
      thisOne.itemNum = item;
      thisOne.title = imageList[item].attribute("title");
      thisOne.link = imageList[item].attribute("url");
      thisOne.src = imageList[item].attribute("src");      
      //image container
      var thisThumb:Sprite = new Sprite();
      //add image
      var ldr:Loader = new Loader();
      var urlReq:URLRequest = new URLRequest(thisOne.src);
      trace("loading thumbnail "+item+" into Scroller: " + thisOne.src);
      ldr.load(urlReq);
      //assign event listeners for Loader
      ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
      ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
      thisThumb.addChild(ldr);
      thisOne.addChild(thisThumb);
      
      //creamos lista de los thumb
      thisOne.buttonMode = true;
      thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);
      thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);
      thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem);
      
      //cargamos Item
      scroller.addChild(thisOne);
      
   scroller.addEventListener(Event.ENTER_FRAME, moveScrollerThumbs);
   trace("termination of build scroller");
  }
   
}

function overScrollerItem(e:MouseEvent):void {
   //trace("over" + e.currentTarget.name);
   Tweener.addTween(e.currentTarget, { scaleX:thumbLarge, scaleY:thumbLarge, x:e.currentTarget.myx - e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, y: -e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, time:1 } );
   Tweener.addTween(e.currentTarget.blackBox, { alpha:thumbFadeIn, time: 1 } );
}
function outScrollerItem(e:MouseEvent):void {
   //trace("out" + e.currentTarget.name);
   Tweener.addTween(e.currentTarget, { scaleX:thumbSmall, scaleY:thumbSmall, x:e.currentTarget.myx, y:0, time:1 } );
   Tweener.addTween(e.currentTarget.blackBox, { alpha:thumbFadeOut, time: 1 } );
}
function clickScrollerItem(e:MouseEvent):void {

   var urlRequest:URLRequest = new URLRequest(e.currentTarget.link);
   var urlImagen = e.currentTarget.link;
   try {    
   
//cargo Imagen en el contenedor "cargador" al hacer clic
      var loader = new Loader();  
      this.cargador.addChild(loader) ;
      loader.load(new URLRequest(urlImagen));         
   }
   catch (e:Error) {
      trace(e);
   }
}
function completeHandler(e:Event):void {
   //trace("thumbnail complete "+e.target.loader.parent.parent.name);
   //Tamaño de imagen en scrooll
   resizeMe(e.target.loader.parent, 140, 105, true, true, false);
   Tweener.addTween(e.target.loader.parent.parent, { alpha:1, time: .5 } );
}
function errorHandler(e:IOErrorEvent):void {
   trace("thumbnail error="+e);
}


//Funcion de aumento de tamaño
// parametros
// required: mc = the movieClip to resize
// required: maxW = either the size of the box to resize to, or just the maximum desired width
// optional: maxH = if desired resize area is not a square, the maximum desired height. default is to match to maxW (so if you want to resize to 200x200, just send 200 once)
// optional: constrainProportions = boolean to determine if you want to constrain proportions or skew image. default true.
function resizeMe(mc:DisplayObject, maxW:Number, maxH:Number=0, constrainProportions:Boolean=true, centerHor:Boolean=true, centerVert:Boolean=true):void{
    maxH = maxH == 0 ? maxW : maxH;
    mc.width = maxW;
    mc.height = maxH;
    if (constrainProportions) {
        mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY;
    }
   if (centerHor) {
      mc.x = (maxW - mc.width) / 2;
   }
   if (centerVert){
      mc.y = (maxH - mc.height) / 2;
   }
}

function moveScrollerThumbs(e:Event):void {
   if ( mouseY > scroller.y && mouseY < scroller.y + scroller.height) {//vertically over scroller
      if (mouseX < stage.stageWidth/2 - padding*2 && mouseX > 0) {//left of stage explicitly
         speed = -(mouseX - (stage.stageWidth/2 - padding*2)) / 8;
      }
      else if (mouseX > stage.stageWidth/2 + padding*2 && mouseX < stage.stageWidth) {//right of stage explicitly
         speed = -(mouseX - (stage.stageWidth/2 + padding*2)) / 8;
      }
      else {
         speed = 0;
      }
      scroller.x += speed;
      
      //scroller limits
      if (scroller.x < -scroller.width + stage.stageWidth - padding) { //if scrolled too far left
         scroller.x = -scroller.width + stage.stageWidth - padding;
      }
      else if (scroller.x > padding) { //if scrolled to far right
         scroller.x = padding;
      }
   }
}

Muchas gracias a todos. De verdad.

lo mas simple seria que usaras la propiedad content de el Loader ya que es un DisplayObject podrias agregarle los Listener correspondientes para los eventos del mouse, o bien crea una referencia a ese content haciendo un Cast

Código ActionScript :

function clickScrollerItem(e:MouseEvent):void { 
 
   var urlRequest:URLRequest = new URLRequest(e.currentTarget.link); 
   var urlImagen = e.currentTarget.link; 
   try {     
    
//cargo Imagen en el contenedor "cargador" al hacer clic 
      var loader = new Loader();   
      this.cargador.addChild(loader) ; 
// usa la propiedad content de Loader es un DisplayObject y este tiene los metodos startDrag() &
//stopDrag() , o crea una referencia a ese content

     var disObj:Sprite = loader.content as Sprite;
    disObj.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
    disObj.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); 
    loader.load(new URLRequest(urlImagen));          
   } 
   catch (e:Error) { 
      trace(e); 
   } 
} 

function mouseDownHandler(evt:MouseEvent):void { 
   var object = evt.target; 
   object.startDrag(); 
} 
  
function mouseUpHandler(evt:MouseEvent):void { 
   var obj = evt.target; 
   obj.stopDrag(); 
} 

espero se lo que ocupas, suerte.


Jonathan