Your SlideShare is downloading. ×
0
Adobe Flex®: Premiers pas<br />Présenté par<br />Sébastien PANNIER<br />
SOMMAIRE<br /><ul><li>Présentation
Adobe Flash®
Adobe Flex®
Démos
Conclusion</li></li></ul><li>Présentation<br />
Présentation<br />Je me présente…<br />					Ingénieur en Etudes et Développement <br />					     	       Team Partners Nor...
Ce que j’aime…<br />Présentation<br />E-onVue Xtream®<br />AutodeskMaya®<br />Eyeon<br />Digital Fusion®<br />
Présentation<br />Contact…<br />pannierseb@gmail.com<br />harok@live.fr<br />Harok_Seb<br />Harok [Seb]<br />spannier@tpg-...
Adobe Flash®<br />
Adobe Flash®<br />Qu’est-ce que Flash ?<br />	Repose sur l’Actionscript<br />Langage basé sur ECMA Script (ECMA-262 editio...
Adobe Flash® Historique<br />Adobe CS5®<br />2010<br />FP 10.1 + Flash Builder®<br />2008<br />Flex 3.0®<br />Flash CS4 Pr...
Adobe Flash®  Qu’est-ce que Flash ?<br />Une plate-forme multimedia<br />Images : 		Gif, Png, Jpg, Ia (Illustrator Vector ...
Adobe Flash®  Qu’est-ce que Flash ?<br />Une plate-forme …<br />Cross-browser<br />CrossOS<br />Cross-device<br />
Adobe Flash® Qu’est-ce que Flash ?<br />Une plate-forme riche<br />Air<br />Livecycle Data Services<br />Scene7<br />Flash...
Adobe Flash® Statistiques<br />89.1 % pour Flash Player 10.1 en mars 2010 soit 6 mois après sa sortie!<br />Source : Millw...
Adobe Flash® Et  Open Screen Project<br />Universalité et optimisation des applications Flash sur mobiles grâce à Adobe AI...
Adobe Flash® Courte démo<br />Mais comment ça marche ?!?<br />Exemple Flash CS5 Extended<br />
Démo<br />
Adobe Flash® Flash CS4 Extended<br />Flash CS5 Extended, un IDE inadapté pour un développement standardisé d’applications ...
Adobe Flex®<br />
Adobe Flex®<br />Qu'est-ce que Flex ?!?<br />
Adobe Flex® Un langage déclaratif (tags)<br />MXML ("Magic" or "Macromedia" "eXtensibleMarkupLanguage")<br />Langage basé ...
Adobe Flex® Un Framework Open Source gratuit<br />Flex SDK 4 (21/03/2010)<br />Compiler, Framework, Debugger<br />Les nouv...
Adobe Flex® Une librairie<br /><ul><li>Une multitude de composants natifs incluant :
Data binding
Drag ‘n drop
Display layout, look & feel
Séparation du visuel du fonctionnel (Flex 4)</li></li></ul><li>Adobe Flex® Quelques aperçus …<br />Source : FlexSpaces<br />
Adobe Flex® Quelques aperçus …<br />Source : FlexActive<br />
Adobe Flex® Tour de Flex<br />" But waitthere’s more! Check this out… "<br />
Adobe Flex® AIR® (Adobe IntegratedRuntime)<br />Cross – operating system runtime<br />Permet de créer des "Desktop Applica...
Adobe Flex® Highlyscalable<br />SpringActionscript<br />Cairngorm<br />BlazeDS<br />Guasax<br />Vara<br />PureMVC<br />Mat...
Adobe Flex® Highlyscalable<br />
Adobe Flex® Highlyscalable<br />Les Protocoles<br />AMF 3 (Action Message Format)<br />Format binaire compact utilisé pour...
Adobe Flex® Highlyscalable<br />Benchmark<br />Conditions : tests effectués le 14/04/2010 via le site themidnightcoders.co...
Adobe Flex® Highlyscalable<br />Flash Builder(basé sur Eclipse 3.5.1RC35 Galileo)<br />Editeur pour MXML, ActionScript, CS...
Présentation des démos<br />
Adobe Flex®<br />Flash Catalyst<br />Création rapide d’interfaces riches<br />Import et reconnaissance des calques d’artwo...
Démo Frameworks<br />Mate (version 0.8.9)<br />Event – drivenFlexframework basé sur des tags mxml<br />Centré sur l’organi...
Démo Frameworks<br />           Event Bus<br />Event Map<br />Event Map<br />EventHandlers<br />1<br />2<br />3<br />5<br ...
Démo Frameworks<br />LocalizationMap<br />Locale files<br />Classes<br />Resource proxy<br />component<br />Resource proxy...
Démo<br />
Démo Frameworks<br />Away3D<br />Moteur 3D pour Flash basé sur Papervision3D<br />	(Dernière version: Away3D Lite)<br />Ge...
Démo Frameworks<br />light<br />Camera<br />3D object<br />Scene3D<br />Viewport3D<br />
Démo<br />
Démo Frameworks<br />SpringActionscript(version 1.0RC1)<br />Ramification du framework Java écrit en AS3<br />Inversion de...
Démo Frameworks<br />Dépendance<br />CLASSE B<br />CLASSE A<br />Dépendance<br />CLASSE B<br />Injection<br />IoC<br />CLA...
Upcoming SlideShare
Loading in...5
×

Adobe flex®

2,776

Published on

Présentation de Flex au NormandyJUG par Sébastien PANNIER.

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

No Downloads
Views
Total Views
2,776
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
45
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Adobe flex®"

  1. 1. Adobe Flex®: Premiers pas<br />Présenté par<br />Sébastien PANNIER<br />
  2. 2. SOMMAIRE<br /><ul><li>Présentation
  3. 3. Adobe Flash®
  4. 4. Adobe Flex®
  5. 5. Démos
  6. 6. Conclusion</li></li></ul><li>Présentation<br />
  7. 7. Présentation<br />Je me présente…<br /> Ingénieur en Etudes et Développement <br /> Team Partners Normandie<br />Ex Formateur Photoshop<br />
  8. 8. Ce que j’aime…<br />Présentation<br />E-onVue Xtream®<br />AutodeskMaya®<br />Eyeon<br />Digital Fusion®<br />
  9. 9. Présentation<br />Contact…<br />pannierseb@gmail.com<br />harok@live.fr<br />Harok_Seb<br />Harok [Seb]<br />spannier@tpg-normandie.com<br />
  10. 10. Adobe Flash®<br />
  11. 11. Adobe Flash®<br />Qu’est-ce que Flash ?<br /> Repose sur l’Actionscript<br />Langage basé sur ECMA Script (ECMA-262 edition3)à l’instar de Javascript et Jscript<br />Langage Objet (depuis la version 3 en 2006)<br />Exécuté à partir du fichier SWF (ShockWave Flash)(prononcez "souiffe")<br />Cible : applications RIA (Rich Interface Application)<br />
  12. 12. Adobe Flash® Historique<br />Adobe CS5®<br />2010<br />FP 10.1 + Flash Builder®<br />2008<br />Flex 3.0®<br />Flash CS4 Pro + manipulation 3D basique<br />2006<br />Flash Player 9 + Flex 2®<br />Actionscript 3.0 + Flash CS3 Pro<br />2005<br />Flash Basic 8<br />Adobe System rachète Macromedia<br />2004<br />Flex 1.0®<br />Macromedia distribue le produit 15 000$ par CPU<br />Actionscript 2.0<br />2003<br />Flash Player 7<br />Actionscript 1.0 + support XML, HTML text…<br />2000<br />Flash Player 5<br />Macromedia rachète FutureSpash<br />Fin 1996<br />Flash<br />Vient concurrencer MacromediaShockwave®<br />1996<br />FutureSplashAnimator<br />1995<br />Application dessin vectoriel par Jonathan Gay<br />SmartSketch<br />
  13. 13. Adobe Flash® Qu’est-ce que Flash ?<br />Une plate-forme multimedia<br />Images : Gif, Png, Jpg, Ia (Illustrator Vector Shape)<br />Codecs Audio : MP3, ADPCM, Nellymoser, AAC & HE-AAC, Speex<br />Codecs Video : Sorenson Spark, On2 VP6, H264, M4A & M4V & MP4, MOV, 3GP<br />
  14. 14. Adobe Flash® Qu’est-ce que Flash ?<br />Une plate-forme …<br />Cross-browser<br />CrossOS<br />Cross-device<br />
  15. 15. Adobe Flash® Qu’est-ce que Flash ?<br />Une plate-forme riche<br />Air<br />Livecycle Data Services<br />Scene7<br />Flash Catalyst<br />Flash Builder<br />Business Catalyst<br />Flash Media Server<br />Flash<br />
  16. 16. Adobe Flash® Statistiques<br />89.1 % pour Flash Player 10.1 en mars 2010 soit 6 mois après sa sortie!<br />Source : Millward Brown survey, Décembre 2009<br />
  17. 17. Adobe Flash® Et Open Screen Project<br />Universalité et optimisation des applications Flash sur mobiles grâce à Adobe AIR® <br />
  18. 18. Adobe Flash® Courte démo<br />Mais comment ça marche ?!?<br />Exemple Flash CS5 Extended<br />
  19. 19. Démo<br />
  20. 20. Adobe Flash® Flash CS4 Extended<br />Flash CS5 Extended, un IDE inadapté pour un développement standardisé d’applications :<br />IDE orienté designer<br />Auto complétion limitée<br />Pas de refactoring<br />Pas fait pour quoi…<br />
  21. 21. Adobe Flex®<br />
  22. 22. Adobe Flex®<br />Qu'est-ce que Flex ?!?<br />
  23. 23. Adobe Flex® Un langage déclaratif (tags)<br />MXML ("Magic" or "Macromedia" "eXtensibleMarkupLanguage")<br />Langage basé sur XML (Macromedia en 2004)<br />Façonner l’interface client<br />Déclarer les aspects non visuels de l’application (Data services…)<br />Ecriture "proche" de HTML<br />Tags pour chaque élément<br />Capacité de créer ses propres tags pour des composants personnalisés<br />
  24. 24. Adobe Flex® Un Framework Open Source gratuit<br />Flex SDK 4 (21/03/2010)<br />Compiler, Framework, Debugger<br />Les nouveautés:<br />Composants SPARK (Montés sur les composants HALO )<br />Meilleur méchanisme pour les développeurs et désigners (Séparation Vue – Métier)<br />Intégration dans Flash Catalyst<br />Format FXG<br />Echange direct de réalisations provenant de Illustrator, AfterEffects, InDesign et Fireworks<br />ASDoc pour les composants MXML<br />Open Source Media Framework (OSMF)<br />
  25. 25. Adobe Flex® Une librairie<br /><ul><li>Une multitude de composants natifs incluant :
  26. 26. Data binding
  27. 27. Drag ‘n drop
  28. 28. Display layout, look & feel
  29. 29. Séparation du visuel du fonctionnel (Flex 4)</li></li></ul><li>Adobe Flex® Quelques aperçus …<br />Source : FlexSpaces<br />
  30. 30. Adobe Flex® Quelques aperçus …<br />Source : FlexActive<br />
  31. 31. Adobe Flex® Tour de Flex<br />" But waitthere’s more! Check this out… "<br />
  32. 32. Adobe Flex® AIR® (Adobe IntegratedRuntime)<br />Cross – operating system runtime<br />Permet de créer des "Desktop Applications" à partir de langages web<br />AJAX<br />FLASH<br />Code identique à celui de l’application web<br />S’installe via un exécutable (.air)<br />Nécessite d’avoir sur la machine l’environnement AIR<br />Version actuelle 1.5.3 (prochainement 2.0)<br />
  33. 33. Adobe Flex® Highlyscalable<br />SpringActionscript<br />Cairngorm<br />BlazeDS<br />Guasax<br />Vara<br />PureMVC<br />Mate<br />FlexUnit<br />FlexPMD<br />LiveCycle Data Services<br />Swiz<br />GraniteDS<br />Stratus<br />……………..<br />MVC<br />Transfer Object Assembler<br />IoC<br />Event DrivenDevelopment<br />Observer<br />Model DrivenDevelopment<br />Unit Testing<br />Profiling<br />deepLinking<br />…………….<br />
  34. 34. Adobe Flex® Highlyscalable<br />
  35. 35. Adobe Flex® Highlyscalable<br />Les Protocoles<br />AMF 3 (Action Message Format)<br />Format binaire compact utilisé pour sérialiser / dé sérialiser les objets ActionScript durant les échanges client / serveur<br />Date de 2007 (AMF0 => 2001)<br />RTMP (Real Time Message Protocol)<br />Protocole TCP/IP hautement performant destiné à la transmission de sons, vidéos et messages.<br />5 configurations: RTMP, RTMPT, RTMPS, RTMPE, RTMPTE (données cryptées, SSL…)<br />
  36. 36. Adobe Flex® Highlyscalable<br />Benchmark<br />Conditions : tests effectués le 14/04/2010 via le site themidnightcoders.com<br />*Valeurs exprimées en ms, la plus faible étant la plus rapide.<br />
  37. 37. Adobe Flex® Highlyscalable<br />Flash Builder(basé sur Eclipse 3.5.1RC35 Galileo)<br />Editeur pour MXML, ActionScript, CSS (couleurs pour la syntaxe, auto complétion, génération de code, debug pas à pas interactif…).<br />WYSIWYG (Editeur visuel) pour les composants MXML et import des UI Flash Catalyst.<br />Data-centricdevelopment : Introspection de services Java, PHP, Cold Fusion, REST et SOAP pour afficher les méthodes et propriétés + Drag ‘n Drop directement dans les UI.<br />Code refactoring<br />Monitoring de la consommation en ressources (Mémoires, cycles de CPU)<br />Intégration de FlexUnit pour les tests unitaires<br />ASDoc en MXML<br />Command line build<br />Data Services avancés (BlazeDS, modules real-time data push/sub messaging via LiveCycle Data Services)<br />Mavenbuilds<br />
  38. 38. Présentation des démos<br />
  39. 39. Adobe Flex®<br />Flash Catalyst<br />Création rapide d’interfaces riches<br />Import et reconnaissance des calques d’artworks provenant de<br />Photoshop (.psd)<br />Illustrator (.ia)<br />Fichier FXG <br />Manipulation des états et des transitions en WYSIWYG<br /><ul><li>Export au format FXP & SWF</li></li></ul><li>Démo<br />
  40. 40. Démo Frameworks<br />Mate (version 0.8.9)<br />Event – drivenFlexframework basé sur des tags mxml<br />Centré sur l’organisation d’un ou plusieurs EventMap<br />Réception des évènements <br />Appels des classes gérant les actions par injection<br />LocalizationMap : gestion des locales et de leurs injections<br />
  41. 41. Démo Frameworks<br /> Event Bus<br />Event Map<br />Event Map<br />EventHandlers<br />1<br />2<br />3<br />5<br />ServiceInvoker<br />4<br />ModelManager<br />View<br />Event DrivenDevelopment<br />
  42. 42. Démo Frameworks<br />LocalizationMap<br />Locale files<br />Classes<br />Resource proxy<br />component<br />Resource proxy<br />Locale fr_FR<br />Resource proxy<br />component<br />Resource proxy<br />Locale us_EN<br />Resource proxy<br />component<br />Resource proxy<br />Resource proxy<br />Injection dans les composants<br />
  43. 43. Démo<br />
  44. 44. Démo Frameworks<br />Away3D<br />Moteur 3D pour Flash basé sur Papervision3D<br /> (Dernière version: Away3D Lite)<br />Gestion des primitives (cube, sphere, plane…)<br />Gestion des lumières (point3D, ambiantLight…)<br />Gestion des matériaux (Bitmap, Phong, Movie, Dot3…)<br />Import Maya .obj, 3DS Max .3ds, Collada .dae ….<br />Z-Depth, Normal Maps, Animation, Occlusion Culling…..<br />
  45. 45. Démo Frameworks<br />light<br />Camera<br />3D object<br />Scene3D<br />Viewport3D<br />
  46. 46. Démo<br />
  47. 47. Démo Frameworks<br />SpringActionscript(version 1.0RC1)<br />Ramification du framework Java écrit en AS3<br />Inversion de contrôle (IoC)<br />Modèle – Vue – Contrôleur – Services (MVCS)<br />Extension pour Cairngorm et PureMVC<br />But: Externaliser la logique d’intéraction entre les classes.<br />Découplage<br />Injection<br />Configuration via un ou plusieurs fichiers XML <br />
  48. 48. Démo Frameworks<br />Dépendance<br />CLASSE B<br />CLASSE A<br />Dépendance<br />CLASSE B<br />Injection<br />IoC<br />CLASSE B<br />CLASSE A<br />Injection<br />CLASSE B<br />Principe Hollywood : "Ne nous appelez pas, c'est nous qui vous appellerons !"<br />
  49. 49. Démo<br />
  50. 50. Conclusion<br />
  51. 51. Conclusion<br />La concurrence<br />JavaFX<br />Silverlight<br />HTML5<br />GWT<br />AJAX<br />OpenLaszlo<br />
  52. 52. Conclusion<br />Quelques liens….<br />Adobe : http://www.adobe.com<br />Mate : http://mate.asfusion.com<br />SpringActionScript : http://www.springactionscript.org<br />Away3D : http://away3d.com<br />Total Training : http://www.totaltraining.com<br />lynda.com : http://www.lynda.com<br />Tour de Flex : http://www.adobe.com/devnet/flex/tourdeflex<br />
  53. 53. Conclusion<br />Questions ?<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×