Comunidad de diseño web y desarrollo en internet online

Redimensionamiento MovieClip en AS3

Citar            
MensajeEscrito el 11 Feb 2010 02:28 pm
Hola,

Tengo un movieClip y quisiera que con un click se pusieran en las esquinas del mismo el puntero
del ratón y pudiese arrastrar al estilo de las ventanas de windows.

Hasta ahora lo he programado ampliando la imagen en cada esquina con cada click del ratón, pero
ahora necesitan que se arrastre la imagen con el ratón, no sólo el click, hay algún modo
de hacerlo que no sea calculando las coordenadas a mano?

La función que calcula el movimiento nuevo de la imagen es:

Código ActionScript :

    function calcular_movimiento(event:Event){
   
      trace("function:: soltar");
            
       trace("POSICION X DE LA FOTO", tarjeta.foto.x);
      trace("POSICION Y DE LA FOTO", tarjeta.foto.y);
      trace("X2", tarjeta.foto.x+tarjeta.foto.width);
      trace("Y2", tarjeta.foto.y);
      trace("X3", tarjeta.foto.x);
      trace("Y3", tarjeta.foto.y+tarjeta.foto.height);
      trace("X4", tarjeta.foto.x+tarjeta.foto.width);
      trace("Y4", tarjeta.foto.y+tarjeta.foto.height);
      
      trace("RATON X"       , this.mouseX );
      trace("RATON Y"       , this.mouseY );
      trace("ALTURA  IMAGEN", this.height);
      trace("ANCHURA IMAGEN", this.width);
               
      trace("CALCULO DE LAS NUEVAS DIMENSIONES");
      
      var posTarjetaX:Number=tarjeta.foto.x;
      var posMouseX:Number  =this.mouseX;
      var posTarjetaY:Number=tarjeta.foto.y;
      var posMouseY:Number  =this.mouseY;
      
      
      var x1:Number=tarjeta.foto.x;
      var x2:Number=tarjeta.foto.x+tarjeta.foto.width;
      var x3:Number=tarjeta.foto.x;      
      var x4:Number=tarjeta.foto.x+tarjeta.foto.width;
      
      var y1:Number=tarjeta.foto.y;
      var y2:Number=tarjeta.foto.y;

      var y3:Number=tarjeta.foto.y+tarjeta.foto.height;
      var y4:Number=tarjeta.foto.y+tarjeta.foto.height;
   
      if (posMouseX<posTarjetaX)
      {
         trace("posicion X del raton menor que posicion X de la foto");
         tarjeta.foto.x      = tarjeta.foto.x     - 3;
         tarjeta.foto.width  = tarjeta.foto.width - 3;         
      }
      else
      {
         trace("posicion X del raton mayor que posicion X de la foto");
         tarjeta.foto.width  = tarjeta.foto.width + 3;
         tarjeta.foto.x      = tarjeta.foto.x     + 3;         
      }      
      if(posMouseY<posTarjetaY)
      {
         trace("posicion Y del raton menor que posicion Y de la foto");      
         tarjeta.foto.y      = tarjeta.foto.y      - 3;
         tarjeta.foto.height = tarjeta.foto.height - 3;            
      }
      else
      {
         trace("posicion Y del raton mayor que posicion Y de la foto");
         tarjeta.foto.y      = tarjeta.foto.y      + 3;
         tarjeta.foto.height = tarjeta.foto.height + 3;      
      }   
}


Jorge

Por mlopezastilleros

7 de clabLevel



 

firefox
Citar            
MensajeEscrito el 11 Feb 2010 02:58 pm
Le estás cambiabndo la posición y estirando hacia donde está el ratón .. ¿arrastrar? No entiendo bien tu objetivo

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 11 Feb 2010 03:27 pm
Me refiero a que pinches en una esquina del objeto y mientras arrastras el ratón la imagen cambia de tamaño y de forma según las posiciones del ratón (como las ventanas de Windows), en el código anterior la imagen cambia la posición con cada "click" del ratón.

Muchas Gracias por las respuestas !!!

Por mlopezastilleros

7 de clabLevel



 

firefox
Citar            
MensajeEscrito el 12 Feb 2010 11:21 am
Hola,
He codificado el redimensionamiento de un movieClip al estilo de las ventanas de windows, os envío el
código por si os sirve de algo. El único problema que la redimensión de la ventana está hecha a mano
y en el ángulo superior izquierdo no dimensiona correctamente, alguien sabe si hay algo
más automático en AS3 para la redimensión ???
Otro pequeño problema que al situarse el ratón en las esquinas el icono del ratón se
cambia a una "mano", sabéis cómo se modifica en un ángulo o si existen otras figuras??? Estoy
desarrollando en Flash Player 9.
También en el código están funciones para subir y bajar archivos del servidor.

