Présentation n°1 du logiciel Flash 8 SI 28 Présentation n°1 du logiciel Flash 8 P 2008 BRASI Nicolas GUIGON Camille

Sommaire 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

Bitmap vs Vectoriel Bitmap Vectoriel 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 Bitmap Vectoriel Principe Grille de points (pixels: picture element) où chaque pixel possède une position et une couleur. Exemple: écran de 640 x 480 ou 1024 x 768. L'ensemble des points forme un dessin Des lignes, des courbes calculées mathématiquement (équation vectorielle) et qui peuvent être modifiées (épaisseur, longeur, couleur, forme...). L'ensemble des lignes forme un dessin. Caractéristiques des «dessins» 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. 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é...

Bitmap vs Vectoriel Bitmap Vectoriel Caractéristiques des fichiers 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 Bitmap Vectoriel Caractéristiques des fichiers Volumineux (chaque point est codé et mémorisé) Extension habituelle: *.psd, *.bmp, *.tif, et pour l'internet *.jpg, *.gif Légers (des formules mathématiques sont codées) Extension habituelle: *.ai, *.cdr, *.fh Logiciels Photoshop, Paint, Paintbrush, PShopPro... Adobe Illustrator, Corel Draw, Macromedia FreeHand...

Bitmap vs Vectoriel ( 0, 0 ) 3 2 Bitmap : Point par point 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 Bitmap : Point par point Matrice de points ayant chacun une valeur Pixel Vectoriel : Description vectorielle de l’image On utilise un langage de description ( 0, 0 ) 3 Rectangle ( 0 , 0 , 3 , 2 ) 2

Introduction Flash 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 Le logiciel Flash 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. Ce logiciel est actuellement utilisé dans les contextes suivants : Création de sites Internet et de jeux vidéos distribués sur le Web. Création d'applications multimédia. Création de diaporamas interactifs. Création de bannières publicitaires. Diffusion de vidéos via le Web…

La scène Scénario Les outils La bibliothèque Les propriétés 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 Scénario Les outils La bibliothèque Les propriétés

Le scénario : « Time Line » 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 La scène Les outils La bibliothèque Les propriétés

La bibliothèque Scénario Les outils La bibliothèque La scène 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 Scénario La scène Les outils La bibliothèque Les propriétés

Propriétés Scénario Les outils La bibliothèque La scène 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 Scénario La scène Les outils La bibliothèque

Les outils Scénario Les outils La bibliothèque La scène Les propriétés 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 Scénario La scène Les outils La bibliothèque Les propriétés

Outils de dessin 3. Dessiner avec Flash Outils de dessin Sélection 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 Sélection Sous sélection Transformation libre Transformer le remplissage Ligne Lasso Plume Texte Ovale Rectangle Crayon Pinceau Encrier Pot de peinture Pipette Gomme Outil Main Zoom Couleur de trait Couleur de remplissage

Outils de dessin Options gomme 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 Options gomme Options pot de peinture Options crayon Options pinceau

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

Re-sélectionnez la même figure et déplacez-la. Exercice 1 : 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 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 ?

Exercice 1 : 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 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. 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).

Exercice 1 : 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 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

Scénario : Les calques Pour tous les calques Cacher/Visualiser Verrouiller/Dév. La possibilité de modifier le calque Cacher le 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 Nom du calque actif 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 : 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? 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

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

Exercice 3 (calque masque): 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 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.

Scénario : la Time Line 3. Dessiner avec Flash 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 Scénario : la Time Line Calque sélectionné dans image courante Image courante Numéro de l’image courante Temps écoulé Cadence en image/sec

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

Clique droit sur l’image -> convertir en symbole 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 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

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é” (scénario) Créer une image clé pour chaque état (ronds, rectangles...) Qu’observez-vous ? 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

Animation interpolée de mouvement : 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 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.

Exercice 5 : Ouvrir un nouveau dessin (ctrl+N ou Fichier – nouveau) Dessiner un triangle vert en haut à gauche Insérer une image clé à l’image 30. Sur l’image 30, déplacer le triangle 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”. 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

Exercice 6 : 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”. 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

Exercice 7 : Revenir sur l’animation précédente, et créer un nouveau calque. Dessiner un cœur rose 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 coeur, et créer une image clé à 30, et insérer une interpolation de mouvement entre ces deux images. Déplacer les coeurs de chaque image aux extrémités de la courbe guide “la vague”. Tester l’animation “Ctrl+entrée”. 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

Faites voler le lapin crétin !!! Exercice 7 : 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 Faites voler le lapin crétin !!!