La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

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

Présentations similaires


Présentation au sujet: "1 FLASH 8 SI28 - Séance FLASH 1 A08 Rémy WEILL GM05 Alexandre BLANCHARD GSM01."— Transcription de la présentation:

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

2 Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Outils de dessin Scénario et notion dimage 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 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 dapplications multimédia Création de diaporamas interactifs Création de bannières publicitaires Linterface 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 4 Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH LA SCENE

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

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

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

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

9 *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 lensemble 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 *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 *11 Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH Quelques exercices dapprentissage de FLASH pour Créer un clip animé dune pénalité au rugby en parfaite autonomie…

12 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 Ovale Crayon Encrier Pipette Lasso Texte Gomme Pinceau Outil Main Zoom Couleur de trait Transformation libre Transformer le remplissage Crayon Pinceau Couleur de remplissage Pot de peinture

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

14 *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 à lautre. Cliquer en dehors de la zone de dessin. Re-sélectionner la même figure et déplacer la. QUE CONSTATEZ VOUS ?

15 *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 quun (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 na plus dintersection avec les autres objets (on peut séparer pour modifier).

16 16 Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH GROUPER / DISSOCIER Laction de grouper plusieurs objets entre eux permet de les rassembler dans un même cadre. Il ny a plus interaction entre chaque objet dun 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 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 limage courante Image courante Calque sélectionné dans image courante

18 18 Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH SCENARIO : NOTION DIMAGE CLE Dans le scenario, vous travaillez avec des images et des images clés: Une IMAGE est un élément de lanimation 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 19 LES CALQUES Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH 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 Insérer un dossier de calque Supprimer le calque Insérer un nouveau calque (au dessus du calque actif)

20 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 quil contient (pour cela, double cliquez sur le nom) Superposer les trois figures Changer plusieurs fois lordre des calques QUOBSERVEZ VOUS ? Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH

21 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 dutiliser 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 *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é saffiche 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 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, quon 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 limage - convertir en symbole

24 *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 saffiche. Il sagit 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...) QUOBSERVEZ VOUS ? Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH

25 *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 dun même objet. On distingue deux types danimations de mouvement: SANS calque : on définit la position de départ et la position darrivé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). Lobjet suivra alors cette nouvelle trajectoire définie.

26 *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é à limage 30. Sur limage 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 lanimation Ctrl+entrée. Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH

27 *27 Exercice 5 - Animation AVEC calque Revenir sur lanimation 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 lanimation Ctrl+entrée. Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH

28 28 ANIMATION INTERPOLEE DE FORME Linterpolation de forme fonctionne sur le même principe que les animations de mouvement. On définit une forme de départ et une forme darrivée, FLASH effectuera alors la transition de lui-même dune forme à lautre. Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH

29 *29 Exercice 7 Revenir sur lanimation précédente, et créer un nouveau calque. Dessiner un carré bleu au milieu à gauche. Insérer une image clé à limage 30. Sur limage 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 lanimation Ctrl+entrée. Introduction FLASH 8 Différence Bitmap / Vectoriel Objectifs de la séance Dessiner avec FLASH Animer avec FLASH

30 30 A toi de jouer, transforme lessai...

31 31 Enregistrez lanimation Allez dans Fichier - paramètres de publication» Cliquer sur « Publier » (création dun.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


Télécharger ppt "1 FLASH 8 SI28 - Séance FLASH 1 A08 Rémy WEILL GM05 Alexandre BLANCHARD GSM01."

Présentations similaires


Annonces Google