Solo Photoshop

Tutoriales y recursos Photoshop

Bienvenido a SoloPhotoshop, donde encontrarás la mejor información sobre tutoriales, recursos y artículos de Adobe Photoshop!

Ingreso de Usuario

Recuperar contrasea

Registro de Usuario

Anunciar en SoloPhotoshop

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.

Descarga el archivo fla de este tutorial.

Comentarios de Efecto Zoom Gradual en Flash | Solo Photoshop

↑ Tutorial

  • elyon

    elyon

    2006-11-23 20:24

    :) esta de primera este tutorial :)M
  • cenacolovinciano

    cenacolovinciano

    2006-11-25 17:36

    excelento muy bien elaborado! M
  • jotita_1

    jotita_1

    2006-11-26 18:07

    uy ta bien hecho y muy explicado, espereo que no sea tu primera eh se ve que etas bien M
  • werewolf

    werewolf

    2006-11-28 09:32

    exelente!!!!!!!!!!!!!!!!!!!!!!!!!!M
  • nimbo

    nimbo

    2006-11-28 11:12

    Genial! Gracias!M
  • frank182

    frank182

    2006-12-08 21:33

    ke flash generalmente usan en estos tutoriales?M
  • Xbellz

    Xbellz

    2006-12-10 10:37

    muy buen tutorial !M
  • malmago

    malmago

    2006-12-12 08:47

    la verdad es que soy un total inexperto con el flash, la cosa es que no me funciono pues me sali que el codigo esta mal, lo he revisado y corregido varias veces y nada, (tengo macromedia flash 8). gracias de resto los tuto estan re vacanos.M
  • newjos3

    newjos3

    2006-12-12 22:14

    esta bueno espero que mande mas de estos tutoria me interezan muchoM
  • bel64

    bel64

    2006-12-15 13:41

    chicos si el tutorial no les funciona acegurense de poner abajo donde dice publicar que diga reproductor 7 actionscript 2 porque si en reproductor dice 8 no les va a funcionar Exelente tutorial... muy lindo y gracias!!M
  • thermo

    thermo

    2007-01-15 18:16

    MUY BUENOM
  • Lyoko21

    Lyoko21

    2007-01-19 09:15

    bakanes los tutoriales, con esto de guia puedo hacer cosas maravillosas gracias por tus guias atte Paulina M
  • Gibran

    Gibran

    2007-02-06 16:50

    hmmm ok!!! esto esta perfecto!!!! pero lo que necesito es que una vez que tenga el zoom pueda tener un scroll para ir de izq a derecha y otro scroll para ir arriba y abajo.. como le hago?? porfavor ayudenme!!!! me urge saber!!!!M
  • joakobenavides

    joakobenavides

    2007-05-25 19:26

    super bien explicao ¡ grax :)M
  • Black_Night

    Black_Night

    2007-08-21 16:46

    hombre esta excelente el tutorial... pero tengo una duda, dices en el tuto que si quieres hacerlo con una imagen mas grande tendras que modificar el codigo de Da Vince, perdona mi ingnorancia pero soy nuevo en esto del flash y me piedieron un efecto asi... si pudieras aclarar mi duda te lo agradeceriaM
  • henry_cs2002

    henry_cs2002

    2008-09-06 14:40

    Tengo la misma duda de GIBRAN, una vez que tenga el zoom necesito un scrollbar horizontal y vertical!!, ayudenme!!!M
  • lfcvalier

    lfcvalier

    2009-08-27 15:20

    no me funciona el link de descarga del tuto, como lo bajo?M

↑ Tutorial