Desarrollo Aplicaciones y Juegos con Adobe Flash Lite

CREIX AMB INTERNET

2

1. Introducción.

1.1. El entorno de desarrolloFlash Lite es una versión ligera de Adobe Flash Player específicamente desarrollada para los dispositivos móviles. Flash ha sido una tecnología de gran éxito para los juegos en línea, que puede ser incluido en páginas web HTML.Flash Lite fue originalmente desarrollado por la empresa Macromedia Inc. antes de ser adquirida por Adobe en 2005. Flash Lite había estado disponible en Japón y Europa, en sus versiones Flash Lite 1.0 o Flash Lite 1.1. En el año 2005 Flash Lite 2.0 salió al mercado. Flash Lite 2.1 siguió , y la versión 3.0 está actualmente disponible. Adobe Flash Lite version 4 surge con el conjunto CS5.

1.2. Flash Lite vs FlashFlash Lite 1.1 se basa en un híbrido de Flash 4 y Flash 5, y soporta Flash 4 ActionScript, que es una pre-versión de ActionScript 1.0. Flash Lite 2.1 está basado en Flash 6 y tiene soporte para ActionScript 2.0. Flash Lite 3.1 está basado en Flash 7 y tiene soporte para ActionScript 2.0. Flash Lite 4 está basado en Flash 10 y tiene soporte para ActionScript 3.0.

1.3. Flash Lite vs J2MELas aplicaciones de Flash Lite se muestran como un solo archivos SWF. A partir de Flash Lite 2.0, se comprimen los archivos SWF utilizados. El archivo SWF se pueden transferir al dispositivo móvil utilizando Over-The-Air, Bluetooth o cualquier otro medio de transferencia de datos al dispositivo. El archivo SWF se pone en marcha desde el reproductor Flash Lite en el dispositivo. Difiere de la implementación de Java en tanto que las aplicaciones Java ME consisten en un archivo JAD que describe la aplicación, y contiene la ubicación del archivo JAR de la aplicación. Esto ofrece la posibilidad a los usuarios de disponer de aplicaciones Java ME fácilmente sin tener que descargarlas, aunque Java ME es más complejo que el archivo SWF para aplicaciones de Flash Lite.

3

1.4. Particularidades del desarrollo para dispositivos móviles.

Los desarrolladores de Flash Lite se enfrentan al problema adicional que supone la gran diferencia de rendimiento de los dispositivos móviles. Si el contenido debe publicarse en muchos dispositivos diferentes, los desarrolladores tienen que encontrar las características mínimas comunes a todos esos dispositivos.

La optimización del contenido móvil exige llegar a un compromiso. Por ejemplo, una técnica puede mejorar la presentación del contenido mientras que otra puede incidir en un mayor rendimiento. Cuando consideres las ventajas y los inconvenientes, tendrá que probar el contenido repetidas veces en el emulador y en el dispositivo de destino. Debes examinar el contenido en el dispositivo real para evaluar el realismo de los colores, la legibilidad del texto, las interacciones físicas, la capacidad de respuesta de la interfaz de usuario y otros aspectos de la experiencia real en el dispositivo móvil.

Tres aspectos a tener en cuentaen tu desarrollo de prototipo y aplicación:

Rendimiento: Los teléfonos inteligentes son más lentas que las computadoras de escritorio, y tienen menos memoria.Tamaño de pantalla: El tamaño físico de la pantalla limita la cantidad de información que se puede mostrar al mismo tiempo.Interacción: La interfaz de usuario de la aplicación debe anticipar la entrada basada en el contacto, y no debe suponer la presencia de un teclado físico.

1.5. Dispositivos táctiles.

Flash Lite version 4 presenta novedades para dispositivos táctiles. Aunque no desarrolla palicaciones para Iphone, si que te permite interactura con otros dispositivos de pantalla táctil. Como el creador de Flash, Kevin Lynch, recuerda, en un principio ( año 1997 ) se desarrolló Flash pensando en dispositisvos m´oviles de pantalla táctil.

