Having fun with Adobe AIR 2013

2,471 views

Published on

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

No Downloads
Views
Total views
2,471
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
16
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Having fun with Adobe AIR 2013

  1. 1. HAVING WITH ADOBE AIR WELCOMEFriday, March 1, 13
  2. 2. Thank you for attending todays Adobe Camp Please complete the survey below within three days of this event to be entered in our quarterly drawing to win an Adobe CS Suite software package. https://adobeformscentral.com/?f=jey5CDPwIlGqvoSorZzx2Q *Winner will be able to choose a Web & Design Premium or Production Premium suite prize. HAVINGFriday, March 1, 13 WITH ADOBE AIR
  3. 3. Agenda . Overview Adobe AIR e novità della piattaforma . Stage3D, Starling e Feathers UI . Workflow progetto AIR multipiattaforma . Tips & Tricks GUI mobile + Responsive Design . Microarchitettura per applicativi sviluppati con AIR . Debugging AIR application HAVINGFriday, March 1, 13 WITH ADOBE AIR
  4. 4. Adobe Integrated Runtime . presente nelle principali piattaforme . interazione con sistemi operativi . estendibile . buon workflow dall’ideazione allo sviluppo . non dobbiamo imparare nuovi linguaggi di programmazione . tool di sviluppo conosciuti HAVINGFriday, March 1, 13 WITH ADOBE AIR
  5. 5. Adobe AIR su mobile HAVINGFriday, March 1, 13 WITH ADOBE AIR
  6. 6. Adobe AIR su desktop HAVINGFriday, March 1, 13 WITH ADOBE AIR
  7. 7. Adobe AIR su... HAVINGFriday, March 1, 13 WITH ADOBE AIR
  8. 8. Adobe AIR NEWS . nuova metodologia di rilascio (labs.adobe.com) . nuova versione SDK 3.6 (12/02/13) . focus Adobe su Gaming e Premium Video . Gaming SDK . Flash Player Next e AS NEXT . Windows 8 (NO RT e WP8) http://www.adobe.com/devnet/flashplatform/ HAVING WITH ADOBE AIR whitepapers/roadmap.htmlFriday, March 1, 13
  9. 9. Novità ultime release . iOS: possibilità di caricare SWF esterni (AOT mode) . iOS: nuove API storage dati + File.preventBackup . iOS: integrazione xml manifest per screensize da escludere . iOS: deploy/debug diretto da Flash Builder . iOS: push notification . iOS: background task (audio, location, network, exit app) HAVINGFriday, March 1, 13 WITH ADOBE AIR
  10. 10. Novità ultime release . Graphics data query . Telemetry (Adobe Scout) . Concurrency . StageVideo.attachCamera() (rendering in GPU) . Native Extension http://www.adobe.com/devnet/articles/flashplayer-air- HAVING WITH ADOBE AIR feature-list.htmlFriday, March 1, 13
  11. 11. ANE . Possono essere scritte in C o in un linguaggio nativo (es.: Objective C su iOS) . Utilizzate per processi intensivi, possono sfruttare la GPU . Viene integrata nel progetto come una libreria SWC . Supporto da AIR 3.0 HAVINGFriday, March 1, 13 WITH ADOBE AIR
  12. 12. ANE vs Native Process . Native Process funzionano solo su desktop . Native Process non interagiscono con codice nativo ma lanciano un eseguibile . Native Process son supportati da AIR 2.0 HAVINGFriday, March 1, 13 WITH ADOBE AIR
  13. 13. ANE online . http://www.adobe.com/devnet/air/native-extensions-for- air.html . http://sleepydesign.blogspot.it/2012/07/ane-free-air-native- extensions.html? utm_source=feedburner&utm_medium=feed&utm_campaign =Feed:+SleepyDesign+(Sleepy+Design) HAVINGFriday, March 1, 13 WITH ADOBE AIR
  14. 14. GAMING SDK Frameworks ANE AWAY3D Game Center Starling In-App Feathers UI Testflight Social Samples StageAd HAVINGFriday, March 1, 13 WITH ADOBE AIR
  15. 15. Adobe Scout HAVINGFriday, March 1, 13 WITH ADOBE AIR
  16. 16. Creative Cloud! HAVINGFriday, March 1, 13 WITH ADOBE AIR
  17. 17. HAVINGFriday, March 1, 13 WITH ADOBE AIR
  18. 18. Case History HAVINGFriday, March 1, 13 WITH ADOBE AIR
  19. 19. Case History HAVINGFriday, March 1, 13 WITH ADOBE AIR
  20. 20. Case History ITALIA HAVINGFriday, March 1, 13 WITH ADOBE AIR
  21. 21. Case History ITALIA HAVINGFriday, March 1, 13 WITH ADOBE AIR
  22. 22. IDE http://developer.blackberry.com/air/ HAVINGFriday, March 1, 13 WITH ADOBE AIR
  23. 23. Versioni AIR 3.6 3.6 3.1 HAVINGFriday, March 1, 13 WITH ADOBE AIR
  24. 24. File di configurazione HAVINGFriday, March 1, 13 WITH ADOBE AIR
  25. 25. Icone http://help.adobe.com/en_US/air/build/ WS901d38e593cd1bac1e63e3d12990 7d2886-8000.html HAVINGFriday, March 1, 13 WITH ADOBE AIR
  26. 26. Splash page iOS HAVINGFriday, March 1, 13 WITH ADOBE AIR
  27. 27. Splash page BB http://devblog.blackberry.com/2012/11/porting-air-playbook- apps-to-blackberry-10/ HAVINGFriday, March 1, 13 WITH ADOBE AIR
  28. 28. HAVINGFriday, March 1, 13 WITH ADOBE AIR
  29. 29. HAVINGFriday, March 1, 13 WITH ADOBE AIR
  30. 30. Stage3D . introdotto da AIR 3.0 e Flash Player 11 . low-level GPU-accelerated APIs per 2D e 3D . programmabile con AGAL o framework on top ad AGAL . è totalmente crossplatform contrariamente a DirectX e OpenGL . posso creare contenuti con Stage3D mixati con AS3 old style . Stage3D non è trasparente (per ora...) HAVINGFriday, March 1, 13 WITH ADOBE AIR
  31. 31. Stage3D . esistono molti framework basati su Stage3D che agevolano lo sviluppo di soluzioni 2D e 3D, i più famosi: . Starling . Feathers UI . Away3D . Zest 3D . CitrusEngine . Alternativa3D HAVINGFriday, March 1, 13 WITH ADOBE AIR
  32. 32. Starling . 2D framework dedicato alla creazione di game . molto simile alla DisplayList . Starling in AIR richiede rendermode a DIRECT . Attualmente siamo alla versione 1.3: . filtri . miglioramento Tween (reverse, nextTween, repeat) . asset management (sia embedded che caricati) . Starling startup comune per ogni area da renderizzare . Testare Starling sempre in ReleaseMode mai in DebugMode HAVINGFriday, March 1, 13 WITH ADOBE AIR
  33. 33. Starling HAVINGFriday, March 1, 13 WITH ADOBE AIR
  34. 34. Starling Startup HAVINGFriday, March 1, 13 WITH ADOBE AIR
  35. 35. Starling Event Model . identica alla gestione di Actionscript 3 . addEventListener . hasEventListener . removeEventListener . removeEventListeners . Per custom event si estendono gli Starling event anzichè Flash event HAVINGFriday, March 1, 13 WITH ADOBE AIR
  36. 36. Starling TouchEvent . TouchEvent.TOUCH gestisce più fasi: . began . ended . hover . moved Inoltre possiamo recuperare il timestamp del touch o se in concomitanza del touch è premuto il tasto shift o ctrl della tastiera HAVINGFriday, March 1, 13 WITH ADOBE AIR
  37. 37. Starling Texture . Le texture sono alla base di ogni cosa in Starling . possiamo recuperare o embeddare una texture da una PNG, JPG, ATF . png2atf -> http://www.adobe.com/devnet/flashruntimes/ articles/atf-users-guide.html . grandezza massima texture 2048x2048 . possiamo usare la texture per renderizzare un’immagine o salvare all’interno tutti gli assets del nostro applicativo HAVINGFriday, March 1, 13 WITH ADOBE AIR
  38. 38. Starling MovieClip . E’ la rappresentazione via codice di un movieclip creato in Flash . I frame corrispondono ai vari sprite che verranno inseriti al suo interno . Per animarlo usiamo lo Starling.juggler . add . play, stop, pause, loop . setFrameDuration, addFrame, removeFrameAt ... HAVINGFriday, March 1, 13 WITH ADOBE AIR
  39. 39. Starling TextField . Tipologie di testi renderizzabili: BitmapFont o TTF font . I testi vengono sempre renderizzati in GPU . il textformat è integrato nel textfield . non renderizza HTML (trick usare il webstageview) . possiamo embeddare testi semplicemente embeddando il font nel progetto . altro modo di embeddare un font è usare GlyphDesigner (MAC) o Bitmap Font Generator (WIN) che convertono in spritesheet il font e tramite registerBitmapFont posso HAVING embeddarlo nel campo di testoFriday, March 1, 13 WITH ADOBE AIR
  40. 40. Feathers UI . Feathers è una libreria di componenti basata su Starling . Feathers comprende: . List . Button . Switch . ScrollContainer . ScrollText . Image Loader http://feathersui.com/examples/components-explorer/ HAVING WITH ADOBE AIR http://wiki.starling-framework.org/feathers/startFriday, March 1, 13
  41. 41. Screen Navigator . Utilizzato per cambiare vista su applicativi o game HAVINGFriday, March 1, 13 WITH ADOBE AIR
  42. 42. List . vengono usate non solo come liste ma più in generale per la gestione tramite scroll di molti elementi . performance ottime su mobile . possiedono un itemrenderer customizzabile e facilmente skinnabile . utilizza il meccanismo del virtual layout HAVINGFriday, March 1, 13 WITH ADOBE AIR
  43. 43. HAVINGFriday, March 1, 13 WITH ADOBE AIR
  44. 44. HAVINGFriday, March 1, 13 WITH ADOBE AIR
  45. 45. Sviluppo Crossplatform . Grande plus di AIR è lo sviluppo crossplatform . le problematiche maggiori sono: . grafica . architettura software . gestione codice differente per ogni piattaforma . testing su più piattaforme HAVINGFriday, March 1, 13 WITH ADOBE AIR
  46. 46. Definizione screensize . definizione screen resolution . creare grafica adattata per ogni device . preparare grafica in maniera esterna al progetto (SWC o Texture Atlas) . utilizzare i vettori dove possibile . in Feathers UI possiamo utilizzare i temi . lavorare sempre in maniera relativa HAVINGFriday, March 1, 13 WITH ADOBE AIR
  47. 47. Worflow grafico Definizione UI SWC o Texture Atlas Programmazione HAVINGFriday, March 1, 13 WITH ADOBE AIR
  48. 48. Tips GUI mobile . aree attive non inferiori a 50x50px . non mettere troppe funzionalità per schermata . textinput utilizzare StageText ove possibile . definire le aree con maggiore importanza e quelle che possono essere ridotte o eliminate in fase di cambio schermo . create GUI sia per landscape che per portrait mode . dare sempre feedback visivo all’utente (click, progress, alert) . grafica landscape/portrait non solo resize ma riorganizzala! . fare attenzione ai pattern grafici del sistema operativo! HAVINGFriday, March 1, 13 WITH ADOBE AIR
  49. 49. BB 10 mobile guideline . Context Menu, Active Menu e Application Menu HAVINGFriday, March 1, 13 WITH ADOBE AIR
  50. 50. ... e gli altri? MultiDPIBitmapSource CSS HAVINGFriday, March 1, 13 WITH ADOBE AIR
  51. 51. ... e gli altri? nomi file con suffissi maschere HAVINGFriday, March 1, 13 WITH ADOBE AIR
  52. 52. Compilazione Condizionale HAVINGFriday, March 1, 13 WITH ADOBE AIR
  53. 53. Occhio al peso! . Android Store -> max 50mb + 2 file da 2GB . App Store -> 2GB (sopra i 50mb download solo da WiFi) . Quando lavoriamo con file audio, video e immagini dobbiamo tener presente questi limiti! HAVINGFriday, March 1, 13 WITH ADOBE AIR
  54. 54. Android Screen Resolution HAVINGFriday, March 1, 13 WITH ADOBE AIR
  55. 55. HAVINGFriday, March 1, 13 WITH ADOBE AIR
  56. 56. Architettura . una buona architettura ci permette di mantenere il codice di applicazioni multiplescreen in maniera impeccabile . Architetture per Starling: . StarlingMVC (http://creativebottle.github.com/ starlingMVC/) . RobotLegs (https://github.com/s9tpepper/robotlegs- starling-plugin) HAVINGFriday, March 1, 13 WITH ADOBE AIR
  57. 57. Perchè RobotLegs ? . MVC+S . semplice da utilizzare . non bisogna appoggiarsi pesantemente al framework . obbliga a suddividere in maniera chiara e semplice le logiche dell’applicazione . ben documentato . utilizzabile sia su Flex che Flash . buone prestazioni su mobile . ancora aggiornato! HAVINGFriday, March 1, 13 WITH ADOBE AIR
  58. 58. Perchè RobotLegs ? . Dependency Injection . Inversion of Control HAVINGFriday, March 1, 13 WITH ADOBE AIR
  59. 59. RobotLegs HAVINGFriday, March 1, 13 WITH ADOBE AIR
  60. 60. View . Contiene l’interfaccia dell’applicazione . E’ totalmente slegata dal resto dell’applicazione e da Robotlegs in generale . Dialoga tramite eventi con il proprio mediatore HAVINGFriday, March 1, 13 WITH ADOBE AIR
  61. 61. Mediator . Ha sempre iniettato la sua vista di riferimento . Può dialogare direttamente sia con i servizi che con i modelli . Sono in ascolto e dispatchano eventi del framework . NON inserire mai logica della vista nel mediatore HAVINGFriday, March 1, 13 WITH ADOBE AIR
  62. 62. Context . il context rappresenta il centro nevralgico dell’applicativo dove vengono definite le associazioni tra eventi, mediatori e viste, modelli e via dicendo . il context dev’essere sempre una variabile di classe altrimenti verrebbe cancellato dal garbage collector . posso avere molteplici context se l’applicazione lavora con moduli esterni HAVINGFriday, March 1, 13 WITH ADOBE AIR
  63. 63. Command . Vengono creati per essere eseguiti immediatamente ed eseguire un’azione, poi vengono cancellati . Spesso son legati ad un evento da cui possono ricevere dei dati . Fanno da collante tra l’applicazione e il dialogo tra Service e Model HAVINGFriday, March 1, 13 WITH ADOBE AIR
  64. 64. Actor . Actor sono delle classi che vengono generalmente estese dai model e dai service . Actor implementano l’interfaccia IEventDispatcher che permette di dispatchare eventi all’interno delle suddette classi . Posso inoltre iniettare oggetti all’interno delle classi estese HAVINGFriday, March 1, 13 WITH ADOBE AIR
  65. 65. Model . Estende generalmente una classe Actor . NON è in ascolto degli eventi del framework ma dispatcha solo eventi verso il framework . Salva i dati in memoria e li rende disponibili in metodi e proprietà pubbliche HAVINGFriday, March 1, 13 WITH ADOBE AIR
  66. 66. Service . Estende generalmente una classe Actor . Comunica con “il mondo esterno” (es. servizi serverside) . NON salva alcun dato in memoria ma delega il salvataggio al model . NON è in ascolto degli eventi del framework ma dispatcha solo eventi verso il framework HAVINGFriday, March 1, 13 WITH ADOBE AIR
  67. 67. More... HAVINGFriday, March 1, 13 WITH ADOBE AIR
  68. 68. CODING TIME! HAVINGFriday, March 1, 13 WITH ADOBE AIR
  69. 69. HAVINGFriday, March 1, 13 WITH ADOBE AIR
  70. 70. Last but not least... . codice: https://github.com/lucamezzalira/ having_fun_with_adobe_air/ . slides: http://www.slideshare.net/flashplatform/ . contatti: . email: luca.mezzalira@insideabit.com . twitter: @lucamezzalira HAVINGFriday, March 1, 13 WITH ADOBE AIR
  71. 71. Friday, March 1, 13
  72. 72. HAVING WITH ADOBE AIR Thank you!Friday, March 1, 13

×