Este documento trata sobre la optimización de contenido Flash para dispositivos móviles. Explica que la optimización mejora el rendimiento al lograr una reproducción más consistente y mejorar la velocidad. Detalla formas de minimizar el uso de memoria y CPU, como reutilizar objetos y evitar filtros. También cubre cómo medir el rendimiento cuantitativa y cualitativamente para verificar los resultados de la optimización.

1. Optimización de Contenido
Flash para Móviles
@edgarparada

2. Agenda
• Introducción a la Optimización
• Uso de Memoria
• Minimizar gasto de CPU
• Mejorar velocidad de Rendering
• ¿Preguntas?

3. Optimización
La optimización de nuestros contenidos Flash
es un factor muy importante para lograr una
reproducción más consistente, mejora la responsividad
(usabilidad*), tendremos más poder del CPU
disponible, etc.

4. Optimización
La optimización de nuestros contenidos Flash
es un factor muy importante para lograr una
reproducción más consistente, mejora la responsividad
(usabilidad*), tendremos más poder del CPU
disponible, etc.

5. ¿Cómo funciona FP?
El runtime opera en un ciclo con ciertas instrucciones que
ocurren en cada “frame”. Un frame es un simple bloque de
tiempo determinado por los FPS.
Cada frame tiene 2 fases, divididas en 3 partes: eventos,
enterFrame y rendering.

6. Ejecución de Código
• Fase 1 - Eventos y enterFrame
Los eventos de FP llegan y se
notifican, el evento enterFrame
siempre se ejecuta una vez por
frame. ”Elastic Racetrack”
• Fase 2 - Rendering
50% 50%
FP calcula el estado de todos
los elementos visuales y los
dibuja (renderea) en pantalla. Fase 1 Fase 2

7. Benchmarking
• Siempre que hacemos optimización es
muy importante poder medir los
resultados. Existen 2 tipo de benchmarking:
• Cuantitativo (medible) - Depende de
ciertas herramientas
• Cualitativo (persepción) - Depende del
contexto

8. Benchmarking Cuantitativo

9. Medir Tiempo Transcurrido
El tiempo transucrrido puede llegar a medirse
con una función sencilla:
tiempo = getTimer();
// todo lo que vamos a medir
tiempoTranscurrido = getTimer() - tiempo;

10. PerformanceTest.as
Es una librería creada por Grant Skinner (http://
gskinner.com/libraries/) para probar desde funciones
en una línea de tiempo hasta generar todo una serie
de pruebas de desempeño durante el desarrollo.
//Prueba de una función
perfTest.testFuncion(function, iterations);

11. Medir Frame Rate
Performance Monitor
https://github.com/mrdoob/Hi-ReS-Stats
Es una clase que provee información para monitorear el desempeño
de nuestro código ActionScript.
• FPS Cuantos cuadros fueron renderizados en 1 segundo.
• MS Milisegundos que se necesitaron para renderizar un cuadro.
• MEM Memoria usada por el código, si aumenta esta MAL.
• MAX Cantidad Máxima de memoria alcanzada por la
aplicación.

12. Flash Builder Profiler
Es una vista que nos permite analizar “en vivo” la
aplicación. Existe la posibilidad de tomar snapshots
de memoria y monitorear funciones del GC.

13. Benchmarking Cualitativo

14. UX influencia
nuestra tolerancia
Desempeño
Hay diferentes factores que
pueden afectar la persepción de
los usuarios: acciones, alertas,
distractores, precargas, etc.

15. Frame Rate
Un framerate más alto implica realizar más
operaciones por segundo o menos tiempo para
realizar dichas operaciones según quiera verse ;-)
Es un valor dinámico dentro de Flash...
• Flash IDE - Properties / FPS
• ActionScript 3 - [SWF(frameRate=“24”)]
• Flex - <s:Application frameRate="24">

16. Uso de Memoria
Tratar de conservar la memoria de nuestras
aplicaciones siempre es importante durante el
desarrollo, en el caso de los móviles debe
considerarse una prioridad.
Existen diversas técnicas que se verán afectadas
por el uso de Display objects, reutilización de objetos,
optimización de bitmaps, manejo adecuado de filtros,
etc.

17. Display Objects
trace(getSize(new Shape()));
// output: 236
trace(getSize(new Sprite()));
// output: 416
trace(getSize(new MovieClip()));
// output: 452

18. Reutilización de Objetos
const MAX_NUM:int = 18; const MAX_NUM:int = 18;
const COLOR:uint = 0xCCCCCC; const COLOR:uint = 0xCCCCCC;
var area:Rectangle; // Crear objeto fuera del ciclo
for (var i:int = 0; i < MAX_NUM; i+ var area:Rectangle = new
+) Rectangle(0,0,1,10);
{ for (var i:int = 0; i < MAX_NUM; i++)
// No hacer esto {
area = new Rectangle(i,0,1,10); area.x = i;
myBitmapData.fillRect(area,COLOR); myBitmapData.fillRect(area,COLOR);
} }

19. Uso de Bitmaps
Downsalmpling (auto) &
BitmapData single reference

20. Filtros
Hay que tratar de evitar el uso
de filtros debido a que crean
dos bitmaps en memoria, en su
defecto usar efectos creados
con herramientas externas.

21. Minimizar gasto de CPU
Sin lugar a dudas un área importante dentro de la
optimización es el uso de CPU de nuestras
aplicaciones.
Optimizar el uso del procesamiento del CPU mejora
el rendimiento y como resultado la vida de la batería
en dispositivos móviles.
Tener cuidado que elementos como audio, video,
webcam y otras opciones hacen uso intensivo del
procesador.

22. Freezing & Unfreezing

23. Freezing & Unfreezing Loader
var loader:Loader = new Loader(); var loader:Loader = new Loader();
loader.load ( new URLRequest loader.load ( new URLRequest
( "content.swf" ) ); ( "content.swf" ) );
addChild ( loader ); addChild ( loader );
stage.addEventListener stage.addEventListener
( MouseEvent.CLICK, unloadSWF ); ( MouseEvent.CLICK, unloadSWF );
function unloadSWF function unloadSWF
( e:MouseEvent ):void ( e:MouseEvent ):void
{ {
loader.unload(); loader.unloadAndStop();
} }

24. Timers vs ENTER_FRAME
Vamos a preferir Timers vs ENTER_FRAME para
contenido no animado que se ejecuta por un largo
tiempo.

25. Mejorar el Rendering
Estos son algunos tips para mejorar la fase de
Rendering dentro de nuestras aplicaciones Flash:
• Reducir cantidad de curvas en los vectores.
• Evitar el uso de máscaras.
• Limpiar contornos
• Usar anti-alias para animación
• Convertir arte complejo en bitmaps o en su
defecto usar cacheAsBitmap()

26. ¿Preguntas?
Optimización de Contenido
Flash para Móviles
@edgarparada