Université de Picardie Jules VerneLuis Pires macromedia FLASH Adobe depuis le 3 décembre 2005

Université de Picardie Jules VerneLuis Pires Introduction : Historique Lancé en 1996 par Macromédia après achat de la société « FutureWave » (logiciel Future Splash Animator) Acheté en 2005 par Adobe Systems Version CS6 2012

Université de Picardie Jules VerneLuis Pires Introduction : Chiffres plus 2 millions de développeurs 99% des internautes possèdent le lecteur Flash (taux de pénétration) Plus de 92 % des internautes utilisent la dernière version du lecteur U.S., Canada, U.K., France, Germany, Japan, Australia, New Zealand

Université de Picardie Jules VerneLuis Pires Introduction : Technique Fonctionne sous Microsoft Windows, Mac OS X et Linux Compatibilité quelque soit le poste client, l’OS, ou le navigateur Utilisation « universelle »

Université de Picardie Jules VerneLuis Pires INTRODUCTION : Applications Création de graphiques Interactivité avec le langage ActionScript 3 Diffusion audio et vidéo en streaming (?)

Université de Picardie Jules VerneLuis Pires Introduction : Technique Une interface personnalisable Un logiciel ergonomique Une prise en main facile

Université de Picardie Jules VerneLuis Pires Introduction : Technique Concepteurs graphiques Développeurs

Université de Picardie Jules VerneLuis Pires Introduction : Applications Création de sites web, d’applications, d’animations et de jeux vidéos pour le web Création d’interfaces sur supports fermés CD/DVD-ROM Création et traitement de graphiques vectoriels Apport d’interactivité aux sites web Développement de contenus Rich Media (RIA) Création de vidéos pour la TV ou le cinéma Diffusion audio et vidéo via le web (en streaming)

Université de Picardie Jules VerneLuis Pires Introduction : +/- Inconvénients : –Flash n’est pas un standard du W3C –Temps de chargement –Installation d’un plug-in dans le navigateur –Portabilité difficile sur certaine plate-formes –Version du plug-in (!) –Référencement difficile / moteurs de recherche (?) –Mal géré par les navigateurs (recherche, navigation) –S’exécute sur le poste client : cela peut représenter un risque pour l’utilisateur

Université de Picardie Jules VerneLuis Pires Introduction : +/- Avantages : –Prise en main facile et souplesse d’utilisation –Fluidité et légèreté des animations –Diffusion audio et vidéo sans problème de codec –Protection du code source –Logiciel évolutif –Utilisation d’ActionScript, programmation orientée objet, pages dynamiques –Problèmes d’accessibilité résolus depuis 2003 : WCAG 2.0

Université de Picardie Jules VerneLuis Pires Formats Flash : «.fla » Le format «.fla » permet de : –Créer –Éditer –importer (images, sons, textes, …) –Scénariser –Animer

Université de Picardie Jules VerneLuis Pires Formats Flash : «.flv » Le format «.flv » permet de : –de partager des vidéos sur Internet en utilisant Flash Player –format conteneur (audio + vidéo) –vidéo : codec H.264, codec VP6, … –audio : non compressé (PCM, ADPCM), compressé en MP3

Université de Picardie Jules VerneLuis Pires Les Formats Flash «.swf» («.exe ») Format ouvert Publication des animations Flash sur le web « encapsulé » dans le code HTML Exécuté via le plug-in Flash player du navigateur web Ou exécuté en dehors du navigateur web en mode « off-line » AIR (Adobe Integrated Runtime)

Université de Picardie Jules VerneLuis Pires Formats d’échange

Université de Picardie Jules VerneLuis Pires L’interface Menu principal Calques Panneau d’objets Panneaux ou palettes spécifiques ScèneScénario Inspecteur de propriétés

Université de Picardie Jules VerneLuis Pires Interface : Menu Principal Menu : Fichier Édition, Affichage, Insertion, Modification, Texte, Contrôle, Fenêtre, Aide Accès intuitif aux fonctionnalités de Flash

Université de Picardie Jules VerneLuis Pires Interface : Menu contextuel Avec un clic droit à l’aide de la souris Accès rapide aux fonctionnalités liées au contexte actuel (objet sélectionné, position du pointeur de la souris)

Université de Picardie Jules VerneLuis Pires Interface : Scène Disposition et organisation des objets constituant l’animation à un instant donné Visualisation instantanée du déroulement de l’animation Elle est étroitement liée au scénario Organisation des objets à l ’aide de calques

Université de Picardie Jules VerneLuis Pires Interface : Scénario

Université de Picardie Jules VerneLuis Pires Interface : Scénario Déroulement de l’animation en fonction du temps Constitué d’images (ou frames) juxtaposées horizontalement Réglage du « timing » de l’animation

Université de Picardie Jules VerneLuis Pires Interface : Calques