4

2. Adobe Device Central CS52.1. Device Central CS4

Adobe Device Central proporciona una nueva forma de evaluación del trabajo para desarrolladores de contenido de dispositivos móviles mediante el uso de una amplia gama de dichos dispositivos. Device Central trabaja con contenido desarrollado en otros productos de Adobe, como Fireworks o Illustrator.

3. El emulador en Device Central CS53.1. Flash en Device Central.

Iniciamos Adobe Flash.Crear nuevo > Archivo de Flash (móvil).

5

Flash abrirá Device Central y mostrará la ficha Nuevo documento.En Device Central, selecciona una versión del reproductor ( una versión del tfn. móvil ) y una versión de ActionScript que viene dada por las características del teléfono.

Se te actualizará la lista de dispositivos disponibles que aparece a la izquierda. Los dispositivos que no admiten la versión del reproductor o la versión de ActionScript seleccionadas aparecen atenuados.Selecciona un tipo de contenido.

6

La lista de dispositivos disponibles que aparece a la izquierda se actualizará y mostrará los dispositivos compatibles con el tipo de contenido indicado ( así como la versión del reproductor y de ActionScript ).

En la lista de dispositivos disponibles, selecciona un único dispositivo de destino o varios dispositivos ( o bien selecciona un grupo de dispositivos o un dispositivo único en la lista Conjuntos de dispositivos ). Device Central presenta una lista de varios tamaños de documentos según el dispositivo o los dispositivos que haya seleccionado ( si los dispositivos tienen diferentes tamaños de pantalla ). En función del diseño o contenido que estés desarrollando, puedes crear un documento móvil diferente para cada tamaño de pantalla, o intentar encontrar un tamaño adecuado para todos los dispositivos. Si eliges la segunda opción, se recomienda usar el tamaño de documento más pequeño o el más grande como denominador común. Puedes incluso indicar un tamaño personalizado en la parte inferior de la ficha.Click en Crear.Flash se inicia y crea un documento con ajustes de publicación preestablecidos desde Device Central, incluido el tamaño correcto para el dispositivo ( o grupo de dispositivos ) indicado.Añade contenido al nuevo documento de Flash.Para probar el documento, selecciona Control > Probar película

3.3. Paneles de visualización.

7

3.4. Paneles de monitorización.

8

3.5. Paneles de estado.

9

4.Conceptos básicos de Flash Lite4.1. Adobe Flash y contenidos para móvil

A continuación expondremos las pautas que debbes tener presente al desarrollar contenidos para Flash LiteCuando creas contenido animado para un dispositivo móvil, debes tener en cuenta las limitaciones de la CPU. Estas pautas te ayudarán a evitar que el contenido en Flash Lite se ejecute lentamente:Cuando creas un nuevo archivo de Flash Lite, comprueba que el documento está configurado correctamente. Aunque los archivos Flash se pueden ampliar o reducir sin problemas, el rendimiento puede resultar afectado si el archivo no se ejecuta con su tamaño del escenario original y tiene que adaptarse en el reproductor. Intenta definir el tamaño del escenario del documento con arreglo a la resolución del dispositivo de destino. Asimismo, configura el reproductor de

10

