EFECTO ZOOM EN FLASH MX

Hola que tal amigo estudioso del mundo flash, ha llegado la hora de experimentar algo novedoso y sensacional. El siguiente tutorial trata sobre como aumentar una imagen (zoom), y como moverla con ayuda del ratón. Espero que sea de su agrado, ¿comenzamos Big Brother?.
Comenzar por crear un documento de dimensiones 310*400 píxeles de ancho y alto. Ya lo saben, primero seleccionar el tamaño en la barra de propiedades y después escribir las dimensiones.

Insertar un nuevo símbolo nombrarlo zoom_imagen, y darle como comportamiento botón. La ruta para insertar el símbolo es, presionar ctrl. + F8 ó Insertar >> Nuevo símbolo.

Una vez instalados en el símbolo dibujar un ovalo de dimensiones 24*20 píxeles, el color del ovalo es decisión del practicante, yo aplique un degradado como color de relleno, el cual esta en el archivo fla.

Ahora crear otro símbolo el cual albergara a la imagen con la cual es trabajara. Nombrar el símbolo animar_imag, y darle como comportamiento clip de película, la ruta para insertar el símbolo es ctrl. + F8 ó Insertar >> Nuevo símbolo.

Como se menciono en el paso anterior en este clip de película, importar una imagen, presionar ctrl. + R ó Archivo >> Importar >> Importar a escenario para este fin. La imagen importada es de dimensiones 440*739 píxeles, colocarla en coordenadas X=0 y Y=0.

El siguiente paso es regresar a la escena para en ella realizar todo el desarrollo de la animación. Dibujar en la primera capa un rectángulo de las mismas dimensiones que el documento 310*400 píxeles y colocarlo en coordenadas X=0 y Y=0, dibujar el rectángulo sin borde y como color de relleno el degradado utilizado en el botón.

Insertar una segunda capa y en esta arrastrar desde la biblioteca el clip de película animar_imag. Después hacer visible el panel de Transformar seleccionar la imagen que se inserto en la escena y escribir 50.0% tanto a lo ancho como a lo alto. Luego escribir como nombre de instancia test, colocar la imagen en coordenadas X=45 y Y=10. Abrir el panel de acciones y seleccionar la imagen para después escribir el siguiente código.
onClipEvent (mouseDown) {
            if (this.hitTest(_root._xmouse, _root._ymouse, false)) {
                        this.startDrag();
            }
}
onClipEvent (mouseUp) {
            this.stopDrag();
}

Este paso es muy simple primero agregar una tercera capa, y luego solamente hay que arrastrar  tres veces el símbolo botón colocarlo en las coordenadas marcadas, para después insertar el código siguiente.
on (release) {
            test._yscale= “50″;
}

on (release){
            test._xscale= “50″;
}

Arrastrar nuevamente el símbolo botón  y escribir el código correspondiente.
on (release) {
            test._yscale= “100″;
}

on (release){
            test._xscale= “100″;
}

Otra vez arrastrar el símbolo botón y ahora escribir este código.
on (release) {
            test._yscale= “125″;
}

on (release){
            test._xscale= “125″;
}

Y por ultimo insertar tres campos de texto dinámico, en el primero escribir aumentar 100%, en otro escribir aumentar 150% y en el ultimo  aumentar 250%, y también seleccionar la cacilla Mostrar borde alrededor del texto.
Con esto queda concluido el tutorial, espero que cumpla con las expectativas. Espero sus comentarios acompañados de e-mail.

P.D. Presionar ctrl. + enter para ver el resultado de la película. Como se menciono al principio del tutorial una vez aumentada la imagen, mover la con ayuda del ratón, si por alguna razón aumentan la imagen al máximo y después la reducen al mínimo esta talvez ya no la puedan visualizar, se recomienda aumentar la imagen gradualmente y reducirla de la misma forma. Hasta muy pronto.

Visualizar archivo swf de este tutorial

Descarga el archivo fla de este tutorial

Artículos relacionados:

• Efecto de Zoom a lo Alto en Flash 8
• Programación de Efecto Zoom con Botones De Desplazamiento (Segunda Parte)
• Efecto de Zoom a lo Ancho en Flash 8
• Programación de Efecto Zoom con Botones De Desplazamiento (Tercera Parte)