Le document présente Adobe Flex et Flash, détaillant leur histoire, fonctionnalités et langages associés, notamment ActionScript. Il aborde des notions clés comme la création d'applications riches, les différents composants et frameworks, ainsi que des statistiques sur leur utilisation. Enfin, le document conclut en mentionnant la concurrence de technologies similaires comme JavaFX et HTML5.

1. Adobe Flex®: Premiers pasPrésenté parSébastien PANNIER

2. SOMMAIREPrésentation

3. Adobe Flash®

4. Adobe Flex®

5. Démos

6. ConclusionPrésentation

7. PrésentationJe me présente… Ingénieur en Etudes et Développement Team Partners NormandieEx Formateur Photoshop

8. Ce que j’aime…PrésentationE-onVue Xtream®AutodeskMaya®EyeonDigital Fusion®

9. PrésentationContact…pannierseb@gmail.comharok@live.frHarok_SebHarok [Seb]spannier@tpg-normandie.com

10. Adobe Flash®

11. Adobe Flash®Qu’est-ce que Flash ? Repose sur l’ActionscriptLangage basé sur ECMA Script (ECMA-262 edition3)à l’instar de Javascript et JscriptLangage Objet (depuis la version 3 en 2006)Exécuté à partir du fichier SWF (ShockWave Flash)(prononcez "souiffe")Cible : applications RIA (Rich Interface Application)

12. Adobe Flash® HistoriqueAdobe CS5®2010FP 10.1 + Flash Builder®2008Flex 3.0®Flash CS4 Pro + manipulation 3D basique2006Flash Player 9 + Flex 2®Actionscript 3.0 + Flash CS3 Pro2005Flash Basic 8Adobe System rachète Macromedia2004Flex 1.0®Macromedia distribue le produit 15 000$ par CPUActionscript 2.02003Flash Player 7Actionscript 1.0 + support XML, HTML text…2000Flash Player 5Macromedia rachète FutureSpashFin 1996FlashVient concurrencer MacromediaShockwave®1996FutureSplashAnimator1995Application dessin vectoriel par Jonathan GaySmartSketch

13. Adobe Flash® Qu’est-ce que Flash ?Une plate-forme multimediaImages : Gif, Png, Jpg, Ia (Illustrator Vector Shape)Codecs Audio : MP3, ADPCM, Nellymoser, AAC & HE-AAC, SpeexCodecs Video : Sorenson Spark, On2 VP6, H264, M4A & M4V & MP4, MOV, 3GP

14. Adobe Flash® Qu’est-ce que Flash ?Une plate-forme …Cross-browserCrossOSCross-device

15. Adobe Flash® Qu’est-ce que Flash ?Une plate-forme richeAirLivecycle Data ServicesScene7Flash CatalystFlash BuilderBusiness CatalystFlash Media ServerFlash

16. Adobe Flash® Statistiques89.1 % pour Flash Player 10.1 en mars 2010 soit 6 mois après sa sortie!Source : Millward Brown survey, Décembre 2009

17. Adobe Flash® Et Open Screen ProjectUniversalité et optimisation des applications Flash sur mobiles grâce à Adobe AIR®

18. Adobe Flash® Courte démoMais comment ça marche ?!?Exemple Flash CS5 Extended

19. Démo

20. Adobe Flash® Flash CS4 ExtendedFlash CS5 Extended, un IDE inadapté pour un développement standardisé d’applications :IDE orienté designerAuto complétion limitéePas de refactoringPas fait pour quoi…

21. Adobe Flex®

22. Adobe Flex®Qu'est-ce que Flex ?!?

23. Adobe Flex® Un langage déclaratif (tags)MXML ("Magic" or "Macromedia" "eXtensibleMarkupLanguage")Langage basé sur XML (Macromedia en 2004)Façonner l’interface clientDéclarer les aspects non visuels de l’application (Data services…)Ecriture "proche" de HTMLTags pour chaque élémentCapacité de créer ses propres tags pour des composants personnalisés

24. Adobe Flex® Un Framework Open Source gratuitFlex SDK 4 (21/03/2010)Compiler, Framework, DebuggerLes nouveautés:Composants SPARK (Montés sur les composants HALO )Meilleur méchanisme pour les développeurs et désigners (Séparation Vue – Métier)Intégration dans Flash CatalystFormat FXGEchange direct de réalisations provenant de Illustrator, AfterEffects, InDesign et FireworksASDoc pour les composants MXMLOpen Source Media Framework (OSMF)

25. Adobe Flex® Une librairieUne multitude de composants natifs incluant :

26. Data binding

27. Drag ‘n drop

28. Display layout, look & feel

