04 junio 2008

Recortando imágenes en Visual Basic 6

Dicen que una imagen vale más que mil palabras y mucha razón tiene quien lo dijo. El problema es que muchas veces se nos complica cargar imágenes en Visual Basic 6 para mostrarlas al usuario. Una estrategia sería la de crear una ventana que contenga los elementos gráficos que necesitas para cargarlo en la memoria y usarlos desde allí. Para ver un ejemplo de esta estrategia, lo usé para imprimir una imagen con el objeto Printer (puedes ver esa explicación en el mensaje ¿Y qué objeto tiene imprimir?). Sin embargo, existe otro control que viene con Visual Basic 6 que puede ayudar a guardar imágenes para mostrarlos o hacer animaciones. Este es el PictureClip Control y en este mensaje voy a explicar como usarlo.

Para esto hice un pequeño ejemplo de una animación (que puedes bajar aquí) que usa el PictureClip Control para hacer unas pequeñas animaciones. Voy a describir este proceso paso a paso.

Antes que nada, hay que agregar el PictureClip Control a nuestro proyecto, así que después de crear un nuevo proyecto, agregué el componente adecuado. Como puedes ver en la siguiente imagen, hay que ir al menú Project y luego a Components:


Al hacer esto, aparece la ventana de componentes. Hay que elegir el Microsoft PictureClip Control 6.0, como puedes observar en la siguiente imagen:


Al darle Aceptar, aparece en mi ventana de herramientas un nuevo control, la que está con el círculo rojo en la siguiente imagen:


Usando este control, y varios otros más "normales", hice la siguiente interfaz. Puse letreros en color rojo de los nombre de cada uno de estos controles. picAnimacion es un PictureBox; PictureClip1 es un PictureClip Control (el que acabamos de insertar); Timer1 es, obviamente, un Timer; btnInicio, btnParar y btnSalir son CommandButton. La interfaz se ve así:


Una nota acerca de la imagen que usé con el monito que brinca: en Photoshop me encargué de que cada mono tuviera el mismo ancho. De esta manera puedo dividir mi PictureClip en columnas y filas del mismo tamaño para usar la propiedad GraphicCell para acceder a cada imagen (más adelanto explico esto un poquito mejor).

Como el PictureClip1 y el Timer1 no aparecen, cambié la ventana para ocultarlos de esta manera:


Muy padre el interfaz pero, ¿cómo hacemos que funcione? Toda la acción se hace en el evento Timer1_Timer que es donde se cambia la imagen a mostrar cada vez que se ejecuta el evento del Timer (para mayor información acerca de como se usa el Timer en VB6, puedes ver este ejemplo que escribí hace tiempo, llamado Moviéndose en el tiempo...). Tengo una variable global de esta ventana, llamada intSprite, que indica la imagen a mostrar (en mi caso va desde 0 hasta 5 porque así dividí mi PictureClip) y en Timer1 lo actualizo y muestro esa imagen. Para accesar una parte de la imagen que está en un PictureClip Control, uso la función GraphicCell(número de la imagen).

El PictureClip Control funciona como un arreglo: automáticamente divide la imágen en el número de filas y columnas que yo le especifique (por eso es importante que todas las "celdas" de la imagen tengan el mismo ancho y alto) con las propiedades Row y Column. Por ejemplo, PictureClip1 tiene la propiedad Row=1 y Column=6 porque es una sola fila de 6 imágenes diferentes del mismo ancho y alto.

Para terminar de hablar de los controles de esta ventana, los botones de Iniciar y Parar (btnInicio y btnParar repsectivamente) solo habilitan y deshabilitan Timer1. El Form_Load solo pone la primera imagen de PictureClip1 en picAnimacion e inicializa intSprite en 0.

Hasta aquí todo es felicidad y alegría. Sin embargo, solo por mostrar como se vería con otra imagen, agregué otro PictureClip, llamado PictureClip2 (que original), y otro PictureBox, llamado picAnimacion2, para animar otra imagen. La ventana, en la vista diseño, se ve así:


Aunque esta imagen se presenta en 2 filas y 3 columnas, puedo seguir teniendo acceso a ellos mediante la función GraphicCell como expliqué con anterioridad. La numeración de las imágenes comienza en la fila 1 y luego continúa en la fila 2, ambas de izquierda a derecha. El código presenta unas pequeñas alteraciones que puedes observar aquí:


Si te fijas, lo único que aumenta es la referencia a PictureClip2 y a picAnimacion2. Espero que esto les haya sido útil. ¡Hasta la próxima!
Publicar un comentario
Related Posts Plugin for WordPress, Blogger...