FLASH MX : séance 1 Vivien FILIPPINI Jeanne VERRE Exposé SI28

Les atouts de Flash Création d’animations 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.

Environnement Flash

Scénario Barre d’outils dessin Panneaux de commande Bibliothèque D’animation Environnement Flash

Dessiner avec Flash Sous–sélection Lasso Texte Rectangle Pinceau Transformer le remplissage Pot de peinture Gomme Zoom Couleur de remplissage Flèche Ligne Plume Ovale Crayon Transformation libre Encrier Pipette Main Couleur de trait Options (en rapport avec l’outil sélectionné)

Dessinez un rectangle Dessinez 2 triangles de chaque coté Dessinez 2 autres triangles pour les voiles Déformez les voiles avec l’outil « flèche » Redimensionner l’objet avec l’outil « transformation libre » Exercice – Outils de dessin

Les calques

Application L’île Insérez un claque et changez le nom des 2 calques Dessinez une île ! Attention ! RegroupementSegmentation Insérer un calque

Remarques Plus le calque est haut dans la fenêtre, plus il sera au 1er plan Calque de masque Un calque de masque sert à appliquer certains effets de projecteur ou de transition au calque qu’il recouvre. 1er plan

Application Cliquez sur le calque de l’île Insérez un nouveau calque Dessinez un carré sur la moitié de l’île Clic droit > Masque

Images clés Images : Ce sont les éléments d’une animation Image clé : C’est une image dans laquelle il est possible de définir les modifications d’un bouton ou d’un effet animé. Elles sont représentées par un point sur le scénario.  Voir animation par interpolation Dans le scénario, vous travaillez avec des images et des images-clés.

Application Sélectionnez l’image 15 du calque bateau Cliquez sur Insertion > Image clé Sélectionnez le bateau avec l’outil flèche Déplacez le bateau

Les Symboles (1/4) Il existe 3 types de symbole : les boutons, avec une animation selon la position de la sourie 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.

Les Symboles (2/4)– les Boutons Il est constitué de 4 états : - Haut, - Dessus, - Abaissé, - Cliquable.

Les Symboles (3/4) – Graphiques Les graphiques sont des images simples composés d’un ou plusieurs calque. Tout comme les autres symboles, il sont gardés en mémoire dans la librairie et sont donc facilement utilisables dans un autre document flash.

Les Symboles (4/4) – Les Clips Les clips sont en fait des graphiques animés avec plusieurs images clefs. Ils sont animés par : - interpolation de mvt. - interpolation de forme.

Exercice (1/2) Convertir le Bateau en Symbole graphique.

Exercice (2/2) Crée un bouton en modifiant un graphique déjà existant.

Les différents types d’animation On distingue deux catégories d’animations : - les Animations d’interpolation de forme - les Animations d’interpolation de mouvement

Animation interpolée de mvt. (1/2) L’animation interpolée de mouvement est une translation et/ou une rotation d’un objet. Pour animer un objet, on insert les différentes images clefs dans la barre Scénario puis on modifie la position ou l’orientation de l’objet.

Animation interpolée de mvt. (2/2) Entre chaque image clef, on crée une interpolation de mouvement Ensuite, Flash MX extrapole lui-même les images intermédiaires pour rendre l’animation fluide.

Exercice Animer le bateau sur l’écran, grâce à une animation interpolée de mouvement.

Animation interpolée de formes (1/2) Les animations interpolées de formes jouent sur plusieurs facteurs : – la forme, – la couleur, – la transparence, Pour chaque image clef, on modifie la forme, la transparence ou la couleur de l’objet à animer.

Animation interpolée de formes (2/2) Des flèches sur fond vert relient alors les différents images clefs, nous avons crée une interpolation de forme. Pour chaque image clef de la scène, on modifie, dans ses propriété, le type d’interpolation pour le mettre sur interpolation de forme.

Exercice Crée un clip avec le symbole déjà existant du bateau et une animation interpolée de forme.

Exportation sous Dreamweaver Après avoir enregistré le document Flash, on ouvre Dreamweaver, et on va dans le menu : Insertion/Média/Flash Un signe « » apparaîtra alors dans la page.

Exercice Exporter l’animation obtenue sur Dreamweaver et l’intégrer à une page Internet.