LES BASES

Bonjour à tous, ce n’est pas vraiment un tutoriel, mais plutôt un mode d’emploi. Un guide pour utiliser le logiciel FLASH CS3.

Il en existe des milliers sur internet, n’hésitez pas à aller faire un tour mais le meilleur moyen d’apprendre est d’utiliser l’aide de FLASH

C’est parti !!

Le commencement

Comme je ne suis pas un programmeur, bien que nous serons obligé d’y passer, je choisis de créer un fichier flash en AS2. Utilisez l’aide pour mieux appréhender le logiciel.

AS2, AS3… c’est quoi ? C’est un langage de programmation développé par Adobe. L’AS3 est évidemment la suite et ce langage est plus optimisé dans les performances. Cependant il est vraiment dédié aux programmateurs, ceux qui feront une formation. Pour ma part, je n’utilise que très peu de code, et l’AS2 est beaucoup plus facile à manipuler…

Le commencement

Nous sommes dans un environnement de création Adobe. Au même titre que Photoshop ou Illustrator. Flash utilise la fonction vectorielle lorsque l’on créer des éléments.

On y trouve le menu de création sur notre gauche. Des outils peuvent en cacher d’autre, ainsi des outils avec une petite flèche dans le bas inférieur gauche indique qu’il y a un outil de la même famille de disponible. Exemple avec l’outil de transformation libre :

Les outils

On peut aisément modifier ce menu et afficher les outils que l’on utilise le plus par exemple. Menu “Modifier (Menu supérieur) > Personnaliser le panneau outils”.

Certain nom d’outils ne sont toutefois pas très équivoque.
L’outil encrier désigne les contours d’un objet. Vous créer un rectangle et vous voulez mettre un contour, c’est cet outil que vous allez utiliser.

L’outil pot de peinture sert lui à remplir d’une couleur un objet fermé. Je précise fermé car si vous dessinez vous même un objet, avec l’outil “plume” ou encore l’outil “ligne” mais que vous ne fermez pas cet objet, l’outil “pot de peinture” ne pourra être utilisé.

Les formes ouvertes et fermées

Gestion de la scène, qui se trouve en haut. Il y a des numéros, 1 5  10 etc… Cela représente le nombre d’images dans notre scène, appelée “séquence 1”. Le point est blanc, indiquant que c’est vide, et se trouve sur le “Calque 1”. Dessinez une forme sur votre scène, ce point va devenir noir, indiquant qu’une forme, ou objet se trouve sur ce calque.

Les calques (Layers) vous aident à organiser des projets complexes en Flash. L’utilisation des calques a plusieurs avantages. Vous pouvez:

  • dessiner et éditer des objets dans un calque sans toucher les objets dans un autre calque.
  • verrouiller les calques (pour protéger les objets de modifications indésirables)
  • cacher les calques, les rendre visible (et voir les objets qu’ils contiennent) ou ne rendre visible que les contours des objets.

Les options calques font partie du Scénario (Timeline), c.a.d. le déroulement de votre “movie” dans le temps, image par image.

Les calques dans CS3Bibliothèque

Dans cet exemple je dispose de trois calques que j’ai pris soin de nommer. En cliquant sur la “frame”, c.a.d l’image 1 du calque “Étoiles”, le logiciel sélectionne tous les objets présent sur ce calque, et sur l’image 1. On peut de plus constater deux sortent d’objet différents par la façon dont flash les identifient.

Entourés d’un cadre bleu, les graphiques ou clips.
En vert, couleur qui est définie dans le calque Étoiles, Flash nous indique que nous sommes en présence d’un objet de création non transformé. Cet objet n’apparait pas dans notre bibliothèque.

Ajouter et supprimer des calques

Un nouveau document Flash ne contient qu’un seul calque, ce qui est rarement suffisant. Il y a trois façons d’ajouter un calque :

  • Insert (Insérer) -> Timeline (Scénario) -> Layer (Calque)
  • Cliquer sur l’icône calque (en bas à gauche du Scénario)
  • Clic-droit sur un calque existant puis choisir Insert Layer (Ajouter un calque)

