Cours Flash5
7
pages
Français
Documents
Le téléchargement nécessite un accès à la bibliothèque YouScribe Tout savoir sur nos offres
7
pages
Français
Documents
Le téléchargement nécessite un accès à la bibliothèque YouScribe Tout savoir sur nos offres
ère Formation Flash 5 1 partie cyril.clement@univ-fcomte.fr 1. Présentation de l'interface et des outils de dessin 1.1. La scène est la zone dans laquelle vous composez le contenu des images individuelles de l'animation, soit en y dessinant directement les illustrations, soit en organisant les illustrations importées. 1.2. Le scénario est l'endroit où vous coordonnez la temporisation de l'effet animé et où vous assemblez les illustrations sur différents calques. Le scénario affiche chaque image de l'animation. 1.3. Définir les propriétés d'une animation flash Choisissez le menu Modification > Animation. La boîte de dialogue Propriétés de l'animation s'affiche. Utilisez la boîte de dialogue Propriétés de l'animation pour définir la taille, la cadence (en images/secondes), la couleur d'arrière-plan et les autres propriétés d'une animation. 1.4. Les panneaux Pour visualiser, organiser et modifier des éléments dans une animation Flash, vous pouvez utiliser des panneaux flottants contenant les commandes et les options relatives à chaque type d'élément. Les panneaux vous permettent de modifier les symboles, les occurrences, les couleurs, le type, les images et d'autres éléments. Pour afficher la liste complète des panneaux disponibles dans Flash, choisissez Fenêtre > Panneaux. 1.5. La palette d'outils Cliquez sur l'outil que vous souhaitez utiliser. Un ensemble de modificateurs s'affiche en bas de la boîte à outils selon l'outil que ...
Voir
ère FormationFlash 51 partiecyril.clement@univ-fcomte.fr 1. Présentation de l'interface et des outils de dessin 1.1. La scèneest la zone dans laquelle vous composez le contenu des images individuelles de l'animation, soit en y dessinant directement les illustrations, soit en organisant les illustrations importées. 1.2. Le scénarioest l'endroit où vous coordonnez la temporisation de l'effet animé et où vous assemblez les illustrations sur différents calques. Le scénario affiche chaque image de l'animation. 1.3. Définir les propriétés d'une animation flash Choisissez le menu Modification > Animation. La boîte de dialogue Propriétés de l'animation s'affiche. Utilisez la boîte de dialogue Propriétés de l'animation pour définir la taille, la cadence (en images/secondes), la couleur d'arrière-plan et les autres propriétés d'une animation. 1.4. Les panneaux Pour visualiser, organiser et modifier des éléments dans une animation Flash, vous pouvez utiliser des panneaux flottants contenant les commandes et les options relatives à chaque type d'élément. Les panneaux vous permettent de modifier les symboles, les occurrences, les couleurs, le type, les images et d'autres éléments. Pour afficher la liste complète des panneaux disponibles dans Flash, choisissez Fenêtre > Panneaux. 1.5. La palette d'outils Cliquez sur l'outil que vous souhaitez utiliser. Un ensemble de modificateurs s'affiche en bas de la boîte à outils selon l'outil que vous sélectionnez. La section Outils contient les outils de dessin, de peinture et de sélection. La section Affichage contient les outils de zoom et de panoramique utilisés dans la fenêtre de l'application. La section Couleurs contient les modificateurs de la couleur de trait et de remplissage. La section Options affiche les modificateurs de l'outil sélectionné, lesquels affectent les opérations de peinture et d'édition de l'outil. 2. Construire votre animation Créer une animation flash, consiste à décomposer votre animation en autant de sous éléments qui seront les plus petits dénominateurs communs de votre animation. Dans flash ces éléments s'appellent symboles, vos symboles sont rangés dans la bibliothèque. Lorsque vous placez un symbole sur la scène, vous créez une occurrence de ce symbole. 2.1. Les symbolespermettent de réduire la taille des fichiers car, quel que soit le nombre d'occurrences que vous créez, Flash n'enregistre le symbole qu'une seule fois dans le fichier. Utilisez des symboles, animés ou non, pour chaque élément qui apparaît plus d'une fois dans une animation. Vous pouvez modifier les propriétés d'une occurrence sans affecter le symbole maître, ou éditer le symbole maître de manière à modifier toutes les occurrences.
Il existe 3 types de comportement pour un symbole. -Symbole "Graphique" pour les images statiques -Symbole "Clip" pour des animations indépendantes à l'intérieur de l'animation principale. -Symbole "Bouton" pour déclencher des actions Pour créer un symbole, sélectionner un élément de la scène, choisissez le menu Insertion > Convertir en symbole (touche F8) 2.2. Utiliser les calques Les calques fonctionnent comme des feuilles transparentes empilées qui séparent les illustrations de façon à pouvoir combiner différents éléments pour former une image visuelle cohésive. Vous pouvez dessiner et modifier des objets sur un calque sans toucher aux objets des autres calques. Lorsque rien ne repose sur le calque, celui-ci laisse apparaître les calques situés en dessous. Glisser un calque au-dessus des autres calques permet d'avancer son contenu au premier plan. 2.3. Animation interpolée Interpolation de formes Dans l'interpolation de forme, vous dessinez une forme à un point dans le temps, puis vous modifiez cette forme ou dessinez une autre forme à un autre point dans le temps. Flash interpole ces valeurs ou ces formes pour les images intermédiaires, créant ainsi l'animation. Interpolation de mouvement Dans l'interpolation de mouvement, vous définissez des propriétés telles que la position, la taille et la rotation d'une occurrence, d'un groupe ou d'un bloc de texte à un point dans le temps, puis vous modifiez ces propriétés à un autre point dans le temps. Interpolation de mouvement selon une trajectoire
ème FormationFlash 52 partiecyril.clement@univ-fcomte.fr 1. Créer une animation 1.1. Le battement d'aile, création d'un symbole "Clip"1.Ouvrez le fichier abeille.fla 2.Affichez la bibliothèque du fichier, menu "Fenêtre > Bibliothèque" 3.Double cliquez sur le symbole "Abeille" pour travailler sur celui-ci 4.Cliquez sur l'image 2 du calque "ailes" 5.Insérez une image-clé, menu "Insertion > Image-clé" 6.Les ailes étant sélectionnées, dans le panneau "Transformer" sur l'onglet "Transformer", réduisez leur largeur à 90% 7.Cliquez sur l'image 2 du calque "corps" 8.Insérez une image, menu "Insertion > Image" afin que le corps de l'abeille soit aussi visible à l'image 2 9.Cliquez-droit sur le symbole "Abeille" dans la fenêtre de la bibliothèque 10.Un menu contextuel apparaît, choisissez "Comportement > Clip" 11.Revenez sur la scène principale, cliquez sur "Scène1" en haut à gauche de votre écran 12.Glissez le clip "Abeille" de la bibliothèque au centre de la scène 13.Compilez, menu "Contrôle > Tester l'animation" 1.2. Récolter le pollen, création d'une interpolation de mouvement selon une trajectoire1.Revenez au fichier abeille.fla 2.Insérez un nouveau calque que vous nommerez "décor fixe" 3.Glissez le calque "décor fixe" sous le calque abeille pour le passer en arrière plan 4.Laissez le calque "décor fixe" sélectionné 5.Glissez le symbole "Ruche" de la bibliothèque sur la scène 6.Glissez le symbole "Marguerite" de la bibliothèque sur la scène 7.Cliquez sur le calque "abeille" pour le sélectionner 8.Insérez un claque de guide de mouvement, menu "Insertion > Guide de mouvement" Remarque: Le calque de guide est automatiquement associé au calque "abeille" précédemment sélectionné 9.Sélectionnez l'outil Crayon 10.Sélectionnez "Lisser" dans les options d'outil 11.Dessinez une courbe reliant la ruche à la marguerite 12.Cliquez sur l'image 20 du calque "abeille" 13.Insérez une image-clé, menu "Insertion > Image-clé" 14.Cliquez sur l'image 20 du calque "Guide: abeille" 15.Insérez une image, menu "Insertion > Image" afin que la courbe de guide de l'abeille soit aussi visible à l'image 20 16.Cliquez sur l'image 20 du calque "décor fixe" 17."Insertion > Image" afin que la ruche et la marguerite soient aussi visibles à l'image 20Insérez une image, menu 18.Cliquez sur l'image 20 du calque "abeille" 19.Sélectionnez l'outil Flèche 20.Sélectionnez "Ajuster aux objets" dans les options d'outil 21.Déplacez l'abeille par son centre à l'une des extrémités de la courbe de guide 22.Lâchez l'abeille dès qu'un rond apparaît en son centre, celui-ci indique que l'abeille sera correctement liée à son guide 23.Sélectionnez "Pivoter" dans les options d'outil 24.Pivotez l'abeille en déplaçant un des sommet de son rectangle de sélection pour la placer dans la sens de la trajectoire 25.Cliquez sur l'image 1 du calque "abeille" 26.Déplacez l'abeille par son centre à l'autre extrémité de la courbe de guide 27.Lâchez l'abeille dès qu'un rond apparaît en son centre, celui-ci indique que l'abeille sera correctement liée à son guide 28.Sélectionnez "Pivoter" dans les options d'outil 29.un des sommet de son rectangle de sélection pour la placer dans la sens de la trajectoirePivotez l'abeille en déplaçant 30.Cliquez sur une image entre 1 et 19 du calque "abeille" 31.Sélectionnez l'onglet "Image" du panneau "Image" à droite de votre écran 32.Sélectionnez "Mouvement" dans le menu déroulant "Interpolation" 33.Cochez l'option "Orienter vers la trajectoire" 34.Compilez, menu "Contrôle > Tester l'animation"
1.3. Piloter l'animation, création d'un symbole "Bouton" 1.Créez un symbole, menu "Insertion > Nouveau symbole" 2.Nommez ce nouveau symbole "pause" 3.Choisissez un comportement "Bouton" 4.Dans la bibliothèque, glissez ce nouvel élément dans le dossier "boutons" Remarque: un bouton possède quatre états: Haut, Dessus, Abaissé, Cliqué - L'état Haut, représente l'apparence normale du bouton quand le pointeur de la souris n'est pas dessus. - L'état Dessus, représente l'apparence du bouton quand le pointeur se trouve dessus. - L'état Abaissé, représente l'apparence du bouton quand vous cliquez dessus. - L'état Cliqué, définit la zone sensible qui réagit au clic de la souris. Cette zone est invisible dans l'animation.5.Sélectionnez l'état "Haut" du scénario du symbole 6.Glissez le symbole graphique "pauseG" sur la scène 7.Alignez le symbole au centre de la scène avec le panneau "Aligner" 8.Sélectionnez l'état "Dessus" du scénario du symbole 9.Insérez une image-clé, menu "Insertion > Image-clé" 10.Réduisez la taille du symbole à 90% en hauteur et largeur sur le panneau "Transformer" 11.Sélectionnez l'état "Abaissé" du scénario du symbole 12.Insérez une image, menu "Insertion > Image" 13.Sélectionnez l'état "Cliqué" du scénario du symbole 14.Insérez une image-clé, menu "Insertion > Image-clé" 15.Rétablissez la taille du symbole à 100% en hauteur et largeur sur le panneau "Transformer" 16.Détachez ce symbole de la bibliothèque, menu "Modification > Séparer" 17.Sélectionnez l'outil "Pot de peinture", puis une couleur unie (noir par exemple) 18.Remplissez complètement la surface du carré de couleur noire 19.Revenez sur la scène principale, cliquez sur "Scène1" en haut à gauche de votre écran 20.Insérez un nouveau calque, menu "Insertion > Calque" 21.Double cliquez sur le nom du calque par défaut, nommez le "boutons" 22.Glissez ce calque au-dessus des autres 23.Cliquez sur l'image 1 du calque "boutons" 24.Glissez les symboles bouton "pause" et "play" sur la scène 25.Cliquez le bouton "pause" pour le sélectionner 26.Ouvrez la fenêtre "Actions", menu "Fenêtre > Actions", puis l'onglet "Actions sur objets" 27.Cliquez sur le menu "Actions" (sous "Actions de base") pour le déplier 28.Choisissez l'action "stop", glissez l'action "stop" dans la partie droite de la fenêtre, le code correspondant à l'action s'écrit automatiquement 29.Cliquez le bouton "play" sur la scène pour le sélectionner 30.Choisissez l'action "play", glissez l'action "play" dans la partie droite de la fenêtre, le code correspondant à l'action s'écrit automatiquement 31.Compilez, menu "Contrôle > Tester l'animation" et testez les boutons "stop" et "play"
FormationFlash 5 Menu 1.Adresses Internet 2.Drag & Drop 3.Récupérer la position d'un objet 4.Modifier la position d'un objet 5.Test de collision entre 2 objets 6.Changer un objet de couleur 7.Dupliquer un objet 8.Changer le curseur de la souris 9.Charger une animation par l'intermédiare d'une autre animation 10.Contrôler une animation 11.Déplacer un objet avec les flèches1.Adresses Internet www.flashhouse.net français www.flash-france.com français www.flashxpress.net français www.flashfr.free.fr français www.yazo.net français www.virtual-fx.net anglais www.actionscripts.org anglais www.flashkit.com anglais http://flash5actionscript.com2.Drag & Drop 2.1.Créez un bouton 2.2.Créez un movie clip contenant le bouton créé précédemment 2.3.Appliquez les actions suivantes au bouton : on (press) { StarDrag(); } on (release) { stopDrag(); }3.Récupérer la position d'un objet 3.1.Donnez un nom au movie clip contenant le bouton 3.2.Créez 2 zones de texte de type "Dynamic Text" 3.3.Donnez un nom à ces 2 zones (par exemple x et y) ère 3.4.image de la scène :Mettre le code suivant dans la 1 x = carre._x; y = carre._y;3.5.Ajoutez une image vide à la scène 4.Modifier la position d'un objet carre._x = 10 On peut aussi utiliser d'autres propriétés telles que_alpha,_rotation,_visible, etc… 5.Test de collision entre 2 objets 5.1.Créez un movie clip correspondant à la zone valide pour poser l'objet et lui donner un nom 5.2.Créez une zone de texte de type "Dynamic Text", donnez lui un nom (par exemple "/:resultat") 5.3.Appliquez les actions suivantes au bouton : on (press) { StarDrag(); }
Annexe
on (release) { stopDrag(); if(this.hitTest(_root.nom_2_la_zone)) { /:resultat=true }else { this._x= /:x this._y= /:y /:resultat=false } }6.Changer un objet de couleur 6.1.Créez un movie clip contenant l'objet à modifier et lui donner un nom (par ex "zone") 6.2.Créez un bouton et lui appliquer le code suivant : on (press) { nouvelle_couleur.setRGB(0x00CC00); }ère 6.3.frame de la scène principale le code suivant :Mettre sur la 1 nouvelle_couleur = new Color(zone); Remarque: la commande setRGB ne fonctionne qu'avec des valeurs hexadécimales 7.Dupliquer un objet 7.1.Créez un movie clip et lui donner un nom (par ex "zone1") ère 7.2.Mettez sur la 1frame de la scène principale le code suivant : duplicateMovieClip ("Nom_de_movieclip", "Nom_de_movieclip2", 1) 7.3.Rajoutez les 2 lignes suivantes pour décaler le nouvel objet : zone2._x =zone1._x-20 zone2._y =zone1._y-20ère Si vous voulez dupliquer 1 objet 20 fois, changez le code de la 1image par celui-ci : i = 2 for (i; i<23; i++) { duplicateMovieClip("zone1", "zone"+i, i); this["zone"+i]._x= this["zone"+(i-1)]._x+10; this["zone"+i]._y= this["zone"+(i-1)]._y+10; }Dans cet exemple i est incrémenté de 1 jusqu'à ce qu'il soit égal à 22. L'objet est donc reproduit 20 fois et décalé de 20 à droite et vers le bas. Les objets créés ont pour nom : zone2, zone3,… "zone"+i…, zone22. 8.Changer le curseur de la souris 8.1.Créez un movie clip 8.2.Appliquez lui le code suivant onClipEvent (load) { startDrag(); Mouse.hide(); }Remarque: Mettre le centre du movie clip dans le coin haut gauche de l'animation pour que le pointeur de la souris pointe sur le centre du movie clip. 9.Charger une animation par l'intermédiaire d'une autre animation 9.1.Sauvegardez une animation et sauvegardez la (par exemple "anim2.fla") ème ère 9.2.Sauvegardez une 2animation qui va appeler le 1et sauvegardez la (par exemple "anim1.fla") ère 9.3.image de la scène principale de l' "anim1.fla", tapez :Sur la 1 loadMovieNum ("anim2.swf", x); x variant de 0 à +Inf par exemple :
loadMovieNum ("anim2.swf", 0);//anim2.swf va remplacer anim1.swf loadMovieNum ("anim2.swf", 1);//anim2.swf va s'ouvrir par dessus anim1.swfPour décharger une animation utiliser la commande suivante : unloadMovieNum (x);//x prend la valeur de la couche sur laquelle l'animation a été appeléeIl est aussi possiblede charger une animation sur un movie clip contenu dans une autre animation. Au lieu d'utiliser un Level (niveau) on utilise un Target (cible). Le code devient : loadMovieNum ("anim2.swf","nom_du_movieclip");Pour décharger : unloadMovieNum ("nom_du_movieclip"); Remarque: Mettre le centre du movie clip dans le coin haut gauche pour qu'il se superpose correctement à l'animation. 10.Contrôler une animation Il est possible de contrôler un movie clip contenu sur la scène principale, depuis un autre movie clip ou depuis un bouton. Pour cela on utilise la commandetelltarget ("nom_du_movieclip"); 10.1.Créez 2 boutons 10.2.Créez un zone de texte de type"Dynamic Text", donnez lui un nom (par ex "/:resultat") 10.3.Créez un movie clip contenant à l'image 1: /:resultat = true; stop (); et à l'image 5 : /:resultat = false; stop ();10.4.Glissez le movie clip de la bibliothèque sur la scène et donnez lui un nom (par ex "anim") er 10.5.bouton le code suivant :Mettez sur le 1 on (press) { telltarget("anim") { gotoAndStop(1) } } ème et sur le 2le code suivant : on (press) { telltarget("anim") { gotoAndStop(5) } }11.Déplacer un objet avec les flèches du clavier 11.1Créez un nouveau clip correspondant à l'objet à déplacer 11.2Cliquez droit dessus et insérez le code suivant : onClipEvent(load) { deplacement = 10; } onClipEvent(enterFrame) { if (Key.isDown(Key.RIGHT)) { this._x+= deplacement; } if (Key.isDown(Key.LEFT)) { this._x-= deplacement; } if (Key.isDown(Key.DOWN)) { this._x+= deplacement; } if (Key.isDown(Key.UP)) { this._x-= deplacement; } }
