Fullscreen en Flash con AS3 en linea de tiempo
7 Comments 
Posted under: Adobe Flash, AS 3.0, Ejercicios, Todo, Tutoriales
Durante las últimas semanas en la gran mayoría de las entregas de multimedias de los aprendices de mi curso. noté que ninguno tenía botones para iniciar las multimedias en pantalla completa, así que me dí a la tarea de averiguar la mejor forma para hacerlo.
Googleando encontré este tutorial de Evan Mullins el cual decidí modificar, restando algunas cosas que no eran útiles para mi.
Paso 1: Preparar el documento.
Crear un documento de Flash AS3, en el menú superior Modificar->Documento, asignar ancho, alto y velocidad de reproducción.
Paso 2: Crear el Botón.
En el primer fotograma crear un Clip de Película (MovieClip), dentro del cual crearemos los dos diferentes estados, es decir, para cuando la pantalla esté en modo FullScreen y para cuando este en estado Normal.
Menú->Insertar->Nuevo Símbolo.
En este cuadro de diálogo se nombra el nuevo Símbolo y se le asigna el tipo Clip de Película.
Dentro del símbolo crear dos cuadro(frames) en la linea de tiempo para los dos diferentes estados del botón. y asignar una bandera para cada frame seleccionando el frame y luego en el cuadro de propiedades darle un nombre en la casilla Nombre.
y para el segundo frame:
Paso 3: Añadir el símbolo al escenario.
Añadir el Símbolo al escenario, arrastrándolo desde la biblioteca y soltándolo sobre el escenario en una capa desbloqueada.
Paso 4: Asignar nombre de instancia.
Una vez tengamos el MovieClip en el escenario debemos seleccionarlo y abrir el panel de propiedades para asignarle un nombre de instancia.
Paso 5: Crear la capa de acciones.
Crear una nueva capa (Insertar->Línea de tiempo->Capa) para ubicar el código correspondiente a las acciones.
(para cambiar el nombre de la capa: Doble clic sobre el nombre)
Paso 6: Escribir el código.
Selecciona la capa recién creada y abre el panel de acciones (Ventana->Acciones o F9) , y comienza la programación:
Primero, definimos las propiedades en pantalla completa, como el modo de escala y la alineación del escenario en la pantalla completa.
Y detenemos la reproducción de nuestro MovieClip que contiene los estados.
<br /> stage.scaleMode = StageScaleMode.NO_SCALE;<br /> stage.align = StageAlign.TOP_LEFT;<br /> boton_mc.stop();<br />
Añadimos los Listeners, uno para el evento de clic sobre el botón y otro para que cuando cambie el estado de la pantalla se ejecute una función que va a cambiar el estado del botón.
<br /> boton_mc.addEventListener(MouseEvent.CLICK, pantallaCompleta);<br /> stage.addEventListener(FullScreenEvent.FULL_SCREEN, cambioPantalla);<br />
Activamos el modo botón del MovieClip, esto va a hacer que al pasar el mouse sobre el MovieClip el cursor cambie como si este fuera un botón. En la línea 7 hacemos un llamado a la función que nos va identificar el estado de la pantalla y actualizar el estado del botón.
boton_mc.buttonMode = true;<br /> cambioPantalla();
La siguiente función se basa en dos condicionales, los cuales evalúan el estado de la pantalla y de acuerdo a esto lo invierten, es decir, si el estado de la pantalla es NORMAL, entonces, la función Cambia el estado de pantalla a FULL_SCREEN y viceversa.
<br />
function pantallaCompleta(e:MouseEvent = null):void {<br />
if (stage.displayState == StageDisplayState.NORMAL){<br />
stage.displayState = StageDisplayState.FULL_SCREEN;<br />
} else if (stage.displayState == StageDisplayState.FULL_SCREEN){<br />
stage.displayState = StageDisplayState.NORMAL;<br />
}<br />
}
Esta función es llamada cada vez que cambia el estado de la pantalla y evalúa es estado de la pantalla para ir a diferentes banderas del MovieClip boton_mc.
<br />
function cambioPantalla(e:FullScreenEvent = null):void {<br />
if (stage.displayState == StageDisplayState.FULL_SCREEN) {<br />
boton_mc.gotoAndStop("desactivar");<br />
}<br />
else {<br />
boton_mc.gotoAndStop("activar");<br />
}<br />
}<br />
Si todo ha salido bien, deberíamos tener el siguiente código:
<br />
stage.scaleMode = StageScaleMode.NO_SCALE;<br />
stage.align = StageAlign.TOP_LEFT;<br />
boton_mc.stop();<br />
boton_mc.addEventListener(MouseEvent.CLICK, pantallaCompleta);<br />
stage.addEventListener(FullScreenEvent.FULL_SCREEN, cambioPantalla);<br />
boton_mc.buttonMode = true;<br />
cambioPantalla();</p>
<p>function pantallaCompleta(e:MouseEvent = null):void {<br />
if (stage.displayState == StageDisplayState.NORMAL){<br />
stage.displayState = StageDisplayState.FULL_SCREEN;<br />
}<br />
else if (stage.displayState == StageDisplayState.FULL_SCREEN){<br />
stage.displayState = StageDisplayState.NORMAL;<br />
}<br />
}<br />
function cambioPantalla(e:FullScreenEvent = null):void {<br />
if (stage.displayState == StageDisplayState.FULL_SCREEN) {<br />
boton_mc.gotoAndStop("desactivar");<br />
}<br />
else {<br />
boton_mc.gotoAndStop("activar");<br />
}<br />
}<br />
Paso 7: Configurar la publicación.
Si probamos la película (Ctrl+Enter), vemos que no pasa nada. Para ver los cambios debemos ver el archivo que ha publicado flash, ya sea un swf , exe o app.
Este archivo se publica por defecto en la carpeta donde está guardado el archivo fuente (.fla).
Para cambiar esta configuración debemos ir al Menú->Archivo->Configuración de Publicación así:
En la pestaña correspondiente a Formatos:
Especificar los formatos que necesitemos para nuestra multimedia, seleccionando la casilla y asignando un nombre, asi:
En la pestaña correspondiente a HTML:
En el menú desplegable Plantilla, seleccionar la opción “Sólo Flash – Permitir Pantalla Completa“, lo cual añade un atributo adicional al html.
Publicar y aceptar los cambios.
Y listo, los archivos publicados han sido creados en la misma carpeta del archivo fuente.
Y este es el resultado final:
saludos, esta exelente y muy sencillo de implementar tu tutorial, espero en algún momento poder retribuir tu ayuda.
Excelente tutorial, muy bien explicado y realizado.
Gracias !!!
Excelente tutorial, muy bien explicado y realizado.
Gracias !!!
buen tutorial y es algo que se necesita a diario gracias
Me sirvio mucho.
Gracias!!
Bastante interesante y útil, voy a practicarlo. Gracias
Hola, muy interesante el articulo, saludos desde Chile!