DESIGNAID

Herramientas claves para representar tus ideas

Crea un cursor personalizado en Flash

pildora_flLos cursores son la manera más rápida de personalizar una presentación en flash o una animación de tu página web. Puedes cambiar la aburrida imagen de la flecha de tu ratón para substituirla por la imagen que quieras. WordPress no me permite postear archivos de Flash aqui (gracias por nada WordPress) asi que haz click en la siguiente imagen para ver la práctica terminada:

quiero-ver-practica

Esto será lo que haremos hoy….y lo mejor es que lo haremos super rápido y muuuuyyy fácil. (algo que nunca digo no? jeje) Esta práctica es super popular y creo que es una de las primeras cosas que queremos hacer cuando empezamos a trabajar con Flash. Usaremos un poco de programación para lograrlo. (gracias Ana por recordarme hacer este tutorial)

Asi que  empecemos!

PASO 1: Empiezo por crear un documento nuevo. Yo usé Flash CS3 Professional en inglés para esta práctica asi que si usas la misma versión asegúrate de seleccionar un documento basado en Actionscript 2.0. Muchos de nosotros nos hemos estado quejando de lo complejo que resulta el nuevo Actionscript 3.0 (si es contigo Adobe) asi que por eso contamos todavia con  la versión 2.0 y no tenemos miedo de usarlo….peeeeero en fin esa es otra historia….

A ver todos griten: Porquee Adobe?? porqueee A3.0 es asiiii??? eeeen fin.

A ver todos griten: Porquee Adobe?? porqueee A3.0 es asiiii??? eeeen fin. Sigamos.

continuemos: Dibuja la imagen que quieras colocar como cursor. Puedes dibujar tu mismo el vector o usar una foto. Yo usé una foto de mi mano reduciéndola en Photoshop a un tamaño lo suficientemente pequeño para hacerla cursor.  En Photoshop le puse un efecto simple de sombra para simular un efecto tridimensional en el cursor.

Ahora solo es cuestión de insertarla en un archivo nuevo de Flash. Busca en el menu de Flash: FILE > IMPORT… e inserta tu imagen en el escenario. Luego selecciona tu imagen y conviertela en un botón en el menú MODIFY > CONVERT TO SYMBOL…

Convirtiendo mi imagen a un boton. Le coloque de nombre "boton-mano" que nombre tan inteligente no?

Convirtiendo mi imagen a un boton. Le coloque de nombre "boton-mano" que nombre tan inteligente no?

PASO 2: Ya tenemos la imagen como un botón, ahora haz doble click encima del botón y completa los 4 estados. Puedes hacerlo dibujando o importando más imágenes. yo usé otra fotografía de mi mano esta vez cerrada para el estado de DOWN (o mejor dicho “Presionado” si tienes la versión en español)  los demás fotogramas pueden ser la misma imagen que importamos al principio.  Aqui puedes ver las tripas de mi botón ya listo:

Mi botón con sus estados, aqui se ve el estado Down. sorry el presupuesto de Designaid no alcanza para contratar modelos de manos, por eso usé las mias :P

Mi botón con sus estados, aqui se ve el estado Down. sorry el presupuesto de Designaid no alcanza para contratar modelos de manos, por eso usé las mias😛

PASO 3: Vuelve a la escena1. (simplemente haz click en el texto “Scene1” que ves en la imagen anterior) Ahora vamos a repetir lo que hicimos en el paso 1:  con el boton de la mano seleccionado, busca el menu de Flash y selecciona MODIFY > CONVERT TO SYMBOL… y convertiremos ese botón ahora en un clip de pelicula.

Nombrando mi clip desde la escena 1. De donde habré sacado tan brillante inteligencia para crear nombres?? XD

Nombrando mi clip desde la escena 1. De donde habré sacado tan brillante inteligencia para crear nombres??😄

Ahora tenemos un botón que está dentro de un clip de pelicula.

