LE FLASH

Qu'ès aquò ?

Le Flash est un format d'animation essentiellement optimisé pour le web ; il se présente sous forme de fichiers *.swf lisibles soit avec un lecteur isolé (le Standalone Flash Player) soit avec un navigateur équipé du plugin Flash. Ce sont des animations de graphismes vectoriels (voir chapitre 8 section informatique). Le Flash permet également la création de boutons, de champs de texte, etc. bref tout pour réaliser diverses choses allant de la petite animation d'intro au film délirant (genre www.lapatate.com) en passant par le jeu complet (genre www.uzinagaz.com). Les animations Flash, exportables sous divers formats (*.swf, *.exe, *.avi, suite d'images de divers types, etc.) se créent grâce au logiciel Macromedia Flash © qui enregistre les projets dans des fichiers *.fla. Nous étudierons dans cet article la version 5 (en anglais c'est tellement plus fun) ; ce logiciel étant payant, je ne puis vous fournir de lien, désolé.

Logo Flash 5

L'INTERFACE

L'interface de Flash est, comme tous les logiciels Macromedia, un peu spéciale à prendre en main. On y retrouve les traditionnels menus en haut, une barre d'outils à la Paint sur la gauche et des panneaux sur la droite. Ces derniers peuvent contenir plusieurs onglets qui peuvent eux-mêmes êtres isolés et déplacés d'un panneau à l'autre. Le nombre de panneaux qu'il est possible d'afficher et les outils bien pratiques qui s'y trouvent font qu'il est plus agréable de travailler sous Flash avec une haute résolution genre 1280x1024 ; à défaut, mettez-vous en 1024x768 mais pas en 800x600 : c'est invivable :-). Faites Window > Panels puis choisissez les panneaux les plus importants, à savoir ceux qui sont déjà là auxquels il faut ajouter le panneau "align" et le panneau "scenes". Vous aurez également besoin du panneau de la bibliothèque mais celui-ci est facilement accessible grâce à la combinaison CTRL+L (L comme Library). Pour éviter de perdre bêtement votre superbe disposition de panneaux pour une raison XYZ, faites Window > Save Panel Layout, tapez un nom bidon et hop! Flash planque la disposition des panels dans un fichier facilement rechargeable à partir de Window > Panels Sets. Mais le plus important dans Flash est bien sûr la fenêtre principale au milieu qui contient la timeline et la zone de travail.

Chaque petit rectangle de cette timeline représente une frame, c'est-à-dire une image de l'animation. Pour savoir à quoi correspond une seconde, regarder le X fps : il indique le nombre de frames lues par seconde (par défaut 12.0 fps). Posez votre curseur sur la frame n° 13 et faites F5 (pour qu'il allonge la première frame jusqu'à la n°13) : le temps affiche 1.0s.

Un projet Flash est défini par sa résolution, son nombre de frames par seconde et sa couleur de fond ; faites un clic droit dans la zone de travail et modifiez les "Movie Properties" (propriétés du film) :

Movie Properties

Travaillez de préférence en pixels, à moins que votre projet ne soit destiné à impression. Plus le "Frame Rate" de l'animation est élevé, moins l'animation est saccadée mais plus la taille du projet augmente.

FONCTIONS DE DESSINS

Le dessin vectoriel est très différent du dessin bitmap. On peut facilement tracer une courbe à main levée : prenez l'outil crayon Crayon puis activez l'option smooth (=lisse) : Options Tracez ensuite un ersatz de S à main levée (ou plutôt à souris levée) :

Courbe bitmap Courbe vectoriel
Votre tracé avant que vous n'ayez relâché le bouton de la souris Le même tracé après que Flash ait appliqué son effet smooth ; c'est beau le vectoriel :-)

De même, la courbe reste sélectionnable et modifiable grâce à l'outil sélection pointeur qui comprend des options d'agrandissement, de rotation, d'inclinaison, etc. Le panneau "Info" vous donne la longueur et la hauteur de la sélection ainsi que sa position en coordonnées X et Y. Cliquez sur le petit carré blanc pour exprimer ces mêmes coordonnées en fonction du centre de la sélection et non du coin supérieur gauche. Vous pouvez également y voir les paramètres de la couleur sélectionnée avec l'outil "dropper" dropper qui permet de repiquer n'importe quelle couleur sur tout l'écran (code RVB et transparence alpha exprimée en pourcentage) ainsi que les coordonnées du curseur.

Info

L'outil Colors distingue couleur de trait (traits, contours des formes, crayon) et couleur de remplissage (intérieur des formes, caractères) :

Colors
La double-flèche permet d'inverser facilement ces deux couleurs.

Le panneau Stroke permet d'appliquer différents types et différentes épaisseurs à toutes les courbes sélectionnées ; le panneau fill peut créer aussi bien des couleurs unies que des dégradés linéaires ou radiaux et des textures (parmi les bitmaps de la bibliothèque) :