Muchas Gracias !!!

Código ActionScript :

    //Clases necesarias

import flash.display.Shape;
import flash.text.TextField;
import flash.events.MouseEvent;
import flash.ui.Mouse;
//import flash.ui.MouseCursor;

import flash.events.*;
import flash.net.FileFilter;
import flash.net.FileReference;
import flash.net.URLRequest;

import fl.controls.TextInput;
import fl.managers.FocusManager;
import flash.display.InteractiveObject;
import flash.display.SimpleButton;

import flash.display.Sprite;
import flash.display.Stage;
import flash.display.DisplayObject;
import flash.display.Graphics;
import flash.events.Event;
import flash.ui.MouseCursor.BUTTON;
import flash.ui.MouseCursor.ARROW;


//Dirección del SERVIDOR que va a subir el archivo
var uploadURL:URLRequest;
//Dirección del SERVIDOR que va a bajar el archivo
var downloadURL:URLRequest;
var archivo:FileReference;
var fileName:String="pendiente.png";


var iniX:Number=0;
var iniY:Number=0;


stop();

this.arriba.addEventListener(MouseEvent.CLICK,subir);
this.abajo.addEventListener(MouseEvent.CLICK,bajar);
this.izquierda.addEventListener(MouseEvent.CLICK,mov_izq);
this.derecha.addEventListener(MouseEvent.CLICK,mov_der);
this.convertir.addEventListener(MouseEvent.CLICK,convertirAPNG);
this.rotaizq.addEventListener(MouseEvent.CLICK,rota_izq);
this.rotader.addEventListener(MouseEvent.CLICK,rota_der);
this.tarjeta.foto.addEventListener(MouseEvent.MOUSE_UP ,suelta_foto);
this.tarjeta.foto.addEventListener(MouseEvent.MOUSE_WHEEL ,zoom_foto);
this.tarjeta.foto.addEventListener(MouseEvent.MOUSE_DOWN, soltar);
this.Examinar_bt.addEventListener(MouseEvent.CLICK,Examinar);
this.Bajar_bt.addEventListener(MouseEvent.CLICK,Bajar_Servidor);
this.probar.addEventListener(MouseEvent.CLICK, iniciarMovimiento);

stage.scaleMode = StageScaleMode.NO_SCALE;


this.tarjeta.foto.buttonMode = false;
this.tarjeta.foto.useHandCursor= false;


function subir(event:Event){
   tarjeta.foto.y-=10;
};
function bajar(event:Event){
   tarjeta.foto.y+=10;
};
function mov_izq(event:Event){
   tarjeta.foto.x-=10;
};
function mov_der(event:Event){
   tarjeta.foto.x+=10;
};
function rota_izq(event:Event){
   tarjeta.foto.rotation-=10;
};
function rota_der(event:Event){
   tarjeta.foto.rotation+=10;
};
function zoom_foto(event:Event){
   trace("3"+event.delta);
   tarjeta.foto.scaleX+=(event.delta/10);
   tarjeta.foto.scaleY+=(event.delta/10);
   event.resize
};

function glideToMouse(event:Event) {
   tarjeta.foto.x += (this.mouseX-tarjeta.foto.x)*.2;
   tarjeta.foto.y += (this.mouseY-tarjeta.foto.y)*.2;
}

function coje_foto(event:Event) {   
   tarjeta.foto.addEventListener('enterFrame',glideToMouse);   
};
function suelta_foto(event:Event) {
   trace("inicio function:: SUELTA_FOTO");
   tarjeta.foto.removeEventListener('enterFrame',glideToMouse);   
   stage.removeEventListener(MouseEvent.MOUSE_MOVE, calcular_movimiento);
   trace("fin function:: SUELTA_FOTO");
};



function iniciarMovimiento(event:Event) {
   trace("Se va mover la figura según el movimiento del raton");
   //Mouse.cursor = "arrow";
   //event.target.onRelease=null;
   //Mouse.show();
   this.tarjeta.fotobuttonMode = true;
   this.tarjeta.foto.useHandCursor=true;
   trace("Se ha transformado el raton");
}

function convertirAPNG(event:Event) {
var myBitmapData:BitmapData = new BitmapData (tarjeta.width, tarjeta.height);
myBitmapData.draw(tarjeta);
var bm:Bitmap = new Bitmap(myBitmapData);
this.addChild (bm);
};
function mouseMoveHandler (event:Event) {
        trace("mouseMoveHandler1");
        event.updateAfterEvent();
      trace("mouseMoveHandler2");
};

