Como se hacen botones con animación para los dos lados? cuando se activa y suelta?

[Halduke]

como se hacen esos botones que al apretarlos ocurre una pequeña animacion y al soltarlos ocurre otra pequeña animacion pero al reves (en el boton). Se da en muchas páginas...como estas :

http://www.spacex.com/ (los botones de arriba: company, falcon, etc)

o

http://www.maxfli.com/ (aca los botones de abajo: sign up, company, etc)

[lucasiramos]

Hola podes hacer asi:

Crea un MovieClip (el "boton" será un movieclip). Luego hace las dos animaciones en la linea de tiempo del mc. Supongamos desde el frame 1 hasta el 10 el boton se "ilumina". Luego del 11 al 20 se "apaga". Deberás hacer otra capa en la linea de tiempo del movieclip con un stop en el frame 1 y otro en el frame 10 (que es donde termina la 1º animación)

Luego arroja una instancia del MovieClip y coloca el sgte código

on (rollOver) {
this.gotoAndPlay(2);
}
on (rollOut) {
this.gotoAndPlay(11);
}

Ctrl + enter para probar, y debiera funcionar...

Bueno, espero que te sirva.

Saludos. Lucas

[goc00]

Ese es un método no muy eficaz, ya que, si el usuario sale del mc cuando este vaya en la mitad saltará a la otra parte de la animación y se verá bastante mal. El método que les dejo ahora es para controlar un mismo espacio en la línea de tiempo y que es sumamente fácil

1) Crea un mc que será el que tendrá el efecto, por ejemplo un fade in o que se yo, lo que quieras. Le pondremos como nombre de instancia "efecto".

2) Crea otro mc vacío con nombre de instancia "control", ahora:

- En el 1 frame del mc pon un stop();
- En el 2 frame del mc pon el sgte. script:

Código:

if(_parent.efecto._currentframe==1) { gotoAndStop(1); }
else { _parent.efecto.gotoAndStop(_parent.efecto._currentframe-1); }

- En el 3 frame del mc pones gotoAndPlay(2);

3) Ahora en un botón, pon lo sgte.:

Código:

on(rollOver) {efecto.play();}
on(rollOut) {control.play();}

Ahora cuando te pongas sobre el botón la animación partirá y cuando te salgas del botón la animación retrocerá, o sea, el efecto que quieres

P.D.: No sé por qué al escribir el script el _currentframe queda separado, bueno, ten la precaución de que es _currentframe-1 y NO _current frame-1

[alamarcheta]

Hola! goc00 he estado probando de meter la botonera como tu dices pero no logro hacerlo funcionar. Si fueras tan amable de madarme un fla con un ejemplo. Es que soy novel en esto del flash.

Gracias y saludos

[Bandit]

Hola alamarcheta:
Lo que dice goc00 si funciona, vamos a explicar un poco más lo que tienes que hacer, por ejemplo para un botón que vaya de alpha 100 a 0:
En el primer MC en la capa 1 frame 1 dibuja un rectángulo que va a ser tu botón lo agrupas, en el frame 10 coloca un fotograma clave y le das Interpolación de movimiento, seleccionas el rectángulo del frame 10 y vas a panel de propiedades y allí donde dice: Color abres el combo y pones el alpha a 0.
Creas otra capa y en los frames 1 y 10 coloca un stop(); al ponerlo en el escenario le pones como nombre de instancia: efecto
Ahora crea otro MC en la capa 1 frame 1 coloca un stop(); en el frame 2:
if (_parent.efecto._currentframe == 1) {
gotoAndStop(1);
} else {
_parent.efecto.gotoAndStop(_parent.efecto._current frame-1);
}
y en el frame 3: gotoAndPlay(2); y al ponerlo en el escenario le pones como nombre de instancia: controlador.

Espero haberte sido de ayuda y ya no necesites un .fla de ejemplo.

[chascon]

lo trate de hacer y no me funciono...
F1, F1, F1.
Gracias!

[alamarcheta]

Buenas!

He probado lo que me dices Bandit y nada. Y también el tutorial del F1 chascon y no me sale. Que burro que soy!!! ¿Algún tutorial o ejemplo para enterarme de la película?

Perdonar las molestias y saludos

[alamarcheta]

