Efecto Zoom Gradual en Flash | Solo Photoshop
Tutorial Flash
Tutorial por Jmx
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.
Comentarios de Efecto Zoom Gradual en Flash | Solo Photoshop
↑ Tutorial
elyon
2006-11-23 20:24
cenacolovinciano
2006-11-25 17:36
jotita_1
2006-11-26 18:07
werewolf
2006-11-28 09:32
nimbo
2006-11-28 11:12
frank182
2006-12-08 21:33
Xbellz
2006-12-10 10:37
malmago
2006-12-12 08:47
newjos3
2006-12-12 22:14
bel64
2006-12-15 13:41
thermo
2007-01-15 18:16
Lyoko21
2007-01-19 09:15
Gibran
2007-02-06 16:50
joakobenavides
2007-05-25 19:26
Black_Night
2007-08-21 16:46
henry_cs2002
2008-09-06 14:40
lfcvalier
2009-08-27 15:20
↑ Tutorial