Diapositivas de Mejorando.la conferencia Barcelona.

1. Aplicaciones móviles a 60fps
blocketpc.com
Spanish Mobile and Devices Adobe User Group
Raúl Jiménez
Twitters: @elecash
@teleport
@BlocketPc
Mail: elecash@gmail.com

2. Ayúdame con Teleport.io
Teleport.io es un proyecto personal que
acabo de lanzar a crowdfunding.
Ayúdame a difundirlo a través de Facebook,
Twitter y Google+ y si crees que lo
merece... ¡contribuye!
http://www.teleport.io
http://www.indiegogo.com/teleport
https://twitter.com/teleport
http://www.facebook.com/TeleportApp
https://vimeo.com/teleportio

3. Adobe <3 HTML5
HTML5 HA VENIDO PARA
QUEDARSE

4. ¿Por qué usar Flash?

5. El “nuevo” Flash
- Juegos y apps: Windows, Mac OS, Android, iOS,
PlayBook, BB10, etc... (Machinarium)
- Juegos browser AAA: Unreal Engine y Unity to Flash
- Video: progressive download, streaming, P2P
- Igual que antes existía el “Pixel-Perfect”, ahora existen
las “Smooth Apps”

6. Smooth Apps
- Quiero que mi app vuele ¿cómo lo hago?
- Deben correr a 60fps o cercano
- No han de presentar lags (pérdidas de fps) en ningún
momento
- Deben ser agradables de usar, que den ganas de
tocarla

7. El problema
- Adobe donó Flex a Apache y desde entonces no hay un
framework de componentes oficial
- Flex Hero no funciona demasiado bien en dispositivos,
es demasiado pesado
- AIR y Flash en móviles pueden funcionar a 30fps
fácilmente, pero más es complicado
- Podemos desarrollar aplicaciones aceleradas por GPU
gracias al 3D y el direct mode

8. AS3 y el 3D
- Las APIs 3D de Flash son increíblemente veloces
- Existen frameworks de desarrollo de videojuegos 3D y
2D acelerados por GPU
- Pero desarrollar 3D es muy complejo y yo quiero
desarrollar aplicaciones!! No juegos!! >:-(
- Tranquilidad, tranquilidad... existen soluciones :D

9. Soluciones en el mercado
- Starling: Framework de desarrollo de videojuegos 2D
http://gamua.com/starling/
- Feathers: Framework y componentes desarrollados
sobre Starling
http://feathersui.com/
- Mad Components: Framework de componentes
http://code.google.com/p/mad-components/

10. Starling: ¿Cómo funciona?
- Desarrollar 3D es muy complejo, Starling facilita el
desarrollo emulando la API de Flash
- Por ejemplo: flash.display.Sprite pasa a ser
starling.display.Sprite
- En el 3D no hay vectores, sólo texturas, así que cambia
la forma en que hacemos las cosas
- Hay ventajas y desventajas

11. Starling: Las texturas y sus cosas
- Subir texturas a la GPU es un proceso muy intensivo
- Debemos ahorrar en subidas a la GPU reutilizando
texturas una vez están subidas y empaquetando
texturas en una imagen
- No hay API drawing, pero podemos pintar sobre un
Sprite de Flash y luego convertirlo en un Bitmap que lo
subimos a la GPU
Ejemplo TexturePacker y BMFont

12. Starling: Crear una aplicación Starling
- Instancia Starling y ya puedes comenzar a usar la API
Starling.handleLostContext = true;
Starling.multitouchEnabled = true;
const MainType:Class =
getDefinitionByName("com.blocketpc.MyApp") as
Class;
this._starling = new Starling(MainType,
this.stage);
this._starling.start();

13. FeathersUI: Introducción
- Al igual que Starling es un proyecto de código abierto
- Se instancia sobre starling.display.Sprite
- Componentes: Screen, Button, Check, List,
ProgressBar, Radio, ScrollBar, etc...
- Sistema de inyección de dependencias
- Sistema de temas
- Y mucho más... :)

