miércoles, 14 de septiembre de 2011

PostHeaderIcon Todo FLASH con AS3.0


Este es un sencillo ejemplo de como utilizar un MovieClip como si fuese un botón. Hay muchos casos en los que nos interesa hacer esto, como por ejemplo para tener botones animados, que se mantengan encendidos una vez se ha clicado sobre ellos, etc...
Como ya sabremos... cualquier MovieClip al que le coloquemos un evento onRelease actua automaticamente como botón.
clip.onRelease = function()
{
trace("Soy un botón");
};

Ahora si editamos el MovieClip, le colocamos en la línea de tiempo los markers "_up", "_over", "_down", y un stop() en el primer fotograma.


Automáticamente el MovieClip cambiará de estado al pasar el cursor sobre él o presionarlo, sin necesidad de escribir ningún código por parte nuestra.
Para indicar la zona activa del botón añadiremos una nueva capa al MovieClip, y crearemos otro MovieClip que ocupe la zona que queramos para el botón.


A este segundoMovieClip lo llamaremos "hitArea".
En el primer fotograma del primer MovieClip colocaremos el siguiente código:
hitArea_mc._visible = false;
this.hitArea = hitArea_mc;

Llegados a este punto tendríamos hecho con un MovieClip lo mismo que tendríamos con un clip de Botón.
Lo interesante de haberlo hecho de esta manera es que ahora podemos añadirle a este botón otros estados, como por ejemplo un estado activo (para cuando hemos hecho click sobre él y queremos que quede iluminado) o un estado desactivado (por si queremos que en algún momento ese botón quede apagado).
Para eso solo tendremos que añadir unos nuevos markers al MovieClip indicandole el nombre que queramos, por ejemplo "_active" y "_disable".


Ahora debemos añadirle estos comportamientos a la clase MovieClip:
MovieClip.prototype.select = function()
{
   this.enabled = false;
   this.gotoAndStop("_active");
};

Este nuevo comportamiento de la clase MovieClip hará que al ejecutarse mande el botón al fotograma "_active". Si colocasemos este código al botón:
boton1.onRelease = function()
{
trace("Soy un botón");
this.select();
};
al clickar sobre él se ejecutarán sus acciones y quedará seleccionado.
Añadiremos otro comportamiento para cuando queramos que deje de estar seleccionado y para cuando queramos que este inhabilitado.
MovieClip.prototype.deselect = function()
{
   this.enabled = true;
   this.gotoAndStop("_up");
};
MovieClip.prototype.disable = function()
{
   this.enabled = false;
   this.gotoAndStop("_disable");
};

Ahora todos los MovieClips que utilicemos como botones tendrán estos comportamientos:

clip_btn_1.select();
clip_btn_2.deselect();
clip_btn_3.deselect();
clip_btn_4.disable();
clip_btn_5.disable();

0 comentarios:

Publicar un comentario

Blog Archive

Blogs Interesantes

Secti Tecnología, S.L. Con la tecnología de Blogger.