ADOBE FLASH Animations Introduction et prise en main Logique constructive Techniques d animations Les mouvement articulés Interactivité Le son et la vidéo Publication Ressources
Introduction et prise en main Gérer les espaces de travail Paramètre de la scène Comprendre le scénario
Les espaces de travail Comprendre les espaces de travail Réinitialiser les espaces Créer ses propres espaces
Paramètres de la scène Utiliser le zoom Modifier les propriétés de la scène Taille Couleur de fond Cadence
Comprendre le scénario Principe de déroulement image par image Gestion des calques Créer/Renommer des calques Créer des dossiers Différentes images : Image simple Image Clé Image Clé vide Manipulation des images Création d une image : F5/F6 Dupliquer une image ALT + Déplacement
Logique constructive Utiliser les symboles Gérer et modifier les formes Réaliser des motifs Utiliser le texte Ajouter des effets Gérer la 3D et la perspective
Utiliser les symboles Trois type : Graphique Clip Bouton Exercice : Créer une instance d un objet sur la scène A0
Gérer et modifier les formes Remplissage et contours Encrier Pot de peinture Outil de sélection Outil de sous-sélection Outils de transformation libre Modes : pivot, déformation, enveloppe,... A1
Réaliser des motifs Exercice : Réaliser un motif Créer un symbole Activer outil Déco Utiliser le symbole comme forme pour la réplication Effet symétrique Module : Choisir le symbole Options : Faire pivoter Dessiner (placer) le symbole sur la scène. Modifier le comportement du pivot et du point Exercice : Essayer les autres modes NEW
Utiliser le texte Exercice : Vectoriser du texte Outil Texte Mode statique Choisir la police Modifier la taille Séparer une première fois par lettres -> CTRL + B Séparer une seconde fois pour vectoriser -> CTRL + B NEW
Ajouter des effets Exercice : Appliquer des effets et créer une sélection Ajouter le symbole graphique à la scène Convertir en Clip Appliquer les effets Fabriquer un sélection Copier les effets Coller les effets à une autre instance NEW A2
Gérer la 3D et la perspective Exercice : Translation 3D sur du texte Placer une zone de texte Convertir en symbole Clip Utiliser l outil Rotation 3D Utiliser l outil Translation 3D Modifier le point de fuite Modifier l angle NEW
Techniques d animations Animer image par image Gérer les interpolations de mouvements Gérer les interpolations de formes Modifier le chemin d animation Utiliser les masques Utiliser les présélections et mouvements XML Utiliser l éditeur de mouvement Animer un mouvement 3D
Animer image par image Exercice : Gérer la vitesse de l animation Publier le flash Modifier la vitesse Exercice : Déplacer l animation dans un Clip autonome Sélectionner le calque Menu Modifier -> Scénario -> Couper les images Créer un clip dans la bibliothèque Menu Modifier -> Scénario -> Coller les images De retour dans la scène : Placer l instance du Clip B0
Interpolations de mouvements Deux types d interpolations de mouvements : Interpolation classique = CS3 Interpolation = CS4 Exercice : Créer une interpolation de mouvement Sélectionner l image 60 du scénario Click droit : Insérer une image Click droit : Créer une interpolation de mouvement Sélectionner la dernière image de l interpolation Déplacer le clip à sa position finale Tester l animation Ajouter des images clés intermédiaires... B1
Interpolations de formes Exercice : Morphing de texte vectorisé Créer une deux zones texte sur le scénario Vectoriser les zones : CTRL + B Créer une interpolation de forme Ajouter des repères de formes Modification -> Forme -> Ajouter un repère de forme NEW
Chemin d animation Exercice : Modifier graphiquement un chemin Créer une interpolation Modifier le chemin avec l outil de sélection Modifier le chemin avec l outil de conversion de point d ancrage Faire pivoter le clip sur la trajectoire Orienter le clip sur la trajectoire NEW
Utiliser les masques Exercice : Masquer un clip par un autre Créer deux calques dans le scénario Calque haut : poser le masque Calque bas : poser le fond Click droit sur le calque masque -> Masque Exercice : Animer le masque... B2
présélections et XML Exercice : Importer une animation XML Créer un Clip dans la bibliothèque Menu Commandes Importer le mouvement XML Spirale.xml NEW Exercice : Utiliser les présélections personnalisées Click droit sur l interpolation Enregistrer en tant que présélection de mouvement Ajouter un calque avec un clip Fenêtre Présélection de mouvements Appliquer le mouvement personnalisé B3
L éditeur de mouvement Exercice : Modifier les paramètres du mouvements NEW
Animer un mouvement 3D Exercice : Animer l arrivée des photos en 3D Placer sur le premier calque une photo Créer une interpolation Etendre la durée Modifier l emplacement de la première image (plus grand :) Modifier la rotation 3D Modifier l emplacement de la dernière image De même pour chaque image B4
Les mouvements articulés Utiliser la cinématique inverse Définir les segments Insérer des poses Modifier les squelettes Modifier les options du squelette
La cinématique inverse Calcul qui mesure les angles pour donner une position. Pas besoin d animer chaque segment Gestion des poses générales sur les images clés Flash interpole les pixels selon les poses Hiérarchie d une armature (squelette) Les segments s enchaînent C0
Définir les segments Exercice : Poser une armature (squelette) sur un objet Utiliser ou re-créer la lampe Outil segment Placer 3 segments Insérer une pose Animer l objet C0
Insérer des poses Exercice : Animer le squelette avec des poses Sur une image du scénario Insérer une pose Animer l objet C0
Modifier les squelettes Exercice : Contraindre les mouvements des articulations Sur l articulation du bas : Pas de rotation + translation X Sur les deux autres : Contraindre la rotation C0
Options du squelette Squelettes Heure de création : Le squelette est animé par le scénario Lu comme une animation Squelette Exécution : Squelette interactif qui peut être déplacé par l utilisateur (pas de poses) Option vitesse sur les articulations : Définit la rigidité de l articulation (pivot plus ou moins lent)
Interactivité Créer des symboles boutons Utiliser les gestionnaires d événements Contrôler la navigation
Créer des boutons Exercice : Créer un bouton de commande Nouveau symbole bouton Créer une forme pour le fond Convertir en symbole ce fond Ajouter des images clés Modifier les paramètres sur chaque image Placer le bouton sur la scène D0
Gestionnaires d événements Exercice : Manipuler un clip avec ActionScript Fabriquer un clip : coccinelle en mouvement Nommer les boutons et le clip dans la scène bt_stop, bt_play et coc_bouge Ajouter un calque au scénario code Sur la première image : bt_stop.addeventlistener(mouseevent.click,cocstop); function cocstop(){ coc_bouge.stop(); } D0
Contrôler la navigation Exercice : Fabriquer une visionneuse photos. Monter un fond et un titre sur un calque Placer les boutons-images avec des noms Placer sur un calque à différentes intervalles les images avec des étiquettes Le code : bt1.addeventlistener(mouseevent.click,img1); function img1(evt :MouseEvent):void{ } gotoandstop("img1"); D1
Le son et la vidéo Importer et utiliser des fichiers audio Utiliser Adobe Media Encoder Utiliser le chargement dynamique
Audio : Utilisation Exercice : Importer et utiliser des fichiers son Importer des fichiers audio Utiliser les bibliothèques communes Placer des sons dans les boutons E0
Vidéo : Media Encoder Exercice : Encoder une vidéo au format Flash : Lancer Adobe Media Encodeur Option : F4V - Web taille moyenne Redimensionner : largeur de 680px Exportation audio et vidéo Multiplexage : F4V
Vidéo : Chargement dynamique Exercice : Inclure une vidéo externe dans un Flash : Menu Fichier -> Importer de la vidéo Choisir le fichier F4V Option : Charger la vidéo externe avec un composant... Choisir le composant Choisir la couleur Tester l animation E1
La publication Utiliser le testeur de bande passante Modifier les paramètres de publication Publier au format HTML Publier un fichier de projection
Testeur de bande passante Exercice : Afficher le testeur : Tester une animation Menu Affichage -> Testeur de bande passante Modifier les paramètres de téléchargement Simuler le téléchargement F0
Paramètres de publication Définir les paramètres de publication : Format de sortie : Flash Lecteur visé Compression de l animation Qualité JPEG Format de sortie HTML : Détection de version Dimensions et redimentionnement
Fichier de projection Exercice : Création d un projecteur Choisir le format de sortie sur Projection Créer le fichier Tester l animation
Ressources Publication Web
Publications Adobe Flash CS4 Professional - Classroom in a book Adobe Press Flash CS4 - Studio factory ENI Editions
Web http://www.flashfestival.net http://www.volumeone.com http://www.flashxpress.net http://www.flashkit.com
Merci de votre attention Vous êtes libres : de reproduire, distribuer et communiquer cette création au public Selon les conditions suivantes : Paternité. Vous devez citer le nom de l'auteur original de la manière indiquée par l'auteur de l'oeuvre ou le titulaire des droits qui vous confère cette autorisation (mais pas d'une manière qui suggérerait qu'ils vous soutiennent ou approuvent votre utilisation de l'oeuvre). Pas d'utilisation Commerciale. Vous n'avez pas le droit d'utiliser cette création à des fins commerciales. Pas de Modification. Vous n'avez pas le droit de modifier, de transformer ou d'adapter cette création. http://creativecommons.org/licenses/by-nc-nd/3.0/deed.fr E. Grandadam - LCProd mail@lcprod.net