PASO 4: Ya estamos terminando, todo está listo y sólo falta la programación.  Haz doble click en tu clip de pelicula, ahora estarás dentro del clip de mano. En el primer fotograma colocaremos la programación, así que  selecciona el primer fotograma de la linea del tiempo y busca tu panel de Actions o Acciones. (si no lo ves haz click derecho encima del primer fotograma y selecciona Actions) en la ventana de acciones  introduce este código:

Mouse.hide()

startDrag(“_root.cursor”, true);

Deberiamos ver algo asi:

El código para el fotograma 1. Fijate bien que estés dentro del clip de película ya que allí es donde va el código.

El código para el fotograma 1. Fijate bien que estés dentro del clip de película ya que allí es donde va el código.

Vamos bien hasta ahora. Sólo nos faltan los  pasos finales.

PASO 5: Ajustar el botón al punto de registro: Estando dentro del clip de mano fijate que hay una cruz muy pequeña en el extremo izquierdo superior, este es el punto de registro. lo que haremos sera ubicar esa marca en el centro de la imagen.

Aqui esta el famoso punto de registro. No es por fastidiarlo, pero lo moveremos de posición al centro de la imagen. Sólo mueve el clip de la mano para que la cruz queda al medio de la imagen.

Aqui esta el famoso punto de registro. No es por fastidiarlo, pero lo moveremos de posición al centro de la imagen. Sólo mueve el clip de la mano para que la cruz quede en el centro de la imagen.

Este punto de registro marca exactamente la posición real de nuestro cursor, asi que para lograr un mejor efecto lo que haremos será simplemente usando la herramienta de selección (flecha negra en nuestro panel de herramientas) moveremos nuestro botón para que el punto de registro quede en el centro de la mano. al final deberia verse algo asi:

Asi deberia ubicarse el punto de registro. Que manos tan fotogénicas despues de todo...

Asi deberia ubicarse el punto de registro. Que manos tan fotogénicas despues de todo...

PASO 6: Este es el paso final. Vuelve a la escena 1. Aqui haremos el último paso que es muy simple. Sólo selecciona el clip de la mano, y en la barra de propiedades (parte inferior de la pantalla) colocale de nombre “cursor” a esa instancia. Guíate por esta imagen:

Seleccionando la imagen desde la escena1 colocale este nombre aqui. Terminado! (ninguna mano fue herida durante la filmación de este post.)

Seleccionando la imagen desde la escena1 colocale este nombre aqui. Terminado! (ninguna mano fue herida durante la filmación de este post.)

En los próximos post de Flash seguiré utilizando esta práctica para los siguientes post que estaré haciendo.

Espero les gusten y  ayuden😉

Saludos a todos.

Luis S.

6 comentarios»

  Ana wrote @

q bueno quedo…gracias!!!!!!
voy a ponerlo en practica cuanto antes….

Seria espectacular que en el presionado la mano dejara la marca del movimiento, como si estuviera rasgando..jajaja……alli le dejo otra idea para tutorial!!!!!!!

Saludos , Ana

  diego wrote @

huu que bueno ya lo voy a implementar con mi web gracias bro

  francscio wrote @

hoye funci pero no se com vinculq solo vincula cuando esta por por adebajo de la capas

  Luis Suarez wrote @

Hola Francisco. No entiendo mucho tu pregunta pero el orden de las capas influye cuando trabajas en flash. trata de que las capas del cursor esten por encima de todas las demas.

  fabian camargo wrote @

muchas gracias a kienes hacen esto posible… de permitirle a otros aprender lo que ustedes ya conocen… nos ayuda a salir adelante. es una pag creativa, informativa y educativa… sigan asi…

  nana wrote @

Hola como estas esta genial ya hice mi cursor pero al momento de que paso en otros botones que tambien ya estaban animados no se ven las animaciones de los estados que es lo que sucede….muchas gracias


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: