Upload
ancell-ledoux
View
103
Download
0
Embed Size (px)
Citation preview
1
FLASH 8
SI28 - Séance FLASH 1
A08
Rémy WEILL GM05Alexandre BLANCHARD GSM01
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH• Outils de dessin• Scénario et notion d’image clé• Calques et symboles
• Animer avec FLASH• Animation interpolée de mouvement• Animation interpolée de forme• Exportation et insertion dans Dreamweaver
*2
PLAN DE LA SEANCE
3
Le logiciel Flash 8 est utilisé pour la création de fichiers qui peuvent être
inclus dans une page web pour un usage sur Internet ou qui peuvent être
montrés sous forme indépendante en vue d'une utilisation hors ligne. Le
contenu graphique des fichiers Flash est prévu pour être principalement
vectoriel, à la façon du format SVG, mais est de plus en 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.
Il est actuellement utilisé dans les contextes suivants:• Création de sites Internet et de jeux vidéos qui
peuvent être intégrés sur le Web• Création d’applications multimédia• Création de diaporamas interactifs• Création de bannières publicitaires
L’interface FLASH 8 est divisée en quatre parties:
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
4
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
LA SCENE
5
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
LE SCENARIO «TIME LINE»
6
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
LA BIBLIOTHEQUE
7
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
LES PROPRIETES
8
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
LES OUTILS
*9
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
BITMAP VECTORIEL• Grille de points (pixels=picture element) ou chaque pixel à une position et une valeur.Le dessin est composé par l’ensemble de ces points.
• Tracé en «escalier» donc zoom délicat, voire impossible,écriture peu lisible si trop petite.
• Modification très délicate car il faut modifier point par point ou tous les points en même temps.
• Volumineux (chaque point est codé et mémorisé)
• Des lignes, des courbes calculées mathématiquement (équation vectorielle) qui peuvent être modifiées (couleur, épaisseur, longueur, forme…)
• Tracé précis de lignes donc zoom illimité (calcul du logiciel),écriture fine lisible.
• Modification facile par «élément» (seul ou groupé) qui peut être déplacé, agrandi, tourné...
• Légers (des formules mathématiques sont codées)
*10
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
Image vectorielle (via ILLUSTRATOR…)
Image au format BITMAP (via PHOTOSHOP, Paint…)
*11
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
Quelques exercices d’apprentissage de FLASH pour
Créer un clip animé d’une pénalité au rugby en parfaite autonomie…
12
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
LES OUTILS DE DESSIN 1-2
Sous sélection
Rectangle
Sélection
Ligne
Plume
OvaleCrayon
EncrierPipette
Lasso
Texte
Gomme
Pinceau
Outil Main
Zoom
Couleur de trait
Transformation libre Transformer le remplissage
Crayon Pinceau
Couleur de remplissage
Pot de peinture
13
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
LES OUTILS DE DESSIN 2-2
Options gommeOptions pinceau
Options pot de peintureOptions crayon
*14
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
Exercice 1
Dessiner un cercle, un rectangle de couleurs différentes, sans les superposer.
• Sélectionner une figure et superposez la à l’autre. Cliquer en dehors de la zone de dessin.
• Re-sélectionner la même figure et déplacer la.
QUE CONSTATEZ VOUS ?
*15
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
Suite Exercice 1 - Explications
Deux objets de même couleur superposés ne
forment plus qu’un (affinité de
couleur).Un objet placé par dessus un autre objet de couleurs différentes efface une partie de cet objet.
Les groupes permettent de créer un objet à part
entière qui n’a plus d’intersection avec les autres objets (on peut
séparer pour modifier).
16
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
GROUPER / DISSOCIER
L’action de grouper plusieurs objets entre eux permet de les rassembler dans un même cadre. Il n’y a plus interaction entre chaque objet d’un même groupe.
Action de GROUPER (raccourci clavier CTRL + G)
Sélectionner les objets à grouper Modification – Grouper
Action de DISSOCIER (raccourci clavier CTRL + MAJ + G)
Sélectionner les objets à grouper Modification - Dissocier
17
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
SCENARIO : LA TIME LINE
Temps écoulé
Cadence en image/sec
Numéro de l’image courante
Image courante
Calque sélectionné dans image courante
18
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
SCENARIO : NOTION D’IMAGE CLE
Dans le scenario, vous travaillez avec des images et des images clés:
• Une IMAGE est un élément de l’animation
• Une IMAGE CLE correspond à
une étape clé dans une animation chaque image clé est indépendante de celle qui la précède elles sont très utilisées dans les interpolations de mouvement ou même de forme
19
LES CALQUES
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASHInsérer calque guide de mouvement
Nom du calque actif
Pour tous les calques
•Cacher/Visualiser
•Verrouiller/Dév. La possibilité de modifier le calque
•Cacher le remplissage
Insérer un dossier de calque
Supprimer le calque
Insérer un nouveau calque (au dessus du calque actif)
20
Intérêt des calques• Possibilité de travailler sur plusieurs couches avec un ordre de superposition
• Facilité pour traiter chaque élément séparément lors des animations
Exercice 2 * • Ouvrer un nouveau dessin (ctrl+N ou Fichier - nouveau)
• Créer un calque pour chaque forme que vous voulez
dessiner
• Renommer chaque calque par le nom de la figure qu’il contient (pour cela, double cliquez sur le nom)
• Superposer les trois figures
• Changer plusieurs fois l’ordre des calques
QU’OBSERVEZ VOUS ?
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
21
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
3 types de calques
Il est possible d’utiliser trois types de calques différents:
- Normal, comme vu précédemment
- Masque, qui sert donc à masquer un autre calque (cf
exercie 3)
- Guide (et guidé), le calque "guide" permettant de définir
une trajectoire de déplacement, et le calque "guidé"
représentant l'objet qui devra suivre cette
trajectoire.
*22
Exercice 3
• Ouvrer un nouveau dessin (ctrl+N ou Fichier -
nouveau)
• Dessiner un gros carré vert.
• Insérer un 2e calque par-dessus et nommez
le masque.
• Dans le calque masque, dessinez un petit cercle rouge qui recouvre partiellement le carré vert.
• Cliquer droit sur le calque masque,
sélectionnez Masque.
• On ne voit plus que la partie recouverte du
carré.
• Le calque masqué s’affiche en retrait sous le calque masque dans le scénario.
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
23
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
LES SYMBOLES
3 types de symboles• Les boutons, sont utilisés pour lancer une animation ou diriger vers une URL en fonction de la position ou du click de la souris• Les graphiques, sont généralement des images importées pouvant être utilisées dans des interpolations simples• Les clips, qui sont des animations de mouvement et/ou de forme dans des animations.
(Tous ces symboles sont regroupés dans la Bibliothèque, qu’on retrouve dans le menu fenêtre, ou par le raccourci ctrl+L)
Pour créer un symbole : Insertion - Nouveau symbole...
(Ctrl+F8)
Pour convertir une image en symbole :
Clique droit sur l’image -
convertir en symbole
*24
Exercice 4
• Ouvrir un nouveau dessin (ctrl+N ou Fichier –
nouveau)
• Dessiner un carré vert
• Clic droit sur la carré - convertir en symbole - bouton
• Double cliquez sur le carré, une nouvelle scène s’affiche. Il s’agit de la page d’édition du symbole que vous venez de créer.
• Pour les symboles de type bouton, il existe quatre états, “haut, dessus, abaissé et cliqué”
• Créer une image clé pour chaque état (ronds,
rectangles...)
QU’OBSERVEZ VOUS ?
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
*25
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
ANIMATION INTERPOLEE DE MOUVEMENT
Cette outil permet de créer des animations de
mouvement entre plusieurs positions
d’un même objet. On distingue deux types d’animations
de mouvement:
SANS calque : on définit la position de départ et la
position d’arrivée de notre objet et FLASH propose une
trajectoire rectiligne dont il crée les positions
intermédiaires.
AVEC calque : on dessine la trajectoire souhaitée dans
un calque différent (appelé calque guide de
mouvement). L’objet suivra alors cette nouvelle
trajectoire définie.
*26
Exercice 5 - Animation SANS calque
• Ouvrir un nouveau dessin (ctrl+N ou Fichier –
nouveau)
• Dessiner un carré vert en haut à gauche
• Insérer une image clé à l’image 30.
• Sur l’image 30, déplacer le carré vers la droite de l’écran.
• Clic droit sur le scénario entre les deux images,
choisir “créer une interpolation de mouvement”.
• Dans la zone “propriétés”, choisir “rotation:
vers la doite”, 1 tour.
• Tester l’animation “Ctrl+entrée”.
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
*27
Exercice 5 - Animation AVEC calque
• Revenir sur l’animation précédente, et créer un
nouveau calque.
• Dessiner un rond rouge en bas à gauche.
• Clic droit sur le calque : “insérer un guide de mouvement”.
• Cliquer sur le calque guide, et dessiner une vague.
• Revenir sur le calque du rond et créer une image clé à
30, et insérer une interpolation de mouvement entre
ces deux images.
• Déplacer les ronds de chaque image aux extrémités de
la courbe guide “la vague”.
• Tester l’animation “Ctrl+entrée”.
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
28
ANIMATION INTERPOLEE DE FORME
L’interpolation de forme fonctionne sur le même
principe que les animations de
mouvement. On définit une forme de départ et une
forme d’arrivée, FLASH
effectuera alors la transition de lui-même d’une forme
à l’autre.
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
*29
Exercice 7
• Revenir sur l’animation précédente, et créer un
nouveau calque.
• Dessiner un carré bleu au milieu à gauche.
• Insérer une image clé à l’image 30.
• Sur l’image 30, dessiner un rond rouge sur la droite de l’écran, et supprimmer le carré sur cette image. Dégrouper : ctrl+shift+G.
• Clic droit sur le scénario entre les deux images, choisir
“créer une interpolation de mouvement”.
• Dans la zone “propriétés”, choisir “interpolation : de
forme”
• Tester l’animation “Ctrl+entrée”.
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH
30
A toi de jouer, transforme l’essai...
31
• Enregistrez l’animation
• Allez dans Fichier - paramètres de
publication»
• Cliquer sur « Publier » (création d’un .swf)
• Dans Dreamweaver, cliquez sur le symbole
flash
• Sélectionnez votre animation
• « Lecture » dans les propriétés
EXPORTATION VERS DREAMWEAVER
• Introduction FLASH 8
• Différence Bitmap / Vectoriel
• Objectifs de la séance
• Dessiner avec FLASH
• Animer avec FLASH