FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps 2007 Écriture interactive & multimédia Présentation Flash 8

FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps 2007 Séance 1 Différence bitmap/vectoriel Introduction Flash Dessiner avec Flash Outils de dessin Scénario et notion d’image clé Calques Symboles Animer avec Flash Animation interpolée de forme Animation interpolée de mouvement Exporter une animation vers Dreamweaver 1. Différence Bitmap/Vectoriel 2. Introduction Flash 3. Dessiner avec Flash - Outils de dessin - Scénario et notion d’image clé - Calques - Symboles 4. Animer avec Flash - Animation interpolée de mouvement - Animation interpolée de forme -Exportation vers Dreamweaver

FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps 2007 Bitmap : Point par point Pixel Matrice de points ayant chacun une valeur Vectoriel : Description vectorielle de l’image On utilise un langage de description Rectangle ( 0, 0, 3, 2 ) 3 2 ( 0, 0 ) 1. Différence Bitmap/Vectoriel 2. Introduction Flash 3. Dessiner avec Flash - Outils de dessin - Scénario et notion d’image clé - Calques - Symboles 4. Animer avec Flash - Animation interpolée de mouvement - Animation interpolée de forme -Exportation vers Dreamweaver

FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps 2007 Objectif : Créer des animations vectorielles interactives éditables sur Internet Intérêts : Réaliser des animations avec une forte intéractivité Fichiers de faible poids Compatible avec la technologie Web 1. Différence Bitmap/Vectoriel 2. Introduction Flash 3. Dessiner avec Flash - Outils de dessin - Scénario et notion d’image clé - Calques - Symboles 4. Animer avec Flash - Animation interpolée de mouvement - Animation interpolée de forme -Exportation vers Dreamweaver

FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps 2007 Interface de Flash 8 Scénario La scène Les outils Les propriétés La bibliothèque 1. Différence Bitmap/Vectoriel 2. Introduction Flash 3. Dessiner avec Flash - Outils de dessin - Scénario et notion d’image clé - Calques - Symboles 4. Animer avec Flash - Animation interpolée de mouvement - Animation interpolée de forme -Exportation vers Dreamweaver

FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps 2007 La barre d’outils : Transformation libre Sous sélection Rectangle Pot de peinture Transformer le remplissage Sélection Ligne Plume Ovale Crayon Encrier Pipette Lasso Texte Gomme Pinceau Outil Main Zoom Couleur de trait Couleur de remplissage 1. Différence Bitmap/Vectoriel 2. Introduction Flash 3. Dessiner avec Flash - Outils de dessin - Scénario et notion d’image clé - Calques - Symboles 4. Animer avec Flash - Animation interpolée de mouvement - Animation interpolée de forme -Exportation vers Dreamweaver

FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Les options : Options gomme Options pinceau Options pot de peinture Options crayon 1. Différence Bitmap/Vectoriel 2. Introduction Flash 3. Dessiner avec Flash - Outils de dessin - Scénario et notion d’image clé - Calques - Symboles 4. Animer avec Flash - Animation interpolée de mouvement - Animation interpolée de forme -Exportation vers Dreamweaver

FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps 2007 Exercice 1 : Dessiner un cercle, un rectangle et un triangle en utilisant trois couleurs différentes (ne pas les superposer) 1. Différence Bitmap/Vectoriel 2. Introduction Flash 3. Dessiner avec Flash - Outils de dessin - Scénario et notion d’image clé - Calques - Symboles 4. Animer avec Flash - Animation interpolée de mouvement - Animation interpolée de forme -Exportation vers Dreamweaver

FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps 2007 Exercice 1: Sélectionnez une des trois figures et superposez-la à une autre. Cliquez hors de la zone de dessin. Re-sélectionnez la même figure et déplacez-la. Que se passe-t-il ? 1. Différence Bitmap/Vectoriel 2. Introduction Flash 3. Dessiner avec Flash - Outils de dessin - Scénario et notion d’image clé - Calques - Symboles 4. Animer avec Flash - Animation interpolée de mouvement - Animation interpolée de forme -Exportation vers Dreamweaver

FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps 2007 Exercice 1: 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). 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 couleur différentes efface une partie de cet objet. 1. Différence Bitmap/Vectoriel 2. Introduction Flash 3. Dessiner avec Flash - Outils de dessin - Scénario et notion d’image clé - Calques - Symboles 4. Animer avec Flash - Animation interpolée de mouvement - Animation interpolée de forme -Exportation vers Dreamweaver

FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps Différence Bitmap/Vectoriel 2. Introduction Flash 3. Dessiner avec Flash - Outils de dessin - Scénario et notion d’image clé - Calques - Symboles 4. Animer avec Flash - Animation interpolée de mouvement - Animation interpolée de forme -Exportation vers Dreamweaver Exercice 1: L’action de Grouper rassemble plusieurs objets dans un même cadre Grouper : (raccourci clavier Ctrl+G) Sélectionnez les objets à grouper Modification -> Grouper Dissocier : (raccourci clavier Ctrl+Maj.+G) Sélectionnez les objets à dissocier Modification -> Dissocier

FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps 2007 Scénario : Insé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 Comme ci-dessus mais pour un calque Insérer un dossier de calque Supprimer le calque Insérer un nouveau calque (au dessus du calque actif) 1. Différence Bitmap/Vectoriel 2. Introduction Flash 3. Dessiner avec Flash - Outils de dessin - Scénario et notion d’image clé - Calques - Symboles 4. Animer avec Flash - Animation interpolée de mouvement - Animation interpolée de forme -Exportation vers Dreamweaver

FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps Différence Bitmap/Vectoriel 2. Introduction Flash 3. Dessiner avec Flash - Outils de dessin - Scénario et notion d’image clé - Calques - Symboles 4. Animer avec Flash - Animation interpolée de mouvement - Animation interpolée de forme -Exportation vers Dreamweaver Scénario : Temps écoulé Cadence en image/sec Numéro de l’image courante Image courante Calque sélectionné dans image courante

FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps Différence Bitmap/Vectoriel 2. Introduction Flash 3. Dessiner avec Flash - Outils de dessin - Scénario et notion d’image clé - Calques - Symboles 4. Animer avec Flash - Animation interpolée de mouvement - Animation interpolée de forme -Exportation vers Dreamweaver Notion d’image clé : Dans le scénario, vous travaillez avec des images et des images clés Une image : Element de l’animation Une image clé : C’est une étape clé dans une animation Généralement chaque image clé est différente de l'image clé qui la précède Elles sont très utilisées dans les interpolations

FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps Différence Bitmap/Vectoriel 2. Introduction Flash 3. Dessiner avec Flash - Outils de dessin - Scénario et notion d’image clé - Calques - Symboles 4. Animer avec Flash - Animation interpolée de mouvement - Animation interpolée de forme -Exportation vers Dreamweaver 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 par forme ( Exercice1) 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?

FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps Différence Bitmap/Vectoriel 2. Introduction Flash 3. Dessiner avec Flash - Outils de dessin - Scénario et notion d’image clé - Calques - Symboles 4. Animer avec Flash - Animation interpolée de mouvement - Animation interpolée de forme -Exportation vers Dreamweaver 3 types de calques: ( Lorsque vous créez un calque, vous pouvez définir son type en cliquant dessus avec le bouton droit et en allant dans les propriétés ) Normal Masque : Sert à masquer un autre calque Guide (et Guidé) : Le calque "guide" permet de définir une trajectoire de déplacement, et le calque "guidé" représente l'objet qui devra suivre cette trajectoire

FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps Différence Bitmap/Vectoriel 2. Introduction Flash 3. Dessiner avec Flash - Outils de dessin - Scénario et notion d’image clé - Calques - Symboles 4. Animer avec Flash - Animation interpolée de mouvement - Animation interpolée de forme -Exportation vers Dreamweaver Exercice 3 (calque masque): 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.

FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps Différence Bitmap/Vectoriel 2. Introduction Flash 3. Dessiner avec Flash - Outils de dessin - Scénario et notion d’image clé - Calques - Symboles 4. Animer avec Flash - Animation interpolée de mouvement - Animation interpolée de forme -Exportation vers Dreamweaver 3 types de symboles : Les boutons, avec une animation selon la position de la souris Les graphiques, constitués d’images fixes Les clips, qui sont des animations de mouvement et/ou de forme. (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

FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne Différence Bitmap/Vectoriel 2. Introduction Flash 3. Dessiner avec Flash - Outils de dessin - Scénario et notion d’image clé - Calques - Symboles 4. Animer avec Flash - Animation interpolée de mouvement - Animation interpolée de forme -Exportation vers Dreamweaver Exercice 4 : Ouvrir un nouveau dessin (ctrl+N ou Fichier – nouveau) Créer un nouveau symbole de type bouton que vous appellerez « algue » ( Ctrl+F8 ou Insertion – Nouveau symbole) 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é” (scénario) Nous allons en utilisez que deux pour haut pour dessus

FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps Différence Bitmap/Vectoriel 2. Introduction Flash 3. Dessiner avec Flash - Outils de dessin - Scénario et notion d’image clé - Calques - Symboles 4. Animer avec Flash - Animation interpolée de mouvement - Animation interpolée de forme -Exportation vers Dreamweaver Animation interpolée de mouvement : C’est un outil qui permet de créer des animations de mouvements entre plusieurs positions d’un même symbole Deux types d’interpolation de mouvement: Sans guide : On donne une position initiale et finale et flash propose une trajectoire rectiligne et crée les positions intermédiaires. Avec guide: On dessine un guide dans un calque spécifique et le symbole le prendra pour trajectoire de déplacement.

FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps Différence Bitmap/Vectoriel 2. Introduction Flash 3. Dessiner avec Flash - Outils de dessin - Scénario et notion d’image clé - Calques - Symboles 4. Animer avec Flash - Animation interpolée de mouvement - Animation interpolée de forme -Exportation vers Dreamweaver Exercice 4 (suite) : Sortir de l’édition du symbole algue Dessiner sur deux calques différents (1 pour le fond + 1 pour les algues) l’image à droite, et pour les deux calques, allez à l’image 60 et insérez une image clé(F6). Importer dans la bibliothèque le petit poisson rouge (Fichier – Importer - Importer dans la bibliothèque) Créer un nouveau calque (« poisson »), et ajouter l’image Transformer-la en symbole (clique droit sur l’image – convertir en symbole - clip) Insérer une image clé à l’image 60 et déplacez l’image Cliquer sur une image intermédiaire dans le scénario (bouton droit) et choisir interpolation de mouvement.

FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps Différence Bitmap/Vectoriel 2. Introduction Flash 3. Dessiner avec Flash - Outils de dessin - Scénario et notion d’image clé - Calques - Symboles 4. Animer avec Flash - Animation interpolée de mouvement - Animation interpolée de forme -Exportation vers Dreamweaver Exercice 4 (suite): Utilisation d’un guide de mouvement Garder la même animation créée à l’étape précédente. Sélectionner le calque « poisson » et créer un guide Cliquer sur la première image du calque « guide » et à l’aide d’un outil de dessin (plume ou une des figures géométriques), tracer la trajectoire voulue Attention : le centre du poisson doit être au début de la trajectoire Se placer sur l’image clé en fin du mouvement et placé le symbole poisson à la fin de la trajectoire. Ctrl+entrée pour tester

FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps Différence Bitmap/Vectoriel 2. Introduction Flash 3. Dessiner avec Flash - Outils de dessin - Scénario et notion d’image clé - Calques - Symboles 4. Animer avec Flash - Animation interpolée de mouvement - Animation interpolée de forme -Exportation vers Dreamweaver Exercice 4 (suite): (L’interpolation de forme peut se faire sans convertir les dessins en symboles) Garder la même animation créée à l’étape précédente. Créer un nouveau calque Sélectionner la première image dans le scénario et dessinez par exemple un cercle vide sur une algue (pour représenter une bulle) Se placer sur l’image 60 et insérer une image clé. Changer aussi la taille et le contour de la bulle. Cliquer sur une image intermédiaire du scénario et choisir dans « propriétés » (en bas), interpolation de forme (en choisissant la vitesse qu’on veut appliquer)

FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps Différence Bitmap/Vectoriel 2. Introduction Flash 3. Dessiner avec Flash - Outils de dessin - Scénario et notion d’image clé - Calques - Symboles 4. Animer avec Flash - Animation interpolée de forme - Animation interpolée de mouvement -Exportation vers Dreamweaver Exporter l’animation vers Dreamweaver : 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