macromedia
®Utilisation de Flash
FLASH
™4
Marques
Macromedia, le logo Macromedia, le logo Made With Macromedia, Authorware, Backstage, Director, Extreme 3D et Fontographer sont des marques déposées de Macromedia, Inc. Afterburner, AppletAce, Authorware Interactive Studio, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, DECK II, Director Multimedia Studio, Doc Around the Clock, Extreme 3D, Flash, FreeHand, FreeHand Graphics Studio, Lingo, Macromedia xRes, MAGIC, Power Applets, Priority Access, SoundEdit, Shockwave, Showcase, Tools to Power Your Ideas et Xtra sont des marques de Macromedia, Inc. Les autres noms de produits, logos, designs, titres, termes ou expressions figurant dans cette publication peuvent être des marques, des noms de services ou de marques de Macromedia, Inc. ou d'autres entités et sont également susceptibles d'être déposés dans certaines juridictions.
Dédit de responsabilité Apple
APPLE COMPUTER, INC. N'OFFRE AUCUNE GARANTIE, EXPLICITE OU IMPLICITE, QUANT AU LOGICIEL CI- JOINT, A SA QUALITE MARCHANDE OU A SON ADEQUATION A UN OBJECTIF PARTICULIER. L'EXCLUSION DES GARANTIES IMPLICITE N'EST PAS AUTORISEE DANS CERTAINS ETATS. L'EXCLUSION MENTIONNEE CI-DESSUS NE S'APPLIQUE PEUT-ETRE PAS A VOUS. CETTE GARANTIE VOUS GARANTIT DES DROITS LEGAUX SPECIFIQUES.
LES AUTRES DROITS DONT VOUS POUVEZ PEUT-ETRE VOUS PREVALOIR VARIENT SELON LES ETATS.
Copyright © 1999 Macromedia, Inc. Tous droits réservés. Toute copie, photocopie, reproduction, traduction ou conversion dans un format électronique ou autre format lisible par une machine, partielle ou complète, est interdite sans autorisation écrite préalable de Macromedia, Inc. Numéro de référence ZFL40M100F
Crédits
Gestion du projet de documentation : Joe Schmitz Gestion du projet de localisation : Janice Pearce
Rédaction : Peter Fenczik, Dave Jacowitz, John Lancaster, Ben Melnick et Michelle Sudduth Multimédia : John « Zippy » Lehnus, Janice Pearce et Noah Zilberberg
Edition : Peter Fenczik
Conception Documentation imprimée et Aide : Noah Zilberberg Production : Christopher Basmajian et Noah Zilberberg
Remerciements : Jeremy Clark, Kristin Conradi, Sami Kaied, Laure Laprais, Eric Louessard, Pascal Manso, Linda Page, Robert Tatsumi, Vince Truong, Peter von dem Hagen, Antoine Wibaux et Eric Wittman.
Première édition : Juin 1999 Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
SOMMAIRE
INTRODUCTION
Prise en main . . . 9
Configuration requise pour Flash . . . .9
Configuration requise pour le lecteur Flash . . . .9
Installer Flash . . . .10
Nouveautés de Flash 4. . . .10
Supports d'apprentissage . . . .13
CHAPITRE 1 Didacticiel . . . 15
Vue d'ensemble . . . .15
Ouvrir le fichier de démarrage . . . .18
Créer un symbole animé . . . .19
Créer des boutons animés . . . .24
Utiliser des champs de texte modifiables . . . .29
Assembler l'animation . . . .32
Utiliser les actions pour contrôler le contenu . . . .36
Publier l'animation . . . .42
CHAPITRE 2 Principes de base de Flash . . . 45
Vue d'ensemble . . . .45
Graphiques vectoriels et bitmap. . . .46
Introduction à l'environnement de travail Flash . . . .47
Créer une nouvelle animation et définir ses propriétés . . . .50
Prévisualiser et tester des animations . . . .51
Utiliser la barre d'outils . . . .53
Utiliser le Scénario . . . .54
Utiliser les scènes. . . .57
Utiliser la fenêtre de Bibliothèque . . . .58
Utiliser les inspecteurs . . . .62
Utiliser les menus contextuels . . . .62
Visualiser la Scène . . . .63
Utiliser la grille et les règles . . . .64
Imprimer des fichiers Flash . . . .65
Accélérer l'affichage . . . .66
Préférences . . . .67
CHAPITRE 3 Dessiner et peindre. . . 69
Vue d'ensemble . . . .69
Comprendre les fonctions dessin et peinture de Flash . . . .69
Dessiner avec l'outil Crayon . . . .70
Tracer des lignes droites, des ovales et des rectangles . . . .71
Peindre avec l'outil Pinceau . . . .72
Effacer. . . .73
Remplir et délimiter des formes. . . .74
Utiliser la palette de couleurs. . . .81
Définir les préférences de dessin . . . .86
Modifier la forme des lignes et des contours de forme . . . .87
Adhérence . . . .90
Créer des effets spéciaux de courbe . . . .91
Travailler sur des dessins complexes . . . .92
CHAPITRE 4 Travail avec des Objets . . . 95
Vue d'ensemble . . . .95
Sélectionner des objets . . . .95
Déplacer, copier et supprimer des objets . . . .98
Présentation d'objets . . . .101
Redimensionner des objets . . . .101
Rotation d'objets. . . .102
Pivotement d'objets. . . .103
Obliquer des objets . . . .104
Restaurer les objets transformés . . . .105
Aligner les objets . . . .105
Grouper les objets . . . .106
Déplacer un point d'enregistrement d'objet. . . .107
Séparer des groupes et des objets . . . .108
CHAPITRE 5
Utilisation des caractères . . . 109
Vue d'ensemble . . . .109
Utiliser du texte dans les animations Flash. . . .109
Créer du texte . . . .110
Créer des champs de texte et du texte modifiable. . . .111
Editer du texte . . . .113
Définir des attributs de caractères . . . .114
Transformer du texte . . . .117
Remettre en forme du texte . . . .118
CHAPITRE 6 Utilisation des éléments graphiques importés . . . .119
Vue d'ensemble . . . .119
Insérer des éléments graphiques dans Flash . . . .119
Tracer des bitmaps. . . .123
Peindre avec une image de bitmap. . . .124
Définir les propriétés du bitmap . . . .125
CHAPITRE 7 Utilisation des calques . . . 127
Vue d'ensemble . . . .127
Créer des calques. . . .127
Modifier des calques . . . .128
Modifier l'ordre des calques. . . .130
Utiliser les calques de guide . . . .131
Utiliser les calques de masque . . . .131
CHAPITRE 8 Utilisation des symboles et des occurrences . . . . 135
Vue d'ensemble . . . .135
Déterminer le type de symbole à utiliser . . . .136
Créer des symboles . . . .137
Créer des occurrences . . . .139
Identifier des occurrences sur la scène . . . .139
Créer des boutons . . . .140
Activer, sélectionner et tester des boutons . . . .142
Modifier des symboles . . . .142
Modifier les propriétés de l'occurrence . . . .144
Séparer des occurrences . . . .148
Utiliser des symboles provenant d'autres animations . . . .149
CHAPITRE 9 Créer des animations . . . .151
Vue d'ensemble . . . .151
Créer des images-clés. . . .151
Animer à l'aide de calques . . . .153
Définir un débit images/secondes . . . .154
Extension des images fixes . . . .154
À propos de l'animation interpolée . . . .155
Interpoler des occurrences, des groupes et du texte . . . .155
Interpolation de mouvement sur une trajectoire . . . .158
Interpolation de formes . . . .160
Créer des animations image par image. . . .164
Modifier une animation . . . .165
CHAPITRE 10 Création d'animations interactives . . . 171
Vue d'ensemble . . . .171
Associer des actions à des boutons . . . .171
Associer des actions à une image . . . .174
Modifier des actions . . . .175
Lire et arrêter la lecture d'animations . . . .175
Régler la qualité d'affichage de l'animation . . . .176
Arrêter tous les sons. . . .176
Aller directement à une image ou à une scène . . . .176
Accéder à une URL différente . . . .177
Vérifier le chargement d'une image . . . .178
Charger et décharger des animations supplémentaires . . . .179
Obtenir des variables à partir d'un fichier distant . . . .181
Envoyer des messages au programme hôte de l'animation . . . .182
Contrôler d'autres animations et clips d'animation . . . .183
Dupliquer et supprimer des clips d'animation . . . .185
Faire glisser les clips d'animation . . . .186
Modifier la position et l'apparence du clip d'animation . . . .187
Commenter des actions. . . .188
Définir et identifier des variables . . . .188
Créer des actions conditionnelles. . . .190
Exécuter des actions en boucle . . . .190
Réutiliser des actions . . . .191
Types de valeurs . . . .192
Emuler des tableaux . . . .193
Ecrire des expressions . . . .194
Utiliser des propriétés . . . .198
Résoudre des problèmes d'interactivité . . . .202
CHAPITRE 11 Création d'éléments d'interface . . . 203
Vue d'ensemble . . . .203
Créer des formulaires . . . .203
Créer des menus contextuels . . . .208
CHAPITRE 12 Ajouter un son . . . .211
Vue d'ensemble . . . .211
Importer des sons . . . .212
Ajouter des sons à une animation . . . .212
Utiliser les contrôles de modification audio . . . .214
Démarrer et arrêter les sons dans une image-clé. . . .215
Ajouter un son à un bouton . . . .216
Exporter des animations sonores . . . .217
CHAPITRE 13 Publier et exporter. . . 221
Vue d'ensemble . . . .221
Optimiser les animations. . . .222
Tester le téléchargement de l'animation. . . .223
Publier les animations Flash . . . .226
Paramètres de publication de Flash . . . .227
Paramètres de publication HTML. . . .228
Paramètres de publication GIF . . . .231
Paramètres de publication JPEG . . . .234
Paramètres de publication PNG . . . .235
Paramètres de publication QuickTime . . . .238
Créer un projecteur à l'aide de la commande Publier. . . .239
Utiliser Aperçu avant publication . . . .240
Utiliser le lecteur autonome. . . .240
Utiliser Exporter l'animation et Exporter l'image . . . .241
A propos des formats des fichiers d'exportation . . . .242
Créer des modèles pour une publication HTML . . . .247
A propos des spécifications HTML de Flash . . . .251
Configurer un serveur web pour Flash. . . .259
ANNEXE A Raccourcis clavier. . . 261
Menu Fichier . . . .262
Menu Edition . . . .262
Menu Afficher. . . .263
Menu Insérer. . . .264
Menu Modifier . . . .264
Menu Contrôle . . . .266
Menu Fenêtre . . . .266
Contrôle des calques et des images-clés . . . .267
Raccourcis dessin . . . .267
INTRODUCTION
. . . .
Prise en main
. . . .Flash est l'outil de création d'animations interactives et redimensionnables le plus avancé pour le web. Que vous souhaitiez créer des logos animés, des commandes de navigation ou un site web tout entier, la puissance et la souplesse d'utilisation de Flash feront merveille au service de votre créativité.
Configuration requise pour Flash
Vous devez disposer de la configuration logicielle et matérielle suivante pour exécuter Flash :
þ Configuration PC : Processeur Intel Pentium® 133 MHz ou équivalent sous Windows 95, 98 ou NT version 4.0 ou ultérieure ; 16 Mo de RAM (24 Mo recommandés sous Windows 95 ou 98) ou 24 Mo de RAM (32 Mo recommandés sous Windows NT) ; 20 Mo d'espace disque ; moniteur couleur ; lecteur de CD-ROM.
þ Configuration Macintosh® : Power Macintosh sous System 7.5 ou ultérieur ; 32 Mo de RAM plus 20 Mo d'espace disque ; moniteur couleur ; lecteur de CD-ROM .
Configuration requise pour le Flash Player
Pour lire des animations Flash Player dans un navigateur, vous devez disposer de la configuration logicielle et matérielle suivante :
þ Microsoft Windows 95, NT 3.5.1 ou ultérieure ; ou Macintosh 68K (PowerPC recommandé) sous System 7.1 ou ultérieur.
þ Plug-in Netscape fonctionnant avec Netscape 2 ou ultérieur (Windows et Macintosh).
þ Si vous utilisez des contrôles ActiveX, Microsoft Internet Explorer 3 ou ultérieur (Windows 95 ou ultérieur, Windows NT) est obligatoire.
þ Si vous utilisez l'édition Java du Flash Player, un navigateur capable de lire les animations Java est obligatoire.
Installer Flash
Suivez ces instructions pour installer Flash sur un ordinateur Windows ou Macintosh.
Pour installer Flash sur un ordinateur Windows ou Macintosh :
1 Insérez le CD de Flash 4 dans le lecteur de CD-ROM de l'ordinateur.
2 Choisissez l'une des options suivantes :
þ Sous Windows, choisissez Démarrer > Exécuter. Cliquez sur Parcourir puis choisissez le fichier Setup.exe sur le CD de Flash 4. Cliquez sur OK dans la boîte de dialogue Exécuter pour commencer l'installation.
þ Sur Macintosh, double-cliquez sur l'icône du programme d'installation de Flash 4.
3 Suivez les instructions à l'écran.
4 Si un message vous le demande, redémarrez votre ordinateur.
Nouveautés de Flash 4
Flash 4 propose de nouvelles fonctionnalités étonnantes pour créer des sites web interactifs captivants et riches. En matière d'animation audio et vidéo, vous disposez désormais de fonctions de lecture continue des fichiers MP3, de champs de texte modifiables au sein d'une animation, et d'actions Flash améliorées vous permettant de créer des jeux et des formulaires sophistiqués. Pour le travail de création, vous bénéficiez d'un processus de publication simplifié, d'une fenêtre Bibliothèque redesignée, d'une nouvelle gamme d'inspecteurs et d'une interface graphique améliorée.
Lecture continue des MP3
Exportez des fichiers audio d'événement et en lecture continue au format de compression MP3 pour créer des bandes son dignes de ce nom tout en maintenant les fichiers à une taille suffisamment réduite pour assurer une diffusion rapide et peu gourmande en bande passante. Voir « Exporter des animations sonores » à la page 217.
Champs de texte modifiables
Intégrez dans vos animations des champs de texte permettant aux utilisateurs de modifier le texte pendant la lecture de l'animation. Les champs de texte modifiables vous permettent de créer des champs d'entrée de mot de passe, des formulaires d'inscription, de sondage ou de collecte de données. Voir
« Paramétrage des Propriétés du champ de texte » à la page 112.
Actions sophistiquées supplémentaires
Ces nouvelles actions sophistiquées capables d'évaluer les événements et les informations en cours de lecture d'une animation, et de changer en fonction du résultat, vous permettent de créer des éléments d'interface fonctionnels tels que des curseurs de réglage, des boutons d'option, des menus d'application et plus encore. Ces actions vous permettent de dupliquer la plupart des fonctionnalités autorisées par JavaScript et autres langages de script afin de créer des animations, compatibles d'un navigateur à un autre et d'une plate-forme à une autre, offrant la même expérience aux utilisateurs quelle que soit leur configuration. Voir « Vue d'ensemble » à la page 171.
Fenêtre Bibliothèque améliorée
La conception de la fenêtre Bibliothèque a été repensée et vous permet désormais de gérer les centaines de composants d'un gros projet avec beaucoup plus de facilité. Vous pouvez créer des dossiers pour organiser et stocker les composants.
Outre le nom des symboles, les colonnes de la fenêtre Bibliothèque affichent maintenant le type du symbole, le nombre d'apparitions de l'élément dans l'animation et la date de dernière modification. Vous pouvez également trier le contenu de la bibliothèque sur la colonne de votre choix. Voir « Utiliser la fenêtre de Bibliothèque » à la page 58.
Processus de publication simplifiée
La commande Publier met en œuvre un processus en une seule étape pour exporter une animation sous plusieurs formats, conjointement au fichier HTML de support. Vous pouvez personnaliser individuellement les propriétés de chaque format avant de procéder à la publication. Vous pouvez aussi créer votre propre fichier de modèle externe pour indiquer à Flash les règles de syntaxe HTML spécifiques. Pour plus d'informations, voir « Vue d'ensemble » à la page 221.
Améliorations apportées aux calques et aux animations
Avec son Scénario reconçu, ses guides de déplacement intelligents et ses contrôles de calque mis à jour, Flash 4 réduit le temps nécessaire à la création d'une animation web :
þ La commande Créer interpolation de mouvement vous permet de créer une interpolation de mouvement en une seule étape. Les objets ainsi interpolés suivent automatiquement une trajectoire de déplacement tracée sur un calque servant de guide. Vous pouvez également lier et délier plusieurs calques à un guide de déplacement ou masquer les calques. Voir « Interpoler des
occurrences, des groupes et du texte » à la page 155.
þ Les contrôles de calque mis à jour vous permettent de masquer, d'afficher, de verrouiller et de déverrouiller facilement les calques. Le mode Couleurs de contour vous permet de distinguer facilement les objets d'un calque des objets de l'animation. Voir « Affichage des calques » à la page 129.
þ Faites glisser le Scénario jusqu'à sa propre fenêtre et ancrez-le à n'importe quel côté de la fenêtre d'application. Voir « Utiliser le Scénario » à la page 54.
Jeux de couleurs
Importez et exportez des jeux de couleurs personnalisés pour garantir la cohérence des couleurs sur l'ensemble du site. Voir « Utiliser la palette de couleurs » à la page 81.
Interface utilisateur améliorée
Améliorez votre productivité à l'aide des fonctions d'interface suivantes :
þ Les inspecteurs Objet et Transformer vous permettent d'observer et de manipuler la position, la dimension, la rotation et l'inclinaison des objets sélectionnés. Pour plus d'informations, consultez la section appropriée dans le chapitre 4, « Travail avec des objets ».
þ L'inspecteur Scène vous permet de gérer et de modifier plusieurs scènes au sein d'une animation Flash. Voir « Utiliser les scènes » à la page 57.
þ Les outils Ovale et Rectangle vous permettent de créer ces objets simples.
Le modificateur de rayon de rectangle à coins arrondis vous permet d'arrondir les coins des rectangles. Voir « Tracer des lignes droites, des ovales et des rectangles » à la page 71.
þ Modifiez les symboles dans une fenêtre distincte ou en relation avec d'autres éléments graphiques à l'écran. Voir « Modifier des symboles » à la page 142.
Supports d'apprentissage
Le package Flash 4 contient un ensemble de supports destinés à vous aider à maîtriser rapidement le programme pour créer vos propres animations Flash Player, notamment une aide en ligne accessible dans votre navigateur web, des leçons interactives, un didacticiel, un manuel et un site web régulièrement mis à jour.
Leçons et didacticiel Flash
Si vous découvrez Flash, ou si vous n'en avez utilisé qu'un petit nombre de fonctions, commencez par les leçons. Elles présentent les fonctions principales de Flash en vous permettant de les mettre en pratique sur des exemples isolés. Le didacticiel présente l'enchaînement des opérations en vous indiquant comment réaliser une animation simple. Le didacticiel s'appuie sur les connaissances que vous avez acquises au cours des leçons.
Pour commencer par les leçons, choisissez Aide > Leçons > 0 Introduction.
Utilisation de Flash
Utilisation de Flash est présenté à la fois sous forme d'aide en ligne et de manuel papier. Il contient des instructions et des informations pour l'utilisation des outils et des commandes de Flash. L'aide en ligne contient un grand nombre d'anima- tions Flash Player pour illustrer les effets et les fonctionnalités de Flash.
Pour optimiser la consultation de l'aide de Flash, Macromedia vous recommande vivement d'utiliser la version 4.0 ou ultérieure de Netscape Navigator ou Microsoft Internet Explorer sous Windows, et Netscape Navigator version 4.0 ou ultérieure sur Macintosh. Si vous utilisez un navigateur de type 3.0, vous pourrez accéder au contenu des animations et de l'aide de Flash, mais certaines fonctions (notamment la fonction Rechercher) ne fonctionneront pas. Pour exécuter simultanément Flash et l'aide de Flash sur un Macintosh, vous devez disposer de 32 Mo de RAM, suivant les besoins en mémoire de votre navigateur.
Pour utiliser l'aide de Flash :
1 Choisissez Aide > Rubriques d'aide de Flash.
2 Parcourez les rubriques d'aide à l'aide des moyens suivants :
þ L'option Sommaire trie les rubriques par sujet. Cliquez sur les entrées pour afficher les rubriques secondaires.
þ L'option Index présente les informations comme un index traditionnel.
Cliquez sur un terme pour afficher la rubrique associée.
þ L'option Rechercher vous permet de rechercher des chaînes de caractères dans le texte des rubriques. Cette fonction de recherche nécessite un navigateur 4.0 compatible Java. Pour rechercher une phrase, il vous suffit de la taper dans le champ d'entrée de texte.
Pour rechercher des fichiers qui contiennent deux mots-clés (par exemple, calques et style), insérez le signe plus (+) entre les mots.
þ Les boutons Précédent et Suivant vous permettent d'afficher une à une les rubriques d'une section.
þ L'icône Flash vous permet d'accéder au site web du Centre de développement Flash.
Le Centre de développement Flash
Le site web du Centre de développement Flash est mis à jour régulièrement pour vous tenir au courant des dernières nouvelles sur Flash, vous dispenser des conseils d'experts, vous donner accès à des rubriques avancées, des exemples, des conseils et des mises à jour. Consultez régulièrement le site web pour vous tenir au courant et tirer le meilleur parti de votre programme à l'adresse suivante :
www.macromedia.com/support/flash/.
1
CHAPITRE 1
. . . .
Didacticiel
. . . .Vue d'ensemble
Dans ce didacticiel, vous allez utiliser les connaissances que vous avez acquises au cours des leçons pour réaliser des projets plus complexes. Vous allez créer une page d'accueil pour une société de magnets, ou aimants, pour réfrigérateurs. Cette page comportera des symboles, des boutons animés et une fonction de stockage des adresses email.
Comprendre et profiter des avantages des symboles est crucial pour apprendre à utiliser Flash. Ce didacticiel met l'accent sur l'utilisation des symboles et de leurs avantages. Vous allez apprendre à :
þ Créer des symboles de clips animés et des symboles de boutons
þ Utiliser des champs de texte modifiables dans les symboles
þ Réaliser une animation
þ Associer des actions à des boutons qui contrôlent d'autres contenus
þ Publier une animation
Vous apprendrez également quelques astuces qui pourront vous être utiles dans les animations que vous réaliserez par la suite.
Avant de commencer
Ce didacticiel fait appel aux connaissances élémentaires couvertes par les sept leçons proposées dans Flash. Pour accéder à ces leçons, choisissez Aide > Leçons.
Assimilez ces leçons avant d'entreprendre les exercices du didacticiel.
þ Leçon 1, Dessiner
þ Leçon 2, Symboles
þ Leçon 3, Calques
þ Leçon 4, Texte
þ Leçon 5, Boutons
þ Leçon 6, Son
þ Leçon 7, Animation
Prévisualiser l'animation complète
En observant l'animation terminée, vous vous familiariserez avec les opérations que vous allez devoir réaliser.
1 Dans Flash, choisissez Fichier > Ouvrir. Parcourez le disque dur jusqu'au dossier d'application de Flash, puis ouvrez le dossier du didacticiel et sélectionnez le fichier Fin du didacticiel.fla.
Ne modifiez pas cette animation, car elle est déjà entièrement réalisée. Vous allez modifier une autre version de cette animation dans le didacticiel.
2 Pour exécuter l'animation, choisissez Contrôle > Tester l'animation.
Le clip débute par une animation au cours de laquelle une photographie est fixée à la porte du réfrigérateur à l'aide d'un magnet.
3 Passez la souris au-dessus des boutons. Vous remarquez qu'ils s'animent et affichent le titre du contenu que vous verrez en cliquant dessus. Cliquez sur les boutons pour afficher les autres contenus.
4 Lorsque vous aurez terminé d'explorer l'animation, fermez la fenêtre, puis fermez le fichier Fin du didacticiel.fla.
Vous pouvez consulter le fichier Fin du didacticiel.fla tout au long du didacticiel pour vérifier que vous avez effectué correctement telle ou telle tâche, ou pour reprendre le cours de la procédure si vous êtes perdu.
Ouvrir le fichier de démarrage
1 Dans Flash, choisissez Fichier > Ouvrir, puis ouvrez le fichier Début du didacticiel.fla.
2 Choisissez Fichier > Enregistrer sous et enregistrez l'animation sous un autre nom de manière à conserver intact un exemplaire du fichier Début du didacticiel.fla.
Vous conservez ainsi la possibilité de consulter à tout moment le fichier Début du didacticiel.fla d'origine.
3 Le fichier doit s'ouvrir avec la fenêtre Bibliothèque. Si la fenêtre ne s'ouvre pas, choisissez Fenêtre > Bibliothèque.
Le fichier de démarrage du didacticiel n'affiche pas de contenu dans le Scénario principal, mais la fenêtre Bibliothèque contient des éléments graphiques de base que vous auriez pu créer à l'aide des connaissances acquises au cours des leçons de Flash.
Définir les propriétés de l'animation
Il est préférable de commencer à créer une animation du bas vers le haut.
Commencez par définir la taille et l'arrière-plan.
1 Choisissez Modifier > Animation.
2 Dans la boîte de dialogue Propriétés de l'animation, définissez les dimensions suivantes : 550 X 400 pixels.
3 Pour l'arrière-plan, sélectionnez une couleur orange.
Scénario
Fenêtre Bibliothèque
4 Cliquez sur OK pour appliquer les propriétés.
La Scène est maintenant orange.
Créer un symbole animé
La leçon 2, « Symboles », vous a appris à travailler avec des symboles graphiques et des occurrences. Les symboles peuvent inclure des occurrences d'autres symboles et animations. Dans cette section, vous créez un symbole qui illustre la photo- graphie se déplaçant vers la porte du réfrigérateur au début de l'animation.
Vous commencez par créer un symbole de clip d'animation, auquel vous ajoutez ensuite d'autres symboles. Un symbole de clip d'animation s'apparente à une animation indépendante que vous placez dans une animation hôte comme un simple objet. Il peut contenir une animation et un système d'interactivité comme une animation standard.
Remarque : En travaillant dans Flash, il est fréquent de devoir annuler ses dernières actions.
Flash vous permet d'annuler plusieurs de vos actions récentes. Choisissez Edition > Annuler (ou appuyez sur CTRL+Z (Windows) ou sur Commande+Z (Macintosh)) autant de fois que vous souhaitez revenir en arrière. Choisissez Edition > Répéter (ou appuyez sur CTRL+Y (Windows) ou sur Commande+Y (Macintosh)) pour faire défiler chronologiquement les actions que vous avez annulées.
Créer un symbole de clip d'animation
1 Choisissez Insérer > Nouveau symbole.
2 Dans la boîte de dialogue Propriétés du symbole, indiquez le nom
« ANIMATION - INTRO »
Dimensions de l'animation
Couleur d'arrière- plan
3 Sélectionnez le comportement Clip d'animation, puis cliquez sur OK.
Flash passe en mode Edition de symbole. Ce mode est presque identique au mode d'édition d'animation. Remarquez que le nom du symbole que vous éditez apparaît dans le coin supérieur gauche au-dessus du Scénario. Le nom apparaît également dans la fenêtre Bibliothèque.
4 Dans le Scénario, double-cliquez sur le nom du calque existant, puis indiquez le nom « Photo ».
5 Faites glisser une occurrence du symbole INTRO - PHOTO à partir de la fenêtre Bibliothèque et placez-la au-dessus du point d'enregistrement au centre de la Scène, comme dans l'illustration suivante.
Cette opération ajoute une occurrence du symbole INTRO - PHOTO dans le symbole ANIMATION - INTRO.
Utilisez les touches fléchées pour déplacer un symbole d'un pixel à la fois.
Appuyez sur Maj et utilisez les touches fléchées pour déplacer le symbole de dix pixels à la fois.
Nom du symbole
Point d'enregistrement
6 Dans le Scénario, sélectionnez l'image 20 dans le calque Photo et choisissez Insérer > Image-clé.
Etant donné que vous souhaitez que l'animation commence en dehors de la Scène, vous devez définir une nouvelle position pour INTRO - PHOTO dans la première image.
7 Sélectionnez l'image-clé dans l'image 1.
8 Déplacez l'occurrence de INTRO - PHOTO d'environ 5 cm à droite du point d'enregistrement.
La position exacte n'a pas d'importance.
Maintenant que vous avez positionné l'élément pour la première image, vous pouvez créer une interpolation de mouvement jusqu'à la position de l'image- clé dans l'image 20.
9 Vérifiez que l'image 1 est encore sélectionné, puis choisissez Insérer > Créer interpolation de mouvement.
Le Scénario doit maintenant ressembler à ceci :
10 Choisissez Fenêtre > Contrôleur pour ouvrir le contrôleur, puis rembobinez et jouez l'animation pour voir le résultat que vous obtenez à ce stade.
La photographie doit glisser en venant de la droite et s'immobiliser sur le point d'enregistrement du symbole.
Interpoler la rotation et ouverture en fondu
Modifiez maintenant l'interpolation de mouvement de sorte que la photographie effectue une ouverture en fondu et une rotation pendant son déplacement. Pour ce faire, spécifiez un paramètre alpha (transparence) de 0 dans l'image-clé lorsque la photographie apparaît pour le première fois, et spécifiez le nombre de rotations voulu dans la boîte de dialogue Propriétés de l'image.
1 Sélectionnez l'image 1 dans le calque Photo.
2 Sur la Scène, sélectionnez l'occurrence de INTRO - PHOTO et choisissez Modifier > Occurrence.
3 Cliquez sur l'onglet Effet de couleur dans la boîte de dialogue Propriétés de l'occurrence, puis choisissez Alpha dans le menu Effet de couleur.
4 Placez le curseur Alpha sur 0, puis cliquez sur OK.
La photo devient complètement transparente (invisible). Seule la bordure sélectionnée est visible.
5 Vérifiez que l'image-clé de l'image 1 du calque Photo est encore sélectionnée, choisissez Modifier > Image, puis cliquez sur l'onglet Interpolation.
6 Choisissez Sens des aiguilles d'une montre dans le menu Rotation, spécifiez 1 dans la zone fois, puis cliquez sur OK.
7 Utilisez le Contrôleur pour rembobiner et jouer l'animation.
L'interpolation de mouvement fait pivoter l'occurrence du symbole et change le paramètre alpha de 0 à 100 pour créer une ouverture en fondu.
Ajoutez ensuite le magnet dans la partie supérieure de la photographie.
8 Sélectionnez l'image-clé de l'image 20 dans le calque Photo, puis faites glisser une occurrence du symbole INTRO - COURONNE de la Bibliothèque dans la photographie.
9 Rembobinez et jouez l'animation pour vous assurer qu'elle fonctionne correctement.
Ajouter une action d'image pour arrêter l'animation.
Bien que l'animation que vous avez créée semble s'arrêter à la dernière image lorsque vous êtes en mode d'édition de symbole, elle fonctionne de manière différente dans le Scénario. Les symboles de clips d'animation passent en boucle tant que l'animation est exécutée et jusqu'à ce que vous les arrêtiez.
Ajoutez une action d'image pour mettre fin à cette animation lorsqu'elle atteint la dernière image.
1 Sélectionnez le calque Photo dans le Scénario, puis choisissez Insérer > Calque.
2 Double-cliquez sur le nom du calque et nommez-le « Actions ».
3 Insérez une image-clé dans l'image 20 du calque Actions, puis choisissez Modifier > Image.
4 Cliquez sur l'onglet Actions dans la boîte de dialogue Propriétés de l'image, cliquez sur + (plus), puis choisissez Stop dans le menu Action. Cliquez sur OK.
Vous avez terminé le symbole ANIMATION - INTRO.
Créer des boutons animés
La leçon 5, « Boutons », vous a appris à créer un bouton très simple. Dans cette section, vous allez créer un bouton plus complexe qui s'anime lorsque la souris passe au-dessus et affiche un texte d'étiquette avec transparence. Pour créer un bouton animé, placez un symbole de clip d'animation dans une des images du bouton. Commencez par créer l'animation.
1 Double-cliquez sur l'icône du symbole BOUTON - ACCUEIL dans la fenêtre Bibliothèque pour ouvrir le symbole et le modifier.
Cliquez sur l'icône du symbole, et non pas sur son nom, faute de quoi vous n'éditerez que le nom du symbole.
Le bouton BOUTON - ACCUEIL est partiellement achevé pour vous permettre de sauter quelques étapes.
2 Choisissez Afficher > Afficher une image pour centrer le bouton dans la fenêtre. Si nécessaire, cliquez sur l'outil Loupe dans la barre d'outils pour agrandir le bouton.
3 Dans le Scénario, nommez le premier calque « Bouton ».
4 Insérez une image-clé dans l'image Dessus du calque Bouton.
5 Vérifiez que l'image-clé dans l'image Dessus est sélectionnée, puis cliquez n'importe où sur la Scène à l'aide de l'outil Flèche pour désélectionner l'image du bouton.
Icône du symbole
6 Faites glisser une occurrence du symbole BOUTON - CROIX entre la Bibliothèque et le point d'enregistrement du symbole BOUTON - ACCUEIL.
BOUTON - CROIX est un clip d'animation qui contient déjà une animation de croix en rotation. L'occurrence de BOUTON - CROIX doit s'aligner exactement avec la croix sous-jacente. Vous pouvez utiliser les touches fléchées pour déplacer la sélection d'un pixel à la fois.
Ajouter la transparence de texte au bouton
Commencez d'abord par ajouter le calque de texte transparent au bouton.
1 Dans le Scénario, insérez un nouveau calque et nommez-le « Transparence de texte ».
2 Sélectionnez le calque Transparence de texte dans le Scénario et faites-le glisser sous le calque Bouton dans le Scénario.
En organisant les calques de cette manière, le contenu du calque Transparence de texte apparaît derrière le contenu du calque Bouton.
3 Créez une image-clé dans l'image Dessus du calque Transparence de texte.
4 Sélectionnez le symbole BOUTON - ARRIERE-PLAN dans la Bibliothèque, puis faites-le glisser de sorte que son côté gauche se trouve sur le point d'enregistrement du bouton.
A présent, vous allez mélanger progressivement l'arrière-plan du bouton avec l'arrière-plan de la scène en y appliquant un paramètre alpha.
1 Vérifiez que BOUTON - ARRIERE-PLAN est encore sélectionné dans la zone de travail, puis choisissez Modifier > Occurrence.
2 Cliquez sur l'onglet Effet de couleur dans la boîte de dialogue Propriétés de l'occurrence, puis choisissez Alpha dans le menu Effet de couleur.
3 Spécifiez la valeur 50, puis cliquez sur OK.
4 Vérifiez que l'image-clé Dessus est sélectionnée dans le calque Transparence du texte, puis cliquez sur l'outil Texte.
5 Utilisez les modificateurs de l'outil Texte pour choisir la police Arial (Windows) ou Helvetica (Macintosh) et les paramètres 18 points, gras et italique.
6 Tapez le mot « Home (Accueil) » au-dessus du symbole BOUTON - ARRIERE-PLAN.
Il n'est pas nécessaire de changer le contenu des autres images du bouton.
Dupliquer le bouton animé
Le bouton que vous venez de créer affiche le mot « Home (Accueil) » lorsque la souris passe au-dessus. Vous allez maintenant créer un autre bouton qui affiche le mot « Contact » lorsque la souris passe au-dessus. Pour gagner du temps, dupliquez BOUTON - ACCUEIL et changez-en le libellé.
1 Dans la bibliothèque, cliquez sur le symbole BOUTON - ACCUEIL, puis choisissez Dupliquer dans le menu Options de la bibliothèque.
2 Nommez le symbole dupliqué « BOUTON - CONTACT », puis cliquez sur OK.
3 Double-cliquez sur le nouveau symbole BOUTON - CONTACT dans la Bibliothèque pour le modifier.
Si nécessaire, cliquez sur l'outil Loupe dans la barre d'outils pour agrandir le bouton.
4 Sélectionnez l'image Dessus dans le calque Transparence de texte et utilisez les modificateurs de l'outil Texte pour changer le texte en « Contact ».
Vous ne pourrez pas encore voir les boutons s'animer car les animations ne fonctionnent pas dans l'environnement de création.
Pour voir les boutons s'animer, choisissez Edition > Modifier l'animation, faites glisser une occurrence de BOUTON - ACCUEIL ou de BOUTON - CONTACT jusqu'à la Scène, puis choisissez Contrôle > Tester l'animation.
Après la lecture de l'animation, fermez la fenêtre de l'animation et supprimez l'occurrence du bouton dans la Scène.
Utiliser des champs de texte modifiables
Flash vous permet de placer des contrôles interactifs et des champs de texte modifiables à l'intérieur des symboles. Dans cette section, vous allez intégrer des fonctions élémentaires d'entrée de données dans le symbole TEXTE - CONTACTER.
1 Double-cliquez sur l'icône du symbole TEXTE - CONTACTER dans la Bibliothèque pour ouvrir le symbole afin de le modifier.
2 Créez un nouveau calque dans le Scénario et nommez-le « Entrée de données ».
3 Dans le Scénario, sélectionnez la première image dans le calque Entrée de données.
4 Lorsque la première image du calque Entrée de données est sélectionnée, cliquez sur l'outil Texte et sur le modificateur Champ de texte.
5 Tracez des champs de texte modifiables pour Name (Nom), Email et Comment (Commentaire).
Utilisez l'outil Flèche pour ajuster la taille et la position des champs. A ce stade, il n'est pas important de les positionner avec précision. Remarquez que la poignée de redimensionnement carrée d'un champ de texte modifiable se trouve dans le coin inférieur droit du champ.
6 A l'aide de l'outil Flèche, sélectionnez le champ de texte Name (Nom) et choisissez Modifier > Champ de texte pour ouvrir la boîte de dialogue Propriétés du champ de texte.
7 Indiquez « Nom » dans la zone Variable et cliquez sur OK.
Flash affecte le contenu du champ de texte modifiable à la variable dont vous indiquez le nom ici. Vous pouvez ensuite utiliser la valeur de la variable dans des actions.
8 Répétez les étapes 6 et 7 pour le champ de texte Email. Nommez la variable
« Email ».
9 Répétez à nouveau les étapes 6 et 7 pour le champ de texte Comment (Commentaire). Nommez la variable « Commentaires », et cliquez sur les options Multiligne et Retour à la ligne avant de cliquer sur OK.
Ajouter le bouton SEND (Envoyer).
Ajoutez à présent le bouton SEND (Envoyer) dans le symbole TEXTE - CONTACTER.
1 Vérifiez que la première image du calque Entrée de données est sélectionnée, puis faites glisser une occurrence du symbole BOUTON - ENVOYER de la fenêtre Bibliothèque et placez-la juste au-dessous des champs modifiables.
2 Double-cliquez sur l'occurrence du symbole BOUTON - ENVOYER pour ouvrir la boîte de dialogue Propriétés de l'occurrence.
3 Dans l'onglet Actions, cliquez sur + (plus) et choisissez URL dans le menu qui apparaît.
4 Tapez l'URL dans la zone à droite, choisissez Envoyer avec GET dans le menu Variables, puis cliquez sur OK.
Cette opération envoie le contenu de toutes les variables (le texte entré dans les champs modifiables) à l'URL que vous spécifiez. En conditions réelles, il vous faudrait créer un script CGI valide à l'emplacement de l'URL pour recevoir les informations, mais dans le cadre du didacticiel, vous pouvez indiquer n'importe quel URL et vous passer de script CGI.
A ce stade, la création des symboles pour votre animation est terminée. Vous êtes prêt à utiliser les symboles que vous avez créés dans l'animation principale.
Assembler l'animation
Il ne sera pas difficile d'assembler le contenu de l'animation à l'aide des symboles que vous avez créés jusqu'à présent. En réalisant cette opération, vous allez en apprendre plus sur l'utilisation des calques pour organiser le contenu d'une animation.
1 Choisissez Edition > Modifier l'animation.
2 Nommez le premier calque du Scénario « Réfrigérateur ».
3 Faites glisser une occurrence du symbole ARRIERE-PLAN - REFRIGERATEUR de la fenêtre Bibliothèque jusqu'à la Scène.
4 Dans le Scénario, insérez un nouveau calque au calque Réfrigérateur et nommez-le « Arrière-plan vert ».
5 Vérifiez que le calque Arrière-plan vert est sélectionné, puis faites glisser une occurrence du symbole ARRIERE-PLAN - VERT sur la Scène.
Ajouter les boutons animés
Ajoutez à présent les boutons animés que vous avez créés.
1 Insérez un nouveau calque et nommez-le « Boutons ». Faites en sorte qu'il s'agisse du calque supérieur dans le Scénario.
A mesure que vous ajoutez les calques, il est important que vous puissiez tous les voir tous dans le Scénario.
2 Faites glisser la bordure inférieure de la fenêtre Scénario de sorte que tous les calques soient visibles.
3 Sélectionnez le calque Boutons et faites glisser une occurrence du symbole BOUTON - ACCUEIL sur la Scène.
Etant donné que les boutons réagissent différemment aux actions de la souris que les autres objets, vous devez désactiver les boutons avant de pouvoir les sélectionner pour les modifier. Lorsque vous aurez terminé de travailler sur les boutons, vous pourrez les activer à nouveau.
4 Choisissez Contrôle > Activer les boutons et vérifiez que la case Activer les boutons n'est pas cochée.
5 Sélectionnez l'occurrence de BOUTON - ACCUEIL et mettez-la en position.
6 Assurez-vous que le calque Boutons est sélectionné dans le Scénario, puis placez une occurrence du symbole BOUTON - CONTACT sous l'occurrence de BOUTON - ACCUEIL sur la Scène.
7 Pour aligner les boutons, cliquez sur BOUTON - CONTACT, puis maintenez la touche Maj enfoncée tout en cliquant sur BOUTON - ACCUEIL pour sélectionner les deux boutons. Choisissez Modifier > Aligner, puis sélectionnez l'option d'alignement horizontal à gauche.
8 Choisissez Contrôle > Tester l'animation pour voir les boutons s'animer lorsque vous passez la souris au-dessus d'eux.
Après la fin de lecture, fermez la fenêtre de test pour continuer à travailler dans l'animation.
Bordure inférieure du Scénario
Ajouter le clip d'animation
Vous allez maintenant ajouter le clip d'animation ANIMATION - INTRO que vous avez créé.
1 Insérez un nouveau calque dans le Scénario et nommez-le « Intro Animation ».
Faites en sorte qu'il s'agisse du calque supérieur.
2 Verrouillez les autres calques pour être sûr de ne travailler uniquement que dans le calque Intro Animation.
3 Faites glisser une occurrence du symbole ANIMATION - INTRO de la Bibliothèque jusqu'à la Scène.
Souvenez-vous que l'image de la photographie est complètement transparente dans la première image du clip d'animation. Par conséquent, la seule partie visible du clip ANIMATION - INTRO est le point d'enregistrement.
4 Déplacez l'occurrence de ANIMATION - INTRO de sorte que son point d'enregistrement se trouve sur le réfrigérateur.
Souvenez-vous que les clips d'animations ne fonctionnent pas dans l'environnement de création.
5 Choisissez Contrôle > Tester l'animation pour observer le déroulement de l'animation.
Le clip d'animation fonctionne uniquement la première fois que la fenêtre de test s'ouvre. Pour revoir l'animation, fermez la fenêtre de test et choisissez à nouveau Contrôle > Tester l'animation.
Lorsque vous avez terminé d'observer le déroulement de l'animation, fermez la fenêtre de test pour continuer à travailler sur l'animation.
Point d'enregistrement de ANIMATION - INTRO
Ajouter des calques à contenu textuel
Les boutons que vous avez ajoutés doivent faire apparaître le texte dans la zone verte à droite. Vous êtes prêt à ajouter le contenu textuel à l'animation.
1 Insérez un nouveau calque au Scénario et nommez-le « Texte Accueil ».
2 Sélectionnez l'image-clé dans l'image 1 du calque Texte Accueil et faites glisser une occurrence du symbole TEXTE - ACCUEIL sur la Scène.
Ajustez le symbole dans la zone verte comme suit :
3 Pour une meilleure visibilité, cliquez dans la colonne Œil du calque Texte Accueil pour le masquer avant d'ajouter le calque suivant.
Un X rouge apparaît pour signaler que le calque est masqué.
4 Insérez un nouveau calque au Scénario et nommez-le « Texte Contact ».
5 Sélectionnez l'image-clé dans l'image 1 du calque Texte Contact et faites glisser une occurrence du symbole TEXTE - CONTACTER sur la Scène de sorte qu'il s'ajuste dans la zone verte.
Utiliser les actions pour contrôler le contenu
Vous créez des animations interactives en définissant des actions. Les actions sont des ensembles d'instructions qui s'exécutent lorsqu'un événement spécifique se produit : la tête de lecture atteint une image particulière ou bien l'utilisateur clique sur un bouton ou appuie sur une touche du clavier, par exemple.
Vous allez maintenant associer des actions aux boutons pour que le texte voulu apparaisse lorsque l'utilisateur clique sur les boutons.
Modifier les occurrences des symboles du texte
Etant donné que les actions ne peuvent prendre pour cible que des symboles du clip d'animation, commencez par changer les occurrences des symboles du texte que vous avez ajoutés dans les clips et nommez-les. Dans la prochaine section, vous allez utiliser ces noms pour identifier les occurrences comme les cibles d'une action. Commencez par l'occurrence TEXTE - CONTACTER.
1 Vérifiez que le calque Texte Contact est sélectionné dans le Scénario, puis double-cliquez sur l'occurrence du symbole TEXTE - CONTACTER sur la Scène pour ouvrir la boîte de dialogue Propriétés de l'occurrence.
2 Cliquez sur l'onglet Définition, puis sélectionnez le comportement Clip d'animation.
Vous remarquez que le champ Nom de l'occurrence apparaît sous Options de l'occurrence.
3 Indiquez « Contact » comme nom de l'occurrence, puis cliquez sur OK.
Changez maintenant l'occurrence du symbole TEXTE - ACCUEIL.
1 Dans le Scénario, cliquez sur le contrôle de visibilité (sous l'oeil) pour masquer le calque Texte Contacter et afficher le calque Texte Accueil.
Souvenez-vous que le contrôle de visibilité des calques se trouvent dans la colonne située sous l'icône Œil dans le Scénario.
2 Sélectionnez le calque Texte Accueil dans le Scénario, puis double-cliquez sur l'occurrence du symbole TEXTE - ACCUEIL sur la Scène pour ouvrir la boîte de dialogue Propriétés de l'occurrence.
3 Cliquez sur l'onglet Définition, puis sélectionnez le comportement Clip d'animation.
4 Indiquez « Home (Accueil) » comme nom de l'occurrence, puis cliquez sur OK.
Associer une action au bouton BOUTON - ACCUEIL
Vous pouvez maintenant associer une action au bouton BOUTON - ACCUEIL qui affichera le texte Home (Accueil) et masquera le texte Contact lorsque l'utilisateur cliquera sur le bouton.
Les boutons doivent rester désactivés pour vous permettre de les sélectionner et d'y apporter des modifications.
1 Choisissez Contrôle > Activer les boutons et vérifiez que la case Activer les boutons n'est pas cochée.
2 Vérifiez que le calque Boutons est sélectionné et déverrouillé dans le Scénario, puis double-cliquez sur le bouton BOUTON - ACCUEIL sur la Scène pour ouvrir la boîte de dialogue Propriétés de l'occurrence.
3 Dans l'onglet Actions, cliquez sur + (plus) et choisissez Set Property dans le menu.
4 Choisissez Visibility dans le menu Définir.
5 Cliquez sur le bouton à droite de la zone Cible, puis choisissez Editeur de cible dans le menu.
6 Dans l'éditeur de cible, double-cliquez sur Home (Accueil) pour le sélectionner comme cible, puis cliquez sur OK.
7 Dans la zone Valeur de l'onglet Actions, tapez 1.
Ajoutez maintenant une deuxième instruction pour masquer le texte Contact.
1 Cliquez sur + (plus) et choisissez à nouveau Set Property dans le menu.
2 Choisissez Visibility dans le menu Définir.
3 Cliquez sur le bouton à droite de la zone Cible, puis choisissez Editeur de cible dans le menu.
4 Dans l'éditeur de cible, double-cliquez sur Contact pour le sélectionner comme cible, puis cliquez sur OK.
5 Dans le champ Valeur, indiquez 0 (zéro).
L'action du bouton BOUTON - ACCUEIL doit ressembler à ceci :
En cas d'erreur vous pouvez cliquer sur le bouton - (moins) pour supprimer la ligne sélectionnée dans l'action et recommencer l'instruction. Vous pouvez également choisir Edition > Annuler.
6 Cliquez sur OK pour fermer la boîte de dialogue.
Associer une action au bouton BOUTON - CONTACT
Vous allez à présent associer au bouton BOUTON - CONTACT une action qui affiche le texte Contact et masque le texte Home (Accueil)
1 Double-cliquez sur le bouton BOUTON - CONTACT sur la Scène pour ouvrir la boîte de dialogue Propriétés de l'occurrence.
2 Dans l'onglet Actions, cliquez sur + (plus) et choisissez Set Property dans le menu.
3 Choisissez Visibility dans le menu Définir.
4 Cliquez sur le bouton à droite de la zone Cible , puis choisissez Editeur de cible dans le menu.
5 Dans l'éditeur de cible, double-cliquez sur Contact pour le sélectionner comme cible, puis cliquez sur OK.
6 Dans le champ Valeur de l'onglet Actions, tapez 1.
Ajoutez maintenant une deuxième instruction qui masque le texte Home (Accueil).
1 Cliquez sur + (plus) et choisissez à nouveau Set Property dans le menu.
2 Choisissez Visibility dans le menu Définir.
3 Cliquez sur le bouton à droite de la zone Cible et choisissez Editeur de cible dans le menu.
4 Dans l'éditeur de cible, double-cliquez sur Home (Accueil) pour le sélectionner comme cible, puis cliquez sur OK.
5 Dans le champ Valeur, tapez 0 (zéro).
L'action du bouton BOUTON - CONTACT doit ressembler à ceci :
6 Cliquez sur OK pour fermer la boîte de dialogue.
Ajouter une action d'image
Masquer les calques dans le Scénario n'a aucun effet sur le contenu lorsque vous exécutez l'animation en dehors de l'environnement de création. Pour masquer à la fois les textes Home (Accueil) et Contact au démarrage de l'animation, vous devez ajouter une action d'image à l'animation.
1 Créez un nouveau calque dans le Scénario et nommez-le « Actions Image ».
2 Double-cliquez sur la première image dans le calque Actions Image pour ouvrir la boîte de dialogue Propriétés de l'image.
3 Cliquez sur l'onglet Actions, cliquez sur + (plus), puis choisissez Set Property dans le menu.
4 Sélectionnez Visibility dans le menu déroulant de Définir.
5 Cliquez sur le bouton à droite de la zone Cible, puis choisissez Editeur de cible dans le menu.
6 Dans l'éditeur de cible, double-cliquez sur Home (Accueil) pour le sélectionner comme cible, puis cliquez sur OK.
7 Dans le champ Valeur de l'onglet Actions, tapez 0 (zéro).
Maintenant, créez une nouvelle instruction dans l'action en copiant l'instruction existante.
1 Appuyez sur CTRL+C (Windows) ou sur Commande+C (Macintosh) pour copier la première instruction de l'action.
2 Appuyez sur CTRL+V (Windows) ou sur Commande+V (Macintosh) pour coller l'instruction copiée dans la fenêtre.
Cette opération permet de créer une copie de la ligne que vous venez de créer.
Il ne vous reste plus qu'à changer la cible.
3 Utilisez l'éditeur de cible pour changer la cible Home (Accueil) en cible Contact.
L'action doit ressembler à ceci :
4 Cliquez sur OK pour fermer la boîte de dialogue Propriétés de l'image lorsque vous avez terminé.
A ce stade, vous avez fini de travailler sur le contenu de l'animation. Elle doit à présent ressembler au fichier Fin du didacticiel.fla.
Tester l'animation
Maintenant que le contenu de l'animation est terminé, vous pouvez tester l'animation pour voir toutes ses fonctionnalités.
1 Choisissez Contrôle > Tester l'animation.
2 Pendant le test de l'animation, entrez des données dans les champs Contact.
Tapez également quelques lignes de texte dans le champ Comment (Commentaires) pour vous assurer que le texte revient à la ligne.
3 Choisissez Contrôle > Lister les variables pour afficher la fenêtre Sortie.
4 Cliquez sur Fichier > Envoyer pour observer comment fonctionnent les variables.
La fenêtre Sortie présente les données que Flash envoie au serveur.
En conditions réelles, une application de ce type nécessiterait des actions supplémentaires, comme par exemple l'effacement des champs après l'envoi des données. Cet exemple n'est destiné qu'à vous enseigner les principes élémentaires de l'envoi de données à un serveur dans Flash.
5 Fermez la fenêtre Sortie, puis fermez la fenêtre dans laquelle l'animation s'exécute.
Vous êtes prêt à publier l'animation.
Publier l'animation
Votre animation est prête. Pour la jouer dans un navigateur, vous devez l'exporter dans le format du Flash Player. C'est ce que Flash a fait chaque fois que vous avez utilisé la commande Tester l'animation.
Lorsque vous créez un site web avec Flash, vous devez souvent joindre plusieurs fichiers d'accompagnement. Outre l'animation Flash, il vous faut créer un document HTML qui s'ouvre dans un navigateur et exécute l'animation Flash ou affiche des graphiques générés par Flash. Vous pouvez aussi créer une version GIF animée de votre animation ou créer une image JPEG pour signaler que le Flash Player n'est pas installé.
Utilisez la commande Publier pour exporter en une seule fois tous les formats et créer un document HTML présentant la configuration requise.
1 Vérifiez que vous avez fermé la fenêtre dans laquelle s'exécutait l'animation, puis choisissez Fichier > Paramètres de publication.
2 Dans l'onglet Formats, sélectionnez Flash et HTML. Vérifiez que l'option Utiliser les noms par défaut est sélectionnée.
Bien que vous n'ayez pas à utiliser d'autres formats dans le cadre de ce didacticiel, c'est dans cet onglet que vous choisissez des formats comme JPEG ou QuickTime.
3 Cliquez sur l'onglet Flash.
Il est inutile de changer ces options dès à présent. Vous pourrez les utiliser plus tard, dans le cadre de votre travail, pour afficher les calques de haut en bas plutôt que de bas en haut, comme c'est le cas dans cette animation, par exemple.
4 Cliquez sur l'onglet HTML.
Il existe plusieurs manières de contrôler une animation Flash à l'aide du code HTML. Les options de l'onglet HTML vous permettent de définir les paramètres les plus communs et utiles tels que la taille, la position, la couleur et la qualité de l'animation. Flash insère les paramètres que vous spécifiez dans un modèle. Flash propose plusieurs modèles contenant du code HTML pour des fonctions utiles comme la détection du navigateur.
Pour terminer ce didacticiel, vous allez choisir un modèle simple qui n'a d'autre fonction que d'afficher l'animation Flash spécifiée.
5 Choisissez Flash Seulement dans le menu Modèle.
6 Désélectionnez l'option Boucle.
Ceci permet d'éviter la lecture en boucle de l'animation.
7 Cliquez sur En pause au démarrage pour désactiver la case à cocher.
Si vous ne désactivez pas cette option, l'animation ne s'exécutera pas avant qu'une action ne la déclenche. Etant donné que vous souhaitez que l'animation s'exécute dès que la page est chargée, désactivez cette option.
Vous n'avez pas besoin de changer les valeurs par défaut des autres paramètres HTML.
8 Cliquez sur Publier, puis sur OK pour fermer la boîte de dialogue Paramètres de publication et générer les fichiers spécifiés.
Flash génère les nouveaux fichiers et les stocke dans le même dossier que le fichier de l'animation.
Lire l'animation dans un navigateur
A ce stade, vous avez terminé votre travail dans Flash. Il est temps d'observer comment l'animation s'exécute dans un navigateur.
1 Ouvrez un navigateur de type Netscape ou Internet Explorer.
2 Ouvrez le fichier HTML que vous venez de créer.
þ Dans Netscape Navigator, choisissez Fichier > Consulter une page, puis recherchez le fichier.
þ Dans Internet Explorer, choisissez Fichier > Ouvrir, puis recherchez le fichier.
Le fichier HTML se trouve dans le même dossier que le fichier d'animation et porte le même nom que l'animation avec une extension .htm ou .html.
L'animation devrait fonctionner dans le navigateur de la même manière qu'auparavant avec la commande Tester l'animation.
2
CHAPITRE 2
. . . .
Principes de base de Flash
. . . .Vue d'ensemble
Les animations Flash sont des graphiques et des animations vectoriels interactifs destinés aux sites web. Les concepteurs de sites utilisent Flash pour créer des contrôles de navigation, des logos animés, des animations avec son synchronisé et même des sites web complets, attrayants et aux effets saisissants. Les animations Flash sont des graphiques vectoriels compacts, qui se téléchargent rapidement et s'adaptent à la taille d'écran du visiteur.
Vous avez probablement vu et interagi avec des animations Flash sur de nombreux sites web, parmi lesquels ceux de Disney®, les Simpsons®, et Pepsi®. Des millions d'utilisateurs du web ont obtenu le Flash Player avec leur ordinateur, leur navigateur ou leur logiciel système ; d'autres l'ont téléchargé à partir du site web Macromedia. Le Flash Player s'installe sur l'ordinateur local, où il joue les animations depuis le navigateur ou en tant qu'application autonome.
Lorsque vous travaillez avec Flash, vous créez une animation en dessinant ou en important un élément graphique, en le disposant dans le décor puis en l'animant avec le Scénario. Vous rendez cette animation interactive en la faisant réagir à des événements et se modifier de la manière désirée. Une fois l'animation créée, vous l'exportez en tant qu'animation Flash Player, puis vous l'intégrez dans une page HTML et vous la transférez avec la page HTML sur le serveur web.
Pour voir une introduction interactive à Flash, sélectionnez Aide > Leçons
> 0 Introduction.
Graphiques vectoriels et bitmap
Les ordinateurs affichent les graphiques au format soit vectoriel soit bitmap. Il est important de bien comprendre la différence entre ces deux formats pour les utiliser de manière plus efficace. Flash vous permet de créer et d'animer des graphiques vectoriels compacts. Il vous permet également d'importer et de manipuler des graphiques bitmap créés dans d'autres applications.
Graphiques vectoriels
Les graphiques vectoriels décrivent les images à l'aide de lignes et de courbes, appelées vecteurs, en intégrant également les informations de couleur et de position. Par exemple, l'image d'une feuille est définie par les points par lesquels passent des lignes, créant ainsi le contour de la feuille. La couleur de la feuille est définie par la couleur du contour et la région qu'il définit.
Lorsque vous éditez un graphique vectoriel, vous modifiez les propriétés des lignes et des courbes qui en décrivent la forme. Vous pouvez déplacer, redimensionner, remodeler et modifier la couleur d'un graphique vectoriel sans modifier la qualité de son aspect. Les graphiques vectoriels ne dépendent pas de la résolution, c'est-à- dire qu'ils peuvent être affichés sur des moniteurs de résolution différente sans perdre leur qualité.
Graphiques bitmap
Les graphiques bitmap sont les images formées par des points de couleur, appelés pixels, disposés suivant une trame. Par exemple, l'image d'une feuille est décrite par l'emplacement et la valeur de couleur de chaque pixel de la trame, créant une image assez semblable à une mosaïque.
Lorsque vous éditez un graphique bitmap, vous modifiez des pixels et non des lignes et des courbes. Les graphiques bitmap dépendent de la résolution car les données décrivant l'image sont définies pour une trame de dimension particulière.
L'édition d'un graphique bitmap peut modifier la qualité de son aspect. C'est ainsi que le redimensionnement d'un graphique bitmap peut donner un effet d'escalier aux bords de l'image lorsque les pixels sont répartis dans la trame. L'affichage d'un graphique bitmap sur un moniteur d'une résolution inférieure à celle de l'image dégrade également la qualité de son aspect.
Introduction à l'environnement de travail Flash
Lors de la création et de l'édition d'animations, vous travaillez dans les zones clés suivantes : la Scène, zone rectangulaire où se déroule l'animation; la fenêtre de Scénario, où les graphiques sont animés dans le temps; la fenêtre de Bibliothèque, où sont organisés les éléments réutilisables de l'animation, appelés symboles ; et le mode Edition de symboles, où les symboles sont créés et modifiés.
Les fenêtres Scène et Scénario
Comme pour les films, les animations Flash divisent les périodes de temps en images. La Scène est la partie dans laquelle vous arrangez des images individuelles dans une animation, soit en les dessinant directement soit en y important des illustrations.
La fenêtre de Scénario est la partie dans laquelle vous coordonnez la temporisation de l'animation et où vous l'assemblez sur différents calques. La fenêtre de Scénario affiche chaque image de l'animation. Les calques, comme leur équivalent papier, permettent de séparer les différents éléments d'illustration pour vous faciliter leur combinaison en une seule image cohérente.
Le logo, la chaise et les contrôles de navigation de l'animation sont placés chacun sur un calque différent.
Scène Scénario
Temps
La fenêtre de Bibliothèque
La fenêtre de Bibliothèque est la partie dans laquelle vous enregistrez et organisez les symboles créés dans Flash, ainsi que les fichiers importés tels que les fichiers de son, les graphiques bitmap et les animations QuickTime. Ces symboles peuvent être des graphiques, des boutons ou des clips d'animation. La fenêtre de Bibliothè- que vous permet d'organiser les objets de la bibliothèque en dossiers, de savoir combien de fois un objet est utilisé dans une animation et de trier les objets par type. Voir « Utiliser la fenêtre de Bibliothèque » à la page 58.
Symboles et occurrences
Les symboles sont des graphiques réutilisables, créés à l'aide des outils de dessin.
Lorsque vous placez un symbole dans la Scène ou à l'intérieur d'un autre symbole, vous créez une occurrence de ce symbole. Les symboles permettent de réduire la taille des fichiers car, quel que soit le nombre d'occurrences que vous avez créées, Flash n'en enregistre qu'une seule copie dans le fichier. Utilisez les symboles, animés ou non, pour chaque élément qui apparaît plus d'une fois dans une animation. Vous pouvez modifier les propriétés d'une occurrence sans toucher au symbole maître, et éditer le symbole maître pour modifier toutes les occurrences.
Lors de la modification d'un symbole, la Scène et le Scénario se modifient
également pour afficher le contenu du symbole. Vous pouvez modifier la Scène pour afficher le symbole seul ou dans son contexte en grisant d'autres objets de la Scène.
Vous pouvez également éditer le symbole dans une fenêtre distincte. Le Scénario n'affiche que le Scénario du symbole que vous éditez. Pour plus d'informations sur les symboles et les occurrences, voir « Vue d'ensemble » à la page 135.
Édition d'un symbole seul (à gauche) et édition d'un symbole dans le contexte de son animation.
Symboles et animations interactives
Les symboles font partie intégrante de la création d'animations interactives. Par exemple, les boutons que vous cliquez et les changements produits en réponse au pointeur de la souris correspondent à un type de symbole. Vous utilisez un autre type de symbole, appelé clip, pour créer des animations interactives complexes.
Voir « Vue d'ensemble » à la page 171.
Créer une nouvelle animation et définir ses propriétés
A chacune de ses ouvertures, Flash crée un nouveau fichier. Utilisez la boîte de dialogue Propriétés de l'animation (Modifier > Animation) pour définir la dimension, le débit, la couleur d'arrière-plan et bien d'autres propriétés de l'animation.
Pour créer une nouvelle animation et définir ses propriétés:
1 Sélectionnez Fichier > Nouveau.
