Chapitre 2 : Premières animations graphiques

Transcription

1 Cours Flash Chapitre 2 : Premières animations graphiques Rappel : Pour ce chapitre, vous trouverez les fichiers dans «2_Premieres animations graphique.zip». SOMMAIRE 1 OBJECTIFS DU CHAPITRE INTERPOLATION DE FORME EXPORTATION EN SHOCKWAVE,.EXE, HTML INTEGRATION DANS UNE PAGE WEB INTEGRATION EN HTML DEPUIS FLASH INTEGRATION EN HTML DEPUIS DREAMWEAVER EXERCICE : CHOC DE BILLES DE BILLARD Objectifs du chapitre A la fin de ce chapitre, vous saurez : créer une animation graphique simple grâce à une interpolation de forme, exporterez votre animation au format Shockwave,.exe, et autres, intégrer votre animation dans une page Web.

2 2 Interpolation de forme Le but est de parvenir au résultat montré dans «rebond final.swf». Vous pouvez vous inspirer de l exemple «interpolation de forme.fla». Rappel : ma solution est dans «rebond final.fla», mais des autres solutions sont tout à fait possibles. Pour faire cet exercice, vous devez : 1. Créer deux calques : un pour les traits haut et bas qui représentent un sol et un plafond par exemple, un pour la balle. Notez qu un seul calque suffirait ici Figure 1 : créer de nouveaux calques 2. Dessiner des balles (rond plein sans bord). N oubliez pas de changer la couleur en fonction de la position de la balle. Pas de bord/fond Figure 2 : Palette de couleurs pour les bords et les fonds 3. Créer les images clés en positionnant la balle à chaque fois (vous pouvez utiliser l «outil transformation libre», Figure 3, pour écraser la balle ou le faire à la main). Pensez aux raccourcis clavier F6 (image clé) et F7 (image clé vide) Notes : Pour la déformation d objets, approchez votre souris de l objet sélectionné, vous verrez le curseur changer d aspect suivant que vous êtes sur un bord, un coin, etc. Pensez aussi à regarder les options de déformations (en bas du panneau des outils). Pour «déformer» un objet, vous pouvez aussi utiliser le menu Modification > Flash : Premières animations graphiques Page 2 sur 12

3 Transformer > Redimensionner et faire pivoter... (Ctrl+Alt+S). Concernant l insertion des images clés, reportez vous à la vidéo 6 si nécessaire. Figure 3 : Outil permettant la déformation d objet 4. Créer les interpolations de forme entre chaque image clé, grâce au panneau Propriété de chaque première image clé d un mouvement, ou de toute image normale comprise entre deux images clés (cf. Figure 5). Pour augmenter le réalisme, j ai utilisé des accélérations dans les différentes interpolations. Figure 4 : Propriétés d une image pour l interpolation de forme avec accélération Flash : Premières animations graphiques Page 3 sur 12