function calcular_movimiento(event:Event){
   
      trace("function:: soltar");
            
       trace("POSICION X DE LA FOTO", tarjeta.foto.x);
      trace("POSICION Y DE LA FOTO", tarjeta.foto.y);
      trace("X2", tarjeta.foto.x+tarjeta.foto.width);
      trace("Y2", tarjeta.foto.y);
      trace("X3", tarjeta.foto.x);
      trace("Y3", tarjeta.foto.y+tarjeta.foto.height);
      trace("X4", tarjeta.foto.x+tarjeta.foto.width);
      trace("Y4", tarjeta.foto.y+tarjeta.foto.height);
      
      trace("RATON X"       , this.mouseX );
      trace("RATON Y"       , this.mouseY );
      trace("ALTURA  IMAGEN", this.height );
      trace("ANCHURA IMAGEN", this.width  );
               
      trace("CALCULO DE LAS NUEVAS DIMENSIONES");
      
      var posTarjetaX:Number=tarjeta.foto.x;
      var posMouseX:Number  =this.mouseX;
      var posTarjetaY:Number=tarjeta.foto.y;
      var posMouseY:Number  =this.mouseY;
      
      
      var x1:Number=tarjeta.foto.x;
      var x2:Number=tarjeta.foto.x+tarjeta.foto.width;
      var x3:Number=tarjeta.foto.x;      
      var x4:Number=tarjeta.foto.x+tarjeta.foto.width;
      
      var y1:Number=tarjeta.foto.y;
      var y2:Number=tarjeta.foto.y;

      var y3:Number=tarjeta.foto.y+tarjeta.foto.height;
      var y4:Number=tarjeta.foto.y+tarjeta.foto.height;
   
      if (posMouseX<posTarjetaX)
      {
         trace("posicion X del raton menor que posicion X de la foto");
         tarjeta.foto.x      = tarjeta.foto.x     - 1;
         tarjeta.foto.width  = tarjeta.foto.width - 1;         
      }
      else
      {
         trace("posicion X del raton mayor que posicion X de la foto");
         tarjeta.foto.width  = tarjeta.foto.width + 1;
         tarjeta.foto.x      = tarjeta.foto.x     + 1;
      }
      if(posMouseY<posTarjetaY)
      {
         trace("posicion Y del raton menor que posicion Y de la foto");         
         tarjeta.foto.y      = tarjeta.foto.y      - 1;
         tarjeta.foto.height = tarjeta.foto.height - 1;
      }
      else
      {
         trace("posicion Y del raton mayor que posicion Y de la foto");
         tarjeta.foto.y      = tarjeta.foto.y      + 1;
         tarjeta.foto.height = tarjeta.foto.height + 1;
      }
      
   
   
   
}
function soltar(event:Event)  {
          trace("function:: soltar");
            
       trace("POSICION X DE LA FOTO", tarjeta.foto.x);
      trace("POSICION Y DE LA FOTO", tarjeta.foto.y);
      trace("X2", tarjeta.foto.x+tarjeta.foto.width);
      trace("Y2", tarjeta.foto.y);
      trace("X3", tarjeta.foto.x);
      trace("Y3", tarjeta.foto.y+tarjeta.foto.height);
      trace("X4", tarjeta.foto.x+tarjeta.foto.width);
      trace("Y4", tarjeta.foto.y+tarjeta.foto.height);
      
      trace("RATON X"       , this.mouseX );
      trace("RATON Y"       , this.mouseY );
      trace("ALTURA  IMAGEN", this.height);
      trace("ANCHURA IMAGEN", this.width);
      
      this.tarjeta.fotobuttonMode = true;
      this.tarjeta.foto.useHandCursor=false;
      
               
      trace("CALCULO DE LAS NUEVAS DIMENSIONES");
      
      var posTarjetaX:Number=tarjeta.foto.x;
      var posMouseX:Number  =this.mouseX;
      var posTarjetaY:Number=tarjeta.foto.y;
      var posMouseY:Number  =this.mouseY;
      
      
      var x1:Number=tarjeta.foto.x;
      var x2:Number=tarjeta.foto.x+tarjeta.foto.width;
      var x3:Number=tarjeta.foto.x;      
      var x4:Number=tarjeta.foto.x+tarjeta.foto.width;
      
      var y1:Number=tarjeta.foto.y;
      var y2:Number=tarjeta.foto.y;
      var y3:Number=tarjeta.foto.y+tarjeta.foto.height;
      var y4:Number=tarjeta.foto.y+tarjeta.foto.height;
      
      //Miramos si estamos en la esquina inferior derecha
      
      
      //1. Miramos si estamos en la esquina superior derecha
      //   Habría que modificar lo siguiente: x, y, width, height.      
      //2. Miramos si estamos en la esquina inferior izquierda
      //   Habría que modificar lo siguiente: x, y, width, height.                  
      //3. Miramos si estamos en la esquina superior izquierda
      //   Habría que modificar lo siguiente: x, y, width, height.         
      //4. Miramos si estamos en la esquina inferior izquierda
      //   Habría que modificar lo siguiente: x, y, width, height.
      
      
      trace("STAGEX", stage.mouseX);
      trace("STAGEY", stage.mouseY);
      
      if ( (this.mouseX<(tarjeta.foto.width/3) ))
      {
         
          trace ("Movimiento esquina izquierda");
          this.tarjeta.foto.buttonMode = true;
          this.tarjeta.foto.useHandCursor=true;
          trace("inicio::  añadimos un listener para añadir dimensiones a la imagen ");   
          stage.addEventListener(MouseEvent.MOUSE_MOVE, calcular_movimiento);   
          trace("fin::     añadimos un listener para añadir dimensiones a la imagen ");
      }
      else
      {
            
      if   ( ((posMouseX> x1  && posMouseX>x2) ||
           (posMouseX <x1  && posMouseX<x2)) &&
           ((posMouseY> y1  && posMouseY>y3) ||
           (posMouseY<y1   && posMouseY<y2) ) )
         
      {
            this.tarjeta.foto.buttonMode = false;
             this.tarjeta.foto.useHandCursor= false;
            trace("Mover la figura");
            tarjeta.foto.addEventListener('enterFrame',glideToMouse);
            trace("Fin Movimiento de la figura");         
      }
      
      else
      {
            this.tarjeta.foto.buttonMode = true;
            this.tarjeta.foto.useHandCursor=true;
            trace("inicio:: añadimos un listener para añadir dimensiones a la imagen");
            stage.addEventListener(MouseEvent.MOUSE_MOVE, calcular_movimiento);   
            trace("fin::    añadimos un listener para añadir dimensiones a la imagen");
      }
      }
      trace("FIN CALCULO DE LAS NUEVAS DIMENSIONES");                   
      trace("end function:: soltar");
}