Fill

CALQUES

Flash gère un système de calques, ce qui évite que deux objets graphiques n'interfèrent de façon non-désirée. Cliquez sur cette petite icône pour ajouter un calque dans la timeline. Vous pourrez le renommer, lui attribuer une couleur dans le cas où vous choisiriez de n'afficher que les contours genre "fil de fer" (il suffit de cliquer sur le petit carré coloré). Les calques sont ordonnés du haut vers le bas et chaque calque couvre le suivant ; ils peuvent être déplacés par simple cliquer-déplacer ; celui sur lequel vous travaillez est en noir ; vous pouvez aussi verrouiller (pour éviter toute modification accidentelle) ou rendre invisible (pour mieux travailler) les calques de votre choix.

Calques

Calques en fil de fer

Calque masqué

BIBLIOTHÈQUE

La bibliothèque vous permet de stocker des "objets" réutilisables à l'infini. Dessinez votre truc, sélectionnez-le et faites F8 pour le transformer en objet de votre choix (animation, graphique ou bouton). Cela permet d'utiliser de nombreuses fois un même graphique (par exemple) et de n'avoir à le modifier qu'une fois pour qu'il soit modifié partout où il est inséré. Ctrl+F8 permet de créer un objet ; faites Ctrl+E pour sortir du mode d'édition de l'objet ; Ctrl+R permet d'importer des objets (bitmaps, JPEG, vidéos, sons, etc.). Pour insérer un objet depuis la bibliothèque, procédez par cliquer-déplacer.

Library = bibliothèque

ANIMATION : LE MOTION TWEEN

Nous arrivons désormais au casse-tête du débutant : le Motion Tween (ou "interpolation d'image" pour les maudits francophones). Absolument indispensable pour réaliser une animation digne de ce nom. Un exemple pour comprendre :

Créez un nouveau fichier avec un objet graphique quelconque stocké dans la bibliothèque et positionnez cet objet sur la frame 1 :

Etape 1

Créez une nouvelle frame en position 24 (cliquez sur la frame n°24 et faites F6 ; la frame crée est une copie de la précédente (la n°1) qui est alors allongée pour occuper les frames 1 à 23) ; sur la frame n°24, modifez les paramètres de ce même objet graphique : position, angle, taille et/ou teinte différente

Etape 2

Cliquez avec le bouton droit sur le gros paquet de frames et faites "Create Motion Tween"

Etape 3

Si vous vous retrouvez avec quelque chose de similaire à cette capture d'écran (particulièrement les frames violettes avec la flèche), c'est que vous avez réussi votre premier motion tween ; faites maintenant Ctrl+Entrée pour visionner l'animation dans une fenêtre à part, style "Standalone Flash Player" ou bien utilisez les boutons de lecture (Window > Toolbar > Controller).

CONSEIL : le Motion Tween s'applique généralement à tous les objets présents sur le calque aussi il est conseillé de construire votre animation avec 1 Motion Tween = 1 calque.

Ce Motion Tween s'appelle ainsi car il s'agit d'un tweening de type motion mais il existe aussi le shape tweening qui permet d'animer une déformation :

Créez un calque avec… RIEN dessus si ce n'est une grande frame, sélectionnez-la, allez dans le panneau "Frame" et précisez "Tweening: Shape" ; la frame devient verte avec une flèche malgré l'absence de seconde frame :

Etape 1

Ajoutez ensuite une copie de cette frame juste derrière la flèche (F6) et déformez, déplacez, tournez, changer les couleurs de votre objet :

Etape 2

Vous pouvez immédiatement constater en baladant votre curseur sur les différentes frames que l'interpolation est déjà effectuée ; en mettant en lecture, on obtient une déformation, un déplacement et un changement de couleur (enfin dans cet exemple) progressif.

Etape 3

Déjà bien pratique tout cela, n'est-ce pas ? Aller encore mieux : nous allons programmer un chemin ( = path) que devra suivre un objet graphique :

Créez un calque avec un objet graphique de la bibliothèque dessus ; allongez cette frame et rajoutez-en une copie juste après, comme dans les deux motion tween précédents ; cliquez ensuite avec le bouton droit sur le calque et sélectionnez "Add Motion Guide" ; un ersatz de nouveau calque apparaît alors au-dessus ; dessinez-y le chemin que devra parcourir le centre de gravité de l'objet avec les outils lignes sélection et crayon. Sur la première frame, positionnez l'objet graphique à l'extrémité du "path" ; cette tâche est facilitée par la fonction "snap to objects" snap qui permet d'accrocher facilement le centre de l'objet. Faites de même sur la dernière frame avec l'objet et l'autre extrémité.

Etape 1

Vous pouvez choisir d'orienter l'objet au chemin grâce à l'option "Orient to path" dans le panneau frame :

Frame

Vous obtenez le résultat suivant : l'objet suit rigoureusement le trajet indiqué qui n'apparaît pas lors de l'exportation finale.