Flash en la versión correcta de Flash Lite y selecciona el perfil de dispositivo adecuado en Device Central.Flash Lite puede representar gráficos vectoriales con calidad baja, media o alta. Cuanto mayor sea la calidad de la representación, mayor será la fluidez y exactitud con las que Flash Lite representa los gráficos vectoriales y mayor será también la demanda de la CPU del dispositivo. Para proporcionar animación compleja, prueba a cambiar la configuración de calidad del reproductor y, a continuación, realiza pruebas exhaustivas en el archivo SWF. Para controlar la calidad de representación de un archivo SWF, utiliza la propiedad _quality o el comando SetQuality. Los valores válidos para la propiedad _quality son LOW, MEDIUM y HIGH.Limita el número de interpolaciones simultáneas. Reduce el número de interpolaciones o secuencia la animación para que una empiece cuando otra termine.Utiliza efectos de transparencia (alfa) en los símbolos con moderación porque utilizan mucha CPU. En concreto, evite la interpolación en símbolos con niveles alfa que no sean totalmente opacos ( menos del 100% ).Procura no utilizar efectos visuales que consuman mucha CPU, como máscaras grandes, movimientos prolongados, superposiciones con transparencia, degradados extensos y vectores complejos.Experimenta con combinaciones de interpolaciones, animaciones mediante fotogramas y movimientos controlados por ActionScript para producir resultados óptimos.La representación de óvalos y círculos vectoriales consume mucha más memoria que la representación de cuadriláteros. El empleo de trazos redondos u ovalados aumenta también considerablemente el uso de CPU.Prueba con frecuencia las animaciones en los dispositivos de destino reales.Cuando Flash dibuja una región animada, define un cuadro rectangular delimitador alrededor del área. Optimiza el dibujo reduciendo el tamaño del rectángulo al máximo. Evita que se solapen las interpolaciones, ya que Flash interpreta el área combinada como un único rectángulo y, por tanto, la región total resultante será más grande. Utiliza la función Show Redraw Region de Flash para optimizar la animación.Procura no utilizar _alpha = 0 y _visible = false para ocultar los clips de película en pantalla. Si simplemente desactivas la visibilidad de un clip de película o cambia su alfa a cero, se incluirá igualmente en los cálculos de representación de líneas, lo que puede afectar al rendimiento.

11

Tampoco intentes ocultar un clip de película colocándolo detrás de otra imagen. Se incluirá igualmente en los cálculos del reproductor. En lugar de ello, saca totalmente los clips de película del escenario o elimínalos con una llamada a removeMovieClip.

4.2. Comparativa entre Flash y Flash-Lite

Las principales características de Flash Lite respecto a Flash son en ActionScript.Recuerda que hasta la actual versión Flash Lite 4 para smartphones, debes trabajar con ActionScript 1 o 2 si deseas que tu aplicación sea ampliaSin embargo, son todas las posibilidades de ActionScript están disponibles para Flash Lite. Como su nombre indica, se trata de una versión reducida de Flash.En Flash Lite destacamos las siguientes características que disponen de sus propias clases u objetos:Extensiones de ActionScript:Permiten el acceso a las funciones del dispositivo específico, como el nivel de batería y potencia de la señal. También ofrecen la posibilidad de enviar mensajes SMS y números de marcación.Acceso a la red y conectividad Esto permite que los recursos que se cargarán a través de HTTP (S) las solicitudes, y el correo electrónico puedan ser enviados. También es posible cargar los fondos de pantalla desde tus servidores de web, permitiendo la actualización de contenido de Flash Lite.Soporte de audio adicionalSoporte para MP3, PCM, ADPCM y audio. Soporte de hardware para estos formatos que se utiliza cuando estén disponibles.Motor de representación escalableEl motor de renderizado básico de Flash Lite es muy adecuado para contenido interactivo rico ( RIA ), ya que admite vectores, degradados, mapas de bits de audio de entrada del usuario, y secuencias de comandos.Multi - Plataforma de ApoyoFlash Lite ofrece soporte a través de varias plataformas, incluyendo: Symbian S60 v2/v3, 2.x/3.x Qualcomm BREW, Nokia, Android, y Microsoft Windows Mobile.Datos XML dinámicosApoyo para la carga y análisis de datos XML externos.

12