Université de Picardie Jules VerneLuis Pires Interface : Calques Ils permettent le regroupement d’objets Les calques sont superposés et sont caractérisés par un niveau de profondeur Les calques de profondeurs supérieures masquent les calques de profondeurs inférieures

Université de Picardie Jules VerneLuis Pires Interface : Panneau d’objets Permet d’accéder aux outils 3 types d’outils : –Outils de sélection –Outils de tracé et de dessin –Outils de mesure et de transformation

Université de Picardie Jules VerneLuis Pires Interface : Inspecteur de propriétés Accès aux propriétés associées à l’objet actuellement sélectionné sur la scène

Université de Picardie Jules VerneLuis Pires Interface : Infos Accès aux informations associées à l’objet actuellement sélectionné sur la scène

Université de Picardie Jules VerneLuis Pires Interface : Fragments de code Liste des actions, opérateurs, fonctions, constantes, propriétés et objets de Flash Définitions Exemples d’utilisation Portablilité (version)

Université de Picardie Jules VerneLuis Pires Interface : Explorateur d’animation / Séquence Liste des animations du projet classées par séquence Liste des séquences du projet

Université de Picardie Jules VerneLuis Pires Interface : Actions Action(s) appliquée(s) à l’objet ou l’image (frame) en cours

Université de Picardie Jules VerneLuis Pires Interface : Débogage

Université de Picardie Jules VerneLuis Pires Interface : Bibliothèque La bibliothèque répertorie l’ensemble des objets utilisés dans le projet (images, sons, videos, texte, animations, symboles) La bibliothèque permet de réutiliser un même objet répertorié dans différents contexte au sein de l’animation (optimisation)

Université de Picardie Jules VerneLuis Pires Interface : Panneaux

Université de Picardie Jules VerneLuis Pires Interface : Espace detravail

Université de Picardie Jules VerneLuis Pires Applications Création d’un graphique vectoriel Changement des propriétés Conversion en symbole Interpolation de forme (morphing) Interpolation de mouvement Guide de mouvement Effet de fading Création d’un bouton Ajout de son

Université de Picardie Jules VerneLuis Pires ActionScript 3.0 Language de scripts Syntaxe différente de ActionScript 2.0 Plus performant que ActionScript 2.0 Plus de possibilités Orienté objet Conforme à 100% avec la spécification ECMAScript 3 (ECMA-262)

Université de Picardie Jules VerneLuis Pires ActionScript 3.0 Syntaxe proche du JavaScript Les fichiers ActionScripts non compilés ont pour extension.as (utilisé sur poste client) ou.asr (utilisé sur serveur)

Université de Picardie Jules VerneLuis Pires ActionScript 3.0 actionscript 1.0 action devient actionscript supporte les types, les variables, les fonctions avec paramètres inspirés de javascript une variable ne peut contenir qu'un seul type de données passage de la programmation par prototype à une programmation objet actionscript 2.0 compatible avec ActionScript 1.0 couche de syntaxe permettant l'utilisation de l'héritage de classe au-dessus du système basé sur les prototypes ( class, extends) typage fort ( déclaration obligatoire des variables) avec vérification par le compilateur ( variable:type) support partiel de la norme ECMAScript IV actionscript 3.0 nouvelle machine virtuelle ne supportant que l'actionScript 3.0 vérification des types à la compilation et à l'exécution support des API, Bibliothèque logicielle, des Espace de noms gestion des évènements basé sur DOM support total de la norme ECMAScript4 (ES4) début de l'optimisation pour DirectX et OpenGL Source : Wikipédia

Université de Picardie Jules VerneLuis Pires ActionScript 3.0 Source : Wikipédia

Université de Picardie Jules VerneLuis Pires ActionScript 3.0 Outils de développement Adobe Flash Adobe Flex Builder Framework pour le développement d’Applications Internet Riches (RIA ) Adobe Integrated Runtime (AIR) déploiement d’applications sur le bureau (hors du navigateur) Eclipse (SDK Flex et AIR)

Université de Picardie Jules VerneLuis Pires ActionScript 3.0 Exemples Texte dynamique Texte formaté Drag & Drop Accès à une URL Contrôle de l’animation Ajout de son

Université de Picardie Jules VerneLuis Pires ActionScript 3.0 Texte dynamique Exemple : var maZoneTexte:TextField = new TextField();// défnition de la zone texte var contenu = "Bonjour tout le monde !"; maZoneTexte.text = contenu; // contenu maZoneTexte.width = 200; // largeur maZoneTexte.height = 200; // hauteur maZoneTexte.multiline = true; // zone texte multiligne maZoneTexte.wordWrap = true; // retour à la ligne possible maZoneTexte.border = true; // bordure maZoneTexte.borderColor = 0xFF0000; // couleur de la bordure maZoneTexte.background = true;// fond maZoneTexte.backgroundColor = 0xFFE4B3;// couleur de fond

