Para proporcionar experiencias atractivas a través de aplicaciones RIA que proporcionen video, Adobe ha revolucionado la forma en que interactuamos con contenido multimedia en la web, más del 75% de todo el video online depende de la tecnología Flash.

Flash Video

Desde la versión de Flash Player 10.1 disponible en dispositivos móviles, puedes asegurar que todo este gran contenido puede alcanzar múltiples usuarios a través de los dispositivos tomando nota de las recomendaciones de este artículo.

Cuando se pienses desplegar un servicio móvil de video tomando ventaja de la Plataforma Flash, deberás considerar muchos factores para brindar una gran experiencia de usuario:

  • Directrices de codificación de video móvil: ¿Cuál es el perfil recomendado de codificación enfocado a los dispositivos con Flash Player 10.x? Este artículo brinda una tabla que resume los ajustes de un perfil de codificación.
  • Optimización de contenido de video: ¿Cuáles son las mejores prácticas a seguir en la autoría de contenido de video para optimizar el rendimiento? Este artículo ofrece tips en la disciplina necesaria para un rendimiento óptimo en el entorno limitado.
  • Optimización del Video Player: ¿Cuáles son las mejores prácticas a seguir para en el desarrollo de tu reproductor de video en cuando a la optimización del rendimiento? Este artículo cubre varios mecanismos de detección para determinar la ejecución apropiada de video, junto con consejos para el diseño de tu reproductor de video para un rendimiento óptimo.

Directrices de codificación de video móvil

Con base en las capacidades de hardware disponibles en el mercado y el perfil interno de los dispositivos de referencia, Adobe recomienda los parámetros de codificación siguientes:

Si estas actualmente brindando video basado en los perfiles de codificación mostrados, no necesitaras codificar de nuevo. Sin embargo, si estas planeando codificar de nuevo, Adobe recomienda codecs de aceleración de hardware, como H.264, dando avances significantes en torno a la eficacia de compresión que se traduce en una velocidad de reproducción mejorada y reduce el consumo de batería.

En general, recomendamos mantener la velocidad de frames de origen (en tiempo de captura) para preservar la calidad. Para video con una velocidad de frames de origen mayor a 24 fps, sin embargo, deberás considerar bajar la resolución de la velocidad de reproducción por un factor, a la mitad—por ejemplo, de 30 a 15 fps.

A pesar de la recomendación de 24 fps, hemos visto videos con una velocidad de frames de origen de 30 fps con buen rendimiento, siempre y cuando los ajustes de codificación sean conservados (tales como On2/Sorenson, la tasa de bits y la resolución) y las directrices para la optimización del reproductor de video.

Re-codificar en múltiples flujos para brindar una experiencia de usuario optima a través de varias condiciones de red. Como mínimo, Adobe recomienda esos tres flujos que pone a disposición.

  • Calidad alta, sobre WiFi, como la configuración del WiFi – H.264 a 500kbps
  • Calidad media, sobre 3G, como  la configuración sobre todo 3G a 350 kbps
  • Calidad baja, sobre 2G, como la configuración para todo 2G a 100 kbps

Optimización del contenido de video

Para mejorar el rendimiento, Adobe recomienda evitar o minimizar el uso de videos que:

  • Sean rotados, sesgados o transformados a través de una proyección en perspectiva.
  • Sean mapas de bits en cache.
  • Tengan filtros, tales como blur o glow y efectos.
  • Sean accesados a través de BitmapData.
  • Tengan alpha (_aplha) o transformación de color.
  • Sean transformados a través de Pixel Bender.
  • Sean mezclados con vectores gráficos, incluyendo otro video, encima (overlay) o debajo (underlay).
  • Sean colocados dentro de un modo sin ventana (donde en HTML el parámetro embebido wmode no está como “window”) del archivo SWF.

Optimización del Reproductor de Video

Más allá de la optimización del contenido, la optimización del reproductor es igual de importante cuando se trata de rendimiento. Las siguientes secciones ofrecen las mejores prácticas a mantener en mente cuando diseñes y desarrolles tu reproductor de video.

Rutinas de Detección

Debido a la diversidad en la vista landscape de cada dispositivo, es crítico adoptar métodos más sofisticados para determinar las capacidades específicas de un dispositivo y posteriormente elegir la interfaz de usuario y flujo de video apropiados. Esta información es importante ya que el dispositivo del usuario puede tener una capacidad de CPU, memoria, y técnicas de entrada de datos diferentes, factores que son críticos en garantizar que el usuario tenga la mejor experiencia posible. Basado en una investigación en conjunto con gskinner.com, una firma de desarrollo en Flash, Adobe recomienda que los desarrolladores usen varios niveles de detección y asignen pesos apropiados: detección del Flash Player, detección del ancho de banda, detección de dispositivo, entrada de datos y detección de la orientación de la pantalla.