Afficher les objets d’un calque sous forme de contours

  • Cliquez sur le rectangle à droite du nom du calque. Lorsque le rectangle apparait “vide” vous ne verrez que les contours des objets du calque.
  • Vous pouvez modifier la couleur du contour en double-cliquant sur ce rectangle.

Verrouiller et masquer les calques

Cliquez les points sous l’icône correspondante aux fonctions masquer/verrouiller/afficher dans le panneau pour choisir le mode d’affichage d’un calque. Cliquez sur l’icône pour modifier le mode d’affichage de tous les calques en même temps.

Astuce : Gardez tous les calques verrouillés et ne déverrouillez que le calque que vous voulez modifier (un calque à la fois). Cela vous aidera à éviter de sélectionner et modifier par erreur les objets qui se trouvent sur les calques supérieurs.

Déplacer et arranger les calques

Pour modifier l’ordre des calques choisissez-les avec la souris et glissez-les vers le haut ou vers le bas de la liste. Le positionnement des calques a un effet sur l’ordre d’affichage des objets. Par exemple, si un objet est caché derrière un autre alors qu’il doit passer devant, glissez le calque de l’objet en question vers le haut.

L’ordre dans lequel les objets sont dessinés est défini dans File Menu -> Publish Settings (paramètres de publication).

Déplacer les objets d’un calque vers un autre

Si vous souhaitez déplacer (ou copier) des objets présents dans un calque vers un autre calque il faut utiliser le collage. De cette façon vous pourrez coller vos objets dans le nouveau calque à la même place que celle qu’ils avaient dans le calque d’origine. Cela permet donc de modifier l’organisation interne des calques sans avoir à replacer les objets.

Pour ce faire, il vous faut:

  • Sélectionner l’objet à déplacer ou vous pouvez aussi sélectionner le calque pour ensuite déplacer tous les objets y figurant.
  • Ouvrir le menu contextuel (clique droit) -> couper [ctrl+x] ou copier [ctrl+c].
  • Sélectionner le calque dans lequel vous désirez placer les objets puis ouvrir le menu contextuel. Vous avez deux possibilités:
  1. Pour coller la sélection à la même place choisir “coller en place” [ctrl+shift+v].
  2. Pour coller la sélection au centre de l’espace de travail choisir “coller au centre”[ctrl+v].

Attention, si les objets que vous désirez changer de calque sont associés à un code ActionScript, n’oubliez pas de déplacer également le code.

Types de calques

Lorsque l’on crée un calque, celui-ci se met automatiquement sous la forme d’un calque “normal”. Cependant, il est possible de créer plusieurs types de calques:

  • Normal
  • Masque (mask): ce calque peut se placer au-dessus d’un autre calque qu’il va dissimuler en créant un trou laissant apparaître l’autre calque. Ce trou prend la forme du contenu du calque de masque. “Un élément de masque peut être une forme remplie, un texte, une occurrence de symbole graphique ou un clip. Vous pouvez grouper plusieurs calques sous un calque de masque unique pour créer des effets élaborés.” (Adobe).
  • Dossier (folder): cette option permet de créer un dossier dans lequel il sera possible de regrouper plusieurs calques (voir ci-dessous).
  • Guide : ce calque permet de créer une petite animation. Dans ce cas, un objet créé pourra suivre un chemin en fonction d’un guide défini sur le calque guide.

Pour changer le type du calque, il suffit d’aller dans propriétés (Properties).

Organiser les calques en dossiers

Une fois que vos documents deviennent complexes, vous pouvez les arranger en dossiers, par exemple, un dossier par tâche : objets statiques, animations, arrière-plans, etc.

Créer un dossier de calques 

  • Cliquer l’icône “dossier” dans le menu d’édition (3e objet)

ou

  • Insert -> Timeline -> Layer Folder (Insértion -> Scénario -> Dossier de calques)

