CREER UNE ANIMATION DE BASE DANS DIRECTOR ADOBE DIRECTOR 11.0 2 Créer une animation élémentaire Création de votre première animation élémentaire Ce didacticiel explique, pas à pas, comment créer votre première animation dans Director®. Si vous débutez dans Director, suivez les étapes décrites dans ce didacticiel pour apprendre de manière pratique comment créer une animation interactive simple, enrichie de contenu audio et vidéo. Cette animation est destinée à illustrer les possibilités offertes par Director, plutôt qu'à simuler un projet Director complet. Ce que vous apprendrez dans ce didacticiel... Ce didacticiel présente les compétences de base nécessaires pour créer une animation Director. Par exemple : • Définition des propriétés d'une animation • Importation des acteurs dans Director • Placement d'acteurs sur la scène et dans le scénario pour créer des images-objets, qui sont des copies des acteurs • Animation d'images-objets • Création de boutons • Programmation dans Lingo pour ajouter une dimension interactive • Contrôle du contenu vidéo et audio • Publication d'une animation sur Internet Préparation en vue de la création des séquences de l'animation Avant de commencer à créer des séquences, vous vous familiariserez avec l'aspect que doit prendre l'animation et vous préparerez la scène. Consulter l'animation terminée Commencez par consulter la version finalisée de l'animation créée dans le didacticiel pour avoir une idée des résultats que vous devriez obtenir. 1 Lancez Director. 2 Choisissez Fichier > Ouvrir. 3 Dans le dossier de l'application Director, ouvrez Tutorials/Basics/Finished et cliquez deux fois sur le fichier Basic_finished.dir. 4 Si des fenêtres empiètent sur la scène, faites-les glisser en dehors de celle-ci. 5 Pour lire l'animation, cliquez sur le bouton Lire au bas de la scène. Lire Arrêter Rembobin Volume ADOBE DIRECTOR 11.0 3 Créer une animation élémentaire 6 Utilisez les boutons de l'animation pour passer d'une séquence à une autre et pour contrôler la lecture du clip vidéo. L'animation se compose de trois séquences. La première est une séquence de titre qui permet d'accéder aux deux autres. La deuxième est l'animation d'un pneu qui rebondit. La troisième contient une vidéo numérique et des boutons pour la contrôler. Chacune de ces séquences contient également des boutons de navigation. 7 Lorsque vous avez terminé de lire l'animation, cliquez sur le bouton Arrêter au bas de la scène. Ouvrir l'animation Pour démarrer le didacticiel, ouvrez un fichier Director partiellement achevé. 1 Choisissez Fichier > Ouvrir. 2 Dans le dossier de l'application Director, ouvrez Tutorials/Basics/Start et cliquez deux fois sur le fichier Basic_start.dir. Remarque : L'ouverture de ce fichier entraîne la fermeture du fichier Basic_finished.dir par Director. Si vous avez apporté des modifications à ce fichier, ne les enregistrez pas. 3 Choisissez Fichier > Tout enregistrer. 4 Indiquez My_Basic_start comme nom du fichier. Enregistrez l'animation dans le dossier Start. La création d'une copie de ce fichier vous permet (ou à d'autres utilisateurs) de reprendre le didacticiel au tout début avec le fichier Basic_start.dir. Configurer l'animation Vous pouvez maintenant organiser votre espace de travail et définir les propriétés de votre animation, telles que la taille et la couleur de la scène, mais aussi le nombre de pistes présentes dans le scénario. Au cours du processus de création, vous pouvez observer vos animations Director sur la scène. Vous pouvez définir la taille et la couleur de la fenêtre Scène. 1 Sélectionnez Fenêtre > Jeux de panneaux > Par défaut pour afficher l'espace de travail par défaut. 2 Si l'Inspecteur des propriétés n'est pas affiché, choisissez Fenêtre > Inspecteur des propriétés. 3 Dans l'Inspecteur des propriétés, cliquez sur l'onglet Animation. Si l'Inspecteur des propriétés n'est pas affiché en mode graphique comme illustré ci-dessous, cliquez sur le bouton Affichage sous forme de liste pour passer en mode graphique. Pour afficher le nom des boutons (par exemple le bouton Affichage sous forme de liste), positionnez le pointeur de la souris sur le bouton. Le nom du bouton s'affiche dans une boîte flottante située en regard du bouton et disparaît lorsque vous retirez la souris. Bouton Affichage sous forme de liste Flèche Dimensions de la scène 4 Cliquez sur la flèche Dimensions de la scène, puis sélectionnez 500 x 330. ADOBE DIRECTOR 11.0 4 Créer une animation élémentaire 5 La taille de la scène augmente alors. 6 Si le scénario n'est pas ouvert, choisissez Fenêtre > Scénario. 7 Dans l'inspecteur des propriétés, tapez 50 dans la zone de texte Pistes et appuyez sur Entrée (Windows) ou Retour (Macintosh), puis cliquez sur OK dans la boîte de dialogue qui s'affiche. Le nombre de pistes du scénario passe alors de 150 à 50 et la taille du fichier de l'animation diminue. Remarque : Sous Windows, la touche Entrée du pavé numérique lance la lecture de l'animation. Veillez donc à utiliser la touche Entrée du clavier alphanumérique, et non du pavé numérique, pour entrer des informations dans Director. 8 Dans l'Inspecteur des propriétés, cliquez sur le bouton Couleur et sélectionnez gris foncé dans le nuancier de couleur. Bouton Couleur 9 Choisissez Fichier > Enregistrer. Remarque : Veillez à régulièrement enregistrer votre travail au fur et à mesure de l'apprentissage. Afficher les acteurs de l'animation Pour créer une animation Director, vous avez besoin d'acteurs. Les acteurs sont les objets qui s'affichent sur la scène et dans le scénario. Il peut s'agir d'éléments texte, graphique, audio et vidéo, ou de comportements de programmation. L'animation en cours de création dans ce didacticiel se compose de trois séquences. Certains acteurs apparaissent dans plus d'une séquence, alors que d'autres se limitent à une seule. Pour commencer, accédez à la fenêtre Distribution pour vérifier l'ensemble de médias actuel. Vous allez ensuite ajouter de nouveaux acteurs. Pour ajouter des acteurs à une animation Director, vous devez les créer dans le programme ou importer les fichiers correspondants à partir d'autres applications. 1 Si la fenêtre Distribution n'est pas déjà ouverte, choisissez Fenêtre > Distribution. La fenêtre Distribution offre deux modes d'affichage : sous forme de liste ou de miniatures. En mode d'affichage sous forme de liste, vous pouvez trier les acteurs par nom, numéro, date de modification, type et autres critères. Le mode d'affichage sous forme de miniatures vous permet d'afficher une miniature de chaque acteur. Dans ce mode, les acteurs sont systématiquement classés en ordre numérique. Dans le cadre de ce didacticiel, vous utiliserez le mode d'affichage sous forme de miniatures. Si le mode d'affichage sous forme de liste est activé dans la fenêtre Distribution, vous devrez passer en mode d'affichage sous forme de miniatures. ADOBE DIRECTOR 11.0 5 Créer une animation élémentaire 2 Pour passer du mode d'affichage sous forme de liste au mode d'affichage sous forme de miniatures, cliquez sur le bouton Style d'affichage de la distribution dans l'angle supérieur gauche de la fenêtre Distribution. Style d'affichage de la distribution La fenêtre Distribution répertorie les acteurs que vous pouvez utiliser dans votre animation. Le premier est un acteur texte. Il contient le texte « Trio Motor Company ». La miniature de l'acteur texte affichée dans la fenêtre Distribution contient une petite icône représentant la lettre A dans son angle inférieur droit. Il s'agit de l'icône illustrant le type d'acteur ; dans ce cas, l'icône A indique qu'il s'agit d'un acteur texte. Le deuxième acteur est un bouton. Des fonctionnalités spéciales sont intégrées aux acteurs bouton, un changement de couleur lors de leur sélection par exemple, pour leur affecter le comportement attendu d'un bouton par la majorité des utilisateurs. Ce bouton contient le texte « Animation ». Son icône de type d'acteur a la forme d'un petit bouton carré. La troisième miniature d'acteur est vide. Vous ajouterez un acteur à cette miniature par la suite. Le quatrième acteur est une image bitmap. Son icône de type d'acteur est un pinceau. Les neuvième, dixième et onzième miniatures d'acteur contiennent des bitmaps que vous utiliserez en tant que boutons personnalisés. L'utilisation d'une image bitmap vous permet de contrôler l'apparence d'un bouton, sans fournir toutefois les fonctionnalités intégrées du type d'acteur bouton de Director. Toutefois, vous pouvez ajouter ses fonctions au moyen de scripts, à l'aide du langage de programmation de Director appelé Lingo ou de la syntaxe JavaScript. Dans ce didacticiel, vous utiliserez Lingo pour ajouter ces fonctions. Création de la première séquence avec du texte et une image Pour créer une séquence dans Director, il est nécessaire de définir ou d'importer ses acteurs et de placer les imagesobjets correspondantes sur la scène. Les images-objets sont des objets conçus pour contrôler le moment, l'endroit et la façon dont les acteurs apparaissent dans une animation. Vous pouvez créer des images-objets en plaçant les acteurs sur la scène ou dans le scénario. Pour créer la première séquence de votre animation, vous devrez placer les imagesobjets de l'acteur TexteDeTitre et des deux boutons sur la scène. L'un des boutons figure déjà dans la distribution ; vous allez créer le second. ADOBE DIRECTOR 11.0 6 Créer une animation élémentaire Modifier un acteur texte Le premier acteur que vous allez utiliser dans votre animation est l'acteur texte contenant l'expression « Trio Motor Company ». Vous allez modifier le texte pour lui donner une apparence graphique plus attractive. 1 Dans la fenêtre Distribution, cliquez deux fois sur l'acteur texte dans la miniature 1. La fenêtre Texte s'ouvre. Nom de l'acteur Taille Italique Gras La fenêtre Texte permet de modifier les acteurs texte. Vous vous apercevrez qu'une fenêtre est associée à la majorité des types d'acteurs de Director pour vous permettre de visualiser et de modifier les acteurs. Remarque : Vous vous rendrez compte, en suivant ce didacticiel, qu'il est parfois pratique de pouvoir annuler une modification effectuée. Pour annuler, sélectionnez Edition > Annuler. Inversement, vous pouvez rétablir ce que vous avez annulé en sélectionnant Edition > Répéter. 2 Sélectionnez Edition > Tout sélectionner. Le bloc de texte est alors intégralement sélectionné. ADOBE DIRECTOR 11.0 7 Créer une animation élémentaire 3 Cliquez sur le bouton Gras et sur le bouton Italique. Le texte sélectionné passe du style standard au style gras-italique. 4 Donnez un nom à l'acteur texte. Cliquez sur la zone de texte Nom de l'acteur en haut de la fenêtre. Saisissez ensuite TexteDeTitre et appuyez sur Entrée (Windows) ou sur Retour (Macintosh). 5 Fermez la fenêtre Texte et enregistrez votre animation. Ajouter des images-objets sur la scène Pour commencer la construction de la séquence, faites glisser les acteurs TexteDeTitre, bouton et bitmap de la fenêtre Distribution sur la scène ou le scénario. La première séquence devant avoir lieu au début de l'animation, vous allez placer les acteurs au début du scénario. Le scénario fait l'objet d'une description détaillée dans la suite de ce didacticiel. Cliquez sur le bouton Rembobiner au bas de la scène. Ainsi, les acteurs placés sur la scène figurent dans la première image du scénario, c'est-à-dire au tout début de votre animation. 1 2 Dans la fenêtre Distribution, cliquez sur l'acteur TexteDeTitre et faites-le glisser vers un emplacement quelconque sur la scène pour créer une image-objet à partir de celui-ci. 3 L'arrière-plan de la nouvelle image-objet texte est blanc. 4 Cliquez sur la nouvelle image-objet de texte sur la scène pour la sélectionner. 5 Dans l'onglet Image-objet de l'Inspecteur des propriétés, procédez comme suit : a Dans la zone Encre, sélectionnez Fond transparent. Les encres contrôlent l'apparence chromatique des images-objets sur la scène. L'encre Fond transparent rend l'arrière-plan de l'image-objet totalement transparent. ADOBE DIRECTOR 11.0 8 Créer une animation élémentaire b Cliquez sur le nuancier de couleurs Couleur du premier plan, puis sélectionnez blanc. c Dans la zone de texte X, tapez 15. Dans la zone de texte Y, tapez 15 et appuyez sur Entrée (Windows) ou sur Retour (Macintosh). Le texte est alors positionné sur la scène d'après des coordonnées précises. Ajouter des images-objets dans le scénario Lorsque vous positionnez un acteur sur la scène, l'image-objet est ajouté à la scène mais aussi au scénario. Vous pouvez également positionner des acteurs dans le scénario. Lorsque vous positionnez un acteur dans le scénario, l'image-objet est également ajoutée à la scène. 1 Cliquez sur l'acteur Trio dans la miniature 6. 2 Faites glisser l'acteur Trio dans la fenêtre Scénario de sorte à ce qu'il remplisse la piste 2, juste au-dessous de l'image-objet TitreDeTexte. Assurez-vous que l'image-objet commence à l'image 1 du scénario. En faisant glisser un acteur dans le scénario, vous centrez l'image-objet sur la scène. ADOBE DIRECTOR 11.0 9 Créer une animation élémentaire Ajouter un bouton existant à une scène Outre le texte du titre, la première séquence doit contenir deux boutons. Vous ajouterez le premier bouton à la scène. Vous créerez ensuite un nouveau bouton sur la scène pour finaliser la séquence. Vous commencez par donner un nom à l'acteur bouton de la miniature 2 dans la fenêtre Distribution. Pour affecter un nom à l'acteur texte, vous avez tapé TexteDeTitre dans la fenêtre Texte un peu plus haut. Il est également possible d'affecter directement un nom aux acteurs dans la fenêtre Distribution. 1 Cliquez sur l'acteur bouton dans la miniature 2. Cliquez sur la zone de texte Nom de l'acteur en haut de la fenêtre Distribution et tapez Animation. Appuyez sur Entrée (Windows) ou sur Retour (Macintosh). 2 Zone de texte Nom de l'acteur 3 Faites glisser l'acteur bouton Animation de la fenêtre Distribution à la fenêtre Scène. Positionnez-le dans la partie inférieure droite de la scène. 4 Sélectionnez l'image-objet de bouton sur la scène. 5 Dans l'onglet Image-objet de l'Inspecteur des propriétés, procédez comme suit : Dans la zone de texte X, tapez 375. Dans la zone de texte Y, tapez 300 et appuyez sur Entrée (Windows) ou sur Retour (Macintosh). L'image-objet de bouton est désormais positionné selon des coordonnées précises. Créer un nouvel acteur bouton Vous êtes maintenant prêt à créer le deuxième bouton. N'oubliez pas que les acteurs bouton intègrent des fonctionnalités spéciales pour être automatiquement mis en évidence lorsqu'ils sont sélectionnés. La création d'acteurs bouton dans Director suit une procédure différente de la majorité des autres acteurs. Les acteurs sont bien souvent créés dans des fenêtres distinctes, puis déposés de la fenêtre Distribution sur la scène. Un acteur bouton est créé directement sur la scène à l'aide de la palette des outils. Vous allez utiliser l'outil Bouton pour créer un nouveau bouton. 1 Si la Palette des outils n'est pas affichée, sélectionnez Fenêtre > Palette des outils. ADOBE DIRECTOR 11.0 10 Créer une animation élémentaire 2 Vérifiez que la Palette des outils est bien en mode d'affichage Classique. Au sommet de la Palette des outils, affichez la liste des modes d'affichage, puis sélectionnez Classique. Mode d'affichage Classique Outil Bouton 3 Dans la Palette des outils, cliquez sur l'outil Bouton. 4 Tracez un rectangle horizontal vers le côté droit de la scène, comme illustré ci-dessous : 5 Lorsque vous relâchez le bouton de la souris, le rectangle que vous avez créé devient une zone de texte modifiable dans laquelle vous pouvez saisir le texte qui doit s'afficher sur le bouton. Tapez Son et vidéo dans la zone de texte. Remarque : Si le texte est trop long pour tenir sur le bouton, celui-ci peut être agrandi. Sélectionnez l'outil Flèche, cliquez sur le bouton et faites glisser les poignées de redimensionnement droites du bouton vers la droite. 6 Dans l'onglet Image-objet de l'Inspecteur des propriétés, procédez comme suit : Dans la zone de texte X, tapez 200. Dans la zone de texte Y, tapez 300 et appuyez sur Entrée (Windows) ou sur Retour (Macintosh). 7 Cliquez sur la scène hors du bouton. ADOBE DIRECTOR 11.0 11 Créer une animation élémentaire La zone de texte modifiable se transforme en image-objet de bouton. Dans la fenêtre Distribution, le nouvel acteur bouton occupe la prochaine miniature disponible, c'est-à-dire la miniature 3. 8 Sélectionnez le nouveau bouton dans la fenêtre Distribution. 9 Dans la zone de texte Nom de l'acteur, en haut de la fenêtre Distribution, tapez SonEtVidéo, puis appuyez sur Entrée (Windows) ou sur Retour (Macintosh). Vous avez maintenant créé un nouvel acteur bouton et ajouté toutes les images-objets requises dans la première séquence de votre animation. Observer la différence entre les images-objets et les acteurs Comme nous l'avons vu au début de ce didacticiel, vous créez des images-objets lorsque vous faites glisser des acteurs sur la scène. Les images-objets sont des occurrences d'acteurs qui apparaissent sur la scène et dans le scénario. La fenêtre Scénario affiche toutes les images de votre animation et montre dans quelles images les images-objets apparaissent sur la scène. Vous pouvez afficher les informations relatives aux images-objets et les modifier depuis la scène et depuis le scénario, de même que vous pouvez afficher et modifier les acteurs depuis la fenêtre Distribution. Plusieurs images-objets peuvent faire référence au même acteur et apparaître simultanément sur la scène. 1 Faites glisser une seconde fois l'acteur TexteDeTitre de la fenêtre Distribution sur la scène. Deux images-objets TexteDeTitre apparaissent sur la scène mais seul un acteur TexteDeTitre apparaît dans la fenêtre Distribution. Les deux images-objets TexteDeTitre sont des instances de l'acteur TexteDeTitre. 2 Dans le scénario, cliquez sur l'image-objet TexteDeTitre supplémentaire de la piste 4. 3 Appuyez sur la touche Retour arrière ou Effacement. Sachez que la suppression de l'image-objet supplémentaire ne change en rien l'acteur TexteDeTitre de la fenêtre Distribution. Modifier les images-objets dans la fenêtre Scénario Vous pouvez raccourcir ou rallonger les images-objets selon les besoins. Pour faciliter la lecture des informations du scénario pour l'ensemble de l'animation à l'écran, sans avoir à les faire défiler, vous allez raccourcir les images-objets de la première séquence. ADOBE DIRECTOR 11.0 12 Créer une animation élémentaire 1 Dans la fenêtre Scénario, cliquez sur la fin de l'image-objet TexteDeTitre et faites-la glisser à gauche de l'image 10. Remarque : Vous pouvez également rallonger les images-objets en faisant glisser leur dernière image vers la droite en direction d'images portant un numéro plus élevé et modifier plusieurs images-objets à la fois en sélectionnant plusieurs images de fin. 2 Cliquez sur l'image-objet bitmap Trio sur la piste 2 du scénario. 3 Appuyez sur la touche Maj, maintenez-la enfoncée, puis cliquez sur les images-objets Animation et SonEtVidéo. 4 Cliquez sur l'image 10 de la barre de numérotation d'images au-dessus de la piste 1. La tête de lecture passe à l'image 10. 5 Choisissez Modification > Etendre l'image-objet. Les images-objets sont raccourcies pour ne plus occuper que les images 1 à 10. Vous pouvez utiliser la commande Etendre l'image-objet pour rallonger ou raccourcir des images-objets. Changer la longueur par défaut des images-objets Vous pouvez changer la longueur par défaut des images-objets que vous faites glisser sur la scène et dans la distribution en changeant les préférences d'images-objets. Vous allez maintenant changer la longueur par défaut des images-objets pour la réduire à 10 images et faciliter ainsi la composition d'une animation constituée d'une série de séquences de 10 images. 1 Choisissez Edition > Préférences > Images-objets pour ouvrir la boîte de dialogue Préférences : images-objets. 2 Dans la zone de texte Durée de l'étendue, tapez 10 et cliquez sur OK. Cette nouvelle durée par défaut des images-objets s'applique à présent à toutes vos animations dans Director et non simplement à l'animation que vous êtes en train de créer. La première séquence de votre animation est quasiment achevée. Vous y reviendrez plus tard pour ajouter des commandes Lingo aux boutons de navigation. Vous allez maintenant créer la deuxième séquence. Remarque : Veillez à régulièrement enregistrer votre travail au fur et à mesure de l'apprentissage. ADOBE DIRECTOR 11.0 13 Créer une animation élémentaire Création de la deuxième séquence de l'animation La deuxième séquence de votre animation va contenir une animation d'un pneu qui rebondit. Vous importerez un acteur image pour cette séquence et vous l'animerez pour qu'il parcoure l'écran de haut en bas, créant ainsi un effet de rebond. Cette séquence inclura également un nouveau bouton permettant de revenir au niveau de la première séquence. Placer le bitmap d'arrière-plan sur la scène Un bitmap se compose de pixels de couleur disposés de sorte à créer un graphique. Le quatrième acteur est un bitmap qui sert d'arrière-plan à votre animation. La séquence animée allant commencer à l'image 15, vous allez placer une image-objet à l'arrière-plan sur la scène dans l'image 15. • A partir de la miniature 4, faites glisser l'image d'arrière-plan sur l'image 15 du scénario, piste 1. Lorsque vous placez une image-objet dans le scénario, Director la centre automatiquement sur la scène. Affecter un nom à un acteur L'acteur arrière-plan n'a pas encore été nommé. L'affectation de noms aux acteurs facilite l'identification des imagesobjets dans le scénario. 1 Dans la fenêtre Distribution, sélectionnez l'acteur dans la miniature 4. Cliquez sur la zone de texte Nom de l'acteur en haut de la fenêtre Distribution et tapez Arrière-plan. Appuyez sur Entrée (Windows) ou sur Retour (Macintosh). 2 ADOBE DIRECTOR 11.0 14 Créer une animation élémentaire Importer des médias dans Director Le graphique du pneu pour l'animation est un fichier Fireworks® PNG mais vous pouvez également importer d'autres formats de médias. Une fois un fichier importé en tant que membre, vous pouvez l'utiliser tout comme vous le feriez d'un autre acteur. 1 Choisissez Fichier > Importer. 2 Dans la boîte de dialogue Importer les fichiers, parcourez l'arborescence du dossier Director pour accéder à Tutorials/Basics/BasicsMedia. 3 Sélectionnez le fichier tire.png, puis cliquez sur le bouton Ajouter. 4 Cliquez sur le bouton Importer. 5 Dans la boîte de dialogue Options de l'image, cliquez sur le bouton OK. Le pneu occupe désormais la première miniature disponible dans la fenêtre Distribution. Le nouvel acteur a adopté comme nom, le nom du fichier tire.png. Animer l'image pour un déplacement vers le haut Vous êtes désormais prêt pour ajouter le pneu à la séquence et pour créer une animation dans laquelle il rebondit. Vous pouvez créer l'effet d'animation en plaçant une image-objet de l'acteur pneu dans la scène, puis en déplaçant l'image-objet sur un nouvel emplacement, dans chaque image. Pour la suite, vous utiliserez une technique appelée interpolation qui consiste à rendre l'animation plus réaliste. 1 A partir de la fenêtre Distribution, faites glisser l'acteur pneu sur l'image 15 du scénario, piste 2. 2 Sur la scène, déplacez l'image-objet pneu de sorte à ce qu'elle se positionne juste au-dessus de l'ombre, à proximité de la partie inférieure de la scène. Tout en gardant l'image-objet sélectionnée, maintenez la touche Maj enfoncée, cliquez sur le point rouge central et déplacez-le à une distance d'un tiers environ vers le haut de la scène. 3 En maintenant la touche Maj enfoncée, vous vous assurez d'une ligne verticale droite dans votre animation. ADOBE DIRECTOR 11.0 15 Créer une animation élémentaire Déplacer la tête de lecture pour afficher l'effet animé Vous pouvez déplacer la tête de lecture pour prévisualiser votre animation. Il est utile de déplacer la tête de lecture pour vous assurer qu'une animation ou tout autre effet multimédia fonctionne comme vous le souhaitez. • Dans le scénario, faites glisser la tête de lecture de l'image 15 à l'image 24 et inversement. C'est ce que nous appelons « déplacer la tête de lecture ». Le pneu se déplace alors le long du chemin que vous venez de créer. Vous pouvez à présent animer le pneu pour qu'il retombe sur le sol. Animer l'image pour un déplacement vers le bas Vous disposez à présent d'une animation pour un pneu décollant du sol. Pour animer le pneu retournant par terre, vous pouvez utiliser la même méthode que celle que vous avez utilisée pour animer le pneu dans son ascension. Vous pouvez également utiliser un raccourci et créer une copie inverse de l'image-objet pneu. 1 Dans le scénario, cliquez sur la piste 2, n'importe où entre les images 16 et 23. 2 L'image-objet pneu que vous avez créée est sélectionnée. 3 Choisissez Edition > Copier les images-objets pour copier l'image-objet concernée. 4 Dans le scénario, cliquez sur la piste 2, image 25. 5 Sélectionnez Edition > Coller les images-objets. Si vous déplacez la tête de lecture durant cette étape, vous constatez que l'animation pneu se répète deux fois. Il vous suffit ensuite d'inverser le mouvement de la seconde animation pneu. 6 Dans le scénario, cliquez sur la piste 2, n'importe où entre les images 26 et 33. La nouvelle copie de l'image-objet pneu est sélectionnée. 7 Choisissez Modification > Inverser la séquence. 8 Déplacez la tête de lecture des images 15 à 34 pour voir le pneu s'élever dans les airs puis redescendre. Etendre l'arrière-plan sur plusieurs images supplémentaires En déplaçant la tête de lecture, vous avez peut-être remarqué que l'image-objet arrière-plan disparaît au moment où le pneu retombe. L'image-objet arrière-plan existe uniquement entre les images 15 et 24. Vous pouvez l'étendre aux images suivantes. 1 Dans le scénario, cliquez sur piste 1, image 24, puis faites glisser jusqu'à l'image 34. ADOBE DIRECTOR 11.0 16 Créer une animation élémentaire 2 Déplacez à nouveau la tête de lecture. Cette fois-ci, l'image-objet arrière-plan existe sur l'intégralité de l'animation pneu. Changer la cadence d'animation Pour que l'animation pneu soit plus réaliste, le pneu doit ralentir au moment d'atteindre le point le plus haut et accélérer au moment de redescendre. Vous pouvez obtenir cet effet au moyen d'une technique appelée interpolation. 1 Dans le scénario, déplacez la tête de lecture vers la phase haute de l'animation (entre les images 15 et 24). 2 Dans la scène, sélectionnez l'image-objet pneu. 3 Choisissez Modification > Image-objet > Interpolation. 4 Déplacez la glissière Décélération sur 100 % et cliquez sur le bouton OK. Les points jaunes du chemin de l'animation se sont regroupés à proximité du sommet de l'animation. 5 Déplacez la tête de lecture. Le pneu ralentit dès qu'il atteint le point le plus haut. 6 Dans le scénario, déplacez la tête de lecture vers la phase basse de l'animation (entre les images 25 et 34). 7 Dans la scène, sélectionnez l'image-objet pneu. 8 Sélectionnez Modification > Image-objet > Interpolation. 9 Déplacez la glissière Accélération sur 100 % et cliquez sur le bouton OK. ADOBE DIRECTOR 11.0 17 Créer une animation élémentaire 10 Déplacez la tête de lecture. Le pneu accélère dès qu'il atteint le point le plus bas. Changer l'étendue d'une animation Vous avez peut-être l'impression que le pneu rebondit trop rapidement. Pour faire en sorte que l'animation s'exécute à une vitesse plus lente, ajoutez des images. Veillez également à ce que la séparation entre les phases ascendante et descendante de l'animation pneu se situe dans la partie centrale de l'étendue de l'animation. 1 Cliquez sur la dernière image de l'image-objet Arrière-plan dans l'image 34 du scénario, puis faites-la glisser vers l'image 50. 2 Cliquez sur la dernière image de l'image-objet pneu de la phase descendante dans l'image 34 du scénario, puis faites-la glisser vers l'image 50. 3 Cliquez sur la première image de l'image-objet pneu de la phase descendante dans l'image 25 du scénario, puis faites-la glisser vers l'image 33. Cliquez sur la dernière image de l'image-objet pneu de la phase ascendante dans l'image 24 du scénario, puis faites-la glisser vers l'image 32. 4 Dans la suite de ce didacticiel, vous ajouterez des scripts Lingo pour faire tourner l'animation en boucle. ADOBE DIRECTOR 11.0 18 Créer une animation élémentaire Ajouter un bouton de navigation existant au scénario Pour achever la séquence de l'animation, vous allez ajouter des boutons de navigation. Tout d'abord, vous allez utiliser le bouton SonEtVidéo créé précédemment pour la séquence 1, puis en définir un nouveau pour ramener les utilisateurs au niveau de la première séquence. Vous ajouterez ensuite des instructions Lingo à ces boutons pour les rendre fonctionnels. 1 Dans le scénario, cliquez sur l'image 15. 2 Dans la fenêtre Distribution, faites glisser l'acteur SonEtVidéo vers la partie inférieure de la scène. Une nouvelle image-objet apparaît alors dans le scénario, à partir de l'image 15. 3 Dans le scénario, cliquez et faites glisser la fin de l'image-objet SonEtVidéo de l'image 24 à l'image 50. 4 Dans la scène, cliquez sur le bouton SonEtVidéo. 5 Dans l'Inspecteur des propriétés, affichez l'onglet Image-objet. 6 Dans l'onglet Image-objet de l'Inspecteur des propriétés, procédez comme suit : a Dans la zone de texte X, tapez 350. b Dans la zone de texte Y, tapez 300 et appuyez sur Entrée (Windows) ou sur Retour (Macintosh). Remarque : Si le bouton est trop large pour contenir dans la scène, raccourcissez-le. Sélectionnez l'outil Flèche, cliquez sur le bouton, puis faites glisser les poignées de redimensionnement droites du bouton vers la gauche. Ajouter un nouveau bouton de navigation au scénario Vous allez maintenant créer un nouveau bouton pour ramener les utilisateurs à la première séquence. 1 Dans le scénario, cliquez sur l'image 15. 2 Dans la Palette des outils, cliquez sur l'outil Bouton. 3 En commençant par la partie inférieure gauche de la scène, dessinez un rectangle horizontal qui s'étend vers la partie droite de la scène. 4 Lorsque vous relâchez le bouton de la souris, le rectangle que vous avez créé devient une zone de texte modifiable dans laquelle vous pouvez saisir le texte qui doit s'afficher sur le bouton. Tapez Rembobiner dans la zone de texte. Remarque : Si le texte est trop long pour tenir sur le bouton, celui-ci peut être agrandi. Sélectionnez l'outil Flèche, cliquez sur le bouton et faites glisser les poignées de redimensionnement droites du bouton vers la droite. 5 Dans la fenêtre Distribution, sélectionnez le nouvel acteur bouton. Dans la zone de texte Nom de l'acteur, en haut de la fenêtre Distribution, tapez Rembobiner, puis appuyez sur Entrée (Windows) ou sur Retour (Macintosh). 6 7 Dans le scénario, faites glisser la fin de la nouvelle image-objet de bouton de la piste 4 de l'image 24 à l'image 50. 8 Dans l'onglet Image-objet de l'Inspecteur des propriétés, procédez comme suit : Dans la zone de texte X, tapez 15. Dans la zone de texte Y, tapez 300 et appuyez sur Entrée (Windows) ou sur Retour (Macintosh). Disposer les images-objets dans le scénario Pour faciliter la lecture du scénario, organisez les images-objets de la séquence animée pour laisser une piste vide entre les images-objets graphiques et les images-objets de boutons. 1 Dans le scénario, sélectionnez l'image-objet SonEtVidéo qui commence à l'image 15. 2 Appuyez sur la touche Maj, puis sélectionnez l'image-objet Rembobiner. Les deux images-objets doivent à présent être sélectionnées. ADOBE DIRECTOR 11.0 19 Créer une animation élémentaire 3 Faites glisser les deux images-objets d'une piste vers le bas pour les placer respectivement sur les pistes 4 et 5. Veillez à ne pas les déplacer vers la gauche ni vers la droite. Les images-objets doivent continuer à occuper les images 15 à 50. 4 Au bas de la scène, cliquez sur le bouton Rembobiner, puis sur le bouton Lire. 5 L'animation est lue du début à la fin en affichant brièvement la première séquence, suivie de l'animation du pneu, avant de revenir à la première image et de recommencer. 6 Si votre animation ne s'exécute qu'une seule fois, activez la diffusion en boucle en choisissant Contrôle > Lecture en boucle. 7 Lorsque vous avez terminé de lire l'animation, cliquez sur le bouton Arrêter au bas de la scène. Dans la suite de ce didacticiel, vous allez ajouter des scripts Lingo pour rendre les boutons fonctionnels et empêcher la tête de lecture d'avancer d'une séquence à l'autre sans navigation. Remarque : Veillez à régulièrement enregistrer votre travail au fur et à mesure de l'apprentissage. Création de la troisième séquence avec son et vidéo Avec la séquence son et vidéo, vous allez apprendre à utiliser les effets audio et le contenu vidéo dans vos animations. Vous pourrez inclure du contenu audio et vidéo avec ou sans instructions Lingo, selon la complexité de l'effet recherché. Dans cette séquence, vous allez ajouter du contenu vidéo à la scène, un effet audio et des boutons contrôlant le contenu audio et vidéo. Importer un acteur vidéo numérique Lorsque vous importez un fichier dans Director, vous avez la possibilité d'importer la totalité d'un fichier dans le fichier d'animation Director ou de le conserver sous forme de fichier distinct, en créant uniquement une référence au fichier externe dans votre animation Director. Si vous importez un fichier à l'aide d'une référence, il est essentiel de ne pas modifier son emplacement. Si vous le déplacez, Director n'arrivera pas à le localiser la prochaine fois que vous ouvrirez le fichier Director et l'animation ne se déroulera pas comme prévu. L'importation par référence offre des avantages divers, parmi lesquels on soulignera les suivants : • Le fichier d'animation Director a une taille inférieure lorsque vous utilisez une référence au lieu d'importer intégralement le média. • Les références de médias offrent une plus grande souplesse d'emploi au niveau de la gestion et de la localisation des éléments de médias. Lorsqu'un fichier référencé est modifié à l'aide de la fonctionnalité de lancement et d'édition de Director, il n'est pas nécessaire de réimporter le fichier modifié. Le premier acteur que vous allez utiliser dans la séquence audio et vidéo est un fichier vidéo numérique QuickTime®. Les fichiers vidéo numériques sont systématiquement importés par référence, pour les conserver séparément du fichier Director. Choisissez Fichier > Importer. Dans la boîte de dialogue Importer les fichiers qui s'affiche, parcourez l'arborescence du dossier Director pour accéder à Tutorials/Basics/BasicsMedia et sélectionnez le fichier walkaround.mov. 1 2 Cliquez sur le bouton Ajouter. 3 Dans le menu local Médias, sélectionnez Lier au fichier externe. En sélectionnant l'option Lier au fichier externe, vous indiquez une importation par référence. 4 Cliquez sur le bouton Importer. ADOBE DIRECTOR 11.0 20 Créer une animation élémentaire Le nouvel acteur vidéo numérique s'affiche dans la fenêtre Distribution, dans la première miniature disponible. Son nom provient de celui du fichier importé. Lire la vidéo numérique Vous pouvez visualiser l'acteur QuickTime en ouvrant la fenêtre QuickTime. Cette fenêtre contient les commandes requises pour lire le fichier vidéo, sans permettre toutefois de le modifier (les fichiers vidéo numériques ne peuvent pas être modifiés dans Director). 1 Dans la fenêtre Distribution, cliquez deux fois sur l'acteur walkaround. 2 La fenêtre QuickTime s'ouvre. 3 Lisez la vidéo à l'aide des commandes figurant dans la partie inférieure de la fenêtre QuickTime : a Cliquez sur le bouton Lire affiché dans l'angle inférieur gauche de la fenêtre. La lecture de la vidéo commence et le bouton Lire se transforme en bouton Pause. b Pour mettre la vidéo en pause, cliquez sur le bouton Pause dans l'angle inférieur gauche de la fenêtre. La vidéo est mise en pause et le bouton Pause redevient un bouton Lire. La fenêtre QuickTime comporte sa propre tête de lecture, qui se déplace vers la droite au cours de la lecture de la vidéo. Vous pouvez utiliser la tête de lecture pour accéder à un point spécifique ou vous déplacer dans la vidéo. c Pour accéder à un point spécifique dans la vidéo, cliquez sur la barre affichée à droite ou à gauche de la tête de lecture. La tête de lecture se positionne à l'endroit où vous avez cliqué dans la barre et l'image correspondante de la vidéo s'affiche dans la fenêtre. d Pour déplacer la tête de lecture dans la vidéo, faites-la glisser vers la droite pour avancer ou vers la gauche pour revenir en arrière. ADOBE DIRECTOR 11.0 21 Créer une animation élémentaire 4 Fermez la fenêtre QuickTime une fois que vous en avez terminé avec la vidéo. Créer une image-objet QuickTime Vous êtes maintenant prêt à placer l'image-objet QuickTime sur la scène. La séquence audio et vidéo doit commencer à l'image 55. 1 Dans le scénario, cliquez sur piste 1, image 55. La tête de lecture se déplace alors sur l'image 55. 2 Dans la fenêtre Distribution, faites glisser l'acteur QuickTime walkaround vers la partie supérieure centrale de la scène. La nouvelle image-objet s'affiche sur la scène et dans le scénario sur la piste 1, images 55 à 64. ADOBE DIRECTOR 11.0 22 Créer une animation élémentaire Indiquer une lecture au premier plan pour un acteur QuickTime. Director peut lire une vidéo QuickTime en utilisant l'option Premier plan. Cela lui permet de la lire le plus rapidement possible. Lorsque vous activez l'option Premier plan pour une vidéo numérique, elle se superpose à toutes les autres images-objets, quelle que soit la piste sur laquelle elle figure. Pour vérifier que l'option Premier plan est bien activée pour la nouvelle image-objet QuickTime, procédez comme suit : 1 Sélectionnez l'acteur walkaround dans la fenêtre Distribution. (Veillez à ne pas sélectionner l'image-objet sur la scène.) 2 Dans l'Inspecteur des propriétés, sélectionnez l'onglet QuickTime. 3 Une fois dans l'onglet QuickTime, vérifiez que la case à cocher Premier plan (DTS) est activée. DTS est l'acronyme de direct-to-Stage (Premier plan). Les cases à cocher Vidéo, Audio et Lecture en flux continu devraient également être activées, par défaut. Ajouter des boutons personnalisés Vous allez maintenant ajouter les boutons qui contrôlent la lecture de l'image-objet QuickTime. Ces boutons figurent déjà dans les miniatures 9, 10 et 11 de la fenêtre Distribution. A la différence des acteurs bouton standard de Director, il s'agit de graphiques bitmap qui n'intègrent pas de fonctionnalités automatiques. Vous ajouterez par la suite des instructions Lingo à ces boutons pour leur permettre de contrôler l'image-objet QuickTime. 1 Dans le scénario, dans la piste 2, cliquez sur l'image 55 si elle n'est pas déjà sélectionnée. 2 Dans la fenêtre Distribution, localisez l'acteur Lire, puis faites-le glisser sur la scène. Placez le bouton Lire sur la scène, au-dessous de l'image-objet QuickTime. Pour le moment, n'essayez pas de positionner les boutons avec précision ; vous aurez l'occasion de les aligner par la suite. L'image-objet du bouton Lire s'affiche sur la scène et sur la piste 2, images 55 à 64, du scénario. 3 Dans la fenêtre Distribution, localisez l'acteur Pause, puis faites-le glisser sur la scène. Placez le bouton Pause sur la scène, au-dessous de l'image-objet QuickTime, immédiatement à droite du bouton Lire. Là encore, il n'est pas nécessaire de le positionner précisément pour le moment. ADOBE DIRECTOR 11.0 23 Créer une animation élémentaire L'image-objet du bouton Pause s'affiche sur la scène et sur la piste 3, images 55 à 64, du scénario. 4 Dans la fenêtre Distribution, localisez l'acteur Rembobiner, puis faites-le glisser sur la scène. Placez le bouton Rembobiner sur la scène, au-dessous de l'image-objet QuickTime, immédiatement à droite du bouton Pause. L'image-objet du bouton Rembobiner s'affiche sur la scène et sur la piste 4, images 55 à 64, du scénario. 5 Dans le scénario ou sur la scène, cliquez sur les trois boutons en maintenant la touche Maj enfoncée. Les trois boutons sont alors sélectionnés et vous pouvez les positionner précisément sur la scène. 6 Choisissez Fenêtre > Aligner. L'onglet Aligner du volet Dessin s'affiche dans l'angle inférieur droit de l'écran. 7 Dans l'onglet Aligner, cliquez sur le bouton Aligner les centres verticalement. Cette option aligne les boutons de long de l'axe X. Aligner les centres verticalement Répartir horizontalement par rapport aux centres 8 Dans l'onglet Aligner, cliquez sur le bouton Répartir horizontalement par rapport aux centres. Cette option harmonise les distances entre les trois boutons. Dans la suite de ce didacticiel, vous ajouterez des instructions Lingo à ces boutons personnalisés pour les rendre fonctionnels. Importer un son L'animation QuickTime ne comporte aucune piste audio. Vous pouvez rendre la séquence plus attrayante en agrémentant le contenu vidéo d'un contenu audio. Le moyen le plus facile pour compléter une animation Director d'un contenu audio consiste à importer un acteur audio et à le placer sur l'une des pistes audio du scénario. Lorsque la tête de lecture lit des images contenant des images-objets audio, le contenu audio correspondant est diffusé. Vous pouvez également lire le contenu audio en faisant appel à des instructions Lingo plutôt qu'aux pistes audio, comme vous allez l'apprendre ultérieurement dans ce didacticiel. 1 Choisissez Fichier > Importer. ADOBE DIRECTOR 11.0 24 Créer une animation élémentaire 2 Dans la boîte de dialogue Importer les fichiers, parcourez l'arborescence du dossier Director pour accéder à Tutorials/Basics/BasicsMedia et ouvrez le dossier Sounds. 3 Sélectionnez le fichier audio track1.mp3, puis cliquez sur le bouton Ajouter. 4 Dans la zone Médias, au bas de la boîte de dialogue, sélectionnez l'option Lier au fichier externe. Cette option indique à Director de n'importer qu'une référence au fichier, en conservant le fichier audio séparément du fichier d'animation Director. 5 Cliquez sur le bouton Importer. Le fichier audio track1 est importé dans la fenêtre Distribution. Ajouter un son dans le scénario Vous pouvez maintenant ajouter un son dans le scénario. Le contenu audio étant audible plutôt que visible, il n'apparaît pas sur la scène. Vous pouvez placer les images-objets audio directement dans le scénario. 1 Dans le scénario, cliquez sur le bouton Afficher/masquer les pistes d'effets si les pistes d'effets ne sont pas visibles. Les pistes d'effets doivent alors s'afficher dans le scénario, au-dessus de la barre de numérotation des images. Bouton Afficher/masquer les pistes d'effets Pistes audio Ce à quoi ressemblent les pistes d'effets lorsqu'elles sont visibles 2 Dans le scénario, cliquez sur l'image 55. 3 A partir de la fenêtre Distribution, faites glisser l'acteur track1 sur l'image 55 du scénario, piste 1. Le contenu audio va maintenant pouvoir être diffusé lors de la lecture des images 55 à 64 de votre animation. 4 Rembobinez et lisez votre animation. La tête de lecture parcourt rapidement les images de votre animation. La tête de lecture atteint l'image 64 avant que l'image-objet QuickTime ou le contenu audio track1 n'aient le temps de se terminer. Ce problème va être résolu ultérieurement à l'aide d'instructions Lingo. 5 Lorsque vous avez terminé de lire l'animation, cliquez sur le bouton Arrêter au bas de la scène. ADOBE DIRECTOR 11.0 25 Créer une animation élémentaire Ajouter des boutons de navigation Les dernières images-objets à ajouter à la séquence audio et vidéo sont des boutons de navigation. Vous pourrez ensuite ajouter des instructions Lingo simples (le langage de programmation de Director) à tous les boutons. La séquence audio et vidéo a besoin d'un bouton permettant aux utilisateurs de retourner à la première séquence, ainsi que d'un bouton lié à la séquence animée. Vous disposez d'ores et déjà de ces boutons dans la fenêtre Distribution et dans le scénario. Vous allez utiliser deux techniques légèrement différentes pour placer ces boutons dans la séquence audio et vidéo. Dans la séquence animée, vous avez placé le bouton Rembobiner dans l'angle inférieur gauche de la scène. Ce bouton devant être placé au même endroit sur la scène dans la séquence audio et vidéo, vous pouvez utiliser la même imageobjet pour les deux séquences. L'extension de l'image-objet de bouton Rembobiner à partir de la séquence animée vous permet de la prolonger à la séquence audio et vidéo dans le scénario. Le bouton occupe ensuite le même espace sur la scène dans les deux séquences. Après avoir agrandi l'image-objet Rembobiner, vous devez maintenant ajouter le bouton permettant d'accéder à la séquence de l'animation. Du fait que le bouton va occuper une position différente de celle qu'il occupait sur la séquence de départ, vous devrez créer une nouvelle image-objet correspondante dans la séquence audio et vidéo. 1 Dans le scénario, recherchez l'image-objet Rembobiner dans la piste 5, puis faites glisser sa dernière image sur l'image 64. L'image-objet est prolongée dans le scénario et s'affiche dans l'angle inférieur gauche de la scène, dans la séquence audio et vidéo. 2 Dans le scénario, sélectionnez l'image 55 de la piste 6. 3 Dans la fenêtre Distribution, faites glisser l'acteur Animation sur la scène et positionnez-le dans l'angle inférieur droit de la scène. L'image-objet de bouton Animation s'affiche sur la scène et sur la piste 6, images 55 à 64, du scénario. Comme vous avez déjà sélectionné l'image 55 de la piste 6, l'image-objet s'affiche à l'endroit où vous l'avez déposée sur la scène. Si vous ne sélectionnez pas au préalable une piste du scénario, l'image-objet s'affiche sur la première piste disponible, dans l'image où est située la tête de lecture. 4 Dans la scène, cliquez sur le bouton Animation. ADOBE DIRECTOR 11.0 26 Créer une animation élémentaire 5 Utilisez l'onglet Image-objet de l'Inspecteur des propriétés, tout comme vous l'avez fait au préalable, pour affecter au bouton des coordonnées x et y (respectivement 350 et 300). Toutes les séquences de votre animation sont, du point de vue graphique, achevées. Vous êtes maintenant prêt à ajouter des instructions Lingo aux boutons pour permettre aux utilisateurs de parcourir l'animation. Remarque : Veillez à régulièrement enregistrer votre travail au fur et à mesure de l'apprentissage. Rédaction de scripts pour contrôler l'animation Grâce aux scripts, vous pouvez créer autant d'effets interactifs et multimédias que vous le souhaitez. Vous pouvez affecter de simples fonctionnalités aux boutons, comme c'est le cas dans ce didacticiel. Vous pouvez également réaliser des tâches plus complexes telles que le contrôle de tous les aspects du contenu d'une animation et ce, sans faire appel au scénario. Director prend en charge deux langages différents pour la programmation : Lingo et la syntaxe JavaScript. Dans ce didacticiel, vous apprendrez à programmer avec Lingo uniquement, mais si vous connaissez déjà le langage JavaScript, il est peut-être préférable que vous utilisiez cette syntaxe. Le langage Lingo a été conçu pour sa facilité d'utilisation et ne doit donc surtout pas vous intimider. Une fois familiarisé avec les notions de base, vous pourrez utiliser le dictionnaire de programmation pour contrôler quasiment tous les aspects de votre animation. Lire en boucle à l'aide d'instructions Lingo Les séquences de votre animation ne vont pas produire les résultats escomptés si la tête de lecture se contente de les diffuser le plus vite possible, sans s'arrêter pour donner à l'utilisateur le temps de « digérer » leur contenu. Dans le cadre de cette animation, la tête de lecture doit rester positionnée sur une séquence jusqu'à ce que l'utilisateur décide d'accéder à une autre séquence. Dans ce didacticiel, vous allez maintenant ajouter des instructions Lingo à une piste de script spéciale du scénario et aux images-objets de bouton. Pour obliger la tête de lecture à demeurer sur une séquence, vous devez lui appliquer une mise en boucle sur une image ou sur une série d'images. Dans le cas de la première séquence et de la séquence audio et vidéo, la tête de lecture peut être mise en boucle sur une seule image. Dans le cas de la séquence animée qui couvre toute une série d'images, la tête de lecture doit être mise en boucle sur la même série d'images. Pour contrôler le mouvement de la tête de lecture sans passer par des boutons, vous devez utiliser la piste des scripts du scénario. La piste des scripts, tout comme les pistes audio, est l'une des pistes d'effets qui s'affichent au-dessus de la barre de numérotation des images du scénario. Piste des scripts Rédiger un gestionnaire La séquence de départ est la première à laquelle un script doit être affecté pour mettre la tête de lecture en boucle. Chaque fois que la tête de lecture quitte une image pour accéder à la suivante, un événement exitFrame se produit. Dans ce cas, le terme événement fait référence à une action exécutée dans Director. Le premier script va faire appel à l'événement exitFrame comme déclenchement. ADOBE DIRECTOR 11.0 27 Créer une animation élémentaire Chaque script que vous rédigez se compose de gestionnaires. Un gestionnaire est un ensemble de commandes Lingo chargées de traiter un événement spécifique, comme un événement exitFrame, par exemple. Certains scripts ne comportent qu'un seul gestionnaire, alors que d'autres en ont plusieurs. Chaque gestionnaire commence par le nom de l'événement de déclenchement, comme exitFrame par exemple, et se termine par end. Pour créer ou modifier un script dans Director, vous devez faire appel à la fenêtre Script. Chaque script devient un acteur. La fenêtre Script fournit des outils pour faciliter la modification des scripts. 1 Dans la piste des scripts du scénario, cliquez deux fois sur l'image 10, la dernière image de la première séquence. La fenêtre Script s'ouvre, avec un gestionnaire par défaut : on exitFrame me end 2 Insérez le script suivant entre ces deux lignes de script : _movie.go(_movie.frame) Vous obtenez un gestionnaire qui ressemble à ce qui suit : on exitFrame me _movie.go(_movie.frame) end 3 Fermez la fenêtre Script. Le nouvel acteur script s'affiche dans la fenêtre Distribution, dans la première miniature disponible. Une image-objet du script s'affiche également dans l'image 10, piste Script. 4 Sélectionnez le nouveau script dans la fenêtre Distribution. Cliquez sur la zone de texte Nom de l'acteur en haut de la fenêtre Distribution et tapez Boucle. Appuyez sur Entrée (Windows) ou sur Retour (Macintosh). 5 6 Au bas de la scène, sous l'animation, cliquez surle bouton Rembobiner. Puis, toujours au bas de la scène, cliquez sur le bouton Lire pour exécuter votre animation. 7 L'animation est lue jusqu'à l'image 10 et s'interrompt. La lecture de l'animation se poursuit, même si elle rencontre une boucle à l'image 10. 8 Au bas de la scène, cliquez sur le bouton Arrêter pour mettre un terme à l'animation. • Le gestionnaire que vous avez écrit contient trois parties : • La première ligne, on exitFrame me, indique à Director d'exécuter ce script lorsque la tête de lecture quitte l'image dans laquelle le script est situé. Il s'agit de l'image 10. • La deuxième ligne, qui commence par _movie.go, indique à Director de renvoyer la tête de lecture à l'image courante. Le terme .frame dans l'expression (_movie.frame) fait systématiquement référence au numéro de l'image dans laquelle la tête de lecture est actuellement située. Il s'agit là encore de l'image 10. • La dernière ligne d'un gestionnaire est le mot end. Il signale la fin du script. Compte tenu de ce nouveau gestionnaire, la tête de lecture décrit continuellement une boucle sur l'image 10, dès lors qu'elle est renvoyée à l'image 10, à chaque fois qu'elle essaie d'accéder à l'image 11. Ainsi, l'animation Director est exécutée jusqu'à l'image 10, puis réitérée sur cette image jusqu'à ce que l'utilisateur clique sur un bouton pour accéder à une séquence différente. ADOBE DIRECTOR 11.0 28 Créer une animation élémentaire Réutiliser le gestionnaire Vous pouvez utiliser le même acteur script dans la dernière image de votre animation, à savoir l'image 64. Le script crée le même effet de boucle sur l'image 64 de la séquence son et vidéo que celui obtenu sur l'image 10 de la première séquence. 1 Assurez-vous que les fenêtres Distribution et Scénario sont ouvertes. 2 Dans le scénario, cliquez sur l'image 64. 3 A partir de la fenêtre Distribution, faites glisser l'acteur script Boucle sur l'image 64 du scénario, piste des scripts. Une nouvelle image-objet pour le script apparaît dans l'image 64. La longueur par défaut de l'image-objet script est d'une image. A présent, vous disposez du même effet de boucle dans l'image 64 que celui obtenu dans l'image 10. L'animation diffuse la séquence son et vidéo qui ne s'arrête que lorsque l'utilisateur clique sur un bouton. Ajouter un repère au scénario Dans la séquence animée, vous avez créé une animation qui se déroule de l'image 15 à l'image 50. Si vous mettez en boucle la tête de lecture sur l'image 50 uniquement, l'animation ne sera exécutée que lorsque l'utilisateur cliquera sur un bouton. Dans ce cas, vous devez mettre la tête de lecture en boucle sur l'ensemble des images dont est composée la séquence animée. Pour ce faire, vous pouvez utiliser un script comparable à celui que vous venez de créer et le placer dans la dernière image de la séquence animée. Cependant, ce nouveau script va renvoyer la tête de lecture à la première image de la séquence animée, plutôt qu'à l'image dans laquelle le script est situé. La première image de la séquence animée étant l'image 15, vous pouvez tout simplement rédiger le script suivant : _movie.go(15) Le problème de ce script est qu'il n'est pas particulièrement souple à utiliser. Si vous décidez de déplacer la séquence animée vers une autre série d'images dans le scénario, le script ne sera plus correct. Pour rendre ce script plus souple d'emploi, vous pouvez placer des repères dans le scénario et renvoyer la tête de lecture vers un repère plutôt qu'un numéro d'image spécifique. Les repères permettent d'affecter un nom à une image spécifique du scénario. Pour déplacer la séquence animée après avoir affecté un nom à sa première image, il suffit de déplacer le repère avec le reste de la séquence dans le scénario. 1 Dans le scénario, cliquez sur l'image 15. ADOBE DIRECTOR 11.0 29 Créer une animation élémentaire 2 Cliquez sur la barre de repères au-dessus de l'image 15. Menu Repères Un nouveau repère apparaît dans la barre de repères de l'image 15. La zone de texte située en regard du nouveau repère indique « Nouveau repère ». Tapez Animation dans la zone de texte du nouveau repère et appuyez sur Entrée (Windows) ou sur Retour (Macintosh) pour affecter un nom au repère. 3 Créer un système de navigation à l'aide de Lingo et des noms de repères 1 Vous pouvez créer un script pour mettre la tête de lecture en boucle, de l'image 15 à l'image 50, à l'aide du repère. 2 Cliquez deux fois sur l'image 50 de la piste des scripts, à savoir la dernière image de la séquence animée. La fenêtre Script s'ouvre, avec le gestionnaire on exitFrame par défaut. 3 Sur la ligne 2 du script par défaut, tapez ce qui suit : _movie.go("Animation") 4 Dans le champ de texte Nom en haut de la fenêtre Script, tapez BoucleAnim, puis fermez la fenêtre Script. Le nouvel acteur script s'affiche dans la première miniature disponible de la fenêtre Distribution et la nouvelle image-objet, dans l'image 50 de la piste des scripts du scénario. 5 Cliquez sur l'image 15 de la barre de numérotation des images du scénario, puis sur le bouton Lire situé au bas de la scène. La séquence animée est lue et la tête de lecture est mise en boucle vers l'image 15, dès qu'elle atteint l'image 50. L'animation du pneu qui rebondit se répète alors en boucle. 6 Cliquez sur le bouton Arrêter au bas de la scène. Chacune des séquences de l'animation contient un script empêchant la tête de lecture d'accéder à une séquence différente. Vous allez maintenant ajouter des scripts aux boutons de navigation pour permettre à l'utilisateur de passer d'une séquence à l'autre. ADOBE DIRECTOR 11.0 30 Créer une animation élémentaire Ajouter des instructions Lingo aux boutons de navigation Pour rendre les boutons de navigation fonctionnels, vous devrez leur ajouter des scripts. Ces scripts doivent être associés aux images-objets de bouton, plutôt qu'aux images de la piste des scripts. Les scripts d'images répondent aux événements exitFrame. Après avoir écrit les scripts de boutons, vous allez écrire la réponse aux clics de souris. Vous allez commencer par ajouter des scripts aux images-objets de bouton de la première séquence. 1 Dans le scénario, affichez les images 1 à 10. 2 Cliquez sur le bouton droit de la souris (Windows) ou cliquez tout en maintenant la touche Ctrl enfoncée (Macintosh) sur l'image-objet Animation dans la piste 3, des images 1 à 10. 3 Dans le menu contextuel, sélectionnez Script. La fenêtre Script s'ouvre, avec un gestionnaire par défaut : on mouseUp me end 4 Sur la nouvelle ligne, tapez le script suivant : _movie.go("Animation") Vous devez obtenir le résultat suivant : on mouseUp me _movie.go("Animation") end 5 Dans le champ de texte Nom en haut de la fenêtre Script, tapez GoAnim. 6 Fermez la fenêtre Script et enregistrez votre animation. Ce gestionnaire est constitué de trois parties. La première ligne indique à Director de déclencher ce gestionnaire lorsque l'utilisateur clique sur l'image-objet à laquelle le script est associé. L'événement mouseUp, en particulier, fait référence au relâchement du bouton de la souris après l'avoir actionné. Ainsi, le script n'est pas exécuté jusqu'à ce que l'utilisateur relâche le bouton de la souris. La deuxième ligne du gestionnaire contient les mêmes instructions que dans le script précédent. Elle renvoie la tête de lecture à l'image qui contient le repère Animation. La seule différence réside dans le fait que ce script exécute l'action requise à la suite d'un clic de souris, plutôt que d'un événement exitFrame. Là encore, le terme end sur la dernière ligne indique à Director la fin du script. Tester votre script Vous êtes maintenant prêt à tester votre nouveau script de bouton. 1 Si nécessaire, affichez la fenêtre Scène au premier plan en cliquant sur sa barre de titre. 2 Rembobinez et lisez votre animation. L'animation est lue et la séquence de départ reste affichée à l'écran. La tête de lecture n'accède pas à une autre séquence tant que vous ne cliquez pas sur le bouton associé au nouveau script. 3 Cliquez sur le bouton Animation sur la scène. Ce bouton réagit automatiquement en changeant de couleur dès que vous cliquez dessus. La tête de lecture accède à la première image de la séquence animée et l'animation du pneu qui rebondit commence. 4 Arrêtez votre animation. ADOBE DIRECTOR 11.0 31 Créer une animation élémentaire Ajouter des repères à deux autres séquences Le premier bouton est maintenant achevé. Pour affecter des scripts comparables aux autres boutons de navigation, vous pouvez ajouter des repères à la séquence de départ, ainsi qu'à la séquence audio et vidéo. 1 Affichez l'image 1 du scénario. 2 Dans le scénario, cliquez sur la barre de repères au niveau de l'image 1, la première image de la séquence de départ. Un nouveau repère s'affiche. 3 Dans le champ de texte en regard du nouveau repère, tapez Début, puis appuyez sur Entrée (Windows) ou Retour (Macintosh). 4 Affichez l'image 55 du scénario. 5 Cliquez sur la barre de repères au niveau de l'image 55, la première image de la séquence audio et vidéo. Dans le champ de texte en regard du nouveau repère, tapez SonEtVidéo, puis appuyez sur Entrée (Windows) ou Retour (Macintosh). 6 Rédiger des scripts faisant référence aux séquences Vous pouvez créer des scripts faisant référence aux trois séquences par leur nom. Vous pouvez maintenant ajouter un script au bouton SonEtVidéo de la séquence de départ. 1 Dans le scénario, affichez les images 1 à 10. 2 Dans les images 1 à 10, cliquez sur le bouton droit de la souris (Windows) ou cliquez tout en maintenant la touche Ctrl enfoncée (Macintosh) sur l'image-objet SonEtVidéo. 3 Dans le menu contextuel, sélectionnez Script. La fenêtre Script s'ouvre, avec un gestionnaire on mouseUp par défaut. 4 Sur la deuxième ligne du gestionnaire, tapez : _movie.go("SonEtVidéo") 5 Dans le champ de texte Nom en haut de la fenêtre Script, tapez GoSonEtVidéo. 6 Fermez la fenêtre Script et enregistrez votre animation. 7 Pour tester le script, rembobinez l'animation et lisez-la, puis cliquez sur le bouton SonEtVidéo dans la première séquence. L'animation passe à la séquence audio et vidéo et l'image-objet QuickTime est lue. Ajouter des scripts à la séquence animée La séquence animée contient deux boutons : le bouton Rembobiner et le bouton Son et vidéo. Etant donné que vous avez déjà créé un script pour le bouton SonEtVidéo, vous pouvez le réutiliser. Vous devez en revanche en créer un nouveau pour le bouton Rembobiner. 1 Assurez-vous que les fenêtres Distribution et Scénario sont ouvertes. ADOBE DIRECTOR 11.0 32 Créer une animation élémentaire 2 Affichez l'image 15 du scénario. 3 Depuis la fenêtre Distribution, faites glisser l'acteur script GoSonEtVidéo sur l'image-objet de bouton SonEtVidéo qui s'affiche dans les images 15 à 50 du scénario. Le script est maintenant associé à cette image-objet, de la même manière qu'il est associé à l'image-objet de bouton SonEtVidéo dans la première séquence. Pour créer un nouveau script à associer au bouton Rembobiner, cliquez sur le bouton droit de la souris (Windows) ou cliquez tout en maintenant la touche Ctrl enfoncée (Macintosh) sur l'image-objet du bouton Rembobiner qui débute à l'image 15 du scénario. 4 5 Sélectionnez Script dans le menu contextuel. 6 La fenêtre Script s'ouvre, avec un gestionnaire on mouseUp par défaut. 7 Sur la deuxième ligne du gestionnaire, tapez : _movie.go("Début") Dans la zone de texte Nom en haut de la fenêtre Script, tapez GoRembobiner, puis appuyez sur Entrée (Windows) ou sur Retour (Macintosh). 8 9 Fermez la fenêtre Script et enregistrez votre animation. Cette image-objet de bouton se prolongeant tout le long de la séquence audio et vidéo, vous n'avez rien d'autre à faire pour activer le bouton dans cette séquence. La dernière étape pour activer tous les boutons de navigation consiste à ajouter le script GoAnim au bouton Animation dans la séquence audio et vidéo. Ajouter un script supplémentaire à la séquence audio et vidéo Vous avez déjà ajouté le script de navigation au bouton Rembobiner dans la séquence audio et vidéo. Pour terminer les boutons de navigation, il ne vous reste plus qu'à ajouter un script au bouton Animation. 1 Assurez-vous que les fenêtres Distribution et Scénario sont ouvertes. 2 Affichez les images 55 à 64 du scénario. Depuis la fenêtre Distribution, faites glisser le script GoAnim sur l'image-objet du bouton Animation, dans les images 55 à 64 du scénario. 3 Votre fonctionnalité de navigation est maintenant achevée. Vous pouvez donc vous déplacer vers l'une ou l'autre des trois séquences dans votre animation. 4 Rembobinez et lisez votre animation. 5 Utilisez chacun des boutons de navigation dans les trois séquences. Vérifiez que chaque bouton renvoie bien la tête de lecture vers la séquence appropriée. Contrôler une vidéo numérique au moyen d'un script Bien que les animations simples et les animations vidéo numériques partagent des similitudes dans Director, il existe toutefois des différences bien précises entre ces deux types d'animations. Les deux types d'animations Director sont formés d'une séquence d'images affichées à l'écran. Director les lit en déplaçant la tête de lecture le long du scénario pour afficher tour à tour les images auxquelles la tête de lecture accède. Si l'ordinateur sur lequel l'animation est lue est relativement lent et demande du temps pour afficher chaque image, l'animation Director progresse lentement. La méthode de lecture des animations dans Director est appelée animation basée sur images. ADOBE DIRECTOR 11.0 33 Créer une animation élémentaire Les animations vidéo numériques ont recours à une durée plutôt qu'à un scénario. La synchronisation de la lecture vidéo est plus étroitement associée à la piste audio de la vidéo. Par exemple, si la vidéo est accompagnée d'une piste audio, la synchronisation du contenu vidéo et du contenu audio doit être maintenue pendant toute la lecture de la vidéo. De ce fait, le cas échéant, les vidéos numériques ignorent certaines images pour maintenir la synchronisation sur la piste audio. Sur les ordinateurs plus lents, il se peut donc que plusieurs images soient ignorées durant la lecture vidéo. Ce type d'animation est appelé animation basée sur le temps. Ces différences expliquent pourquoi la navigation dans une animation Director s'effectue en accédant à différentes images dans une animation normale et à des moments différents dans une animation vidéo numérique. Vous êtes maintenant prêt à ajouter des scripts aux boutons graphiques bitmap pour contrôler la lecture vidéo numérique. Les boutons graphiques bitmap sont : le bouton Lire, le bouton Pause et le bouton Rembobiner. Pour ces boutons, vous utilisez de nouveaux termes de script, notamment les propriétés movieRate etmovieTime de l'image-objet QuickTime. En modifiant la valeur de ces propriétés dans Lingo, vous modifiez également la lecture de la vidéo sur la scène. Lorsqu'un utilisateur accède à la séquence audio et vidéo à partir d'une autre séquence, la vidéo numérique est lue une seule fois, du début à la fin. Pour lire une nouvelle fois la vidéo sans quitter d'abord la séquence, vous devez la rembobiner. Pour rembobiner la vidéo, vous devez définir sa propriété movieTime. La propriété movieTime indique la partie de la vidéo numérique actuellement affichée à l'écran. La propriété movieTime est mesurée en battements, ou 1/60 de seconde. Par exemple, lorsque l'animation affiche la toute première image de la vidéo, la propriété movieTime a pour valeur 0. Au bout d'une seconde de lecture vidéo, la propriété movieTime prend la valeur 60 et au bout de 3 secondes de lecture, la valeur 180. En affectant la valeur de votre choix à la propriété movieTime, vous pouvez forcer la vidéo à passer à une autre image. Rembobiner l'image-objet QuickTime Vous pouvez rembobiner l'image-objet QuickTime en donnant à sa propriété movieTime la valeur 0. 1 Dans le scénario, affichez les images 55 à 64. Dans les images 55 à 64, cliquez sur le bouton droit de la souris (Windows) ou cliquez tout en maintenant la touche Ctrl enfoncée (Macintosh) sur l'image-objet du bouton Rembobiner. 2 3 Sélectionnez Script dans le menu contextuel. La fenêtre Script s'ouvre, avec un gestionnaire on mouseUp par défaut. 4 Sur la deuxième ligne du gestionnaire, tapez l'instruction Lingo suivante pour rembobiner l'image-objet QuickTime : sprite(1).movieTime = 0 5 Appuyez sur Entrée (Windows) ou sur Retour (Macintosh). 6 Sur la troisième ligne du gestionnaire, tapez l'instruction Lingo suivante : sprite(1).movieRate = 0 La propriété movieRate définit la vitesse de lecture de l'image-objet QuickTime. Lorsque la vidéo s'interrompt, la valeur de la propriété movieRate est de 0. Le résultat est le suivant : On mouseUp me sprite(1).movieTime = 0 sprite(1).movieRate = 0 end ADOBE DIRECTOR 11.0 34 Créer une animation élémentaire 7 Dans le champ de texte Nom en haut de la fenêtre Script, tapez ScriptRembobiner. 8 Fermez la fenêtre Script et enregistrez votre animation. 9 Rembobinez et lisez votre animation. 10 Cliquez sur le bouton SonEtVidéo dans la première séquence. L'animation passe à la séquence audio et vidéo et l'image-objet QuickTime est lue. 11 Cliquez sur le bouton Rembobiner du scénario une fois que l'image-objet QuickTime a été lue. L'image-objet QuickTime est rembobinée pour revenir au début de la vidéo. Ajouter un script pour lire l'image-objet QuickTime Lorsque la vidéo est lue normalement, la propriété movieRate a pour valeur 1. Vous pouvez maintenant ajouter la propriété movieRate au bouton Lire. Cette fois-ci, le script permet la lecture de l'image-objet QuickTime lorsque l'utilisateur clique sur le bouton Lire de l'animation, dans la scène. 1 Dans le scénario, cliquez sur le bouton droit de la souris (Windows) ou cliquez tout en maintenant la touche Ctrl enfoncée (Macintosh) sur l'image-objet du bouton Lire, dans les images 55 à 64. 2 Sélectionnez Script dans le menu contextuel. 3 Sur la deuxième ligne du gestionnaire, dans la fenêtre Script, tapez l'instruction Lingo suivante : sprite(1).movieRate = 1 Ce script démarre la lecture de l'image-objet QuickTime à vitesse normale. 4 Dans le champ de texte Nom en haut de la fenêtre Script, tapez ScriptLecture. 5 Fermez la fenêtre Script et enregistrez votre animation. Ajouter un script pour mettre l'image-objet QuickTime en pause Lorsque la vidéo est mise en pause, la propriété movieRate a pour valeur 0. Vous pouvez lire une vidéo plus rapidement que la vitesse normale, en spécifiant une valeur supérieure à 1, ou à une vitesse plus lente, en précisant une valeur inférieure à 1. 1 Dans le scénario, cliquez sur le bouton droit de la souris (Windows) ou cliquez tout en maintenant la touche Ctrl enfoncée (Macintosh) sur l'image-objet du bouton Pause, dans les images 55 à 64. 2 Sélectionnez Script dans le menu contextuel. 3 Sur la deuxième ligne du gestionnaire, dans la fenêtre Script, tapez l'instruction Lingo suivante : sprite(1).movieRate = 0 Cette instruction Lingo suspend la lecture de l'image-objet QuickTime. 4 Dans le champ de texte Nom en haut de la fenêtre Script, tapez ScriptPause. 5 Fermez la fenêtre Script et enregistrez votre animation. 6 Tous les boutons de contrôle sont maintenant opérationnels. Rembobinez l'animation et lisez-la pour tester les boutons. ADOBE DIRECTOR 11.0 35 Créer une animation élémentaire Contrôler le son au moyen d'un script La séquence audio et vidéo lit le fichier audio placé dans le scénario, mais uniquement la première fois que vous accédez à la séquence. Vous pouvez ajouter un script pour lire la piste audio à chaque fois que la piste vidéo est lue. Vous pouvez également ajouter un script pour produire un bref effet audio lorsque l'utilisateur clique sur les boutons de contrôle de la vidéo. Vous disposez de commandes tout spécialement conçues pour le contrôle du son au moyen de scripts. Dans ce didacticiel, la première étape consiste à ajouter une instruction Lingo lisant la piste audio track1 à la deuxième lecture de la vidéo. Pour cette tâche, ajoutez une fonction play à l'acteur ScriptLecture que vous avez créé au moyen de Lingo. 1 Sélectionnez l'action ScriptLecture dans la fenêtre Distribution. 2 Cliquez sur le bouton Script de l'acteur dans l'angle supérieur droit de la fenêtre. Bouton Script de l'acteur La fenêtre Script s'ouvre et le script Lingo de l'acteur ScriptLecture est désormais visible. 3 Placez le point d'insertion à la fin de la deuxième ligne du gestionnaire, à savoir : sprite(1).movieRate = 1 4 Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh) et tapez le texte suivant sur la nouvelle ligne : sound(1).play(member("track1")) Il indique à Director de lire l'acteur audio nommé track1 sur la piste audio 1. Le scénario contient deux pistes audio. Cependant, Lingo vous permet d'utiliser jusqu'à huit pistes audio. 5 Fermez la fenêtre Script et enregistrez votre animation. 6 Rembobinez et lisez votre animation. Le son track1 est maintenant lu chaque fois que vous cliquez sur le bouton Lire dans la séquence audio et vidéo de l'animation. Modifier le script du bouton Pause Vous allez maintenant modifier l'acteur ScriptPause pour suspendre le contenu audio lorsque l'utilisateur clique sur le bouton Pause de la scène pour mettre la vidéo en pause. 1 Sélectionnez l'acteur ScriptPause dans la fenêtre Distribution. Cliquez sur le bouton Script de l'acteur dans l'angle supérieur droit de la fenêtre Distribution. La fenêtre Script s'ouvre et le script Lingo ScriptPause s'affiche. 2 3 Placez le point d'insertion à la fin de la deuxième ligne du gestionnaire, à savoir : sprite(1).movieRate = 0 4 Appuyez sur Entrée (Windows) ou sur Retour (Macintosh). Sur la nouvelle ligne, tapez : sound(1).pause() ADOBE DIRECTOR 11.0 36 Créer une animation élémentaire Cette instruction indique à Director de suspendre le contenu audio sur la piste audio 1. 5 Fermez la fenêtre Script et enregistrez votre animation. Cliquez ensuite sur le bouton Pause dans la séquence audio et vidéo de l'animation. Le contenu audio et le contenu vidéo sont suspendus en même temps. La vidéo et le son reprennent lorsque vous cliquez une nouvelle fois sur le bouton Lire de l'animation. Modifier le script du bouton Rembobiner Vous pouvez modifier l'acteur ScriptRembobiner pour interrompre le contenu audio lorsque l'utilisateur clique sur le bouton Rembobiner. 1 Sélectionnez l'acteur ScriptRembobiner dans la fenêtre Distribution. 2 Cliquez sur le bouton Script de l'acteur dans l'angle supérieur droit de la fenêtre Distribution. 3 Dans la fenêtre Script, placez le point d'insertion à la fin de la troisième ligne du gestionnaire, à savoir : sprite(1).movieRate = 0 4 Appuyez sur Entrée (Windows) ou sur Retour (Macintosh). Sur la nouvelle ligne, tapez : sound(1).stop() Cette instruction indique à Director d'arrêter le contenu audio sur la piste audio 1. 5 Fermez la fenêtre Script et enregistrez votre animation. A présent, lorsque vous cliquez sur le bouton Rembobiner de la séquence audio et vidéo de l'animation, la vidéo se rembobine et la lecture de la piste audio s'arrête. La vidéo et le son reprennent lorsque vous cliquez sur le bouton Lire de l'animation. Ajouter des sons aux boutons Le dernier effet à ajouter produit un bref effet audio lorsque l'utilisateur clique sur l'un des boutons de contrôle vidéo dans la séquence audio et vidéo. Le fichier audio est de petite taille et il n'y a donc aucune raison de ne pas l'importer directement dans le fichier Director. Vous allez ensuite ajouter une fonction play à chacun des scripts associés aux boutons de contrôle vidéo. Cette commande lit le nouvel acteur audio sur la seconde piste audio. 1 Choisissez Fichier > Importer. 2 Dans la boîte de dialogue Importer les fichiers, parcourez l'arborescence du dossier Director pour accéder à Tutorials/Basics/BasicsMedia/Sounds. 3 Sélectionnez le fichier button.wav et cliquez sur le bouton Ajouter. 4 Dans le menu local Médias, sélectionnez Importation standard. 5 Cliquez sur le bouton Importer. 6 Le nouvel acteur son s'affiche dans la fenêtre Distribution, dans la miniature disponible suivante. 7 Sélectionnez l'acteur ScriptRembobiner dans la fenêtre Distribution. 8 Cliquez sur le bouton Script de l'acteur dans l'angle supérieur droit de la fenêtre Script. 9 Dans la fenêtre Script, créez une nouvelle ligne située après la première ligne du gestionnaire. 10 Sur la nouvelle ligne, tapez l'instruction Lingo suivante : sound(2).play(member("button")) Le chiffre (2) désigne la deuxième piste audio. ADOBE DIRECTOR 11.0 37 Créer une animation élémentaire 11 Fermez la fenêtre Script et enregistrez votre animation. 12 Répétez les étapes 6 à 10 pour les acteurs ScriptLecture et ScriptPause. Vous avez maintenant terminé l'étape de création de votre animation Director. Vous pouvez lire l'animation et passer d'une séquence à l'autre à l'aide des boutons de navigation que vous avez créés. Vous pouvez contrôler la lecture de la vidéo numérique à l'aide des boutons graphiques bitmap que vous avez ajoutés. Vous allez maintenant publier l'animation sur le Web. Publication de l'animation En règle générale, il suffit de choisir Fichier > Publier pour publier une animation sur le web. A l'aide des paramètres de publication par défaut, Director crée une version Shockwave de l'animation avec l'extension DCR, dans le même répertoire que l'animation d'origine. Une page HTML contient les balises nécessaires à l'intégration de l'animation. La fenêtre du navigateur s'affiche et la lecture du contenu Shockwave commence. Avant d'utiliser la vidéo QuickTime, il vous reste quelques étapes à exécuter pour vous assurer que l'animation sera lue correctement. Le cas échéant, ces étapes impliquent de spécifier le téléchargement d'une extension Xtra QuickTime sur le système de l'utilisateur et de placer les fichiers dans un dossier spécifique, si l'animation doit être publiée sur un ordinateur local. Pour publier votre animation, vous devez au préalable de l'enregistrer. Une animation non enregistrée ne peut pas être publiée. Les distributions externes (.cst) utilisées dans une animation que vous publiez sont automatiquement copiées dans le répertoire de publication. Utiliser une extension Xtra QuickTime Les extensions Xtras sont des composants logiciels complétant les fonctionnalités du contenu et des projections Shockwave. Une extension Xtra QuickTime est nécessaire pour s'assurer que l'animation QuickTime que vous avez créée sera lue correctement, une fois publiée. Au moment où vous avez importé l'animation QuickTime, Director a quant à lui automatiquement ajouté les extensions Xtra QT3 Asset à la liste des extensions Xtras de votre animation. Vous devez maintenant sélectionner cette extension Xtra dans la liste pour le mettre à la disposition de vos utilisateurs. 1 Choisissez Modification > Animation > Xtras. 2 Dans la boîte de dialogue Xtras de l'animation, sélectionnez l'extension Xtra suivante en fonction de votre système d'exploitation : • Sous Windows, sélectionnez QT6Asset.x32. • Sur Macintosh, choisissez QuickTime Asset. Remarque : Les deux versions de l'extension Xtra QuickTime fonctionnent sur les deux plates-formes. 3 Activez la case à cocher Télécharger si nécessaire. 4 Cliquez sur le bouton OK. 5 Enregistrez votre animation. L'extension Xtra est ensuite transférée de manière totalement transparente sur l'ordinateur de l'utilisateur, à partir d'un serveur sécurisé, si l'utilisateur ne dispose pas encore de cette extension Xtra. ADOBE DIRECTOR 11.0 38 Créer une animation élémentaire Changer les paramètres de publication et publier l'animation Lorsque vous utilisez la commande Publier, vous pouvez profiter des paramètres de publication par défaut de Director ou les modifier dans la boîte de dialogue Paramètres de publication. L'animation du didacticiel va être publiée à l'aide de la page HTML de détection de Shockwave qui ajoute non seulement les balises OBJECT et EMBED nécessaires pour afficher correctement votre animation dans un navigateur, mais intègre également du code JavaScript pour déterminer si l'utilisateur de votre animation dispose de la version correcte de Shockwave Player. Si nécessaire, un message s'affiche pour conseiller à l'utilisateur de mettre sa version de Shockwave Player à jour. 1 Choisissez Fichier > Paramètres de publication. 2 Dans l'onglet Formats de la boîte de dialogue Paramètres de publication, sélectionnez les formats fichiers Shockwave (DCR) et HTML. Aucune autre option de publication ne doit être sélectionnée. 3 Vérifiez que l'option Aperçu après la publication est sélectionnée. 4 Dans l'onglet Fichiers, vérifiez que l'option Copier les fichiers liés et dépendants est sélectionnée. 5 Cliquez sur OK. 6 Enregistrez votre animation. 7 Choisissez Fichier > Publier. Le navigateur s'ouvre pour lire l'animation du didacticiel. Lors de l'enregistrement de l'animation, Director enregistre également toutes les éventuelles modifications apportées à la boîte de dialogue Paramètres de publication. La prochaine fois que vous procéderez de la sorte pour publier cette animation, il vous suffira de choisir Fichier > Publier, sans devoir modifier à nouveau les paramètres de la boîte de dialogue Paramètres de publication. Récapitulatif de ce que vous avez appris Ce didacticiel vous a familiarisé avec les tâches et procédures de base utilisées pour créer des animations Director. Vous savez à présent comment : • Importer des acteurs • Changer les propriétés des acteurs • Créer des images-objets • Utiliser des encres • Animer des images-objets • Créer des graphiques bitmap • Créer des formes vectorielles • Créer des acteurs boutons • Changer le scénario • Utiliser des sons • Rédiger de simples scripts Lingo • Publiez votre animation en vue de la lecture sur le web ">
Enlace público actualizado
El enlace público a tu chat ha sido actualizado.