Detectando la versión e información del Flash Player. El mecanismo estándar en la industria para determinar la presencia y versión del Flash Player en un dispositivo es haciendo uso de un recurso open-source, una librería de JavaScript bajo la licencia MIT y llamada SWFObject. SWFObject es un archivo pequeño de JavaScript y puede ser implementado en el mínimo de una línea de código JavaScript. Puedes aprender más acerca de su implementación o descargar la librería desde la documentación de SWFObject alojada en Google Code.

Detectando el ancho de banda. Desafortunadamente, no hay un mecanismo activo en el Flash Player para determinar las condiciones de la red—un punto de datos clave para decidir que contenido es apropiado para el dispositivo de destino. Puedes hacer una aproximación acerca del ancho de banda midiendo el tiempo que le toma la descarga de los recursos requeridos, como archivos de configuración XML o archivos SWF externos, de al menos 50 KB de peso:

Toma en cuenta que esta es una aproximación que varía de acuerdo a la carga de la red, los procesos del dispositivo que corren de fondo, y fuerza de la señal.

Si estas usando el Flash Media Server (FMS) para entregar flujos de video, están incorporados en la calidad del servicio API que devuelve el ancho de banda actual del usuario. Para más información, revisa el Script para la detección de la  banda ancha en la Guía para Desarrollador de Adobe Flash Media Server.

Detectando la arquitectura del CPU en el espacio móvil, la mayoría de los dispositivos se basan en los procesadores más lentos, más eficientes energéticamente, como los que están basados en ARM. Aunque no es el mecanismo más robusto, un fuerte indicador de si el dispositivo no es de escritorio es verificar el tipo de procesador:

Detectando el Sistema Operativo (OS) Otra regla de oro a considerar que ayuda a determinar si el dispositivo es un dispositivo móvil por medio del OS, particularmente la detección del sistema operativo no es aplicable en las computadoras de escritorio:

Detectando Información Especifica del Dispositivo Puedes descubrir información del dispositivo más granular de la UserAgent (UA) de la cadena, la cual puede ser recuperada a través de JavaScript usando ExternalInterface. Si bien esto puede revelar diversa información acerca del dispositivo—Incluyendo la versión de OS, nombre del dispositivo, y explorador—este enfoque no es recomendado, ya que se dirige a un dispositivo en específico y no da lugar a un alcance más amplio. Además, la cadena UA en sí misma no es garantiza de ser coherente o bien formada en todas las plataformas y carriers.

Detectando la Resolución de la Pantalla, puntos por pulgada (dpi), y diagonal. Un enfoque pragmático para distinguir entre un dispositivo móvil y uno que no lo es referirse a Capabilities.screenResolutionX, Capabilities.screenResolutionY, y Capabilities.screenDPI del dispositivo para determinar el tamaño físico de la pantalla. Además nota que los dispositivos móviles típicamente tienen un DPI más alto que una computadora de escritorio.

Detectando la Orientación de la Pantalla. Flash Player disparara eventos de redimensionamiento desde el escenario cuando un dispositivo sea rotado; esto puede influir en como se muestra la interfaz de usuario.

En este handler puedes determinar si el dispositivo está posicionado horizontal o verticalmente.

Detectando las Capacidades de Ingreso de Datos. Varios dispositivos tendrán diferentes capacidades de ingreso de datos, los cuales tienen implicaciones directas para la experiencia de usuario. Por ejemplo, una UI que soporta interacciones de rollover no es apropiada para un dispositivo multi-touch o uno sin soporte de cursor. Comprendiendo estas capacidades te permitirá adaptar la UI para soportar los mecanismos de ingresos de datos óptimos para la interacción con el usuario.

Selección del Flujo de Video

Basado en el Flash Player, ancho de banda, tipo de dispositivo, el tipo de rutinas de ingreso de datos, la interface apropiada y los flujos de video previstos para el usuario.

En términos generales, las rutinas de detección mostradas arriba proporcionan un alto nivel de fidelidad acerca de que el dispositivo que solicita es un dispositivo móvil, por defecto el flujo de video será de baja calidad—por ejemplo, la configuración para todo 3G como se describe en la sección Directrices de codificación de video móvil—garantiza además que la reproducción ocurre con un tiempo de carga y velocidad de reproducción aceptables. Puedes considerar brindar a los usuarios la opción de seleccionar explícitamente una calidad de video alta a través de los controles de tu reproductor de video.

Optimización del Mantenimiento

Los reproductores de video ineficientes están plagados de la ejecución excesiva de scripts y exceso de renderizado. A continuación se describen una serie de optimizaciones para el reproductor de video que pueden ayudarte para mejorar significativamente el rendimiento en el dispositivo móvil.

