1 FLASH 8 SI28 - Séance FLASH 1 A08 Rémy WEILL GM05 Alexandre BLANCHARD GSM01

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:




• Dessiner avec FLASH

• Animer avec FLASH

4






LA SCENE

5






LE SCENARIO «TIME LINE»

6






LA BIBLIOTHEQUE

7






LES PROPRIETES

8






LES OUTILS

*9






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






Image vectorielle (via ILLUSTRATOR…)

Image au format BITMAP (via PHOTOSHOP, Paint…)

*11






Quelques exercices d’apprentissage de FLASH pour

Créer un clip animé d’une pénalité au rugby en parfaite autonomie…

12






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






LES OUTILS DE DESSIN 2-2

Options gommeOptions pinceau

Options pot de peintureOptions crayon

*14






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






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






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






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






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





• 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 ?






21






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.






23






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 ?






*25






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”.






*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”.







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.






*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”







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






Documents

1 FLASH 8 SI28 - Séance FLASH 1 A08 Rémy WEILL GM05 Alexandre BLANCHARD GSM01