Efecto con rollover

[suudobal]

Buenas a todos...

Hay un efecto que me parece muy sencillo pero bastante elegante cuando se pone el ratón encima de un botón. Veo que, por ejemplo, se rellena de izquierda a derecha el fondo de la opción seleccionada con un color.

Hasta ahí todo lo veo normal... el caso es que cuando quitas el puntero de encima de la opción, si aún no se ha rellenado de color de fondo vuelve de nuevo a su posición normal suavemente en cualquier momento de la animación y no de manera brusca como me suele pasar a mi... no se si se me entiende.

¿Alguien sabría como realizar ese efecto?

[Bandit]

Hola suudobal:
Tienes que hacerlo dentro de un MC:
Vamos con un ejemplo:
Crea un MC y en la capa 1 frame 1 dibuja un rectángulo y le aumentas fotogramas simples hasta el frame 20, copia el rectángulo.
En la capa 2 frame 2 pega el rectángulo y le cambias de color y colocas un fotograma clave en el frame 10, el rectángulo del frame 2 lo reduces a un pixel de ancho y le das Interpolación de Forma, seleccionas la capa y sobre los frames seleccionados le das con el derecho y activas Copiar fotogramas.
Crea la capa 3 y en el frame 11 haz clic con el derecho y activas Pegar fotogramas, seleccionas los frames pegados y le das nuevamente con el derecho y activas Invertir fotogramas.
Crea la capa 4 en los frames 1 y 10 coloca un stop();
En el escenario coloca el MC y le pones éste código:
on(rollOver){
gotoAndPlay(2);
}
on(rollOut){
gotoAndPlay(11);
}

Espero haberte sido de ayuda.

[SinguerInc]

Yo hice otra prueba, porque siempre lo he querido hacer pero se complicaba con la tecnica de Bandit si tenia que hacer muchos botones, aunque no sabia otra.
Hice un experimento y parece que funciona...

Utilizar un mc que se mueve de izquierda a derecha, despues lo recortamos con una mascara para que no se vea lo que sobresale.

Basicamente un mc de 50pixels de ancho lo colocamos en x = -50, hacemos una motion tween de 50 frames, por ejemplo, y lo movemos hasta x = 0 (aca un stop), y otra motion tween de 50 frames (tienen que ser los mismos frames en los dos casos) que se mueve desde x=0 hasta x=-50. (todo esto en "flash" no en actionscript).



Y a este mc le colocamos el siguiente actionscript (trate de hacerlo bastante dinamico para que funcione con diferentes frames)

Código:

on (rollOver) {
	var mitadFrames:Number = _totalframes/2;
	if(_currentframe >= 1 && _currentframe < mitadFrames)
	{
		play();
	}
	else if(_currentframe > mitadFrames)
	{
		var _cf:Number = (_currentframe-mitadFrames);
		gotoAndPlay(mitadFrames-_cf);
	}
}

on (rollOut) {
	if(_currentframe < (_totalframes/2))
	{
		gotoAndPlay(_totalframes-_currentframe);
	}
	else
	{
		play();
	}
}

Espero que alguien lo entienda... es un poco complicado de explicar.

[suudobal]

Perfectísimo SinguerInc, exactamente eso es lo que quería hacer. El sistema de Bandit es el que yo utilizaba pero añadiendo esa función que has comentado queda exactamente como quería yo, muchas gracias a los dos.

¡Saludos!

[Bandit]

Aquí otra forma de hacerlo sin usar mucho código:
Crea un MC que lo llamaremos botón, en la capa 1 frame 1 dibuja un rectángulo y lo copias.
Crea otro MC que lo llamaremos cortina, en la capa 1 frame 2 pega el rectángulo y le cambias el color de relleno, en el frame 10 coloca un fotograma clave, el rectángulo del frame 2 lo reduces a 2 píxeles de ancho y le das Interpolación de Forma
En la capa 2 frame 1 y 10 coloca un stop();
Abrimos el MC botón creamos la capa 2 y allí ponemos el MC cortina con nombre de instancia: cortina.
En el escenario ponemos el MC botón con el siguiente código:
on (rollOver) {
cortina.play();
}
on (rollOut) {
cortina.onEnterFrame = function() {
if (cortina._currentframe>1) {
cortina.prevFrame();
} else {
delete this.onEnterFrame;
}
};
}
Haciéndolo así no necsitas ponerle ninguna máscara.
Si quieres hacer varios botones tanto como en el ejemplo anterior que te di como en éste, simplemente lo Duplicas.

Espero haberte sido de ayuda.

[suudobal]

Pues puestos a mejorar un poquito más el efecto he comprobado que como ha hecho Bandit es más sencillo pero si pasamos el puntero del ratón sobre el MC lo quitamos y seguidamente lo volvemos a poner encima se produce un pequeño bloqueo de la animación y hay que mover el ratón para que vuelva a ejecutarse la animación de la cortina, así que le he añadido este pequeño cambio:

on (rollOver) {
_root.cortina.onEnterFrame = function() {
_root.cortina.nextFrame();
};
}

on (rollOut) {
_root.cortina.onEnterFrame = function() {
_root.cortina.prevFrame();
};
}

Y así me va perfecto. Gracias de nuevo