Simplificando la Complejidad de la Presentación. Tanto como sea posible, reduce el número de objetos en el escenario. Simplifica las capas de los botones esenciales mediante el uso, por ejemplo, llenándolos con estilos simples como rectángulos de color solido en lugar de gradientes o múltiples líneas. Si formas como el playhead están cambiando de forma o posición, deberían ser actualizadas con poca frecuencia como sea posible—no más de una vez por segundo.

Limitar el uso de funciones temporizadoras y Controlar los Duplicados. El objetivo aquí es minimizar el procesamiento de ActionScript—intervalos, eventos de enterFrame, llamados de funciones registrados con NetStream, eventos de mouse, y otros tipos de funcionalidad. Cuando se registra una función temporizadora, será llamada tan seguido como sea posible hasta que sea solicitada, potencialmente, Flash Player puede terminar gastando todo su tiempo de ejecución en la ejecución de scripts en lugar de fotogramas del video. En consecuencia, los fotogramas del video son borrados para continuar con el audio y solo se muestra una pequeña fracción de los fotogramas del video. Esto es especialmente cierto para funciones de temporizador que actualizan los componentes de la UI y por ello los vuelve a dibujar, las cuales son operaciones que consumen muchos recursos.

No crees elementos que no están actualmente visibles. Flash Player creara objetos que están ocultos o detrás de otros objetos. Objetos como el “reloj de arena giratorio” debería ser destruido cuando ya no es necesitado. Para objetos que intentas reusar, deten el Timeline y coloca la propiedad visible a falso, o mueve el objeto fuera del escenario. Para objetos que no reusaras, llama removeChild(), y pondrás el objeto como null.

Minimiza el almacenamiento de bitmaps en cache por objetos que cambian con frecuencia. Evita el almacenamiento de bitmaps (via cacheAsBitmap) frecuentemente actualizados. Cuando el almacenamiento de bitmaps es habilitado, el bitmap necesita ser re-almacenado, una operación que consume muchos recursos, cada que el objeto es actualizado. Por ejemplo, campos de texto actualizados frecuentemente no deberían ser bitmaps suavizados, ya que impacta el tiempo de reproducción del video.

Evita Transparencias. Cuando sea posible, evita transparencias o limita las transparencias a áreas pequeñas. Por ejemplo, puede ser preferible convertir los anuncios con superposición transparente por anuncios pre o post-posición.

Evita APIs de Dibujo. Las APIs de dibujo utilizan especialmente muchos recursos, ya que suelen crear objetos como el scroll bar, dinámicamente sobre el escenario antes de mostrar la imagen debe ser razterizada. Además, estos objetos son destruidos y recreados cada vez que ActionScript es ejecutado. Si es posible, crea estos objetos estáticamente sobre el escenario, estos residirán en la memoria a través de diferentes líneas de tiempo.

Mejora la Eficiencia de ActionScript. Las optimizaciones en las ciencias de la comunicación respecto a la codificación se aplican al ActionScript, técnicas comunes, tales como evitar bucles grandes, reduciendo la profundidad de las llamadas de las funciones, y simplificar el diseño de las clases orientadas a objetos, aplican. Se refieren a la Optimización del Contenido Móvil y Consejos para la Optimización del Rendimiento para la Adobe Flash Platform.

A donde vamos desde aquí

Flash Player 10.1 brinda Flash Player para móviles, que ahora te permite ofrecer la mejor experiencia de video que no permitirá a los usuarios amar otra pantalla. Mientras que serás capaz de aprovechar muchos de los proyectos existentes del Flash Player, espero que este artículo te haya dejado una mayor apreciación del medio ambiente limitado que es móvil y las optimizaciones necesarias para facilitar una experiencia de usuario completa.

Aunque gran parte de este artículo estuvo enfocado a la optimización del rendimiento, te recomiendo mantener un ojo en otro aspecto importante: el diseño de experiencias. La plataforma móvil es convincente y el desarrollo de una experiencia de usuario aprovecha el contexto de una manera de importancia significativa.

Por favor consulta los siguientes recursos para más información:

  1. Aprende acerca del Flash Player 10.1
  2. Ve demostraciones del Flash Player 10.1 y observa discusiones de algunos ingenieros del Flash Player acerca de las nuevas características clave y los retos que tiene el Flash Player en los dispositivos móviles.
  3. Consulta la Guía para Desarrolladores de ActionScript 3 y la Referencia de la Adobe Flash Platform acerca de ActionScript 3 para información acerca de la sintaxis y el uso de las nuevas APIs en el Flash player 10.1

Aprende a adaptar tu contenido para ofrecer la mejor experiencia posible a los usuarios en los dispositivos móviles. Revisa los siguientes documentos:

Este articulo esta publicado en Adobe Developer Connnetion (devnet) bajo licencia Creative Commons, escrito originalmente por Edmond Au Product Manager de Flash Player en Adobe Systems y traducido en este blog por Jesús Macedo