Por Marcos Una de las nuevas características soportadas por Flash Lite 2.x es la reproducción de video de dispositivo. ¿Qué quiere decir esto de video de dispositivo? La respuesta a esta pregunta la veremos en detalle en este tutorial sobre cómo montar una aplicación standalone en Flash Lite para visualizar videos.
Soporte de video en Flash Lite 2.x
En Flash Lite 1.1 no disponíamos de la capacidad para reproducir videos en los dispositivos móviles. Con la llegada de Flash Lite 2.0 los desarrolladores contamos con esta posibilidad a través de la carga (local o remota) de video de dispositivo.
Cuando decimos video de dispositivo nos referimos a aquellos formatos que nuestro dispositivo es capaz de reproducir de forma independiente. Es decir, todo aquel formato de video que el dispositivo donde correrá la aplicacion Flash Lite soporte, también es soportado por Flash Lite. Esta característica que en un principio puede parecer todo bondades, no lo es tanto, ya que la misma capacidad que nos brinda para soportar videos 3GPP o MPEG-4 (en función del dispositivo) nos limita en otros aspectos, como la capacidad de controlar dicha reproducción o soportar otros formatos habituales en flash como FLV.
Para conocer que formatos de video son soportados por nuestro dispositivo disponemos de la propiedad System.capabilities.videoMIMETypes y en general para conocer los tipos de archivos soportados por el dispositivo disponemos de System.capabilities.MIMETypes. A partir de lo que nos devuelve esta propiedad (por ejemplo en un nokia 6670 podría ser algo como esto: video/3gpp,video/mp4,video/mov) podemos decidir si lanzar la carga de los archivos de video o no.
Como punto final a esta introducción sobre el uso de video en Flash Lite, es importante destacar que Flash Lite no asume por si mismo la reproducción de video, sino que lo cede al propio dispositivo para que sea este el que mediante su aplicación de reproducción lo muestre por pantalla. Esta es la causa de que podamos cargar los formatos de movil (tales como 3gpp) y no los habituales en flash (como flv), y esta causa tambien es la que hace que no tengamos el mismo control sobre el video que pudieramos tener en una aplicacion Flash Player 7. Realmente Flash Lite lo que hace es crear una instancia de la aplicación de reproducción de video del dispositivo y mostrarla en primer plano, encima de cualquier elemento de nuestro swf, permitiéndonos actuar sobre el en las acciones básicas tales como: pausa, cierre y reproducción. La manera de crear esta instancia en nuestro swf es generar un nuevo elemento en la biblioteca de tipo Video, como aprenderemos a lo largo de este tutorial.
La aplicación
Nuestra aplicación tendrá almacenada la lista de videos a cargar en un array, sobre todo por pereza, ya que cargar la lista de un XML no aportaría más que ventajas ... 
y dispondrá de tres pantallas para interactuar con el usuario: una de bienvenida, una que contenga el menu de selección de video y otra para la visualización de los videos.
A partir de ahora comenzamos con la parte interesante... iremos viendo cada una de estas pantallas de forma práctica y el código que desarrollaremos para controlarlas de forma adecuada, ¡comenzamos!
Nuestro archivo de pruebas
Para seguir este tutorial crearemos un fla con las siguientes características:
- Dimensiones: las de la pantalla de nuestro dispositivo móvil, en mi caso nokia 6670 con 176x208 pixels.
- Configuración de Publicacion: Flash Lite 2.0 y ActionScript 2.0
- Configuración de dispositivo: Nokia 6670
- FPS: 12
Esta configuración se puede hacer desde el panel propiedades de nuestro documento, o bien agilizarlo con las plantillas de las que dispondremos si nos hemos bajado el update de Flash Lite 2 para Flash 8 (acceder al update)
y la lista de perfiles disponibles desde adobe (Perfiles para móviles).
Una vez que tenemos el documento preparado, pasaremos a estructurar el mismo para albergar nuestro sistema de pantallas. Para ello vamos a disponer de la siguiente estructura en nuestra linea de tiempo (ver imagen 1):
Como se puede apreciar en la imagen tenemos una serie de capas de las que iremos conociendo más a lo largo del tutorial, y además disponemos de una capa denominada etiquetas, que contendra los siguientes labels en los frames 1, 2 y 3 prespectivamente: INTRO, MENU y VIDEO. De esta forma podemos añadir posteriormente frames intermedios sin que dejen de funcionar nuestras instrucciones gotoAndStop.
Además del fla tendremos a su mismo nivel una carpeta denominada "3gp" donde tendremos los vídeos que queremos cargar de forma externa.
Funciones y métodos que emplearemos
El código de Flash Lite 2 está basado en su mayoría en ActionScript 2.0, con lo que para los desarrolladres Flash no habrá muchos cambios salvo las características propias de los dispositivos. A continuación indicamos de forma resumida que elementos especiales nos encontraremos en este ejemplo:
System.capabilities.videoMIMETypes
El objeto no es desconocido, aunque si la propiedad que se empla. Como se mencionó anteriormente, esta propiedad nos devuelve en formato String la lista de formatos de video soportados por el dispositivo en el que corre el swf. Esto es fundamental para saber si vamos a poder reproducir el formato de video de nuestra aplicación o si debemos mostrar un aviso al respecto.
fscomnmand2()
Esta función permite acceder a los fscommand para Flash Lite 2.x, es el equivalente de fscommand para la versión de escritorio. Unos de los más empleados en las aplicaciones que iremos viendo serán: fullscreen, setSoftKeys, setQuality, ...
ExtendedKey
Esta clase permite acceder a teclas especiales (softKeys) de los dispositivos móviles. Su uso es totalmente similar a la de la clase Key habitualmente empleada en las aplicaciones flash tradicionales. Antes de poder emplear el acceso a las softKeys (por ejemplo mediante ExtendedKey.SOFT1) es necesario usar el comando fscommand2 con setSoftKeys.
Objeto Video
Como se ha comentado antes en este tutorial, el video integrado en Flash Lite 2.x funciona creando una instancia de la aplicación nativa del dispositivo para ese tipo de archivos sobre el flash player. Esto implica que no se puede crear ni emplear componentes habituales de Flash 8 para la reproducción de video. Para poder incrustar video en una aplicación Flash Lite, se ha de crear un objeto de video en la biblioteca. Esto se puede hacer abriendo el menu de la biblioteca (ver imagen 2) y eligiendo "New video". Debemos darle un nombre al símbolo que se creará en la biblioteca, en nuestro caso "videoPlayer", y en este ejemplo marcaremos la casilla "Video - ActionScript controlled".
Con esto ya tenemos todo lo necesario para comenzar la codificación de nuestro reproductor de video. A partir de este punto veremos fotograma por fortograma como ir creando las pantallas (una pantalla en este ejemplo equivale a un fotograma de la linea de tiempo principal) y qué código hemos de dar para que cumplan su función.
Fotograma INTRO
En el primer fotograma aprovecharemos para crear la pantalla de bienvenida a nuestra aplicación y de paso comenzar con un ejemplo básico del uso de las softKeys. La pantalla de entrada constará de una imagen que tenga la bienvenida a la aplicación y un texto que nos indique cómo proceder, o bien para entrar a la aplicación o bien para salir de la misma.
El hecho de usar una imagen en vez de trazo vectorial, es que por norma general, el uso de imagenes conlleva menos uso de procesador, que en el caso de un móvil es un factor crítico. Aunque esto sea así, para formas básicas (rectángulos por ejemplo) el uso de trazo vectorial permitiría un ahorro en peso de la película (también un factor importante) y no conllevaría un gasto de procesador elevado. Como nuestra bienvenida tiene más detalle que un mero rectángulo, usaremos una imagen PNG.
A continuación vamos a la capa codigo e introducimos el siguiente script:
Actionscript:
-
_focusrect = false;
-
fscommand2("SetQuality", "high");
-
fscommand2("Fullscreen", "true");
-
-
// Evaluamos si 3gpp es un formato soportado por el dispositivo
-
var soportado:Boolean = false;
-
for (valor in System.capabilities.videoMIMETypes)
-
{
-
if (System.capabilities.videoMIMETypes[valor]=="video/3gpp")
-
{
-
soportado = true;
-
}
-
}
-
-
// Preparamos las softKeys para permitir acceder al menú
-
// o salir de la aplicación.
-
Key.removeListener(tecladoListener);
-
var tecladoListener:Object = new Object();
-
-
if (soportado)
-
{
-
entrada_txt.text = "Bienvenido al visor de videos Flash Lite 2 para movil BlocketPC.";
-
fscommand2("SetSoftKeys", "Menu", "Salir");
-
softKeyIzq.text = "Menu";
-
softKeyDch.text = "Salir";
-
tecladoListener.onKeyDown = function()
-
{
-
var keyCode:Number = Key.getCode();
-
if (keyCode == ExtendedKey.SOFT1)
-
{
-
gotoAndStop("MENU");
-
}
-
else if (keyCode == ExtendedKey.SOFT2)
-
{
-
fscommand2("quit");
-
}
-
}
-
}
-
else
-
{
-
entrada_txt.text = "El dispositivo no soporta el formato de video 3gp, no podrá visualizar ningun video, pulse salir para cerrar la aplicación.";
-
fscommand2("SetSoftKeys", "", "Salir");
-
softKeyIzq.text = "";
-
softKeyDch.text = "Salir";
-
tecladoListener.onKeyDown = function()
-
{
-
var keyCode:Number = Key.getCode();
-
if (keyCode == ExtendedKey.SOFT2)
-
{
-
fscommand2("quit");
-
}
-
}
-
}
-
-
Key.addListener(tecladoListener);
-
-
stop();
En este ejemplo, el inicio de la aplicación está en el fotograma etiquetado como “INTRO” en la línea de tiempo principal, que es el primer fotograma de la película.
La idea fundamental es detectar si el dispositivo soporta el formato de video de la aplicacion (3gpp) y si lo soporta dar acceso mediante la softkey izquierda al menu de la aplicación y mediante la softkey derecha permitir salir de la aplicación.
Fotograma MENU
En este fotograma de nuestra película contenemos el menú de selección de video. El sistema es muy sencillo, y principalmente se trabaja sobre la clase Selection para poder mostrar al usuario dónde se encuentra al moverse con las teclas de dirección. Además se da la funcionalidad añadida, y muy recomendable de acceder a las opciones del menú de forma directa mediente las teclas numéricas.
En nuestro menú contamos con 4 clips dispuestos en el escenario, con nombres de instancia: opcion_0_mc, opcion_1_mc, opcion_2_mc y opcion_3_mc. Estos clips tiene un estado OUT y OVER en su interior, para simular la funcionalidad de un boton y los eventos onRollOver y onRollOut.
Sobre el código que se detalla a continuación comentamos como parte fundamental, el proceso por el que se da contenido a dicho menú y también su funcionalidad, de tal manera que cuando seleccionemos una de las entradas, nos permita ir al fotograma VIDEO donde se reproducirá el video seleccionado.
Actionscript:
-
// DEFINICION DE VARIABLES
-
var videoSeleccionado:Number = -1;
-
var elementoSeleccionado:MovieClip;
-
-
fscommand2("setSoftKeys","Inicio","Salir");
-
softKeyIzq.text = "Inicio";
-
softKeyDch.text = "Salir";
-
-
Key.removeListener(tecladoListener);
-
var tecladoListener:Object = new Object();
-
tecladoListener.onKeyDown = function()
-
{
-
var keyCode:Number = Key.getCode();
-
switch (keyCode)
-
{
-
// Control de SOFTKEYS
-
case ExtendedKey.SOFT1:
-
_root.gotoAndStop("INTRO");
-
break;
-
case ExtendedKey.SOFT2:
-
fscommand2("Quit");
-
break;
-
-
// Control de teclas de acceso rápido
-
case 49:
-
marcarOpcion(0); // tecla 1
-
break;
-
case 50:
-
marcarOpcion(1); // tecla 2
-
break;
-
case 51:
-
marcarOpcion(2); // tecla 3
-
break;
-
case 52:
-
marcarOpcion(3); // tecla 4
-
break;
-
}
-
}
-
Key.addListener(tecladoListener);
-
-
-
marcarOpcion = function(op:Number)
-
/*
-
* Función que nos marca la opcion del menu que recibe y que
-
* envía la cabeza lectora al fotograma VIDEO para poder
-
* visualizarlo
-
*/
-
{
-
videoSeleccionado = op;
-
elementoSeleccionado = this["opcion_"+op+"_mc"];
-
Selection.setFocus(elementoSeleccionado);
-
this.gotoAndStop("VIDEO");
-
}
-
-
// Programamos el comportamiento del menu
-
// Montamos el array de videos
-
var listaEtiquetas:Array = ["01. Video Primero","02. Video Segundo","03. Video Tercero","04. Video Cuarto"];
-
var listaVideos:Array = ["video_0.3gp","video_1.3gp","video_2.3gp","video_3.3gp"];
-
var itemMenu_btn = null;
-
for (var i:Number = 0; i<listaVideos.length; i++)
-
{
-
itemMenu_mc = this["opcion_"+i+"_mc"];
-
itemMenu_mc.etiqueta_txt.text = listaEtiquetas[i];
-
itemMenu_mc.indice = i;
-
itemMenu_mc.onRollOver = function()
-
{
-
this.gotoAndStop("OVER");
-
}
-
itemMenu_mc.onRollOut = function()
-
{
-
this.gotoAndStop("OUT");
-
}
-
itemMenu_mc.onPress = function()
-
{
-
this._parent.marcarOpcion(this.indice);
-
}
-
}
-
-
// Foco del menu al entrar en la pantalla, si no
-
// lo tenemos definido porque es la primera vez que entramos
-
// en el, lo posicionamos en la primera opcion, sino, en la
-
// opcion que habíamos marcado previamente.
-
if (elementoSeleccionado == undefined)
-
{
-
Selection.setFocus(this.opcion_0_mc);
-
}
-
else
-
{
-
Selection.setFocus(elementoSeleccionado);
-
}
-
-
stop();
El resto del código sigue el criterio visto en el primer fotograma para registrar las pulsaciones de softKeys con el añadido de las teclas numéricas.
Fotograma VIDEO
En este fotograma programamos el objeto video, que hemos colocado en el escenario y que tiene como nombre de instancia "bpcVideo". Para tener algo de control sobre la reproducción vamos a programar tambien las softKeys de tal manera que una nos sirva para regresar al menú y la otra para pausar o relanzar la reproducción del vídeo.
El código que permite este funcionamiento se detalla a continuación:
Actionscript:
-
// DEFINICION DE VARIABLES
-
var reproduciendo:Boolean;
-
var path:String = "3gpp/";
-
-
fscommand2("setSoftKeys","Volver","Pausa");
-
softKeyIzq.text = "Volver";
-
softkeyDch.text = "Pausa";
-
-
Key.removeListener(tecladoListener);
-
var tecladoListener:Object = new Object();
-
tecladoListener.onKeyDown = function()
-
{
-
var keyCode:Number = Key.getCode();
-
if (keyCode == ExtendedKey.SOFT1)
-
{
-
gotoAndStop("MENU");
-
}
-
else if (keyCode == ExtendedKey.SOFT2)
-
{
-
if (reproduciendo)
-
{
-
bpcVideo.pause();
-
reproduciendo = false;
-
softkeyDch.text = "Play";
-
}
-
else
-
{
-
bpcVideo.resume();
-
reproduciendo = true;
-
softkeyDch.text = "Pausa";
-
}
-
}
-
}
-
Key.addListener(tecladoListener);
-
-
bpcVideo._width = 176;
-
bpcVideo._height = 144;
-
reproduciendo = true;
-
bpcVideo.play(path+listaVideos[videoSeleccionado]);
Los videos que vamos a reproducir tienen unas medidas de 176x144 con lo que dotamos a la instacia de videoPlayer de dichas medidas mediante programación. Posteriormente hacemos reproducir el video indicado desde el menú anterior.
Instalación en el dispositivo
Para la instalación en el dispositivo, no necesitamos mas que copiar los archivos (con la estructura de directorios que hemos marcado para los videos) a la memoria principal del teléfono o a la tarjeta auxiliar mediante el programa que corresponda (en nuestro caso el Nokia PC Suite).
Para los usuarios que dispongan ya de Flash Lite 2.1 en sus dispositivos, es necesario tener en cuenta que para poder reproducir el ejemplo necesitan situarlo obligatoriamente en la carpeta Others de la memoria principal del teléfono, ya que esta versión d eplayer no tiene la aplicación que reconoce los archivos swf mediante un gestor de archivos como puede ser el file manager o el FExplorer. Para poder ejecutarlo debe lanzar Flash y una vez en Flash abrir el archivo desde su correspondiente menú.
Los usuarios de Flash Lite 2.0 pueden colocarlo en cualquier ubicación ya que lo reconocerá y al tratarse de video no tienen la necesidad de situarlo en ninguna carpeta concreta o abrirlo con el FExplorer. (en Flash Lite la carga de contenidos externos, shared objects etc se ve afectada si colocamos nuestra aplicación en cualquier ubicación y lo abrimos con el file manager del dispositivo, cosa que se soluciona abriendo el swf principal con el FExplorer).
Más información sobre este tema en esta entrada del foro de Adobe:
Discusión sobre problemas de carga con Flash Lite
Consideraciones finales
Uno de los aspectos importantes cuando realizamos una aplicación para flash lite es de dotar al usuario de la capacidad de salir de la aplicación mediante fscommand2("quit") ya que sino la aplicación queda residente en memoria, y si no se cierra explícitamente, al volver a abrirla conservaremos el estado en el que estábamos. Por tanto si no dotamos a la aplicación de esta funcionalidad, para poder resetearla por completo necesitaremos de reiniciar el dispositivo.
Por otro lado es importante recordar que la reproducción de video se hace desde la aplicación incluida en el dispositivo para ese fin, y que el control del que disponemos desde Flash Lite es realmente mínimo. Esta característica hace que la carga de videos funcione correctamente si probamos nuestra película desde el File Manager aunque tengamos colocada la aplicación en una carpeta diferente a la denominada "Others" y que es donde se habrían de situar en principio nuestras pelicualas flash.
La carga de videos también podría hacerse de forma remota sobre un servidor, tomando los videos albergados en él.
Muchos dispositivos no tienen un control directo sobre el volumen (solo cuando estamos en medio de una llamada o reproduciendo un video desde una aplicación, por ejemplo), con lo que puede ocurrir que si el nivel de audio del vídeo es muy elevado, distorsione sin poder actuar sobre dicho volumen mediante action script para solucionarlo. Sobre este tema cabe destacar que cuando arrancamos flash directamente, disponemos de una opción en el menú donde podemos configurar el volumen general del player.
Podeís descargaros el paquete del FLA de ejemplo junto el tutorial en PDF en el siguiente enlace:
Descargar Tutorial y archivos Fuente
Comentarios recientes