Jusqu'à présent, nous avons examiné les films Flash qui ont été lus sans intervention du spectateur du début à la fin. Cependant, Flash permet également de créer des applications interactives dans lesquelles l'utilisateur peut contrôler l'affichage du contenu. Dans cette leçon, nous allons commencer à nous familiariser avec les éléments du langage de script Action Script et voir comment vous pouvez l'utiliser pour créer des applications interactives. À titre d'exemple, créons un album photo avec des éléments d'une interface interactive. Mais avant de passer à la description d'Action Script, il est nécessaire de parler d'un autre type de symboles que nous avons laissé sans attention jusqu'à présent - ce sont des symboles de bouton. Pour construire une interface interactive, ils sont simplement nécessaires.
Création de boutons
Le bouton est un clip vidéo interactif à quatre images. Lorsque nous définissons un symbole sur un type de bouton, Flash crée une chronologie de quatre images pour le nouveau symbole :
Up-state est un cadre correspondant à la situation dans laquelle le bouton n'est pas enfoncé et le pointeur de la souris n'est pas sur le bouton ;
Over-state - un cadre illustrant l'apparence d'un bouton lorsque le pointeur de la souris est sur le bouton, mais que le bouton n'est pas enfoncé ;
Down-state - ce cadre montre l'apparence du bouton lorsqu'il est enfoncé ;
Hit-state - définit la zone dans laquelle le bouton réagit au clic de la souris ; cette zone n'est pas visible dans le clip.
Pour créer un bouton, exécutez la commande Insérer => Nouveau symbole (vous pouvez taper le raccourci clavier Ctrl + F8). Dans la boîte de dialogue Créer un nouveau symbole qui s'affiche, saisissez un nom pour le symbole de bouton (par exemple, but1) et sélectionnez le type de symbole de bouton.
Flash passera en mode d'édition de symboles, fournissant les images Haut, Plus, Bas et Hit. La première image, Up, devient une image clé vide. Dessinons une vue non enfoncée du bouton dans ce cadre (Fig. 1).
Riz. 1. Cadre du bouton UP
Sélectionnons le deuxième cadre, marqué comme Over et correspondant à l'état lorsque le curseur est placé sur le bouton. Insérons une image clé dans cette image (par la commande Insert => Keyframe), à la suite de laquelle une image clé apparaît qui répète complètement le contenu de l'Up-frame. Modifions la couleur du bouton comme indiqué sur la fig. 2.
Fig 2. Over-frame d'un bouton
De même, ajoutez le cadre suivant (Down-frame) et dessinez l'état enfoncé du bouton (Fig. 3).
Riz. 3. Boutons de cadre inférieur
Nous ne dessinerons encore rien dans le cadre Hit, mais nous reviendrons sur ce cadre un peu plus tard.
Allons à la scène principale, appelons la bibliothèque à l'aide de la commande Fenêtre => Bibliothèque et créons une instance du symbole du bouton en le faisant glisser sur la scène (Fig. 4.)
Riz. 4. Créons une instance du bouton en le faisant glisser depuis la bibliothèque
En conséquence, nous obtenons le film suivant. Comme vous pouvez le voir dans ce film, le bouton est enfoncé non seulement lorsque nous cliquons sur la zone centrale (de travail) du bouton, mais également lorsque nous cliquons sur le cadre qui l'entoure. Cela est dû au fait que si le Hit-frame n'est pas dessiné, la zone de travail du bouton correspondra au Up-frame.
Pour que le bouton soit enfoncé uniquement dans la zone de travail, il est nécessaire de définir cette zone dans le cadre Hit, c'est-à-dire dessiner un bouton sans cadre (voir Fig. 5)
Riz. 5. Hit-frame du bouton
Après avoir ajouté le Hit-frame requis, nous obtiendrons le film suivant, dans lequel appuyer sur le cadre n'appuie pas sur le bouton.
Pour rendre un bouton interactif, il faut associer le fait d'appuyer sur le bouton à l'exécution de certaines commandes, c'est-à-dire décrire un certain scénario. Pour les scripts dans Flash, il existe un langage spécial appelé Action Script. Dans cette leçon, nous n'aborderons qu'une petite partie des capacités de ce langage, et à l'avenir nous reviendrons sur la structure et la syntaxe d'Action Script à mesure que les exemples de création de films interactifs en Flash deviennent plus complexes.
Comprendre le script d'action
Action Script est un langage de script, un ensemble d'instructions qui contrôlent les éléments d'une animation Flash. Les scripts d'action peuvent être intégrés au film ou stockés dans un fichier texte externe avec l'extension AS.
Lorsque vous intégrez un script dans un film, vous pouvez l'intégrer dans différentes parties du film. Plus précisément, les scripts d'action peuvent contenir des images clés, des occurrences de bouton et des occurrences de clip. En conséquence, les scénarios sont appelés Frame Action, Button Action et MovieClip Action.
Les scripts d'action sont exécutés lorsque certains événements sont déclenchés par l'utilisateur ou le système. Le mécanisme qui indique à Flash quelle instruction exécuter lorsqu'un événement se produit s'appelle un gestionnaire d'événements.
Action Script a sa propre syntaxe, un peu comme JavaScript. Flash MX 2004 prend en charge Action Script de toutes les versions précédentes de Flash.
L'un des concepts de base d'Action Script est Actions - des commandes qui émettent des instructions lors de l'exécution d'un fichier SWF. Par exemple, gotoAndStop () envoie la tête de lecture (Playhead) vers une image ou une étiquette spécifique. Le nom du langage vient du mot Actions - Action Script (littéralement - action script). Nous allons nous familiariser avec la plupart des concepts de ce langage sur des exemples spécifiques.
Album photo interactif
Montrons comment utiliser les boutons pour contrôler un album photo - créez un ensemble de photos et ajoutez deux boutons qui feront défiler la photo d'avant en arrière.
Placez la première photo sur la timeline principale et ajoutez un bouton de l'ensemble standard. Pour accéder au dossier souhaité, exécutez la commande Windows => Panneaux de configuration Bibliothèques communes => Boutons (Fig. 6).
Riz. 6. Ajouter un bouton de la bibliothèque standard
À la suite de l'exécution de cette commande, un panneau apparaîtra contenant un grand nombre de boutons pré-dessinés de différents types. Sélectionnons, par exemple, Key Buttons (boutons qui ressemblent à des touches de clavier), ouvrons le dossier correspondant, sélectionnons le bouton key-left (Fig. 7) et créons une instance de ce bouton (en le faisant glisser sur la scène).
Riz. 7. Éléments du dossier Key Buttons
Notez que lorsque vous placez le deuxième bouton (touche à droite) sur la scène et que vous le déplacez pour l'aligner avec le premier bouton, le programme donne un indice (ligne pointillée) qui vous permet de positionner précisément le bouton (Figure 8).
Riz. 8. Alignement automatique des boutons au même niveau
Pour ajouter un script, vous devez appeler l'éditeur de script d'action par la commande Fenêtre => Panneaux de développement => Actions ou en appuyant sur la touche F9. Si vous allez souvent écrire des scripts, alors cette commande clavier mérite d'être rappelée. En conséquence, l'éditeur Action Script apparaît (Fig. 9).
Riz. 9. Panneaux de l'éditeur Action Script
Si vous expérimentez en mettant en évidence différents éléments de la scène tout en surveillant les messages dans les panneaux de l'éditeur Action Script, vous constaterez que le programme vous demande sur quel élément vous pouvez « accrocher » le code. Si vous sélectionnez une image sur la scène, dans le coin supérieur gauche du panneau de l'éditeur apparaît l'inscription Actions - Frame, si vous cliquez sur le bouton, l'inscription Actions - Button apparaîtra, c'est-à-dire que le programme vous invite à le code saisi fera référence au script du bouton. Et si vous sélectionnez une photo, alors dans le champ destiné à la saisie du script, un message apparaîtra : La sélection actuelle ne peut pas avoir d'action appliquée (le script ne peut pas être appliqué à cet objet sélectionné).
Nous allons attribuer un script à un bouton. Dans les versions récentes d'ActionScript, vous avez la possibilité d'écrire du code centralisé, c'est-à-dire du code qui réside à un seul endroit, ce qui vous permet de mieux comprendre les grands programmes. Cependant, dans les exemples simples (que nous examinons), l'affectation d'un script à un bouton convient parfaitement.
Ainsi, pour le bouton avec la flèche gauche, nous devons formaliser le scénario suivant : "Si le bouton est relâché sur une certaine trame, alors à partir de cette trame il faut passer à la trame précédente." Conformément à la syntaxe du langage Action Script (Fig. 10), cela ressemblera à ceci :
La première ligne contient le gestionnaire d'événements du bouton on (), qui a le format suivant :
Ajoutons maintenant plusieurs images clés pour que les boutons créés dans la première image y soient copiés, et plaçons les photos nécessaires dans les images nouvellement créées.
Si vous démarrez le film créé pour l'exécution, les images seront lues en continu les unes après les autres, et donc, tout d'abord, nous devons donner la commande « Stop » sur la première image. Pour ce faire, ajoutez la commande appropriée au premier cadre (Fig. 11).
Riz. 11. Script affecté à la première image
Attention : la commande n'est plus affectée au bouton, mais au cadre. Le fait qu'un script ait été affecté au cadre est noté sur la chronologie principale - une lettre minuscule "a" apparaît au-dessus du point en gras dans la désignation du cadre.
En conséquence, nous avons obtenu le film suivant.
Si nous n'avons que quelques cadres dans l'album photo, alors deux boutons - "Suivant" et "Retour" - suffisent amplement, mais si l'ensemble de photos est volumineux, il est alors souhaitable d'avoir également des boutons qui envoient au début et la fin du film. Dans l'exemple suivant, nous ajouterons les boutons correspondants : "Au premier cadre" et "Au dernier cadre". Vous pouvez sélectionner des boutons d'un mnémonique approprié dans la bibliothèque standard de boutons du dossier Circle Buttons (Fig. 12).
En utilisant cet exemple, nous allons nous familiariser avec une autre commande gotoAndStop(), qui vous permet d'aller à l'image souhaitée puis de vous arrêter.
Riz. 12. Boutons du dossier Circle Buttons
Sur le bouton pour aller à la première image (la troisième en partant de la gauche sur la figure 13), nous ajouterons le code, comme indiqué sur la figure. 13.
Riz. 13. Scénario pour le bouton "Vers la première image"
Dans le cas d'un album photo de cinq cadres, ajoutez le script de transition "Au dernier cadre" au dernier bouton :
Scripts automatisés
Jusqu'à présent, nous avons tapé toutes les commandes manuellement, mais les panneaux de l'éditeur ActionScript fournissent une variété de services de script automatisés. Considérons ces possibilités.
Riz. 14. Outils de script automatisés
Le volet Éditeur de script d'action vous permet de sélectionner, glisser-déposer, repositionner et supprimer des commandes.
Montrons comment vous pouvez écrire le même script pour le bouton "Forward" en mode automatisé. En sélectionnant le dossier Movie Clip Control (fenêtre en haut à gauche de la figure 14), vous pouvez accéder au gestionnaire d'événements on, puis soit double-cliquer sur l'élément correspondant, soit faire glisser l'expression sur le champ d'écriture du script en mode glisser-déposer.
Riz. 15. Astuce pour compléter l'expression
En conséquence, l'expression nécessaire et un indice du formulaire apparaîtront sur le champ de travail (Fig. 15): vous sélectionnez la commande requise dans le menu et l'expression est complétée automatiquement. Comme vous pouvez le voir dans le menu, vous pouvez sélectionner non seulement la condition associée aux boutons à l'écran - vous pouvez également sélectionner dans le menu fig. Touche 15 clauseAppuyez sur "
Riz. 16. Accéder à un bouton du clavier
Utilisation de la commande keyPress "
Riz. 17. La commande nextFrame se trouve dans le dossier Timeline Control
Pour le bouton qui transfère le film au début de l'album photo, vous pouvez sélectionner en appuyant sur la touche Accueil dans le menu en tant qu'événement, puis (Fig. 18) faire glisser la commande gotoAndStop sur le champ, à la suite de quoi un autre un indice sur la syntaxe possible de cette commande apparaîtra.
Les flèches dans l'info-bulle vous montrent les différentes options de syntaxe. Le programme propose deux options (Fig. 18 et 19), c'est-à-dire qu'il propose de définir une scène et un cadre, ou simplement un cadre. Dans notre cas, il suffit de spécifier uniquement le cadre (Frame). Si le nom de la scène est omis, alors par défaut la transition vers l'image de la scène actuelle est effectuée.
Riz. 18. Astuce sur la syntaxe de commande possible
Riz. 19. Le triangle fléché vous permet de parcourir les options de syntaxe
Après avoir affecté tous les boutons aux boutons du clavier correspondants, nous obtiendrons le film suivant, où la pagination des photos aura lieu à partir du clavier, et cliquer sur les boutons à l'écran avec la souris n'aura aucune conséquence.
Est-il possible de proposer un scénario dans lequel différents événements conduiront aux mêmes actions ? Il s'avère que c'est possible - pour cela, dans le gestionnaire d'événements on, vous devez énumérer la liste des noms d'événements. Si vous mettez une virgule dans la liste des événements après le premier événement, le programme lui-même vous proposera un menu (Fig. 20).
Riz. 20. Lorsque vous saisissez une virgule dans la liste des événements, un menu de commandes supplémentaires apparaît automatiquement
Ajoutons au premier événement (en appuyant sur le bouton du clavier) le deuxième événement (en relâchant le bouton à l'écran) :
activé (touche Appuyez sur " |
Répétons la procédure pour le reste des boutons et, en conséquence, nous obtiendrons un album photo, dans lequel la pagination des photos aura lieu à la fois avec la souris et avec le clavier (le fichier FLA original peut être obtenu à partir du relier).
Dans l'exemple considéré, nous avons utilisé la transition par numéro de trame, mais cette méthode n'est pas toujours pratique : si la numérotation des trames change au cours du processus d'édition, la logique peut être rompue. Il est plus pratique d'utiliser la transition par repère d'image. Prenons un exemple qui nécessite non seulement de parcourir l'album, mais également de passer à différentes sections, c'est-à-dire une navigation plus complexe.
Que l'album soit composé de dessins, d'infographies et de photographies.
Le premier cadre de la section "images" sera intitulé Images, de la même manière que les premiers cadres des autres sections, nous attribuerons les étiquettes graphiques et photo.
Créez un calque de placement d'étiquettes et nommez-le Lables. Pour mettre une marque sur un cadre, dans le panneau Propriétés, sélectionnez le type de marque Nom et notez son nom. Dans notre cas, Images (Fig. 21). Placez les étiquettes de la même manière dans les cadres 5 et 10 (Fig. 22).
Riz. 21. Un exemple d'attribution d'une étiquette à un cadre
Ajoutez maintenant un nouveau calque et nommez-le Actions. Dans la première image clé du calque Actions, appelez le panneau Actions Frame (en appuyant sur la touche F9) et tapez la commande stop () (voir Fig. 22)
Riz. 22. Scénario de la première trame
Ajoutez un autre calque appelé Sujets, dans lequel nous donnerons des titres aux cadres correspondants : « Images » (Fig. 23), « Graphiques » et « Photos ».
Riz. 23. Titre pour les cadres de la section "Images"
Ajoutez maintenant du côté des boutons de menu avec les mêmes noms, que nous placerons sur un nouveau calque appelé Menu.
Imprimons le premier élément de menu "Images" à partir du bord gauche et traduisons-le en un symbole de bouton. A l'aide de l'outil Flèche, sélectionnez le bloc de texte "Images" et exécutez la commande Modifier => Convertir en symbole (vous pouvez également exécuter cette commande à l'aide de la touche F8), dans le panneau Convertir en symbole, définissez le type de symbole Bouton et définissez son nom comme pictureButton (Fig. 24 ).
Riz. 24. Attribuez le nom du PictureButton au bouton de la transition vers la section d'images
Créons quatre cadres pour le bouton "Images": le premier représentera simplement le texte original (Fig. 25), le second - le même texte uniquement en bleu, nous sauterons le troisième cadre (dans ce cas, le Bas- frame sera le même que le Over-frame ), et dans le Hit-frame, dessinez une zone rectangulaire qui définira la zone où le bouton est enfoncé (Fig. 26).
Riz. 25. Up-frame du pictureButton
Riz. 26. Hit frame du pictureButton
Maintenant, nous devons accrocher le script sur le bouton nouvellement créé. Pour ce faire, sélectionnez le bouton dans la scène 1 et, en appuyant sur F9, appelez le panneau Actions, puis ajoutez le code illustré à la Fig. 27.
Riz. 27. Scénario de transition vers un cadre avec une étiquette
Vous êtes-vous déjà demandé ce qui se cache derrière la belle animation des bannières sur Internet ? Ou des dessins animés de dernière génération créés à l'aide de la technologie informatique ? Le plus souvent, ils sont basés sur la "chair", ou plutôt, c'est ainsi que le nom de la technologie Flash est traduit de l'anglais. Aujourd'hui nous allons parler d'animation flash pour le site :
Technologie flash
Le framework multimédia a été développé par Macromedia. Mais après son acquisition (fusion), tous les droits sur la technologie ont été transférés au nouveau propriétaire - Adobe Systems.
Le domaine d'utilisation moderne d'Adobe Flash :
- La création d'applications Web est une direction relativement nouvelle. Comprend l'utilisation totale ou partielle de Flash pour créer des sites Web. En application partielle, grâce à cette technologie, des éléments de conception individuels sont créés : divers menus interactifs, boutons animés, etc.
Par rapport aux ressources html conventionnelles, les sites flash présentent certaines fonctionnalités qui limitent leur utilisation. Cela inclut le coût de développement élevé, les ressources serveur exigeantes, les longs temps de téléchargement avec des connexions Internet lentes et certains autres aspects :
- Mise en œuvre de capacités multimédia - pour écouter de l'audio et lire des vidéos sur des sites, des lecteurs multimédias créés sur la base de Flash sont souvent utilisés. Leur développement inclut l'utilisation de l'un des langages de script (le plus souvent JavaScript) :
- Dans la publicité en ligne, la technologie est le plus souvent utilisée pour créer des bannières animées. Ils impliquent non seulement la diffusion d'annonces multimédias, mais également une sorte d'interaction avec l'utilisateur basée sur un jeu.
Bases et outils de développement Flash
Pour créer des animations Flash, les outils traditionnels d'Adobe sont le plus souvent utilisés :
- Adobe Flash Professional - un programme de création d'animation interactive (animateur);
- Adobe Flash Builder - un environnement pour créer une interface d'application Web ;
- Adobe Flash Player est un lecteur intégré au navigateur pour lire Flash.
En plus de cela, un certain nombre d'applications tierces peuvent lire ce type de contenu multimédia. Les plus populaires d'entre eux sont Gnash, QuickTime et quelques autres :
Cette technologie permet d'afficher tout type de graphiques ( raster, vecteur, 3D). Et prend également en charge le streaming de données audio et vidéo. Une version allégée de Flash Lite a été développée spécifiquement pour les appareils mobiles.
La norme principale pour les fichiers Flash est l'extension SWF. L'abréviation signifie Small Web Format. La vidéo enregistrée en Flash a les extensions de fichier FLV, F4V.
Le graphisme vectoriel est au cœur du développement de l'animation interactive sur Flash. C'est grâce à cela qu'il a été possible de mettre en place le support de la plateforme multimédia et l'indépendance de la qualité de l'animation par rapport à la résolution de l'écran.
La taille du fichier de l'application Flash est la même pour tous les utilisateurs, quelle que soit la spécification de l'écran (résolution).
L'animation interactive Flash est basée sur le morphing (type vectoriel), dans lequel il y a un flux lent entre les images clés. Pour lire les données, un lecteur flash est utilisé, dont le fonctionnement est à bien des égards similaire au fonctionnement de la machine virtuelle JavaScript. Le composant logiciel de la technologie est implémenté à l'aide du langage ActionScript.
Les inconvénients de la technologie incluent les points suivants:
- Forte charge sur le processeur central de la machine cliente. Cela est dû à la faible efficacité de la machine virtuelle flash, qui est intégrée au lecteur dans le navigateur de l'utilisateur ;
- Forte probabilité d'erreurs - L'animation Flash peut être lue avec une forte probabilité d'erreurs. De plus, les défaillances de la lecture Flash affectent négativement le fonctionnement de l'ensemble de l'application cliente (navigateur). Cela est dû à un contrôle insuffisant de la tolérance aux pannes du code du programme lors de la création d'applications flash ;
- Échec de l'indexation - Tout le contenu texte affiché dans le contenu Flash ne participe pas au processus d'indexation. Cette limitation est particulièrement problématique pour les ressources basées sur cette technologie.
Présentation du logiciel de création Flash tiers
Sothink SWF Quicker a été pris comme un prototype d'application pour démontrer les bases de la création de Flash. Selon de nombreux professionnels, le programme est le plus compréhensible et le plus facile à apprendre.
En plus de créer et d'éditer, l'éditeur flash "sait" travailler avec tous les autres types d'animation web (GIF, HTML et autres standards) :
Après l'installation, accédez à l'interface conviviale du programme. Malheureusement, après avoir erré dans tous les coins et recoins du sélecteur de langue de l'interface, nous ne l'avons pas trouvé.
Afin de comprendre comment créer une animation Flash dans cette application, nous utiliserons les modèles intégrés. La boîte de dialogue "Nouveau à partir d'un modèle" apparaît immédiatement après le démarrage du programme. De plus, il peut être appelé via l'élément de menu principal "Fichier". Parmi les options proposées, nous avons choisi de créer une bannière :
Dans la fenêtre suivante de l'assistant, dans la liste déroulante, vous devez sélectionner un modèle selon lequel l'animation sera créée. En dessous se trouve un petit cadre dans lequel le modèle sélectionné est lu :
Dans les étapes suivantes, vous devez définir les dimensions de la bannière et saisir 5 phrases de texte qui seront jouées dans l'animation. De plus, vous devez préciser l'adresse de la ressource vers laquelle l'utilisateur sera dirigé en cliquant sur la bannière :
Après avoir compilé le projet et fermé la fenêtre de l'assistant, vous pouvez visualiser la vidéo résultante dans le lecteur intégré. Pour cela, cliquez sur la flèche verte en haut :
Après avoir fermé le lecteur, examinons de plus près l'interface de l'application. Veuillez noter qu'il se compose de deux fenêtres principales : la supérieure est destinée à éditer l'intervalle de temps de la vidéo et la inférieure est un éditeur graphique normal. Chacun des éléments est situé sur un calque séparé, qui peut être modifié à l'aide d'outils standard situés dans la barre latérale.
Utiliser des scènes
Comme vous le savez, Flash permet de créer des films assez complexes pouvant contenir des éléments interactifs, des animations, des clips, etc. Naturellement, il y a un besoin de stocker et de rechercher divers éléments du film. Si vous travaillez sur un projet important et complexe, il est conseillé de le scinder en plusieurs fragments gérables, chacun contenant une séquence d'événements spécifique (animation, dialogue interactif avec l'utilisateur, etc.). Cela permettra de simplifier considérablement le travail. Les scènes jouent le rôle de tels fragments dans les animations Flash. Ce sont des films miniatures logiquement complets qui forment ensemble un seul film Flash. Lors de la création de grands projets, l'utilisation de scènes peut considérablement gagner du temps.
Qu'est-ce qu'une scène
La création de scènes est une technique efficace qui vous permet de diviser un projet spécifique en morceaux gérables séparés. Chaque scène, comme déjà mentionné, est un film miniature. Le nombre de scènes utilisées dans une animation Flash n'est limité que par la quantité de mémoire de l'ordinateur. Les scènes sont jouées séquentiellement, dans l'ordre spécifié dans le panneau Scène, et tout en étant indépendantes, en même temps étroitement liées. Pendant la lecture, il n'y a jamais de retard notable entre eux. Les possibilités d'utilisation des scènes sont variées et presque illimitées. Par exemple, lorsque vous travaillez sur un projet de site Web, vous pouvez implémenter des sections et des sous-sections sous forme de scènes. Récemment, les courts métrages d'animation Flash, dont le contenu peut être divisé en parties logiques au moyen de scènes, sont devenus de plus en plus populaires sur le Web.
Panneau de scène
La liste des scènes contenues dans le film est accessible via le panneau Scène.
on), qui s'ouvre lorsque vous appelez la commande Fenêtre> Panneaux de conception> Scène (Fenêtre> Panneaux de conception> Scène). Ce panneau vous permet d'afficher une liste des scènes disponibles
et définissez l'ordre de leur lecture dans le film - il est déterminé par l'ordre des scènes dans la liste. De plus, à l'aide du panneau Scène, vous pouvez dupliquer, ajouter, supprimer et déplacer des scènes dans la liste.
Le menu Options du panneau Scène ne contient que trois commandes : Agrandir le panneau, Fermer le panneau et Aide.
Panneau de scène
Panneau d'édition
Le panneau d'édition est situé au-dessus de la timeline, sous le menu principal du programme. Pour ouvrir le panneau, utilisez la commande Fenêtre> Barres d'outils> Modifier. Vous avez déjà utilisé ce panneau lorsque vous travailliez avec la fenêtre de l'éditeur de symboles pour quitter le mode d'édition de symboles (voir le chapitre 6). Cette section traitera de la fonctionnalité du panneau d'édition pour travailler avec des scènes.
Le panneau Modifier contient le nom de la scène actuelle (dans la figure, la scène actuelle est la scène 2). Vous pouvez passer à une autre scène à l'aide du bouton Modifier la scène situé sur le côté droit du panneau Modifier, et le nom de la scène sélectionnée sera affiché sur la ligne. La fonctionnalité du bouton Modifier la scène est décrite dans la section "Changement de scène".
Menu du bouton Modifier la scène
Création et manipulation de scènes
Comme mentionné, le panneau Scène, que vous ouvrez avec Fenêtre> Panneaux de conception> Scène, sert à travailler avec des scènes. Dans cette section, vous apprendrez comment utiliser ce panneau pour ajouter, dupliquer, renommer et réorganiser des scènes.
Ajouter une scène
Au fur et à mesure que la complexité de votre projet augmente, vous devrez constamment ajouter de nouvelles scènes pour distribuer des morceaux logiques de son contenu. Vous pouvez le faire à l'aide du panneau Scène. Pour ajouter une scène, procédez comme suit.
Assurez-vous que le document requis est ouvert. Choisissez Fenêtre> Panneaux de conception> Scène pour ouvrir le panneau Scène.
Cliquez sur le bouton Ajouter une scène, situé dans le coin inférieur droit du panneau, ou appelez la commande Scène du menu Insertion. Après ces actions, le nom de la nouvelle scène apparaîtra dans la fenêtre du panneau Scène. Par défaut, chaque nouvelle scène est nommée avec un numéro séquentiel qui est un de plus que le nom de la scène actuellement sélectionnée (par exemple, Scène 1, Scène 2, etc.). Le nom est placé dans la liste en conséquence.
Sélectionnez une nouvelle scène dans le panneau Scène et créez son contenu. Lorsque vous créez une nouvelle scène, Flash y bascule automatiquement.
Liste des scènes dans le panneau Scène
Supprimer une scène
Vous pouvez supprimer une scène de cette façon.
Ouvrez le panneau Scène en allant dans Fenêtre> Panneaux de conception> Scène. Sélectionnez la scène que vous souhaitez supprimer.
Cliquez sur le bouton Supprimer la scène situé dans le coin inférieur droit du panneau. Pour confirmer la suppression de la scène, cliquez sur le bouton OK dans la boîte de dialogue qui s'ouvre.
Dupliquer une scène
Dans les chapitres précédents, nous avons déjà parlé de la création de doublons de divers éléments. Quant à copier une animation, et plus encore un projet complexe avec un grand nombre de scènes, ce processus serait assez lourd sans la fonction de duplication, qui permet de créer des copies exactes de n'importe quelle scène en appuyant sur un seul bouton.
Ouvrez le panneau Scène en allant dans Fenêtre> Panneaux de conception> Scène et sélectionnez la scène que vous souhaitez dupliquer.
Cliquez sur le bouton Dupliquer la scène situé dans le coin inférieur droit du panneau Scène.
La fenêtre du panneau Scène affichera le nom de la scène dupliquée. Notez qu'il se compose du nom de la scène originale et du mot soru (copie).
Scène en double
Renommer des scènes
Étant donné que les noms par défaut attribués aux doublons et aux nouvelles scènes ne diffèrent que par le numéro de séquence, il est difficile d'identifier la scène lors de la recherche d'un contenu spécifique. Par conséquent, dans les grands projets, il est conseillé d'attribuer des noms spéciaux aux scènes qui caractérisent leur contenu. Renommer une scène ne devrait pas prendre beaucoup de temps.
Ouvrez le panneau Scène en allant dans Fenêtre> Panneaux de conception> Scène et double-cliquez sur le nom de la scène que vous souhaitez modifier. Dans ce cas, il sera possible d'éditer le nom de la scène.
Saisissez un nouveau nom et appuyez sur la touche Retour/Entrée, ou double-cliquez en dehors du panneau Scène.
Renommer une scène dans le panneau Scène
Modification de l'ordre des scènes
L'ordre dans lequel les noms de scène sont placés dans le panneau Scène détermine l'ordre dans lequel les scènes du film sont lues. Les noms de scène dans ce panneau peuvent être déplacés pour définir l'ordre de lecture des scènes quel que soit l'ordre dans lequel elles ont été créées.
Ouvrez le panneau Scène en choisissant Fenêtre > Panneaux de conception > Scène.
Positionnez le pointeur de la souris sur le nom de la scène à réorganiser, maintenez le bouton gauche de la souris enfoncé, déplacez le pointeur à l'emplacement souhaité sur le panneau. Notez que lorsque vous déplacez le pointeur, une ligne bleue apparaît, indiquant une nouvelle position possible pour le nom de la scène dans la liste.
Déplacer une scène dans le panneau Scène
Basculer entre les scènes
Vous pouvez utiliser les aides à la navigation suivantes pour basculer entre les différentes scènes d'un film tout en travaillant sur un projet Flash.
Panneau de scène. Pour accéder à la scène souhaitée dans le film, cliquez sur le nom de la scène dans le panneau Scène. Rappelez-vous que le nom de la scène sélectionnée apparaît dans le panneau d'édition.
Bouton Modifier la scène. Lorsque vous cliquez sur ce bouton, situé sur le côté droit du panneau d'édition, vous accédez à un menu avec les noms de toutes les scènes du film. Pour accéder à la scène souhaitée, sélectionnez l'élément de menu correspondant.
Panneau de l'explorateur de films. Ouvert avec Fenêtre > Autres panneaux > Explorateur de films, ce panneau affiche la structure hiérarchique d'un film (voir chapitre 8) et vous permet de rechercher des scènes, des symboles et des instances de symboles ainsi que de remplacer du texte et des polices.
Les scènes sont représentées dans le panneau Movie Explorer en tant qu'éléments hiérarchiques d'ordre supérieur. Pour accéder à une scène spécifique, recherchez son nom dans le panneau Movie Explorer et cliquez dessus. Par défaut, ce panneau affiche le contenu de la scène sélectionnée uniquement. Pour afficher le contenu de toutes les scènes en même temps, activez la commande Afficher toutes les scènes dans le menu Options de ce panneau.
Panneau Movie Explorer avec liste de scènes
Test de scène
Pour tester le film créé directement dans l'environnement de développement Flash, vous devez appuyer sur la touche Retour / Entrée, mais dans ce cas les options de visualisation seront limitées à la scène sélectionnée. La lecture séquentielle de toutes les scènes n'est possible qu'après la publication du film ; Flash n'est plus nécessaire. Pour tester, suivez ces étapes.
Pour tester une seule scène, marquez-la dans le panneau Scène et appuyez sur Retour / Entrée, ou après avoir sélectionné une scène, ouvrez le menu Contrôle et activez la commande Tester la scène.
Pour tester le film, appelez la commande Tester le film du menu Contrôle ou utilisez la combinaison de touches Cmd / Ctrl + Retour / Entrée. Cela ouvrira une nouvelle fenêtre dans laquelle toutes les scènes du film seront lues dans l'ordre défini dans le panneau Scène.
Vous pouvez également lire toutes les scènes d'un film en choisissant Lire toutes les scènes dans le menu Contrôle.
Contrôle de scène avec ActionScript
Les scènes peuvent grandement simplifier l'organisation globale du contenu d'un film. La séquence de scènes spécifiée est utilisée pour rendre les films linéaires. Mais outre les avantages (par exemple, la lecture simultanée de deux scènes est exclue), les films linéaires présentent également des inconvénients liés à l'impossibilité de changer l'ordre de lecture des scènes. Pour résoudre ce problème, des scripts ActionScript (en particulier, des actions d'image) sont utilisés pour manipuler des scènes.
Pour plus d'informations sur la création de scripts ActionScript et l'utilisation des actions d'image, reportez-vous au chapitre 13. Cette section décrit certaines des actions que vous pouvez utiliser pour manipuler des scènes.
gotoAndStopO - lorsque cette action est appelée, une transition vers une scène et une image spécifiques se produit et la lecture du film s'arrête.
gotoAndPlay () - l'appel de cette action fait sauter la tête de lecture vers une scène et une image spécifiques (la lecture du film continue à partir de cette image).
play О - Cette action vous permet de continuer à lire le film après l'avoir arrêté.
stop О - avec cette action, vous pouvez arrêter la lecture du film.
Nous sommes constamment confrontés à l'animation flash - sur Internet et dans les émissions de télévision. La création d'animations Flash simples à l'aide de la technologie Flash est une tâche assez simple, car Flash propose de nombreux outils utiles qui simplifient l'ensemble du processus. Si vous souhaitez créer une animation flash ou un dessin animé, vous pouvez l'esquisser en quelques heures seulement.
Pas
Partie 1
Animation flash image par image- Par défaut, Flash lit 24 images par seconde (FPS). Cela signifie que 24 images seront affichées en une seconde, mais toutes ne doivent pas être différentes. Vous pouvez modifier ce paramètre (si vous le souhaitez) à 12 images par seconde, mais à 24 images par seconde, l'animation sera plus fluide.
-
Installez Flash Professionnel. Il existe de nombreux programmes d'animation Flash, mais le plus puissant est Adobe Flash Professional CC. Vous pouvez essayer ce programme gratuitement ou utiliser un autre produit (si vous ne souhaitez pas vous inscrire à Adobe Creative Cloud). Le reste de cet article décrit comment utiliser Flash Professional.
Étant donné que l'animation image par image nécessite plusieurs images (qui sont légèrement différentes les unes des autres), vous devez créer ces images manuellement. Pour ce faire, utilisez Adobe Flash Professional ou dessinez des images dans n'importe quel éditeur graphique.
- Si vous souhaitez que vos images se redimensionnent facilement sans perte de qualité, créez des images vectorielles plutôt que des graphiques raster. Les images vectorielles se redessinent lorsqu'elles sont redimensionnées (c'est-à-dire que vous évitez la pixellisation ou l'anticrénelage). Les bitmaps sont des images traditionnelles telles que des photographies, des images dessinées à la main, etc. Si vous essayez d'agrandir de telles images, vous obtiendrez une image très déformée.
-
Créez le premier cadre. Lorsque vous démarrez Adobe Flash Professional pour la première fois, vous verrez un canevas vierge (calque) et une chronologie vide. Au fur et à mesure que vous ajoutez des images, la chronologie se remplit automatiquement. Vous pouvez travailler avec des calques comme vous le faites dans Photoshop.
- Avant d'ajouter une image, créez un arrière-plan de base pour votre animation. Renommez "Couche 1" en "Arrière-plan", puis ancrez-le. Créez un deuxième calque et nommez-le comme vous le souhaitez. Ce sera le calque sur lequel vous allez créer votre animation.
- Ajoutez le dessin au canevas du premier cadre. Vous pouvez importer le dessin depuis votre ordinateur, ou vous pouvez utiliser les outils de dessin pour créer le dessin directement dans le programme.
- La première image est l'image "clé". Une image clé est une image qui comprend une image et forme l'épine dorsale d'une animation. Vous créerez une nouvelle image clé à chaque fois que vous modifierez l'image.
- Les images clés sur la timeline sont indiquées par un point noir.
- Vous n'avez pas besoin d'une image clé dans chaque image suivante. Créez une image clé toutes les quatre à cinq images pour faire une bonne animation.
-
Convertissez l'image en symbole. Dans ce cas, vous pouvez ajouter plusieurs fois l'image au cadre. Ceci est particulièrement utile si vous devez ajouter rapidement plusieurs images du même type dans une seule image (par exemple, des poissons dans un aquarium).
- Sélectionnez l'image. Faites un clic droit sur l'image et sélectionnez "Convertir en symbole". L'image sera ajoutée à la bibliothèque, ce qui la rendra plus facile à utiliser à l'avenir.
- Supprimez le dessin. Ne vous inquiétez pas, vous pouvez l'ajouter à votre cadre en le faisant simplement glisser et en le déposant depuis la bibliothèque. De cette façon, vous pouvez ajouter plusieurs fois la même image au cadre.
-
Ajoutez des cadres vides. Une fois que votre première image clé est prête, insérez des images vierges, puis procédez à la création de la deuxième image clé. Appuyez sur F5 (quatre ou cinq fois) pour ajouter des images vides après la première image clé.
Créez une deuxième image clé (après avoir ajouté des images vides). Il existe deux manières différentes de procéder : vous pouvez copier une image clé existante et y apporter de petits ajustements, ou vous pouvez créer une image clé vide et y ajouter une nouvelle image. Si vous utilisez un dessin créé dans un autre programme, utilisez la deuxième méthode. Si vous collez une image créée avec les outils de dessin Adobe Flash Professional, utilisez la première méthode.
- Pour créer une image clé en utilisant le contenu de l'image clé précédente, appuyez sur F6. Pour créer une image clé vide, cliquez avec le bouton droit sur la dernière image de la chronologie et choisissez Insérer une image clé vide.
- Après avoir créé la deuxième image clé, vous devez modifier son image pour donner vie à l'animation. Si vous avez utilisé les outils de dessin d'Adobe Flash Professional, sélectionnez l'outil Transformer pour sélectionner un élément de votre dessin (comme la main d'un personnage) et le modifier.
- Si vous insérez une nouvelle image à chaque image clé, assurez-vous qu'elle est au bon endroit (selon la séquence logique des images).
-
Répétez le processus. Après avoir créé deux images clés, répétez le processus - ajoutez des images vierges entre chaque image clé et assurez-vous que l'animation est lue "en douceur".
- Faites de petits changements. Plus les changements sont petits (plus subtils), plus l'animation est fluide. Par exemple, si vous souhaitez que le personnage lève la main, la deuxième image clé ne doit pas inclure un dessin dans lequel le personnage est représenté avec une main déjà levée. Au lieu de cela, utilisez quelques images clés pour passer du bras abaissé au bras levé. Dans ce cas, l'animation sera plus fluide.
-
Convertissez le dessin. Une fois que vous avez créé des images clés et une trajectoire, vous pouvez transformer l'image afin qu'elle change en douceur lorsque vous vous déplacez le long de la trajectoire du jumeau. Vous pouvez modifier la forme, la couleur, l'inclinaison, la taille et tout autre paramètre de l'image.
- Sélectionnez le cadre dans lequel l'image sera transformée.
- Ouvrez le panneau des propriétés de l'image. Pour ce faire, appuyez sur F3.
- Modifiez les valeurs des paramètres dans la fenêtre des propriétés de l'image. Par exemple, vous pouvez changer la teinte ou la couleur, ajouter des filtres, redimensionner.
- Vous pouvez également utiliser l'outil de transformation libre pour modifier l'image comme vous le souhaitez.
-
Ajoutez des touches finales. Testez l'animation créée en appuyant sur Ctrl + Entrée. Assurez-vous que le dessin (personnage) change correctement et que l'animation se joue à la bonne vitesse. Si l'animation est jouée trop vite, diminuez le FPS ou augmentez la durée du jumeau.
- Le FPS par défaut est 24, essayez donc de réduire cette valeur à 12. Modifiez la valeur FPS dans la barre de propriétés. Cependant, à FPS = 12, l'animation peut ne pas être suffisamment fluide.
- Pour modifier la durée d'un jumeau, sélectionnez le calque contenant le jumeau et utilisez le curseur pour modifier la durée du jumeau. Si vous souhaitez doubler la durée du jumeau, déplacez le curseur de 48 images. N'oubliez pas d'insérer l'arrière-plan dans des cadres vides afin que l'arrière-plan ne disparaisse pas au milieu de l'animation. Pour ce faire, sélectionnez le calque d'arrière-plan, cliquez sur la dernière image de l'animation (dans la timeline), puis appuyez sur F5.
Les bases de l'animation time-lapse. Cette méthode est considérée comme la méthode principale pour créer une animation "traditionnelle", dans laquelle chaque image suivante comprend une image légèrement modifiée. Lorsque toutes les images sont lues, l'image prend vie. C'est la même technique utilisée par les animateurs à main levée et elle prend plus de temps que l'interpolation (voir la section suivante).
Partie 3
Ajout d'effets sonores et de musique-
Enregistrez ou téléchargez des effets sonores et de la musique. Vous pouvez ajouter des effets sonores à votre animation pour la rendre plus efficace. La musique rendra les animations plus excitantes et peut transformer de bonnes animations en excellentes. Flash prend en charge une variété de formats de fichiers audio, notamment AAC, MP3, WAV et AU. Choisissez un format qui garantit un son de haute qualité avec la plus petite taille de fichier.
- Le format MP3 garantit un son de haute qualité avec la plus petite taille de fichier. Les fichiers WAV sont volumineux.
-
Importez des fichiers audio dans la bibliothèque pour pouvoir ajouter rapidement des sons et de la musique aux animations. Cliquez sur Fichier - Importer - Importer dans la bibliothèque. Trouvez le fichier audio sur votre ordinateur. Assurez-vous que le fichier audio a un nom facile à retenir afin de pouvoir le retrouver rapidement.
Créez un nouveau calque pour chaque fichier audio. Ceci est facultatif et vous pouvez ajouter de l'audio aux calques existants, mais l'insertion du fichier audio sur un calque séparé vous donnera un meilleur contrôle sur la bande-son de l'animation.
Créez une image clé où l'audio commencera à jouer. Sur le calque son, sélectionnez l'image d'animation à partir de laquelle le son commencera à jouer. Appuyez sur F7 pour insérer une image clé vierge. Par exemple, si vous souhaitez insérer un fichier audio qui sera lu tout au long de l'animation, sélectionnez la première image sur le calque du fichier audio. Si vous ajoutez la voix d'un personnage, sélectionnez le cadre où le personnage commence à parler.
