Taller Webmaster

Tutoriales para Webmasters

Bienvenido a Taller Webmaster, donde encontrarás la mejor información sobre tutoriales y recursos para webmasters!

Ingreso de Usuario

Recuperar contraseña

Registro de Usuario

Publicidad

Boton con Efecto Rollover Zoom y Texto

Adobe Flash efectos Rollover y Zoom

 

Tutorial por Jorge Oyhenard (elQuique)

En este tutorial, elQuique nos muestra como realizar, paso a paso, unos botones con efecto RollOver de Zoom en el texto y desplazamiento de la imagen del mismo.

Este es otro tutorial, que nace a raíz de una consulta realizada en nuestro Foro Creativo. En base a las respuestas que fuimos dando, a la consulta, logramos esto, de merecer ahora compaginarse en un tutorial, por si a otra persona le sirve, ya que nos gusta compartir trucos, e ideas sobre Adobe Flash.

Por tanto veremos como realizar, paso a paso, unos botones con efecto RollOver de Zoom en el texto y desplazamiento de la imagen del mismo.

Efecto de Desplazamiento en la imagen

  1. Lo primero, sera arrastrar una imagen a la zona de trabajo. Esta imagen la podemos traer desde un programa externo, pegarlo desde el porta papeles o traerla desde nuestra biblioteca.
  2. Lo siguiente es convertir esa imagen en un símbolo del tipo Button (Botón), para convertirla, la seleccionamos, y luego utilizamos Insert (Insertar), New Symbol (Nuevo Símbolo), o presionamos F8, que es lo mismo.
  3. Le vamos a dar de nombre btn_elQuique.
  4. Luego con doble click, ingresamos a ese botón recien creado.
  5. En los estados vamos a tener Up que es el estado normal del botón, y en Over seleccionas la imagen en lo pones en posición y: -10. Como Over es el evento que se sucede, cuando el mouse se posiciona sobre el botón, y le dijimos que la imagen vaya arriba hasta y = -10, con esto se logra que al pasar el mouse por encima la imagen quede mas arriba, logrando el efecto deseado de desplazamiento.

Desplazamiento de la Imagen Arriba

Acá vemos el resultado de esta primer etapa, así les queda claro y vamos paso a paso.

Y acá descargas el archivo Fla para Flash 8, hasta este momento así comparas con el tuyo: Descargar Boton_Arriba.zip

Cambiando el Texto según el botón

Ahora que tenemos el efecto de desplazamiento de la imagen, vamos a realizar el siguiente paso, donde al pasar por encima de cada botón, haremos aparecer un texto descriptivo del mismo, ahí vamos.

  1. Primero vamos a agregar un elemento Texto con la herramienta texto.
  2. Debemos tener en cuenta que este texto debe ser del tipo Dinámico (o sea que cambia, no sera fijo ya que depende del botón)
  3. También tener en cuenta que le debemos dar un nombre de VARIABLE, para que al programar el efecto podamos identificar ese elemento de texto dinámico, el nombre que le daremos sera: txt_dinamico.

Pueden ver en la imagen, donde resaltamos los puntos mencionados, así lo realizan con cuidado.

Caja de Texto Dinamico

Ahora que ya tenemos el elemento de texto dinámico, debemos programar en cada botón un pequeño ActionScript, para que aparezca el mensaje indicado que se desea, en cada botón Para esto hacemos lo siguiente:

  1. Seleccionamos el botón 1 o sea el de la izquierda.
  2. Vamos a la seccion de Programación de Acciones, con Window (Ventanas), Actions (Acciones), o bien presionando F9, que hace lo mismo.
  3. En esa ventana, le programamos un EVENTO que se ejecutara al pasar por el botón por encima, con el mouse, esto se logra con el evento rollOver.
  4. Ahora seleccionamos el botón 2 y hacemos lo mismo, para programar el otro rollOver

En la imagen se puede ver, en imagenes, lo que acabo de mencionar

ActionScript para el Texto Dinamico

El código ActionScript, es el siguiente:

on (rollOver) {
      _root.txt_dinamico = "Es la foto 1";
}

Ese código ActionScript, hace que la Caja de Texto Dinámica (llamada txt_dinamico), tome el texto indicado entre comillas. Como ven el texto es distinto según, sea uno u otro botón, por tanto con eso se logra, el Efecto de Texto Dinámico, al pasar con el mouse sobre el botón, sumado al desplazamiento de la imagen, que ya habíamos realizado.

Acá vemos el efecto funcionando:

Y acá puedes realizar la descargas del archivo Fla para Flash 8, hasta el momento: Descargar Boton_Arriba_texto.zip

Comentarios de Boton con Efecto Rollover Zoom y Texto

↑ Tutorial