Download - FLASH MX Partie 1
![Page 1: FLASH MX Partie 1](https://reader035.vdocuments.fr/reader035/viewer/2022062314/56812a6d550346895d8df28e/html5/thumbnails/1.jpg)
FLASH MX
Partie 1
SI28
Jérémy Dufetre - Ludovic Pilache
![Page 2: FLASH MX Partie 1](https://reader035.vdocuments.fr/reader035/viewer/2022062314/56812a6d550346895d8df28e/html5/thumbnails/2.jpg)
Les atouts de Flash
• Création d’animation pour le Web, pouvant contenir une forte interactivité
• Faible poids des fichiers• Compatible avec tous les navigateurs• Chargement en lecture continue : l’application se lance sans
être complètement chargée
Interface
Dessiner
Animer Publier
![Page 3: FLASH MX Partie 1](https://reader035.vdocuments.fr/reader035/viewer/2022062314/56812a6d550346895d8df28e/html5/thumbnails/3.jpg)
Environnement de travailInterface Dessiner Animer PublierInterface
Dessiner
Animer Publier
![Page 4: FLASH MX Partie 1](https://reader035.vdocuments.fr/reader035/viewer/2022062314/56812a6d550346895d8df28e/html5/thumbnails/4.jpg)
Les fenêtres Flash MXInterface Dessiner Animer PublierInterface
Dessiner
Animer Publier
Barre d’outil dessins
1
1
Scénario
2
2
Fenêtre des propriétés
3
3
![Page 5: FLASH MX Partie 1](https://reader035.vdocuments.fr/reader035/viewer/2022062314/56812a6d550346895d8df28e/html5/thumbnails/5.jpg)
Les fenêtres Flash MXInterface
Dessiner
Animer Publier
6
La Bibliothèque
F116
4
Mélangeur de couleurs
4
5
Nuancier5
![Page 6: FLASH MX Partie 1](https://reader035.vdocuments.fr/reader035/viewer/2022062314/56812a6d550346895d8df28e/html5/thumbnails/6.jpg)
Fenêtre scénario
Chaque image est une superposition de calques
Une séquence est un enchaînement d’images dans le temps
Une animation est la succession d’une ou plusieurs séquence
Interface
Dessiner
Animer Publier
![Page 7: FLASH MX Partie 1](https://reader035.vdocuments.fr/reader035/viewer/2022062314/56812a6d550346895d8df28e/html5/thumbnails/7.jpg)
Les outils de dessinDessiner
Interface
Animer Publier
• Dessiner au crayon :
• Tracer des lignes, des ovales, des rectangles
• Peindre avec l’outil pinceau et remplir avec pot de peinture:
• Effacer
![Page 8: FLASH MX Partie 1](https://reader035.vdocuments.fr/reader035/viewer/2022062314/56812a6d550346895d8df28e/html5/thumbnails/8.jpg)
Les outils de dessin
• Les dégradés
• Sélectionner des objets :
- avec l’outil flèche
- avec l’outil lasso
• Redimensionner et faire pivoter les objets
• Aligner les objets
• Importer les objet
• Grouper les objets
• Ajouter du texte
Dessiner
Interface
Animer Publier
![Page 9: FLASH MX Partie 1](https://reader035.vdocuments.fr/reader035/viewer/2022062314/56812a6d550346895d8df28e/html5/thumbnails/9.jpg)
Animer sa fenêtreInterface
AnimerDessiner
Publier
![Page 10: FLASH MX Partie 1](https://reader035.vdocuments.fr/reader035/viewer/2022062314/56812a6d550346895d8df28e/html5/thumbnails/10.jpg)
Les calquesInterface
AnimerDessiner
Publier
Les 2 principaux types de calques :Les 2 principaux types de calques :
• Les calques normaux • Les calques guides et guidés
![Page 11: FLASH MX Partie 1](https://reader035.vdocuments.fr/reader035/viewer/2022062314/56812a6d550346895d8df28e/html5/thumbnails/11.jpg)
Dessiner sur plusieurs calquesInterface
AnimerDessiner
Publier
Sélectionner l’onglet calque dans la fenêtre scénario pour ajouter des calques.
Le but est de séparé le dessin en plusieurs parties et de mettre chacune de ces parties dans un calque.
La superposition de ces calques donnera le dessin d’origine.
Les calques peuvent être organisés par dossiers.
![Page 12: FLASH MX Partie 1](https://reader035.vdocuments.fr/reader035/viewer/2022062314/56812a6d550346895d8df28e/html5/thumbnails/12.jpg)
Les imagesInterface
AnimerDessiner
Publier
C’est une image singulières sur lesquelles le travail s'effectue. Elles correspondent souvent à un changement d'état et sont représentées par un point sur le scénario.
Les images sont identiques à l'image clé précédente la plus proche, ou bien calculées automatiquement lors d'interpolations.
Image cléImage clé
Dans le scénario, vous travaillez avec des images et des images-clés.
ImageImage
Ce sont les éléments d’une animation
![Page 13: FLASH MX Partie 1](https://reader035.vdocuments.fr/reader035/viewer/2022062314/56812a6d550346895d8df28e/html5/thumbnails/13.jpg)
Insérer une image
• Pour une image clé
Cliquer sur l’image 10, par exemple, et faites, au choix :
bouton droit > Insérer une image clé
F6
Ou encore aller dans le menu insertion >image clé.
Interface
AnimerDessiner
Publier
Ajouter une image clé et des images dans un calqueAjouter une image clé et des images dans un calque
• Pour une image
Cliquez sur l’image 20 d’un calque et faites, au choix :
bouton droit > Insérer une image
F5
Menu insertion >image.
![Page 14: FLASH MX Partie 1](https://reader035.vdocuments.fr/reader035/viewer/2022062314/56812a6d550346895d8df28e/html5/thumbnails/14.jpg)
Animation image par image
Sélectionner l’image 1 du calque, dessiner ensuite un objet dans la scène, par exemple le plus à gauche possible.
Aller ensuite dans insertion>image clé.
Faire un petit déplacement de l’objet, par exemple vers la droite, et aller dans insertion>image clé.
Rééditer la manipulation jusqu’à arriver vers l’autre bout (une dizaine d’image), retourner à l’image 1 et appuyer sur entrée.
Interface
AnimerDessiner
Publier
![Page 15: FLASH MX Partie 1](https://reader035.vdocuments.fr/reader035/viewer/2022062314/56812a6d550346895d8df28e/html5/thumbnails/15.jpg)
Interpolations Interface
AnimerDessiner
Publier
Les interpolations de mouvement interposé :Les interpolations de mouvement interposé :
Sélectionner l’image 1 du calque, dessiner ensuite un objet dans la scène, par exemple le plus à gauche possible.
Aller par exemple à l’image 20, cliquer sur insertion>créé une interpolation de mouvement, et déplacer l’objet.
![Page 16: FLASH MX Partie 1](https://reader035.vdocuments.fr/reader035/viewer/2022062314/56812a6d550346895d8df28e/html5/thumbnails/16.jpg)
Les symboles Interface
AnimerDessiner
Publier
Utilisation de symbolesUtilisation de symboles
L’utilisation de symboles permet de créer des occurrences dans les dessins
Le symbole est unique et est répertorié dans une bibliothèque
Les occurrences sont multiples et dépendent du symbole
Pour modifier toutes les occurrences en même temps il faut modifier le symbole…
Conversion d’un dessin en symbole : Conversion d’un dessin en symbole :
Click droit > convertir en symbole > Graphique
Ou F8
![Page 17: FLASH MX Partie 1](https://reader035.vdocuments.fr/reader035/viewer/2022062314/56812a6d550346895d8df28e/html5/thumbnails/17.jpg)
Interpolations
Les interpolations de mouvement avec guide :Les interpolations de mouvement avec guide :
Mettre dans le calque 20 images et retourner à l’image 1.
Dessiner un objet, un rond par exemple.
Sélectionner le calque et choisissez Insertion>Guide de mouvement. Cliquer ensuite sur l’image 1 du guide.
Prenez l’outil crayon et tracer un trajet. Cliquer ensuite sur l’image 1 du calque et prenez l’outil flèche. Aller sur la scène, sélectionner le rond et déplacer le sur le début du trajet (un petit cercle noir au milieu doit se mettre en gras).
Choisissez ensuite Insertion>Crée une interpolation de mouvement.
Sélectionner l’image 20 et mettre une image clé.
Déplacer ensuite le rond vers l’autre extrémité du trajet.
Interface
AnimerDessiner
Publier
*
![Page 18: FLASH MX Partie 1](https://reader035.vdocuments.fr/reader035/viewer/2022062314/56812a6d550346895d8df28e/html5/thumbnails/18.jpg)
Interpolations
• Les interpolations de forme :Les interpolations de forme :
Créer par exemple 20 images dans le calque et retourner à l’image 1.
Dessiner un objet, un rond et retourner à l’image 20.
Insérer une image clé. Effacer le rond et mettre un carré (par exemple).
Cliquer ensuite sur une image entre le 1 et le 20 et dans la fenêtre propriétés, choisir dans le menu interpolation « forme ».
Interface
AnimerDessiner
Publier
*
![Page 19: FLASH MX Partie 1](https://reader035.vdocuments.fr/reader035/viewer/2022062314/56812a6d550346895d8df28e/html5/thumbnails/19.jpg)
Paramètres de publicationPublierDessine
rAnimerInterfac
eFichier > paramètres de publication …
![Page 20: FLASH MX Partie 1](https://reader035.vdocuments.fr/reader035/viewer/2022062314/56812a6d550346895d8df28e/html5/thumbnails/20.jpg)
Formats de publicationPublierDessine
rAnimerInterfac
e
Flash (.swf) : c'est le format d'exportation le plus courant, ce type de fichier est directement utilisable dans une fenêtre d'explorateur Internet. L'animation correspond exactement à celle que vous avez créée.
HTML (.html) : Flash créée lui même une page html vierge contenant uniquement le .swf.
GIF (.gif) : ce format est très répandu sur internet. Vous pouvez créée des gif animés mais vous perdez totalement l'interactivité, et le résultat est parfois décevant. A n'utiliser qu'en toute connaissance de cause.
JPEG (.jpg) : exporte en image, il n'y aura donc plus d'animation.
PNG (.png) : idem que JPEG mais pour le format PNG.
Projection Windows (.exe) : l'exportation sera très lourde (plusieurs Mo) mais l'avantage est que cela fonctionnera sur n'importe quel machine car le logiciel pour visualiser est inclu. C'est une sorte de SWF avec visualisateur intégré.
Projection Macintosh (.hqx) : peut être comme le précédent mais pour Macintosh...
Quick Time (.mov) : l'animation est transformer en film, vous perdez donc totalement l'interactivité.
![Page 21: FLASH MX Partie 1](https://reader035.vdocuments.fr/reader035/viewer/2022062314/56812a6d550346895d8df28e/html5/thumbnails/21.jpg)
Exporter votre animation
AperçuAperçuFichier > Aperçu avant publication > Flash, HTML, …
Exporter une animationExporter une animation
Enregistrer votre animation.Fichier > Publier
Insertion dans DreamweaverInsertion dans Dreamweaver
PublierDessiner
AnimerInterface
![Page 22: FLASH MX Partie 1](https://reader035.vdocuments.fr/reader035/viewer/2022062314/56812a6d550346895d8df28e/html5/thumbnails/22.jpg)
Des questions ?
Merci de votre attention !
![Page 23: FLASH MX Partie 1](https://reader035.vdocuments.fr/reader035/viewer/2022062314/56812a6d550346895d8df28e/html5/thumbnails/23.jpg)