Efecto Zoom Gradual en Flash

Tutorial Flash

Tutorial por Jmx de Estilo Flash

En esta ocasión Jmx les entregara un laborioso pero divertido efecto de zoom (aumento) aplicado a una imagen.

Gracias por seguir visitando este espacio de flash. En esta ocasión les entregare un laborioso pero divertido efecto de zoom, espero que sea de su agrado. ¿Comenzamos?.
Primero que nada hacer un documento de 310*500 píxeles de ancho y alto, en esta ocasión el color de fondo no importa.

Crear un nuevo símbolo (presionar ctrl. + F8), nombrarlo boton y de comportamiento botón

En este paso hacer un circulo de 25.0*25.0 píxeles colocarlo en coordenadas X=0 y Y=0. El color de línea y el color de relleno esta a tú criterio, presionar (F6) para insertar un segundo fotograma y de esta forma hacer un botón de dos estados. Modificar el 2do fotograma.

Crear un segundo símbolo nombrarlo imagen y de comportamiento clip de película.

Una vez en el símbolo imagen importar en este una imagen (valga la rebusnancia). Es muy importante que la imagen a importar tenga dimensiones de 481*750 y colocarla en coordenadas X= -206 y Y= -268. Si intentas hacerlo con una imagen de mayor o menor tamaño tendrás que modificar el código Da Vinci. Así como las coordenadas aquí mencionadas.

Regresar a la escena ya que será en esta parte en donde se desarrollara el resto del trabajo. Comenzar por cambiar el nombre a la capa 1 por bg, en esta capa dibujar un rectángulo sin borde y de color de relleno el que elijas. El rectángulo deberá medir 310*500 píxeles colocarlo en X=0 y Y=0. Espero que no tengas mayor complicación hasta esta parte del tutorial.

Insertar una segunda capa y nombrarla símbolos, en esta capa arrastrar desde la biblioteca el clip de película imagen, las coordenadas en donde quede ubicado no importa, hacer visible el panel de Transformar (presionar ctrl. + T), y reducir la imagen al 25 % tanto a lo ancho como a lo alto.

Ocultar la capa bg. Una vez reducida la imagen en el nombre instancia escribir picture y colocar esta imagen en X=110 y Y=0

Ahora arrastrar el símbolo boton y en el panel de acciones escribir el siguiente código
on (rollOver) {
zm = "5";
}
on (release, rollOut) {
zm = "0";
}

Arrastrar nuevamente el símbolo boton e insertar el siguiente código
on (rollOver) {
zm = "-5";
}
on (release, rollOut) {
zm = "0";
}

Insertar un campo de texto dinámico las dimensiones variaran dependiendo del tamaño de la fuente y el tipo de letra que sea utilizada, en la opción Var:zoomvalue. Colocar el campo de texto en medio de los dos botones como se muestra en la imagen.

Para terminar con el diseño de los botones, agregar solamente un texto estático + y otro – para cada uno de los botones, un texto zoom % y un margen que encuadre a los textos.

Agregar una tercera capa y nombrarla acciones, ocultar la capa símbolos. Seleccionar el fotograma y escribir en el panel de acciones-fotograma.
totalpoints = "4";
points = "099,099H099,099,099H-99";
totallines = "1";
lines = "0102";
eyez = "-500";
maxzoom = "300";
zoom = "10";

Insertar un fotograma vacío en el frame 2 (F7 es para insertar fotogramas vacíos), escribir el siguiente código.
setProperty("/picture", _x, "1000");
n = "1";
while (Number(n)<=Number(totalpoints)) {
set("x" add n, substring(points, (Number((n-1)*12)+1), 3));
set("y" add n, substring(points, (Number((n-1)*12)+5), 3));
set("z" add n, substring(points, (Number((n-1)*12)+9), 3));
n = Number(n)+1;
}
n = "1";
while (Number(n)<=Number(totallines)) {
set("pt1" add n, substring(lines, Number((n-1)*5)+1, 2));
set("pt2" add n, substring(lines, Number((n-1)*5)+3, 2));
n = Number(n)+1;
}
centerx = "160";
centery = "260";
zm = "0";

Insertar otro fotograma vacío en el frame 3 (F7), este fotograma deberá de ser etiquetado con el nombre de loop, y también escribir el siguiente código.
call("zoom");
call("imag");

Insertar otro fotograma vacío en el frame 4 (F7), y escribir en el panel de acciones-fotograma.
gotoAndPlay("loop");

Insertar otro fotograma vacío en el frame 5 (F7), etiquetar este fotograma con el nombre de imag, además de escribir en acciones-fotograma.
normalz = depth*depth;
n = "1";
while (Number(n)<=Number(totalpoints)) {
u = (depth - eyez)/(eval("z" add n) - eyez);
if (Number(n)<=9) {
set("2Dx0" add n, u * eval("x" add n) + centerx);
set("2Dy0" add n, u * eval("y" add n) + centery );
} else {
set("2Dx" add n, u * eval("x" add n) + centerx);
set("2Dy" add n, u * eval("y" add n) + centery );
}
n = Number(n)+1;
}
n = "1";
while (Number(n)<=Number(totallines)) {
duplicateMovieClip("/picture", "line" add n, n);
call("photo");
n = Number(n)+1;
}

Insertar otro fotograma vacío en el frame 6 (F7), etiquetarlo con el nombre de zoom. Y escribir el siguiente código.
zoom = Number(zoom)+Number(zm);
if (Number(zoom)>100) {
zoom = 100;
}
if (Number(zoom)<10) {
zoom = 10;
}
zoomvalue = zoom add "%";
depth = Number(-zoom*(eyez-maxzoom)/100)+Number(eyez);
call("imag");

Insertar otro fotograma vacío en el frame 7 (F7), etiquetar este fotograma con el nombre de photo, y escribir en acciones-fotograma
pt1 = eval("pt1" add n);
pt2 = eval("pt2" add n);
setProperty("line" add n, _x, eval("2Dx" add pt1));
setProperty("line" add n, _y, eval("2Dy" add pt1));
setProperty("line" add n, _xscale, eval("2Dx" add pt2) - eval("2Dx" add pt1));
setProperty("line" add n, _yscale, eval("2Dy" add pt2) - eval("2Dy" add pt1));

Con esto se da por concluido el tutorial, al ir insertando los fotogramas vacíos automáticamente se deberán de insertar los fotogramas de las capa bg y símbolos, si por alguna razón esto no sucede colocarse en el frame 7 de cada una de las capas mencionadas e insertar un fotograma presionando (F5).

P.D. Presionar ctrl. + enter para visualizar la película. Espero que sigan apoyando este sitio. Si tienen algún tutorial y quieren que sea publicado en este espacio solamente háganlo saber. Hasta muy pronto.

Descarga el archivo fla de este tutorial.