function mover(event:Event) {
       trace("mover:: CALCULO DE LAS DIMENSIONES DE LA IMAGEN: ANCHURA Y ALTURA");
         tarjeta.foto.width = mouseX-iniX;
        tarjeta.foto.height= mouseY-iniY;
      trace("Fin mover");
};

/***********************************************************************/
// FUNCIONES PARA SUBIR ARCHIVOS DE FLASH A UN SERVIDOR 
/***********************************************************************/


//Función llamada al pulsar examinar, se crea el filereference y se abre el navegador de archivos
function Examinar(event:MouseEvent) {
   Estado_txt.appendText("\n" + "Vamos a seleccionar el archivo.");
   uploadURL = new URLRequest();
   uploadURL.url = "http://6701.huchacard.es/uploadFile.php";
   archivo = new FileReference();
   PonerListeners(archivo);
   archivo.browse(getTypes());
}

//Añado los listener al objeto filereference
function PonerListeners(dispatcher:IEventDispatcher) {
   dispatcher.addEventListener(Event.CANCEL, cancelHandler);
   dispatcher.addEventListener(Event.COMPLETE, completeHandler);
   dispatcher.addEventListener(HTTPStatusEvent.HTTP_STATUS, httpStatusHandler);
   dispatcher.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
   dispatcher.addEventListener(Event.OPEN, openHandler);
   dispatcher.addEventListener(ProgressEvent.PROGRESS, progressHandler);
   dispatcher.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
   dispatcher.addEventListener(Event.SELECT, selectHandler);
   dispatcher.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,uploadCompleteDataHandler);
}

//Con está función se generan los tipos de archivos que estarán disponibles para seleccionar desde el navegador
function getTypes():Array {
   var allTypes:Array = new Array(getImageTypeFilter(), getTextTypeFilter());
   return allTypes;
}

//Tipos de imágenes admitidos, tanto para pc como para mac
function getImageTypeFilter():FileFilter {
   return new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)","*.jpg;*.jpeg;*.gif;*.png");
}

//Tipos de archivos de texto admitidos, para pc y mac
function getTextTypeFilter():FileFilter {
   return new FileFilter("Text Files (*.txt, *.rtf)","*.txt;*.rtf");
}


