Hola nuevamente con ustedes amigos y amigas. En esta ocasión tengo para ustedes un tutorial mas el cual consta de un sensacional Efecto De Lupa, el efecto es algo simple y sencillo de realizar ya que este solamente consta de dos Clips De Película y en uno de los clips hacer una mascara, el cual servirá como efecto de lupa. También es necesario importar una Imagen a la biblioteca. ¿Comenzamos?.
Primero crear un documento de dimensiones que correspondan a la imagen a importar en esta ocasión el documento será de 499*337 píxeles de ancho y alto respectivamente. El color de fondo no importa ya que la imagen cubriara todo el espacio del documento.
Insertar un símbolo (ctrl. + F8), llamarlo imagen-real y de comportamiento Clip de película. Como ven estos dos pasos es de lo más sencillo de realizar.
Una vez en el símbolo importar (ctrl. + R) una imagen al escenario, después de esto colocar la imagen en coordenadas X = 0.0 y Y = 0.0.
En este paso crear un nuevo símbolo (ctrl. + F8) nombrarlo imagen-amplificada, y darle como comportamiento Clip de película.
Para que el trabajo salga de la mejor forma es necesario seguir al pie de la letra los siguientes pasos ya que las coordenadas como la amplificación de la imagen están fuertemente ligadas a la programación action scrip.
En el símbolo imagen-amplificada es prácticamente en donde se desarrollara el total del efecto. Comenzar por nombrar lupa a la capa y después diseñar la lupa que servirá como pantalla para hacer el trabajo de aumentar la imagen. Lo importante de este efecto es el tamaño del círculo, aquí se dibujo un círculo de tamaño 45 * 45 píxeles, y el total de ancho y alto de la lupa es de 68.8 * 69.2 colocar el diseño en coordenadas X = -44.0 y Y = -20.0.
Insertar una capa por debajo de la primera y nombrarla mascara, en esta capa dibujar un circulo de 45 * 45 píxeles, y colocarlo en coordenadas X = -20.0 y Y = -20.0. ya que este es el espacio que deja el diseño anterior.
Insertar una capa mas por debajo de las anteriores nombrarla imagen, y en ella arrastrar desde la biblioteca el símbolo imagen-real. Las coordenadas en las cuales quede la imagen no importan ya que en el siguiente paso se corregirán estas.
Aquí es necesario poner un nombre de instancia al Clip de película, el cual va hacer zoom. Hacer visible el panel de Transformar (ctrl. + T) y aumentar a 200 % la imagen después de lo anterior colocar la imagen en coordenadas X = 0.0 y Y = 0.0.
Seleccionar la imagen y abrir el panel de Acciones – Clip de película e insertar el siguiente código.
onClipEvent (enterFrame)
{
xmove = _root.cursor._x;
ymove = _root.cursor._y;
_x = (-3 – xmove) * 2
_y = (-3 – ymove) * 2
}
Por ultimo hacer clic en la capa mascara con ayuda del botón derecho del ratón, y luego seleccionar la opción Máscara para transformar la capa en máscara valga la rebusnancia.
Para concluir el tutorial regresar a la escena para hacer unos cuantos ajustes. Primero cambiar el nombre a la capa por el de real, después arrastrar desde la biblioteca el Clip de película imagen-real colocar el símbolo en coordenadas X = 0.0 y Y = 0.0.
Insertar un capa por encima (arriba), nombrarla lupa y en esta arrastrar desde la biblioteca el Clip de película imagen-amplificada, escribir como nombre de instancia cursor colocar el símbolo en coordenadas X = -44.0 y Y = -20.0.
Ahora seleccionar el fotograma de la capa lupa y abrir el panel de Acciones – Fotograma y luego escribir el siguiente código. Con esto se da por concluido el tutorial.
_root.onLoad = function() {
cursor.startDrag(true);
Mouse.hide();
};
P.D. Presionar ctrl. + enter para visualizar el efecto. Que tal Pura vida Verdad, si deseas publicar tutoriales flash en este espacio solamente hazlo saber. Nuevamente agradezco los comentarios y sugerencias.
Visualizar archivo swf de este tutorial
Descarga el archivo fla de este tutorial
Artículos relacionados:
Al igual que la persona de arriba me manda errores en el codigo,que me hacen falta parentesis
me manda errores en esto
onClipEvent (enterFrame)
{
xmove = _root.cursor._x;
ymove = _root.cursor._y;
_x = (-3 – xmove) * 2
_y = (-3 – ymove) * 2
}
la verdad esta bueno tu tutorial, pero el primer codigo me okasiono lios no me permite hacer nada
= chido
onClipEvent (enterFrame)
{
xmove = _root.cursor._x;
ymove = _root.cursor._y;
_x = (-3 – xmove) * 2
_y = (-3 – ymove) * 2
}
see esto no me funsiona
me pasaba igual, porque hacia un copy-paste, si lo escriben, el problema se soluciona