Etape 2

Si tout cela vous paraît un peu confus, vous pouvez télécharger les fichiers sources (en *.fla) des 3 exemples précédents : Exemple 1 | Exemple 2 | Exemple 3

LE TRACE BITMAP

L'outil Trace bitmap permet de convertir de façon plus ou moins réussie une image traditionnelle (bitmap, JPEG, GIF, etc.) en graphisme vectoriel sans avoir à le décalquer ou recréer soi-même. Importez un fichier image, insérez-le sur un calque quelconque, faites Modify > Trace Bitmap et bidouillez les complexes options qui vous feront passer d'un résultat horrible à un résultat potable :-). Selon la taille et la complexité de l'image à transformer, le traitement peut être plus ou moins long et plus ou moins efficace (évitez les visages humains ;-) ).

Trace Bitmap

LES BOUTONS

Parmi les 3 types d'objets que Flash est capable de générer, on distingue le graphique simple, l'animation (qui est une sorte d'animation dans l'animation, je vous laisse tester car c'est assez simple) et le bouton. Un bouton est un objet en 4 parties (up, over, down et hit) auquel on peut associer des actions dans le cadre d'une animation Flash. Pour créer un bouton, faites F8 puis sélectionnez button. Éditez votre objet ; la partie UP correspondà l'aspect normal du bouton, OVER est l'aspect du bouton quand le curseur est passe dessus, DOWN est l'aspect du bouton quand le bouton gauche de la souris est enfoncé dessus, HIT est l'aspect du bouton quand on vient de cliquer dessus. Il est facultatif dans le cas où le bouton est conduit à disparaître après activation. ; par exemple, ceci :

Schema du bouton

donne cela :

LES ACTIONS

Les actions sont essentielles pour éviter que votre animation ne tourne inopinément en boucle ou pour créer des fonctions de lecture et bien plus encore quand on s'y connaît ; on peut attribuer des actions soit à une frame, soit à un bouton ; le langage lui-même s'apparente à du JavaScript dans sa syntaxe mais il suffit ici de choisir les actions dans la liste et d'indiquer les paramètres. Commençons par la plus banale des actions : STOP. Double-cliquez sur une frame où vous souhaiteriez que votre animation fasse une pause et double-cliquez sur STOP ; un signe alpha s'ajoute alors à la frame dans la timeline pour indiquer que vous y avez mis une action. À la lecture, votre animation s'arrêtera sur cette frame.

FrameActions

Supposons que vous vouliez donner le choix à l'utilisateur entre "reprendre la lecture", "rembobiner", "se rendre à un endroit précis" et "aller sur un site web" ; créez d'abord des boutons pour chacune de ces actions, insérez-les, cliquez droit sur chacun d'eux et attribuez-leur les actions correspondantes :

ObjectActions

ASTUCES DIVERSES

Pour pouvoir lire un *.swf isolé, vous avez besoin soit du Standalone Flash Player soit d'un navigateur (Internet Explorer, Mozilla, etc.) avec le plugin adapté ; celui-ci est disponible là : version Mozilla/Opera/Netscape/Compuserve | version Internet Explorer/AOL

Créer une présentation Flash (*.exe) : exportez votre animation en *.swf et ouvrez-la avec le Standalone Flash Player (ceci se fait automatiquement si vous n'avez pas trop trafiqué votre bécane et que vous avez installé tout ce qui rapporte à Flash) ; faites Fichier > Projection et enregistrez votre fichier ; vous obtenez alors un exécutable Flash (en fait juste le standalone flash player avec le *.swf intégré).

Récupérer le *.swf à partir d'une présentation Flash *.exe : utilisez pour cela le exe2swf ;-)

Casser une protection sur un swf ; lorsque vous exportez votre animation en *.swf, vous avez une petite option protection pour que personne ne réimporte votre animation dans un projet *.fla ; eh bien, elle n'est pas très conseillée car voici la méthode pour casser la protection d'un swf (testé avec flash 5) : dans le cas d'une protection sans mot de passe, ouvrez le *.swf protégé avec un éditeur hexadécimal, retranchez 2 à la valeur du 4ème octet et supprimez les octets aux offsets 19 et 1A. S'il y a un mot de passe, retranchez 21 au 4ème octet et virez les octets des offsets 1A à 3A inclus. Enregistrez le fichier et retentez l'importation : normalement ça marche :-)

<< Article précédent      Article suivant >>

↑      Page d'accueil

Aujourd'hui nous fêtons l'anniversaire de raiders qui a 31 ans !
Notre site accueille 604 membres qui ont posté pas moins de 4886 messages dans 658 topics : - )
Notre dernier membre inscrit est ch-Bilal.
Aucun membre connecté.
Jumper :
Sauf mention contraire, les articles sont sous licence by-nc-sa. Les images appartiennent à leurs propriétaires respectifs.