Share
En este Tutorial Premium, aprenderemos a manipular los mapas de bits en ActionScript 3 para producir una aplicación útil de recorte de imágenes. Sigue leyendo!
Imagen de Swami Stream con licencia de Creative Commons.
Usando las herramientas de Flash, crearemos una interfaz atractiva que estará activada por varias clases de ActionScript 3 como MouseCursor, Bitmap, BitmapData, Rectangle, Point, Tween, FileReference e incluso bibliotecas externas.
El usuario podrá recortar una imagen varias veces para luego seleccionar la mejor opción y guardarla en el disco..
Abra Flash y cree un documento de 600 píxeles de ancho y 400 píxeles de alto. Establecer la velocidad de fotogramas a 24 fps.
Una bonita interfaz parecida a una Mac potenciará nuestro código, esto implica múltiples botones basados en la línea de tiempo, cursores personalizados y más.
Continúe con los siguientes pasos para aprender a crear esta GUI.
No hay ciencia en el fondo, solo cree un rectángulo negro de 600x400px y céntrelo en el escenario. También puede cambiar el color de fondo en las Propiedades del escenario..
Necesitaremos una imagen para recortar, seleccionar su imagen preferida e importarla al escenario (Cmd + R).
Imagen de Swami Stream con licencia de Creative Commons.
Haremos un cursor personalizado para usarlo como retroalimentación para el usuario, permitiéndole saber dónde puede recortar..
Seleccione la herramienta Rectángulo (R) y haga un rectángulo blanco de 3px de ancho y 17px de altura.
Duplica la forma (Cmd + D) y gírala 90 grados para formar una cruz.
Repita este proceso con un rectángulo negro de 1 px de ancho y 15 px de alto.
Convierta la forma final a MovieClip (F8) y establezca su nombre de instancia en cursor.
Estos botones manejan acciones secundarias basadas en el recorte, estas acciones son:
Seleccione la Herramienta primitiva de rectángulo (R) y cambie el radio de la esquina a 10, dibuje un rectángulo de 70x18px y rellénelo con # 666666.
Duplique la forma (Cmd + D), cambie su tamaño a 68x16px y cambie su color a este gradiente lineal # 222222 a # 444444. Use la herramienta Transformación de degradado (F) para rotar el degradado.
A continuación, use la Herramienta de texto (T) para escribir una etiqueta para el botón. Utilice este formato: Lucida Grande Regular, 12 puntos, #CCCCCC.
Usa la misma técnica para crear los botones Cancelar y Borrar.
Un botón GUI bien hecho tiene 4 estados:
Convierta sus botones a MovieClip y haga doble clic en ellos para ingresar al modo de edición. Abra el panel de línea de tiempo (Ventana> Línea de tiempo).
Notarás que el Arriba El estado ya está creado, estas son las formas que convirtió a MovieClip..
Presione F6 para crear un nuevo Marco y cambie el relleno de degradado de la forma central a # 222222, # 5B5B5B. Este será el Terminado estado.
Para el Abajo Estado, seleccione la forma central y voltéela verticalmente (Modificar> Transformar> Girar vertical).
los Golpear el estado es por defecto, el área de forma más grande, ya que el área que se puede hacer clic es el botón completo, no habrá necesidad de crear un marco para este.
Cuando todos los botones estén listos, salga del modo de edición y colóquelos como se muestra en la siguiente captura de pantalla. El texto blanco indica el nombre de instancia del botón.
Se utilizará una barra de botones para colocar y resaltar el botón de recorte.
Use la herramienta Rectángulo para crear un rectángulo de 600x50 px y rellénelo con este relleno degradado #AFAFAF a # C4C4C4. Alinea la barra en el fondo del escenario..
Para crear un efecto en relieve, dibuje dos líneas de 600x1px y colóquelas sobre la barra de botones, llene la superior con # 858585 y la otra con # D8D8D8.
El botón Recortar iniciará la función de ActionScript principal que manipulará los mapas de bits en el escenario.
Con la herramienta Rectángulo, cree rectángulos de 33x6px y 26x6px y úselos para formar un ángulo recto.
Duplica la forma y gírala 180 grados para formar un cuadrado.
Mueve la forma duplicada 5px hacia arriba y 5px hacia la derecha.
Rellene la forma resultante con este relleno degradado: # 444444 a # 222222. Utilice la herramienta de transformación de degradado para rotar el relleno.
Puedes agregar más detalles agregando una sombra; duplica la forma actual y muévela 1px hacia abajo y 1px hacia la derecha.
Por último, convierte la forma a MovieClip y nómbrela CultBotón.
La forma del recorte es una imagen que se utilizará para indicar el área que se recortará.
Seleccione la herramienta Rectángulo y cambie el color del trazo a blanco y el color de relleno a blanco con 1% alfa (esto nos ayudará a arrastrar la forma de recorte). Dibuje un cuadrado de 10x10px y céntrelo.
Seleccione una parte de 1px del cuadrado y cambie su color a negro.
Duplica la forma y haz lo mismo en todos los lados..
Repite este proceso en todos los lados..
Convertir el resultado a MovieClip y nombrarlo recortar, marca el Exportar para ActionScript caja.
Haga doble clic para ingresar al modo de edición, cree un nuevo fotograma clave en el marco 5 y gire la forma 180 grados.
Agrega 4 cuadros más y sale del modo de edición.
Esto termina la parte gráfica, comencemos con ActionScript.!
Cree una nueva clase de ActionScript 3.0 (Cmd + N) y guárdela como Main.as en la carpeta de tu clase.
La palabra clave del paquete le permite organizar su código en grupos que pueden ser importados por otros scripts, se recomienda nombrarlos comenzando con una letra minúscula y usar intercaps para las palabras subsiguientes, por ejemplo: mis clases. También es común nombrarlos usando el sitio web de su empresa: com.mycompany.classesType.myClass.
En este ejemplo, estamos usando una sola clase, por lo que realmente no hay necesidad de crear una carpeta de clases.
paquete
Estas son las clases que necesitaremos importar para que nuestra clase funcione, la importar La directiva hace que las clases y los paquetes definidos externamente estén disponibles para su código..
importar flash.display.Sprite; import flash.events.MouseEvent; importar flash.ui.Mouse; importar flash.ui.MouseCursor; importar flash.display.BitmapData; importar flash.display.Bitmap; import flash.geom.Rectangle; importar flash.geom.Point; importar fl.transitions.Tween; importación fl.transitions.easing.Strong; importar flash.net.FileReference; import flash.utils.ByteArray; importar com.adobe.images.JPGEncoder; import flash.events.Event;
Para guardar el recorte de la imagen, usaremos una clase que forma parte de as3corelib. Sigue el enlace y descarga la biblioteca..
Aquí declaramos la clase usando el clase palabra clave de definición seguida del nombre que queremos para la clase, recuerde que debe guardar el archivo con este nombre.
los se extiende palabra clave define una clase que es una subclase de otra clase. La subclase hereda todos los métodos, propiedades y funciones, de esa manera podemos usarlos en nuestra clase.
Clase pública Principal extiende Sprite
Estas son las variables que usaremos, lea los comentarios en el código para obtener más información sobre ellas..
privado var cropShape: CropShape; // Esta es una instancia de cropShape que creamos antes de private var pointX: Number; // Esta var mantendrá la posición x donde se inicia la forma del recorte private var pointY: Number; // Esta var mantendrá la posición y donde se inicia la forma del recorte private var added: Boolean; // Comprueba si la forma del recorte está en la etapa imágenes privadas var: Array = new Array (); // Almacena los cultivos de imágenes privado var bmd: BitmapData; // Un objeto de datos de mapa de bits, utilizado para manipular los datos privados de la imagen principal var bmd2: BitmapData; // Un segundo objeto de datos de mapa de bits, este contendrá los datos de la imagen que queremos guardar. Var croppedImage privado: Sprite; // Mantiene las imágenes recortadas private var cropThumb: int = 0; // El número de pulgares ya creados privados var thumbPosX: Array = [5, 5, 5, 505, 505, 505]; // Almacena las posiciones x de los pulgares private var thumbPosY: Array = [37, 135, 233, 37, 135, 233]; // Almacena las posiciones y de los pulgares privados var tween: Tween; // Un objeto de interpolación, la biblioteca de animación predeterminada en flash private var fileReference: FileReference; // Se usa para guardar el archivo en el disco privado var byteArray: ByteArray; // Almacena datos binarios, utilizados para guardar el archivo en el disco privado var jpg: JPGEncoder = new JPGEncoder (); // El codificador de imagen privado var zoomed: Boolean; // Comprueba si la miniatura está ampliada o reducida en privado var currentCrop: Bitmap; // Mantiene la miniatura actual ampliada, la que se guardará en privado var currentSprite: *; // Se usa para saber qué pulgar está activo privado var latestX: Number; // Comprueba la última x del pulgar con zoom private var latestY: Number; // Comprueba la última y del pulgar ampliado
El constructor es una función que se ejecuta cuando un objeto se crea a partir de una clase, este código es el primero en ejecutarse cuando se crea una instancia de un objeto o se ejecuta utilizando la Clase de documento.
Función pública Main (): void
Estos son los escuchas que se definirán en el lanzamiento, básicamente agregan eventos relacionados con el mouse a los botones.
image.addEventListener (MouseEvent.MOUSE_DOWN, getStartPoint); image.addEventListener (MouseEvent.MOUSE_UP, stopDrawing); cropButton.addEventListener (MouseEvent.MOUSE_UP, crop); image.addEventListener (MouseEvent.MOUSE_OVER, customCursor); image.addEventListener (MouseEvent.MOUSE_OUT, removeCustomCursor); saveButton.addEventListener (MouseEvent.MOUSE_UP, saveImage); cancelButton.addEventListener (MouseEvent.MOUSE_UP, cancel); clearButton.addEventListener (MouseEvent.MOUSE_UP, clearThumbs);
Este código oculta los botones que no están en uso en este momento.
saveButton.visible = falso; cancelButton.visible = falso; clearButton.visible = false; cursor.visible = falso;
La siguiente función hace que el cursor personalizado esté visible cuando el puntero del mouse se encuentra sobre la imagen principal.
función privada customCursor (e: MouseEvent): void cursor.visible = true; Mouse.hide (); cursor.startDrag (true);
Oculta el cursor personalizado cuando el puntero del mouse abandona la imagen principal..
función privada removeCustomCursor (e: MouseEvent): void cursor.visible = false; Mouse.show (); cursor.stopDrag ();
Una función muy importante, obtiene y almacena las coordenadas de clic del mouse y coloca el clip de película de recorte en ellas, el valor actual se usará más adelante para determinar el tamaño de la forma de recorte.
función privada getStartPoint (e: MouseEvent): void pointX = mouseX; pointY = mouseY; if (! added) cropShape = new CropShape (); cropShape.x = pointX; cropShape.y = pointY; addChild (cropShape); agregado = verdadero; else removeChild (cropShape); cropShape = nuevo CropShape (); cropShape.x = pointX; cropShape.y = pointY; addChild (cropShape);
Agrega un oyente en la imagen principal para expandir la forma de recorte en el movimiento del mouse y agrega al oyente para que deje de expandirse en el mouse hacia arriba.
image.addEventListener (MouseEvent.MOUSE_MOVE, drawCropShape); cropShape.addEventListener (MouseEvent.MOUSE_UP, stopDrawing);
Expande el cropShape de acuerdo con las coordenadas guardadas y las actuales..
función privada drawCropShape (e: MouseEvent): void cropShape.width = mouseX - pointX; cropShape.height = mouseY - pointY;
Detiene la expansión de la forma del recorte y agrega algunos escuchas que serán utilizados por las siguientes funciones.
función privada stopDrawing (e: MouseEvent): void image.removeEventListener (MouseEvent.MOUSE_MOVE, drawCropShape); cropShape.addEventListener (MouseEvent.MOUSE_OVER, showHandCursor); cropShape.addEventListener (MouseEvent.MOUSE_OUT, hideHandCursor); cropShape.addEventListener (MouseEvent.MOUSE_DOWN, dragCrop); cropShape.addEventListener (MouseEvent.MOUSE_UP, stopDragCrop);
Utiliza la clase Mouse para manipular el cursor del mouse, este código mostrará el cursor de la mano cuando el mouse esté sobre la forma de recorte.
función privada showHandCursor (e: MouseEvent): void Mouse.cursor = MouseCursor.HAND;
Restaura el comportamiento original del cursor del mouse..
función privada hideHandCursor (e: MouseEvent): void Mouse.cursor = MouseCursor.AUTO;
La forma del recorte se podrá arrastrar, esto ayudará a seleccionar el área que deseamos fácilmente.
función privada dragCrop (e: MouseEvent): void cropShape.startDrag ();
Detiene el arrastre en el mouse arriba.
función privada stopDragCrop (e: MouseEvent): void cropShape.stopDrag ();
Esta función manejará el recorte de la imagen, utilizando los datos de mapa de bits de las imágenes y la clase de sprite para crear una serie de miniaturas que se podrán guardar..
función privada de cultivo (e: MouseEvent): void
Las siguientes líneas manejan los datos de mapa de bits necesarios para recortar la imagen.
bmd = new BitmapData (image.width, image.height, false, 0x00000000); // Crea un nuevo objeto de datos de mapa de bits utilizando el tamaño de la imagen principal bmd.draw (imagen); // Copia los datos de la imagen principal a la instancia bmd2 = new BitmapData (cropShape.width, cropShape.height, false, 0x00000000); // Crea un nuevo mapa de bits con el tamaño real de la forma de recorte
La siguiente línea copia los píxeles de la imagen principal situada en la posición de forma de recorte al objeto de datos de mapa de bits bmp2.
Los parámetros funcionan como se detalla a continuación:
bmd2.copyPixels (bmd, New Rectangle (cropShape.x - image.x, cropShape.y - image.y, cropShape.width, cropShape.height), nuevo Punto (0, 0));
Vamos a dejar que el usuario recorte seis veces y guardar esas vistas previas en el lado de la imagen principal, para eso, creamos un nuevo mapa de bits que almacenará los datos de mapa de bits de la miniatura recortada y luego lo agregamos como un sprite de 90x70px.
También agregamos un oyente para acercar y alejar la miniatura..
si < 6) var bmp:Bitmap = new Bitmap(bmd2); var thumb:Sprite = new Sprite(); thumb.addChild(bmp); thumb.width = 90; thumb.height = 70; thumb.addEventListener(MouseEvent.MOUSE_UP, zoomThumb); addChild(thumb);
A medida que creamos un nuevo sprite en cada recorte, el último sprite será inaccesible usando su nombre de instancia, el tiempo para usar la matriz que creamos antes.
Esta matriz almacenará las miniaturas creadas para acceder a ellas fuera de la función.
images.push (pulgar);
Cuando el usuario presiona el botón de recorte, se crea una miniatura con la imagen recortada, esta miniatura se anima más tarde a los lados de la aplicación en función de una variable.
La posición de la miniatura está determinada por esta variable y pulgarpos matrices.
tween = new Tween (pulgar, "x", Strong.easeOut, cropShape.x, thumbPosX [cropThumb], 0.5, true); tween = new Tween (thumb, "y", Strong.easeOut, cropShape.y, thumbPosY [cropThumb], 0.5, true); cropThumb ++; // Suma uno al número de pulgares.
La siguiente función se utiliza para guardar la imagen en el disco..
Primero, usa el método jpg.encode () y guarda los datos resultantes en la matriz de bytes, luego el objeto fileReference se usa para mostrar un cuadro de diálogo de guardado donde el usuario puede cambiar el nombre del archivo creado (aunque se establece un nombre predeterminado).
función privada saveImage (e: MouseEvent): void fileReference = new FileReference (); byteArray = jpg.encode (currentCrop.bitmapData); fileReference.save (byteArray, "Crop.jpg"); fileReference.addEventListener (Event.COMPLETE, saveComplete);
Una vez que se guarda la imagen, las miniaturas se eliminan del escenario y de la matriz. Los botones están ocultos y la imagen principal vuelve..
Función privada saveComplete (e: Evento): void for (var i: int = 0; i < images.length; i++) removeChild(images[i]); cropThumb = 0; images = []; tween = new Tween(image,"y",Strong.easeOut,image.y,stage.stageHeight / 2 - image.height / 2 - 30,0.5,true); added = false; saveButton.visible = false; cancelButton.visible = false; clearButton.visible = false;
También hay un botón de cancelación que le permitirá navegar a través de las miniaturas sin guardar ninguna de ellas..
Cuando se presiona este botón, todas las miniaturas vuelven a la posición seleccionada y la imagen principal vuelve a recortar más (si es posible).
función privada cancel (e: MouseEvent): void tween = new Tween (currentSprite, "width", Strong.easeOut, currentSprite.width, 90,0.5, true); tween = new Tween (currentSprite, "height", Strong.easeOut, currentSprite.height, 70,0.5, true); tween = new Tween (currentSprite, "x", Strong.easeOut, currentSprite.x, latestX, 0.5, true); tween = new Tween (currentSprite, "y", Strong.easeOut, currentSprite.y, latestY, 0.5, true); tween = new Tween (imagen, "y", Strong.easeOut, image.y, stage.stageHeight / 2 - image.height / 2 - 30,0.5, true); añadido = falso; saveButton.visible = falso; cancelButton.visible = falso; clearButton.visible = false; cropButton.visible = true; zoom = falso;
Si el usuario ha recortado las 6 veces permitidas por la aplicación, y ninguna de ellas es el resultado esperado, siempre hay una forma de recortar incluso más veces. Esta es la tarea que logrará el botón de borrar..
Elimina todas las miniaturas del escenario y de la matriz, devuelve la imagen principal al escenario y oculta los botones no utilizados.
función privada clearThumbs (e: MouseEvent): void for (var i: int = 0; i < images.length; i++) removeChild(images[i]); cropThumb = 0; images = []; tween = new Tween(image,"y",Strong.easeOut,image.y,stage.stageHeight / 2 - image.height / 2 - 30,0.5,true); added = false; saveButton.visible = false; cancelButton.visible = false; clearButton.visible = false;
Haremos uso de la Clase de documento en este tutorial, si no sabe cómo usarlo o si está un poco confundido, lea esta Sugerencia rápida.
El resultado final es una útil aplicación de Recorte de imágenes que le enseña cómo manipular mapas de bits para modificarlos, y casi sin saberlo, también aprendió cómo crear e implementar una interfaz muy agradable..
Espero que te haya gustado este tutorial, gracias por leer.!
Accentsconagua