Foros del Web » Creando para Internet » Flash y Actionscript »

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

Estas en el tema de Como se hacen botones con animación para los dos lados? cuando se activa y suelta? en el foro de Flash y Actionscript en Foros del Web. 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). ...

  #1 (permalink)  
Antiguo 05/06/2005, 21:44
 
Fecha de Ingreso: abril-2005
Mensajes: 19
Antigüedad: 12 años, 7 meses
Puntos: 0
Como se hacen botones con animación para los dos lados? cuando se activa y suelta?

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)
  #2 (permalink)  
Antiguo 06/06/2005, 11:23
Avatar de lucasiramos  
Fecha de Ingreso: agosto-2004
Ubicación: Santa Rosa, La Pampa, Argentina
Mensajes: 1.484
Antigüedad: 13 años, 4 meses
Puntos: 13
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
__________________
No sign...
  #3 (permalink)  
Antiguo 06/06/2005, 15:19
Avatar de goc00  
Fecha de Ingreso: enero-2002
Ubicación: 000's DiMensiOn
Mensajes: 979
Antigüedad: 15 años, 10 meses
Puntos: 3
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
__________________
GOC00 CominG soOn v2.0
CyA! & GooD LuCK...

Última edición por goc00; 06/06/2005 a las 15:27
  #4 (permalink)  
Antiguo 16/07/2005, 05:51
Avatar de alamarcheta  
Fecha de Ingreso: mayo-2005
Ubicación: Isla Mêlée
Mensajes: 502
Antigüedad: 12 años, 7 meses
Puntos: 1
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
  #5 (permalink)  
Antiguo 16/07/2005, 10:38
Avatar de Bandit
Moderador
 
Fecha de Ingreso: julio-2003
Ubicación: Lima - Perú
Mensajes: 16.726
Antigüedad: 14 años, 5 meses
Puntos: 406
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.
__________________
Bandit.
Si no sabes estudia y si sabes enseña.
http://www.banditwebdesign.com/
  #6 (permalink)  
Antiguo 17/07/2005, 21:39
Avatar de chascon  
Fecha de Ingreso: diciembre-2004
Mensajes: 231
Antigüedad: 13 años
Puntos: 0
lo trate de hacer y no me funciono...
F1, F1, F1.
Gracias!
  #7 (permalink)  
Antiguo 18/07/2005, 03:03
Avatar de alamarcheta  
Fecha de Ingreso: mayo-2005
Ubicación: Isla Mêlée
Mensajes: 502
Antigüedad: 12 años, 7 meses
Puntos: 1
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
  #8 (permalink)  
Antiguo 18/07/2005, 06:11
Avatar de alamarcheta  
Fecha de Ingreso: mayo-2005
Ubicación: Isla Mêlée
Mensajes: 502
Antigüedad: 12 años, 7 meses
Puntos: 1
Ya lo conseguí!! Este es el .fla que he utilizado.

Gracias a todos por vuestras respuestas
  #9 (permalink)  
Antiguo 18/07/2005, 08:59
Avatar de alamarcheta  
Fecha de Ingreso: mayo-2005
Ubicación: Isla Mêlée
Mensajes: 502
Antigüedad: 12 años, 7 meses
Puntos: 1
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.

Última edición por alamarcheta; 23/09/2005 a las 02:36
  #10 (permalink)  
Antiguo 18/07/2005, 10:17
Avatar de Bandit
Moderador
 
Fecha de Ingreso: julio-2003
Ubicación: Lima - Perú
Mensajes: 16.726
Antigüedad: 14 años, 5 meses
Puntos: 406
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.
__________________
Bandit.
Si no sabes estudia y si sabes enseña.
http://www.banditwebdesign.com/
  #11 (permalink)  
Antiguo 18/07/2005, 10:46
Avatar de alamarcheta  
Fecha de Ingreso: mayo-2005
Ubicación: Isla Mêlée
Mensajes: 502
Antigüedad: 12 años, 7 meses
Puntos: 1
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.
  #12 (permalink)  
Antiguo 18/07/2005, 11:28
Avatar de Bandit
Moderador
 
Fecha de Ingreso: julio-2003
Ubicación: Lima - Perú
Mensajes: 16.726
Antigüedad: 14 años, 5 meses
Puntos: 406
No se puede bajar tu archivo.
__________________
Bandit.
Si no sabes estudia y si sabes enseña.
http://www.banditwebdesign.com/
  #13 (permalink)  
