# Flash, qu`est-ce que c`est ?

Transcription

Flash MX Animation par Yazo.net
1/12/02 23:26
Introduction à Flash MX
Interface du logiciel
Manipulation du texte
Manipulation des formes
Symboles & Occurrences
Gestion du scénario (la Timeline)
Interpolations
Masques et guide de mouvement
Archives Flash 5
Téléchargements : flas & PDF
Programmer en ActionScript
Notions élémentaires de programmation
Niveau I : Techniques de bases
Niveau II : Techniques intermédiaires
Niveau III : Techniques avancées
Objets
# Flash, qu'est-ce que c'est ?
[11-04-02]
Lorsque vous souhaitez réaliser des animations pour vos pages web, Flash est le logiciel idéal. Non, nous ne
sommes ni payés par Macromedia pour tenir de tels propos ni rattachés de près ou de loin à cet éditeur.
Nous reconnaissons simplement la puissance de ce logiciel. De la simple animation de type "gif animé" à des
programmes plus complexes faisant appel à des bases de données, du PHP, du XML, Flash MX est le logiciel
qui saura faire face à tous les problèmes.
Que vous réserve cette partie sur Flash MX ?
Vous recherchez une info sur une technique de développement, une commande, une solution à un problème, les pages "Flash" de
Yazo.net vous apporteront sûrement la solution. Si vous êtes débutant, une partie est consacrée à une méthodologie d'apprentissage,
vous pourrez ainsi apprendre pas à pas le b.a.-ba des techniques d'animation de Flash. après avoir découvert l'interface. Si vous êtes
un utilisateur déjà plus averti, vous pourrez consacrer votre apprentissage aux Actions Scripts. Pour les experts, Yazo.net propose
quelques pages qui vous aideront peut-être à optimiser vos méthodes de production. Sur ce dernier point, nous nous exprimons au
conditionnel car le niveau des experts n'est pas le même pour tout le monde.
Signalétique
Elle est très simple, vous pouvez télécharger des fichiers au format .fla pour la plupart des techniques que vous souhaitez apprendre,
mais vous pouvez aussi visualiser simplement le swf dans une popup (fenêtre supplémentaire de taille réduite).
Télecharger un fichier au format .fla dans une archive zippée.
Télecharger un fichier au format swf (Clic-droit puis "Télécharger...").
Compatible Flash 5
Compatible Flasf MX
Ouvrir une pop-up
Fichier texte à télécharger contenant un script
Retour au sommaire
Voici une petite animation test : Allumez votre webcam et lâchez vous !
file://localhost/Volumes/BIBLIOTHEQUE/Sites/YAZO.NET%20v3/Yazo3/pages_flash/TMPrdewa6grk1.htm
Page 1 sur 36
1/12/02 23:26
Interpolations
Archives Flash 5
Objets
[Table des matières]
# Introduction à Flash MX
[11-04-02]
-
A quoi sert le logiciel Flash ?
Formats de fichier
Comment exploiter les SWF ?
Comment utiliser Yazo.net pour apprendre Flash ?
En quoi la partie "Flash" de Yazo.net est différente d'un cours (avec un prof) ou d'un livre ?
A quoi sert le logiciel Flash ?
Il s'agit d'un logiciel qui permet de réaliser des animations de différents types : Gif animé, dessins animés, présentations de type
"slide show" comparables à celles de Microsoft PowerPoint ©. Dans ces exemples, vous pouvez constater que ces types d'animation
ne sont pas ou peu interactives. Flash possède un langage de programmation appelé ActionScript, il permet de développer des
animations interactives. Ce degré d'interactivité varie selon le niveau de difficulté des scripts placés dans une animation. Ainsi, vous
pouvez réaliser de simples "slides shows" avec quelques effets de rollover et un système de navigation plus ou moins linéaire mais
vous pouvez également développer des applications complexes faisant appel à une programmation orientée objet.
Formats de fichier
Lorsque vous enregistrerez vos animations (fichiers), vous obtiendrez le format de fichier .fla. Lorsque vous publierez celles-ci, le
format sera alors un .swf.
Icône d'un fichier au format .fla
Icône d'un fichier au format .swf
Comment exploiter les SWF ?
Lorsque vous avez publié un fichier au format SWF, vous pouvez le placer dans un page HTML au même titre qu'une image au format
gif ou jpeg. Toute personne qui consulte une page HTML comprenant un SWF doit posséder un plug-In ou un ActiveX sur sa machine
pour être capable de lire ce format de fichier. Un SWF peut aussi être lu localement, sur une machine à condition d'utiliser le playeur
(Lecteur) Flash. Il s'agit d'une application livrée avec le logiciel qui permet de lire les fichiers au format SWF. Pour finir, vous pouvez
aussi transformer un SWF en une application autonome qui se passe alors du player.
Comment utiliser Yazo.net pour apprendre Flash ?
Nous n'avons pas la prétention de pouvoir vous apprendre Flash au travers de ce tutoriel, cependant, plusieurs mails de témoignages
nous sont parvenus depuis bientôt 3 ans pour nous remercier. Certains remerciements précisent que ces internautes ont appris Flash
grâce à Yazo.net. Nous devons reconnaître qu'il leur aura sûrement fallu beaucoup de patience car les ressources disponibles sur notre
site sont vraiment nombreuses :)
En haut de cette page, vous pouvez constater qu'un sommaire vous propose de vous rendre dans différentes parties. Celui-ci est
disponible à partir de n'importe quelle page du site. L'ordre dans lequel les 12 parties sont présentées correspond au déroulement d'un
cours (exception faite pour les 2 dernières). L'équipe de Yazo.net est composée de développeurs-enseignants, c'est pourquoi la
structure du site est très précise. "Technique" et "Pédagogique" sont les maîtres mots de l'équipe.
Si vous êtes néophytes et ne connaissez pas du tout Flash, lisez toutes les parties ci-desssous pour apprendre la partie "Animation" du
logiciel :
Page 2 sur 36
-
1/12/02 23:26
Symboles et occurrences
Gestion de la timeline
Interpolations
Masque et guide de déplacement
Programmer en Actions Scripts
Actions Niveaux I
Lorsque vous maîtriserez toutes les techniques enseignées dans ces différentes parties, vous commencerez alors à être autonome sur
ce logiciel, vous pourrez alors vous pencher sur les ActionScripts.
En quoi la partie "Flash" de Yazo.net est différente d'un cours (avec un prof) ou d'un livre ?
Comme nous vous le disions plus haut, nous n'avons pas la prétention de pouvoir remplacer un cours dispensé par un formateur ou un
enseignant en face à face. Tout dépend de votre caractère et de votre personnalité. Si vous avez la patience de lire de nombreuses
pages d'explications et si vous comprennez vite ce qu'on vous explique, ce site peut effectivement vous suffir pour une acquisition des
bases. Bien sûr, vous ne devez pas être néophyte en matière d'informatique, vous n'êtes pas à Lourdes !
Un livre acheté en librairie (où ailleurs) offre l'avantage d'une consultation plus agréable et plus souple. On ne remplacera jamais le
papier. Vous qui lisez cette page, n'utilisez-vous pas le web en complément de vos lectures (livres, magazines) pour obtenir des
informations ? Il est impossible de consulter un site dans les transports en commun(ou ailleurs) et il est tellement plus pratique de
pouvoir consulter une page web pour vérifier ou apprendre une technique rapidement alors qu'on est face à sa machine.
Interpolations
Archives Flash 5
Objets
# Interface du logiciel
[11-04-02]
-
Pourquoi apprendre à reconnaitre les différentes parties de l'interface ?
Interface
La scène
Barre d'outils
La palette Propriétés
Le scénario (la timeline)
Pourquoi apprendre à reconnaitre les différentes parties de l'interface ?
L'un des premiers freins pour l'apprentissage d'un logiciel est relatif à l'interface. En effet, si vous apprennez un logiciel en ayant l'impression
que son interace est complexe ou obscure, vous apprendrez moins vite car inconsciement vous serez "moins à l'aise". Si en revanche, vous
savez vous repérer dans l'interface d'un logiciel, même si vous ne connaissez pas exactement la fonctionnalité de toutes les palettes et
commandes des menus, vous ne vous sentez pas "perdu". La sensation de difficulté passe par la méconnaissance d'une matière, d'un
domaine, d'une technique.
C'est pourquoi il est très important d'apprendre à reconnaitre les différentes parties de l'interface du logiciel sans trop rentrer dans les
détails. Pour commencer, sachez qu'il vous sera très difficile d'aborder ce logiciel si vous ne disposez pas d'un écran permettant d'afficher
une résolution minimum de 1024x768.
Interface
Interface
Lorsque vous lancez Flash pour la première fois vous constaterez que l'interface possède les éléments suivants :
- Une zone de travail (rectangle de couleur blanche) appelée la scène.
- Une barre d'outils à gauche de l'écran.
Page 3 sur 36
1/12/02 23:26
- Une palette dans le sens de la largeur (en bas de l'écran) appelée Palette des Propriétés.
- Des palettes (à droite de l'écran) diverses.
- Une zone qui présente un quadrillage et qui est rattachée à la scène (en haut de l'écran) appelée le scénario ou Timeline.
La scène
Il s'agit de la zone de travail sur laquelle se déroulera votre animation. Elle est comparable à une feuille au format A4 lorsque vous travaillez
dans un document Microsoft Word ©. Ce qui est placé en dehors de cette zone est dans la plupart des cas invisible dans le SWF final (fichier
généré par Flash, format reconnu dans une page HTML). Vous pouvez configurer les dimensions et la couleur de la scène. Précisons que l'une
des caractéristiques de Flash est de travailler en vectoriel. Tant que vous n'importez pas d'images bitmap dans vos animations, ces dernières
peuvent être redimmensionnées sans aucune perte de qualité. De ce fait, lorsque vous créez une animation vous devez régler les dimensions
de la scène mais ce qui importe le plus est le rapport de votre scène. Vous pouvez ainsi régler les dimensions d'une scène indifférement à
200x150 pixels ou 800x600 pixels (dans cet exemple, nous avons un rapport 4/3).
> Méthodologie : Configurer la scène (Taille et couleur)
1. Double-cliquez sur la case qui affiche la cadence de l'animation (Img.1)
2. Réglez la largeur, la hauteur et la couleur de la scène (Img. 2)
Img.1
Img. 2
> Options supplémentaires :
1
1
2
3
4
5
:
:
:
:
:
2
3
4
5
Pemet de remonter d'un niveau lorsque vous éditez un symbole imbriqué
Affiche la séquence (scène) ou le symbole en cours d'édition
Permet de sélectionner une séquence
Permet de sélectionner un symbole afin de l'éditer.
Zoomer sur la scène
La barre d'outils
Barre d'outils
Dans l'ensemble, son utilisation est semblable à toutes celles que vous utilisez dans les autres logiciels. Voici tout de même quelques outils
dont la fonctionnalité est propre à Flash (ou peu exploitée dans les autres logiciels).
Outils de transformation libre.
(Redimensionner, rotation,
inclinaison).
Outils d'édition de dégradé? Lorsqu'une
forme est remplie d'un dégradé, utilisez
cet outil pour changer la direction et la
taille du dégradé (Rayon).
Page 4 sur 36
1/12/02 23:26
Un clic sur l'une des deux
cases de couleurs (copie
d'écran précédente) vous
affiche une palette où vous
pouvez choisir une teinte.
Vous pouvez aussi cliquer sur
la case située en haut à
droite, vous obtiendrez alors
une fenêtre dans laquelle
vous composerez votre propre
couleur. Les dégradés ne sont
disponibles que pour les fonds
de forme et non les contours.
La case de couleurs du haut
permet de définir la couleur des
contours de forme et des tracés
réalisés avec l'outil trait ou
crayon. La case du dessous définit
la couleur utilisée dans le fond
des formes et la couleur de texte.
Lorsque vous souhaitez lisser vos tracés,
utilisez l'un de ces deux outils.
Cette case permet de définir la tolérance de
remplissage avec le pot de peinture. Plus les
tracés sont ouverts, plus vous devez
sélectionner une option dans le bas du menu.
Sélection automatique du noir en couleur de
contour et du blanc en couleur de fond/Affecter
du vide comme couleur de fond ou de contour/
Intervertir les couleurs de fond et de contour.
L'encrier permet d'attribuer une épaisseur et une
couleur de contour alors que le pot de peinture
permet de remplir une forme d'un aplat de couleur
ou d'un dégradé.
Attention : Ne réalisez pas de tracés contenant trop de segments. Plus les traits sont nombreux dans un tracé, plus vos
animations seront lourdes.
Attention : L'utilisation des dégardés alourdit considérablement le poids de vos animations.
Outil de magnétisme. Permet de placer avec précision vos sélections sur la scène.
Palette(s) Propriétés
Lorsque vous devez configurer (régler) certains paramètres de votre animation, vous devez saisir des valeurs et faire le choix de certaines
options à un endroit bien précis de l'interface. La palette Propriétés sert donc à paramétrer votre sélection. En effet, lorsque vous
sélectionnez un texte, une occurrence, la scène (par un clic sur la scène), une image clé, etc, cette palette s'adapte et affiche différentes
configurations (aspects). Les copies d'écran ci-dessous vous présentent différents aspect de la palette Propriété en fonction de la sélection :
- Texte statique : Texte d'affichage simple, titres, paragraphes, …
- Texte dynamique : Textes pouvant être modifiés dynamiquement à partir des Actions Scripts.
- Occurrence (Clip) : Représentation d'un symbole sur la scène.
- Image clé : Image modifiable dans la timeline à partir de la scène.
Page 5 sur 36
1/12/02 23:26
- Scène : Attributs de la scène tels que sa taille, sa couleur et sa cadence.
- Forme : Forme créées à partir de outils de dessin de Flash (ou importées puis séparées).
Scénario ou Timeline
La timeline est donc la partie de l'interface qui est consacrée au contrôle de vos animations. Vous pouvez comparer chaque cellule (sur un
même calque) de cette timeline à une image que vous voyez sur un film.
Vous pouvez faire varier la vitesse de déplacement de la tête de lecture de la façon suivante :
> Méthodologie : Configurer la cadence de l'animation
1. Double-cliquez sur la case qui affiche la cadence de l'animation (Img.1)
2. Réglez la vitesse de déplacement de la tête de lecture (Img. 2)
Img.1
Img. 2
N.B. : Il est conseillé de ne pas garder 12 images par seconde, c'est à dire la valeur par défaut. Optez plutôt pour une valeur
de 24 ou 36 ips (fps).
Voyons en détails les différentes parties de la timeline....
Page 6 sur 36
1/12/02 23:26
Les calques : Lorsque vous composerez vos écrans il sera fortement conseillé de placer sur ces calques séparés, les éléments
qui n'ont pas de points communs. Exemple : Placer tous les éléments d'un décor sur le même calque, les textes sur un
même calque, les images sur un même calque, les boutons sur un même calque, etc. Ce n'est qu'un exemple. vous pourriez
opter pour la solution qui consiste à placer chaque texte sur un calque, chaque bouton sur un calque, etc.
Une animation est composée de différentes parties qu'il faut
généralement placer sur différents calques afin de facilter la
construction d'un écran (mise en page).
Si vous souhaitez déplacer une occurrence sur un calque seul, vous pouvez effectuer un clic-droit (CTRL-Clic sur Mac) sur une
occurrence et sélectionner la commande Répartir vers les calques. Voici la procédure en images.
> Méthodologie : Créer un calque automatiquement et y placer une occurrence.
1. Un calque contient un élément de
décor (barre verte) et un texte.
2. Effectuez un clic droit sur
l'occurrence du texte et sélectionnez
la commande répartir vers les
calques.
3. Un nouveau calque se créer
automatiquement. Il porte le nom de
l'occurrence ou de la première ligne
lorsqu'il s'agit d'un texte.
Une image est constituée de l'ensemble des
éléments contenus sur la scène et répartis sur les
différents calques.
Pour les 3 options ci-dessous, cliquez sur l'une des pastilles noires ou sur l'un des carrées de couleur.
Oeil : Permet d'afficher ou
masquer un calque.
Verrou : Permet de verrouiller
un calque. Vous ne pouvez plus
éditer le calque (placer ou créer
des élements sur la scène, ni
déplacer, ni même supprimer)
Carré : Cette option permet de
visualiser les calques en mode
tracé. Vous ne voyez alors plus que
le contour du contenu des calques.
Remarque : Si vous cliquez sur l'oeil qui se trouve en haut de la colonne de points, vous masquez/affichez tous les calques
d'un seul clic. Idem pour le verrou et le mode tracé (carré).
lorsque votre animation contient un nombre important de calques, vous
pouvez alors regrouper certains calques dans un même dossier.
- Gestion des calques :
: Créer un nouveau calque
: Ajouter (associer) un guide de mouvement à un calque.
: Créer un dossier afin de regrouper un ou plusieurs calques.
Page 7 sur 36
1/12/02 23:26
: Supprimer un calque.
- Onions skins et tête de lecture :
: Lorsque vous avez plusieurs images et images clés dans votre scénario, ces onions skins vous permettent de
toutes les visualiser en même temps (sur l'image sur l'aquelle vous êtes).
Les 2 premiers boutons vous permettent d'afficher les images qui suivent et précèdent l'image en cours (Img 1 et 2). Le 3e
et dernier permet d'afficher uniquement les images clés. Vous pouvez ainsi combinez un affichage des images clés avec les
images intérmediaires.
Img. 1 : Affichage des images qui précèdent l'image sélectionnée Img. 2 : Affichage des images en mode tracé qui précèdent l'image sélectionnée Img. 3 : Affichage des images clé de la timeline -
Img. 1
Img. 2
Img. 3
: Menu d'options des Onions skins. Menu sans grand interêt pour les novices.
: Cadence de l'animation. Rappelons qu'un double clic sur le chiffre permet d'ouvrir la fenêtre de paramétrage
de l'animation (dimension, couleur et cadence).
: Temps écoulé depuis le début de l'animation. Position de la tête de lecture/début de l'animation.
- Zoom sur la timeline : Lorsque vos animations contiennent un nombre important d'images, il est alors intéressant de
changer l'échelle du scénario afin de visualiser plus d'images. Les copies d'écrans ci-dessous vous montre les différents choix
de menu local déroulant…
-
Un clic sur le bouton à droite de la timeline permet de modifier son echelle (Img. 1)
Affichage des images de la timeline en mode Normales (Img.2)
Affichage des images de la timeline en mode Minuscules (Img.3)
Affichage des images de la timeline en mode Petites (Img.4)
Affichage des images de la timeline en mode Moyennes (Img.5)
Affichage des images de la timeline en mode Grandes (Img.6)
Img. 1
Img. 2
Img. 5
Img. 3
Img. 6
Img. 4
Le mode "Courtes" : Il permet de réduire la taille des calques dans le sens de la hauteur. Pour une même hauteur de la
timeline, il est ainsi possible de visualiser un plus grand nombre de calques sans changer pour autant le zoom (Minuscules >
Grandes). (Img. 7)
Page 8 sur 36
1/12/02 23:26
Img. 7
Le mode "Aperçu" : Il permet d'afficher à l'intérieur du scénario (Img. 9) le contenu de la scène (Img. 8).
Img. 8
Interpolations
Archives Flash 5
Img. 9
Objets
# Manipulation du texte
[11-04-02]
-
Insérer du texte dans une animation
Mise en forme d'un texte
Options de texte statique
Options de texte dynamique/de saisie
- Associer un ascenseur à une zone de texte
- Transformer du texte en forme
- Zone de texte en tant qu'instance
Insérer du texte dans une animation
Lorsque vous tapez un texte sur la scène, vous pouvez l'utiliser de 3 manières différentes.
Texte statique : Vous l'utilisez comme un texte de "décoration" (titres, paragraphes de texte à lire).
Texte dynamique : Il s'agit d'une zone de texte sur la scène qui porte un nom de variable et ou d'instance (occurrence). Son contenu peut alors
être modifié à partir des ActionScripts. L'instance peut également être manipulée comme une occurrence de type clip ou bouton.
Texte de saisie : Cette zone de texte permet de donner à l'utilisateur la possibilité d'éditer du texte (saisir un texte, un mot de passe, etc…).
La technique d'insertion d'une zone de texte sur la scène est
très simple et peut se faire de 2 façons.
- Un simple clic sur la scène puis vous tapez votre texte,
vous devez alors taper sur la touche Entrée pour revenir à la
ligne.
- Vous définissez une zone rectangulaire (avec l'outil texte,
comme si vous le faisiez avec l'outil rectangle) qui définira
la largeur de la zone de texte. Lorsque vous tapez votre
texte, le retour à la ligne se fait alors automatiquement.
Page 9 sur 36
1/12/02 23:26
Texte statique
Texte dynamique
Un texte statique présente
sa
poignée
de
redimensionnement
en
haut à droite de la zone de
saisie.
Dans le cas d'un texte
dynamique,
cette
même
poignée se retrouve en bas.
Indice supplémentaire, u n
texte dynamique peut porter
un nom de variable et
d'instance. (Cf. Options de
texte dynamique)
Mise en forme d'un texte
La mise en forme est très simple, nous ne nous attarderons donc pas sur les mises en formes liées aux polices, tailles, styles, etc…
Présentons plutôt certaines particularités en commençant par la position d'une zone de texte sur la scène.
Position du texte sur la scène : Le coin supérieur gauche du rectangle qui entoure un texte représente le point 0,0 (x,y). Si vous souhaitez donc
placer un texte à 90 pixels du bord gauche de la scène et à 74 pixels du haut de la scène (Img. 1.1), réglez la configuration de la palette des
propriétés comme dans la copie d'écran ci-dessous (Img. 1.2).
Reconnaître un texte
Cette copie d'écran d'un coin de la
scène vous montre comment se
calculent les coordonnées x et y d'une
zone de texte. Par ailleurs, un texte
dynamique ou de saisie qui n'est pas
sélectionné s'affiche dans un cadre en
pointillés noirs (Aucun cadre n'apparait
autour d'un texte statique lorsqu'il n'est
pas sélectionné). Un cadre bleu indique
qu'un texte est sélectionné
Img 1.1
Img 1.2
Les réglages x et y d'une occurrence Attention : N'utilisez pas les valeurs L (pour largeur) et H
de type texte se font par rapport au (pour hauteur) car elles anamorphosent vos formes et
coin supérieur gauche de la scène et occurrences.
de l'occurrence elle-même.
Vous pouvez le faire uniquement si vous souhaitez réellement
transformer vos textes.
Texte sélectionnable : Vous avez la possibilité de rendre un texte "sélectionnable" avec le curseur de la souris
. Cela premet à l'utilisateur de
copier coller ce qui se trouve dans une zone de saisie ou un texte dynamique.
Flash - Html : Pour conserver l'interprétation de certaines balises HTML dans les zones de texte dynamique et de saisie, vous devez cliquer sur le
bouton
. Seuls les balises et attributs HTML suivants sont supportées : <A>, , , , , , 
et - ALIGN, LEFTMARGIN, RIGHTMARGIN, INDENT et LEADING.
Cadre et fond aux textes dynamiques/de saisie : Cliquez simplement sur ce bouton
. cette option est très importante lorsqu'il s'agit d'un texte
de saisie qui n'est pas matérialisé dans l'interface. Dans certains cas, si vous n'affichez pas le cadre et le fond, l'utilisateur est géné car il ne voit
pas où se trouve la zone de saisie. Pour changer la couleur du fond et le style/épaisseur du cadre, faites votre propre rectangle avec l'outil
rectangle sans oublier de masquer le fond et le cadre que vous venez d'afficher avec le bouton ci-dessus.
Formats de paragraphe : Pour une mise en forme du texte plus affinée, vous pouvez également cliquer (après avoir sélectionné votre texte) sur
les boutons Format... et Caractère... qui se trouvent dans la palette des Propriétés.
Page 10 sur 36
1/12/02 23:26
Format de paragraphe
Précisons tout de même
quelques petits points...
- L 'indentation correspond au
décalage de la première ligne
d'un paragraphe.
- Les
qu'à
vous
d'une
marges n'ont d'interêt
partir du moment où
demandez l'affichage
bordure et d'un fond.
Dans l'exemple ci-contre, le retrait de la première ligne de paragraphe
présente une indentation de 20 pixels. (Dans notre exemple, la couleur du
fond de la scène a simplement été réglé en gris afin que vous visualisiez le
contour plus facilement).
Dans cet autre exemple, une marge de gauche de 10 pixels a été affecté au
texte. Un fond blanc et un contour a été appliqué au texte dynamique (3e
icône de cette série de boutons
).
Options de texte statique
Vous disposez d'un grand nombre de réglages qui vont de l'attribution d'une adresse mail à un texte (un ou plusieurs mots) au sens d'affichage
(lecture) du texte.
Sens du texte : La copie d'écran ci-dessous vous affiche les différentes possibilités d'affichage d'un texte verticalement. Elles ont toutes plus ou
moins de sens mais elles ont le mérite d'exister. Une écriture Made in Japan, ne l'oublions pas !!!
La copie d'écran ci-contre vous présente les différentes
possibilités d'affichage d'un texte. Lorsque vous avez
sélectionné votre texte, choisissez l'une des 3 possibilités
via le bouton ci-dessous. Il est probable que vous ayez à
redimensionner votre zone de texte après votre choix.
Interlettrage ou approche de groupe : Si vous souhaitez augmenter l'espace placé entre les caractères, vous pouvez alors utiliser le bouton cidessous. Dans notre exemple, l'interlettrage est de de 12.
URL : Pour affecter une adresse web à un texte (un mot, un caractère, un paragraphe), utilisez la zone de saisie ci-dessous.
N.B. : Il est important de préciser que vous pouvez placer dans cette zone, n'importe quelle adresse !!! Oui, vous l'avez compris, cela sous entend
que vous pouvez faire référence à une adresse mail, un script javascript, des paramètres à passer dans une url (ex. mailto:[email protected] en
lieu et place de http://www.yazo.net de l'exemple ci-dessus).
Options de texte dynamique ou de saisie
Dans un texte dynamique ou de saisie, il est impossible d'appliquer un interlettrage, d'attribuer une adresse mail ou bien même de changer le
Page 11 sur 36
1/12/02 23:26
sens du texte. En revanche, d'autres réglages sont possibles.
Types de zones de texte : Lorsque vous définissez une zone de texte qui sera remplie dynamiquement (par les ActionScripts) ou par l'utilisateur
(saisie),
vous
pouvez
définir
la
largeur
mais
vous
ne
savez
pas
combien
de
lignes
contiendra
le texte. Vous devez sélectionner la commande Multiligne ou Multiligne sans retour afin que votre texte s'affiche complètement. Dans le cas
contraire, seul la première ligne sera visible.
Pour des zones de texte de saisie, vous pouvez aussi choisir l'option "Mot de passe" qui aura pour effet de masquer la saisie de l'utilisateur de
cette zone.
Pour les textes de saisie, vous pouvez préciser le nombre de caractères maximum que l'utilisateur pourra saisir.
Nom de variables et d'instances : Lorsque vous devrez manipuler certains textes présents sur la scène (changer le contenu d'une zone de texte,
changer sa position sur la scène et d'autres réglages), vous devez renseigner le nom de la variable ou de l'instance d'un texte.
Img 2.1
Un nom d'instance attribué à
un texte dynamique ou de
saisie
permet
de
le
manipuler (ex. : position du
texte sur la scène)
Img 2.2
Une variable peut être
matérialisée su la scène par
une zone de texte dynamique.
Lorsqu'une zone de texte de saisie est placée sur la scène, il est impossible de savoir à l'avance quelle sera le texte tapé par l'utilisateur. Il est
alors possible d'encapsuler les caractères d'une police dans le fichier SWF que vous gênerez. Pour choisir uniquement certains caractères,
sélectionnez le texte de saisie auquel vous souhaitez affecter certains caractères puis cliquez sur le bouton Caractères disponible dans la palette
des Propriétés.
Associer un ascenseur à une zone de texte
Vous aurez parfois besoin d'associer (appliquer) un ascenseur à une zone de texte dynamique ou de saisie. (Il est impossible d'appliquer un
ascenseur à un texte statique). La technique est des plus simples :
> Méthodologie : Associer un ascenseur à une zone de texte
Page 12 sur 36
1/12/02 23:26
1.
2.
3.
4.
5.
Créez une zone de texte sur la scène (dynamique ou de saisie)
Affichez la palette des Composants
Sélectionnez la commande Défilant dans le menu Texte
Faites glisser le composant de type ScrollBar à droite ou en bas de la zone de texte
Ajustez la largeur et la hauteur de votre zone de texte qui contient ce nouvel ascenseur.
La copie d'écran ci-contre (Img 3.1) est une zone
de texte (cadre bleu) sur la quelle vous devez faire
glisser le composant de type ScrollBar (Img 3.2).
Remarquez que le glisser-déplacer se fait sur la
zone de texte et non pas en dehors de la zone de
texte.
Img 3.2
Img 3.1
A partir de ce moment là, lorsque vous importerez du texte ou l'utilisateur tapera son texte, si le volume dépasse le nombre de
lignes prévues, l'ascenseur se contrastera pour indiquer qu'il y a une partie du texte qui n'est pas visible (Img 3.3).
Lorsque vous devez place un ascenseur à droite ou
sous un texte dynamique, si vous n'avez rien prévu
dans votre interface, vous pouvez appliquer un cadre
et un fond au texte.
La commande "Défilant" du menu "Texte" permet de
redimensionner une zone de texte (pratique lorsqu'il
y a du contenu à l'intérieur).
Il s'agit d'une petite poignée noire située en bas à
droite de la zone de texte lorsque vous êtes en train
de l'éditer.
Img 3.3
Transformer du texte en forme
Dans certains cas, vous aurez besoin de convertir des caractères en formes. Vous pouvez ainsi traiter chaque caractère
indépendamment mais les manipuler également comme n'importe quelle autre forme.
> Méthodologie : Transformer un texte en formes
1. Sélectionnez la zone de texte à convertir avec la flèche noire
2. Sélectionnez la commande Séparer du menu Modifier
Remarque : Répétez l'étape numéro 2 une deuxième fois car la commande Séparer à pour fonction, la première fois qu'elle est
activée, de convertir un texte en une série de caractères.
Des caractères en formes de formes
Il est difficile de s'en rendre compte sur la
copie d'écran ci-contre mais les caractères de
l'étape "APRES" ne sont que de simples
formes au même titre qu'un rond ou un carré.
Vous pouvez les manipuler avec la flèche
noire ou la blanche.
Lorsque votre texte est enfin vectorisé, vous pouvez manipuler chaque caractère comme une forme.
Zone de texte en tant qu'instance
Nous l'évoquions un peu plus haut dans cette même page, un texte dynamique ou de saisie peut avoir un nom d'instance (ou nom
d'occurrence). Cela vous permet ainsi de manipuler votre texte comme n'importe quelle autre clip ou bouton (depuis Flash MX).
Page 13 sur 36
1/12/02 23:26
Interpolations
Archives Flash 5
Objets
# Manipulation des formes
[11-04-02]
-
Création de formes géométriques
Contour d'une forme et sélection
Fond d'une forme et sélection
Dégradés de couleur
-
Agrandir et faire tourner (rotation) une forme
Inclinaison d'une forme
Symétrie d'une forme
Torsion d'une forme
- Transformer un texte en forme
La plupart des créatifs qui utilisent Flash pour la réalisation de leurs
animations (qu'elles soient interactives ou pas), utilisent des logiciels de
création graphique vectorielle tels que Freehand ou Illustrator. Certains
graphistes préfèrent et aiment travailler avec les outils de création
graphique de Flash car la sensibilité est différente. Les techniques de dessin
avec le pinceau et le crayon sont en effet différent des autres logiciels car
certains réglages permettent d'obtenir un lissage de vos tracés. N'oublions
pas que les caractères d'un mot peuvent aussi être utilisés comme des
formes à partir du moment où vous les avez vectorisés.
Remarque : Lorsque vous sélectionnez une forme, pensez à effectuer un double clic afin
de sélectionner le fond et le contour de la forme ensembles.
Création de formes géométriques
Vous pouvez utiliser n'importe lequel des outils de la copie d'écran ci-dessus. Nous ne développerons pas ici les différents réglages de tous ces
outils mais uniquement certaines spécificités.
Le crayon est comparable à l'outil de la plume , ils permettent tous deux de créer des contours de formes que vous pouvez alors remplir par
la suite avec l'outil pot de peinture . En revanche, l'outil du pinceau permet de créer des formes sans contour. Vous devez l'utiliser en
gardant à l'ésprit que vous pourrez appliquer un contour à ce que vous créez.
L'une
des
options
les
plus
importantes de ces outils de création
est liée au crayon. Lorsque vous
tracez
effectivement
certaines
courbes, vous constaterez que la
tolérance de lissage varie selon le
réglage choisi.
Contour d'une forme
Le contour d'une forme se sélectionne par le biais de la flèche noire (disponible dans la barre d'outils). Un simple clic suffit généralement à
sélectionner le contour d'une forme. Si ce dernier est plus complexe, il vous faudra dans certains cas, double cliquer sur le contour de la forme.
Vous pouvez aussi utiliser la touche Shift pour effectuer une sélection multiple.
Page 14 sur 36
1/12/02 23:26
Pour appliquer une couleur et une épaisseur à un contour, vous devez utiliser l'une des méthodes ci-dessous :
> Méthodologie N°1 : Utilisation de l'encrier
Avec cette méthode, vous pouvez appliquer plusieurs fois la mise en couleur de vos contours.
1.
2.
3.
4.
5.
Sélectionnez l'outil de l'encrier (Img 1.1)
Sélectionnez une couleur via la barre d'outils ou la palette des Propriétés(Img 1.2)
Sélectionnez une épaisseur (Img 1.2)
Sélectionnez un style de trait (Img 1.2)
Cliquez sur le ou les contours à modifier
> Méthodologie N°2 : Attribution par sélection
Avec cette méthode, vous pouvez tester plusieurs styles et couleurs de contours plus facilement et rapidement.
1.
2.
3.
4.
Sélectionnez
Sélectionnez
Sélectionnez
Sélectionnez
le contour de forme à traiter
une couleur via la barre d'outils ou la palette des Propriétés(Img 1.2)
une épaisseur (Img 1.2)
un style de trait (Img 1.2)
Img 1.1
Img 1.2
Fond d'une forme
Le fond d'une forme se sélectionne par le biais de la flèche noire (disponible dans la barre d'outils). Un simple clic suffit à sélectionner le fond
d'une forme. Pour la sélection de plusieurs fonds de formes, utilisez la touche Shift.
Pour la mise en couleur du fond d'une forme, utilisez l'outil du pot de peinture (Img 2.1). Vous avez également deux techniques d'application.
> Méthodologie N°1 : Utilisation du pot de peinture
Avec cette méthode, vous pouvez appliquer plusieurs fois la mise en couleur de vos fonds de formes.
1. Sélectionnez l'outil du pot de peinture(Img 2.1)
2. Sélectionnez une couleur via la barre d'outils ou la palette des Propriétés(Img 2.2)
3. Cliquez sur le ou les fonds à modifier
> Méthodologie N°2 : Attribution par sélection
Avec cette méthode, vous pouvez tester plusieurs couleurs de contours plus facilement et rapidement.
1. Sélectionnez le fond de forme à traiter
2. Sélectionnez une couleur via la barre d'outils ou la palette des Propriétés(Img 2.2)
Img 2.1
Img 2.2
Dégradés de couleur
Vous n'êtes pas obligés d'appliquer uniquement des aplats de couleurs aux fonds de vos formes. Les dégardés permettent de placer "du
volume" dans vos formes. De type radial ou linéaire, en couleur ou noir et blanc, ce sont autant de possibilités que de résultats toutes autant
différentes les unes des autres.
> Méthodologie : Appliquer un dégradé
Au début de cette partie sur le "Fond d'une forme", nous avons vu comment appliquer une couleur de fond. Réutilisez l'une des
deux techniques en tenant compte de ce qui suit :
Page 15 sur 36
1/12/02 23:26
En regardant de plus près, au bas
de la palette des couleurs
destinées aux fonds de formes
(Pot de peinture et non encrier),
vous avez des dégradés déjà
préréglés (Img 3.1).
Ne vous limitez pas à ces choix,
composez vous même vos propres
dégradés (Img 3.2) à l'aide de la
palette du mélangeur de couleur.
Ne cherchez pas la palette
"Dégradés de couleurs" mais bel
et bien la palette "Mélangeur de
couleurs"
Img 3.1
Img 3.2
Lorsque vous avez appliqué un dégradé de couleurs à un fond de formes, vous avez la possibilité de modifier son apparence. Afin que les
modifications soient visibles en temps réel, suivez la méthodologie ci-dessous :
> Méthodologie : Sélectionner une forme et masquer la sélection
Lorsque vous sélectionnez un fond de forme, un motif s'incruste sur la forme pour vous indiquer qu'une sélection est en cours
(Img 4.1).
1. Utilisez le raccourci clavier Ctrl-H (PC) ou Commande-H (Mac)
La quadrillage blanc qui apparaît sur la
forme de droite indique qu'une sélection
est en cours. Masquer la sélection
permet de visualiser votre occurrence ou
votre forme sans le quadrillage blanc cicontre.
Img 4.1
Lorsque votre sélection est masquée, vous pouvez éditer (modifier) votre dégradé.
Réglage d'une couleur : Un dégradé contient au minimum une couleur de départ et une couleur d'arrivée. Pour modifier l'une des deux, suivez
la méthode ci-dessous :
> Méthodologie :
1. Via la palette "Mélangeur de couleurs", cliquez sur l'une des deux étapes (Img 5.1)
2. Sélectionnez une couleur via le mélangeur ou composez la vous-même
Un clic sur le carré situé sous le curseur de la copie
d'écran ci-contre permet de sélectionner l'étape du
départ. Pour sélectionner une couleur, vous disposez de
3 méthodes. La composer, la sélectionner via le
nuancier (en haut à gauche de la copie d'écran), la
sélectionner via le mélangeur (en bas de la copie
d'écran, où se trouve un pointeur)
Img 5.1
Ajout d'une couleur : Pour ajouter une étape, la technique est très simple car il vous suffit de faire un simple clic à l'endroit où vous souhaitez
voir la nouvelle étape (Img 5.2).
Page 16 sur 36
1/12/02 23:26
Img 5.2
Lorsque vous avez placé une (ou plusieurs) étape(s), vous pouvez saisir à nouveau le petit carré qui représente l'étape et sa couleur et le faire
glisser le long du dégradé, vous faites ainsi varier le dégradé.
Suppression d'une étape : Maintenez simplement le clic sur l'étape à supprimer et faite la glisser vers le bas en dehors de la zone horiztontale
où se trouvent les étapes.
Agrandir et faire tourner (rotation) une forme
Lorsque vous créez des formes avec les outils de dessin de Flash ou si vous importez des tracés d'Illustrator/Freehand, vous pouvez les
agrandir ou les faire tourner avec l'outil de transformation libre (Img 6.1).
> Méthodologie : Agrandir ou faire subir une rotation à une forme
1.
2.
3.
4.
Sélectionnez une forme
Sélectionnez l'outil de transformation libre (Img 6.2)
Placez votre curseur sur l'une des poignées pour agrandir ou rétrecir une forme (Img 6.3)
Placez votre curseur à l'exterieur de l'un des 4 coins pour faire tourner (Img 6.4)
Img 6.2
Img 6.3
Img 6.4
Une autre technique plus rapide et plus précise (si vous recherchez une mise à l'échelle ou une rotation paramétrée) consiste à sélectionner
votre tracé puis vous effectuez un CTRL-ALT-S (PC) ou Commande-ALT-S (Mac). Vous obtenez alors une boite de dialogue dans laquelle vous
pouvez préciser un taux d'agrandissement (>100) ou de réduction (<100) et/ou un degré de rotation.
La palette "Transformer" (Img 6.5) permet également d'effectuer rapidement une mise à l'échelle et une rotation.
Pour anamorphoser votre forme décochez la case
"Contraindre" qui vous permet alors de modifier les
echelles verticales et horizontales indépendament.
Essayez les 2 boutons situés en bas à droite de la
palette, ils vous reserverons 2 petites surprises !
Img 6.5
Inclinaison d'une forme
Avant de commencer la lecture de ce point, lisez ou relisez la technique exposée dans la partie précédente qui consiste à agrandir ou tourner
une forme.
Lorsque vous avez donc sélectionné l'outil de transformation libre, vous devez placer le curseur de la souris entre deux poignées de
redimensionnement. Un curseur en forme de flèches inversées apparait alors, vous pouvez cliquer et faire glisser le curseur pour incliner la
forme.
Comme le montre la copie d'écran ci-dessus (Img 6.5), un bouton radio permet d'acceder à deux cases de saisie pour une inclinaison
paramétrée.
Symétrie d'une forme
Il n'existe pas de tel outil, en revanche vous pouvez utiliser les techniques de mise à l'échelle pour obtenir une symétrie. L'outil de
transformation libre et/ou la palette "Transformer" permettent d'obtenir le résutat ci-dessous :
Page 17 sur 36
1/12/02 23:26
Dans l'exemple ci contre, nous
saisissons la poignée située à gauche
du texte (texte vectorisé dans cet
exemple) puis nous la tirons vers la
droite. Vous avez l'impression de
réduire la largeur de votre sélection
mais continuez de l'autre côté de
votre forme.
Lorsque vous relachez votre clic, la
symétrie s'est effectuée. Cette
technique présente l'inconvénient de
ne pas pouvoir contrôler le respect de
l'échelle. Vous risquez en effet
d'obtenir une symétrie avec une
échelle qui n'est pas toujours de -100
%.
Vous pouvez et devez dans certains cas, utiliser la palette "Transformer" pour faire subir une symétrie à une sélection. Indiquez dans ce cas,
une valeur négative (ex. : -100 %) dans les cases prévues pour la mise à l'échelle (Img 6.6).
Décochez la case contraindre, vous pouvez
alors indiquer -100 dans l'une des 2 cases
pour obtenir une symétrie horizontale ou
verticale.
(Img 6.6)
Torsion d'une forme
Le texte ci-contre a été vectorisé, il va nous
servir de base d'exemple pour les déformations
de cette partie. Rappelons que les options
"Déformer" et "Enveloppe" de l'outil
"Transformation libre" ne sont accéssibles qu'à
partir du moment ou l'outil "Transformation
libre est sélectionné".
Vous avez deux types de déformations qui sont utilisables avec des formes vectorielles ou des images bitmap qui ont préalablement été
vectorisées par la commande "Tracer le bitmap..." du menu Modifier. Dans notre exemple, nous choisissons volontairement un texte vectorisé
car le résultat obtenu est assez parlant.
> Méthodologie : Tordre une forme avec l'outil Torsion (Img 7.0)
1.
2.
3.
4.
5.
Cliquez sur l'outil Déformer(Img 6.8) situé en bas à gauche de la barre d'outils*
Saisissez l'une des poignées situées sur le contour de la sélection
Tirez pour déformer (Img 7.0)
Img 6.7
Img 6.8
Img 6.9
Un clic sur une poignée
située sur un coin déforme
les 2 côtés qui s'y
rattache. Un clic sur une
poignée située sur un côté
incline et déforme la
sélection.
Img 7.0
Page 18 sur 36
1/12/02 23:26
> Méthodologie : Tordre une forme avec l'outil Enveloppe
1.
2.
3.
4.
5.
6.
Cliquez sur l'outil Enveloppe (Img 6.9)situé en bas à droite de la barre d'outils*
Saisissez l'une des poignées situées sur le contour de la sélection
Tirez pour déformer (Img 7.1 et 7.2)
Vous pouvez aussi tirer sur les points directeur (Ronds noirs de l'Img 7.3)
Img 7.1
Img 7.2
Img 7.3
Transformer un texte en forme
Voir la partie sur la manipulation du texte "Transformer du texte en forme".
Interpolations
Archives Flash 5
Objets
# Symboles et occurrences
[11-04-02]
-
Définition d'un symbole
Définition d'une occurrence
Création d'un symbole de type bouton
Création d'un symbole de type clip
Création d'une occurrence de texte
Création d'une occurrence de forme
Définition d'un symbole
il est très facile et difficile à la fois de définir la notion de symbole. Difficile car cette notion est abstraite mais facile à partir du moment où
on comprend la notion d'animation et/ou de programmation. Nous pouvons d'ores et déjà dire que tout ce qui bouge dans une animation est
un symbole. Les différents composants d'une animation (décors, personnages et certains textes) sont obligatoirements des symboles afin
qu'ils puissent être animés (voir commandés via les Actions scripts) et/ou réutilisés. Analysons les exemples ci-dessous qui sont extraits du
site ARKIPEL, projet de fin d'année d'étudiants* de l'école des Gobelins :
Page 19 sur 36
Arkipel - Projet de fin d'année d'étudiants.
1/12/02 23:26
Personnage du projet ARKIPEL
* Pierre-Antoine, Fred Bird, Lola, Rémi, Florian.
Exemple 1 : Dans le génerique cicontre, le titre, la soucoupe et les
nuages sont des symboles. Le
fond (décor composé de la mer et
du ciel) n'est pas obligatoirement
un symbole s'il n'est pas réutilisé.
Exemple 2 : En regardant de très
près,
on
constate
que
le
personnage est composé de
plusieurs symboles car les bras, le
corps et la têtes sont animés
indépendament les uns des autres.
Le compteur sur le tableau de bord
(le radar) est aussi un symbole
ainsi que l'ile qui se rapproche.
Exemple 3 : Dans cet exemple, de
nombreux symboles ont été
utilisés. Le crabe orange, les 2
tortues vertes, la mer, le
personnage et la jauge jaune sont
autant de symboles indispensables
pour le fonctionnement de
l'animation. La jauge est contrôlée
par Actions scripts ainsi que le
crabe et le personnage.
Page 20 sur 36
1/12/02 23:26
Exemple 4 : Dans ce village,
chaque individu est un symbole
ainsi que le personnage principal.
Le décor est réutilisé plusieurs fois,
il est donc transformé en symbole.
Remarque : Il est conseillé de créer des symboles pour optimiser la gestion de la mémoire dans les animations Flash.
Nous allons aborder un peu plus bas dans cette page, les procédures de création d'un symbole. Commençons tout d'abord par préciser qu'il
existe plusieurs types de symboles.
Un symbole est une entité qui possède des attributs (type, des dimensions, un point d'alignement). Il en existe de 3 natures différentes.
Le symbole de type clip : Ce même symbole a plusieurs fonctions.
- On peut le comparer à un gif animé,
- Dan la mesure où un clip peut être nommé sur la scène, il est alors possible de le contrôler.
Attention : Dès lors que vous utilisez des clips dans une animation, vous devez prendre l'habitude de tester
votre animation par le raccourci Pomme-Entrée (Mac)/CTRL-Entrée (PC) et non pas Entrée..
Le symbole de type bouton : Ce symbole a pour fonction de reçevoir des clics de la souris, un bouton peut aussi être
survolé.
Le symbole de type graphique : Nous ne nous atarderons pas sur ce dernier car il est peu utilisé. Il présente tout de
même certains avantages pour les novices (configuration des occurrences d'un symbole de type graphique via la palette
Propriétés).
Définition d'une occurrence
Lorsque vous posez un symbole de la bibliothèque sur la scène, vous obtenez une occurrence. Une occurrence est donc une représentation
graphique d'un symbole. L'image d'un acteur sur un écran de cinéma est à l'acteur ce qu'une occurrence est au symbole. Un symbole est
unique dans la bibliothèque mais il peut posséder plusieurs occurrences sur la scène (sur la même image ou plusieurs). Vous pouvez glisser
plusieurs fois un même symbole de la bibliotèque sur la scène ou copier-coller une occurrence.
Une occurrence possède ses propres propriétés telles que ses coordonnées en x et y par rapport au coin supérieur gauche de la scène, ses
dimensions, son nom d'instance (nom d'occurrence).
Dans la version US de Flash MX, on utilise le terme Instance pour traduire une Occurrence. Certains développeurs préfèrent utiliser ce
terme car c'est un mot de vocabulaire employé en programmation orientée objet.
Création d'un symbole de type bouton
Dans les procédures ci-dessous, vous aurez besoin de revenir sur la scène alors que vous êtes en train d'éditer un symbole. Cliquez alors sur
le bouton "Séquence 1". Voir la copie d'écran ci-dessous.
> Méthodologie N°1 : Créer un bouton à partir d'une sélection.
Cette technique consiste à transformer une sélection en un symbole.
1.
2.
3.
4.
Sélectionnez ce que vous souhaitez transformer en symbole sur la scène (une image, un tracé, un texte…)
Tapez sur la touche de fonction F8
Donnez un nom au symbole
Sélectionnez le type "Bouton"
Page 21 sur 36
1/12/02 23:26
5. Sélectionnez la position du point d'alignement
6. Validez
Remarque N°1 : Le nom que vous donnez au symbole ne sert qu'à reconnaitre (différencier) les différents symboles dans la
bibliothèque. Il n'a aucun rapport avec le nom que vous donnerez aux occurrences d'un symbole. Ce nom peut tout de même
être le même (déconseillé pour les novices qui ne font pas encore la différence entre symbole et occurrence).
Remarque N°2 : Le choix du point d'alignement permet de définir la position du centre d'un symbole.
> Méthodologie N°2 : Créer un bouton directement dans la fenêtre d'édition sans présélection.
Cette technique consiste à créer un symbole vide (vierge) puis le "remplir".
1. Tapez sur le raccourci Commande-F8 (Mac) ou CTRL-F8 (PC)
2. Donnez un nom au symbole
3. Sélectionnez le type "Bouton"
5. Validez (Votre timeline n'est alors plus la même (Img 1.2))
6. Créez l'apparence de votre bouton
7. Revenez sur la scène par raccourci Commande-E (Mac) ou CTRL-E (PC) ou par un clic sur le bouton
"Séquence 1".
Img 1.1
L'alignement sert à définir l'axe
d'origine utilisé notament avec
les propriétés _x et _y des
ActionScripts.
L'édition d'un symbole change
l'apparence de la timeline. Vous
n'êtes en effet plus sur la
timeline de la scène mais celle
du bouton.
Img 1.2
Voici un fichier d'exemples, il s'agit d'un swf qui contient plusieurs types de boutons, nous allons voir comment éditer le
bouton que nous venons créer afin d'obtenir ceux ci-dessous.
Dans les exemples ci-dessus, vous pouvez constater qu'il existe plusieurs types de boutons, voici les explications qui vous
permettront de personnaliser l'apparence de vos boutons :
- Bouton simple : Ne changez rien.
- Bouton réactif
1.
2.
3.
4.
Editer votre symbole de type bouton (double-cliquez sur le symbole dans la bibliothèque)
Sélectionnez l'image 2 ("Dessus") (Img 1.2)
Tapez F6
Créez l'apparence du bouton lorsqu'il est survolé
Page 22 sur 36
1/12/02 23:26
5. Revenez sur la scène par raccourci Commande-E (Mac) ou CTRL-E (PC). Vous pouvez aussi
cliquer sur l'onglet "Séquence 1" situé en haut à gauche de la fenêtre dans laquelle se trouve
la scène.
- Bouton animé
1. Editer votre symbole de type bouton (double-cliquez sur le symbole dans la bibliothèque)
2. Sélectionnez l'image 2 ("Dessus") (Img 1.2)
3. Tapez F6
4. Placez un clip sur cette image clé
5. Revenez sur la scène par le raccourci Commande-E (Mac) ou CTRL-E (PC). Vous pouvez
aussi cliquer sur l'onglet "Séquence 1" situé en haut à gauche de la fenêtre dans laquelle se
trouve la scène.
- Bouton reactif + étape cliquée
1. Editer votre symbole de type bouton (double-cliquez sur le symbole dans la bibliothèque)
2. Sélectionnez l'image 2 ("Dessus") (Img 1.2)
3. Tapez F6
4. Créez l'apparence du bouton lorsqu'il est survolé
5. Sélectionnez l'image 3 ("Abaissé") (Img 1.2)
6. Tapez F6
7. Créez l'apparence du bouton lorsqu'il est cliqué
8. Revenez sur la scène par le raccourci Commande-E (Mac) ou CTRL-E (PC). Vous pouvez
aussi cliquer sur l'onglet "Séquence 1" situé en haut à gauche de la fenêtre dans laquelle se
trouve la scène.
- Bouton bascule : Précisons tout d'abord qu'un bouton bascule est un clip contenant 2 images clé avec un
bouton sur chaque (avec des apprarences différentes). Le premier bouton envoie la tête de lecture sur
l'image 2 et réciproquement.
> Méthodologie : Créer un bouton bascule > Un clip avec 2 images clé.
Etape 1 :
1. Créez 2 boutons que vous laissez dans la bibliothèque
3. Sélectionnez le type "Clip"
5. Validez (Votre timeline n'est alors plus la même (Img 1.3)
6. Placez l'un des 2 boutons que vous avez crée sur la croix centrale de votre zone de travail
7. Sélectionnez l'image 2
8. Tapez F6
9. Placez le deuxième bouton sur la croix centrale de votre zone de travail. vous obtenez une
timeline comprenant 2 images clé (Img 1.3.1)
10. Revenez sur la scène par raccourci Commande-E (Mac) ou CTRL-E (PC) ou par un clic sur
le bouton "Séquence 1".
La timeline ci-contre n'est pas celle de
l'animation mais celle du clip. C'est sur celle-ci
que vous devez créer 2 images clé afin d'y
placer un bouton sur chaque.
Votre bouton bascule possède 2 images clé
(Img 1.3.1).
Img 1.3.1
Img 1.3
Etape 2 :
1. Double cliquez sur votre symbole et cliquez sur l'image clé 1 de la timeline
2. Placez la commande stop(); dans la fenêtre des Actions
3. Sélectionnez le bouton de l'image clé 1 et saisissez dans la fenêtre des Actions, le script
ci-dessous
on (press) {
gotoAndStop(2);
Page 23 sur 36
1/12/02 23:26
}
4. Sélectionnez le bouton de l'image clé 2 et saisissez dans la fenêtre des Actions, le script
ci-dessous
on (press) {
gotoAndStop(1);
}
Avant de fermer votre accolade, pensez à ajouter les instructions à exécuter. N'oubliez pas
qu'il y a de fortes chances que vous ayez à utiliser la propriété _root.
- Bouton invisible
Le principe du bouton invisible est simple. Lorsque vous avez besoin de cliquer ou survoler sur une zone de la
scène sans que ce soit "apparement" un bouton, utilisez un bouton transparent. Il apparait en bleu ciel
transparent sur la scène mais pas dans l'animation finale.
Etape 1 :
1.
2.
2.
3.
4.
5.
6.
Créez un rectangle sur la scène (peu importe la couleur)
Sélectionnez le par un double clic avec la flèche noire
Sélectionnez le type "Bouton"
Sélectionnez la position du point d'alignement
Validez
Etape 2 :
1. Double-cliquez sur le symbole que vous venez de créer
2. Faites glisser l'image clé de l'image 1 (Haut) sur l'image 4 (Cliquable) (Img 1.4)
3. Revenez sur la scène par raccourci Commande-E (Mac) ou CTRL-E (PC) ou par un clic sur
le bouton "Séquence 1".
La timeline ci-contre n'est
pas celle de l'animation
mais celle du clip. C'est sur
celle-ci que vous devez
créer 2 images clé afin d'y
placer un bouton sur chaque.
Img 1.4
Remarque : Cette dernière étape "Cliquable" sert en temps normal à définir les zones cliquables d'un bouton.
Dans ce cas, vous ne devez pas dépacer l'image clé mais sélectionner l'image 4 et taper F6 afin de créer une
image clé. Tracez alors un rectangle sur cette image qui définira les zones cliquables. Très utile pour rendre
un texte complètement cliquable (à l'intérieur et entre les caractères).
Création d'un symbole de type clip
> Méthodologie N°1 : Créer un clip à partir d'une sélection.
Cette technique consiste à transformer une sélection en un symbole.
1.
2.
3.
4.
5.
6.
Sélectionnez ce que vous souhaitez transformer en symbole sur la scène (une image, un tracé, un texte…)
Sélectionnez le type "Clip"
Sélectionnez la position du point d'alignement
Validez
Remarque N°1 : Le nom que vous donnez au symbole ne sert qu'à reconnaître (différencier) les différents symboles dans la
bibliothèque. Il n'a aucun rapport avec le nom que vous donnerez aux occurrences d'un symbole. Ce nom peut tout de même
être le même (déconseillé pour les novices qui ne font pas encore la différence entre symbole et occurrence).
Remarque N°2 : Le choix du point d'alignement permet de définir la position du centre d'un symbole.
> Méthodologie N°2 : Créer un clip directement dans la fenêtre d'édition sans présélection.
Cette technique consiste à créer un symbole vide (vierge) puis le "remplir".
Page 24 sur 36
1/12/02 23:26
3. Sélectionnez le type "Clip"
5. Validez
6. Créez l'apparence de votre clip
7. Revenez sur la scène par raccourci Commande-E (Mac) ou CTRL-E (PC). Vous pouvez aussi cliquer sur
l'onglet "Séquence 1" situé en haut à gauche de la fenêtre dans laquelle se trouve la scène.
Dans les deux méthodes présentées ci-dessus, il s'agit de clips ne contenant aucune animation. Vos pouvez donc utiliser l'une de ces deux
méthodologies pour créer des clips que vous souhaitez commander (contrôler sur la scène). Si vous souhaitez à présent créer un clip animé
(comparable à un gif animé), vous devez suivre la procédure suivante :
1. Editer votre symbole de type clip (double-cliquez sur le symbole dans la bibliothèque)
2. Réalisez votre animation sur la timeline du clip (vous nêtes plus sur la scène à ce moment là)
3. Revenez sur la scène par raccourci Commande-E (Mac) ou CTRL-E (PC). Vous pouvez aussi cliquer sur
l'onglet "Séquence 1" situé en haut à gauche de la fenêtre dans laquelle se trouve la scène.
Création d'une occurrence de texte
Nous avons volontairement placé ce point "Création d'une occurrence de texte" dans cette partie sur les symboles et occurrences pour vous
faire comprendre qu'un texte placé sur la scène peut avoir un nom d'instance.
1. Créez un texte sur la scène
2. Sélectionnez le si vous l'avez déselectionné
3. Via la palette des propriétés, attribuez-lui un nom d'instance (Img 1.5)
Le texte auquel vous souhaitez attribuer
un nom d'instance doit être de type
dynamique ou texte de saisie. Il est
impossible de donner un nom d'instance
à un texte statique.
Une occurrence ainsi nommée peut être
contrôlée via les ActionsScripts.
Img 1.5
Création d'une occurrence de forme
Vous pouvez créer dynamiquement des formes sur la scène sans qu'elles soient pour autant sous la forme de symboles dans la bibliothèque.
Dynamiquement signifie que vous devez utiliser les ActionsScripts.
Vous pouvez créer des droites, des courbes et ainsi créer des formes vides ou pleines. Nous allons vous montrer un simple exemple,
reportez-vous à la partie consacrée aux tracés dynamiques pour plus d'explications.
_root.createEmptyMovieClip("droite", 1);
droite.lineStyle(1, 0x3E7595, 100);
droite.moveTo(50, 100);
droite.lineTo(150, 100);
Page 25 sur 36
1/12/02 23:26
Interpolations
Archives Flash 5
Objets
# Gestion du Scénario (la timeline)
[11-04-02]
-
Images et images clés
Créer et supprimer une image clé
Ajouter et supprimer des images
Déplacer une image clé
- Onions skins
- Mode tracé
- Echelle du scénario
-
Ajouter un calque
Masquer un calque
Verrouiller un calque
Nommer un calque
- Changer l'ordre (plans) des calques
- Regrouper des calques dans un dossier
- Répartir des occurrences sur des calques
Avant-propos : Nous employons volontairement dans nos explications 2 termes pour traiter de la même fenêtre : Le scénario. Dans le
mesure où vous rencontrez sur le web des explications sur les différentes versions de Flash, Timeline et Scénario sont des mots qui
désignent la même fenêtre. Celle du scénario.
Rappel : Une présentation du scénario est disponible sur la page de présentation de l'interface.
Si vous avez des notions d'animation, dans ce cas cette timeline ne devrait pas vous poser de problèmes. Pour les novices, comparons tout
de suite ce scénario à une echelle de temps.
Imaginons que nous décomposions un film. Nous obtiendrions qu'une suite d'images. Et bien vous pourriez placer toutes les images obtenues
dans chacun des cellules, vous recomposeriez ainsi le film. Attention, une image contient plusieurs plans et ou plusieurs personnages, objets,
etc… Vous devez donc vous aider de calques pour composer une image. Ce n'est pas obligatoire mais conseillé pour la réalisation de vos
mises en pages. Dans le cas des interpolations, vous devez même n'avoir qu'une occurrence par calque.
Images et images clés
Une image est constituée de l'ensemble des
éléments contenus sur la scène et répartis sur les
différents calques.
Une image clé représente une image sur laquelle il
est possible de placer des symboles. Elle est
représentée par une pastille noire sur une image.
Dans certains cas, des images clé peuvent être
vides. Cela signifie qu'il n'y a rien sur la scène
pour ce calque à cette image donnée.
Créer et supprimer une image clé
Créer une image clé :
Page 26 sur 36
1/12/02 23:26
> Méthodologie N°1
1. Sélectionnez une image de la timeline
2. Tapez F6
1. Effectuez un clic-droit (PC) CTRL-clic (Mac) sur une image
2. Sélectionnez la commande "Insérer une image clé"
Supprimer une image clé :
1. Sélectionnez une image clé
2. Tapez Shift-F6
1. Effectuez un clic-droit (PC) CTRL-clic (Mac) sur une image clé
2. Sélectionnez la commande "Supprimer l'image clé"
Ajouter et supprimer des images
La fluidité d'une animation et sa durée passe par le nombre d'images entre 2 images clé. Si vous souhaitez donc augmenter le nombre
d'images (Img 1.0) situées entre 2 images clé, il existe plusieurs méthodes.
Ajouter des images :
> Méthodologie N°1 : Vous n'avez qu'une image clé au début du calque.
1. Cliquez sur une image du calque concerné (ex. image 13) (Img 1.0)
2. Tapez F5
Vous obtenez un rectangle blanc qui représente une poigné servant à augmenter ou diminuer le nombre d'images partant de
l'image clé précédente (Img 1.1).
Img 1.0
Img 1.1
> Méthodologie N°2 : Vous n'avez qu'une image clé au début du calque.
1. Maintenez Atl-CTRL (PC) ou Alt-Commande (Mac)
2. Déplacez l'image clé située au début du calque vers la droite (Img 1.2)
Img 1.2
Cette technique est valable également pour une image clé qui ne serait pas au début du calque.
> Méthodologie N°3 : Vous avez déjà une poignée (Img 1.1).
1. Maintenez le clic sur cette poignée et augmentez le nombre d'images en la tirant vers la droite
Attention : Cette technique n'ajoute pas pour autant des images en décalant le reste du calque vers la droite.
Vous devez d'abord sélectionner la poignée (par un simple clic) puis maintenir enfoncée la touche CTRL (PC)
Commande (Mac) et enfin déplacer la poignée vers la droite ou la gauche. Vous pouvez aussi déplacer
l'image clé qui suit la poignée (Voir comment Déplacer une image clé).
> Méthodologie N°4 : Sélectionner plusieurs images pour en définir le nombre à insérer.
1. Sélectionnez une ou plusieurs images (Img 1.3)
2. Tapez F5
Page 27 sur 36
1/12/02 23:26
Le résultat est un ajout automatique d'images correspondant au nombre d'images sélectionnées(Img 1.4). Pour sélectionner une seule
image, un simple clic suffit. Pour sélectionner plusieurs images , commencez tout d'abord par cliquer en dehors des images à
sélectionner puis maintenez le clic sur l'image à partir de laquelle la sélection doit commencer, glissez la souris vers la droite ou la gauche
jusqu'à l'image qui doit être sélectionnée.
Img 1.3
Img 1.4
Supprimer des images :
Les différentes techniques d'ajout d'image précise qu'en déplacant votre souris vers la gauche dans certains cas, vous
diminuez le nombre d'images. Pour le raccourci clavier opposé à l'ajout (F5), utilisez le raccourci (Shit-F5).
Déplacer une image clé
La technique est très simple mais vous devez surtout penser à bien sélectionner l'image clé à déplacer.
> Méthodologie
1. Effectuez un simple clic sur une image clé
2. Maintenez à nouveau le clic sur cette image clé et faites la glisser vers la gauche ou la droite.
Ajouter un calque
> Méthodologie
1. Effectuez un simple clic sur cette icône
Nommer un calque
> Méthodologie
1. Double-cliquez sur un nom de calque situé à gauche de la timeline
2. Changez le nom
3. Validez en tapant "Entrée"
Changer l'ordre(plans) des calques
Lorsque vous créez un calque, il se positionne toujours au dessus de celui qui est sélectionné. Dans certains cas vous aurez
besoin de changer l'ordre des plans. Dans l'exemple ci-dessous, un texte se trouve sous le rectangle sur lequel il doit être
dans l'animation finale.
1. Maintenez le clic enfoncé sur le calque à déplacer (Img 4.1)
2. Faites le glisser au dessus ou en dessous d'un autre (Img 4.2)
Précisions : Lorsque vous faites glisser votre calque entre deux autres, une grosse barre apparait pour vous indiquez que
vous pouvez relacher votre clic (Img 4.3)
Avant
Img 4.1
Après
Img 4.2
Ci-contre, le déplacement d'un calque
entre deux autres se traduit par une
barre grisée.
Page 28 sur 36
1/12/02 23:26
Regrouper des calques dans un dossier
Dans certains cas, vous aurez besoin de regrouper plusieurs calques dans un même dossier afin de les masquer en même temps, les
verrouiller ou bien même les afficher en mode tracé. Cela facilite également la manipulation des plans.
> Méthodologie : Créer un dossier et placer des calques à l'intérieur.
1. Cliquez sur l'icône de création de dossier
2. Faites glisser le(s) calque(s) à placer dans le dossier sur l'icône de dossier (Img 5.1)
Img 5.1
Dans notre exemple, le dossier a déjà
été créé, le calque qui contient la lettre
A est simplement déplacé.
Maintenez le clic sur le calque intitulé
"A" et faites le glisser sur le dossier
intitulé "Mot".
Répartir des occurrences sur des calques
Explications sur cette page du site yazo.net. Ajoutons à ce que vous venez d'apprendre un exemple interessant.
> Méthodologie : Toutes les lettres d'un mot réparties sur différents calques
1. Placez un texte sur la scène (Img 6.1)
2. Avec la flèche noire, sélectionnez ce texte (par un simple clic)
3. Tapez le raccourci CTRL-B (PC) ou Commande-B (Mac) afin de séparer les caractères les uns des autres
(Img 6.2)
4. Gardez sélectionnés tous les caractères de votre mot et effectuez un clic-droit (PC) ou CTRL-clic (Mac) sur
l'un des caractères de votre mot. Sélectionnez alors la commande "Répartir vers les calques".
Vous obtenez autant de calques dans votre scénario que vous avez de lettres dans votre mot. Comme Flash
est un logiciel bien conçu et qu'il ne fait pas les choses à moitié, chaque calque porte le nom du caractère
qu'il contient
Img 6.1
Img 6.2
Img 6.3
Onions Skins
Explications sur cette page du site yazo.net.
Mode tracé
Page 29 sur 36
1/12/02 23:26
Echelle du scénario
Masquer un calque
Verrouiller un calque
Interpolations
Archives Flash 5
Objets
# Interpolations
[11-04-02]
-
Interpolations de mouvement
Interpolations de forme
Options d'une interpolation
Annuler une interpolation
Pour effectuer des déplacements d'occurrences sur la scène ou encore des rotations, des agrandissements, des transparences progressives,
les interpolations représentent la technique idéale. Les interpolations de mouvement fonctionnent avec les occurrences alors que les
interpolations de forme fonctionnent uniquement avec les formes vectorielles comme l'indique le nom.
Si vous connaissez le logiciel Flash, vous connaissez au moins et surement ces qualités d'animation. A tord d'ailleurs, car Flash n'est pas
uniquement un logiciel d'animaion vectoriel. Si vous êtes novices en matière de programmation, cette partie sur les interpolations est
Page 30 sur 36
1/12/02 23:26
très importante pour vous. En revanche, si vous connaissez déjà bien la programmation, vous constaterez très vite qu'un grand nombre
d'interpolations peuvent être executées par les ActionScripts.
Il est très important de préciser qu'une interpolation doit toujours être unique sur un calque. Vous ne pouvez placer une 2e occurrence sur
un calque qui contient ou va subir une interpolation.
Interpolations de mouvement
Dans cette animation on peut constater Que 3
interpolations on été créées. Il aura donc fallu au moins
3 calques.
Une interpolation se fait entre 2 images clés mais vous
pouvez ajouter bout à bout plusieurs interpolations.
> Méthodologie
1. Placez une occurrence sur la scène
2. Sélectionnez une image* sur le calque contenant votre occurrence (Img 1.0)
3. Tapez F6
4. Effectuez un clic-droit (PC) ou CTRL-clic (Mac) sur la première image-clé et sélectionnez la commande
"Créer une interpolation de mouvement"
* éloignée de celle sur laquelle vous venez de placer votre occurrence
Interpolations de forme
Pour réaliser une interpolation de forme, vous ne devez surtout pas utiliser de symboles (donc pas d'occurrences). Vous pouvez créer des
formes avec les outils de dessin dsiponibles dans la barre d'outis mais vous pouvez aussi copier-coller ou importer des tracés réalisés
dans un logiciel de dessin vectoriel tels que Freehand ou Illustrator.
> Méthodologie
1. Réalisez un tracé sur la scène
3. Tapez F6
5. Sélectionnez la commande "Mouvement" dans le menu local Interpolation
de la palette des Propriétés (Img 1.1)
Img 1.0
Img 1.1
Page 31 sur 36
1/12/02 23:26
Options d'une interpolation
Accéleration/Déceleration : Pour donner un plus grand réalisme à vos interpolations, vous pourriez tenter de calculer par le biais d'images
clés supplémentaires, le ralentissement ou l'accélération d'un mouvement (Img 1.1).
Img 1.1
Afin de vous éviter une telle gestion d'images clés, Flash MX dispose d'une fonctionnalité d'accéleration.
> Méthodologie : Accélération d'une interpolation
1. Sélectionnez une image clé à partir de laquelle démarre une interpolation
2. Réglez l'accélération via la palette des propriétés (Img 1.2) à -100
Img 1.2
Rotation : Parmi les options d'interpolation, celle de la rotation est assez intéressante pour plusieurs raisons. Pour commencer, vous
n'avez plus à vous soucier de la manipulation (rotation avec l'outil approprié) à effectuer. Par ailleurs, le sens peut être (re)défini à
n'importe quel moment. Cette option présente donc l'avantage de pouvoir modifier rapidement et facilement une interpolation dont la
fonction serait d'effectuer une rotation.
> Méthodologie : Réaliser une rotation par interpolation
1. Placez un objet sur la scène
3. Tapez F6
4. Modifier l'apparence de votre tracé
5. Sélectionnez la commande "Mouvement" dans le menu local Interpolation
de la palette des Propriétés (Img 1.1)
6. Choisissez un sens de rotation dans le menu Rotation situé dans la palette des
propriétés (Img 1.3).
7. Précisez le nombre de tours.
Img 1.3
Remarque : Comme vous l'aurez remarqué, la technique est celle d'une simple interpolation. La petite différence réside
dans le fait que vous n'avez pas besoin de changer l'apparence de l'occurrence sur l'image de fin.
Suivre l'orientation du guide de déplacement : Lorsque vous réalisez une interpolation en utilisant un guide de mouvement, l'occurrence
qui suit le guide a la possibilité de s''orienter en fonction de la courbe. Sélectionnez l'image clé à partir de laquelle démarre l'interpolation
et cochez la case "Orienter..." dans la palette des Propriétés (Img 1.4).
Img 1.4
Annuler une interpolation
Pour annuler une interpolation, vous devez sélectionner une image clé à partir de laquelle démarre une interpolation, vous sélectionnez
alors la commande Aucune dans le menu local Interpolation de la palette des Propriétés (Img 1.0). Vous pouvez aussi effectuer un clicdroit (PC) ou CTRL-clic (Mac) sur une image clé et sélectionner la commande Annuler l'interpolation.
Page 32 sur 36
1/12/02 23:26
Interpolations
Archives Flash 5
Objets
# Masques et guide de déplacement
[11-04-02]
- Créer un masque fixe
- Créer un masque animé
- Créer un guide de déplacement
Créer un masque fixe
Dans certains cas, vous aurez besoin de ne voir qu'une partie de la scène et/ou d'une occurrence, d'une image. Vous pouvez utiliser
un calque et son contenu comme masque. Pour être plus précis, nous devons préciser que le contenu représentant le masque sera la
"fenêtre" au travers de laquelle vous pourrez voir le contenu du calque rattaché (Img 1.1).
Dans l'exemple ci-dessous, un texte doit avoir une forme d'ellipse (peu importe le contenu, il n'est pas là pour être lu).
L'enchainement des différentes images (Img 1.0, 1.1, 1.2 et 1.3) vous montre la procédure.
Img 1.0
Img 1.1
Img 1.2
Img 1.3
> Méthodologie : Créer un masque
1. Créez un calque supplémentaire afin d'obtenir un minimum de 2 calques (Img 1.0)
2. Placez sur le calque du dessus, la forme ou le symbole qui sert de masque (Ex. : Ellipse jaune)
3. Placez sur le calque du dessous, l'image, la forme, le symbole, le texte, etc… devant transparaître
au travers du masque.
4. Effectuez un clic-droit (PC) ou CTRL-clic (Mac) sur le calque du dessus et sélectionnez la commande
"Masque" du menu local déroulant qui apparait.
Remarque : Les calques sont verrouillés automatiquement afin que vous puissiez visualiser le résultat instantanément.
Cliquez sur ces verrous afin de rendre éditable ces calques si vous le souhaitez. Lors de la publication de votre
animations, l'oubli du verrouillage de ces calques n'a pas d'importance, le masque fonctionnera correctement.
Les masques et ActionScripts : Il est important de rappeler que les masques peuvent à présent (depuis Flash MX) être contrôlés en
ActionScripts.
Créer un masque animé
Page 33 sur 36
1/12/02 23:26
Deux techniques de réalisation de masque
animé existent car vous avez le choix de
l'animation.
Le masque peut être animé mais son
contenu
peut
l'être
également.
L'interpolation doit alors se faire sur l'un
des deux calques (ou les deux).
Dans l'exemple ci-contre, une interpolation
de forme a été utilisée, mais nous aurions
pu utiliser une interpolation de mouvement
telle qu'un déplacement et/ou un zoom sur
une occurrence.
Réalisez une interpolation sur l'un des deux
calques, votre masque s'anime alors pour
réveler une animation.
Créer un guide de déplacement
Vous aurez parfois besoin de réaliser des interpolations de mouvement dont le chemin n'est pas linéaire. Vous devez alors faire appel
à un guide qui n'est ni plus ni moins un tracé sur un calque qualifié de "guide de mouvement".
Dans cet exemple (dont le
guide de mouvement est
présenté dans la méthodologie
ci-dessous),
l'interpolation
utilise un objet dont l'inclinaison
(rotation) suit celle du tracé.
Cette option est présentée dans
la
partie
consacrée
aux
interpolations.
> Méthodologie
1. Réalisez une interpolation de mouvement
2. Sélectionnez le calque de votre interpolation
3. Cliquez sur le bouton d'ajout de guide de déplacement
(Un calque supplémentaire apparaît Img 1.4)
4. Créez un tracé sur ce nouveau calque (Avec le crayon, trait, la plume, etc…) (Img 1.5)
5. Sélectionnez la première image de votre interpolation
6. Placez votre occurrence (celle de l'interpolation) au début du tracé
7. Sélectionnez la dernière image de votre interpolation
8. Placez votre occurrence (celle de l'interpolation) à la fin du tracé
Page 34 sur 36
1/12/02 23:26
Img 1.4
Img 1.5
Interpolations
Archives Flash 5
Gestionnaires
Boutons MovieClips Timeline -
Navigation
gotoAndStop() gotoAndPlay() play() nextFrame() & prevFrame() nextScene() & prevScene() getURL() tellTarget() (Ex.1) tellTarget() (Ex.2) -
Propriétés
Variables
Listes
Propriété _x Propriété _xscale Propriétés _xmouse & _visible Déplacements par clics Défilement horizontal Labyrinthe Mouvements Variables loadVars() Variables_instances Calculette Listes (Ex.1) Listes (Ex.2) Liste de listes (Ex.1) Liste de listes (Ex.2) Moteur de recherche -
Objets
AS & Occurrences
hitTest() startDrag() duplicatMovieClip() duplicate & remove eval() swapDepths() attachMovie() setMask() (Ex.1) setMask() (Ex.2) Math (Objet) et _x -
AS & Animation
Preload (Ex.1) Preload (Ex.2) _currentFrame() print() (Ex.1) print() (Ex.2) random FSCommand loadVariables() + .zip
loadVariabesNum() + .zip
loadMovie() + .zip
loadMovieNum() + .zip
#include"" + .zip
Temporisation
Avec variables setInterval() getTimer() -
Composants
Personnels
Composants (Ex.1) Composants (Ex.2) -
Objets
array color (Ex.1) color (Ex.2 Essai) date key math (Ex.1) math (Ex.2) perso selection sound (Sans Streaming)
string -
-
-
-
-
Fonctions
Fonctions -
-
If
if() -
For
for() - Affichage en liste for() - Duplication occu for() - Moteur recherche while() pluie neige neige2 -
Switch
switch() (Ex.1) switch() (Ex.2) -
-
-
-
Page 35 sur 36
1/12/02 23:26
_root_parent_this _root _parent _this Voir hiérarchie -
-
Hierarchie
Hiérarchie -
TextField
TextFieldTextFormat -
Tracés
dynamiques
Tracé (Ex.1) Tracé (Ex.2) Tracé (Ex.3) Tracé (Ex.4) Tracé de la France Dégradé (Ex.1) Dégradé (Ex.2) -
Composants
Formulaires
-
Formulaire (Ex.1) Formulaire (Ex.2) Formulaire (Ex.3) Scrolls Autre exemple -
PHP_MySQL
FlashMySQL (Ex.1) + .zip
FlashMySL (Ex.2) + .zip
MySQLFlash + .zip
Listeners
Listeners -
-
Cookies
Cookie
Cookie
Cookie
Cookie
-
Autres
Convertisseur hexa Tabulations + .zip
Exemples de code
Touches Clavier Reticule/Etiquette Récup. var. page HTML Preload Afficher heure Etirer une forme Carnet d'adresses Envoyer mail via PHP Charger une image Sauv. un scrore (Cookie)
Déplacement par clics Popup - + .zip
Mouv.t sans interpolation
Drag& Drop -
-
-
-
(Ex.1)
(Ex.2)
(Ex.3)
(Ex.4)
-
-
+ .zip
+ .zip
-
-
-
Page 36 sur 36

# Flash, qu`est-ce que c`est ?

Transcription

Documents pareils

Comment insrer une image dans le forum

PHR004 : Mécanique Ondes Directives générales pour la formation

Iris Jacquier avec un Voigtländer Bessa R Dessin d`Elcet pour

PDF Formation Flash initiation - créer des animations Lille Nord 59

Battlefield 2142 : Northern Strike

Zone de remplacement

questions / reponses du credit agricole sud rhone alpes

FLASH : créer des animations Web / Intranet

VW-MPlate.com - VW Combi T2 Bay Window - M

Les élèves se mobilisent pour le cancer