Foros
Botón con fade in y fade out
Autor Fecha: 24 de Febrero del 2006 a las 00:15:10   Descripción: Botón con fade in y fade out
Sin avatar
Sexo: Masculino
Edad: 18 años
Ubicación: monterrey, n.l
País:
Mensajes: 167
Para llevar a cabo con éxito este tutorial, es necesario tener onocimientos 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 us versiones, hemos llegado al momento de querer hacer botones que engan 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í:

[align=center:41e89c26a2][flash width=93 height=34:41e89c26a2]http://www.cristalab.com/files/ejemplos/in-out-boton/btn_avance_reversa_con_salto.swf[/flash:41e89c26a2][/align:41e89c26a2]

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.

[align=center:41e89c26a2][/align:41e89c26a2]

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.

[align=center:41e89c26a2][/align:41e89c26a2]

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();.

[align=center:41e89c26a2][/align:41e89c26a2]

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).

[align=center:41e89c26a2][/align:41e89c26a2]

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.

[align=center:41e89c26a2] [/align:41e89c26a2]

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,

[align=center:41e89c26a2][/align:41e89c26a2]

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

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:

[align=center] [flash width=93 height=.34]http://www.cristalab.com/files/ejemplos/in-out-boton/btn_avance_reversa.swf[/flash]

Ya con un poco mas de tiempo podemos aser botones como queremos como en mi pagina Starcraft Online yse cuando estes sobre se baya parabajo y cuando este fuera del boton se bualba para arriba Bailando

Bueno espero que les sirva

Cual quir duda o cosa Posten a qui mismo Fumador

SaludosFeliz

[size=9:41e89c26a2] Fuente agarada de [/medida]cristalab
Individual Perfil Privado Website
Autor Fecha: 24 de Febrero del 2006 a las 13:15:57   Descripción: Ninguna
Sin avatar
Sexo: Masculino
Edad: 18 años
Ubicación: monterrey, n.l
País:
Mensajes: 167
Espero que les guste el manual Bailando
Individual Perfil Privado Website
Autor Fecha: 24 de Febrero del 2006 a las 13:44:22   Descripción: Ninguna
Sin avatar
Sexo: Masculino
Edad: 16 años
País:
Mensajes: 247
Bueno, bueno... Está bastante interessante Si Haber si algun dia de estos, tengo tiempo de probarlo y te digo algo Contento

Primero tengo otros "projects" al canto, no por realizar, sino por solucionar Ja ja

Saludos!! Guiño
Individual Perfil Privado Website
Autor Fecha: 24 de Febrero del 2006 a las 15:01:15   Descripción: Ninguna
Sin avatar
Sexo: Masculino
Edad: 18 años
Ubicación: España ©
País:
Mensajes: 680
Muy bueno amigo ZoTo Muy bien . Pronto lo añadire al modulo manuales Guiño

Individual Perfil Privado
Autor Fecha: 24 de Febrero del 2006 a las 20:03:39   Descripción: Ninguna
Sin avatar
Sexo: Masculino
Edad: 18 años
Ubicación: monterrey, n.l
País:
Mensajes: 167
Pues no hise todo el manual yo solo fue con ayuda de una pagina pero la ayuda mayor esque cualquier duda digamelo para ayudarles Feliz

Saludos
Individual Perfil Privado Website