Flash MX - AFCI Newsoft

Transcription

Macromédia
Flash MX
AFCI-NEWSOFT
Section I - Présentation de l’espace de travail
1/ La scène
C’est la zone centrale de la fenêtre, celle sur laquelle se déroule l’animation. On peut y contrôler le déroulement
des animations et le fonctionnement des zones réactives (boutons ...) en appuyant sur la touche “entrée” pour
déclencher la lecture. Pour stopper, appuyer de nouveau sur la touche “entrée”.
On peut aussi utiliser le contrôleur d’animation :
la fenêtre principale, ou accessible par le menu “Fenêtre”.
situé en haut à gauche de
Pour modifier la scène (taille, couleur de fond ...) on utilise la palette des propriétés, en bas de l’écran :
Taille du document final
Lecteur de l’animation
Couleur de fond de l’animation
Nombres d’images lues par seconde
La palette “Propriétés” est utilisée pour paramétrer les outils et certains objets. Elle change d’aspect selon l’outil
ou l’objet sélectionné.
AFCI - NEWSOFT 12-16 rue de Vincennes - 93100 Montreuil
Tél. : 01 42 87 40 20 - Fax 01 42 87 38 28 - www.afci.fr
Page
3
2/ Les outils
La palette d’outils permet de créer de modifier des objets ou du texte. Les outils doivent être réglés avant leur utilisation.
1 - Sélection “objet”
3 - Trait
5 - Tracé vectoriel
7 - Ellipse
9 - Crayon
11 - Transformation d’objets
13 - Encrier
15 - Pipette
17 - Déplacement page
2 - Sélection “vectorielle”
4 - Sélection à main levée
6 - Texte
8 - Rectangle
10 - Pinceau
12 - Transformer le remplissage
14 - Pot de peinture
16 - Gomme
18 - Loupe
19 - Couleur du contour
20 - Couleur du fond
21 - Couleurs par défaut
22 - Intervertir
23 - Magnétisme
24 - Options du tracé
Définition des outils
1 - Sélection “objet” :
Sélectionne le fond ou le contour des objets sur la scène. Cette sélection permet de
modifier les couleurs avec les outils “pot de peinture” et “encrier”.
2 - Sélection “vectorielle” :
Sélectionne l’objet avec un contour en courbes de Bézier (tracé vectoriel), Il est
possible de modifier l’objet en utilisant les vecteurs et les points d’ancrage.
3 - Trait :
Trace une ligne droite, à n’importe quel angle. Régler les options de trait dans la palette
“Propriétés”, et la forme dans “Options du tracé” (bas de la palette outils).
Page
4
4 - Sélection à main levée :
Sélectionne les objets, ou des parties d’objets sur la scène. On peut ensuite
effacer la zone sélectionnée, la copier, changer ses couleurs (outils “Pot de peinture” et “Encrier”)...
5 - Tracé vectoriel :
Permet de tracer des formes directement en courbes de Bézier. En cliquant sur un point
existant, on le supprime. En cliquant sur un tracé, on ajoute un point. Pour convertir un point d’angle en point
courbe, on utilise l’outil de sélection vectorielle avec la touche “alt”.
6 - Texte :
Cliquer sur la page et saisir le texte. Les réglages typographiques se font dans la palette
“Propriétés”. Le texte statique permet de créer un lien sur le texte, en entrant l’adresse de la page à atteindre
dans la zone précédée d’une chaîne.
7 - Ellipse :
Pour tracer des ovales ou des cercles. Quand un petit cercle noir appairait à côté du curseur de
la souris en cours de traçage, c’est que le cercle est parfait.
8 - Rectangle :
Pour tracer des rectangles ou des carrés. Quand un petit cercle noir appairait à côté du curseur de la souris en cours de traçage, c’est que le carré est parfait.
9 - Crayon :
Outil de dessin à main levée. Choisir l’épaisseur, la couleur et le type de tracé (continu, pointillé ... ) dans la palette “Propriétés”.
10 - Pinceau :
Même type de tracé que le “Crayon”, mais avec en plus de la couleur de contour une couleur
de fond. Choisir ces options avant de tracer. On peut aussi régler l’épaisseur du tracé, ainsi que la forme de la
pointe en bas de la palette “objets”.
11 - Transformation d’objets :
Après sélection de l’objet, placer le curseur pour obtenir un des 3 outils de
transformation disponibles avec cette fonction (Rotation, Mise à l’échelle, Homothétie, Inclinaison).
12 - Transformer le remplissage :
en dégradé ou un motif.
Déplace et repositionne le fond d’un objet, a condition que ce fond soit un
13 - Encrier :
Sélectionner un objet, cliquer sur l’encrier et choisir une couleur de contour. En cliquant sur le
contour de l’objet on change sa couleur,
14 - Pot de peinture :
15 - Pipette :
16 - Gomme :
Prélève une couleur, n’importe où sur l’écran par un simple clic.
Efface le fond et le contour des objets.
17 - Déplacement page :
18 - Loupe :
Même principe que l’outil précédent, mais affecte la couleur de fond de l’objet.
Déplace la zone de travail par cliquer-glisser.
Zoom plus et moins sur la page. Cet outil ne change pas la taille de l’animation finale.
Page
5
19 - Couleur du contour :
Détermine la couleur du contour d’un outil de traçage. Fonctionne avec les
outils “Crayon”, “Pinceau”, “Plume”, “Ellipse” et “Rectangle”.
20 - Couleur du fond :
Détermine la couleur du fond d’un outil de traçage. Fonctionne avec les outils
“Crayon”, “Pinceau”, “Plume”, “Ellipse” et “Rectangle”.
21 - Couleurs par défaut :
22 - Intervertir :
Rétablit le blanc et le noir dans les couleurs de fond et de contour.
Echange les couleurs de fond et de contour.
23 - Magnétisme :
Impose un déplacement magnétisé sur la grille invisible, et permet un meilleur alignement des objets entre eux.
24 - Options du tracé :
Aide au tracé à main levée. Les options permettent de lisser le tracé, de le rendre
angulaire ou de respecter exactement le tracé de l’utilisateur.
Dans les options de tracé (en bas de la palette “objets”), choisir le type d’aide au traçage désirée :
Redresser, rend le tracé angulaire,
Lisser arrondi les courbes,
Encre ne change pas la forme du tracé de l’utilisateur.
2/ Le scénario
Il se compose de 2 zones : Les calques et la time line.
Le scénario gère l'animation des objets placés sur la scène. Chaque objet, nommé “acteur” devra de préférence
être placé sur un calque qui lui sera propre.
Les acteurs se matérialisent dans la time line sous forme de “points-clé” ou “images-clé”. La sélection d’une
image-clé dans la time line entraîne la sélection de l’objet sur la scène.
Pour plus de facilité, le scénario peut se diviser en “séquences”. Chaque séquence est une partie du même scénario, enregistrée sur le même document.
Page
6
Par défaut, les séquences sont lues dans l’ordre de leur création. On peut modifier l’ordre de lecture grâce aux
scripts (voir plus loin).
Pour créer une nouvelle séquence : menu “insertion”, “séquence”.
Pour accéder aux séquences créées, cliquer sur l’icône
dans la liste la séquence à atteindre.
en haut à droite de l’écran, et choisir
a/ les calques
Contiennent les acteurs présents sur la scène. L’ordre des calques détermine l’ordre des plans du dessin. Si un
calque est placé tout en haut de la liste des calques, l’objet qu’il contient sera affiché par dessus tout les autres
sur la scène.
Il est préférable de nommer chaque calque, du nom de l’acteur qu’il contient.
Afficher/Masquer
Verrouiller/Déverrouiller
Nom du calque
Afficher en contours
Supprimer
Nouveau calque
Calque de guide
Groupe de calques
Pour intervenir sur un seul des calques, cliquer sur les puces en face du calque
Pour “masquer/afficher”
, “verrouiller/déverrouiller”
quer directement sur les icônes.
, “afficher les contours”
.
de tous les calques, cli-
Le calque de guide
impose un chemin de déplacement à l’acteur qui se trouve sur le calque qui est lié à lui
(voir plus loin “animation”).
Le groupe de calque
se comporte comme un dossier contenant plusieurs fichiers. En masquant ou en verrouillant le groupe, on masque et verrouille tous les calques qui s’y trouvent.
Page
7
b/ La timeline
Gère le facteur temps de l’animation. Les acteurs, représentés par les points -clé, apparaissent sur la scène au
moment où la tête de lecture les atteint dans la time line.
La time line est graduée en IPS (images par seconde). Ne pas oublier de vérifier la cadence de lecture, qui détermine le nombre d’images lues par seconde. Par défaut, la cadence est de 12 IPS.
Une animation qui devra durer 1 seconde va occuper une plage de 12 images.
Les éléments présents sur la time line :
Point clé ou image clé
Graduation IPS
Tête de lecture
Point clé vide
ou
image clé vide
Amener l’affichage à
l’emplacement de la
tête de lecture
Image courante
Cadence de l’animation
Graduation IPS :
Repères d’animation. Ces repères servent à indiquer la durée des animations au
cours de la construction. Ils ne changent pas, même si on modifie la cadence d’animation. Ils sont affichés de 5
en 5.
Tête de lecture :
L’endroit où elle se trouve sur la time line indique le moment de l’animation qui est affiché
dans la scène. Si la tête de lecture se trouve en image 24, pour une cadence de 12 IPS, elle affiche l’image qui
appairait au début de la 2 ème seconde. Donc, elle a déjà lu 2 secondes d’animation.
Point clé vide ou image clé vide :
Pour insérer un Point clé vide, sélectionner une cellule dans la time line, et
sélectionner “image clé vide” dans le menu “insertion”. Le point clé vide permet d’ajouter un nouvel objet sur la
scène. Par défaut, chaque nouveau calque possède une image clé vide en image 1.
Point clé ou image-clé :
Indique qu’il existe un objet sur la scène, et permet de le sélectionner. A chaque
modification de l’objet dans l’animation (changement de taille, de forme, de couleur, de direction dans un déplacement, interpolation ...) un nouveau point clé appairait ou est inséré par l’utilisateur (menu “insertion”).
Page
8
Amener l’affichage à l’emplacement de la tête de lecture :
courante de la tête de lecture.
déplace l’affichage du scénario jusqu’à la position
3/ Description des acteurs
Les acteurs sont les objets (dessins, photos, animations, sons ...) qui composent l’animation. On peut retrouver
tous les acteurs dans la bibliothèque, sauf les “éléments de décor”.
a/ La bibliothèque
La bibliothèque est une palette flottante. Chaque nouvelle animation possède sa propre bibliothèque, en plus de
celles par défaut.
Les acteurs présents dans la bibliothèque ne doivent pas être supprimés, sauf s’ils ne sont plus utilisés : ils sont
liés à l’animation. On ne peut pas annuler la suppression d’un acteur dans la bibliothèque.
La bibliothèque contient différents types d’acteurs, et possède un affichage de prévisualisation.
Nom de la bibliothèque
Prévisualisation de l’acteur
Image importée
Symbole Bouton
Symbole Clip
Dossier
Son importé
Symbole graphique
Page
9
Nom de la bibliothèque :
Porte le nom du document dans lequel elle a
été créée. Ici, le document s’appelle “décor_scène”. Quand on enregistre un document, sa bibliothèque est enregistrée en même temps. Elle s’ouvre avec le document.
Prévisualisation de l’acteur : Affiche l’image ou l’animation de l’acteur sélectionné dans la liste de la bibliothèque.
Image importée :
En général une photo ou un effet graphique créé sous photoshop et “enregistré pour le
web”, dans un format léger (gif ou jpeg).
Dossier :
térieur.
contient des symboles. L’utilisateur le crée en bas de la bibliothèque, et glisse les symboles à l’in-
Son importé :
En provenance d’un logiciel de traitement du son (SoundForge ou Sound Edit), de sons téléchargés sur internet (attention aux droits) ou de sons enregistrés par l’utilisateur. Ils peuvent être enregistrés en
Wave ou en MP3 par exemple. Flash permet de recompresser n’importe quel son importé au format MP3.
b/ Les symboles
Définition
Graphique
, clip d’animation
, ou bouton
. Ces symboles ont chacun des propriétés particulières.
Tous les acteurs qui interviennent dans l’animation doivent être convertis en symboles, sauf les éléments de
décor et ceux pour lesquels on fait une interpolation de forme.
Conversion / Création
Pour créer un nouveau symbole, sélectionner l’acteur sur la scène et cliquer sur “convertir en symbole” dans le
menu “insertion”. Selon l’utilisation qui sera faite de l’acteur, on choisira un des 3 types de symboles.
Nom du symbole
Emplacement du point de référence
Etat du symbole
On peut aussi créer le symbole en sélectionnant “nouveau symbole” dans “insertion”. Dans ce cas, le symbole
n’existe pas sur la scène, mais seulement dans la bibliothèque. Pour l’insérer sur la scène, sélectionner un point
clé dans la time line, ou insérer un point clé vide, et glisser le symbole sur la scène.
Page
10
Attention, toujours nommer les symboles.
Symbole graphique
: Utilisé par exemple pour les acteurs qui doivent se déplacer sur la scène, dans le cas
d’une interpolation de mouvement ou d’un déplacement sur un guide.
Symbole clip d’animation
: Un acteur en symbole clip est animé sans cesse.Par exemple : un oiseau qui bat
des ailes doit traverser l’écran. Dans le clip, on anime seulement les ailes. L’oiseau bat des ailes sans cesse (en
boucle), et il est utilisé sur l’écran pour le déplacement.
Symbole bouton
: Quand l’acteur est destiné à être un lien, pour atteindre une autre séquence, une page
HTML, jouer un son, faire apparaître un autre acteur .... C’est l’utilisateur qui doit déclencher l’action en cliquant
sur le bouton.
Emplacement du point de référence :
Point d’origine du symbole pour le situer sur la scène en X et Y. Le
point noir est le point d’origine se sont ses coordonnées qui apparaîtront en X et Y. Le point zéro (origine de la
mesure) se trouve en haut à gauche de la scène.
Modification
Modifier un symbole dans la bibliothèque entraîne une modification du symbole sur la scène, à chaque fois qu’il a
été utilisé.
Pour entrer dans la zone de modification du symbole, clliquer sur l’icône
choisir dans la liste le symbole a éditer.
en haut à droite de la scène, et
Dans la zone de modification du symbole, on peut à nouveau modifier sa forme, ses couleurs ... Pour revenir sur
la scène, sélectionner “séquence ...” à côté du nom du symbole.
Retour à la séquence
Nom du symbole
Les symboles peuvent-être imbriqués les uns dans les autres, en particulier lorsqu’il s’agit de symboles animés..
Page
11
Section 2 - Applications pratiques
1/ Les acteurs dans le scénario
Le scénario permet de “mettre les acteurs en scène”. Ils apparaissent dans le scénario sous forme d’images-clé
sélectionnables. Chaque image-clé correspond au contenu d’un calque du scénario.
Calque contenant un élément présent uniquement
en image 30.
action
Calque contenant un élément
inerte (élément de décor), présent durant toute l’animation.
Calque contenant une animation
(interpolation de mouvement)
L’aspect de la time line indique le rôle de l’acteur dans le scénario
- Une zone blanche indique l’absence d’acteur dans cette partie de l’animation. Une image clé peut-être insérée
plus loin pour faire apparaître l’acteur plus tard dans l’animation.
Ici, dans le calque “action”, le point clé n’existe qu’en image 30, l’action aura donc lieu à ce moment, quand la
tête de lecture passera sur l’image 30.
- Une zone grise (toujours précédée d’une image clé), indique que l’objet n’est pas animé, mais qu’il existe sur la
scène jusqu’au rectangle gris qui termine la zone.
Les calques “Soleil” et “Cactus” par exemple, sont des éléments de décor. Ils ne sont pas animés mais constituent le fond de page tout le long de l’animation.
- Une flèche dans une zone bleue indique la présence d’une interpolation de mouvement. L’objet se déplace sur
la scène de sa position en image 1, à sa position en image 30.
Page
12
Le calque “bus” contient l’animation du bus qui se déplace de la gauche à la droite de l’écran.
- Une flèche dans une zone verte indique la présence d’une interpolation de forme. L’objet se transforme sur la
scène de sa forme initiale en image 1, à sa forme finale en image 30.
Ci-dessous, le calque “soleil” se transforme d’image 1 en image 30.
Début et fin de l’interpolation
de forme.
Les acteurs peuvent être placés dans le scénario de plusieurs façons
- Par importation, d’un logiciel comme Photoshop, Illustrator ... :
Les images sont enregistrées en JPG ou GIF sur le logiciel d’origine, puis importées directement dans la bibliothèque de flash : “Fichier” - “Importer dans la bibliothèque” , puis insérées sur la scène par cliquer/glisser à partir
de la bibliothèque.
- En les dessinant directement sur la scène de Flash, après avoir inséré une image clé vide dans la timeline, au
moment où l’acteur doit apparaître :
On peut ensuite le convertir en symbole ou pas, selon l’utilisation qui sera faite de l’acteur.
- En insérant un nouveau symbole :
On crée alors l’acteur directement dans la fenêtre des symboles, puis on l'insère sur la scène en le glissant à partir de la bibliothèque.
2/ Interpolations et déplacements
Elles sont de 2 types : mouvement et forme. Ce sont des manipulations de base sur Flash. On les utilise pour
déplacer ou transformer les acteurs. Le logiciel crée lui-même (interpole) les étapes intermédiaires de la transformation, à partir d’une image de départ et d’une image finale définies par l’utilisateur.
1/ Interpolation de forme
C’est un “morphing”. Un acteur “carré bleu” se transforme en acteur “rond jaune” progressivement. Il est possible
d’appliquer ces transformations sur le texte, à certaines conditions.
Page
13
Les étapes de l’interpolation de forme
- Créer un nouveau calque et sélectionner l’image clé vide. Il contiendra les 2 formes :
- En image 1 (départ), dessiner la forme de base sur la scène (ici, le carré bleu). L’image clé se remplit et devient
noire.
- Sélectionner l’image finale dans le scénario (ici, l’image 15)
Image clé sélectionnée
- Insérer une image clé vide, afin de pouvoir ajouter une forme différente (une image clé non vide duplique l’objet
qui existe déjà sur le calque).
L’acteur “carré bleu” est dupliqué jusqu’en image 14. Sur l’image 15, l’image clé vide va permettre de dessiner le
rond jaune.
- Dessiner le rond jaune en image 15. L’image clé en 15 se sélectionne en noir. Les 2 formes existent sur le
même calque.
- Sélectionner l’image clé 1 seule dans le scénario.
- En bas de l’écran, ouvrir la fenêtre “Propriétés”. Dans le menu déroulant “interpolation”, choisir “forme”
Page
14
- Dans le scénario, une zone verte avec une flèche appairait pour signaler que l’interpolation de forme est effective :
- Jouer l’animation pour contrôler l’interpolation.
- Sur la scène, les images intermédiaires ont été créées. Par exemple, en image 9, la forme est celle-ci :
Flash a aussi interpolé la couleur, qui change progressivement de bleu à jaune. La quantité d’étapes de formes et
de couleurs générées par Flash dépend de la longueur de l’animation demandée par l’utilisateur.
2/ Interpolation de forme sur le texte
La méthode est la même, à une exception : avant de pouvoir appliquer l’interpolation sur le texte (d’un texte à un
autre, ou d’un objet à un texte), celui-ci doit être séparé dans “modification”, plusieurs fois jusqu’à ce que la commande “séparer” soit grisée.
On ne peut pas faire d’interpolation de forme sur un objet groupé ou un symbole.
3/ Interpolation de mouvement
C’est un déplacement. Un acteur “carré bleu” placé à gauche de la scène se déplace progressivement vers la
droite de la scène. Il est possible de changer en même temps la taille et la forme de l’acteur, mais pas sa couleur.
Page
15
Les étapes de l’interpolation de mouvement
- Créer un nouveau calque et sélectionner l’image clé vide :
- En image 1 (départ), dessiner la forme de base sur la scène (ici, le carré bleu). L’image clé se remplit et devient
noire.
- Convertir l’objet en symbole graphique : menu “insertion, convertir en symbole graphique”
- Sélectionner l’image finale dans le scénario (ici, l’image 15)
- Insérer une image clé, afin de dupliquer la forme en 15 :
L’acteur “carré bleu” est dupliqué jusqu’en image 14. Sur l’image 15, on trouve cette fois une nouvelle occurrence
du même objet
- Sélectionner l’image clé 1 seule dans le scénario.
- En bas de l’écran, ouvrir la fenêtre “Propriétés”. Dans le menu déroulant “interpolation”, choisir “mouvement”
- Dans le scénario, une zone verte avec une bleue appairait pour signaler que l’interpolation de mouvement est
effective :
- Jouer l’animation pour contrôler l’interpolation.
Page
16
4/ Le guide de mouvement
Le guide de mouvement est un tracé, toujours ouvert, qui permet de guider un ou plusieurs acteur sur une trajectoire non rectiligne.
Les étapes de création du guide de mouvement
- Création de l’acteur : insérer une image clé dans la timeline, pour y placer un acteur converti en symbole (graphique, bouton ou clip)
- Sélectionner le calque de l’acteur en cliquant sur son nom dans la zone des calques.
- Dupliquer l’acteur dans le scénario, jusqu’au point souhaité pour la fin du mouvement
Ici, l’animation prendra fin en image 20.
- Ajouter un calque-guide de mouvement, en cliquant sur l’icône en bas de la zone des calques :
Icône de création d’un calque de mouvement
Le calque de mouvement appairait au-dessus du calque de l’acteur. Ils sont reliés par un pointillé qui indique que
le calque de l’acteur peut-être guidé par le calque de mouvement.
- Tracer la trajectoire sur le calque de mouvement, avec l’outil de traçage de votre choix.
On peut aussi importer ou copier/coller un tracé de photoshop ou d’illustrator.
Page
17
Il est important que le tracé soit d’un seul trait ininterrompu et ouvert aux extrémités :
tracé du guide de
mouvement
Acteur à guider
Quand le guide est tracé, il existe par défaut sur toute la longueur de l’animation.
- Verrouiller le calque de guide, pour éviter de modifier le tracé :
Calque verrouillé
- Sélectionner l’image 1 de l’acteur dans le scénario et déplacer l’objet sur la scène pour le faire coïncider avec le
début de la trajectoire :
Le point central de l’acteur doit
toucher le début de la trajectoire.
Page
18
- Sélectionner l’image finale de l’animation, et déplacer l’objet sur la scène à la fin de la trajectoire :
- Sélectionner l’image 1 du claque de l’objet et ajouter une interpolation de mouvement.
- Jouer l’animation pour vérifier le fonctionnement du guide.
3/ Les séquences
Les séquences permettent de découper l’animation en sous-parties plus faciles à gérer. Elles donnent aussi la
possibilité à l’utilisateur de naviguer dans l’animation à l’aide de boutons.
Par défaut, les séquences s’enchaînent dans l’ordre numérique. On peut, grâce à des boutons atteindre des
séquences sans respecter l’ordre de création.
Pour travailler sur une nouvelle séquence : menu “insertion”, “séquence”.
Pour se déplacer d’une séquence à l’autre, utiliser l’icône en forme de “clap”, en haut à droite de la scène :
Accès aux différentes
scènes existantes
Page
19
4/ Les boutons
Les boutons sont des zones qui seront réactives à l’utilisation. Ils peuvent être inertes ou animés, changer au
passage de la souris ...
Les boutons servent à proposer un choix de navigation à l’utilisateur, qui peut ainsi sélectionner les thèmes qui
s’affichent sur l’écran. Ils sont en général cliquables, c’est à dire qu’ils réagissent à un clic de souris, mais peuvent aussi déclencher l’action sur un simple passage du curseur.
Les boutons de Flash sont des symboles auxquels on a attribué la caractéristique “bouton”.
Pour créer un bouton comportant plusieurs états (bouton en roll-over), les différents états doivent exister dans la
bibliothèque. On peut ensuite y ajouter un son.
Les étapes de création d’un bouton
- Importer dans la bibliothèque ou dessiner les acteur qui devront être les états du bouton.
En général, les boutons affichent 2 états : “off” (quand le curseur ne les touche pas) et “on”.
Il est possible de faire des boutons avec un seul état (l’aspect ne change jamais), ou avec 3 états différents
(l’aspect change.à chaque action de l’utilisateur :
- 1 /état initial,
- 2/ quand on roule sur le bouton,
- 3/ quand on clique sur le bouton)
Ici, les graphismes viennent de photoshop. Ils ont été créés en RVB, 72 DPI et “enregistrés pour le web”, en JPG
et importés dans la bibliothèque.de Flash.(menu “fichier”).
Ce sont de simples bitmaps, mais on peut utiliser aussi des symboles existants, graphiques ou clip d’animation.
Page
20
- Dans le menu “insertion”, insérer un nouveau symbole “bouton” :
- L’écran affiché est celui du symbole bouton. La timeline est différente, et permet de définir les états du bouton :
apparence “inerte” du
bouton quand le pointeur
n'est pas dessus
apparence du bouton
quand vous cliquez
dessus.
apparence du bouton quand le
pointeur se trouve dessus
zone qui réagit au clic de
la souris. Cette zone est
invisible dans l'animation
- Glisser le premier état du bouton sur l’image clé vide de “haut”, à partir de la bibliothèque
- Sélectionner la cellule qui correspond à “dessus” et insérer une image clé vide. Cette opération permet de placer ensuite le 2 ème état du bouton à cet endroit.
Zone de modification
des symboles
Page
21
- Toujours à dans la fenêtre modification du symbole, centrer l’acteur grâce à la palette “infos”.
Choix du point d’alignement de
l’objet (haut-gauche ou centre)
Coordonnées X et Y
La petite croix est
le centre de la
zone de travail.
On obtient la timeline suivante :
L’image clé “haut” contient l’état 1 :
. L’image clé “dessus” contient l’état 2 :
- Retourner sur la scène, et insérer le symbole “bouton” qui se trouve maintenant dans la bibliothèque.
- Tester l’animation (ctrl entrée) pour voir le bouton fonctionner. L’état change (passe de 1 à 2 lorsqu’on roule
dessus) et le curseur se transforme en main.
Pour l’instant, le bouton ne mène nulle part, puisqu’on a pas encore indiqué quelle page ou quelle séquence il
doit atteindre.
Pour donner cette instruction au bouton, il faut utiliser les “Actions” de Flash pour établir des liens.
Etapes de programmation du bouton
Pour atteindre en cliquant sur le bouton, une autre séquence existante de Flash :
- Sélectionner le bouton sur la scène
Dans la fenêtre “propriétés”, l’acteur est reconnu comme bouton :
Page
22
- En bas de l’écran, ouvrir la fenêtre “propriétés”.
- Cliquer sur la section “Actions” puis “Contrôle de l’animation” et double cliquez sur “GoTo”.
Cette action est paramétrable, afin de pouvoir atteindre et arrêtez, ou atteindre et lire la suite de l'animation. Les
infos de scènes et d’images ne seront disponibles que si ces éléments ont été créés au préalable.
- Indique quelle zone la tête de lecture doit atteindre lors du clic sur le bouton et ce qu’elle doit faire :
Atteindre la cible et
continuer la lecture
Arrêter dans l’attente
d’une autre action
Séquence à
atteindre
N° d’image à
atteindre sur
la séquence
- Le script (la commande) appairait en bas de la fenêtre, et permet du choisir l’action :
“On release” correspond à l’action qui devra être effectuée par l’utilisateur pour déclencher la réaction du bouton.
En cliquant sur le texte “On release”, on accède aux autres possibilités d’actions :
Appuyer : quand le bouton de la souris est appuyé
Relâcher : quand le bouton de la souris remonte (après le clic)
Page
23
Relâcher en dehors : quand le bouton de la souris remonte, alors que le curseur n’est plus, à l’écran, dans la
zone réactive (bouton)
Touche : quand l’utilisateur appuie sur la touche prévue. A définir ici, en cochant la case “touche”, puis en utilisant la touche souhaitée dans la zone de saisie.
Survoler : quand le curseur passe sur le bouton, sans clic
Sortir du survol : au moment où le curseur sort de la zone réactive du bouton
Faire glisser au-dessus : quand l’utilisateur fait glisser avec la souris un objet déplaçable de l’animation au-dessus du bouton
Faire glisser en éloignant : comme ci-dessus, mais quand l’objet déplaçable sort de la zone du bouton
5/ Les clips d’animation
Les clips d’animation sont des symboles animés continuellement. Une fois insérée sur la scène, l’animation joue
en boucle et il est possible de l’utiliser soit comme élément de décor, soit comme bouton, ou encore de lui appliquer une trajectoire.
Etapes de création d’un clip d’animation
- Dessiner ou importer l’élément de base (symbole graphique ou image bitmap) du clip.
- Dans le menu “insertion”, créer un nouveau symbole “clip”.
- Dans la zone de modification des symboles, créer l’animation du clip.
- Insérer le clip sur la scène, ou dans un symbole “bouton”.
Le clip d’animation ne fonctionnera sur la scène que lorsqu’on testera l’animation (ctrl entrée).
Page
24
6/ Les sons
Flash accepte la plupart des formats de sons, mais il est pratique d’utiliser le MP3, qui est un format léger qui
garde une bonne qualité.
Etapes d’insertion de sons
- Importer les sons dans la bibliothèque, menu “fichier”, “importer dans la bibliothèque”
Le son possède sa propre icône, comme les symboles :
Son importé
- Sur la timeline, créer un nouveau calque “son”. Il occupe la longueur totale de l’animation.
- A partir de la bibliothèque, glisser le son sur la scène
- On obtient une représentation graphique du son dans le scénario, qui permet de contrôler le temps de lecture
du son
Page
25
- Le son reste modifiable dans Flash dans une certaine limite. En double-cliquant sur son icône dans la bibliothèque, on accède aux informations et modifications ci-dessous :
Représentation
graphique
Nom du son
Mise à jour automatique en cas de
modification du fichier d’origine. Le
son est ré-importé automatiquement
dans la bibliothèque.
Importer un son de remplacement. La mise
à jour se fait aussi dans le scénario
Jouer/arrêter le son
Utiliser la qualité du fichier d’origine
re-compresser en
MP3 avec Flash
Infos de qualité, poids et
compression du son
- Dans la fenêtre “propriétés”, on peut modifier l’aspect du son :
Enveloppe du son
Effets de rendu sonores
(Voir plus loin la fenêtre
de modification de l’enveloppe)
Jouer le son en boucle.
Indiquer le nombre de
fois que le son doit
rejouer
Page
26
Les effets sonores modifient la répartition du son entre les hauts parleurs droit et gauche :
- Canal gauche ou droit : le son sort du haut parleur gauche ou droit seulement
- Fondu de droite à gauche ou de gauche à droite : le son joue seulement d’un côté, puis se déplace vers
l’autre côté
- Fondu entrant : le son arrive en début d’animation dans les 2 canaux en même temps, mais à un volume très
bas, qui augmente progressivement pour atteindre le volume normal
- Fondu sortant : même chose que précédemment, mais le son perd de son volume pour s’éteindre en fin d’animation.
- Personnalisé : donne la possibilité de régler soit même les effets de volumes sonores, l’entrée et la sortie du
son (moment de départ et d’arrêt).
Les “poignées d’enveloppe” règlent le volume sonore. Elles sont déplaçables par cliquer/glisser. La barre d’affichage centrale affiche le temps. Les réglages affichés sont les mêmes que dans “modifier” (pour modifier l’enveloppe du son)
Page
27
Section 3 - Exportation, publication et insertion dans dreamweaver
1/ Exportation de l’animation
Une fois l’animation enregistrée, elle génère automatiquement un fichier *.SWF à insérer dans l’éditeur HTML.
Pour choisir soi-même les réglages de compression, il faut “exporter l’animation” (menu “fichier”)
Etapes pour l'exportation
- Dans le menu “fichier”, sélectionner “Exporter l’animation”. Nommer le fichier et choisir sa destination. Ce fichier
doit-être placé à son emplacement définitif et doit être mis en ligne avec les fichiers du site.
Dans le menu déroulant “type”, il est possible de choisir d’autres formats video pour la compilation de l’animation,
ce qui permets d’utiliser les animations Flash dans d’autres contextes.
Pour le web, choisir “SWF” qui est le format par défaut.
- La fenêtre de réglages appairait :
Les options à vérifier sont les suivantes :
Générer un rapport de taille : génère un fichier texte contenant des informations relatives au fichier SWF final
Protéger contre l’importation : permet de verrouiller le fichier et de le rendre non-importable. Si un mot de
passe à été défini, seul l’accès par ce mot de passe permettra d’importer un fichier valide.
Page
28
Omettre les actions “trace” : les actions “trace” sont utilisées pour enregistrer des remarques de programmation ou pour afficher des messages dans la fenêtre Sortie pendant le test d'une animation. On peut les supprimer
automatiquement dans la compilation à cet endroit.
Compresser l’animation : Actif seulement dans la version 6. Permet de gagner en poids sur l’animation finale.
Mot de passe : actif si l’animation est protégée
Qualité JPG : qualité de la compression. Plus la compression est forte, plus les pixels de l’image risquent de s’abîmer. Il faut trouver le bon rapport qualité/poids en faisant des essais.
Flux continu : donne la possibilité d’une recompression globale de tous les sons de l’animation, et le choix de
paramètres à utiliser.
Neutraliser les paramètres audio : supprime pour la compilation toutes les sources sonores.
Si on choisit cette méthode de compression dans le but de faire un site internet, il faut ensuite ouvrir une page de
dreamweaver, et insérer l’animation SWF grâce à l’outil “insérer un flash” dans la barre d’outils de dreamweaver.
2/ Publication du site
Cette fonction s’utilise essentiellement pour les sites web. En une seule opération, Flash génère tous les fichiers
nécessaires à la mise en ligne de l’animation.
Etapes pour la publication
1/ Terminer l’animation et sélectionner “Paramètres de publication” dans “Fichier”
2/ La fenêtre de publication permet de choisir quels fichiers seront créés par Flash, et quels seront leurs paramètres.
Page
29
a/ Formats
Placer les coches en face des fichiers souhaités. Pour un site web, cocher au minima Flash (swf) et HTML. La
page HTML pourra ensuite être modifiée dans dreamweaver. Enlever la coche dans “Utiliser les noms par défaut”
permet de changer les noms des fichiers qui vont être créés. Autrement tous les documents portent le même
nom que l’animation, avec des extensions différents.
b/ Flash
Pour les réglages de cette fenêtre, voir la rubrique “Compression de l’animation” ci-dessus.
Page
30
c/ HTML
Paramètres de la page HTML générée.
d/ GIF
Paramètres des images GIF générées. Les réglages de compression sont identiques à ceux de Photoshop. Le
fichier créé sera un GIF animé, avec les mêmes paramètres et caractéristiques que ceux d’image ready par
exemple.
Page
31
Une fois les réglages effectués, il suffit de cliquer sur “Publier” pour créer les fichiers demandés.
Les documents sont créés dans le même dossier.
Fichier de travail “Flash” (1)
Image “GIF” (2)
Page HTML (3)
Animation compressée (4)
1 - Fichier “Flash” : C’est le fichier de travail. Il garde tous les éléments qui composent l’animation, sans les compresser. Il permet de retravailler l'animation au besoin. Ce fichier ne doit pas être mis en ligne. La page HTML ne
fait pas appel à lui. Il doit être conservé en archive.
2 - Image GIF : Elle n’est pas indispensable dans ce cas. Elle est utilisée en importation dans une page HTML. A
mettre en ligne si elle a été utilisée sur une page.
3 - Page HTML : Indispensable. C’est le document qui sera lu par le navigateur. Elle est modifiable dans n’importe quel éditeur HTML (Dreamweaver par exemple). A mettre en ligne impérativement.
4 - Animation compressée : Indispensable. C’est le document qui est lu sur la page HTML. Si ce document n’est
pas mis en ligne, la page HTML n’affichera pas l’animation. A mettre en ligne impérativement.
Si on doit corriger l’animation et la publier à nouveau, il n’est pas nécessaire de retourner dans “paramètres de
publication”. Les réglages sont enregistrés en même temps que le fichier Flash. On peut donc utiliser la commande “Publier” du menu “Fichier”. Attention, les anciens fichiers sont remplacés sans alerte.
Page
32
Table des matières
Section I - Présentation de l’espace de travail
1/ La scène
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3
Définition des outils
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4
2/ Le scénario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6
a/ les calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7
b/ La timeline
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8
3/ Description des acteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
a/ La bibliothèque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
b/ Les symboles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10
Définition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10
Conversion / Création . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10
Modification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
Section 2 - Applications pratiques
1/ Les acteurs dans le scénario
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12
2/ Interpolations et déplacements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13
1/ Interpolation de forme
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13
Les étapes de l’interpolation de forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14
2/ Interpolation de forme sur le texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15
3/ Interpolation de mouvement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15
Les étapes de l’interpolation de mouvement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16
4/ Le guide de mouvement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17
Les étapes de création du guide de mouvement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17
Page
33
3/ Les séquences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19
4/ Les boutons
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20
Les étapes de création d’un bouton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20
Etapes de programmation du bouton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22
5/ Les clips d’animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24
Etapes de création d’un clip d’animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24
6/ Les sons
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25
Etapes d’insertion de sons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25
Section 3 - Exportation, publication et insertion dans dreamweaver
1/ Exportation de l’animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28
Etapes pour l'exportation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28
2/ Publication du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29
Etapes pour la publication
a/ Formats
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30
b/ Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30
c/ HTML
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31
d/ GIF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31
Page
34

Flash MX - AFCI Newsoft

Transcription

Documents pareils

Xpress Initiation

Dreamweaver Perfectionnement

Acrobat Perfectionnement

developper son aisance au telephone

INITIATION COMPTABILITE GENERALE Les

techniques de vente et de negociation commerciale - Acces

Xpress Perfectionnement

Accueil physique et téléphonique Spécial Hôtesse – standardiste

Les Cahiers de la communication interne

Les Cahiers de la communication interne