Datos persistentes ( Shared Objects )Te ofrecen la capacidad de almacenar y recuperar información pertinente, específica de la aplicación a nivel local. Esto proporciona un entorno de desarrollo más robusto.API de dibujo de ActionScriptPermite a los desarrolladores crear fácilmente sofisticados gráficos vectoriales y de formas animadas, en tiempo de ejecución con ActionScript.Comprimido de salvapantallasFlash Lite es compatibles con la prestación de fondos comprimidos por la herramienta de edición de Flash. Flash Lite descomprime el archivo SWF antes de que comience su procesamiento.

4.3. La Gestión de TecladoLa gestión de teclado cobra importancia en aplicaciones móviles, donde no disponemos del objeto Mouse o ratón. Controlamos la gestión de teclado mediante Funciones y Clases de ActionScript y desarrolamos a partir las clases del objeto teclado ( Key Class ):Key Extended Key: utiliza el método Key.getCode()SetSoftKeys.Para dispositivos táctiles, FlashLite incorpora la clase Mouse Gesture, que permite simular los eventos de ratón para pantalla táctil.

4.4. Los Eventos de Teclado

Cada objeto tiene asignadas sus propias funciones o eventos, que permiten interactuar con el dispositivo.Las funciones heredan sus propiedades y valores de las Clases que conforman el lenguaje ActionScript.

Eventos de Teclado en FlashLite 1

Deben ir asociados a cada objeto, como hacíamos en ActionScript 1Ejemplo Básico para Flash Lite 1

13

Creamos un archivo Flash. Importamos los elementos gráficos.Añadimos fotogramas en la línea de tiempo.Arrastramos un Boton de la Librería al escenario.Insertamos el siguiente código para el objeto Boton desde el panel de ActionScript.

on (keyPress "<Enter>") { gotoAndStop ("Game"); }

Probamos nuestra película

Eventos de Teclado en FlashLite 2 y 3Se declaran mediante funciones.Pueden estar en funciones dentro de los objetos o en la linea de tiempo.Enumeramos los siguientes:BACKSPACE, CAPSLOCK, CONTROL, DELETEKEY, DOWN, ENTER, ESCAPE, INSERT, LEFT, PGDN, PGUP, RIGHT, SHIFT, SPACE, TAB, UP.

4.5. Símbolos y Librerías de Flash Lite

En Device Central dispones de librerias Locales y On-Line de dispositivos de plataforma Móvil.En Flash Podrás trabajar con las librerías y símbolos propios: Gráfico, Boton, MovieClip, Audio, Video, Font…Pero será más práctico “llamar” a los objetos externamente, tener tus librerías en un archivo exerno, y vincularlo a tu película principal mediante la función getURL(); para así optimizar la experiencia de usuario.Los componentes instalados con Flash (por ejemplo, DataGrid y Acordeón) fueron diseñados para su uso en aplicaciones Flash de escritorio. Los requisitos de memoria y potencia de procesamiento que requieren normalmente prohíben su uso en aplicaciones de Flash Lite. Adobe recomienda no utilizar los componentes de interfaz de usuario estándar en las aplicaciones de Flash Lite.

14

Flash Lite 2.x admite vídeo único dispositivo, lo que significa que se basó en el dispositivo para descodificar y hacer de vídeo. Está limitado por los formatos de video soportados por un dispositivo específico, no puede sincronizar el vídeo con la línea de tiempo, no puede controlar el volumen del clip de vídeo, y no puede girar, sesgar, compuesto o mezcla el vídeo de dispositivo con otros medios de comunicación. (El video está siempre encima de cualquier otro contenido Flash.)Flash Lite 3.0 añade soporte para Flash Video (FLV) con versiones de los códecs On2 y Sorenson optimizado para dispositivos móviles. Video FLV se representa directamente en el reproductor Flash Lite y no por el dispositivo, por lo que ya no tendrá que preocuparse por si sus dispositivos de destino admite un formato de video en particular. Flash Lite 3.0 es compatible con la reproducción de Flash Video con los siguientes métodos:

• Incorporación de vídeo en archivos SWF.• Descarga progresiva de vídeo de las carpetas locales y los servidores web

(HTTP).• Streaming de vídeo desde un servidor Flash Media.

4.7. Animación con código básico ActionScript

ActionScript para Flash Lite es una versión reducida de ActionScript. Si has trabajado con versiones anteriores de Flash te resultará muy comodo desarrollar con Flash Lite.

• En Flash, selecciona Archivo> Abrir y busque el archivo cafe_tutorial_start.fla encuentra en la carpeta Tutorial.

• Elije Archivo> Guardar como y guarda el archivo como cafe_tutorial.fla.• En la línea de tiempo ( Ventana> Línea de tiempo), selecciona el fotograma

1 en la capa del menú principal.• Abre el panel Biblioteca (Ventana> Biblioteca) y arrastra una instancia del

botón Especiales al escenario. • Coloca el botón de Ofertas debajo del campo de texto que presenta el

restaurante.• Con el botón seleccionado Especiales, en el inspector de propiedades,

introduce specials_btn en el cuadro Nombre de instancia.• Arrastra una instancia del botón de vídeo desdes el panel Biblioteca al

escenario. • Coloca el botón de vídeo debajo del botón Specials.

15

• Con el botón de vídeo seleccionado, en el inspector de propiedades, introduce video_btn en el cuadro Nombre de instancia.

• Arrastra una instancia del botón de reservas desde el panel Biblioteca al escenario.

• Coloca el botón de reservas por debajo del botón de vídeo.• Con el botón seleccionado, en el inspector de propiedades, introduce

reservations_btn en el cuadro Nombre de instancia.• En la línea de tiempo, selecciona el fotograma 1 en la capa denominada

ActionScript. • Abre el panel Acciones ( Ventana> Acciones ) e introduces el siguiente

código:stop(); _focusrect = false; fscommand2("SetSoftKeys", "Set Location", "Exit"); fscommand2("Fullscreen", "true");

Este código hace lo siguiente:Detiene la cabeza lectora en este fotograma.Desactiva el rectángulo de selección que Flash Lite dibuja de forma predeterminada alrededor del botón o campo de introducción de texto con el enfoque actual (consulta el rectángulo de selección).Registra las teclas de función para utilizar.Muestra la pantalla de la aplicación completa.Cuando Flash Lite se encuentra en modo de pantalla completa, las etiquetas se especifica en el comando SetSoftKeys no son visibles. Por esta razón, se debe añadir etiquetas personalizadas tecla de función para el escenario.

4.8. Animación con código avanzado ActionScript

Agrega el código siguiente en el fotograma 1 para manejar eventos de botón para los botones del menú, y para el enfoque de selección:

16

Los controladores de eventos onPress asignados a los botones de llamada y specials_btn video_btn enviar la cabeza lectora a los fotogramas etiquetados como "especiales" y "video".Cuando el usuario selecciona la opción de reservas, el controlador onPress marca el número de teléfono especificado en el location_so.Si el usuario no ha especificado una ubicación a la convocatoria de las reservas, la aplicación envía la cabeza lectora al fotograma etiquetado como "lugares" donde el usuario selecciona el lugar preferido para realizar las reservas.

Guia de RecursosRECURSOS

17

Nom URL Observacions

Adobe Mobile Platform

http://www.adobe.com/devnet/devices/fpmobile.html

Comparativa Flash -Java

http://blogs.sun.com/mobility_techtips/entry/comparing_mobile_platforms_java_me

Test de juego

http://www.deviceanywhere.com/

Conversion ASS3 a AS2

http://www.asual.com/enlarge/

Plataforma Sony Ericsson

http://developer.sonyericsson.com/wportal/devworld/technology/flash-lite/

Flash Lite vs java Me

http://cs.ru.ac.za/research/g04k1804/stuff/thesis.pdf

Comunidad Flash Lite Español

http://www.flashlite.es/

18