//Se distribuye cuando se cancela la descarga desde el navegador de archivos. 
function cancelHandler(event:Event):void {
   Estado_txt.appendText("\n" + "Subida cancelada.");
}

//Se distribuye cuando se finaliza la descarga o la carga
function completeHandler(event:Event):void {
   Estado_txt.appendText("\n" + "Subida completada.");
}

//Se reciben datos del servidor tras completar la carga
function uploadCompleteDataHandler(event:Event):void {
   Estado_txt.appendText("\n" + "Subida confirmada por el servidor.");
}

//Se produce cuando falla la carga y hay un código http de error. 
//Por ejemplo si no se encuentra el PHP, se generará un error 404.
function httpStatusHandler(event:HTTPStatusEvent):void {
   Estado_txt.appendText("\n" + "Se ha producido el siguiente error: " + event.status);
}

//Se produce cuando falla la carga o descarga
function ioErrorHandler(event:IOErrorEvent):void {
   Estado_txt.appendText("\n" + event.text);
}

//Se inicia la carga o descarga
function openHandler(event:Event):void {
   Estado_txt.appendText("\nComienza la subida");
}

//Se distribuye periodicamente durante la carga o la descarga, mostrando el progreso de la misma. 
function progressHandler(event:ProgressEvent):void {
   var file:FileReference = FileReference(event.target);
   Estado_txt.appendText("\n" + event.bytesLoaded + " bytes de " + event.bytesTotal + " bytes subidos.");
}

//Se distribuye al intentar descargar o cargar un archivo de un servidor fuera del entorno de seguridad de la película
function securityErrorHandler(event:SecurityErrorEvent):void {
   Estado_txt.appendText("\nEl servidor no permitió la carga del archivo.");
}

//Se distribuye al elegir el archivo para carga o descarga desde el navegador de archivos.
function selectHandler(event:Event):void {
   Estado_txt.text = "";
   var archivo:FileReference = FileReference(event.target);
   Estado_txt.appendText("\n" + "Archivo elegido: " + archivo.name + "\n" + "Tamaño = " + archivo.size + " bytes.");
   if(archivo.size > 20000){
      Estado_txt.appendText("\nNo se pueden subir archivos de más de 20 KB.");
   }else{
      archivo.upload(uploadURL);
   }
}

/**********************************************************************************************************************************/
/* FUNCIONES PARA BAJAR ARCHIVOS DE FLASH DEL SERVIDOR AL LOCAL                                                     */
/**********************************************************************************************************************************/

// Bajan los archivos de flash del servidor al local.
// A continuación, las siguientes funciones son específicas para bajar los archivos, el
// resto son comunes a la subida y a la bajada.
// Se utilizará la variable FileReference, y el método a utilizar es download().

//Se distribuye al elegir el archivo para carga o descarga desde el navegador de archivos.
function selectHandlerDownLoad(event:Event):void {
   Estado_txt.text = "";
   var archivo:FileReference = FileReference(event.target);
   Estado_txt.appendText("\n" + "Archivo elegido: " + archivo.name + "\n" + "Tamaño = " + archivo.name + " bytes.");   
    trace("selectHandler: name=" + archivo.name);

}

//Añado los listener al objeto filereference
function PonerListenersDownLoad(dispatcher:IEventDispatcher) {
   dispatcher.addEventListener(Event.CANCEL, cancelHandler);
   dispatcher.addEventListener(Event.COMPLETE, completeHandler);
   dispatcher.addEventListener(HTTPStatusEvent.HTTP_STATUS, httpStatusHandler);
   dispatcher.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
   dispatcher.addEventListener(Event.OPEN, openHandler);
   dispatcher.addEventListener(ProgressEvent.PROGRESS, progressHandler);
   dispatcher.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
   dispatcher.addEventListener(Event.SELECT, selectHandlerDownLoad);
   dispatcher.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,uploadCompleteDataHandler);
}


//Función llamada al pulsar examinar, se crea el filereference y se abre el navegador de archivos
function Bajar_Servidor(event:MouseEvent) {
   trace("function:: Bajar_Servidor");
   Estado_txt.appendText("\n" + "Vamos a seleccionar el archivo.");
   downloadURL = new URLRequest();
   downloadURL.url = "http://"+fileName;
   archivo = new FileReference();   
   PonerListenersDownLoad(archivo);
   archivo.download(downloadURL, fileName);
   trace("end function:: Bajar_Servidor");
}

Por mlopezastilleros

7 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.