Tutorial 12 - Vídeo y TLF

Paso 16 de 18

Añadimos una capa llamada switch, donde colocaremos el botón que servirá de conmutador.

Seleccionamos Componentes > User interface > Button. Posicionamos el botón en X:200 e Y:5. Le damos el nombre de instancia switch_btn.

Añadimos este código, que explicaremos a continuación:

switch_btn.label = "Text";
var videoVisible:Boolean = true;
switch_btn.addEventListener(MouseEvent.CLICK, view);

function view(event:MouseEvent)
{
    if (videoVisible)
    {
        switch_btn.label = "Video";
        tlf_mc.visible = true;
        sagan_video.visible = false;
        videoVisible = false;
    }
    else
    {
        switch_btn.label = "Text";
        tlf_mc.visible = false;
        sagan_video.visible = true;
        videoVisible = true;
    }
}

La propiedad label de un componente de tipo Button asigna el texto que aparecerá en el botón. Comenzaremos asignando a label el valor Text, ya que al inicio es el vídeo el que está visible, y el botón debe servir para ver el texto.

Creamos una variable llamada videoVisible de tipo booleano (puede tener el valor true o false). Al inicio el vídeo está visible, por lo que le damos el valor inicial true.

Añadimos un listener al botón switch_btn, para que al ser pulsado ejecute la función view.

La función view evalúa en primer lugar si el vídeo está visible. De estarlo, cambia la etiqueta del botón a Video, muestra el clip del texto, esconde el vídeo, y guarda el dato de que el vídeo ya no está visible.

Si al pulsar el botón el vídeo no estaba visible se ejecutará lo que se encuentra entre las llaves del else, es decir, cambiará la etiqueta del botón a Text, el clip con el texto se ocultará, se mostrará el vídeo, y se almacenará el dato de que el vídeo está visible.

Podemos probar la película para comprobar si nuestro botón conmutador funciona correctamente.