4 3 Exportation en shockwave,.exe, HTML Profitons de cette première animation pour voir comment exporter les animations Flash en version exécutable, c'est à dire en fichier «.exe» (pour Windows). Vous savez déjà que l on peut exporter automatiquement en version SWF (Shockwave Flash) si on fait CTRL+ENTREE. Si vous voulez paramétrer cette exportation, utilisez le menu Fichier/Exporter/Exporter l animation. Ceci vous permet en premier lieu de choisir le nom du fichier «swf» à créer (pensez à choisir le bon format dans la liste proposée 1 ), ainsi que le répertoire d accueil. Ensuite, Flash vous donne une boite de paramètres (cf. Figure 5) dans laquelle je vous invite à cocher «protéger contre l importation». Cette option interdit d ouvrir un SWF dans Flash. Si vous ne la cochez pas, on peut récupérer en partie vos dessins dans Flash. Pour les autres options, voici un rapide descriptif : Version : indique quelle version du player sera utilisée pour créer le SWF qui sera générée. Bien sûr, il faut que votre client ait un «player» adapté à la version que vous avez générée ; c'est à dire une version égale ou supérieure. Ordre de chargement : permet de dire comment on affiche les calques (en cas de chargement long). Ceci est intéressant quand il y a beaucoup de calques, beaucoup de code Action Script, beaucoup d objets (vidéos, sons, etc.). Cette option n est pas importante pour le cours. Version d ActionScript : comme nous le verrons plus tard, il y a maintenant deux versions d ActionScript (AS). AS1 est celui que nous étudierons ; elle est très facile à appréhender et vous suffira pour le Master. AS2 est la nouvelle version apparue avec MX 2004 ; elle est totalement orientée objet et se rapproche beaucoup de Java (à ne pas confondre avec Javascript!). AS2 est plus compliqué, plus long à apprendre, demande plus de connaissances informatiques (classe, polymorphisme, etc.), mais sa puissance est plus grande que celle d AS1. Pour le cours, laissez l option ActionScript 2 activée, elle convient à tout ce que l on fera. Générer un rapport de taille : utilisé par les Flasheurs pour optimiser leurs fichiers. Ceci crée un fichier texte indiquant la taille de chaque symbole et image. Cette option n est pas importante pour le cours. Protéger contre l importation : interdit l ouverture d un fichier SWF dans Flash. Omettre les actions Trace : utilisé par les Flasheurs. Lorsque vous développez en Action Script, vous avez parfois besoin de faire afficher des messages pour vérifier la valeur de variables, etc. Ceci se fait au moyen d une fonction Trace que vous pouvez désactiver grâce à cette option lors de la génération du fichier SWF. Débogage autorisé : vous pouvez débogger votre animation durant son exécution. Cette option n est pas importante pour le cours. Compresser l animation : ceci est fourni depuis Flash MX pour compresser encore plus les fichiers SWF. Ceci fonctionne à la manière d un ZIP. Le résultat est que le SWF sera plus rapide à charger, mais votre navigateur internet devra dézipper le swf avant de pouvoir l exécuter. A vous de tester le meilleur choix en fonction de vos contraintes. Mot de passe : permet de donner un mot de passe pour la lecture de l animation. Qualités JPEG : permet de définir la qualité des images (par défaut cette qualité de 50 donne de très bons résultats). 1 Vous noterez qu on peut exporter dans de nombreux formats tels que AVI, MOV, Gif animé, etc. Flash : Premières animations graphiques Page 4 sur 12

