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

PLAN DE LA SEANCE 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 PLAN DE LA SEANCE

Différence Bitmap / Vectoriel Objectifs de la séance 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

LA SCENE Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH

LE SCENARIO «TIME LINE» 5 LE SCENARIO «TIME LINE» Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH

LA BIBLIOTHEQUE 6 Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH

LES PROPRIETES 7 Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH

LES OUTILS 8 Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH

VECTORIEL BITMAP Introduction FLASH 8 Différence 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) Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH

Image vectorielle (via ILLUSTRATOR…) Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH Image au format BITMAP (via PHOTOSHOP, Paint…)

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…

LES OUTILS DE DESSIN 1-2 Introduction FLASH 8 Sélection Sous sélection Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH Transformation libre Transformer le remplissage Ligne Lasso Plume Texte Ovale Rectangle Crayon Crayon Pinceau Pinceau Encrier Pot de peinture Pipette Gomme Outil Main Zoom Couleur de trait Couleur de remplissage

LES OUTILS DE DESSIN 2-2 Introduction FLASH 8 Options pot de peinture Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH Options crayon Options pinceau Options gomme

Exercice 1 Introduction FLASH 8 Différence Bitmap / Vectoriel 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 ? 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). Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH 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).

GROUPER / DISSOCIER Introduction FLASH 8 Différence Bitmap / Vectoriel 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) Modification - Dissocier Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH

SCENARIO : LA TIME LINE Introduction FLASH 8 Calque sélectionné dans image courante Image courante Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH Numéro de l’image courante Temps écoulé Cadence en image/sec

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 SCENARIO : NOTION D’IMAGE CLE Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH

LES CALQUES Introduction FLASH 8 Différence Bitmap / Vectoriel Pour tous les calques Cacher/Visualiser Verrouiller/Dév. La possibilité de modifier le calque Cacher le remplissage Nom du calque actif Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH Insérer un nouveau calque (au dessus du calque actif) Insérer un dossier de calque Supprimer le calque Insérer calque guide de mouvement

Intérêt des calques Exercice 2 * Introduction FLASH 8 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

3 types de calques Introduction FLASH 8 Différence Bitmap / Vectoriel 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. Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH

Exercice 3 Introduction FLASH 8 Différence Bitmap / Vectoriel 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

LES SYMBOLES 3 types de symboles Introduction FLASH 8 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 Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH

Exercice 4 Introduction FLASH 8 Différence Bitmap / Vectoriel 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

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. Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH

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

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

ANIMATION INTERPOLEE DE FORME Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH 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.

Exercice 7 Introduction FLASH 8 Différence Bitmap / Vectoriel 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

A toi de jouer, transforme l’essai...

EXPORTATION VERS DREAMWEAVER Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH 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