Ya lo conseguí!! Este es el .fla que he utilizado.

Gracias a todos por vuestras respuestas

[alamarcheta]

Buenas. Ya se que soy un poco pesaico, pero es tengo otro problema. Con esta botonera ya consigo la animación pero lo malo es que ejecuto la animación desde otro botón y lo que quiero es que sea el mismo botón el que contenga la animación. Había hecho una chapucilla, que era poner el botón que ejecuta encima de la animación, pero claro, si se tiene ver algo este te lo tapa.

[Bandit]

Hola alamarcheta:
Vi tu .fla y sinceraente no entiendo lo que quieres hacer, haz puesto dos botones con el mismo código y un MC debajo del segundo botón.
Si explicas con mayor detalle lo que pretendes hacer, podremos ayudarte mejor.

[alamarcheta]

Esto es lo que queria hacer. Lo he conseguido metiendo un botón con solo la zona activa. Siento haberos molestado pero no controlo mucho de flash.

Saludos y gracias.

[Bandit]

No se puede bajar tu archivo.

[alamarcheta]

Ahora debe de ir. Si no fuera intentarlo mas tarde. Se ve que hay problemas con el servidor.

[chascon]

Hola Alamarcheta, me gustaria aprender a hacer este efecto, pero te debo confesar que no se nada de ActionScript, y tengo algunas dudas con tu ejemplo:

_root.sig=1;
aqui que es el "sig"?, para que sirve esa variable?, es una variable cierto?

tellTarget ("_root.frames")
y esto para que seria????