5 Flux continu : permet de définir le type de compression pour le son utilisé en fond. Cette option sera vue plus tard, au chapitre 5 sur le son. Son d événement : permet de définir le type de compression pour les sons événementiels. Cette option sera vue plus tard, au chapitre 5 sur le son. Neutraliser les paramètres audio : permet de conserver ou d ignorer les paramètres individuels de publication de chaque son. Cette option sera vue plus tard, au chapitre 5 sur le son. Sécurité de lecture locale : cette option est apparue avec Flash 8, à cause des problèmes de sécurité (virus, hacking, etc.). Sans rentrer dans les détails, vous pouvez choisir entre deux options : soit votre animation accède uniquement aux fichiers locaux (c'est à dire ceux de la machine qui exécute votre swf), soit votre animation accède uniquement à internet. Ceci entraîne de très grosses contraintes dans certains cas de programmation, mais ces soucis sortent du cadre de ce cours. Consultez l aide si vous en avez envie, mais sachez que cet aspect ne sera pas abordé en cours. Figure 5 : les paramètres d exportation d une animation Voyons à présent une autre solution pour l exportation, la «publication». Pour cela, ouvrez le menu Fichier/paramètres de publication. Vous pouvez cocher les options que vous jugez intéressantes (par exemple FLASH, HTML, et.exe comme sur la Figure 6. Vous pouvez vérifier les paramètres des formats choisis (quand cela est possible) dans les onglets Flash : Premières animations graphiques Page 5 sur 12

6 correspondants (cf. Figure 7 et Figure 8). Quand vous voulez exporter tous ces formats, vous pouvez soit cliquer sur le bouton «Publier» de cette fenêtre «Paramètres de publication», soit prendre le menu Fichier>Publier qui utilise le contenu de la fenêtre «Paramètres de publication». Figure 6 : Paramètres de publication, les formats proposés Flash : Premières animations graphiques Page 6 sur 12

7 Figure 7 : Paramètres de publication, les paramètres pour le SWF Flash : Premières animations graphiques Page 7 sur 12

8 Figure 8 : Paramètres de publication, les paramètres pour la page HTML Flash : Premières animations graphiques Page 8 sur 12

9 4 Intégration dans une page web Nous allons intégrer votre SWF dans une page web depuis Dreamweaver et depuis Flash. Le faire avec Dreamweaver vous donne un contrôle total alors que la publication HTML par Flash génère une page automatiquement, ce qui peut être suffisant dans certains cas. 4.1 Intégration en HTML depuis Flash Pour créer une page web contenant votre animation Flash, ouvrez le menu Fichier > Paramètres de publication, et reportez vous aux Figure 6, Figure 7 et Figure 8 pour le choix des options. Puis demander la publication soit en cliquant sur le bouton Publier, soit en utilisant le menu Fichier > Publier, voire Fichier > Aperçu avant publication. Si vous faites la publication, vous obtiendrez un fichier HTML et un fichier SWF (par défaut dans la même répertoire que votre FLA). Vous pouvez regardez mon fichier «rebond final.html» que j ai généré en suivant cette procédure. Vous aurez constaté que les options sont pauvres ; on ne peut pas modifier le contenu de la page HTML avant sa création sur le disque dur, mais vous pouvez bien évidemment ouvrir cette page avec n importe quel éditeur HTML et modifier le code à souhait, ou le copier dans une autre pages HTML, etc. Figure 9 : La page web générée depuis Flash 4.2 Intégration en HTML depuis Dreamweaver Cette partie est donnée à titre culturel, et ne fait pas partie des choses à connaître pour le cours de Flash. Pour cette partie, vous devez connaître Dreamweaver (ceci ne faisant pas partie du cours). Si c est le cas, vous pouvez tester ce que j explique ci dessous. Dans le cas contraire, vous pouvez lire cette partie pour voir ce que Dreamweaver (ou d autres éditeurs HTML éventuellement) permet de faire L intégration de SWF par Dreamweaver est d une simplicité déconcertante. Ouvrez Dreamweaver, créez une page vierge, et cliquez sur le bouton permettant d insérer du Flash (uniquement du SWF bien sûr, jamais du FLA!) comme montré sur la Figure 10 (réalisée avec Dreamweaver MX 2004, mais la version 8 est très similaire). Choisissez le fichier SWF qui vous intéresse (Dreamweaver vous demandera peut être de le copier dans votre répertoire de site web ; dans ce cas, acceptez). Vous obtenez alors une page similaire à celle de la Figure Flash : Premières animations graphiques Page 9 sur 12

10 10. Si vous demandez à voir le code HTML, vous aurez quelque chose proche du code cidessous : <object classid="clsid:d27cdb6e AE6D 11cf 96B " codebase=" ab#version=7,0,19,0" width="550" height="400"> <param name="movie" value="rebond final.swf" /> <param name="quality" value="high" /> <embed src="rebond final.swf" quality="high" pluginspage=" type="application/x shockwave flash" width="550" height="400"></embed> </object> Dreamweaver génère directement le code HTML pour Internet Explorer et les autres navigateurs web (suivant votre paramétrage de Dreamweaver). De plus, il se charge d une éventuelle proposition de téléchargement si le plugin Flash n est pas installé. Sur la Figure 10, vous pouvez voir que par défaut le SWF prend la taille qu on a donnée à la scène dans Flash. Vous pouvez tout à fait changer cette taille, par exemple 20 x 300, 400 x 10, ou encore 100% x 200, 50% x 75%, etc. Dans tous les cas, si vous demandez l aperçu dans un navigateur, le résultat sera peut être déformé (non respect des proportions), mais les dessins resteront toujours beaux puisque Flash utilise des dessins vectoriels. Autre chose intéressante, la couleur de fond de scène... Par défaut, Dreamweaver laisse la couleur par défaut, c'est à dire celle donnée dans Flash. Vous pouvez constater sur la Figure 11 que j ai changé cette couleur de fond (en plus d avoir ajouté du texte, changé la couleur de lapage web, etc.). Pour changer la couleur de fond du SWF, j ai utilisé le bouton dédié à cette couleur (cf. Figure 10, en bas). Bien sûr, vous pouvez utiliser la même couleur que celle de votre page web (ou tout autre couleur). Question : comment feriez vous pour être sûr que votre animation SWF sera toujours jouée avec la couleur que vous avez fixée lors du cahier des charges, même si on la change dans Dreamweaver? Remarque : depuis quelques versions, Dreamweaver génère également du code Javascript nécessaire pour la compatibilité des navigateurs web, etc. Par exemple, pour la page que j ai créée et qui s appelle «rebond final créé depuis Dreamweaver.html», Dreamweaver a généré dans le même dossier que le fichier HTML un dossier «Scripts», et ce dossier «Scripts» contient un fichier javascript «AC_RunActiveContent.js» appelé par le code HTML. Attention donc à ce que fait Dreamweaver! Si vous deviez publier cette page sur Internet, vous devriez également publier le dossier «Scripts», sans quoi votre page HTML risque de ne pas fonctionner correctement. Flash : Premières animations graphiques Page 10 sur 12

11 Bouton pour insérer du SWF Rectangle correspondant par défaut à la taille de la scène définie dans Flash Lecture et boucle automatiques Taille en pixels ou en % Couleur de fond de scène dans la page HTML Figure 10 : Insertion de SWF par Dreamweaver Figure 11 : Aperçu de la page web créée avec Dreamweaver (ajout de texte, de couleurs, changement de la taille et de la couleur du SWF) Flash : Premières animations graphiques Page 11 sur 12

12 5 Exercice : choc de billes de billard Le but est de parvenir au résultat montré dans «billard final.swf». Dans cette simulation de choc de billes, une bille 1 choque une bille 2 avec un effet «rétro» ce qui a pour effet de faire reculer la bille 1 après le choc. Après ce choc, la bille 2 continue sa course et choque deux autres billes en même temps. Pour augmenter le réalisme, après le choc avec 3 et 4, la bille 2 continue un peu sa course Rappel : pour qu une interpolation de forme (ou de mouvement 2 ) soit possible, il ne doit y avoir qu un seul élément à faire bouger par calque, c'est à dire un seul élément dans chaque image du calque associée à l interpolation. Astuce : il y a beaucoup de façons d aborder cet exercice, mais quelle que soit votre approche, la fonction «coller en place» du menu Edition vous rendra sûrement des services car elle colle l élément exactement au même endroit que l original. Vous trouverez deux solutions qui se ressemblent visuellement, mais qui diffèrent dans leur contenu. «billard final.fla» est une solution avec seulement des interpolations de forme (les billes sont simplement des dessins) ; «billard final (mouvement).fla» est une solution utilisant uniquement des interpolations de mouvement, c'est à dire basées uniquement des symboles (ici des clips). Nous aborderons ce type d interpolation prochainement. Gardez en mémoire cette solution ; vous pourrez y revenir quand nous aurons vu les symboles. 2 Ceci sera vu au chapitre 3. Flash : Premières animations graphiques Page 12 sur 12