Université de Picardie Jules VerneLuis Pires ActionScript 3.0 Texte formaté Exemple : var monFormat:TextFormat = new TextFormat(); // défnition de mon format monFormat.font = "Verdana"; monFormat.size = 12; monFormat.color = 0x666666; var maZoneTexte:TextField = new TextField(); maZoneTexte.multiline = true; maZoneTexte.wordWrap = true; maZoneTexte.width = 400; maZoneTexte.defaultTextFormat = monFormat; maZoneTexte.text = "Exemple de texte formaté par défaut à afficher dans ma zone texte"; addChild(maZoneTexte);

Université de Picardie Jules VerneLuis Pires ActionScript 3.0 Drag & Drop (1/2) Exemple : function glisser(evt:MouseEvent):void { monObjet.startDrag(); } function deposer(evt:MouseEvent):void { monObjet.stopDrag(); } monObjet.addEventListener(MouseEvent.MOUSE_DOWN, glisser); monObjet.addEventListener(MouseEvent.MOUSE_UP, deposer);

Université de Picardie Jules VerneLuis Pires ActionScript 3.0 Drag & Drop (2/2) Exemple : function glisser(evt:MouseEvent):void { evt.target.startDrag(); } function deposer(evt:MouseEvent):void { evt.target.stopDrag(); } monObjet.addEventListener(MouseEvent.MOUSE_DOWN, glisser); monObjet.addEventListener(MouseEvent.MOUSE_UP, deposer);

Université de Picardie Jules VerneLuis Pires ActionScript 3.0 Accès à une URL (1/2) Exemple 1 : var google_txt:TextField = new TextField(); google_txt.autoSize = TextFieldAutoSize.LEFT; google_txt.selectable = false; google_txt.text = "Google, le site officiel français"; var formatLiens:TextFormat = new TextFormat(); formatLiens.url = " formatLiens.color = 0x0000FF; formatLiens.underline = true; google_txt.setTextFormat(formatLiens); addChild(google_txt);

Université de Picardie Jules VerneLuis Pires ActionScript 3.0 Accès à une URL (2/2) Exemple 2 : function onClic(pEvt:Event):void { var annuaire:URLRequest = new URLRequest(" navigateToURL (annuaire); } monBouton.addEventListener(MouseEvent.CLICK, onClic); Écriture plus simple : function onClic(pEvt:Event):void { navigateToURL(new URLRequest( " } monBouton.addEventListener(MouseEvent.CLICK, onClic);

Université de Picardie Jules VerneLuis Pires ActionScript 3.0 Contrôle de l’animation Exemple : // Cette fonction est appelée lorsque l’on clique sur "monBouton” // cela entraine la lecture de “monAnimation” function lectureAnimation(event:MouseEvent):void { monAnimation.play(); } // Enregistrement de la fonction en tant que “listener” associé au bouton monBouton.addEventListener(MouseEvent.CLICK, lectureAnimation);

Université de Picardie Jules VerneLuis Pires ActionScript 3.0 Chargement d’une image // création du conteneur de l'image ou du swf var conteneurImage:Loader = new Loader(); // url de l'image ou du swf à charger var image:URLRequest = new URLRequest("images/tannoy.gif"); // chargement de l'image ou du swf dans le conteneur conteneurImage.load(image); // affichage du conteneur this.addChild(conteneurImage);

Université de Picardie Jules VerneLuis Pires ActionScript 3.0 Chargement audio (1/4) Exemple 1 : Chargement de fichiers audio externes var req:URLRequest = new URLRequest("click.mp3"); var s:Sound = new Sound(req);

Université de Picardie Jules VerneLuis Pires ActionScript 3.0 Chargement audio (2/4) Exemple 2 : Utilisation d'un fichier audio incorporé dans Flash // Importation préalable du son dans la bibliothèque Flash // Exportation pour actionScript et définition d’une classe "DrumSound" var monSon:DrumSound = new DrumSound(); var monCannal:SoundChannel = monSon.play();

Université de Picardie Jules VerneLuis Pires ActionScript 3.0 Chargement audio (3/4) Exemple 3 : Utilisation de fichiers audio de lecture en continu // import flash.media.Sound; // import flash.media.SoundLoaderContext; // import flash.net.URLRequest; var s:Sound = new Sound(); var req:URLRequest = new URLRequest("bigSound.mp3"); var context:SoundLoaderContext = new SoundLoaderContext(8000, true); s.load(req, context); s.play();

Université de Picardie Jules VerneLuis Pires ActionScript 3.0 Chargement audio (4/4) Exemple 4 : Lecture de sons chargés var snd:Sound = new Sound(new URLRequest(“monSon.mp3")); snd.play(); var snd:Sound = new Sound(new URLRequest(“monSon.mp3")); snd.play(1000, 3);

Université de Picardie Jules VerneLuis Pires Conclusion

C’est fini ! C’est à vous de jouer !