29. Séparation du visuel du fonctionnel (Flex 4)Adobe Flex® Quelques aperçus …Source : FlexSpaces

30. Adobe Flex® Quelques aperçus …Source : FlexActive

31. Adobe Flex® Tour de Flex" But waitthere’s more! Check this out… "

32. Adobe Flex® AIR® (Adobe IntegratedRuntime)Cross – operating system runtimePermet de créer des "Desktop Applications" à partir de langages webAJAXFLASHCode identique à celui de l’application webS’installe via un exécutable (.air)Nécessite d’avoir sur la machine l’environnement AIRVersion actuelle 1.5.3 (prochainement 2.0)

33. Adobe Flex® HighlyscalableSpringActionscriptCairngormBlazeDSGuasaxVaraPureMVCMateFlexUnitFlexPMDLiveCycle Data ServicesSwizGraniteDSStratus……………..MVCTransfer Object AssemblerIoCEvent DrivenDevelopmentObserverModel DrivenDevelopmentUnit TestingProfilingdeepLinking…………….

34. Adobe Flex® Highlyscalable

35. Adobe Flex® HighlyscalableLes ProtocolesAMF 3 (Action Message Format)Format binaire compact utilisé pour sérialiser / dé sérialiser les objets ActionScript durant les échanges client / serveurDate de 2007 (AMF0 => 2001)RTMP (Real Time Message Protocol)Protocole TCP/IP hautement performant destiné à la transmission de sons, vidéos et messages.5 configurations: RTMP, RTMPT, RTMPS, RTMPE, RTMPTE (données cryptées, SSL…)

36. Adobe Flex® HighlyscalableBenchmarkConditions : tests effectués le 14/04/2010 via le site themidnightcoders.com*Valeurs exprimées en ms, la plus faible étant la plus rapide.

37. Adobe Flex® HighlyscalableFlash Builder(basé sur Eclipse 3.5.1RC35 Galileo)Editeur pour MXML, ActionScript, CSS (couleurs pour la syntaxe, auto complétion, génération de code, debug pas à pas interactif…).WYSIWYG (Editeur visuel) pour les composants MXML et import des UI Flash Catalyst.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.Code refactoringMonitoring de la consommation en ressources (Mémoires, cycles de CPU)Intégration de FlexUnit pour les tests unitairesASDoc en MXMLCommand line buildData Services avancés (BlazeDS, modules real-time data push/sub messaging via LiveCycle Data Services)Mavenbuilds

38. Présentation des démos

39. Adobe Flex®Flash CatalystCréation rapide d’interfaces richesImport et reconnaissance des calques d’artworks provenant dePhotoshop (.psd)Illustrator (.ia)Fichier FXG Manipulation des états et des transitions en WYSIWYGExport au format FXP & SWFDémo

40. Démo FrameworksMate (version 0.8.9)Event – drivenFlexframework basé sur des tags mxmlCentré sur l’organisation d’un ou plusieurs EventMapRéception des évènements Appels des classes gérant les actions par injectionLocalizationMap : gestion des locales et de leurs injections

41. Démo Frameworks Event BusEvent MapEvent MapEventHandlers1235ServiceInvoker4ModelManagerViewEvent DrivenDevelopment

42. Démo FrameworksLocalizationMapLocale filesClassesResource proxycomponentResource proxyLocale fr_FRResource proxycomponentResource proxyLocale us_ENResource proxycomponentResource proxyResource proxyInjection dans les composants

43. Démo

44. Démo FrameworksAway3DMoteur 3D pour Flash basé sur Papervision3D (Dernière version: Away3D Lite)Gestion des primitives (cube, sphere, plane…)Gestion des lumières (point3D, ambiantLight…)Gestion des matériaux (Bitmap, Phong, Movie, Dot3…)Import Maya .obj, 3DS Max .3ds, Collada .dae ….Z-Depth, Normal Maps, Animation, Occlusion Culling…..

45. Démo FrameworkslightCamera3D objectScene3DViewport3D

46. Démo

47. Démo FrameworksSpringActionscript(version 1.0RC1)Ramification du framework Java écrit en AS3Inversion de contrôle (IoC)Modèle – Vue – Contrôleur – Services (MVCS)Extension pour Cairngorm et PureMVCBut: Externaliser la logique d’intéraction entre les classes.DécouplageInjectionConfiguration via un ou plusieurs fichiers XML

48. Démo FrameworksDépendanceCLASSE BCLASSE ADépendanceCLASSE BInjectionIoCCLASSE BCLASSE AInjectionCLASSE BPrincipe Hollywood : "Ne nous appelez pas, c'est nous qui vous appellerons !"