14. FeathersUI: Sistema de pantallas
- ScreenNavigator controla las vistas que son
componentes Screen
navigator = new ScreenNavigator();
addChild(navigator);
var events:Object = {onSelectSession: SESSION_DETAIL_SCREEN};
var data:Object = {
dataProvider: XML(dataProvider.section.sessions),
originalDPI: originalThemeDPI
};
item = new ScreenNavigatorItem(SessionsScreen, events, data);
navigator.addScreen(SESSIONS_SCREEN, item);
navigator.showScreen(SESSIONS_SCREEN);

15. FeathersUI: Transiciones entre
pantallas
- Se pueden ejecutar transiciones entre nuestras vistas
de ScreenNavigator
transitionManager = new
ScreenSlidingStackTransitionManager(navigator);
transitionManager.duration = 0.4;
transitionManager.ease = Cubic.easeOut;
navigator.showScreen(“myScreen”);
Ejemplo:
http://feathersui.com/examples/layout-explorer/

16. FeathersUI: Temas
- Feathers cuenta con un potente sistema de temas con
el que poder personalizar nuestros componentes
const isDesktop:Boolean = Mouse.supportsCursor;
theme = new MinimalTheme(stage, !isDesktop);
const originalThemeDPI:int = theme.originalDPI;
Lista de temas:
https://github.com/joshtynjala/feathers-examples/
Teleport Skin:
Teleport Demo

17. FeathersUI : Componentes
- Feathers tiene componentes para prácticamente todo lo
que necesitas en un móvil o un Pc
emailButton = new Button();
emailButton.onRelease.add(onEmailButton);
container.addChild(emailButton);
Demo:
http://feathersui.com/examples/components-explorer/

18. ALGUNOS EJEMPLOS
Aplicación iPad educacional
Donuts Maniac

19. FeathersUI : Problemas
- Si tu aplicación tiene muchas texturas deberías
descartar Starling y Feathers.. por ahora (Workers)
- El control del texto es complejo y FeathersUI ahora no
tiene un componente de texto multilínea
- Trabajar con texturas puede resultar tedioso al principio
- Crear un tema es complejo aunque muy potente

20. FeathersUI: Ventajas
- La velocidad a la que se mueve todo, esos 60fps
deseados por las “Smooth Apps”
- Escalado automático por DPI
- Componentes muy sólidos y estables en un proyecto
que tiene constantes actualizaciones
- Soporte por parte de Adobe al proyecto de Starling y
puede que a FeathersUI igual que han hecho con
Away3D

21. FeathersUI: Consejos 1/3
- Reutiliza todas las texturas que puedas con Object
Pooling
- Utiliza flatten() para cachear el contenido estático
- Los hijos y eventos se limpian automáticamente al
hacer un removeChild
- Simula los eventos de Touch con simulateMultitouch
(Ejemplo SimulateMultitouch)
starling = new Starling();
starling.simulateMultitouch = true;

22. FeathersUI: Consejos 2/3
- Las Release Builds pueden duplicar tus fps en
comparación a cuando haces un debug
- Utiliza los ActionScript Workers para procesos muy
intensivos (Flash Player 11.4 y AIR 3.4)
- Estudia acerca de Native Extensions, lo vas a necesitar
en Android/iOS (In-App Purchase, Notifications, etc...)
- Infórmate sobre las Starling Extensions
http://wiki.starling-framework.org/extensions/start

23. FeathersUI: Consejos 3/3
- Lee el manual que escribió Thibault Imbert sobre
Starling (Gratis!!)
http://shop.oreilly.com/product/0636920024217.do
- Mira los videotutoriales de Hemanth Sharma
disponibles gratis en su web
http://www.hsharma.com/tutorials/
- En Active Tuts+ también encontraréis buena
información
http://active.tutsplus.com/tutorials/effects/starling-particle...
- Visita los foros de Starling y Feathers
http://forum.starling-framework.org/
http://forum.starling-framework.org/forum/feathers

24. GRACIAS A TODOS
¿PREGUNTAS?