Vous pouvez de suite réarranger l’ordre des dossiers de calques, les verrouiller ou les masquer comme avec les calques.

A un moment donné il devient difficile de travailler avec tout les objets dans le scénario de base. Il vaut la peine d’organiser et planifier le projet et de regrouper les clips (symboles de clip).

Séquences

Lorsque vos projets deviennent plus complexes et longs, il est recommandé de les décomposer en plusieurs séquences (scènes). Si vous êtes novices, vous pouvez l’éviter pour l’instant, mais il est bien de savoir à quoi sert les séquences. A noter aussi que les séquences “se jouent” dans l’ordre que vous définissez.

Insérer une nouvelle séquence (Scène)

  • Menu Insert -> Scène (Insertion -> Séquence)

Renommer / réarranger les séquences

  • Menu Window -> Other Panels -> Scene (SHIFT-F2) (Fenêtre -> Autres Panneaux -> Sequence)
  • … puis glissez la séquences vers le haut ou vers le bas
  • Pour renommer une séquence double-cliquez le nom de la séquence dans ce panneau.

Naviguer entre les séquences

Soit par le panneau Scenes (Séquence), soit par le menu Edit (Édition) en bas du Timeline. S’il n’est pas affiché : Window->Toolbars->Edit (Fenêtre -> Barre d’outils -> Éditer)

Un avantage de l’utilisation des séquences est qu’elles peuvent être testées une à la fois.

Transformer un objet

Lorsque que vous dessinez un objet sur votre scène, vous pouvez le transformer en graphique, clip ou bouton. Pour se faire sélectionnez l’objet puis Modification>Convertir en symbole [F8].

Un clip ou appelé MovieClip est manipulable en programmation ActionScript [F9] car dans les propriétés il est “nommable” (Occurrence de nom). Un symbole graphique non.

Globalement quand vous réalisez un travail sous Flash il faut décomposer le résultat que vous visez en MovieClips et graphiques sur papier. Ensuite il faut créer les différents éléments dans la bibliothèque puis les disposer sur la scène.

Un graphique est en général une forme vectorielle avec une couleur ou un dégradé. Un tel graphique peut aussi contenir une forme vectorielle rempli d’une image BitMap un peu sous le principe du placage de texture en 3D.

Un MovieClip peut contenir un autre MovieClip ou un graphique. Il est obligatoire pour faire une interpolation de mouvement d’agir dans un MovieClip sur des  graphiques ou sur un autre MovieClip.

Essayez d’animer directement une forme vectorielle sur la scène en interpolation de mouvement, Flash transformera la forme en un graphique et l’ajoutera à la bibliothèque sous le nom d‘interpolation X. La bibliothèque deviendra rapidement un “foutoir” difficilement gérable.

L’intérêt de toujours créer des symboles dans la bibliothèque c’est de pouvoir les utiliser X fois pendant l’animation sans augmenter le poids du fichier swf. De plus on change dans la bibliothèque un des éléments MovieClip ou graphique, toutes les occurrences (copie) dépendantes sur la scène sont mise à jour.

Modification du scénario

Nous pouvons insérer des images dans notre scénario. En cliquant sur l’image 2 de notre scène, qui devient blanche puisque qu’aucun objet si trouve, puis avec clic droit et en utilisant les options suivantes:

  • Insérer une image (raccourci F5). Cela permet d’ajouter une image non clé. Si vous modifiez l’image 1, l’image 2 sera impactée.
  • Insérer une image clé (raccourci F6). On ajoute une image clé, indépendante de l’image 1. Si vous modifiez l’image 1, l’image 2 ne sera pas impactée.
  • Insérer une image vide (raccourci F7). On ajoute une image vide, dénuée d’objet.

Si je joue sur chacun de mes calques avec l’ajout d’images, j’obtiens donc un scénario de 4 images…

scénario de quatre images

Afin de visualiser notre animation, utilisez le raccourci “ctrl + entrer” de votre clavier ou menu supérieur : Contrôle > Tester l’animation.
Voilà le résultat :