Dos métodos para el efecto de RollOver View Comments
Voy a comenzar a escribir unos tutoriales sobre Flash bien básico, ya que tengo la idea de crear una mini librería de tutoriales en mi Blog. En este caso voy a empezar con un clásico que es el efecto RollOver.
Para generar un botón con RollOver en un sitio o proyecto de Flash lo mejor es no usar un Botón. Esto suena bastante raro pero es así, ya que el objeto botón dentro de Flash esta mucho mas limitado que un MovieClip.
Obviamente que se puede lograr un buen efecto con un objeto Botón, pero en este caso usaremos un MovieClip ya que es mas cómodo y fácil en cierto punto.
Bien voy a mostrarles dos formas de hacerlo, una con animación de entrada y salida, y otra con animación de entrada únicamente que será utilizada como animación de salida en reversa.
Con animación de entrada y salida:
Lo primero es crear un nuevo MovieClip que llamaremos en este ejemplo “boton” (muy creativo lo mió).
Dentro de este MC crearemos una animación que hará el botón cuando pasemos el Mouse por arriba y pegada a esa animación la animación que hará cuando saquemos el Mouse de arriba (animación de salida).
Puede ser cualquier cosa, un cuadrado moviéndose o cambiando de color. En este caso se moverá y cambiara de color.
La línea de tiempo queda algo así.
En la capa que llamé “as” hay 5 KeyFrames muy simples. Los que tiene la marca de la “a” simplemente tiene una acción de stop(); para que el cabezal se detenga ahí.
Los otros dos KeyFrames son etiquetas para indicarle a donde tiene que ir el cabezal con cada evento del usuario.
Una vez hecha la animación de entrada y salida lo que hacemos es tirar el botón de la librería al escenario y con el mismo seleccionado le ponemos como nombre de instancia “boton_mc”.
En la línea de tiempo creamos una nueva capa a la que llamaremos “as”, por ActionScript como hicimos dentro del MC del botón.
En esa capa escribiremos nuestro código que dirá algo así:
1 2 3 4 5 6 7 8 9 10 | function roll(target_mc){ target_mc.onRollOver = function(){ this.gotoAndPlay("in"); } target_mc.onRollOut = target_mc.onReleaseOutside = function(){ this.gotoAndPlay("out"); } } // roll(boton_mc); |
Bien, pasemos a explicar este código.
Primero lo que hacemos es crear una función que se llama “roll”, a la cual le pasamos como parámetro una variable que será el nombre del MC al cual le aplicaremos el efecto de RollOver.
Dentro de esta función estamos manejando dos eventos, aunque en realidad son tres.
El primero es onRollOver. Este evento lo que hace es que cuando el Mouse este arriba de nuestro MovieClip le de Play a la línea de tiempo del MC pasado como parámetro desde el KeyFrame llamado “in”.
El segundo evento es onRollOut, que hace que la línea de tiempo del mismo MC haga Play desde “out”.
Se puede ver que esta evento está igualado al evento onReleaseOutside para que haga lo mismo. Este evento reacciona cuando soltamos el botón del Mouse con el puntero fuera del área del MC.
Por fuera de la estructura de la función vemos que hay una linea que llama a la función pasandole como parámetro el nombre de nuestro MC que era “boton_mc”. De esta forma este MC adoptara los evento para si mismo.
Para probar pueden tirar otro MC de la librería y ponerlo al lado del otro y ponerle como nombre de instancia “boton2_mc” y en el codigo debajo de todo agregar otra llamada a la función pero con el nombre de este nuevo MC.
El código quedaría así:
1 2 3 4 5 6 7 8 9 10 11 | function roll(target_mc){ target_mc.onRollOver = function(){ this.gotoAndPlay("in"); } target_mc.onRollOut = target_mc.onReleaseOutside = function(){ this.gotoAndPlay("out"); } } // roll(boton_mc); roll(boton2_mc); |
De esta manera tiene dos botones con la misma programación sin repetir líneas de código.
Ahora veremos la otra forma que es mi preferida
Con animación de entrada y vuelta del puntero
Bueno este ejemplo es muy similar al anterior. Así que creamos un nuevo MovieClip llamado “boton”.
En este MC usaremos la misma animación que el anterior ejemplo pero sin animación de salida, así que nuestra línea de tiempo quedará algo así.
Muy bien, tiramos el MC en el escenario. Le ponemos nombre el nombre de instancia “boton_mc” como hicimos antes y creamos la capa llamada “as” donde escribiremos el siguiente código:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function roll(target_mc){ target_mc.onRollOver = function(){ this.onEnterFrame = function(){ this.nextFrame(); } } target_mc.onRollOut = target_mc.onReleaseOutside = function(){ this.onEnterFrame = function(){ this.prevFrame(); } } } // roll(boton_mc); |
Como vemos el código es muy parecido al ejemplo anterior, lo único que cambia es lo que hace con cada evento del usuario.
En el caso de onRollOver genera un enterFrame que hace que el cabezal avance un frame. Cuando llega al final de la línea de tiempo del MC “boton_mc” se detiene.
Y en el caso del onRollOut y onReleaseOutside lo que hace es lo mismo pero en vez de pasar al siguiente frame vuelve al anterior.
Si probamos la película vemos que ya anda perfectamente. Pero hay un error que para muchos puede resultar exagerado pero para mi es fundamental.
Como vemos en el código estamos generando un enterFrame. Esto hace que flash este constantemente haciendo esa acción sin parar.
En el caso de un solo enterFrame no hay problema, ya que no va a saturar la aplicación haciendo que se vea lento todo. Pero si es una aplicación con vario botones y además usamos otros enterFrames para otras cosas ahí si se complicaría un poco.
Por eso yo siempre que pueda “matar” los enterFrames lo hago. O sea, eliminarlos de la memoria, y así dejan de hacer la acción asignada al mismo.
Para hacer esto volvemos a la línea de tiempo de nuestro botón y en el primer y ultimo KeyFrame de nuestra animación ponemos el siguiente código:
1 2 | stop(); this.onEnterFrame = null; |
Con esto paramos el enterFrame liberado memoria y haciendo mas veloz y prolija nuestra aplicación.
Pueden probar también de agregar otro botón y al igual que en el otro ejemplo escribir la llamada a la función con el nombre del nuevo MC.
De más esta decir que de esta forma pueden poner toda la cantidad de botones que quieran.
Para terminar con este tutorial voy a explicarles brevemente para que caso vamos a usar cada uno de estos métodos de RollOver.
Con animación de entrada y salida: este método suelo utilizarlo cuando las animaciones de entrada y salida son distintas. Por lo tanto no me serviría hacer que vuelva la animación marcha atrás.
Con animación de entrada y vuelta del puntero: ese método suelo usarlo cuando la animación de entrada es idéntica a la de salida pero en reverso. Como los ejemplos de este tutorial.
Otra ventaja que tiene este método es que si la animaciones usadas son muy largas al sacar el Mouse de arriba del botón la animación vuelve desde el punto al que llego.
En cambio con el otro método el puntero salta a la etiqueta “out” produciendo un salto en la animación.
Bueno espero les haya servido y lo usen según sus necesidades, Saludos!
