Comunidad de diseño web y desarrollo en internet online

Botón con fade-in y fade-out animado

Nota: Para llevar a cabo con éxito este tutorial, es necesario tener conocimientos básicos de programación de ActionScript así como del uso de símbolos de flash, en este caso de botones y movie clips (incluyendo sus nombres de instancia).

He notado que a muchos de los que manejamos Flash en cualquiera de sus versiones, hemos llegado al momento de querer hacer botones que tengan un rollOver y un rollOut animado para hacer más atractivo (visualmente) nuestro botón. El recurso básico para lograrlo es meter movie clips con las animaciones correspondientes en cada estado del botón, es decir, uno para el over y otro para el up. Obteniendo algo así:


Botón de ejemplo

Con éste método tenemos el problema de que si pasamos el puntero demasiado rápido sobre nuestro botón, la animación se muestra cortada, ésto es debido a que nuestro botón obedece a la perfección sus estados.

Estados del
Botón
Estados del Botón

Dicho de otra forma, si el puntero no está el suficiente tiempo sobre el botón como para que la animacion q tenemos en nuestro Over se reproduzca por completo y sacamos el puntero, ésta animación se interrumpe y muestra la que está en Up.

Para resolver esto y tener la oportunidad de crearle una animación más "estética y atractiva" a nuestro botón, podemos hacer lo siguiente:

Creamos nuestro objeto, en este ejemplo un rectángulo, y presionando F8 lo convertimos en un movie clip con nombre de instancia mc_animado.

Nombre de Instancia mc_animado
Nombre de Instancia mc_animado

Dentro de nuestro mc_animado, creamos la animación que queramos lograr, en este caso usaremos un Motion Tween que modifique el tinte de nuestro objeto y pondremos en el frame del inicio y del final de esa animacion un stop();.

Linea de Tiempo
Asi debe quedar la linea de tiempo

Una vez que ya tenemos nuestra animación, vamos a nuestra línea de tiempo principal (stage fuera del movie clip), seleccionamos nuestro mc_animado y volvemos a presionar F8 para convertirlo nuevamente en movie clip, esta vez no es importante poner o no nombre de instancia (al menos, no para este tutorial).

Dando doble click en nuestro movie clip (que para nombrarlo le diremos mc_todo), entramos a su línea de tiempo y creamos un nuevo layer que contendrá el botón (en este caso transparente).

Capas
Capas

Brevario cultural sobre cómo hacer un botón transparente

Un botón transparente no es mas que sólo el área de Hit de un botón cualquiera. Entonces para hacer uno dibujamos el área, presionamos F8 para convertirlo en botón, entramos a su línea de tiempo para ver sus 3 estados y su área de golpe y nos aseguramos de arrastrar el frame Up hacia el Hit, de éste modo sin tener nada a la vista, podrémos usar ese hit como si fuera del mc_animado.

Botón
Transparente Botón
Transparente
Botón Transparente

Una vez que tenemos nuestro botón transparente en la línea de tiempo del "mc_todo" en su respectivo layer, le asignamos el nombre de instanca btn_trans,

Botón
Transparente
Botón Transparente

Y presionando F9 abrimos nuestro panel de acciones para introducir el siguiente código:

//asignamos la acción del Over para
que actue sobre nuestro movieclip
//que queremos reproducir
on (rollOver) {
        mc_animado.onEnterFrame = function () {
                //le decimos a ese MC que si se encuentra en cualquier
número frame
                //diferente a 41, avance al siguiente; es decir, si está en el 1
                //avanzará al 2, después al 3...y asi sucesivamente                
                
                if (this._currentframe != 20) {
                        this.nextFrame();
                }
                //usando el "else" tomamos la comparativa que nos
acomoda, que es "==".
                //le decimos a ese MC que si se encuentra en el frame 41 se detenga
                //y borre el "onEnterFrame"
        
                else {
                        this.stop();
                        delete this["onEnterFrame"];
                } // end if
        };
}

//asignamos la accion del RollOut para que actue sobre
nuestro movieclip
//que queremos reproducir
on (rollOut) {
        mc_animado.onEnterFrame = function () {
                //le decimos a ese MC que si se encuentra en cualquier
número frame
                //diferente a 1, retroceda al anterior; es decir, si está en el 41
                //regresará al 40, después al 39...y así continuamente.
        
                if (this._currentframe != 1) {
                        this.prevFrame();
                }
                //usando el "else" tomamos la comparativa que nos
acomoda, que es "==".
                //le decimos a ese MC que si se encuentra en el frame 1 se detenga
                //y borre el "onEnterFrame"
        
                else {
                        this.stop();
                        delete this["onEnterFrame"];
                } // end if
        };

}

Una vez hecho lo anterior, hemos logrado algo como esto:


Botón de ejemplo

Con un poco de mas labor, tiempo y creatividad podemos obtener algo así:


Botón de Rosvel
/rosvel

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate