Présentation de Flash 3 de Macromédia

Flash 3 est un logiciel de création d'animation pour le Web.
Il permet de créer des interfaces plus interactives et dynamiques que les pages HTML.
Sa technologie basée sur le vectoriel permet un gain important sur la taille des fichiers.
Son adaptation aux navigateurs existants est simplifiée par l'utilisation des plug-ins (surtout avec Internet Explorer dont l'installation est automatique et transparente).
Cette adaptation en fait un outil plus intéressant que le dynamique HTML étant donné que le moteur est le même quelque soit la version du navigateur; ce qui signifie une présentation identique sur tous les navigateurs.
La version 3 a été distribuée gratuitement par le magazine PCEXPERT en version complète.

Règles d'utilisation
L'animation est basée sur le principe des images clés.
Une image clé représente une évolution d'un objet : un mouvement par exemple
Chaque objet doit être placé sur un calque différent s'il doit subir des transformations.

Gestion des calques
La modification du nom d'un calque se fait en cliquant sur le nom actuel.
Cliquez droit sur le nom d'un calque fait apparaitre le menu contextuel

   
Afficher tous les calques
Vérouiller tous les calques sauf celui sélectionné
Masquer tous les calques sauf celui sélectionné
Ajouter un calque
Supprimer le calque sélectionné
Modifier les paramètres nom, couleur, ...
Calque guide pour le positionnement des objets
Calque guide de trajectoire
Masque pour le calque inférieur


Gestion des pistes

Un clic droit à l'emplacement d'une image dans la piste permet d'afficher le menu contextuel.

Ajout des actions et des interpolations
Gestion des images sans modification de l'animation
Gestion des images provocant une animation

Exercice d'application
Le but de cet exercice est de créer une page de présentation d'un sommaire.
Des liens conduiront vers des pages HTML présentant différentes rubriques.
Exemple d'écran de présentation

Création de la page
Au lancement de flash, celui-ci propose une page par défaut.
Le changement de paramètres se fait en ouvrant le menu "Modifier" et en cliquant sur "Animation".
Modifiez les dimensions choisir 600px par 400px ainsi que la couleur d'arrière-plan.
(px correspond à l'unité de mesure "pixel")

Création du titre
A l'aide de l'outil texte, tapez le titre de la page en modifiant police, taille et couleur.
Cliquer sur le nom du calque "couche 1" pour le renommer "titre".
Remarque: l'ombre est créée à partir d'une copie du texte, collée en dessous, la couleur étant modifiée.
A l'aide du Menu "Modifier", "Réorganiser", "vers l'arrière", on peut placer cette ombre en dessous.
Pour avoir un affichage de meilleur qualité, cliquez sur le menu "Afficher", Texte antialiasé".

Création du logo
Créez un nouveau calque en cliquant sur l'icône à côté du calque nommé titre , puis choisir "insérer une couche".

Modifiez le nom du nouveau calque en le nommant "logo".
Appuyez sur la touche entrée pour valider le nouveau nom.
Le logo peut être importé ou créé à l'aide des outils de dessin de Flash.
Pour importer une image, Ouvrez le menu "Fichier", cliquez sur "Importer". Flash reconnait un grand nombre de formats d'image.

Présentation des outils de dessin

Sélection
 Outil texte
Outil crayon
 Outil encre
Outil pinceau
Outil remplissage
Outil gomme
 Outil pipette
Outil Loupe
 Sélection lasso

Une partie du logo peut-être dessinée à l'aide des outils de la palette présentée ci-dessus.

Création d'un bouton
Insérez un calque nommé "actualite" à partir de la couche "logo".
Entrez le texte "Actualités" pour le premier bouton.
Dessinez un cercle afin de créer la puce.
Remplissez le cercle d'un dégradé bleu (Les dégradés sont en bas de la fenêtre de choix de couleur).
Effacez le cercle autour de la puce.
Positionnez la puce par rapport au texte.
Sélectionnez la puce et le texte.
Dans le menu "Insérer", cliquez sur "Créer un symbole". (ou touche de Fonction F8)

Dans la fenêtre, donnez un nom au symbole (actualite) et choisissez "Bouton" comme comportement.
Afin de faire apparaître le bouton dans l'image, il faut le positionner à l'extérieur en début d'animation.
Dans le menu "Afficher", cliquez sur "zone de travail". Ceci permet de travailler autour de l'image.
Sans le menu "Afficher", cliquez sur "Grille". ceci permet de repérer les differentes positions du bouton que l'on doit déplacer.
Placez le bouton à droite de l'image.

Dans la piste associée à la couche "actualite", cliquez avec le bouton droit au niveau de l'image 10.
Sélectionnez dans le menu "Insérer une image clé".
Le titre et la photo disparaissent, ce qui est logique puisque les pistes respectives n'ont qu'une image. Insérez des images par un clique droit sur la dernière image souhaitée (Attention, pas d'image clé mais une simple image).
Positionnez le bouton dans l'image, en utlisant la grille
Déplacez le "curseur image", le bouton se déplace mais le mouvement n'est pas continu.
Cliquez avec le bouton droit sur l'image 0.
Sélectionnez dans le menu "Propriété".
Cliquez sur l'onglet "Interpoler"
Choisissez "Mouvement" dans la liste.
Cliquez sur "OK".
Le mouvement du bouton est continu de l'image 0 à l'image 10.
L'interpolation est représentée graphiquement pare la flèche rouge

Procédez de la même manière pour réaliser Les boutons "Dossiers", "Liens" et "Nous écrire".

Création du calque, création de l'image clé de début d'animation (5 pour "dossiers", 10 pour "liens", 15 pour "nous écrire"), Création du texte, Création de la puce, Création du bouton, Position du bouton à la première image, création de l'image clé de fin d'animation (15 pour "dossiers" , 18 pour "liens", 21 pour "nous écrire"), Position du bouton à la dernière image, Création de l'interpolation en cliquant sur l'image clé de début d'animation. Recopie de la dernière image de chaque couche jusqu'à 25.

Modification du comportement des boutons

L'aspect bouton peut être obtenu en créant des images différentes en fonction de l'état du bouton.
Pour cela il faut utiliser une piste spéciale.
Dans le menu "Fenêtre", cliquez sur "Bibliothèque".
La bibliothèque d'objets intégrés dans la page apparait.

Les objets visibles sont :
- Les boutons,
- les graphiques,
- les sons,
- les animations.

Placez le curseur image à l'image 25

Cliquez sur le nom "actualite" dans la bibliothèque.
Le bouton apparait dans la fenêtre de visualisation.
Double-cliquez sur l'image du bouton.
La page de modification du bouton apparait.
Ainsi que la piste de création des comportements.

Aspect du bouton au passage de la souris
Aspect du bouton une fois enfoncé
Aspect du bouton au repos
Zone sensible du bouton
   
   
   
Insérez une image clé pour "dessus".
Modifiez la couleur du dégradé de la puce.
Insérez une image clé pour "Abaissé".
Modifiez la couleur du texte.
Insérez une image clé pour "Cliqué".
Modifiez le texte..

Cliquez sur le bouton en haut à droite pour revenir à la page de présentation.
Pour tester le bouton, il faut le rendre actif.
Dans le menu "Contrôle", cliquez sur "Activer les boutons".
Passez le curseur sur le bouton et cliquez afin de vérifier le bon fonctionnement.
Faites de même pour les autres bontons.

Ajout des liens
Avant de poursuire, sauvegardez votre fichier de travail. Dans le menu "fichier", cliquez sur "Enregistrer sous" et donnez un nom au fichier.

La création des liens s'effectue en modifiant les propriétés des boutons.
Cliquez avec le bouton droit de la souris sur le bouton "actualite".
Dans le menu cliquez sur "Propriétés"

Cliquez sur l'onglet "Actions".
Cliquez sur le bouton "+".
Dans la liste, cliquez sur "on mouse event".
Sélectionnez "press" comme événement.
(c'est à dire Appuyer)
Cliquez sur le bouton "+".
Dans la liste, cliquez sur "Get URL".
Dans la fenêtre "URL", indiquez le nom de la page HTML à afficher (actualite.htm).
Vous pouvez préciser le nom d'une fenêtre (cadre) de destination (par exemple "_blank" qui permet douvrir la page actualite.htm dans une nouvelle fenêtre)
Cliquez sur le bouton "OK".

Faites de même pour les autres bontons .

Création du fichier animation


Dans le menu "Fichier", cliquez sur "Exporter l'animation".
Choisissez le type "Shockwave Flash".
Donnez un nom au fichier.
Cliquez sur "enregistrer"
Une deuxième fenêtre s'ouvre.
La case "neutraliser les paramètres audio" doit être cochée.
.Cliquez sur le bouton "OK".
Le fichier exo.swf créé est visualisable dans un document HTML.

 

Intégration dans une page HTML

A partir de la version 4 de Flash, il est possible de publier directement l'animation dans une page HTML et de configurer les pramètres de publication de la façon suivante: cliquez sur "Paramètres de publication" Dans l'onglet "Format", vous pouvez définir une image en remplacement de l'animation si le navigateur ne possède pas le plug-in. Dans l'onglet "Flash", vous pouvez modifier le paramètre "qualité" et les paramètres "audio" Dans l'onglet "HTML" vous pouvez paramétrer l'animation. Désactivez "Boucle". Vous pouvez indiquer la dimension de l'animation en pixels ou en pourcentage.
Cliquez sur le bouton "Publier" afin de créer le fichier HTML.
Voici ce qu'on obtient. Demandez la source de ce document HTML et recopier dans un document HTML personnel les dernières ligne du code, celles qui commence par <!-- Il faut recopier le code à partir de cette ligne--> et qui se termine <!-- voici la dernière ligne de code à recopier-->
Pour que les liens fonctionnent il faut enregistrer ce document html dans un dossier qui contient le fichier exo.swf et un sous-dossier nommé flashpage contenant les 4 pages HTML de l'exemple c'est à dire actualite.htm, dossiers.htm, liens.htm et mail.htm. Tous ces documents sont dans le fichier compressé ci-joint flash3exo.zip

Actualisez l'affichage de la page (touche F5) pour voir l'animation. Testez les liens.


Si l'animation ne vous plait pas, vous pouvez la modifier dans Flash en utilisant le fichier exo.fla, sans créer de nouveau le fichier HTML, il suffira d'actualiser l'affichage de la page.