SlideShare a Scribd company logo
1 of 24
Download to read offline
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
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
Adobe <3 HTML5




HTML5 HA VENIDO PARA
      QUEDARSE
¿Por qué usar Flash?
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”
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
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
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
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/
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
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
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();
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... :)
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);
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/
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
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/
ALGUNOS EJEMPLOS
  Aplicación iPad educacional
        Donuts Maniac
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
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
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;
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
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
GRACIAS A TODOS

 ¿PREGUNTAS?

More Related Content

Viewers also liked

Adobe AIR Native Extensions
Adobe AIR Native ExtensionsAdobe AIR Native Extensions
Adobe AIR Native ExtensionsRaul Jimenez
 
Realidad Aumentada
Realidad AumentadaRealidad Aumentada
Realidad AumentadaRaul Jimenez
 
2 Training on webwroks for Word
2 Training on webwroks for Word2 Training on webwroks for Word
2 Training on webwroks for Wordsumeettechno
 

Viewers also liked (7)

Adobe AIR Native Extensions
Adobe AIR Native ExtensionsAdobe AIR Native Extensions
Adobe AIR Native Extensions
 
Realidad Aumentada
Realidad AumentadaRealidad Aumentada
Realidad Aumentada
 
Diseño inclusivo
Diseño inclusivoDiseño inclusivo
Diseño inclusivo
 
HTML5 WebWorks
HTML5 WebWorksHTML5 WebWorks
HTML5 WebWorks
 
DPS + HTML5
DPS + HTML5DPS + HTML5
DPS + HTML5
 
2 Training on webwroks for Word
2 Training on webwroks for Word2 Training on webwroks for Word
2 Training on webwroks for Word
 
HTML5 y WebGL
HTML5 y WebGLHTML5 y WebGL
HTML5 y WebGL
 

Similar to Mejorandola

Desarrollo de aplicaciones multiplataforma 1/2
Desarrollo de aplicaciones multiplataforma 1/2Desarrollo de aplicaciones multiplataforma 1/2
Desarrollo de aplicaciones multiplataforma 1/2Ignacio Muñoz Vicente
 
Abp mooc herramientas tic martin garcia valle
Abp mooc herramientas tic martin garcia valleAbp mooc herramientas tic martin garcia valle
Abp mooc herramientas tic martin garcia valleMartín García Valle
 
Barcelona Workshop 2008
Barcelona Workshop 2008Barcelona Workshop 2008
Barcelona Workshop 2008Mitusin
 
Cuckoo sandbox
Cuckoo sandboxCuckoo sandbox
Cuckoo sandboxTensor
 
T. multimedia giovanny lombana
T. multimedia giovanny lombanaT. multimedia giovanny lombana
T. multimedia giovanny lombanaGiovanny10
 
2. principales elementos
2.  principales elementos2.  principales elementos
2. principales elementosVictor Aravena
 
Cloudevel - Microsoft Azure - 101
Cloudevel - Microsoft Azure - 101Cloudevel - Microsoft Azure - 101
Cloudevel - Microsoft Azure - 101Mauro Parra-Miranda
 
Herramientas para desarrollar rápidamente
Herramientas para desarrollar rápidamenteHerramientas para desarrollar rápidamente
Herramientas para desarrollar rápidamenteCarlos Toxtli
 
Cuckoo sandbox
Cuckoo sandboxCuckoo sandbox
Cuckoo sandboxTensor
 
Flash Macromedia
Flash MacromediaFlash Macromedia
Flash Macromedialousyanita
 
Cuckoosandbox
CuckoosandboxCuckoosandbox
CuckoosandboxTensor
 

Similar to Mejorandola (20)

Desarrollo de aplicaciones multiplataforma 1/2
Desarrollo de aplicaciones multiplataforma 1/2Desarrollo de aplicaciones multiplataforma 1/2
Desarrollo de aplicaciones multiplataforma 1/2
 
E book en adobe
E book en adobeE book en adobe
E book en adobe
 
E book
E bookE book
E book
 
E book
E bookE book
E book
 
Sallis Usb Hacks
Sallis Usb HacksSallis Usb Hacks
Sallis Usb Hacks
 
HTML5
HTML5 HTML5
HTML5
 
Abp mooc herramientas tic martin garcia valle
Abp mooc herramientas tic martin garcia valleAbp mooc herramientas tic martin garcia valle
Abp mooc herramientas tic martin garcia valle
 
Barcelona Workshop 2008
Barcelona Workshop 2008Barcelona Workshop 2008
Barcelona Workshop 2008
 
Cuckoo sandbox
Cuckoo sandboxCuckoo sandbox
Cuckoo sandbox
 
T. multimedia giovanny lombana
T. multimedia giovanny lombanaT. multimedia giovanny lombana
T. multimedia giovanny lombana
 
DotNetDom: El futuro de Xamarin
DotNetDom: El futuro de XamarinDotNetDom: El futuro de Xamarin
DotNetDom: El futuro de Xamarin
 
Contenidoinformaticaenlaeducacion
ContenidoinformaticaenlaeducacionContenidoinformaticaenlaeducacion
Contenidoinformaticaenlaeducacion
 
Contenidoinformaticaenlaeducacion
ContenidoinformaticaenlaeducacionContenidoinformaticaenlaeducacion
Contenidoinformaticaenlaeducacion
 
2. principales elementos
2.  principales elementos2.  principales elementos
2. principales elementos
 
Cloudevel - Microsoft Azure - 101
Cloudevel - Microsoft Azure - 101Cloudevel - Microsoft Azure - 101
Cloudevel - Microsoft Azure - 101
 
Herramientas para desarrollar rápidamente
Herramientas para desarrollar rápidamenteHerramientas para desarrollar rápidamente
Herramientas para desarrollar rápidamente
 
Html5 vs Flash
Html5 vs FlashHtml5 vs Flash
Html5 vs Flash
 
Cuckoo sandbox
Cuckoo sandboxCuckoo sandbox
Cuckoo sandbox
 
Flash Macromedia
Flash MacromediaFlash Macromedia
Flash Macromedia
 
Cuckoosandbox
CuckoosandboxCuckoosandbox
Cuckoosandbox
 

Recently uploaded

Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfymiranda2
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2montoyagabriela340
 
La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....Aaron Betancourt
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfOBr.global
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfcastrodanna185
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...RaymondCode
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfalejandrogomezescoto
 
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...OLGAMILENAMONTAEZNIO
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidaddanik1023m
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETGermán Küber
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfJoseAlejandroPerezBa
 
Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.marianarodriguezc797
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxPaolaCarolinaCarvaja
 
VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx Emialexsolar
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfodalistar77
 
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSLincangoKevin
 
Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfangelinebocanegra1
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosLCristinaForchue
 

Recently uploaded (20)

BEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura SilvaBEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2
 
La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdf
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
 
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidad
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
 
Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docx
 
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier FolchBEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
 
VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx E
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdf
 
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
 
Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdf
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
 

Mejorandola

  • 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
  • 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?