Antiguo 18/07/2005, 11:35
Avatar de alamarcheta  
Fecha de Ingreso: mayo-2005
Ubicación: Isla Mêlée
Mensajes: 502
Antigüedad: 12 años, 7 meses
Puntos: 1
Ahora debe de ir. Si no fuera intentarlo mas tarde. Se ve que hay problemas con el servidor.

Última edición por alamarcheta; 18/07/2005 a las 11:41
  #14 (permalink)  
Antiguo 20/07/2005, 01:46
Avatar de chascon  
Fecha de Ingreso: diciembre-2004
Mensajes: 231
Antigüedad: 13 años
Puntos: 0
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.
  #15 (permalink)  
Antiguo 20/07/2005, 03:21
Avatar de alamarcheta  
Fecha de Ingreso: mayo-2005
Ubicación: Isla Mêlée
Mensajes: 502
Antigüedad: 12 años, 7 meses
Puntos: 1
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
  #16 (permalink)  
Antiguo 21/07/2005, 14:08
Avatar de chascon  
Fecha de Ingreso: diciembre-2004
Mensajes: 231
Antigüedad: 13 años
Puntos: 0
ok Alamarcheta.
Alguien sabe que es lo que pasa con ese .fla???
  #17 (permalink)  
Antiguo 20/09/2005, 10:55
Avatar de alamarcheta  
Fecha de Ingreso: mayo-2005
Ubicación: Isla Mêlée
Mensajes: 502
Antigüedad: 12 años, 7 meses
Puntos: 1
¿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!

Última edición por alamarcheta; 20/09/2005 a las 12:30
  #18 (permalink)  
Antiguo 20/09/2005, 12:46
Avatar de alamarcheta  
Fecha de Ingreso: mayo-2005
Ubicación: Isla Mêlée
Mensajes: 502
Antigüedad: 12 años, 7 meses
Puntos: 1
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.
  #19 (permalink)  
Antiguo 20/09/2005, 17:47
Avatar de chascon  
Fecha de Ingreso: diciembre-2004
Mensajes: 231
Antigüedad: 13 años
Puntos: 0
.fla milagroso

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!.
  #20 (permalink)  
Antiguo 21/09/2005, 02:36
Avatar de alamarcheta  
Fecha de Ingreso: mayo-2005
Ubicación: Isla Mêlée
Mensajes: 502
Antigüedad: 12 años, 7 meses
Puntos: 1
Muchisimas gracias chascon Va perfecto.
  #21 (permalink)  
Antiguo 04/10/2005, 05:50
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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
  #22 (permalink)  
Antiguo 04/10/2005, 10:57
Avatar de chascon  
Fecha de Ingreso: diciembre-2004
Mensajes: 231
Antigüedad: 13 años
Puntos: 0
bajaste el archivo que coloque???
revisa unos post mas atras.
chaup!.
  #23 (permalink)  
Antiguo 04/10/2005, 11:02
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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
  #24 (permalink)  
Antiguo 04/10/2005, 11:39
Avatar de Bandit
Moderador
 
Fecha de Ingreso: julio-2003
Ubicación: Lima - Perú
Mensajes: 16.726
Antigüedad: 14 años, 5 meses
Puntos: 406
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.
__________________
Bandit.
Si no sabes estudia y si sabes enseña.
http://www.banditwebdesign.com/
  #25 (permalink)  
Antiguo 04/10/2005, 11:46
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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
  #26 (permalink)  
Antiguo 04/10/2005, 12:16
Avatar de Bandit
Moderador
 
Fecha de Ingreso: julio-2003
Ubicación: Lima - Perú
Mensajes: 16.726
Antigüedad: 14 años, 5 meses
Puntos: 406
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.
__________________
Bandit.
Si no sabes estudia y si sabes enseña.
http://www.banditwebdesign.com/
  #27 (permalink)  
Antiguo 04/10/2005, 12:55
Avatar de chascon  
Fecha de Ingreso: diciembre-2004
Mensajes: 231
Antigüedad: 13 años
Puntos: 0
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!.
  #28 (permalink)  
Antiguo 04/10/2005, 19:14
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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
  #29 (permalink)  
Antiguo 10/10/2005, 13:47
 
Fecha de Ingreso: febrero-2004
Mensajes: 446
Antigüedad: 13 años, 10 meses
Puntos: 0
Y si tenemos muchas imagenes en un mismo espacio?

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 !
  #30 (permalink)  
Antiguo 11/10/2005, 01:11
Avatar de chascon  
Fecha de Ingreso: diciembre-2004
Mensajes: 231
Antigüedad: 13 años
Puntos: 0
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!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:21.