Beruflich Dokumente
Kultur Dokumente
!
!
!
!
!
!
!
!
"#$%&!'()*+!,-.!!
,/0&1!&2!34%(5&1!#4!6$72&74!
572&/)6258!
Page 1/21
Flash CS5 – initiation
"
!"#$%#%& '(")*!&+"
Flash est un logiciel multimédia qui permet de réaliser :
! des illustrations
! des animations
! des sites Web
! des videos (extension .flv)
! des jeux
! des applications multimédias
Pour visualiser un fichier au format “swf” il est nécessaire d!avoir installé le plug-
in Flash Player. Depuis la version 4.02 de IE (1999) le plug-in flash 4.0 est intégré d!office
autant dire que 98% des utilisateurs du Web possède se plug-in.
Flash Player est distribué gratuitement à tous ceux qui souhaitent l!utiliser. Vous pouvez vous
procurer la version la plus récente de Flash Player à l!adresse suivante:
http://www.adobe.com/products/flashplayer/
Page 2/21
Flash CS5 – initiation
!
,-./01.234"50")6147"8&9""
Flash a connu de nombreuses évolutions majeurs ces dernières années tel que le passage au
langage de script Action Script 3 (CS3) et les interpolations avec éditeurs de mouvement
(CS4).
Page 3/21
Flash CS5 – initiation
*(&":;!<(&"=:>;!#"(>"?(8>%$:(**(&"
Le contenu graphique des fichiers Flash est prévu pour être principalement vectoriel, à la
façon du format SVG, mais est plus développé au niveau multimédia et intègre des médias
tels que le son numérique et la vidéo numérique. On utilise Flash pour produire des contenus
visuels dans l!approche dite «RichMedia» et «Motion Design» du Web.
Image Bitmap
"#$%&'!! ()*$+,#)-!!
!
Page 4/21
Flash CS5 – initiation
@A(@A(&"$()($(,8(&"
Tutoriel :
http://www.adobe.com/designcenter/video_workshop/
http://flash.mediabox.fr/
http://jeanphiblog.media-box.net
Annuaire :
http://www.styleboost.com/
http://www.linkdup.com/
Page 5/21
Flash CS5 – initiation
(,"@A(*@A(&"#%:,>&""
- Scénario image par image : Animez rapidement vos créations avec un scénario image
par image simple d!emploi.
- Formes primitives : Créez aisément des graphiques élaboré, arrondissez les angles des
rectangles, définissez le rayon d!un cercle intérieur, etc.
- Outils vidéo sophistiqués : Créez, montez et déployez des fichiers FLV en modes lecture
en continu et téléchargement progressif en bénéficiant d!un support vidéo très complet.
- Gestion de fichiers audio MP3 : Intégrez des séquences audio dans vos projets en
important des fichiers MP3.
- Création d!animation optimisée : Flash exporte toute l!animation (vidéo, image, son,
texte) dans un fichier unique dont le poids est sans comparaison avec le poids d!une
page HTML classique intégrant ces mêmes médias.
- Respect de la mise en page : Lorsque vous créez une écran avec Flash, vous êtes
certain que le client l!affichera telle que vous l!avez conçue et ce, quelle que soit la
configuration de son ordinateur : navigateur et système d!exploitation.
Page 6/21
Flash CS5 – initiation
#$(&(,>!>:%,"'("*B(,?:$%,,(;(,>"
!
"
A2C6C412C-D"504"E1DD01.F""
Il est possible d!afficher les panneaux avec icônes ou icônes et
textes.
Page 7/21
Flash CS5 – initiation
*1"G-H20""I"-.2C64"
Les outils de la boîte à outils vous permettent de dessiner, de
peindre, de sélectionner et de modifier une illustration, ou de
modifier l!affichage de la scène. La boîte à outils est divisée en
quatre sections:
La zone d!options affiche des modificateurs pour l!outil sélectionné. Les modificateurs affectent
les opérations de peinture ou d!édition de l!outil.
*1"4JKD0""
La scène est la zone rectangulaire dans laquelle vous placez du contenu graphique
(illustrations, zones de texte, boutons, graphiques bitmap importés, clips vidéo,
etc.).
*0"4J3D1LC-""
Le scénario vous permet de gérer ce qui se passe sur la scène de Flash. Chaque image du
scénario représente un moment donné de votre animation et vous permet de contrôler ainsi
son déroulement dans le temps.;
Page 8/21
Flash CS5 – initiation
*04"J16M.04"" "
Les calques sont superposés dans une pile. Le calque le plus haut dans la pile est celui que
l!on voit, donc celui qui est au plus bas dans la pile est celui qui à le moins de chance d!être
vus. Comme dans une perspective le premier plan (1 calque) cache parfois l!arrière plan
(dernier calque). Un objet peut être opaque et masquera donc ceux qui se trouvent sous lui.
Un objet peut être transparent et laissera donc apparaître ceux qui sont sous lui.
*1"G1LL0"50"EL-ELC323"
*1"G1LL0"5B35C2C-D"
Page 9/21
Flash CS5 – initiation
*1"G1LL0"504"J-.60.L4"
Page 10/21
Flash CS5 – initiation
'044CD0L"51D4")6147"
Les objets dessinés dans Flash sont construits sur deux éléments bien différenciés : le contour
(outline) et le remplissage. Si un outil de modification (pot de peinture par ex) ne fonctionne
pas, peut être est ce parce que vous travailler sur un contour au lieu d'une forme ou
inversement. (cf. encrier, pot de peinture).
Il existe deux modes de tracés qui se définissent via le bouton « dessin d!objet »
apparaissant en bas de la fenêtre des outils quand un outil de dessin est sélectionné.
!
!
Sélection du mode de tracé
!
!
Mode de fusion de dessins :
Les formes créées par le modèle de fusion de dessins fusionnent quand elles se chevauchent.
Si vous sélectionnez une forme et que vous la déplacez, la forme chevauchée est modifiée.
Crée des formes référencées sous forme d'objets de dessin. Les objets de
dessin sont des objets graphiques distincts qui ne fusionnent pas
automatiquement lorsqu'ils se chevauchent. Vous pouvez ainsi faire se
chevaucher des formes sans modifier leur apparence si vous déplacez ou
modifiez l'une d'entre elles. Flash crée chaque forme comme un objet distinct
que vous pouvez modifier séparément.
Lorsqu'un outil de dessin est en mode de dessin d'objet, les formes qu'il vous
permet de créer sont indépendantes. Le trait et le remplissage d'une forme ne
sont pas des éléments distincts et les formes qui se chevauchent ne se
modifient pas mutuellement. Si vous sélectionnez une forme créée avec le
mode de dessin d'objet, Flash entoure cette forme d'un cadre de délimitation rectangulaire
pour l'identifier.
Page 11/21
Flash CS5 – initiation
-> Vous pouvez passer du mode de fusion au mode objet en sélectionnant les dessins puis
« Modification -> grouper » et du mode objet au mode de fusion par « Modification ->
dissocier »
*B-.2C6"5B16CND0O0D2"
!
Exemples :
Page 12/21
Flash CS5 – initiation
*B-.2C6"50"53P-LO12C-D"
Cet outil permet de déformer un objet sélectionné. Les 8 point aux extrémité et au centre du
carré s!appels des poignées : elle permettent la manipulation.
"
(F0LJCJ04"Q"!206C0L"R
Page 13/21
Flash CS5 – initiation
:;#%$>!>:%,"'(";S':!"
Flash permet de créer du texte et des graphiques de haute qualité, mais aussi
d!importer de nombreux types de médias dans votre animation.
Page 14/21
Flash CS5 – initiation
*(&"&T;=%*(&""
Un symbole est un graphique, un bouton ou un clip que vous créez une seule fois et que vous
pouvez réutiliser dans votre animation ou dans d!autres animations. Tout symbole que vous
créez devient automatiquement un élément de la bibliothèque.
Une occurrence est une copie d!un symbole situé sur la scène ou imbriqué dans un autre
symbole. Une occurrence peut avoir une couleur, une taille et une fonction différentes de
celles de son symbole. La manipulation d!un symbole met toutes ses occurrences à jour, mais
l!application d!effets sur une occurrence de symbole ne met à jour que cette occurrence.
Utilisez des symboles graphiques pour les images statiques et pour créer dans une
animation des éléments réutilisables qui sont liés au scénario de l!animation principale.
Utilisez des symboles de bouton pour créer dans l!animation des boutons interactifs qui
réagissent aux clics de la souris, à un survol ou à d!autres actions.
Utilisez des symboles de clip pour créer des éléments réutilisables d!une animation. Les
clips possèdent leur propre scénario à images multiples qui est lu indépendamment du
scénario de l!animation principale ; imaginez des petites animations à l!intérieur d!une
animation principale, pouvant contenir des contrôles interactifs, des sons, voire d!autres clip.
8L312C-D"50"4UOG-604""
Vous pouvez créer un symbole à partir d!une sélection d!objets sur la scène ou créer un
symbole vide et générer ou importer son contenu en mode édition de symboles.
3 Cliquez sur OK. Flash ajoute le symbole à la bibliothèque. La sélection sur la scène devient
une occurrence du symbole. Vous ne pouvez plus modifier l!objet directement sur la scène,
vous devez l!ouvrir en mode édition de symboles.
;-5CPCJ12C-D"5B.D"4UOG-60""
!
Double Cliquez sur le symbole dans la bibliothèque. Observez la hiérarchie :
Page 15/21
Flash CS5 – initiation
A2C6C412C-D"50"61"GCG6C-27KM.0"
Dans une animation Flash, une bibliothèque stocke les symboles (créés dans Flash ou
importés) et vous permet d!afficher et d!organiser ces fichiers pendant que vous travaillez.
La fenêtre Bibliothèque affiche une liste déroulante contenant le nom de tous les éléments de
la bibliothèque.
Lorsque vous sélectionnez un élément dans la fenêtre Bibliothèque, une vignette d!aperçu de
l!élément s!affiche en haut de la fenêtre. Si l!élément sélectionné est animé ou s!il s!agit d!un
fichier son, vous pouvez utiliser le contrôleur pour en afficher un aperçu.
Vous pouvez organiser les éléments de la bibliothèque en dossiers. Les colonnes de la fenêtre
Bibliothèque indiquent le nom d!un objet, son type, le nombre d!utilisations dans le fichier et la
date à laquelle il a été modifié pour la dernière fois.
Vous pouvez trier les éléments de la fenêtre Bibliothèque selon n!importe quelle colonne. La
fenêtre Bibliothèque contient également un menu déroulant Options contenant des options
permettant de modifier les éléments de la bibliothèque.
Pour éditer des éléments de la bibliothèque, y compris les fichiers importés, vous devez choisir
des options dans le menu Options de la bibliothèque. Vous pouvez ouvrir la bibliothèque de
tout fichier Flash FLA pendant que vous travaillez dans Flash, afin que les éléments de la
bibliothèque de ce fichier soient disponibles pour l!animation en cours.
Page 16/21
Flash CS5 – initiation
>(8+,:@A("'B!,:;!>:%,""
Il existe deux méthodes de création d!une séquence d!animation dans Flash :
Dans l!animation image par image, vous créez chaque image. Flash va les faire défiler comme
les pellicules d!un film.
Dans l!animation interpolée, vous créez l!image de début et de fin et Flash créer les images
intermédiaire. Flash change la taille, la rotation, la couleur ou d!autres attributs de l!objet de
façon égale entre l!image de début et l!image de fin pour créer l!apparence de mouvement.
8L312C-D"5BCO1N04VJ634""
Une image-clé est une image dans laquelle vous définissez les modifications d!une animation.
Lorsque vous créez une animation image par image, chaque image est une image-clé. Dans
une animation d!images-clés (interpolée), vous créez les images-clés à certains points
importants de l!animation et laissez Flash créer le contenu des autres images. Vous devez
créer des images-clés uniquement au niveau des points de l!illustration dans lesquels se
produisent des changements.
Les images-clés sont indiquées dans le scénario : un cercle uni représente une image-clé
ayant un contenu alors qu!une droite verticale avant l!image représente une image-clé vide. Le
contenu des images supplémentaires que vous ajoutez à un même calque sera le même que
celui de l!image-clé.
Une image-clé est une image dans laquelle une nouvelle occurrence de symbole apparaît
dans le scénario. Une image-clé peut aussi être une image incluant du code ActionScript pour
contrôler un aspect de votre document. Vous pouvez également ajouter une image-clé vide au
scénario en tant qu'espace réservé pour les symboles que vous ajouterez ultérieurement ou
pour conserver cette image vide explicitement.
Une image-clé de propriété est une image dans laquelle vous définissez les changements
de propriétés d'un objet pour une animation. Flash peut interpoler, ou remplir
automatiquement, les valeurs de propriété situées entre les images-clés de propriété, de
manière à produire des animations fluides. Les images-clés de propriété facilitent la création
des animations car elles évitent d'avoir à tracer chacune de leurs images. Une série d'images
contenant une animation interpolée est appelée interpolation de mouvement.
Une image interpolée est toute image qui fait partie d'une interpolation de mouvement.
Une image statique est toute image qui ne fait pas partie d'une interpolation de mouvement.
Vous organisez les images-clés et les images-clés de propriété différemment dans le scénario
afin de contrôler la séquence des événements dans votre document et son animation.
Page 17/21
Flash CS5 – initiation
:D40L2C-D"5WCO1N04"51D4"60"4J3D1LC-"
Pour insérer une nouvelle image, sélectionnez Insertion > Scénario > Image.
Pour créer une image-clé, choisissez Insertion > Scénario > Image-clé. Vous pouvez
également cliquer du bouton droit (Windows) ou en appuyant sur la touche Ctrl (Macintosh)
sur l'image dans laquelle placer l'image-clé, puis choisir Insérer une image-clé dans le menu
contextuel.
Pour créer une image-clé vide, choisissez Insertion > Scénario > Image-clé vide ou cliquez
du bouton droit (Windows) ou en appuyant sur la touche Ctrl (Macintosh) sur l'image dans
laquelle placer l'image-clé, puis choisissez Insérer une image-clé vide dans le menu
contextuel.
&360J2C-D"5WCO1N04"51D4"60"4J3D1LC-"
Flash propose deux méthodes distinctes pour sélectionner les images dans le scénario. Avec
la sélection à base d'images (paramètre par défaut), vous sélectionnez séparément les images
dans le scénario. Avec la sélection à base de plages, vous sélectionnez toute une séquence
d'images (d'une image-clé à la suivante) en cliquant sur n'importe quelle image de cette
séquence. Vous pouvez spécifier une sélection étendue dans les préférences de Flash.
Pour sélectionner une image, cliquez sur son entrée dans la scène. Sur le scénario, cliquez
sur l'image en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée.
Pour sélectionner plusieurs images contiguës, maintenez la touche Maj enfoncée, puis
cliquez sur les autres images.
Pour sélectionner plusieurs images non contiguës, cliquez sur chacune d'elles tout en
maintenant la touche Ctrl (Windows) ou la touche Commande (Macintosh) enfoncée.
Pour sélectionner toutes les images d'un scénario, choisissez Edition > Scénario >
Sélectionner toutes les images.
Pour sélectionner une plage entière d'images statiques, double-cliquez sur une image
située entre deux images-clés. Si vous avez activé la sélection à base de plages, cliquez sur
une image quelconque dans la séquence.
Exercices : Atelier 2 et 3
Page 18/21
Flash CS5 – initiation
*B1DCO12C-D"E1L"CD20LE-612C-D"
Un film tourne à 24 images /s, dans flash vous pouvez choisir le taux d'image par seconde
(12i/s pour Internet). Un taux plus rapide permet des animations plus fluides mais utilise plus
de ressources processeur (modification> document).
- Vous avez oublié de convertir votre objet en symbole avant de l'animer (obligatoire pour une
interpolation),
- le symbole utilisé au départ de l'animation n'est pas le même qu'à la fin. (Vérifier dans le
panneau Occurrence qu'ils ont tous les deux le même nom),
- un autre objet est présent sur le même calque.
$0EL340D212C-D4"5B1DCO12C-D4"51D4"60"4J3D1LC-""
Flash différencie une animation interpolée d!une animation image par image dans le scénario
de la façon suivante :
Les images-clés d!interpolation de mouvement sont indiquées par un point noir et les images
interpolées intermédiaires comportent une flèche noire sur
! fond bleu clair.
Page 19/21
Flash CS5 – initiation
"
X"EL-E-4"504"J16M.04"51D4".D0"1DCO12C-D""
Lorsque vous créez votre animation, vous utilisez des calques afin d!organiser les composants
d!une séquence d!animation et de séparer les objets animés de sorte qu!ils ne s!effacent pas,
ne se connectent pas ou ne se segmentent pas entre eux. Si vous voulez que Flash interpole
le mouvement de plusieurs groupes ou symboles en une fois, chacun d!eux doit se trouver sur
un calque différent. En général, le calque d!arrière-plan contient une illustration statique. Les
calques supplémentaires contiennent chacun un objet animé différent.
Exercices : Atelier 3 et 4
Page 20/21
Flash CS5 – initiation
#A=*:($"A,("!,:;!>:%,""
Pour lire une animation il suffit de se positionner au début du scénario et d!appuyer sur Entrer.
Pour effectuer un rendu (activer le code Action Script) utilisez Ctrl+Entrer.
Flash publie le fichier SWF, ainsi qu!un fichier HTML avec les balises nécessaires pour afficher
le fichier SWF.
Pour afficher les paramètres de publication, choisissez Fichier > Paramètres de publication.
Par défaut, Flash est configuré pour créer un fichier HTML. Il est possible d!activer la détection
automatique du plugin Flash.
Après avoir défini toutes les options de la boîte de dialogue Paramètres de publication, vous
pouvez procéder à l!exportation vers tous les formats sélectionnés simultanément et autant de
fois que souhaité en choisissant simplement Fichier > Publier.
Vous pouvez utiliser le Testeur de bande passante pour tester votre animation et identifier à
quel endroit des pauses peuvent se produire. Le Testeur de bande passante affiche sous
forme graphique la quantité de données envoyées par chaque image de l!animation, en
fonction de la vitesse de modem choisie.
Flash exporte l!animation sous la forme d!un fichier SWF et l!ouvre dans une nouvelle fenêtre.
2. Dans le menu Déboguer, sélectionnez une vitesse de modem afin de déterminer la vitesse
de téléchargement que Flash doit simuler.
3. Choisissez Affichage > Testeur de bande passante pour visualiser le fichier SWF avec un
graphique des performances de téléchargement. Chaque barre ombrée représente une image
de votre animation. La hauteur de la barre représente la taille de l!image en octets et kilo-
octets. Si une barre dépasse la ligne rouge, cela signifie que l!animation doit attendre le
chargement de l!image.
4. Après avoir terminé, choisissez Affichage > Testeur de bande passante pour le
désélectionne.
Page 21/21