...aqui de nuevo esta el "sig"
if (_root.sig) {
nextFrame();

Bueno, quiza para algunos esto es de lo mas basico, pero flash no es mi fuerte, jajaja!!.
y en realidad no se, pero quiero aprender, solo pido una pequeña explicacion y no molesto mas, ok.

salu2.

[alamarcheta]

Hola chascon. Te lo explicaría con mucho gusto pero hice la técnica de copiar/pegar, así que no se el funcionamiento. Yo también estoy corto de flash. Seguro que algún compañero de forosdelweb nos lo explica, porque a mi también me interesaría el saber el funcionamiento de este código.

Saludos

[chascon]

ok Alamarcheta.
Alguien sabe que es lo que pasa con ese .fla???

[alamarcheta]

¿Si la botonera no solo estubiera en la escena principal, si no que se repitiera en varias escenas, tendría que cambiar algo del código? Porque tengo la botonera en una escena que no es la inicial y cuando paso por encima de botón se va todo y se queda en blanco. Y en el fla que puse me va perfecto. No se porque me falla.

Ayudarme por favor!

[alamarcheta]

El código que he utilizado en el botón es este:

Código:

on (rollOver) {
	_root.sig2=1;
	gotoAndStop(2);
}
on (rollOut) {
	_root.sig2=0;
	gotoAndStop(1);
}
on (press) {
	tellTarget ("_root.frames") {
		gotoAndStop(2);
	}
}

Y este en el movieclip:

Código:

onClipEvent (enterFrame) {
	if (sig1) {
		nextFrame();
	} else {
		prevFrame();
	}
}

El problema que me desaparezca todo creo que viene porque me voy al primer frame en la escena donde tengo puesta la botonera.
De todas formas si os hiciera falta fla con el código lo podeis descargar en mis respuestas anteriores.

Por favor que alguien me ayude o me explique el funcionamiento del código para comprender lo que pasa.

Gracias.

[chascon]

bajar aqui.
flasheros todos, este es un fla que resuelve nuestra duda.

espero que les sirva.

Este .fla es gentileza de CEAPED, el me lo envio, gracias!.

[alamarcheta]

Muchisimas gracias chascon Va perfecto.

[kahlito]

Hola recupero este mensaje a través del buscador del foro. El tema es que lo que intento hacer es un botón con una imagen que al pasar por encima se agrande y al quitar vuelva a bajar.

He probado con el código de lucasiramos y si me funciona perfectamente aunque es cierto lo que goc00 que se mezclan los MC:

on (rollOver) {
this.gotoAndPlay(2);
}
on (rollOut) {
this.gotoAndPlay(11);
}

Por lo tanto estoy intentando hacer tanto el ejemplo de goc00 o el de Bandit pero no me sale ninguno

¿Alguna otra solución para que no salten los MC?

Gracias de antemano

[chascon]

bajaste el archivo que coloque???
revisa unos post mas atras.
chaup!.

[kahlito]

Hola chascon, la verdad es que si me lo habia bajado al igual que el que puso alamarcheta, sin embargo en los dos flash lo que hace es un rollover que a partir de una imagen mueva otra.

En mi caso quiero hacer que una misma imagen (como botón) al pasar su rollOver se agrande y luego en su rollOut vuelva su estado, por eso con el ejemplo primero de lucasiramos si me va aunque se mezclan los MC.

Tambien he intentado adaptar tu fla a mi imagen pero no lo consigo

[Bandit]

Hola kahlito:
Coloca tu imagen dentro de un MC en el escenario y le pones como nombre de instancia: efecto.
En el primer frame de tu pelícla:
efecto.onRollOver = function(){
efecto.swapDepths(1);
efecto._xscale = 200;
efecto._yscale = 200;
}
efecto.onRollOut = function(){
efecto._xscale = 100;
efecto._yscale = 100;
}

Espero haberte sido de ayuda.

[kahlito]

Hola Bandit gracias por tu respuesta.

Ese ejemplo tuyo ya me sirvió para otra ocasión , aunque este caso lo que intentaba hacer era algo como en este ejemplo, pero aplicandolo con una imagen agrandando y volviendo a bajar pero con interpolación, no se si me explico. Con este ejemplo me sale algo parecido

http://www.cristalab.com/tutoriales/...de_out_animado

Gracias

[Bandit]

Entonces hazlo dentro de un MC la animación de agrandar y achicar.
Ejemplo:
En un MC en la capa 1 frame 1 coloca tu imagen convertida en Símbolo Gráfico, en el frame 10 coloca un fotograma clave y agrandas tu imagen, le das Interpolación de movimiento.
En la capa 2 frame 1 y 10 coloca un stop();
En el escenario colocas el MC y le pones como nombre de instancia: foto.
En la capa 2 frame 1 coloca éste código:
foto.onRollOver = function(){
foto.gotoAndPlay(2);
}

foto.onRollOut = function(){
this.onEnterFrame = function(){
if(this._currentframe != 1){
this.prevFrame();
}else{
delete this.onEnterFrame
}
}
}
Espero haberte sido de ayuda.

[chascon]

en el ejemplo que coloque, lo que hace es al poner el mouse sobre el boton se inicia un MC, y al sacar el mouse el MC se devuelve, desde donde quedo, el mc puede ser cualquier efecto, lo que quiereas.

chaup!.

[kahlito]

Hola de nuevo.

Bandit, he vuelto a probar ese ejemplo y me sale, sin embargo una vez sacado o estando en el estado over si te posicionas sobre la imagen antes de que caiga vuelve a saltar. De todas formas muchas gracias

chascon tu ejemplo me sirve para otra ocasión ya que me sirve para mover otro mc y como tu dices con cualquier efecto deseado, gracias tambien

Con el ejemplo anterior me sale perfectamente lo que buscaba:

http://www.cristalab.com/tutoriales/...de_out_animado

Saludosss

[walvaRo]

Y si tenemos muchas imagenes en un mismo espacio?
EJEMPLO:


¿Cómo hacemos?, tenemos que repetir el codigo,
foto.onRollOver = function(){
foto.gotoAndPlay(2);
}

foto.onRollOut = function(){
this.onEnterFrame = function(){
if(this._currentframe != 1){
this.prevFrame();
}else{
delete this.onEnterFrame
}
}
}

cambiando el nombre del mc ? en cada foto ?, osea foto1, foto2, foto3, etc.. ¿?¿?
No hay alguna forma mas eficaz de conseguir q al pasar el ratón por encima de unas imagenes, estas aumenten y disminuyan cuando el raton no está encima de ellas... y ademas, otra cosa, las imagenes se superponen, y ajustar todo para evitar q al aumentar se solapen... es muy dificil..

Que mas respuestas puede haber ?

AYUDA !

[chascon]

Aqui dejo algo que quizas te sirva walvaRo
descargar
chaup!
si te resulta me avisas, yo no se mucho de flash!, y no me salio. jeje!