Your SlideShare is downloading. ×
0
Mejorandola
Mejorandola
Mejorandola
Mejorandola
Mejorandola
Mejorandola
Mejorandola
Mejorandola
Mejorandola
Mejorandola
Mejorandola
Mejorandola
Mejorandola
Mejorandola
Mejorandola
Mejorandola
Mejorandola
Mejorandola
Mejorandola
Mejorandola
Mejorandola
Mejorandola
Mejorandola
Mejorandola
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mejorandola

2,133

Published on

Diapositivas de Mejorando.la conferencia Barcelona.

Diapositivas de Mejorando.la conferencia Barcelona.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,133
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Aplicaciones móviles a 60fpsblocketpc.comSpanish Mobile and Devices Adobe User GroupRaúl JiménezTwitters: @elecash @teleport @BlocketPcMail: elecash@gmail.com
  • 2. Ayúdame con Teleport.ioTeleport.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.iohttp://www.indiegogo.com/teleporthttps://twitter.com/teleporthttp://www.facebook.com/TeleportApphttps://vimeo.com/teleportio
  • 3. Adobe <3 HTML5HTML5 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 2Dhttp://gamua.com/starling/- Feathers: Framework y componentes desarrollados sobre Starlinghttp://feathersui.com/- Mad Components: Framework de componenteshttp://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 GPUEjemplo 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 Extensionshttp://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 webhttp://www.hsharma.com/tutorials/- En Active Tuts+ también encontraréis buena informaciónhttp://active.tutsplus.com/tutorials/effects/starling-particle...- Visita los foros de Starling y Feathershttp://forum.starling-framework.org/http://forum.starling-framework.org/forum/feathers
  • 24. GRACIAS A TODOS ¿PREGUNTAS?

×