Retrouvez gratuitement la notice de l'appareil FLASH 8-DIDACTICIELS FLASH MACROMEDIA au format PDF.
Téléchargez la notice de votre Didacticiels au format PDF gratuitement ! Retrouvez votre notice FLASH 8-DIDACTICIELS FLASH - MACROMEDIA et reprennez votre appareil électronique en main. Sur cette page sont publiés tous les documents nécessaires à l'utilisation de votre appareil FLASH 8-DIDACTICIELS FLASH de la marque MACROMEDIA.
Ce guide contient des liens vers des sites tiers qui ne sont pas sous le contrôle de Macromedia et Macromedia n’est pas responsable du contenu de ces sites. Si vous accédez à un site Web tiers mentionné dans ce guide, vous le faites à vos propres risques. Macromedia fournit ces liens à des fins pratiques et l’inclusion de ces liens n’implique pas que Macromedia parraine ou accepte la moindre responsabilité pour le contenu de ces sites Web tiers. Technologie de compression et décompression audio discours utilisée sous licence de Nellymoser, Inc. (www.nellymoser.com). Technologie de compression et décompression vidéo Sorenson™ Spark™ utilisée sous licence de Sorenson Media, Inc.
La technologie vidéo Macromedia Flash 8 est optimisée par la technologie vidéo On2 TrueMotion. © 1992-2005 On2 Macromedia, Inc. Nonobstant les dispositions précédentes, le propriétaire ou un utilisateur autorisé d’une copie valide du logiciel accompagnant le présent manuel pourra en imprimer une copie à partir d’une version électronique dans le seul but, pour le propriétaire ou l’utilisateur autorisé, d’apprendre à utiliser le logiciel, à condition qu’aucune partie de ce manuel soit imprimée, reproduite, distribuée, revendue ou transmise à toute autre fin, y compris mais sans s’y limiter, à des fins commerciales telles que la vente de copies de cette documentation ou la vente de services d’assistance. Remerciements Gestion du projet : Sheila McGinn Rédaction : Jay Armstrong, Jen deHaan Rédactrice en chef : Rosana Francescato Rédactrice en chef : Lisa Stanziano Correction : Evelyn Eldridge, Mark Nigara, Lisa Stanziano, Anne Szabla Gestion de la production : Patrice O’Neill, Kristin Conradi, Yuko Yagi Conception et production des supports : Adam Barnett, Aaron Begley, Paul Benkman. John Francis, Geeta Karmarkar, Masayo Le chemin des fichiers d’exemple est indiqué dans chaque leçon. En effectuant ces leçons pratiques, vous apprendrez à utiliser Flash afin d’ajouter du texte, des graphiques et des animations à vos applications Flash. En outre, vous apprendrez à personnaliser votre application Flash au moyen des comportements et d’ActionScript. Les leçons sont destinées aux concepteurs et développeurs Flash débutants et de niveau intermédiaire qui souhaitent s’améliorer rapidement. Chaque leçon cible une fonction ou un sujet spécifique de Flash et dure entre 10 et 20 minutes, selon votre expérience. Dans ces leçons, vous apprendrez à créer un document Flash, écrire du code ActionScript, utiliser des comportements vidéo et de contrôle de la vidéo ou ajouter un composant Flash.
Macromedia Flash. Pour des informations approfondies sur l’utilisation de Flash, à partir du logiciel Flash choisissez l’Aide de Flash (Aide > Aide de Flash).
Dans ce didacticiel, vous accomplirez les tâches suivantes : Parcours de l’interface utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Sélectionner des jeux de panneaux et organiser les panneaux . . . . . 15 Modifier l’arrière-plan et la taille de la scène . . . . . . . . . . . . . . . . . . .17 Modifier l’affichage de la scène . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Afficher le panneau Bibliothèque . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Ajouter des graphiques à la scène . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Flash. Pour accéder à ce guide, choisissez Aide > Bien démarrer avec Flash.
Commencez par ouvrir le fichier FLA de démarrage que vous allez utiliser au cours de cette leçon. Chaque leçon inclut un fichier de démarrage et un fichier complété montrant l’aspect du fichier FLA une fois les leçons terminées. 1.
■ L’un des calques, appelé Guides, contient des éléments qui vous aideront à placer les objets sur la scène. L’autre calque, appelé Contenu, est le calque sur lequel vous placerez les objets composant votre document. 2.
Tout au long de cette leçon, pensez à enregistrer fréquemment votre travail.
Le panneau Disposition d’espace de travail par défaut organise votre espace de travail de façon à faciliter le déroulement des leçons. Vous utiliserez cette disposition au cours de toutes les leçons que vous allez suivre dans Flash. ■
Vous pouvez déplacer les panneaux et les redimensionner de la manière suivante : ■
Si le panneau s’accroche à une bordure, il est alors ancré au nouvel emplacement (ou il retrouve son emplacement d’origine si vous l’y avez fait glisser). Sinon, le panneau est désancré.
Le rectangle blanc de la scène représente l’endroit où vous pouvez disposer les objets tels que vous souhaitez les voir s’afficher dans votre fichier publié.
Didacticiels Flash > Création de graphiques : Dessiner dans Flash et Aide > Didacticiels Flash > Texte : Ajouter du texte à un document. 1.
Annuler des modifications Flash vous permet d’annuler toute une série de modifications apportées à votre document. Vous allez annuler le contenu que vous venez de créer. 1.
> Historique). L’outil Crayon s’affiche dans le panneau, l’utilisation de cet outil étant la dernière action que vous avez accomplie.
Flash est défini par défaut de façon à annuler 100 modifications en ordre d’exécution inverse. Vous pouvez modifier ce paramètre par défaut dans les préférences. Pour savoir comment modifier les préférences, consultez la section Définition des préférences de Flash du guide Bien démarrer avec Flash. 3.
Déplacez le pointeur de la souris sur la zone séparant la scène du scénario. Lorsque la poignée de redimensionnement apparaît, faites-la glisser légèrement vers le haut ou vers le bas pour redimensionner le scénario.
Image-clé Poignée de redimensionnement
Les images-clés sont signalées par de petits cercles dans les images, qui sont remplis pour indiquer que les images contiennent des objets. Vous pouvez ajouter une image-clé au document si vous voulez apporter une modification au contenu Flash de l’image.
La scène permet d’afficher un aperçu du contenu Flash une fois que votre fichier sera publié. Vous allez modifier la taille de la scène afin qu’elle puisse accueillir une illustration conçue pour une scène plus grande, puis vous modifierez la couleur d’arrière-plan de la scène. 1.
Modifier l’affichage de la scène Vous pouvez modifier l’affichage de la scène sans toucher à la taille réelle de votre document. 1.
(Macintosh). L’affichage de la scène passe à 500 %.
Afficher le panneau Bibliothèque Le contenu Flash que vous importez ou qui représente un symbole est stocké dans le panneau Bibliothèque. Pour en savoir plus sur les symboles et les occurrences, choisissez Aide > Didacticiels Flash > Tâches de base : Créer des symboles et des occurrences. ■
Bibliothèque. Vous avez déjà importé des éléments de la bibliothèque et créé des symboles pour les objets que vous allez utiliser dans cette leçon.
Ajouter des graphiques à la scène Pour ajouter des éléments de la bibliothèque à votre document, vérifiez que vous êtes en train d’ajouter l’objet au bon calque, puis faites glisser l’élément depuis la bibliothèque jusqu’à la scène. 1.
(contenant une image bitmap et un graphique vectoriel) du panneau Bibliothèque à la scène, puis alignez-le en haut de la barre grise située dans la partie supérieure de la scène qui contient le mot Titre. Dans Flash, vous pouvez travailler avec des images bitmap (graphismes en pixels) et avec des illustrations vectorielles (représentations mathématiques). Pour en savoir plus, consultez la section A propos des graphiques vectoriels et bitmap du guide Utilisation de Flash.
ZX2004 déjà en place. Utilisez les touches flèches de votre clavier pour ajuster le texte. Le texte de titre est en fait un graphique créé à partir de texte.
Le panneau de la bibliothèque comprend un fichier vidéo Flash importé (FLV). Ajoutez la vidéo à votre document et Flash ajoutera les images nécessaires pour la lire. Pour en savoir plus sur l’utilisation de la vidéo dans Flash, reportez-vous à la section Utilisation de la vidéo du guide Utilisation de Flash. 1.
Titre. L’inspecteur des propriétés (Fenêtre > Propriétés > Propriétés) affiche les paramètres du clip (hauteur, largeur et coordonnées de la scène).
Aide > Didacticiels Flash > ActionScript : Rédiger des scripts. Pour savoir comment donner un nom à des occurrences, consultez le didacticiel ActionScript : Rédiger des scripts, page 239.
Les comportements vous permettent d’ajouter facilement des fonctionnalités complexes à votre document, sans qu’il ne vous soit nécessaire de connaître ActionScript, le langage de script de Flash. Vous allez à présent ajouter des comportements de contrôle de la vidéo. 1.
R E MA R Q UE D’autres comportements de contrôle de la vidéo vous permettent de faire avancer, de masquer et de visualiser une vidéo.
L’explorateur d’animations est l’outil qui vous permet de réorganiser, rechercher et modifier les animations. Grâce à son arborescence, l’explorateur d’animations fournit des informations concernant l’organisation et le flux d’un document. 1.
Si nécessaire, vous pouvez agrandir l’explorateur d’animations pour afficher son arborescence complète. Les boutons de filtre de l’explorateur d’animations permettent d’afficher ou de masquer des informations.
Examinez la liste pour afficher une partie des éléments inclus dans le document et identifier leurs relations avec d’autres éléments.
Tout au long de la création d’un document, enregistrez-le et testez-le fréquemment afin de vous assurer que le contenu Flash est lu comme prévu. Lors du test du fichier SWF, cliquez sur les boutons de contrôle de la vidéo afin de voir si la vidéo s’arrête, est lue et se rembobine comme prévu. 1.
Contrôle > Tester l’animation. Le contenu Flash est lu dans une fenêtre de fichier SWF. FLA représente l’extension des documents dans l’environnement de programmation, tandis que SWF représente l’extension du contenu Flash testé, exporté et publié.
Tâches de base : Créer un bandeau, 1ère partie, page 25 : vous apprendrez comment créer et structurer l’application bandeau. Tâches de base : Créer un bandeau, 2ème partie, page 45 : vous apprendrez comment ajouter une animation, créer un bouton et écrire des scripts de base. Tâches de base : Créer un bandeau, 3ème partie, page 69 : vous apprendrez comment publier votre fichier SWF et l’insérer dans un site web à l’aide de Dreamweaver. Aucune connaissance préalable n’est nécessaire pour suivre ces didacticiels.
En examinant la version terminée de l’application que vous êtes sur le point de créer, vous découvrirez également l’espace de travail Flash. Dans cette section, vous accomplirez les tâches suivantes : ■
Les fichiers pour ce didacticiel se trouvent dans le dossier Samples and Tutorials du dossier d’installation de Flash. Pour de nombreux utilisateurs, en particulier ceux suivant des séminaires, ce dossier n’est accessible qu’en lecture. Avant de suivre le didacticiel, copiez tout le dossier FlashBanner du didacticiel à un emplacement de votre choix accessible en écriture. Sur la plupart des ordinateurs, vous trouverez le dossier FlashBanner du didacticiel aux emplacements suivants : ■
8\Samples and Tutorials\Tutorial Assets\Basic Tasks\FlashBanner\. Flash. Le fichier final du didacticiel est affiché dans l’environnement de création Flash.
Le bandeau réalisé à la fin de la première partie Vers la fin de la troisième partie de ce didacticiel, vous ajouterez des graphiques, des animations et des fonctions d’interactivité au bandeau. Ensuite, vous insérerez le bandeau dans un site web à l’aide de Dreamweaver.
Vous êtes désormais prêt à commencer la création de votre propre fichier de bandeau dans la nouvelle section : Création d’un document.
Flash 8 vous permet de créer toutes sortes d’éléments différents pour le web, des CD-ROM et des appareils numériques. Vous créez d’abord un fichier dans l’outil de programmation Flash que vous utilisez pour produire des fichiers SWF. Les fichiers SWF sont les fichiers que vous placez en ligne au sein de vos pages web. Le module Macromedia Flash Player affiche alors le fichier afin que les visiteurs de votre site web puissent en voir le contenu ou interagir avec son contenu. Votre fichier SWF peut contenir de la vidéo, des sons MP3, des animations, des images, des données etc. L’avantage du format SWF par rapport aux autres formats réside en ce que le module Flash Player est extrêmement répandu. Commençons par créer un bandeau. 1.
Un document au format FLA vous permet d’exporter (ou compiler) les fichiers SWF que vous pouvez intégrer dans une page HTML. Flash Player, installé sur la plupart des ordinateurs, lit les fichiers SWF exportés depuis Flash.
En ce point, vous voyez une toile vierge entourée de nombreuses commandes (voir illustration suivante). Le grand carré blanc est appelé la scène et c’est là que vous allez placer des éléments, des images, des boutons, du texte ou des animations par exemple, que vous souhaitez afficher dans le fichier SWF. La scène et les panneaux sont généralement appelés l’espace de travail de Flash ou l’environnement de création. L’environnement Flash est constitué de la scène, de nombreux panneaux et outils, et du scénario audessus de la scène. Pour obtenir des informations détaillées sur chaque partie de l’espace de travail, reportez-vous à Parcours de l’interface utilisateur, page 14.
Un des panneaux en bas de l’application Flash est le panneau Propriétés. (Choisissez Fenêtre > Propriétés > Propriétés si ce panneau n’est pas visible.) Ce panneau est également appelé l’inspecteur des propriétés (voir l’illustration suivante). Il vous permet de modifier diverses propriétés de tout élément couramment sélectionné dans un document (un graphique ou une image par exemple) ou de définir les propriétés pour l’ensemble du fichier SWF (cadence ou dimensions, par exemple). Pour obtenir plus d’informations sur le contrôle de la cadence d’un document, reportez-vous à Modifier le nombre d’images par seconde, page 167.
400 pixels). Par défaut, les dimensions de la scène dans un nouveau document Flash sont de 550 pixels x 400 pixels (largeur x hauteur). En cliquant sur Taille, vous ouvrez une boîte de dialogue dans laquelle vous pouvez modifier plusieurs propriétés relatives au document (les dimensions de la scène, la couleur et la cadence d’affichage du document, par exemple). 2.
La saisie de nouvelles valeurs dans ces champs donne de nouvelles dimensions à votre fichier FLA. Vous devez utiliser ces dimensions spécifiques, car vous allez créer un bandeau qui doit avoir une taille standard. Dans ce didacticiel, vous allez créer un « wide skyscraper » (gratte-ciel étendu). Une liste des tailles standard des bandeaux est publiée sur la page Interactive Advertising Bureau du site Interactive Marketing Units à l’adresse www.iab.net/standards/adunits.asp.
Macromedia en choisissant Fichier > Nouveau dans le menu principal. Sélectionnez l’onglet Modèles et choisissez la catégorie Publicité.
Une fois dans l’environnement de création, vous pouvez constater que les dimensions de votre document ont changé. Vous pouvez également modifier la couleur courante de l’arrière-plan ainsi que la cadence du document directement dans l’inspecteur des propriétés sans ouvrir la boîte de dialogue Propriétés du document. Vous trouverez des informations sur la cadence dans la deuxième partie de ce didacticiel, Tâches de base : Créer un bandeau, 2ème partie, page 45.
Lorsque vous travaillez avec Flash, il est très fréquent d’importer des éléments dans un document. Peut-être avez-vous un logo de société ou des graphiques qu’un dessinateur vous a fournis pour votre projet. Vous pouvez importer de nombreux éléments dans Flash, y compris des sons, de la vidéo, des images bitmap et d’autres formats graphiques (tels que PNG, JPEG, AI et PSD). Les graphiques importés sont stockés dans la bibliothèque du document. Celle-ci contient les éléments que vous importez dans le document et les symboles que vous créez dans Flash. Un symbole est un graphique vectoriel, un bouton, une police, un composant ou un clip que vous créez en une seule fois et pouvez réutiliser à plusieurs reprises. Ainsi, il n’est pas nécessaire de dessiner vos propres graphiques dans Flash, vous pouvez importer une image d’un gnome pré-dessiné et enregistré dans le fichier source du didacticiel. Avant de procéder à l’importation, vérifiez que vous enregistrez les fichiers source pour ce didacticiel conformément à la section Ouverture du fichier FLA final, puis enregistrez les images dans le même répertoire que celui du fichier banner.fla.
Naviguez jusqu’au dossier du disque dur qui contient une image à importer dans votre document Flash 2.
Les coordonnées X et Y correspondent au point d’alignement qui est l’angle supérieur gauche de ce symbole de clip.
Définissez les coordonnées X et Y à l’aide de l’inspecteur de propriétés. Mettez les valeurs X et Y à 0. L’établissement de ces nouvelles coordonnées déplace le coin supérieur gauche de l’image dans le coin supérieur gauche de la scène. Vous pouvez déplacer l’image bitmap sur la scène avec l’outil de sélection au lieu de modifier les coordonnées dans l’inspecteur des propriétés. Cependant, l’inspecteur des propriétés permet de positionner avec précision un objet, comme vous l’avez fait dans cette étape. 8.
Le scénario, qui contient des calques et des images, permet d’organiser les éléments de votre document et d’en contrôler les contenus de manière chronologique. Les documents Flash, pareillement à des films ou des sons, peuvent se dérouler sur une période de temps qui est mesurée en nombre d’images par seconde. Les calques sont similaires à des feuilles transparentes empilées les unes sur les autres et chaque calque peut contenir des images, des textes ou des animations qui sont affichés sur la scène. La deuxième partie de ce didacticiel, Tâches de base : Créer un bandeau, 2ème partie, page 45, vous renseignera d’avantage sur les images et le scénario. Le fichier FLA actuel possède un calque (Calque 1) dont les contenus tiennent sur une seule image (Image 1). C’est en effet la façon dont les documents Flash vierges sont ouverts. Dans cet exercice, vous allez verrouiller et changer le nom du Calque 1. Souvent, on veut placer des objets à une position particulière sur la scène. Pour que ces objets demeurent à la même position, Flash vous permet de verrouiller les calques afin que vous ne puissiez pas y sélectionner des éléments et les déplacer par inadvertance. Dans cette section, vous accomplirez les tâches suivantes :
Il n’est pas possible d’ajouter de nouveaux objets à un calque verrouillé. 2.
Le double-clic sur le nom d’un calque permet de modifier le nom de ce calque.
Lorsque vous travaillerez sur des projets contenant plusieurs calques, des noms de calques, tels que Calque 1 et Calque 14, ne renseignent nullement sur les objets présents sur le calque. Prenez dès maintenant la bonne habitude de donner un nom significatif aux calques.
Insérer un calque pour créer un nouveau calque vide. Le nouveau calque est créé au-dessus du calque arrière-plan (voir l’illustration suivante).
Les graphiques sont empilés sur la scène en fonction de la position des calques sur le scénario. Par exemple, tout ce que vous placez dans le calque animation apparaîtra au-dessus du graphique dans le calque arrière-plan. Vous allez ajouter une animation dans ce calque dans la deuxième partie de ce didacticiel.
Tâches de base : Créer un bandeau, 1ère partie
Dans un précédent exercice, Importation de graphiques, vous avez importé directement le graphique gnome.png dans la bibliothèque du document. Puis vous avez déposé le graphique sur le calque sélectionné sur la scène. Vous pouvez également importer des éléments directement sur la scène au lieu de les importer dans la bibliothèque. Pour cela, vous devez d’abord sélectionner l’image dans laquelle vous voulez importer le graphique sur le scénario. Vous pouvez ensuite importer le graphique dans cette image qui est affichée sur la scène. Dans le prochain exercice, vous utiliserez cette technique pour importer un graphique. 1.
Vous devez importer le graphique star.png dans le calque d’animation.
La boîte de dialogue Ouvrir apparaît pour vous permettre de sélectionner un graphique enregistré dans un dossier de votre ordinateur. Naviguez jusqu’au dossier dans lequel se trouvent les fichiers source de ce didacticiel.
Le graphique est importé dans le calque d’animation (voir l’illustration suivante) et apparaît sur la scène.
Le graphique, que vous venez d’importer dans la scène, est également un élément apparaissant dans la bibliothèque. Même si vous importez un élément directement dans la scène, Flash stocke toujours les éléments importés dans la bibliothèque.
Positionnement du graphique star.png juste au-dessus de la tête du gnome. 6.
Pour terminer ce didacticiel, vous pouvez tester votre document dans Flash. Le fichier SWF est alors lu dans Flash Player. Par exemple, vous pouvez vérifier le bon fonctionnement de votre code dans Flash Player, l’animation dans le scénario, l’interactivité d’un utilisateur et plus encore. Cette façon de procéder est beaucoup plus rapide que de télécharger votre travail sur un serveur à chaque fois que vous souhaitez voir le fichier SWF en action.
Lorsque vous souhaitez créer une version finale de votre fichier destiné au téléchargement, il vous faut d’abord définir des paramètres de publication supplémentaires dans Flash avant de compiler le fichier SWF. Ces paramètres seront présentés dans la partie 3 (Tâches de base : Créer un bandeau, 3ème partie, page 69) de ce didacticiel.
Aucune connaissance préalable n’est nécessaire pour suivre ces didacticiels, toutefois vous devriez avoir suivi et terminé la 1ère partie (Tâches de base : Créer un bandeau, 1ère partie, page 25) de ce didacticiel avant de commencer la 2ème partie. Dans la partie 2 de ce didacticiel, vous accomplirez les tâches suivantes : Etude du fichier FLA final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Ajout de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Création d’un symbole . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Ajout d’animation au scénario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 En examinant la version terminée de l’application que vous êtes sur le point de créer, vous découvrirez également l’espace de travail Flash. Dans cette section, vous accomplirez les tâches suivantes : ■
1ère partie, vous avez peut-être déjà copié les fichiers sources de FlashBanner à un autre emplacement sur le disque dur. Sur la plupart des ordinateurs, vous trouverez le dossier FlashBanner du didacticiel aux emplacements suivants : ■
8\Samples and Tutorials\Tutorial Assets\Basic Tasks\FlashBanner\. Flash. Le fichier final du didacticiel est affiché dans l’environnement de création Flash.
Le bandeau réalisé pour la 2ème partie
Puis vous insérerez le bandeau dans un site web à l’aide de Dreamweaver.
Fermez le document en choisissant Fichier > Fermer. Si vous préférez conserver le fichier final ouvert comme de référence lorsque vous travaillez avec le fichier du bandeau, ne le modifiez pas ou n’enregistrez aucune modification éventuelle. Vous êtes désormais prêt à commencer la création de votre propre fichier de bandeau dans la nouvelle section : Ajout de texte.
Vous pouvez saisir ce texte et le transmettre à une base de données, vous en servir pour manipuler quelque élément dans le fichier SWF, etc. L’outil Texte vous permet d’ajouter ces trois types de texte. Au cours de cet exercice, vous allez ajouter du texte statique à la scène à des fins décoratives. Pour ce faire, suivez les étapes ci-après : Ouvrez le fichier banner.fla que vous avez créé dans la 1ère partie de ce didacticiel et renommez-le banner2.fla. R EMA R Q U E
Modifications des paramètres du texte dans l’inspecteur des propriétés Une fois ces opérations terminées, le texte devrait avoir les mêmes taille et position que le texte sur l’illustration suivante.
également étudier les options anti-alias avancées de FlashType. Pour plus d’informations reportez-vous au Chapitre 6, A propos de FlashType.
Un symbole est un objet que vous créez dans Flash. Comme vous l’avez appris dans la 1ère partie, un symbole peut être un graphique, un bouton ou un clip que vous pouvez ensuite réutiliser dans le fichier FLA en cours ou dans d’autres fichiers FLA. Les symboles que vous créez sont automatiquement ajoutés à la bibliothèque du document (Fenêtre > Bibliothèque) afin que vous puissiez les utiliser plusieurs fois dans un document. Lorsque vous ajoutez de l’animation, vous devriez toujours animer les symboles dans Flash au lieu d’animer des graphiques bruts (graphiques que vous dessinez) ou des éléments bruts importés (tel qu’un fichier PNG). Par exemple, si vous tracez un cercle à l’aide de l’outil Ovale dans Flash, vous devriez convertir ce graphique en un clip avant de l’animer. Cela vous permet de réduire la taille du fichier SWF et facilite la création d’animations dans Flash. Dans l’exercice suivant, vous allez créer un symbole de clip que vous animerez dans des exercices ultérieurs. 1.
La boîte de dialogue Convertir en symbole s’ouvre (voir l’illustration suivante) pour vous permettre de donner un nom au symbole et de choisir le type de ce dernier.
Après avoir créé le symbole, vous verrez le nom du symbole, rejoinsnous, dans le panneau Bibliothèque. Vous verrez également, à côté du nom du symbole, une icône représentant un clip.
Vous avez déjà utilisé le scénario dans la 1ère partie de ce didacticiel (Tâches de base : Créer un bandeau, 1ère partie, page 25) pour insérer de nouveaux calques et ajouter des éléments à ces calques. Dans la 1ère partie, vous avez ajouté des éléments actifs à une image dans le scénario. Vous avez sans doute remarqué qu’après l’ajout de contenus à une image un cercle plein apparaît sur l’image pour indiquer que cette image contient au moins un objet. Chaque ajout ou changement de contenu dans une image est appelé image-clé et est représenté par un point noir. Une image-clé est une image dans laquelle vous définissez les modifications de l’animation, ou une image avec des contenus. Une image-clé vide est représentée par un cercle vide. Vous créez une animation dans un document Flash en ajoutant des contenus à un scénario. Il peut s’agir du scénario principal ou d’un scénario au sein d’un clip. Lorsque la tête de lecture parcourt le scénario, chaque image est lue l’une après l’autre et, si elles sont lues rapidement (comme un folioscope ou une suite d’images sur une bobine de film), vous pouvez créer une animation.
12 images par secondes (ips). La modification du paramètre de cadence signifie que le scénario principal et les scénarios de clip seront tous lus à la cadence spécifiée.
N’oubliez pas qu’un clip est toujours lu à la cadence du document (18 ips).
Lorsque vous utilisez ce mode, vous modifiez donc le symbole même, et pas seulement l’occurrence présente sur la scène. Toutes les modifications effectuées dans ce scénario (c’est-à-dire le scénario du clip) sont appliquées à chaque occurrence du symbole utilisée dans le fichier FLA.
Sélectionnez le fichier PNG qui se trouve dans le clip, puis appuyez sur la touche F8 pour le convertir en un autre symbole.
La luminosité de l’occurrence de l’Image 15 change. Les occurrences des les Images 1 et 30 restent inchangées. Cela signifie que vous pouvez désormais ajouter une interpolation de mouvement qui anime la valeur de la luminosité entre les Images 1 et 15, puis entre l’Image 15 et l’Image 30. Après la lecture de l’Image 30, la tête de lecture retournera à l’Image 1 et l’animation se répétera.
Comme le montre cette illustration, vous pouvez également faire pivoter l’image avec l’outil Transformation libre. Vous pouvez créer plusieurs sortes d’animations dans un fichier FLA : des interpolations de mouvement, des interpolations de forme et des animations image par image. Dans ce didacticiel, vous allez créer une interpolation de mouvement. Une interpolation de mouvement est une animation dans laquelle vous définissez des propriétés telles que la position, la taille et la rotation d’une occurrence à un moment donné, puis vous modifiez ces propriétés à un autre moment. Dans cette animation, vous allez modifier la luminosité et la taille de l’occurrence.
Images 1 et 15 (voir l’illustration suivante). Remarquez comment les options dans l’inspecteur des propriétés changent en cas de sélection d’une image en comparaison à la sélection d’une occurrence de clip.
(Windows) ou avec la touche Option enfoncée (Macintosh) et sélectionnez Créer une interpolation de mouvement dans le menu contextuel.
Vous pouvez voir l’animation dans l’environnement de test qui s’est ouvert. Remarquez comment elle se répète, semblant apparaître et disparaître en raison des variations de la luminosité. Par défaut, la tête de lecture revient à l’Image 1 et relit l’animation après avoir atteint la dernière image du scénario. Cela signifie que l’animation se répète continuellement si vous ne l’arrêtez pas. Vous allez apprendre comment effectuer cet arrêt au cours de l’exercice appelé Ecriture d’actions simples.
Cliquez sur la Séquence 1 dans la barre d’édition pour vous assurer que vous êtes sur la scène principale.
La taille du rectangle n’a pas d’importance – vous la déterminerez plus tard avec l’inspecteur des propriétés.
Un quadrillé apparaît sur le rectangle lorsque vous le sélectionnez.
Modifiez la largeur et la hauteur du rectangle et déterminez l’emplacement du rectangle pour recouvrir la scène. 10. Le rectangle étant toujours sélectionné sur la scène, appuyez sur F8 pour
d’édition de symbole. Le rectangle se trouve actuellement dans la première image Haut du bouton que vous avez créé. Il s’agit de l’état Haut du bouton – ce que les utilisateurs voient lorsque le bouton est placé sur la scène. Mais vous voulez que le bouton ne soit pas visible sur la scène. Vous devez donc déplacer le rectangle dans l’image Cliquable qui est la surface de réactivité du bouton (la région active sur laquelle un utilisateur peut cliquer afin d’activer les actions du bouton). 13.
Cliquable sur le scénario. Toute la surface du bandeau réagit désormais à un clic, mais le bouton n’apparaît pas sur le bandeau. 14. Cliquez
15. (Facultatif) Sur le
Vous pouvez ajouter du code ActionScript dans un document Flash en plusieurs endroits. Vous pouvez choisir une occurrence et ajouter du code ActionScript lié directement à cette occurrence. Pour accéder au code, il vous faudra trouver et sélectionner de nouveau l’occurrence. Vous pouvez également ajouter du code ActionScript dans une image (ou dans plusieurs images) sur le scénario. Il est judicieux d’ajouter tout votre code à une seule image sur le scénario pour faciliter la recherche, la mise à jour et l’organisation lorsque vous travaillez sur un fichier. N’associez pas vos codes ActionScript à des occurrences.
ActionScript, particulièrement en cas de projets volumineux. Ce n’est pas l’objet de ce didacticiel.
ActionScript. Si vous ajoutez ce code ActionScript à une image, la tête de lecture s’arrête lorsqu’elle atteint cette image. stop();
Evidemment, vous remplacerez cette adresse URL par celle du site web que le bandeau doit ouvrir. Si vous voulez que le bandeau ouvre le site web dans la page actuelle, remplacez _blank par _self.
Vous avez désormais un bandeau Flash comportant des graphiques et une animation, et réagissant également à des clics sur un bouton. Vous avez terminé votre premier document Flash interactif et animé. Examinons-le en action dans une fenêtre de navigateur. 1.
Le navigateur par défaut sur votre ordinateur s’ouvre et affiche le bandeau. Par défaut, le bandeau apparaît dans le coin supérieur gauche du document HTML.
R E MA R Q UE Si vous voulez comparer vos résultats au fichier source du didacticiel, ouvrez le fichier banner2_complete.fla dans le dossier FlashBanner/Part2 que vous avez enregistré sur le disque dur dans Ouverture du document de programmation, page 173.
Dreamweaver MX 2004 ou Dreamweaver 8 doit être installé sur votre ordinateur pour la plupart des exercices de la 3ème partie de ce didacticiel. Si vous ne pouvez pas utiliser Dreamweaver, vous pouvez réaliser la première partie de ce didacticiel et utiliser le code HTML produit par Flash avec un autre éditeur HTML. Cependant, cela ne vous permettra pas de profiter de certains avantages de la combinaison de Flash et de Dreamweaver. Reportez-vous à la présentation de Tâches de base : Créer un bandeau, 1ère partie, page 25 pour lire une description des parties 1, 2 et 3 de ce didacticiel. Aucune connaissance préalable n’est nécessaire pour suivre ces didacticiels, toutefois vous devriez avoir suivi et terminé les deux premières parties de ce didacticiel avant de commencer la troisième et dernière partie. Dans la partie 3 de ce didacticiel, vous accomplirez les tâches suivantes : Etude du fichier FLA final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Vérification des paramètres de publication . . . . . . . . . . . . . . . . . . . 75 Insertion de contenus Flash dans un site Dreamweaver . . . . . . . . 78 Utilisation de la fonction « roundtrip editing » . . . . . . . . . . . . . . . . . 80 En examinant la version terminée de l’application que vous êtes sur le point de créer, vous découvrirez également l’espace de travail Flash. Dans cette section, vous accomplirez les tâches suivantes : ■
1ère ou la 2ème partie, vous avez peut-être déjà copié les fichiers source de FlashBanner à un autre emplacement sur le disque dur. Sur la plupart des ordinateurs, vous trouverez le dossier FlashBanner du didacticiel aux emplacements suivants : ■
8\Samples and Tutorials\Tutorial Assets\Basic Tasks\FlashBanner\. HTML dans la fenêtre du navigateur.
HTML pour un site web de gnome, ressemble à la fin de la troisième partie à l’illustration suivante :
Vers la fin de la troisième partie de ce didacticiel, vous ajouterez le bandeau que vous avez créé avec ses graphiques, animations et fonctions d’interactivité à un site web à l’aide de Dreamweaver.
Pour fermer le document, cliquez sur le bouton de fermeture de la fenêtre du navigateur, dans le coin droit supérieur (Windows) ou dans le coin gauche (Macintosh) de la fenêtre. Vous pouvez également garder le fichier final ouvert afin qu’il serve de référence lorsque vous travaillez avec le fichier du bandeau. Vous êtes désormais prêt à commencer la création de votre propre fichier de bandeau dans la nouvelle section : Prise en compte de votre public.
Vous avez créé le bandeau et en avez changé ses dimensions. Ce faisant, vous avez créé un bandeau de dimensions standard que la société Interactive Advertising Bureau appelle un « wide skyscraper ». Ce fichier est également d’une taille raisonnable pour une publicité Flash de cette dimension. Vous apprendrez à réduire la taille de vos fichiers dans un prochain exercice. Pour plus d’informations sur les dimensions standard (et pour prendre connaissance d’autres conseils bien utiles), consultez la page Standards and Guidelines du site Interactive Advertising Bureau à l’adresse : www.iab.net/standards/adunits.asp. Cependant, n’oubliez pas de confirmer les règles à suivre auprès du service de publicité, de votre client ou du site web pour lequel vous travaillez pour la première fois. Ces règles peuvent comprendre des standards en termes de taille de fichiers, de dimensions, d’utilisation de son et de vidéo, et de boutons.
Player (le cas échéant) ? Ou, votre public est-il constitué principalement de développeurs Flash et de nouvelles sociétés médiatiques ? Votre public a un effet sur la version de Flash Player que vous allez cibler. Par exemple, si vous pensez qu’un public très divers (et donc avec un éventail aussi divers de capacités informatiques) va consulter votre site, vous devez cibler une version plus ancienne de Flash Player, telle que la version 6. Si vous pensez que ce sont d’autres professionnels du web qui consulteront votre site, la version la plus récente du lecteur (avec un système de détection) suffira. Vous allez définir la version de Flash Player et ajouter un système de détection de Flash Player à l’aide de Dreamweaver dans les prochains exercices. R EM A R QU E
également créé un site web pour un très large public et cibler un lecteur plus ancien. Le code ActionScript que vous avez ajouté à votre fichier peut être lu dans Flash Player 6. Vous pouvez donc changer les paramètres à Flash Player 6 pour votre site web. Dans les premières parties de ce tutorial, vous avez effectué des modifications dans la boîte de dialogue Paramètres du document. Vous avez défini les dimensions et la cadence (ips) du fichier SWF. Dans cette dernière partie, vous allez vérifier que les paramètres Flash Player que vous souhaitez cibler sont corrects et que vous exportez les fichiers dont vous avez besoin. De nombreux développeurs changent ces paramètres lorsqu’ils commencent à travailler sur le FLA, car ils savent déjà ce qu’ils doivent cibler. 1.
Si vous n’avez pas le fichier banner2.fla, ouvrez le fichier banner3.fla inclus dans les fichiers source du didacticiel (reportez-vous à Ouverture du projet terminé, page 71). Il se trouve dans le dossier de démarrage.
Vous pouvez écrire du code ActionScript 2.0 et publier votre fichier pour Flash Player 6 si vous le souhaitez.
Vous n’avez rien d’autre à faire dans l’onglet Flash.
Comme indiqué auparavant, la taille du fichier n’a pas vraiment d’importance, car vous ne fournirez pas le bandeau à une agence de publicité. Si vous souhaitez ou avez besoin de réduire la taille de votre fichier de bandeau, vous pouvez ouvrir de nouveau la boîte de dialogue Paramètres de publication (Fichier > Paramètres de publication) et cliquez sur l’onglet Flash. Vous pouvez réduire la qualité de l’image bitmap utilisée pour l’arrière-plan en diminuant la valeur de la qualité JPEG.
Il existe d’autres façons de réduire la taille d’un fichier SWF. Si vous devez produire un fichier inférieur à une certaine taille maximum, il vous faudra publier votre document à intervalles réguliers pour en vérifier la taille. Les images bitmap, les sons et les contenus vidéo augmentent sérieusement la taille d’un fichier SWF. Si Dreamweaver n’est pas installé sur votre ordinateur, ce didacticiel se termine avec cette section. Vous pouvez ouvrir de nouveau la boîte de dialogue Paramètres de publication de cet exercice et activer l’option HTML dans l’onglet Formats. Lorsque vous publiez le document, un fichier HTML sera exporté avec le fichier SWF. Vous pouvez ouvrir ce fichier, copier le code HTML et le coller dans votre site web. Remarquez que ce fichier contient des balises supplémentaires, telles que head et body, dont vous n’avez pas besoin si vous avez déjà un site web. Les balises dont vous avez besoin sont les balises object et embed qui contiennent les informations utilisées par Internet Explorer et les navigateurs basés sur Mozilla pour afficher le fichier SWF. Si Dreamweaver est installé sur votre ordinateur, passez à la page suivante. Dans les exercices suivants, vous allez placer et modifier le bandeau dans une page web.
Nous avons également créer une page à cet effet qui est prête pour recevoir un bandeau à sa taille. Ouvrez le répertoire FlashBanner/Part3 (voir Ouverture du projet terminé) et recherchez le dossier du site web dans ce répertoire.Ce dossier contient les documents dont vous avez besoin pour travailler avec Dreamweaver. Vous allez modifier la page web gnome.html dans l’exercice suivant.
Sélection du repère d’emplacement du côté droit de la page web dans Dreamweaver Notez que les dimensions sont les mêmes que celles de votre fichier de bandeau. 6.
Laissez le curseur de saisie de texte à cette position dans le document HTML.
Création (dans ce mode vous voyez la mise en page avec les codes HTML), puis ouvrez l’inspecteur des propriétés (Fenêtre > Propriétés). L’inspecteur des propriétés affiche les contrôles du fichier SWF.
Flash ouvre le fichier FLA associé dans l’environnement de création de Flash ou ouvre une fenêtre permettant de sélectionner le fichier FLA associé. 3.
Vous remarquez que la mention « Editing From Dreamweaver » apparaît dans l’environnement de création pour indiquer que vous travaillez sur un fichier provenant de l’environnement Dreamweaver.
Cliquez sur Terminé une fois toutes les modifications effectuées. Flash met à jour le fichier FLA, publie le fichier SWF, se ferme, puis renvoie au document Dreamweaver. Votre document est mis à jour dans Dreamweaver.
Flash Player La plupart des visiteurs de votre site disposent de Flash Player 6 ou d’une version plus récente. Il est rare qu’un visiteur ne dispose pas de ce plug-in (module). Vous pouvez faire plusieurs choses différentes lorsqu’un visiteur de votre site n’a pas Flash Player. Lorsque votre site repose sur des contenus Flash, vous pouvez renvoyer le visiteur vers une page web personnalisée qui a un lien au site de Macromedia à partir duquel il pourra télécharger Flash Player. Le comportement de vérification disponible dans Dreamweaver vous permet de vérifier si les visiteurs de votre site disposent de Flash Player. Après cette vérification effectuée par le comportement, vous pouvez renvoyer le visiteur vers des adresses différentes en fonction de la version du plug-in dont il dispose. Par exemple, si le visiteur n’a pas Flash Player, vous pouvez ouvrir une page qui relie le visiteur au site de Macromedia à partir duquel il pourra télécharger la dernière version. 1.
(cliquez entre la lettre « y » et le guillemet de fermeture) et ouvrez le panneau Comportements dans Dreamweaver (Fenêtre > Comportements).
Player. Sélectionnez ces options pour ajouter la détection de Flash Player à l’aide d’un comportement dans Dreamweaver.
R EM A R QU E Vous trouverez les fichiers terminés dans le répertoire FlashBanner/Part3, dans le dossier des éléments terminés.
Ouvrez la boîte Paramètres de publication (Fichier > Paramètres de publication) et vérifiez que l’option HTML est activée dans l’onglet Formats. Sélectionnez ensuite l’onglet HTML, puis activez l’option Détecter la version de Flash. Cliquez sur Paramètres en regard de la case à cocher. Cette boîte de dialogue vous permet de définir la cible, les contenus et les pages secondaires.
Vous avez désormais un bandeau Flash comportant des graphiques et une animation, et réagissant également à des clics sur un bouton. Vous venez de terminer votre premier document Flash interactif et animé, et vous l’avez ensuite inséré dans un site web à l’aide de Dreamweaver. Examinons le bandeau en action dans une fenêtre de navigateur. 1.
Une nouvelle fenêtre s’ouvre dans le navigateur et affiche le site web du gnome.
éléments terminés dans le dossier FlashBanner/Part3 que vous avez enregistré sur le disque dur dans Ouverture du document de programmation, page 173.
Vous avez terminé votre premier site Flash et l’avez inséré dans une page web avec Dreamweaver. Vous avez appris à créer un nouveau fichier, à importer des contenus, à créer de nouveaux éléments actifs dans Flash, à ajouter une animation de base et du code ActionScript, et à publier le fruit de votre travail sur le web. Vous avez également appris à utiliser Dreamweaver pour insérer le fichier SWF dans une page web existante, probablement similaire à une page que vous auriez pu créer dans le passé. Dans la 3ème partie de ce didacticiel, vous avez appris à utiliser Flash et Dreamweaver pour accomplir les tâches suivantes : ■
Cette leçon explique comment créer un document accessible, conçu pour une utilisation avec des lecteurs d’écrans (qui énoncent le contenu web pour les utilisateurs malvoyants) et d’autres technologies d’assistance. Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l’adresse http://www.macromedia.com/go/fl_documentation_fr. Dans ce didacticiel, vous accomplirez les tâches suivantes : Rendre le document accessible aux lecteurs d’écran . . . . . . . . . . 87 Fournir un titre de document et une description . . . . . . . . . . . . . . . 87 Attribuer un titre et une description aux occurrences. . . . . . . . . . . 88 Spécifier que les lecteurs d’écran doivent ignorer des éléments dans le document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 Changer le texte statique en texte dynamique pour le rendre accessible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Contrôler l’ordre de tabulation et l’ordre de lecture . . . . . . . . . . . . 91
Utilisation de Flash.
Commencez par ouvrir le fichier de démarrage de la leçon et configurer l’espace de travail afin d’obtenir la disposition optimale pour votre apprentissage. 1.
■ Vérifiez que vous n’avez rien sélectionné sur la scène et choisissez Fenêtre > Autres panneaux > Accessibilité. Flash Player de transmettre les informations d’accessibilité à un lecteur d’écran.
Dans le panneau Accessibilité du document, vous pouvez attribuer un nom et une description au document, destinés aux lecteurs d’écran. ■
Description, entrez Site consacré au Trio ZX2004. Inclus : 6 boutons de navigation, un texte de présentation et une voiture animée.
Maintenant que vous avez fourni des informations sur le document entier, vous pouvez fournir des informations sur les objets Stage inclus dans le document. 1.
N’entrez rien dans le champ Description. Toutes les occurrences ne nécessitent pas de description (la description est lue avec le titre). Si le titre fournit une description suffisante de la fonction de l’objet, il n’est pas nécessaire d’inclure une description.
Dealers sur la scène. Les informations du panneau Accessibilité reflètent les options d’accessibilité de l’objet sélectionné. Dans le panneau Accessibilité du bouton Dealers, il est inutile de fournir un nom dans le champ Titre, car le bouton comprend une étiquette de texte qui sera lue par le lecteur d’écran. Si vous ne souhaitez pas que le lecteur d’écran lise le texte du bouton, vous pouvez désélectionner Etiquetage auto lorsque vous définissez l’accessibilité du document.
Vous pouvez heureusement utiliser le panneau Accessibilité pour désélectionner Rendre l’objet accessible, afin que le lecteur d’écran ne reçoive pas les informations d’accessibilité de l’objet, ou bien désélectionner Rendre les objets enfants accessibles, afin que le lecteur d’écran ne reçoive pas les informations d’accessibilité imbriquées dans un clip. Effectuez maintenant la deuxième opération afin que les utilisateurs sachent que la page web contient une animation, et que cette dernière ne provoquera pas la réactualisation constante du lecteur d’écran. 1.
Modifiez le paragraphe de texte de présentation en texte dynamique et spécifiez ses options d’accessibilité. 1.
Le panneau Accessibilité change afin d’indiquer que vous ne pouvez pas appliquer les fonctions d’accessibilité à cette sélection.
Les paramètres d’accessibilité apparaissent dans le panneau Accessibilité.
Vous pouvez également contrôler l’ordre dans lequel un lecteur d’écran lit les informations concernant l’objet (l’ordre de tabulation). Vous pouvez créer l’ordre de tabulation et de lecture à l’aide de la propriété tabIndex dans ActionScript (dans ActionScript, la propriété tabIndex est synonyme de l’ordre de lecture). Si vous possédez Flash Professionnel 8, vous pouvez utiliser le panneau Accessibilité pour spécifier l’ordre de tabulation, mais l’index de tabulation que vous affectez ne contrôle pas nécessairement l’ordre de lecture. Pour créer un ordre de lecture, vous devez affecter un ordre de tabulation à chaque occurrence dans ActionScript. Si vous disposez de Flash Professionnel, la création d’un ordre de tabulation se résume à l’entrée d’un nombre dans le champ Index de tabulation. Vous pouvez ensuite afficher l’ordre de tabulation directement sur la scène. Pour créer un ordre de tabulation dans cette leçon, utilisez l’une des procédures suivantes. Pour créer un ordre de lecture ainsi qu’un ordre de tabulation, suivez la procédure de contrôle de l’ordre de tabulation et de l’ordre de lecture à l’aide d’ActionScript. Si vous disposez de Flash Professionnel 8, vous pouvez suivre cette procédure permettant de créer un ordre de tabulation en utilisant le panneau Accessibilité : 1.
Accessibilité, n’apparaît pas lorsque Afficher l’ordre de tabulation est activé.
Félicitations, vous avez créé du contenu Flash accessible. En quelques minutes vous avez appris à accomplir les tâches suivantes : ■ Dans ce didacticiel, vous accomplirez les tâches suivantes : Sélectionner un calque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Masquer et afficher des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Verrouiller un calque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Ajouter et nommer un calque. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Vous pouvez également utiliser la barre de défilement pour passer d’un calque à l’autre.
Dans le panneau Outils, cliquez sur l’outil Sélection.
Tout le contenu disparaît de la scène.
Les commandes situées à droite du nom d’un calque permettent de masquer ou d’afficher son contenu.
Lorsque vous avez placé votre contenu sur un calque, vous pouvez verrouiller ce dernier pour éviter que d’autres utilisateurs le modifient par inadvertance. 1.
Une icône représentant un verrou s’affiche, indiquant que le calque est verrouillé.
Ce n’est pas possible, parce que le calque est verrouillé.
Dans le scénario, cliquez sur le calque de la voiture.
Le nouveau calque s’affiche par dessus le calque de la voiture et devient actif.
Il est recommandé d’attribuer à chaque calque un nom explicite reflétant son contenu.
Le calque d’arrière-plan est posé par-dessus tous les autres calques, excepté le calque de masque. Son contenu s’affiche par conséquent pardessus les objets des calques sous-jacents.
Il est bien sûr préférable que le calque d’arrière-plan ne recouvre pas les autres objets de la scène. Ce calque doit normalement être placé sous les autres dans le scénario. Vous allez donc déplacer le calque d’arrière-plan que vous avez créé. 1.
Tous les objets de la scène s’affichent maintenant par-dessus l’arrièreplan.
Dans le scénario, sélectionnez le calque Buttons.
L’utilisation d’un calque de masque permet de choisir les parties des calques sous-jacents à afficher. Pour cela, vous devez choisir votre calque de masque, les autres devenant par défaut les calques masqués. Vous allez utiliser la forme rectangulaire sur la scène pour maquer une partie du graphique et de l’animation de la route, de sorte que l’animation soit mieux ajustée à la scène. 1.
Insérer un calque pour créer un calque.
Ajouter un calque de guide
Le calque de guide de votre document étant superflu, vous allez le supprimer. ■
Supprimer le calque.
Félicitations, vous savez désormais utiliser les calques dans Flash. En quelques minutes vous avez appris à accomplir les tâches suivantes : ■ 102 Tâches de base : Utiliser les calques
Dans ce didacticiel, vous accomplirez les tâches suivantes : Copier les entrées et les champs de texte dynamiques . . . . . . . . 105 Nommer les champs de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Ajouter et nommer un composant Button . . . . . . . . . . . . . . . . . . . 106 Déclarer les variables et les valeurs pour les prix . . . . . . . . . . . . . 107 Préciser les valeurs des champs de saisie de texte . . . . . . . . . . . 108 Rédiger une fonction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 Rédiger un gestionnaire d’événement pour le composant . . . . . .110
Utilisez des champs de saisie de texte pour créer un formulaire. 1.
(Fenêtre > Propriétés), tapez qty1_txt.
Les composants sont des clips vidéo offrant un moyen facile d’ajouter des fonctionnalités avancées à votre document sans avoir à connaître le langage ActionScript, plus pointu. Utilisez le composant Button pour créer un bouton Calculer qui fournit le prix total. Ce composant étant basé sur ActionScript 2.0, vous devez tout d’abord configurer votre boîte de dialogue Paramètres de publication pour vous assurer que votre contenu Flash est lu comme prévu. 1.
Déclarer les variables et les valeurs pour les prix Pour que votre application multiplie la quantité de pièces sélectionnées par le prix, vous devez définir une variable pour chaque pièce dans ActionScript. La valeur de la variable correspond au prix de la pièce. 1.
Vous devez préciser les valeurs des champs de saisie de texte. Vous allez utiliser les valeurs pour rédiger un code ActionScript qui multiplie la quantité par le prix. 1.
//définit les valeurs initiales pour les champs de texte de la quantité.
Dans la fenêtre de script, placez le point d’insertion après le code ActionScript qty3_txt.text = 0;, appuyez sur Entrée (Windows) ou sur Retour (Macintosh) à deux reprises, puis saisissez le commentaire suivant : //calcule la quantité fois le prix.
saisie du haut sur la scène. définit le texte qui doit apparaître dans le champ de texte, autrement dit le nombre de pièces multiplié par le prix : les 320 dollars que vous avez définis comme valeur de la variable priceCD.
ActionScript associé à un objet ou un événement particulier. Utilisez un gestionnaire d’événement on() pour le composant Button qui calcule le prix total lorsque l’utilisateur clique sur ce bouton. Pour plus d’informations sur les gestionnaires d’événement d’ActionScript, consultez la section Gestion d’événements dans Formation à ActionScript 2.0 dans Flash. 1.
Actions. L’onglet Calculate, situé en bas du panneau Actions, indique que vous attachez le script directement à l’objet sélectionné plutôt qu’à une image.
Vous venez d’entrer le début du gestionnaire d’événement on(). L’élément (clic) indique que l’événement doit intervenir lorsque l’utilisateur clique sur le bouton Calculer. Un composant Button dispose de son propre scénario. Dans la hiérarchie du scénario, le composant Scénario dépend du scénario principal. Dans ce script, pour désigner des éléments à partir du scénario du composant Button vers le scénario principal, utilisez le code with (_parent).
Dans ce didacticiel, vous accomplirez les tâches suivantes : Utiliser les guides pour aligner des objets. . . . . . . . . . . . . . . . . . . . .115 Modifier la taille de la scène . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116 Redimensionner les objets en fonction de la taille de la scène . .116 Spécifier des paramètres d’alignement par accrochage. . . . . . . . 117 Aligner un objet à l’aide des guides d’alignement . . . . . . . . . . . . . .118 Aligner un objet à l’aide du panneau Aligner . . . . . . . . . . . . . . . . . .119 Accrocher des objets les uns aux autres . . . . . . . . . . . . . . . . . . . . . .119 Aligner des objets à l’aide de l’inspecteur des propriétés . . . . . . 120 Aligner des objets à l’aide de la grille et des touches fléchées. . .121
(guides d’alignement pour aligner du texte, par exemple), mais les objets peuvent tout aussi bien être alignés à l’aide d’autres outils. Utilisez les outils de votre choix pour créer votre projet.
Vous pouvez utiliser les règles et les guides pour placer ou aligner un objet avec précision dans votre document. Vous allez ajouter des guides pour faciliter le centrage du bloc de texte. 1.
Une règle horizontale et une règle verticale s’affichent en haut et à gauche de la scène.
Cliquez sur une zone vide de l’espace de travail et désélectionnez le bloc de texte.
Maintenant que vous avez modifié la taille de la scène, les illustrations débordent sur l’espace de travail. Cela peut être corrigé facilement. 1.
Les info-bulles s’affichent dans le panneau Aligner, indiquant les noms des options d’alignement.
L’accrochage permet de placer un objet sur une scène avec précision en l’accrochant à d’autres objets ou à des outils d’alignement. Vous allez spécifier l’affichage des guides horizontaux et verticaux dans les paramètres d’alignement par accrochage, ce qui vous aidera à placer les illustrations sur la scène. 1.
« Introducing the World’s First Hybrid 4WD ».
Utilisez la fonction Accrocher aux objets pour aligner une barre de navigation sur le bandeau supérieur de la scène. 1.
Accrocher aux objets, si cette option n’est pas déjà sélectionnée.
L’inspecteur des propriétés permet d’aligner avec précision des objets sur les axes x et y de la scène, à partir du point d’alignement de l’objet de la scène. Le point d’alignement est le point sur lequel un symbole s’aligne ou pivote. Vous allez utiliser l’inspecteur des propriétés pour aligner le logo. 1.
La grille ne s’affiche pas lorsque vous testez ou publiez le document.
(Affichage > Accrochage > Accrocher à la grille). La leçon présente n’utilise pas cette option.
Redimensionner les objets en fonction de la taille de la scène
122 Tâches de base : Utiliser les outils de mise en forme
Dans ce didacticiel, vous accomplirez les tâches suivantes : Créer un symbole graphique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Dupliquer et modifier une occurrence de symbole . . . . . . . . . . . . 126 Modifier un symbole . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Créer un symbole de clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 Tout au long de cette leçon, pensez à enregistrer fréquemment votre travail.
A propos de la création de symboles Lorsque vous créez un symbole, vous devez spécifier l’un des comportements de symbole suivants : ■
éléments de navigation aux boutons
Un symbole graphique convient tout particulièrement à l’utilisation répétée d’images statiques ou à la création d’animations associées au scénario principal. Vous ne pouvez pas attribuer de noms d’occurrence aux symboles graphiques, ni y faire référence dans ActionScript, contrairement aux symboles de clip et de bouton. Vous allez convertir en symbole graphique une illustration vectorielle présente sur la scène. 1.
Après avoir créé un symbole, vous pouvez en multiplier les occurrences dans le document. Vous pouvez modifier les propriétés suivantes d’une occurrence sans affecter les autres occurrences du symbole : couleur, échelle, rotation, transparence alpha, luminosité, teinte, hauteur, largeur et emplacement. Si vous modifiez le symbole ultérieurement, l’occurrence conserve les propriétés qui lui sont propres tout en reflétant la nouvelle définition du symbole. Vous allez maintenant dupliquer l’occurrence de la voiture et modifier la teinte de la copie.
Vous pouvez passer en mode d’édition de symbole en double-cliquant sur n’importe quelle occurrence d’un symbole. Les modifications apportées dans ce mode sont répercutées dans toutes les occurrences du symbole. 1.
■ Dans le panneau Bibliothèque, double-cliquez sur le symbole ImageVoiture.
Créer un symbole de clip Un symbole de clip est très similaire à un sous-document dans un document. Ce type de symbole possède son propre scénario indépendant du scénario principal. Vous pouvez ajouter des clips à l’intérieur d’autres clips et de boutons afin de créer des clips imbriqués. Vous pouvez également utiliser l’inspecteur des propriétés pour affecter un nom d’occurrence à un clip et le référencer dans ActionScript. Vous allez convertir en clip le pneu présent sur la scène. 1.
Pour faire référence à une occurrence de symbole de bouton ou de clip dans ActionScript, vous devez la nommer. Il est recommandé de toujours effectuer cette opération. Vous ne pouvez pas affecter de nom d’occurrence aux symboles graphiques. ■
ClipRoue sur la scène, entrez roue_mc dans la zone de texte Nom de l’occurrence.
En mode d’édition de symbole, vous pouvez créer une animation indépendante du scénario principal dans un scénario de clip. Vous allez ajouter un effet au symbole ClipRoue pour faire tourner toutes les occurrences du symbole. 1.
Macromedia Flash Basic 8 et Macromedia Flash Professionnel 8 créent le scénario des états du bouton. Vous pouvez ajouter des éléments de navigation aux boutons en utilisant des comportements ou en rédigeant des instructions ActionScript. Ce didacticiel vous permettra d’apprendre à créer et à modifier les boutons et même d’y ajouter de l’animation. Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l’adresse http://www.macromedia.com/go/fl_documentation_fr. Dans ce didacticiel, vous accomplirez les tâches suivantes : Créer un bouton à partir d’objets groupés . . . . . . . . . . . . . . . . . . . 133 Attribuer un nom à une occurrence de bouton . . . . . . . . . . . . . . . 133 Afficher la zone active en activant les boutons . . . . . . . . . . . . . . . 134 Modifier la zone active d’un bouton . . . . . . . . . . . . . . . . . . . . . . . . . 135 132 Tâches de base : Ajouter de l’animation et des éléments de navigation aux boutons
Vous pouvez créer des boutons à partir de texte et de graphiques, y compris des images bitmap et des objets groupés. Dans cette leçon, vous allez créer un gros bouton à partir d’un logo et d’un texte. 1.
Convertir en symbole.
Attribuer un nom à une occurrence de bouton Il est recommandé de nommer les occurrences des symboles sur la scène. ActionScript utilise le nom de l’occurrence pour identifier l’objet. ■
Une fois la fonction Activer les boutons simples sélectionnée, vous pouvez afficher les aspects les moins complexes de vos boutons, comme la zone active (la zone d’un bouton sur laquelle vous pouvez cliquer) et les couleurs utilisées pour les états de bouton. Les effets plus complexes, tels que l’animation, ne sont pas lus. 1.
Les seules zones du bouton sur lesquelles vous pouvez cliquer (telles qu’indiquées lorsque le pointeur se transforme en main) sont la zone de texte et le logo. L’espace blanc autour du texte et du logo ne peut pas être sélectionné.
134 Tâches de base : Ajouter de l’animation et des éléments de navigation aux boutons
Vous pouvez spécifier une zone active de taille différente de celle de la zone active par défaut en ajoutant une image-clé à l’image Cliqué du symbole de bouton, puis en traçant une forme définissant la zone active. 1.
■ Dans le scénario, cliquez sur le calque Content.
136 Tâches de base : Ajouter de l’animation et des éléments de navigation aux boutons
Vous allez créer un clip dans l’état Dessus de Button 1, puis créer une interpolation de forme dans le clip. L’interpolation de forme crée un effet de changement de couleur, du gris au rouge. 1.
Lorsque l’utilisateur clique sur le bouton et que l’interpolation est lue, la tête de lecture doit passer à la fin du scénario Button Animation, avant de s’arrêter. Vous utiliserez ActionScript pour contrôler le mouvement de la tête de lecture dans un scénario. 1.
Actions. Dans le scénario Button Animation, l’image 15 du calque Actions contient maintenant un petit a, qui indique qu’une action lui est associée.
Ajouter un élément de navigation à un bouton Grâce aux comportements, vous pouvez rapidement ajouter un élément de navigation à un bouton sans nécessairement connaître ActionScript. Vous allez ajouter un élément de navigation pour ouvrir une page Web lorsque l’utilisateur clique sur un bouton. 1.
Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l’adresse http://www.macromedia.com/go/fl_documentation_fr. Dans ce didacticiel, vous accomplirez les tâches suivantes : Ajouter du contenu à une diapositive de présentation . . . . . 145 Ajouter des comportements de navigation d’écran aux boutons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Ajouter et nommer une diapositive. . . . . . . . . . . . . . . . . . . . . . 147 Sélectionner et déplacer des diapositives . . . . . . . . . . . . . . . 148 Ajouter du contenu à une nouvelle diapositive . . . . . . . . . . . 148 Tout au long de cette leçon, pensez à enregistrer fréquemment votre travail.
Afficher la hiérarchie des écrans et leurs scénarios Pour ajouter du contenu aux écrans, vous procédez en grande partie comme lorsque vous ajoutez du contenu à la scène. Les écrans représentent des clips imbriqués, basés sur une hiérarchie, des scénarios imbriqués et l’héritage. Tous les écrans sont présents dans la première image du scénario racine, qui est caché, et tout écran contient des chargements sur la première image. Pour plus d’informations sur les écrans, reportez-vous à la section Utilisation des écrans (Flash Professionnel uniquement) dans le guide Utilisation de Flash. 1.
Autres panneaux > Ecrans. Lorsque vous sélectionnez un écran dans le panneau Contour de l’écran, l’écran apparaît dans la fenêtre Document. Lorsque vous sélectionnez plusieurs écrans, le contenu du premier écran sélectionné apparaît dans la fenêtre Document.
Considérons la diapositive de la présentation comme une diapositive maître : le contenu de la diapositive de présentation peut apparaître sur toutes les diapositives de votre document.
Sélectionnez une autre diapositive dans le panneau Contour de l’écran pour afficher le scénario de cet écran. Chaque écran possède son propre scénario, mais le scénario principal d’un document avec des écrans n’apparaît jamais.
Vous pouvez afficher différentes propriétés d’une diapositive en fonction de l’endroit sélectionné sur la diapositive. 1.
L’inspecteur de propriétés vous permet de modifier le nom de l’occurrence qui est également le nom de l’écran tel qu’il apparaît dans le panneau Contour de l’écran.
L’inspecteur de propriétés affiche alors les mêmes commandes que celles que vous utilisez régulièrement pour manipuler la scène et les propriétés de document.
Vous allez ajouter des boutons de navigation à la diapositive de présentation afin que les boutons apparaissent sur chaque diapositive de la présentation. 1.
Lorsque vous ouvrez un nouveau diaporama Flash, le document inclut déjà une fonctionnalité permettant à l’utilisateur de naviguer entre les diapositives à l’aide des touches fléchées du clavier. Vous allez ajouter des comportements de navigation aux boutons, pour offrir aux utilisateurs un autre moyen de naviguer entre les diapositives.
Dans le panneau Contour de l’écran, sélectionnez la vignette de titre. Cliquez avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contrôle (Macintosh), puis sélectionnez Insertion écran dans le menu contextuel.
Contour de l’écran, et nommez-la features.
Vous pouvez copier, couper, coller et faire glisser des écrans dans le panneau Contour de l’écran pour modifier leur ordre dans la présentation. Vous allez sélectionner trois écrans, les couper, puis les coller afin de les imbriquer en tant qu’enfants de la diapositive features. 1.
« safety »et « handling » pour les ajouter à la sélection.
Ajouter du contenu à une nouvelle diapositive La diapositive features, en tant qu’enfant de la diapositive de présentation, hérite des propriétés de cette diapositive. En outre, étant donné que la diapositive features est un parent des trois diapositives que vous avez copiées et collées, le contenu que vous ajoutez à cette diapositive apparaît sur les trois diapositives enfant. 1.
Dans le panneau Bibliothèque, faites glisser le symbole Features Content à un quelconque endroit de la fenêtre Document.
Content le nom d’occurrence features_mc.
Ajouter des comportements de transition Bien que votre présentation soit quasiment terminée, vous allez ajouter des comportements de transition pour la rendre plus intéressante. Plus particulièrement, vous allez ajouter des comportements pour effectuer un fondu et donner l’impression que le contenu s’envole de la fenêtre Document. 1.
Dans le panneau Comportements, cliquez sur Ajouter (+), puis sélectionnez Ecran > Transition dans le menu.
Zoom avant est sélectionné comme direction, puis cliquez sur OK.
Evénement pour ouvrir le menu déroulant et sélectionner revealChild. L’option revealChild signifie que le comportement révèlera le nouvel écran enfant.
Ajouter des comportements de transition 149
écrans (Flash Professionnel uniquement) » dans le guide Utilisation de Flash.
Dessiner un polygone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 Faire pivoter la forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 Utiliser la fonction Découpe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 Transformer la forme du dessin . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Dans le scénario, sélectionnez le calque Content.
La forme prend cette couleur, à l’intérieur du trait.
L’outil Polygone permet de définir le nombre de côtés du polygone ; vous pouvez également l’utiliser pour créer une étoile. Spécifiez un polygone à six côtés. 1.
Si vous cliquez une fois dans la forme, vous ne sélectionnez que le remplissage.
Transformer, vérifiez que l’option Pivoter est sélectionnée et entrez -15 dans la zone de texte Pivoter pour faire tourner la forme de 15º vers la droite. Appuyez sur Entrée (Windows) ou sur Retour (Macintosh).
Lorsque vous dessinez une forme sur une forme existante et que les deux formes sont dégroupées, la forme située au-dessus « découpe » la forme située en dessous. Créez un cercle dans l’hexagone, puis découpez-le. 1.
Double-cliquez sur l’hexagone dans la scène pour sélectionner à la fois le trait et le remplissage.
Vous pouvez sélectionner des traits et les copier. Entraînez-vous à créer la face inférieure du boulon. 1.
Pot de peinture pour ajouter une couleur de remplissage aux zones vides de votre dessin. 1.
Félicitations, vous savez désormais utiliser plusieurs outils de dessin de Flash. En quelques minutes vous avez appris à accomplir les tâches suivantes : ■
Dans ce didacticiel, vous accomplirez les tâches suivantes : Créer une interpolation de mouvement . . . . . . . . . . . . . . . . . . . . . . 163 Créer une interpolation de forme . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 Copier des images-clés dans une animation . . . . . . . . . . . . . . . . . 166 Modifier la vitesse de l’animation . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 162 Création de graphiques : Créer une animation dans un scénario
Pour créer une interpolation de mouvement, vous devez définir les propriétés d’une occurrence, d’un objet groupé ou d’un texte dans l’imageclé de début, puis modifier les propriétés de l’objet dans une image-clé ultérieure. Flash crée l’animation dans les images situées entre ces deux images-clés. Vous allez créer une interpolation de mouvement en prenant une occurrence du symbole de pneu et en le faisant rebondir. 1.
1 et renommez-le AnimationPneu. Appuyez ensuite sur Entrée (Windows) ou Retour (Macintosh) pour renommer le calque.
Pour créer une interpolation de forme, vous devez spécifier les attributs d’une forme dans une image-clé, puis modifier la forme ou en dessiner une autre dans une image-clé ultérieure. Comme dans l’interpolation de mouvement, Flash crée l’animation dans les images situées entre les deux images-clés. Vous allez maintenant créer une interpolation pour que l’ombre du pneu bouge et disparaisse au fil de ses propres rebonds. 1.
Pour que les rebonds du pneu paraissent réalistes, celui-ci doit s’aplatir légèrement à chaque fois. Vous pouvez produire cet effet en transformant la forme du pneu dans l’Image 1 de l’animation et en copiant cette image dans l’Image 30. 1.
AnimationPneu. Appuyez ensuite sur F6 pour ajouter une image-clé. Une image-clé est ajoutée et la tête de lecture se positionne sur l’Image 2.
En testant l’animation, vous aurez peut-être remarqué que le pneu rebondit plutôt lentement. Vous pouvez modifier la vitesse de l’animation en changeant le nombre d’images affichées par seconde et en définissant des valeurs d’accélération positives et négatives, lesquelles déterminent le taux d’accélération et de décélération.
La cadence, mesurée en images par seconde (ips), représente la vitesse à laquelle l’animation est lue. Par défaut, les animations Flash sont lues à une cadence de 12 ips. C’est la cadence idéale pour les animations web. Cependant, il peut parfois s’avérer nécessaire de modifier la cadence. Vous allez définir une cadence de 36 images par seconde, pour faire rebondir le pneu plus rapidement. 1.
Par défaut, les images interpolées sont lues à une vitesse constante. L’option d’accélération permet de créer un effet plus naturel d’accélération ou de décélération. Entrez une valeur positive pour commencer l’interpolation rapidement et ralentir vers la fin de l’animation. Entrez une valeur négative pour commencer l’interpolation lentement et l’accélérer vers la fin de l’animation. Vous allez maintenant ajouter des valeurs d’accélération positives et négatives à votre animation. 1.
Retour (Macintosh). Tester le fichier SWF Vous allez tester le document pour visualiser l’animation et vérifier qu’elle fonctionne comme prévu. 1. Chapitre10, Création de mouvement, dans le guide Utilisation de Flash. Pour en savoir plus sur Flash, choisissez une autre leçon.
Flash calculant ensuite les valeurs intermédiaires. L’origine du terme interpolation (inter) se retrouve dans « intermédiaire ». Un exemple simple d’interpolation consisterait à placer un graphique dans la partie supérieure de la scène, d’ajouter ensuite plusieurs images au scénario et de déplacer le graphique dans la partie inférieure de la scène dans la dernière image. Puisque Flash remplit les valeurs de position des images intermédiaires, vous pouvez créer facilement une animation de graphique fluide, partant de la partie supérieure de la scène jusqu’à la partie inférieure. Flash Professionnel vous permet également de contrôler avec précision la façon de calculer des valeurs de propriété interpolées afin de pouvoir créer facilement des animations plus complexes. A l’aide de la fenêtre Accélération/Décélération personnalisée, vous pouvez déterminer la vitesse de modification des propriétés au début, au milieu et à la fin de vos animations. Utilisez cette fenêtre intelligemment pour obtenir des résultats visuels convaincants. Ce didacticiel vous guidera à travers la procédure de création d’une animation en interpolant différentes propriétés d’un graphique à l’aide de diverses commandes d’interpolation dans l’environnement de programmation de Flash. Vous allez tout d’abord vous familiariser avec l’animation finale, puis vous ouvrirez un document Flash de démarrage avant de publier le document pour le web. Le didacticiel dure environ 20 minutes.
Dans ce didacticiel, vous accomplirez les tâches suivantes : Etude du fichier FLA final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Ouverture du document de démarrage . . . . . . . . . . . . . . . . . . 175 Créer une interpolation de mouvement . . . . . . . . . . . . . . . . . . 175 Utiliser des contrôles d’accélération . . . . . . . . . . . . . . . . . . . . 178 Les sections suivantes présentent les étapes à suivre pour créer vous-même l’application.
Il est recommandé d’analyser le document de programmation final, représenté par un fichier FLA, pour découvrir et comprendre comment l’auteur a conçu l’animation que vous êtes sur le point de créer. Les fichiers pour ce didacticiel se trouvent dans le dossier Flash application/ Samples and Tutorials. Pour de nombreux utilisateurs, notamment dans le cadre de paramètres de formation, ce dossier est en lecture seule. Avant de continuer avec ce didacticiel, vous devez copier la totalité du dossier du didacticiel Accélération des animations dans l’emplacement accessible en écriture de votre choix. Sur la plupart des ordinateurs, ce dossier se trouve aux emplacements suivants : ■
8\Samples and Tutorials\Tutorial Assets\Creating Graphics\Animation Le fichier final du didacticiel est affiché dans l’environnement de programmation de Flash.
Le fichier FLA final contient le graphique d’une boule de billard n° 8 sur fond vert et présentant une ombre sous cette dernière. Cette illustration a l’aspect suivant :
Pour fermer le document, choisissez Fichier > Fermer. Si vous préférez conserver le fichier final ouvert comme référence lors de l’utilisation du fichier de démarrage, ne le modifiez pas ni n’enregistrez aucune modification éventuelle.
Maintenant que le fichier final vous a été présenté, vous pouvez créer votre propre document Flash. Vous allez d’abord ouvrir un fichier de démarrage contenant des graphiques auxquels vous appliquerez des animations. Dans le dossier Accélération des animations, ouvrez le fichier appelé tween_start.fla. Il contient des graphiques que vous allez utiliser pour créer l’animation.
Pour animer le graphique de la boule n° 8 au fil du temps, vous devez insérer suffisamment d’images dans le scénario pour augmenter le temps entre le début et la fin du fichier FLA. Dans cette section, vous allez ajouter des images au scénario puis créer une interpolation de mouvement dans ces images.
Pour ajouter les images nécessaires au scénario : 1.
Option Mouvement sélectionnée dans le menu Interpolation de l’inspecteur des propriétés 6.
La boule n° 8 se déplace vers le bas vers le graphique de l’ombre.
à ses commandes d’accélération personnalisées.
Vous obtiendrez ainsi le taux d’accélération maximum, ce qui entraîne un début lent du mouvement de la boule qui s’accélère ensuite.
Vous obtiendrez ainsi le taux de décélération maximum, ce qui entraîne un début très rapide du mouvement de la boule qui décélère ensuite.
Flash offre également un contrôle plus précis de la méthode d’utilisation de l’accélération et vous permet d’ajouter une accélération au milieu d’une interpolation. Dans la section suivante, vous allez appliquer des paramètres d’accélération personnalisés à l’animation au lieu d’utiliser le curseur Accélération.
Cliquer sur la ligne diagonale Accélération/Décélération 4.
Point de contrôle montrant le déplacement des poignées du sommet sur le point 6.
(Macintosh), sur la courbe en haut du graphique à hauteur de l’image 32 et faites glisser le nouveau point vers le bas jusqu’à atteindre approximativement la valeur 76 % sur l’axe vertical.
(Macintosh) sur la courbe au niveau de l’Image 44 et faites-la glisser jusqu’à la ligne 100 %.
Ouverture du document de démarrage 183
Accélération/Décélération personnalisée. Examinez l’aperçu en direct de votre animation sur la scène.
Dans cette section, vous allez créer une interpolation de la valeur alpha du graphique de l’ombre qui apparaît sous la boule n° 8. Les changements d’ombre devant correspondre à la vitesse et être synchronisés avec les rebonds de la boule n° 8, vous utiliserez la même courbe d’accélération que celle créée à la section précédente.
Ouverture du document de démarrage 185
la boîte de dialogue Accélération/Décélération personnalisée, appuyez sur Ctrl-C (Windows) ou Commande-C (Macintosh) pour copier la courbe d’accélération appliquée à l’interpolation de la boule.
le scénario, cliquez sur le calque Ombre pour sélectionner toutes les images de ce calque.
la boîte de dialogue Accélération/Décélération personnalisée, appuyez sur Ctrl+V (Windows) ou Commande+V (Macintosh) pour coller la courbe d’accélération de l’interpolation de la boule.
Test de l’application 187
Un dégradé représente une zone d’un graphique où une couleur se transforme en une autre. Flash peut créer deux types principaux de dégradés : linéaire et radial. Les dégradés linéaires changent de couleur le long d’un seul axe, horizontal ou vertical. Les dégradés radiaux changent de couleur en s’étendant vers l’extérieur à partir d’un point focal. Vous pouvez définir la direction du dégradé, ses couleurs, l’emplacement du point focal et de nombreuses autres propriétés des dégradés. Les illustrations suivantes montrent deux types de dégradés :
Ce didacticiel vous guide à travers les étapes à suivre pour créer une illustration utilisant plusieurs types de dégradés.
Avant de suivre ce didacticiel, vous devriez lire le Chapitre 2, Bases de Flash dans le guide Bien démarrer avec Flash. Dans ce didacticiel, vous accomplirez les tâches suivantes : Etude du fichier FLA final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 Ouvrir le document de démarrage . . . . . . . . . . . . . . . . . . . . . . . . . . 193 Appliquer un dégradé linéaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 Créer un dégradé radial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196 Les sections suivantes présentent les étapes à suivre pour créer vous-même l’application.
Il est recommandé d’analyser le document de programmation final, représenté par un fichier FLA, pour découvrir et comprendre comment l’auteur a conçu l’illustration que vous êtes sur le point de créer. Les fichiers pour ce didacticiel se trouvent dans le dossier Flash application/ Samples and Tutorials. Pour de nombreux utilisateurs, en particulier ceux suivant des séminaires, ce dossier n’est accessible qu’en lecture. Avant de continuer avec ce didacticiel, vous devez copier la totalité du dossier du didacticiel sur les dégradés dans l’emplacement accessible en écriture de votre choix. Sur la plupart des ordinateurs, ce dossier se trouve aux emplacements suivants : ■
8\Samples and Tutorials\Tutorial Assets\Creating Graphics\Gradients. Si vous préférez conserver le fichier final ouvert comme référence lors de l’utilisation du fichier de démarrage, ne le modifiez pas ni n’enregistrez aucune modification éventuelle.
Maintenant que le fichier final vous a été présenté, vous pouvez créer votre propre document Flash. Vous allez d’abord ouvrir un fichier de démarrage contenant des graphiques auxquels vous appliquerez des dégradés. 1.
Cliquez sur l’outil Sélection dans le panneau Outils.
196 Création de graphiques : Application de dégradés
faites-la glisser à proximité du
sur la scène pour désélectionner le groupe de la boule
Vous allez ensuite ajouter un dégradé au cercle blanc sur le dessin de la boule n° 8. 1.
Mélangeur 13. Dans cette section, vous allez appliquer un dégradé linéaire. 1.
Un mode de fondu est une méthode permettant de faire interagir les couleurs d’un objet graphique avec celles d’autres objets graphiques situés sous ce dernier. Par exemple, l’utilisation du mode de fondu Eclaircir vous permet d’éclaircir en différents degrés les parties d’un objet à afficher en fonction des couleurs des objets situés sous ce dernier. Si ce n’est déjà fait, nous vous recommandons, avant de suivre ce didacticiel, de lire le Chapitre 2, Bases de Flash, dans le guide Bien démarrer avec Flash. Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l’adresse http://www.macromedia.com/go/fl_documentation_fr. Dans ce didacticiel, vous accomplirez les tâches suivantes : Examiner votre tâche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 Ouvrir le document de démarrage . . . . . . . . . . . . . . . . . . . . . . . . . .207 Appliquer des filtres et des fondus . . . . . . . . . . . . . . . . . . . . . . . . . .207
Dans les sections suivantes, vous allez appliquer des fondus et des filtres aux clips 9ball et CueBall trouvés dans le panneau Bibliothèque.
La première tâche que vous devez exécuter dans le fichier de démarrage est d’appliquer un effet de fondu à une occurrence du clip contours de 9ball afin de combiner ses couleurs aux couleurs du clip 9ball. Cela donne un aspect brillant réaliste à la boule de billard. 1.
La dernière étape consiste à utiliser un effet de couleur et un filtre pour que la boule blanche semble être située à l’arrière-plan de la scène. 1.
Professional uniquement), du guide Utilisation de Flash.
A l’issue de cette leçon, pensez à essayer les autres options de texte décrites dans la section « Utilisation du texte » du guide Utilisation de Flash. Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l’adresse http://www.macromedia.com/go/fl_documentation_fr. Dans ce didacticiel, vous accomplirez les tâches suivantes : Configurer l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Créer un bloc de texte de taille variable. . . . . . . . . . . . . . . . . . 213 Créer un bloc de texte de taille fixe. . . . . . . . . . . . . . . . . . . . . . 214 Modifier du texte et des attributs de police. . . . . . . . . . . . . . . 215 Sélectionner des polices de périphérique. . . . . . . . . . . . . . . . 215 Ajouter un champ de saisie de texte . . . . . . . . . . . . . . . . . . . . 216 Copier un champ de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .217 Attribuer des noms d’occurrence aux champs de texte . . . .217
Vous pouvez définir la taille d’un bloc de texte ou utiliser un bloc dont la taille s’adaptera au texte saisi. Pour commencer cette leçon, vous allez simplement ajouter du texte à un document. 1.
Vous pouvez non seulement créer une ligne de texte de taille variable, mais aussi un bloc de texte de taille fixe. Dans un bloc de texte de taille fixe, le texte est automatiquement renvoyé à la ligne. Vous allez à présent créer un bloc de texte statique de dimensions fixes. 1.
Lorsque vous sélectionnez le texte, l’inspecteur des propriétés affiche les options de formatage de texte standard. Vous pouvez utiliser l’inspecteur des propriétés pour modifier la police et la taille d’un objet texte sélectionné. 1.
à la police de périphérique spécifiée. Les polices de périphériques sont disponibles avec du texte statique uniquement. Vous devez spécifier que le texte sélectionné utilise des polices de périphérique. 1.
Vous pouvez utiliser un champ de saisie de texte pour que les utilisateurs puissent interagir avec votre application Flash. Par exemple, les champs de saisie de texte permettent de créer un formulaire très simplement. Dans une autre leçon (sélectionnez Aide > Didacticiels Flash > ActionScript : Créer un formulaire avec une logique conditionnelle et envoyer des données), vous apprendrez à utiliser un champ de saisie de texte pour envoyer des données de Flash vers un serveur. Vous allez maintenant ajouter un champ dans lequel les utilisateurs vont entrer leur prénom. 1.
L’option Ligne simple affiche le texte sur une seule ligne. L’option Afficher la bordure autour du texte affiche les limites du champ de texte à l’aide d’une bordure.
Pour dupliquer un objet rapidement sur la scène, maintenez la touche Alt enfoncée et faites glisser l’objet. L’objet original reste à sa place et vous pouvez déplacer l’objet dupliqué. Vous allez utiliser la touche Alt pour créer deux copies du champ de saisie de texte que vous avez créé. 1.
TextField ActionScript, auquel vous pouvez appliquer des propriétés et des méthodes. Il est recommandé de nommer les occurrences de champ de saisie de sorte que les autres personnes travaillant sur le projet puissent se référer à l’occurrence dans ActionScript. 1.
Nom de l’occurrence.
Nom de l’occurrence.
Nom de l’occurrence.
Un texte dynamique peut afficher du texte provenant de sources externes à l’exécution. Vous allez maintenant créer un champ de texte dynamique relié à un fichier texte externe. Le fichier texte externe que vous allez utiliser s’appelle safetyFeatures.txt. Il est situé dans le même dossier que le fichier FLA de la leçon. Le fichier FLA contient déjà le fichier ActionScript qui affiche le texte lorsque vous testez ou publiez le document. 1.
Sélection, cliquez dans l’espace de travail et désélectionnez tous les objets.
Pour les attributs de texte, définissez le type de texte sur Verdana avec une taille de police 6. Pour Type de ligne, sélectionnez Multiligne pour que le texte soit renvoyé à la ligne. Cliquez sur la zone de couleur de texte et sélectionnez une nuance de gris foncé. Sélectionnez l’attribut de paragraphe Aligner à gauche s’il n’est pas déjà sélectionné.
Spécifier des options de format La boîte de dialogue Options de format permet de spécifier les paramètres de marge et de retrait du texte. 1.
Vous pouvez afficher le code ActionScript qui charge le texte du fichier texte externe dans le champ dynamique. Ce script utilise des actions LoadVars pour charger le contenu du fichier safetyfeatures.txt dans le champ newFeatures. 1.
SWF (une version comprimée d’un fichier .fla de Flash avec l’extension .swf ) ou à une application. Ce mode convient parfaitement aux utilisateurs qui ne maîtrisent pas encore l’écriture complète de scripts ou qui, plus simplement, apprécient l’aide apportée par cet outil. Utilisé en combinaison avec le panneau Actions, le mode Assistant de script vous invite à sélectionner des options et à saisir des paramètres. Par exemple, au lieu d’écrire votre propre script, vous pouvez sélectionner un élément de langage dans la boîte à outils Actions (ou la commande Ajouter (+) de la barre d’outils), le faire glisser vers la fenêtre de script, puis compléter le script en vous laissant guider par le mode Assistant de script. Ce didacticiel vous guide à travers les étapes d’utilisation du mode Assistant de script afin d’ajouter une fonctionnalité d’interactivité à une application Flash. Vous ajouterez du code ActionScript à un objet (bouton) et à des images dans le scénario. Ce didacticiel présente également les meilleures techniques pour ajouter des scripts à un document Flash. Vous allez tout d’abord vous familiariser avec l’application Flash finale, puis vous ouvrirez un document Flash de démarrage avant de tester l’interactivité que vous aurez ajoutée à une application à l’aide du mode Assistant de script. Le didacticiel dure environ 20 minutes. Avant de suivre ce didacticiel, lisez le Chapitre 2, Bases de Flash dans le guide Bien démarrer avec Flash.
Les sections suivantes présentent les étapes à suivre pour créer vous-même l’application.
Il est utile d’analyser le fichier FLA correspondant au document de création final pour comprendre comment l’auteur a conçu l’application. Vous devriez analyser les types de script qui ont été employés pour ajouter la fonctionnalité d’interactivité, et comprendre ce que vous allez créer. Les fichiers pour ce didacticiel se trouvent dans le dossier Samples and Tutorials du dossier d’installation de Flash. Pour de nombreux utilisateurs, en particulier ceux suivant des séminaires, ce dossier n’est accessible qu’en lecture. Avant de suivre le didacticiel, copiez tout le dossier Script Assist du didacticiel à un emplacement de votre choix accessible en écriture. Sur la plupart des ordinateurs, vous trouverez le dossier Script Assist du didacticiel aux emplacements suivants : ■
8\Samples and Tutorials\Tutorial Assets\ActionScript\Script Assist. Si vous préférez conserver le fichier final ouvert comme référence lors de l’utilisation du fichier de démarrage, ne le modifiez pas ni n’enregistrez aucune modification éventuelle.
Maintenant que le fichier final vous a été présenté, vous pouvez créer votre propre document Flash. Vous allez d’abord ouvrir un fichier de démarrage contenant les éléments auxquels vous allez ajouter du code ActionScript à l’aide du mode Assistant de script. Pour ouvrir le document de démarrage : 1.
Accueil dans l’exemple d’application, le titre Accueil s’affiche dans le clip Titre.
1. La fenêtre Assistant de script est vide si aucune fonction n’est sélectionnée. Au début, la partie Assistant de script du panneau Actions est vide. Le mode Assistant de script vous demande de sélectionner des options et de définir des paramètres pour les fonctions à ajouter au bouton sélectionné. Les paramètres sont affichés lorsque vous ajoutez une fonction de ActionScript.
Ajout d’un script à un bouton à l’aide du mode Assistant de script 229
L’événement release sert à déclencher l’action du script lorsque l’utilisateur clique sur Accueil. 7.
La fonction goto() est ajoutée en tant qu’action du gestionnaire d’événements on. En d’autres termes, l’action goto() est exécutée après que le bouton Accueil a été activé (le gestionnaire on), puis relâché (l’événement release). En cas de clic sur le bouton Accueil, le clip devrait se déplacer à l’image Accueil du scénario et s’y arrêter. Pour cela, vous modifiez à l’aide du mode Assistant de script les paramètres par défaut de la fonction goto(). 8.
(Atteindre et Arrêter).
Les modifications effectuées à l’aide du mode Assistant de script sont affichées dans l’éditeur ActionScript. Vous venez de créer un script sans avoir tapé de codes dans l’éditeur ActionScript. Lorsque vous testerez l’application, un clic sur le bouton Accueil affichera le titre « Accueil » dans le clip Titre, indiquant que l’image Accueil est actuellement affichée.
Vous pourriez répéter ce processus pour les boutons A propos, Produits et Contacts. Toutefois pour ces boutons, vous allez employer une méthode différente et préférée pour créer des scripts. Dans chaque cas, à chaque clic sur l’un des boutons, vous souhaitez afficher les images correspondantes sur le scénario ; par conséquent, vous définirez comme image cible de la fonction GotoAndStop() les images A propos, Produits et Contacts, comme vous venez de le faire pour le bouton Accueil.
Au lieu d’ajouter des scripts à des objets particuliers et d’agir directement sur des objets, mais aussi de répartir du code en de nombreux endroits dans votre document Flash, placez plutôt les scripts dans une image dans le scénario. Cette section explique comment ajouter des scripts à un scénario. 1.
Actions. Insertion de fonctions dans le script à l’aide de la barre d’outils Actions Notez que le code placé dans un scénario se comporte de manière différente que le code placé sur des objets. Dans l’exemple précédent, vous avez dû déterminer l’objet cible pour le gestionnaire d’événements on(release). En effet, vous n’avez pas ajouté le script directement à l’objet, mais vous avez fait référence au script à partir du code dans le scénario. De plus, il utilise explicitement le mot-clé function pour déclarer une fonction. Vous apprendrez à utiliser le mode Assistant de script pour traiter ces points dans les étapes suivantes.
Ajout de scripts au scénario à l’aide du mode Assistant de script 233
Contacts comme vous l’avez fait pour le bouton A propos.
Sélectionnez le clip Titre dans le panneau Bibliothèque, son scénario s’affiche.
Désormais « Accueil » est affiché lorsque le clip Titre atteint la dernière image et que l’animation est terminée. C’est l’état initial de l’application après son chargement et avant que l’utilisateur clique sur l’un des boutons.
ActionScript est un langage de script orienté objet offrant un contrôle sur la lecture de votre contenu Flash. Au cours des leçons suivantes, vous verrez la manière dont ActionScript a évolué vers ActionScript 2.0 pour englober une série d’éléments de langage facilitant le développement de programmes orientés objet. Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l’adresse http://www.macromedia.com/go/fl_documentation_fr. Dans ce didacticiel, vous accomplirez les tâches suivantes : Configurer l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Créer l’occurrence d’un symbole . . . . . . . . . . . . . . . . . . . . . . . . . . . 241 Nommer les occurrences de boutons . . . . . . . . . . . . . . . . . . . . . . 242 Initialiser le document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 Déclenchement des conseils de code du guide Formation à ActionScript 2.0 dans Flash.
En utilisant le bon suffixe pour déclencher les conseils de code, vous allez fournir des noms d’occurrence à deux occurrences de boutons se trouvant déjà sur la scène. 1.
ActionScript à l’image voulue. Le panneau Actions contient une fenêtre de script (zone de texte vide) dans laquelle vous pouvez saisir directement du texte, une boîte à outils Actions, qui vous permet de sélectionner ActionScript afin de l’ajouter à votre script, et un navigateur de scripts qui fonctionne comme l’explorateur d’animations.
Tout au long de la programmation, veillez à enregistrer souvent votre animation.
ActionScript Tous les langages, qu’il s’agisse de langages informatiques ou du langage humain, sous quelque forme que ce soit, suivent des règles précises qui favorisent la compréhension. Ces règles représentent la syntaxe. Flash utilise la syntaxe par points, ce qui veut dire que le point (.) sert à relier les parties d’un script. Les autres éléments syntaxiques d’ActionScript incluent : ■
Si, au cours de la programmation, vous souhaitez en savoir plus sur le code ActionScript que vous êtes en train de saisir, vous pouvez sélectionner l’action dans la boîte à outils Actions ou dans la fenêtre de script et cliquer sur Référence. Le panneau Aide affiche des informations concernant l’action sélectionnée. 1.
La valeur visible apparaît dans le panneau Aide.
ActionScript Dans ActionScript, le texte situé après la double barre oblique (//) représente des commentaires dont Macromedia Flash Player ne tient pas compte. Les commentaires décrivent la fonctionnalité du script afin que d’autres développeurs puissent le comprendre, mais vous pouvez aussi vous servir des commentaires pour désactiver des sections de votre script au cours du débogage. Il est recommandé de toujours ajouter des commentaires explicatifs à vos scripts. ■
(Windows) ou sur Retour (Macintosh).
// Initialise le document pour masquer l’écran du clip. this.screen_mc._visible = false;
Dans ActionScript, une commande est appelée fonction. Une fonction est un script que vous pouvez rédiger une seule fois et réutiliser dans un document afin d’accomplir une tâche donnée. Vous allez rédiger une fonction qui fait apparaître (visible = true) le clip screen_mc lorsque l’utilisateur relâche le bouton de la souris. 1.
(y compris le commentaire, les accolades et le point-virgule). Copiez le texte selon la procédure habituelle, grâce au raccourci Ctrl+C (Windows) ou Commande+C (Macintosh).
// fonction pour afficher l’animation this.onButton_btn.onRelease = function(){ screen_mc._visible = true; }; // fonction pour masquer l’animation this.offButton_btn.onRelease = function(){ screen_mc._visible = false; Si elle est correcte, un message s’affiche et vous informe que le script ne contient pas d’erreurs. Si la syntaxe est incorrecte, un message vous en avertit : le panneau de sortie s’affiche et fournit des informations relatives à l’erreur. 2.
Vous pouvez tester votre contenu SWF tout au long de la programmation afin de confirmer que l’animation est lue correctement.
Félicitations, vous savez désormais rédiger des scripts avec ActionScript. En très peu de temps, vous avez appris à accomplir les tâches suivantes : ■
Dans ce didacticiel, vous accomplirez les tâches suivantes : Configurer l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . 252 Nommer les occurrences de boutons . . . . . . . . . . . . . . . . . . . 253 Ajouter une scène . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 Se déplacer entre les séquences . . . . . . . . . . . . . . . . . . . . . . . 254 Dans la partie inférieure droite de la scène, sélectionnez le bouton situé à gauche. Dans l’inspecteur des propriétés (Fenêtre > Propriétés > Propriétés), tapez atteindreSéquence_btn dans la zone de texte Nom de l’occurrence pour nommer l’occurrence du symbole.
Dans flash, les séquences vous permettent d’organiser votre document dans des sections discrètes pouvant contenir le contenu exclusif d’autres séquences. Vous allez créer et ajouter du contenu dans une nouvelle séquence. 1.
Vous ne voyez plus la séquence 1, seule la mention Séquence 2 apparaît désormais au-dessus de la scène. La scène est vide. Une fois le clip sélectionné, utilisez l’inspecteur des propriétés pour affecter à l’occurrence une coordonnée x de 200 et une coordonnée y de 15. Appuyez sur Entrée (Windows) ou sur Retour (Macintosh). Le clip se déplace vers les coordonnées spécifiées sur la scène.
Pour accéder à une séquence spécifique dans l’environnement auteur, sélectionnez-la dans le panneau Séquence. 1.
Séquence. Dans le scénario principal de la séquence 1, ajoutez un nouveau calque et nommez-le Actions.
Maintenant que la tête de lecture s’arrête sur l’Image 1, vous pouvez ajouter un code ActionScript permettant à l’utilisateur d’accéder à la séquence 2 lorsqu’il relâchera sa pression sur l’occurrence de bouton atteindreSéquence_btn. ■
// Ce script permet à l’utilisateur d’accéder à la séquence 2 lorsque l’occurrence de bouton atteindreSéquence_btn // est relâchée. goScene_btn.onRelease = function (){ gotoAndStop("Scene 2", 1); };
Séquence 1 La fonction que vous ajoutez au bouton dans la séquence 2, pour renvoyer l’utilisateur à la séquence 1, est similaire à la fonction créée pour acheminer l’utilisateur vers la séquence 2. 1.
Dans le scénario, créez un nouveau calque et nommez-le Actions.
// est relâchée. back_btn.onRelease = function (){ gotoAndStop("Scene 1", 1); };
Vous pouvez configurer votre document pour lire un clip au moment de l’exécution. La méthode attachMovie() vous permet d’associer l’occurrence d’un clip du panneau Bibliothèque à la scène, même si vous n’avez pas placé d’occurrence dans cette scène. Pour utiliser la méthode attachMovie(), vous devez exporter le symbole d’ActionScript et lui affecter un identificateur de liaison unique, différent du nom de l’occurrence. 1.
Vous allez maintenant utiliser la méthode attachMovie() pour charger le clip vidéo et affecter un nom d’occurrence au symbole. Etant donné que l’occurrence du symbole n’existe pas dans la scène, vous la nommer par programmation. 1.
// cette fonction lit trio_mc lorsque l’occurrence de bouton attacherAnimation_btn // est relâchée. attachMovie_btn.onRelease = function(){
En outre, même si vous n’avez pas placé d’occurrence du symbole MCTrio dans la scène, vous devez utiliser ActionScript pour créer un nom d’occurrence pour ce symbole. Le nom d’occurrence que vous devez spécifier est trio_mc.
Chaque occurrence de clip a son propre axe z (profondeur) déterminant l’ordre de compression d’un clip au sein de son fichier SWF ou son clip parent. Lorsque vous créez un nouveau clip à l’exécution à l’aide de la méthode attachMovie(), vous devez toujours spécifier une profondeur pour ce nouveau clip, sous forme de paramètre de méthode.
En plus, vous pouvez utiliser le Guide de référence du langage ActionScript 2.0 pour obtenir des informations sur ActionScript qui permet une gestion approfondie des fonctions ; getNextHighestDepth(), getDepth(), getInstanceAtDepth() sont des méthodes de la classe MovieClip. La classe DepthManager vous permet de gérer les affectations de profondeur relatives d’un clip.
Outre l’axe z pour le clip, vous devez spécifier les coordonnées x et y pour définir la position du clip dans la scène lors de l’exécution. ■
}; Dans le scénario, sélectionnez l’Image 1 du calque Actions. Dans la fenêtre de script, cliquez à la fin de la ligne de la fonction permettant à l’utilisateur d’accéder à la séquence 2 afin d’y placer le point d’insertion : gotoAndStop("Scene 2", 1);
// est relâchée. goScene_btn.onRelease = function() { gotoAndStop("Scene 2", 1); unloadMovie("trio_mc"); };
// Arrête la tête de lecture sur l’Image 1 stop(); // Ce script permet à l’utilisateur d’accéder à la séquence 2 lorsque l’occurrence de bouton atteindreSéquence_btn // est relâchée. goScene_btn.onRelease = function (){ gotoAndStop("Scene 2", 1); unloadMovie("trio_mc"); }; // Cette fonction lit trio_mc lorsque l’occurrence de bouton attacherAnimation_btn // est relâchée. attachMovie_btn.onRelease = function(){ Dans le panneau Bibiothèque, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur ping.mp3, puis sélectionnez Liaison dans le menu contextuel.
Flash > Tâches de base : Créer une application. Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l’adresse http://www.macromedia.com/go/fl_documentation_fr. Dans ce didacticiel, vous accomplirez les tâches suivantes : Configurer l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 Ajouter un champ de saisie de texte pour collecter les données de formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 Ajouter un bouton Envoyer au formulaire . . . . . . . . . . . . . . . . . . . 266 Ajouter un message d’erreur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 Ajouter un champ de saisie de texte pour collecter les données de formulaire Dans un premier temps, vous allez insérer un champ de texte dans lequel les utilisateurs pourront saisir des données. Vous nommerez ce champ de texte afin de pouvoir vous y référer ultérieurement, dans le code ActionScript de votre application Flash. 1.
à n’en sélectionner aucun.
Vérifiez que l’option Une seule ligne est sélectionnée dans le menu contextuel Type de ligne.
Ajouter un champ de saisie de texte pour collecter les données de formulaire 265
Le panneau Bibliothèque contient un symbole de bouton d’envoi (Submit button) que vous pouvez ajouter au formulaire. 1.
Bibliothèque) vers la scène et placez-le sur le guide SubmitURL.
Ajouter un message d’erreur Vous allez ajouter un message qui s’affichera si l’utilisateur clique sur le bouton Envoyer avant de saisir des données. 1.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur l’image sélectionnée, puis choisissez Insérer une image-clé vide dans le menu contextuel.
Bibliothèque vers le centre de la scène.
Dans le scénario, le calque Input Text étant sélectionné, ajoutez un nouveau calque que vous nommerez Actions.
Vous allez ajouter des étiquettes d’images afin de faciliter la navigation dans votre application Flash. 1.
Dans l’inspecteur des propriétés, tapez confirmation dans la zone de texte Etiquette de l’image. Appuyez sur Entrée ou Retour.
Envoyer ActionScript vous permet de configurer Flash pour comparer les informations et y réagir en fonction des critères spécifiés. Dans cet exemple, vous allez ajouter un code ActionScript afin que Flash exécute une action spécifique si l’utilisateur n’entre pas de données dans le champ de texte, et une autre action pour le cas où il renseigne le champ. 1.
Dans la fenêtre de script, placez le point d’insertion après le code stop();. Appuyez sur Entrée (Windows) ou sur Retour (Macintosh).
// Ajoute une logique conditionnelle pour le bouton Envoyer // qui valide l’entrée de l’utilisateur.
Dans le langage ActionScript, les lignes parallèles signifient ou.
Entrée ou sur Retour.
Appuyez sur Entrée ou Retour.
// Ajoute une logique conditionnelle pour le bouton Envoyer // qui valide l’entrée de l’utilisateur. this.submit_btn.onRelease = function(){ if (url_txt.text == null || url_txt.text ==””){ gotoAndStop("error"); } else { gotoAndStop("confirm") Dans la fenêtre de script, placez le point d’insertion devant la ligne gotoAndStop("confirmation") .
Configurer l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .276 En savoir plus sur les classes et les types d’objet . . . . . . . . . . . . .276 Créer un objet à partir d’une classe . . . . . . . . . . . . . . . . . . . . . . . . . 277 Créer une classe personnalisée . . . . . . . . . . . . . . . . . . . . . . . . . . . .279 Vous n’avez pas besoin des fichiers de démarrage pour cette leçon. Vous trouverez les fichiers terminés (handson1.fla, handson2.fla, handson3.fla, Product.as et Drag.as), qui sont des exemples de fichiers que vous allez créer dans cette leçon : ■
Une classe (ou type d’objet) s’apparente à un modèle. Un objet n’existe pas tant qu’il n’est pas créé ou instancié à partir d’une définition de classe. Un objet est une occurrence de classe. Les propriétés correspondent aux caractéristiques d’un objet. Par exemple, lorsque vous alignez des clips, vous modifiez les propriétés_x et _y de l’objet MovieClip. Une propriété est une variable associée à une classe. Une propriété peut être publique (public), ce qui signifie qu’elle est accessible en dehors de la classe, ou privée (private), ce qui signifie qu’elle est accessible uniquement à l’intérieur de la classe. En termes orientés objet, une méthode est un comportement ou une procédure pouvant agir sur l’objet. Prenons comme exemple la méthode throw() appliquée à une balle : la méthode connaît la taille et le poids de la balle. Une méthode connaît l’objet et toutes les propriétés qu’il contient et peut agir sur cet objet.
Vous allez créer une classe à l’aide d’outils visuels (la classe TextField) et de code (en utilisant la classe Date). 1.
Texte. La méthode getMonth() affiche le mois courant. La méthode getMonth() est indexée sur zéro, ce qui signifie que la numérotation démarre à zéro au lieu de un : le numéro affiché est donc inférieur de un par rapport au mois actuel.
R E MA R Q UE Un exemple de fichier terminé du document nouvellement créé, appelé handson1.fla, se trouve dans le dossier de vos fichiers terminés. Pour connaître le chemin, consultez Configurer l’espace de travail, page 276.
Bien qu’ActionScript comprenne de nombreuses classes d’objets (MovieClip, Color, etc.), il vous faudra à certains moments construire vos propres classes. Vous pourrez ainsi créer des objets en fonction d’un ensemble particulier de propriétés ou de méthodes. Pour créer une classe définissant chacun des nouveaux objets, vous créez un constructeur pour la classe d’objet personnalisée, puis des occurrences d’objet basées sur cette nouvelle classe, comme dans l’exemple suivant :
N’entrez pas ce script dans le fichier FLA de la leçon.
{ this.id = id; this.prodName = prodName; this.price = price; } N’entrez pas ce script dans le fichier FLA de la leçon.
{ // Déclaration de variables var id:Number var prodName:String var price:Number N’entrez pas ce script dans le fichier FLA de la leçon.
11); var monkeyBar:Product=new Product(2, "Monkey Bar", 10);
N’entrez pas ce script dans le fichier FLA de la leçon.
{ return name; } R EM A R QU E Un exemple de fichier terminé du document nouvellement créé, appelé handson2.fla, se trouve dans le dossier de vos fichiers terminés. Pour connaître le chemin, consultez Configurer l’espace de travail, page 276.
Le mot clé extends d’ActionScript 2.0 vous permet d’utiliser toutes les méthodes et propriétés d’une classe existante dans une nouvelle classe. Par exemple, si vous vouliez définir une classe appelée Drag ayant hérité de l’ensemble de la classe MovieClip, vous pourriez utiliser les éléments suivants : class Drag extends MovieClip {}
N’entrez pas ce script dans le fichier FLA de la leçon.
{ // constructeur function Drag () Contrôle enfoncée (Macintosh) sur la forme et choisissez Convertir en symbole dans le menu contextuel.
Choisissez Exporter pour ActionScript.
ActionScript 2.0. En quelques minutes vous avez appris à accomplir les tâches suivantes : ■
Macromedia (Flash Professionnel uniquement) Flash Professionnel 8. Ils n’ont pas été conçus pour des applications prêtes à être utilisées.
« Intégration de données » du manuel Utilisation de Flash (dans Flash, sélectionnez Aide > Utilisation de Flash).
Dans ce didacticiel, vous accomplirez les tâches suivantes : Connexion à un service web public . . . . . . . . . . . . . . . . . . . . . . . . 292 Création d’une interface utilisateur et liaison des composants avec le service Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Si vous avez des problèmes pour télécharger ou décomprimer les fichiers, reportez-vous à la note technique 13686 en www.macromedia.com/ support/general/ts/documents/downfiles.htm.
Le composant est désormais configuré et positionné sur la scène. Vous pouvez placer le composant n’importe où sur ou en dehors de la scène ; il est invisible lorsque vous exécutez l’application.
Vous allez désormais utiliser les composants pour créer une interface utilisateur simple qui vous permettra de sélectionner un produit, de cliquer sur un bouton et d’afficher un conseil aléatoire sur le produit. Vous créez cette application en reliant les composants de l’interface utilisateur sur la scène aux paramètres et aux résultats renvoyés par le service web Tips de Macromedia. 1.
WebService entre le service Web Tip de Macromedia Tip et le composant ComboBox, ce qui permet à l’utilisateur de choisir un produit et renvoie un conseil relatif au produit.
Le champ Lié à dans le panneau Inspecteur des composants
Vous allez maintenant lier le paramètre résultats dans le connecteur de service Web au composant TextArea sur la scène. Création d’une interface utilisateur et liaison des composants avec le service Web 297
Finalement, vous utiliserez un composant Button et la méthode trigger() pour déclencher le service. La méthode trigger vous permet d’afficher un conseil chaque fois que vous cliquez sur le bouton.
Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l’adresse http://www.macromedia.com/go/fl_documentation_fr. Dans ce didacticiel, vous accomplirez les tâches suivantes : Création de l’interface utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . 302 Modification des données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Vous allez commencer par créer une interface utilisateur pour afficher les informations du fichier XML.
DataSet Vous allez d’abord ajouter les composants gérant les données. 1.
Assurez-vous que votre ordinateur est connecté à Internet.
Pour plus d’informations sur la manière dont Flash traduit des documents XML en une représentation de schéma interne, reportezvous à Intégration des données (Flash Professionnel uniquement) dans le guide Utilisation de Flash.
7. Utilisation de Flash.
Flash (dans Flash, choisissez Aide > Utilisation de Flash). 10. Sélectionnez
Boolean, ces options spécifient les chaînes indiquant des valeurs true ou false. 11.
(vraie) dans le champ Strings That Mean True et entrez false (faux) dans le champ Strings That Mean False.
Le type de données du champ a été automatiquement défini sur entier. Ceci s’explique du fait que l’exemple de champ XML ne contenait que des valeurs entières pour cet attribut.
Il applique les paramètres que vous avez choisis lors de la copie des données de manière que le composant DataSet reçoive les champs d’ActionScript Date, Booléen et Numérique pour les attributs @date, @billable et @duration. Vous allez maintenant créer des champs pour le composant DataSet qui correspondent à ceux du composant XMLConnector. 21. Sur
23.Procédez de la même manière pour créer les nouveaux champs suivants : ■
Formatter (formateur) dans l’inspecteur de composants et choisissez Date dans le menu déroulant.
Formatter Options (options du formateur).
Vous allez désormais ajouter des composants pour afficher les données. 1.
Déclencher une source de données, sélectionnez le composant timeInfo_con et cliquez sur OK.
20.Exécutez Les données XML sont récupérées, converties et chargées dans le composant DataSet. La liaison entre les composants DataSet et DataGrid copie les données dans la grille afin de les afficher.
Vous allez maintenant modifier l’application afin de pouvoir modifier les données au moyen du composant DataGrid. 1.
Paramètres de l’inspecteur des composants.
XUpdateResolver est le mieux adapté pour mettre à jour une source XML car il permet de générer des instructions XUpdate qui seront envoyées au serveur afin de mettre à jour les données. Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l’adresse http://www.macromedia.com/go/fl_documentation_fr. Dans ce didacticiel, vous accomplirez les tâches suivantes : Mise à jour de la feuille de temps . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
Mise à jour de la feuille de temps Vous allez désormais établir les liaisons permettant de mettre à jour la feuille de temps. 1.
Intégration des données : Utilisation de XML pour une feuille de temps (Flash Professionnel uniquement).
à bien cette tâche.
l’onglet Liaisons de l’inspecteur de composants, double-cliquez sur la propriété Lié à.
XUpdateResolver afin de pouvoir le manipuler avant de l’envoyer au serveur.
DeltaPacket qui doit être envoyée au serveur.
Ces informations permettent au serveur d’identifier cette opération de mise à jour de façon unique. Le serveur peut alors générer un paquet de résultats que les composants XUpdateResolver et DataSet utilisent pour mettre à jour les données du client modifiées depuis le serveur.
Notice Facile