Formadis - Flash - Cours 1

François Villemonteix

Sujets

• ordinateur

Informations

• Publié par: Thiwyer
• Nombre de lectures: 61
• Langue: Français

Extrait

Formation FLASH

Flash –Etape 1 Création d’une animation simple - fonctions de base ère L’objectif de cette 1étape est de se familiariser avec : -Les éléments importants qui constituent l’interface (scène, boîte à outils et scénario) -Les notions d’image-cléet d’interpolation -L’exportation d’une animation Nous expliciterons ces concepts au fur et à mesure de la construction d’une animation simple, ce qui vous permettra de mieux les comprendre. L’animation que vous allez concevoir est très simple : elle présente une balle de couleur orange et bordée de jaune, qui rebondit sur une scène verticale. La création d’une animation nous amène à distinguer deux temps : -laconception, tout d’abord qui inclut la création des objets et leur animation et -lapublication, ou « exportation », qui génère un fichier autonome exécutable ou lisible dans un navigateur internet. ère 1 partie: Création de l’animation 1.Présentation de l’interface de Flash 5 Le logiciel fait apparaître a.Unscénariodans lequel sera agencé le déroulement de l’animation b.une surface blanche :la scène principalesur laquelle vous allez disposer les éléments de l’animation. c.Unebarre d’outilsqui vous permettra de dessiner les différents objets 2.Réglage des propriétés de l’animation Vous aller dimensionner l’animation et affecter une couleur de fond à l’ensemble de l’animation a.Allez dans le menuModification puisAnimation(ou appuyez sur Ctrl + M) b.Dans la fenêtre effectuez les réglages suivants : •Cadence : 12 im/sec il s’agit de la vitesse d’exécution de l’animation exprimée en image/seconde. Plus la valeur est grande, plus l’animation est fluide, mais elle sera d’un poids plus élevé) •Dimensions : elle est exprimée en pixels •Définissez une couleur d’arrière-plan : ici bleu foncé

François VILLEMONTEIX -PAGE 1

Formation FLASH

c.Validez, enregistrez tout de suite votre document sous le nom « balle » (vous allez comprendre vite pourquoi !). Il portera l’extension.fla, format natif de Flash. 3.Création de la balle a.Vous allez définir les couleurs du cercle •couleur de la bordure •couleur de remplissage b.En utilisant l’outilovalede la barre des outils, tracez un cercle qui occupera la partie basse et gauche de l’animation, comme ci-dessous Vous remarquerez que la première division de la première ligne du scénario fait maintenant apparaître un point noir. Il s’agit d’une image-clé, la première du calque1. Une image-clé, c’est ! comme la feuille de dessin du dessin animé qui se superpose à une autre feuille de dessin, et ainsi de suite. Le dessin que vous venez de faire appartient au calque1. Il est donc possible d’ajouter d’autre calques, indépendants les uns des autres. C’est très pratique pour travailler élément par élément. 4.Création du mouvement de la balle : l’animation Principe : l’animation dans la flash peut se réaliserimage par image, comme ! dans un dessin animé. Il suffirait de créer une nouvelle image clé, voisine de la première et de déplacer un tout petit peu la balle, puis une troisième, et ainsi de suite. A la lecture on aurait l’illusion d’un déplacement de la balle avec une certaine fluidité.Ce principe est trop long et trop coûteux, car le fichier généré serait lourd. Flash offre la possibilité de faire beaucoup plus vite et surtout plus léger: il suffit de déterminer la position finale de la balle sur le scénario et Flash va calculer les positions intermédiaires, entre la position de base et la position finale. On crée ce qu’on nomme uneinterpolation.

François VILLEMONTEIX -PAGE 2

Formation FLASH

C’est ce principe d’animation que nous allons utiliser tout de suite. a.Dans le scénario, double-cliquez sur le nom «calque 1» et écrivez à la place «balle» b.Faites un clic-droit sur la première image-clé du calque «balle» (elle contient un point noir) et choisissez «créer l’interpolation de mouvement» c.Cliquez maintenant sur l’image 10 du calque «balle» qui pour l’instant est vide d.Vous allez y créer une nouvelleimage-clé, pour cela, appuyez sur la toucheF6du clavier de l’ordinateur (ou menuInsertion>Image Clé). Les images intermédiaires sont de couleur bleue et une flèche horizontale les traverse. La balle que vous avez dessinée apparaît sur la scène entourée d’un cadre de sélection bleu. e.L’image-clé10 doit correspondre au dessin de la balle déplacée vers le haut. Pour cela, déplacez la balle vers le haut de l’animation (cliquer-glisser) astuce : pour être sûr que la trajectoire soit verticale, maintenez la touche shift enfoncé pendant le déplacement L’animation n’est pas terminée : il faut que la balle retombe exactement dans la même position qu’à limage- clé n°1. Pour être sûr qu’il en soit ainsi, vous allez copier l’image 1 et la coller sur l’image n°20 : f.Cliquez droit sur l’image n°1 et choisissezcopier les images. Cliquez droit sur l’image n°20 et choisissez coller les images. Vous pouvez d’ores et déjà tester le résultat dans la fenêtre de travail en appuyant sur le bouton Entrée : la barre de lecture défile dans le scénario et lit les images une à une. Il est cependant préférable de tester l’animation avec « player » Flash en effectuant un aperçu: Pour cela : MenuContrôlepuisTester l’animation(ou mieux : raccourci clavier :Ctrl + Entrée) Pour la diffusion de votre animation (insertion sur une page web ; animation exécutable de manière autonome…) il est nécessaire d’effectuersa publication.

François VILLEMONTEIX PAGE 3

Formation FLASH

ème 2 partie: Publication de l’animation L’animation a été testée, elle fonctionne, elle peut être maintenant publiée. Dans cette leçon nous n’étudierons que la publication au format .swf (format flash). Elle permet de générer un fichier lisible par le lecteur Flash Player. -SélectionnerFichierpuisParamètres de publication -Selon le nom de votre fichier de travailflash(« balle.fla » dans notre exemple), la proposition vous est faite de publier aux différents formats en conservant ce nom. Si vous souhaitez modifier le nom il suffit de décocher l’optionUtiliser les noms par défautet de modifier le nom de votre future publication. Nous laisserons cette option cochée -Décochez l’option format Html et conservez l’optionformat Flash(cochée par défaut) -Sélectionnez l’onglet Flash, seul disponible maintenant. Les différentes options disponibles ici ne nécessitent pas de réglage particulier pour ce qui nous concerne -Cliquez surPublier -Fermez la fenêtre et quittez Flash -Ouvrez le dossier dans lequel vous avez enregistré votre animation « balle.fla », vous devez avoir un autre fichier «balle.swf» -Double-cliquez sur ce fichier, l’animation se lance dans le lecteur Flash Player.

François VILLEMONTEIX -PAGE 4