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 est nécessaire de stocker et de rechercher divers éléments du film. Si vous travaillez sur un projet vaste et complexe, il est logique de le diviser en plusieurs morceaux gérables, chacun contenant une séquence spécifique d'événements (animation, interaction utilisateur, etc.). Cela rendra le travail beaucoup plus facile. Le rôle de ces fragments dans les films Flash est joué par les scènes. Ce sont des films miniatures logiquement complétés, qui forment ensemble un seul film Flash. Lors de la création de grands projets, l’utilisation de scènes peut faire gagner beaucoup de temps.

Qu'est-ce qu'une scène

La création d'une scène est une technique efficace qui permet de diviser un projet spécifique en fragments distincts gérables. Chaque scène, comme déjà mentionné, est un film miniature. Le nombre de scènes de film Flash utilisées est limité uniquement par la capacité 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, étant indépendantes, elles sont en même temps étroitement interconnectées. Il n'y a jamais de retard notable entre eux pendant la lecture. 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 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 à travers des scènes, sont devenus de plus en plus populaires sur Internet.

Panneau de scène

La liste des scènes contenues dans un film est accessible à l'aide du panneau Scène.

activé), qui s'ouvre lorsque vous appelez la commande Fenêtre\u003e Panneaux de conception\u003e Scène (Fenêtre\u003e Panneaux de conception\u003e Scène). Ce panneau vous permet d'afficher une liste des scènes disponibles

et établissez 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 chronologie, 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 dans la fenêtre Editeur de symboles pour quitter le mode d'édition de symboles (voir Chapitre 6). Cette section se concentrera sur les fonctionnalités du panneau Modifier liées au travail avec les scènes.

Le panneau Edit 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 d'édition, et le nom de la scène sélectionnée sera affiché dans la ligne. La fonctionnalité du bouton Modifier la scène est décrite dans la section « Passage d'une scène à l'autre ».

Menu du bouton Modifier la scène

Créer et manipuler des scènes

Comme déjà mentionné, le panneau Scène, qui s'ouvre à l'aide de la commande Fenêtre > Panneaux de conception > Scène, est conçu pour travailler avec des scènes. Dans cette section, vous apprendrez comment utiliser ce panneau pour ajouter, dupliquer, renommer des scènes et modifier leur ordre.

Ajouter une scène

À mesure que la complexité d'un projet augmente, vous devrez constamment ajouter de nouvelles scènes pour distribuer des éléments logiques de son contenu. Vous pouvez le faire en utilisant le panneau Scène. Pour ajouter une scène, procédez comme suit :

Assurez-vous que le document requis est ouvert. Sélectionnez 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 depuis le 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 reçoit un nom avec un numéro de séquence supérieur d'une unité au nom de scène actuellement sélectionné (par exemple, Scène 1, Scène 2, etc.). Le nom est placé en conséquence dans la liste.

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 appelant 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.

Duplication de scène

Dans les chapitres précédents, nous avons déjà parlé de la création de doublons de divers éléments. Lorsqu'il s'agit de copier une animation, et surtout un projet complexe avec un grand nombre de scènes, ce processus serait assez fastidieux sans la fonction de duplication, qui vous 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 activant la commande Fenêtre > Panneaux de conception > Scène (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.

Le nom de la scène en double apparaît dans la fenêtre du panneau Scène. 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 scènes en double et aux nouvelles scènes ne diffèrent que par leur numéro séquentiel, 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. Le processus de renommage d’une scène ne vous prendra pas beaucoup de temps.

Ouvrez le panneau Scène en choisissant Fenêtre > Panneaux de conception > Scène et double-cliquez sur le nom de la scène que vous souhaitez modifier. Cela vous permettra de modifier le nom de la scène.

Entrez un nouveau nom et appuyez sur Retour/Entrée ou double-cliquez en dehors du panneau Scène.

Renommer une scène dans le panneau Scène

Changer l'ordre des scènes

L'ordre dans lequel les noms des scènes sont placés dans le panneau Scène détermine l'ordre dans lequel les scènes sont lues dans le film. Les noms de scènes dans ce panneau peuvent être déplacés, définissant l'ordre dans lequel les scènes sont lues 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.

Placez le pointeur de la souris sur le nom de la scène à réorganiser, appuyez sur le bouton gauche de la souris et, tout en le maintenant enfoncé, déplacez le pointeur vers l'emplacement souhaité sur le panneau. Notez que lorsque vous déplacez le pointeur, une ligne bleue apparaît pour indiquer la nouvelle position possible du 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 outils de navigation suivants pour basculer entre différentes scènes de film tout en travaillant sur un projet Flash.

Panneau de scène. Pour accéder à la scène de film souhaitée, 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 est affiché dans le panneau Edit.

Bouton Modifier la scène. Lorsque vous cliquez sur ce bouton, situé sur le côté droit du panneau Edition, 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 Explorateur de films. Ce panneau, qui peut être ouvert à l'aide de la commande Fenêtre > Autres panneaux > Explorateur de films, affiche la structure hiérarchique du film (voir chapitre 8) et vous permet de rechercher des scènes, des personnages et des instances de personnages, ainsi que de remplacer du texte et des polices.

Les scènes sont représentées dans le panneau Movie Explorer sous forme d'é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 uniquement le contenu de la scène sélectionnée. Pour afficher le contenu de toutes les scènes simultanément, activez la commande Afficher toutes les scènes dans le menu Options de ce panneau.

Panneau Explorateur de films 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 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 ; l'environnement Flash n'est plus nécessaire. Pour tester, procédez comme suit :

Pour tester une scène individuelle, sélectionnez-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 une animation, appelez la commande Tester l'animation depuis le menu Contrôle ou utilisez la combinaison de touches Cmd/Ctrl+Return/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 sélectionnant Lire toutes les scènes dans le menu Contrôle.

Gestion des scènes avec ActionScript

Les scènes peuvent grandement simplifier l’organisation globale du contenu du film. La séquence prédéterminée de lecture des scènes détermine la linéarité des films. 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 modifier l'ordre de lecture des scènes. Pour résoudre ce problème, vous utilisez des scripts ActionScript (en particulier des actions de cadre) pour contrôler les scènes.

Vous en apprendrez davantage sur ActionScript et sur l'utilisation des actions de cadre au chapitre 13. Cette section présente certaines des actions que vous pouvez utiliser pour contrôler les scènes.

gotoAndStopO - lorsque cette action est appelée, elle accède à une scène et une image spécifiques et arrête la lecture du film.

gotoAndPlay() - L'appel de cette action provoque le déplacement de la tête de lecture vers une scène et une image spécifiques (la lecture du film continue à partir de cette image).

jouer O - cette action vous permet de continuer la lecture du film après l'arrêt.

arrêter O - en utilisant cette action, vous pouvez arrêter la lecture du film.

Vous êtes-vous déjà demandé ce qui se cache derrière la belle animation des bannières sur Internet ? Ou les dessins animés inédits créés à l’aide de la technologie informatique ? Le plus souvent, ils sont basés sur la « chair », ou plus précisément, c'est ainsi que le nom de la technologie Flash est traduit de l'anglais. Aujourd'hui, nous allons parler de l'animation flash pour le site internet :

Technologie Flash

Le cadre multimédia a été développé par Macromedia. Mais après son absorption (fusion), tous les droits sur la technologie ont été transférés au nouveau propriétaire - Adobe Systems.

Domaine d'application moderne d'Adobe Flash :

• La création d'applications Web est une direction relativement nouvelle. Implique l'utilisation totale ou partielle de Flash pour créer des sites Web. Lorsqu'elle est partiellement appliquée, cette technologie crée des éléments de conception individuels : divers menus interactifs, boutons animés, etc.

Par rapport aux ressources HTML conventionnelles, les sites Flash possèdent certaines fonctionnalités qui limitent leur utilisation. Ceux-ci incluent le coût de développement élevé, les exigences en matière de ressources du serveur, les longs temps de chargement avec une connexion Internet lente et quelques autres aspects :

• Mise en œuvre de capacités multimédias - pour écouter de l'audio et lire des vidéos sur des sites Web, 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 (généralement 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 de publicités multimédias, mais également une sorte d'interaction avec l'utilisateur sur une base ludique.

Bases et outils de développement Flash

Pour créer une animation flash, les outils traditionnels d'Adobe sont le plus souvent utilisés :

• Adobe Flash Professional – un programme pour créer une animation interactive (animateur) ;
• Adobe Flash Builder – un environnement pour créer des interfaces d'applications 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 du contenu multimédia de ce type. Les plus populaires sont Gnash, QuickTime et quelques autres :

Cette technologie permet d'afficher tout type de graphiques ( raster, vecteur, 3D). Il prend également en charge le relais en 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.

Le principal standard pour les fichiers Flash est l'extension SWF. L'abréviation signifie Petit Format Web. La vidéo enregistrée en Flash porte les extensions de fichier FLV, F4V.

Le développement d'animations interactives en Flash repose sur des graphiques vectoriels. C'est grâce à cela qu'il a été possible de mettre en œuvre le support d'une plateforme multimédia et l'indépendance de la qualité d'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, quelles que soient les caractéristiques techniques de l'écran (résolution).

L'animation interactive dans 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, on utilise un lecteur Flash dont le fonctionnement est à bien des égards similaire à celui 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 client. Cela est dû à la faible efficacité de la machine virtuelle Flash, qui est intégrée au navigateur de l'utilisateur avec le lecteur ;
• Forte probabilité d'erreurs - la lecture d'une animation Flash peut se produire avec une forte probabilité d'erreurs. De plus, les échecs de lecture Flash affectent négativement le fonctionnement de l'ensemble de l'application client (navigateur). Cela est dû à un contrôle insuffisant sur la tolérance aux pannes du code du programme lors de la création d'applications Flash ;
• Échec de l'indexation - Tout le contenu textuel affiché dans le contenu Flash n'est pas indexé. Cette limitation est particulièrement problématique pour les ressources créées sur la base de cette technologie.

Revue des logiciels de création Flash tiers

Sothink SWF Quicker a été considéré comme une application prototype sur laquelle nous démontrerons les bases de la création de Flash. Selon de nombreux professionnels, le programme est le plus compréhensible et le plus simple à apprendre.

En plus de créer et d'éditer, l'éditeur flash « peut » fonctionner 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 parcouru tous les coins et recoins, nous n'avons pas trouvé de commutateur de langue d'interface.

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 du 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 joué :

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 le bandeau :

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, regardons de plus près l'interface de l'application. Veuillez noter qu'il se compose de deux fenêtres principales : celle du haut sert à éditer la période de temps de la vidéo et celle du bas est un éditeur graphique classique. Chacun des éléments est situé sur un calque séparé, qui peut être modifié à l'aide des outils standards situés sur la barre latérale.

Bonjour à tous!
Alors, à la demande, j'écris une leçon sur l'animation la plus simple en Flash. Commençons, comme on dit, petit. Ensuite, je promets d'en ajouter d'autres (par pop-up, s'ils n'écrivent pas).

Ouvrez FlashMX.
Devant nous se trouvent notre scène de travail, notre menu, notre barre d'outils, etc. En bas, il y a une fenêtre comme celle-ci : Propriétés. Il y a les principaux paramètres de votre dessin animé (Fig. 1).
Nous nous intéressons au FRAME RATE - la vitesse de défilement de votre dessin animé. Sinon, 12 fps signifie que 12 images de votre dessin animé seront lues en une seconde. Cette vitesse est standard et, en principe, ce qui est nécessaire. Si vous devez ralentir votre dessin, réduisez-le ; si vous devez le rendre plus rapide, augmentez ce nombre.

Passons maintenant à l'animation elle-même.
Il existe deux méthodes principales en Flash : l’interpolation de forme et l’interpolation de mouvement.
Regardons le premier. Forme - formulaire (anglais). Vous comprenez déjà qu'il s'agit ici de changer de forme. Nous créons une certaine forme, par exemple un carré bleu. En haut, dans la timeline, sur la première image, un cercle apparaîtra sur fond gris - nous avons créé une image clé. Créons maintenant le même cadre dans le 10ème cadre. Cela peut être fait de deux manières : pointez la souris sur l'image 10, cliquez (le cadre devient bleu) et dans le menu sélectionnez séquentiellement : Insertion->image clé ; sinon vous pouvez : pointer sur l'image 10, cliquer, appuyer sur F6. Dans la chronologie, les 10 images sont grises. La ligne rouge montre sur quelle image nous nous trouvons. (Fig.2)

Passons à l'image 10. Nous sélectionnons notre carré (avec la souris ou en appuyant sur ctrl+A - cette combinaison de touches sélectionne tout ce qui se trouve dans notre zone de travail). Déplacez notre carré quelque part sur le côté (assurez-vous que vous êtes dans le 10ème cadre !) et changez la couleur en jaune, par exemple. Revenons maintenant à la première image. Dans la ligne Propriétés, il y a une sélection Tween, où l'attribut par défaut est "aucun". Autrement dit, pas d'animation. Changez-le en "forme". Dans la timeline, nos cadres prennent une couleur vert clair avec une flèche. Lorsque tout est terminé, appuyez sur "Entrée". BEAUTÉ! Le carré bouge et change même de couleur ! Revenons à l'image 10. Sélectionnez tout (ctrl+A). Et appuyez sur la touche Suppr (c'est-à-dire Supprimer). A la place du carré, dessinez un petit cercle rouge. Revenez à la première image et appuyez sur Entrée. Le carré se transforme maintenant en cercle et en rouge. Vous avez déjà réalisé que vous n'avez pas besoin de dessiner chaque image - Flash le fera pour vous ! Bien que si vous avez besoin d'une précision particulière ou autre, vous pouvez dessiner. alors la taille du fichier augmentera. Si vous avez besoin d'une transition plus douce d'un carré à, par exemple, un cercle, effectuez ce processus non pas pour 10, mais, disons, pour 25 images. Si vous avez besoin de mouvements et de mouvements plus complexes, il existe des masques de calque pour cela, mais nous en parlerons davantage la prochaine fois. La figure 3 montre à quoi ressemble votre animation sur une chronologie. Vous pouvez désormais dessiner un film simple avec des changements de forme !

Examinons maintenant la deuxième façon de définir une animation : l'interpolation de mouvement (traduction de quelque chose comme : construire une animation de mouvement intermédiaire). Ici, ce sera un peu plus compliqué. Ouvrez à nouveau un nouveau fichier flash.
Quelle est la différence entre la forme et le mouvement ? Le fait que dans le second cas nous travaillerons non pas sur des formes, mais sur des objets prêts à l'emploi, c'est-à-dire symboles. Un symbole est, pour ainsi dire, l’unité d’animation la plus simple dans Flash. C'est une façon plus courante de dessiner. Nous répétons tout - dans le premier cadre, nous dessinons un carré bleu. sélectionnez-le et appuyez sur F8 (ou exécutez séquentiellement : Insérer->convertir en symbole). Une boîte de dialogue apparaît devant nous (Fig. 4).

Qu'est-ce que c'est? Il existe trois types de symboles dans Flash : un clip vidéo est une sorte d'animation supplémentaire à l'intérieur d'un symbole. c'est-à-dire que ce symbole contient une sorte d'animation, etc. a exactement la même chronologie que la scène principale ; bouton (bouton) - un élément qui répond à l'appui, à la présence de la souris dessus, etc. Bref, il y a un bouton ; et le troisième élément, le plus statique – graphique. C'est-à-dire juste des graphiques, une sorte d'image. Nous travaillerons avec ce dernier. Nous appelons cela quelque chose, cliquez sur « OK ». Un cercle apparaît sur le carré - sinon, le centre de notre symbole (le centre peut également être défini dans cette boîte de dialogue). Tous nos symboles sont entrés dans la bibliothèque. À partir de là, nous pouvons les modifier, les insérer si nécessaire et, là où ce n'est pas le cas, les supprimer, les ajouter. Pour consulter votre bibliothèque, appuyez sur F11 ou suivez les étapes : Fenêtre -> Bibliothèque. Dans la 10ème image, nous créerons une image clé (F6). Nous pouvons maintenant déplacer notre carré quelque part. Rendons-le ensuite invisible : pour cela, sélectionnez-le dans la 10ème image. Dans le panneau des propriétés, dans la section couleur, définissez alpha (transparence). Fixons-lui l'attribut en pourcentage : 0. Revenons à la 1ère image. Effectuons les mêmes étapes que pour l'interpolation de forme, mais au lieu de la forme, nous marquerons le mouvement. Les images de la ligne temporelle deviendront violettes et une flèche les traversera, comme le montre la Fig. 5. Appuyez sur Entrée.

Nous obtiendrons l’effet « d’un carré volant dans le vide ». Toutes nos félicitations! Vous savez créer des graphiques primitifs en Flash !
Une autre caractéristique importante est que pour chaque animation, nous devons avoir un calque séparé (Layer). Si vous devez ajouter un autre calque, utilisez la commande : Insérer->Couche.
Et juste un peu sur la chronologie.
Comme vous l'avez déjà compris - vert clair avec une flèche - interpolation de forme, violet avec une flèche - interpolation de mouvement. Vert clair ou violet avec des lignes - vous avez spécifié une animation, mais cette animation ne peut pas être créée - vous avez fait quelque chose de mal. Couleur grise - toutes les images avec cet ombrage sont une copie exacte de l'image clé précédente. Une ligne blanche signifie qu'il n'y a rien dans ces cadres. Le cercle noir est une image clé. Le cercle blanc est une image clé vierge. Eh bien, cela semble être le cas. (Fig.6)

C'est tout pour le moment. C'est le minimum avec lequel vous pouvez travailler. Ensuite, apprenez à ajouter du son, à contrôler le son, puis à écrire Masyanya. :) Je promets que j'écrirai certainement bientôt une autre leçon - sur l'animation avancée en Flash. Sur la façon de faire « tomber une plume », sur les masques, sur le contrôle du changement de forme lors de l'interpolation de forme. Ensuite, j'écrirai autre chose.
Si cela a aidé quelqu'un, dites merci à l'ensemble du site FLASHER.RU. C'est ce qu'il y a de mieux sur le net.
J'étais content et content de manger ! Si vous avez des questions, rendez-vous sur le forum ou : [email protégé]
(c) de Saint Dimitryi alias Nirva à Flasher.ru
http://flasher.ru

Jusqu'à présent, nous avons examiné les films Flash qui sont lus sans l'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 à explorer les éléments du langage de script Action Script et voir comment il peut être utilisé pour créer des applications interactives. A titre d'exemple, créons un album photo avec des éléments d'interface interactifs. Mais avant de commencer à décrire Action Script, nous devrions parler d'un autre type de symbole que nous avons ignoré jusqu'à présent : les symboles de bouton. Pour construire une interface interactive, ils sont tout simplement nécessaires.

Création de boutons

Le bouton est un clip vidéo interactif de quatre images. Lorsque nous attribuons un type de bouton à un symbole, Flash crée une chronologie de quatre images pour le nouveau symbole :

Up-state est un cadre correspondant à la situation où le bouton n'est pas enfoncé et le pointeur de la souris n'est pas situé au-dessus du bouton ;

Cadre de surétat illustrant l'apparence du bouton lorsque le pointeur de la souris est positionné sur le bouton, mais que le bouton n'est pas enfoncé ;

À l'état bas, ce cadre montre l'apparence du bouton lorsqu'il est enfoncé ;

L'état d'accès définit la zone dans laquelle le bouton répond à un clic de 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 apparaît, saisissez un nom pour le symbole du bouton (par exemple, mais1) et sélectionnez le type de symbole Bouton.

Flash passera en mode d'édition de caractères, fournissant des images Up, Over, Down 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. Bouton UP-frame

Sélectionnons la deuxième image, marquée comme Over et correspondant à l'état où le curseur est au dessus du bouton. Insérons une image clé dans cette image (à l'aide de la commande Insérer => Keyframe), à ​​la suite de quoi une image clé apparaîtra qui répète complètement le contenu de l'Up-frame. Changeons la couleur du bouton, comme le montre la Fig. 2.

Fig 2. Bouton de sur-cadre

De même, ajoutez l'image suivante (image vers le bas) et dessinez l'état enfoncé du bouton (Fig. 3).

Riz. 3. Bouton vers le bas du cadre

Nous ne dessinerons rien dans le cadre Hit pour l’instant, mais nous reviendrons sur ce cadre un peu plus tard.

Passons à la scène principale, appelons la bibliothèque à l'aide de la commande Window => Library et créons une instance du symbole du bouton en la faisant glisser sur la scène (Fig. 4.)

Riz. 4. Créez une instance de bouton en la faisant glisser depuis la bibliothèque

En conséquence, nous obtenons le film suivant. Comme le montre ce film, l'appui sur un bouton se produit non seulement lorsque l'on clique avec la souris sur la zone centrale (de travail) du bouton, mais également lorsque l'on clique sur le cadre qui l'entoure. Cela est dû au fait que si le cadre Hit n'est pas dessiné, alors la zone de travail du bouton correspondra au cadre Up.

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 de dessiner le bouton sans cadre (voir Fig. 5)

Riz. 5. Boutons de frappe

Après avoir ajouté l'image Hit requise, nous obtiendrons le film suivant, dans lequel lorsque vous cliquez sur l'image, le bouton n'est pas enfoncé.

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 créer des 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 dans 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 dans un film ou stockés dans un fichier texte externe avec une extension AS.

Lors de l'intégration d'un scénario dans un film, il peut être intégré dans différentes parties du film. Plus précisément, les scripts d'action peuvent contenir des images clés, des instances de bouton et des instances de clip. En conséquence, les scripts sont appelés Actions Frame, Actions Bouton et Actions MovieClip.

Les scripts d'action s'exécutent lorsque certains événements déclenchés par l'utilisateur ou le système se produisent. Le mécanisme qui indique à Flash quelle instruction exécuter lorsqu'un événement se produit est appelé gestionnaire d'événements.

Action Script a sa propre syntaxe, tout comme JavaScript. Flash MX 2004 prend en charge Action Script de toutes les versions précédentes de Flash.

L'un des principaux concepts d'Action Script sont les 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 vers une image ou un repère spécifique. Du mot Actions vient le nom du langage - Action Script (littéralement - script d'action). Nous nous familiariserons avec la plupart des concepts de ce langage à l’aide d’exemples précis.

Album photo interactif

Montrons l'utilisation des boutons pour gérer un album photo - créez un ensemble de photos et ajoutez deux boutons qui feront défiler les photos vers l'avant et vers l'arrière.

Plaçons la première photo sur la timeline principale et ajoutons 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 large ensemble de boutons pré-dessinés de différents types. Sélectionnons, par exemple, les boutons clés (boutons similaires aux touches du clavier), ouvrons le dossier correspondant, sélectionnons le bouton clé gauche (Fig. 7) et créons une instance de ce bouton (en le faisant glisser sur la scène).

Riz. 7. Éléments du dossier Boutons Clés

Notez que lorsque vous placez un deuxième bouton (touche droite) sur la scène et que vous le déplacez pour l'aligner avec le premier bouton, le programme fournit un indice (une ligne pointillée) qui vous permet de positionner avec précision le bouton (Figure 8).

Riz. 8. Alignement automatique des boutons au même niveau

Pour ajouter un script, vous devez appeler l'éditeur Action Script à l'aide de la commande Fenêtre => Panneaux de développement => Actions ou en appuyant sur la touche F9. Si vous envisagez d’écrire fréquemment des scripts, il s’agit d’une commande clavier à retenir. En conséquence, l'éditeur Action Script apparaîtra (Fig. 9).

Riz. 9. Panneaux de l'éditeur de script d'action

Si vous essayez de mettre en évidence divers é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 indiquera sur quel élément vous pouvez « accrocher » du code. Si vous sélectionnez un cadre sur la scène, l'inscription Actions - Cadre apparaît dans le coin supérieur gauche du panneau de l'éditeur ; si vous cliquez sur le bouton, l'inscription Actions - Bouton apparaît, c'est-à-dire que le programme vous demande que le code saisi sera se rapportent au script du bouton. Et si vous sélectionnez une photo, un message apparaîtra dans le champ destiné à la saisie d'un script : La sélection actuelle ne peut pas être soumise à des actions (un script ne peut pas être appliqué à cet objet sélectionné).

Nous allons attribuer un script à un bouton. Les versions récentes d'ActionScript offrent la possibilité d'écrire du code centralisé, c'est-à-dire du code situé au même endroit, et cette capacité vous permet de mieux comprendre les programmes volumineux. Cependant, dans des exemples simples (c'est ce que nous examinons), l'attribution d'un script à un bouton est parfaitement acceptable.

Ainsi, pour un bouton fléché vers la gauche, nous devons formaliser le scénario suivant : « Si le bouton est relâché sur une certaine image, alors à partir de cette image, vous devez passer à l'image 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 :

Ajoutons maintenant plusieurs images clés afin que les boutons créés dans la première image y soient copiés et plaçons les photographies nécessaires dans les images nouvellement créées.

Si nous exécutons le film créé, les images seront lues en continu les unes après les autres et, par conséquent, nous devons tout d'abord donner la commande « Stop » sur la première image. Pour ce faire, ajoutez la commande correspondante à la première image (Fig. 11).

Riz. 11. Script attribué à la première image

Attention : la commande n'est plus affectée au bouton, mais au cadre. Le fait qu'un script soit attribué à un cadre est noté sur la ligne d'édition principale - une lettre minuscule « a » apparaît au-dessus du point gras dans la désignation du cadre.

En conséquence, nous avons eu le prochain film.

Si nous n'avons que quelques images dans l'album photo, alors deux boutons - "Avant" et "Retour" - suffisent amplement, mais si l'ensemble des photos est grand, il est conseillé d'avoir également des boutons qui renvoient au début et fin du film. Dans l'exemple suivant, nous ajouterons les boutons correspondants : « Vers la première image » et « Vers la dernière image ». Vous pouvez sélectionner des boutons d'un mnémonique approprié dans la bibliothèque standard de boutons du dossier Circle Buttons (Fig. 12).

A l'aide de l'exemple proposé, nous allons nous familiariser avec une autre commande, gotoAndStop(), qui permet d'aller à la frame souhaitée puis de s'arrêter.

Riz. 12. Boutons du dossier Circle Buttons

Nous allons mettre un code sur le bouton pour accéder à la première image (la troisième en partant de la gauche sur la Fig. 13), comme le montre la Fig. 13.

Riz. 13. Script pour le bouton « Dans la première image »

Dans le cas d'un album photo de cinq images, ajoutez le script de transition « Vers la dernière image » au dernier bouton :

Écriture de scripts automatisée

Jusqu'à présent, nous tapions toutes les commandes manuellement, mais les panneaux de l'éditeur ActionScript fournissent un certain nombre de services pour l'écriture automatisée de scripts. Considérons ces possibilités.

Riz. 14. Outils de script automatisés

Le panneau de l'éditeur Action Script vous permet de sélectionner, faire glisser, réorganiser et supprimer des commandes.

Montrons comment vous pouvez écrire le même script pour le bouton « Suivant » de manière automatisée. En sélectionnant le dossier Movie Clip Control (fenêtre supérieure gauche sur la Fig. 14), vous pouvez accéder au gestionnaire d'événement on, puis vous devez soit double-cliquer sur l'élément correspondant, soit faire glisser l'expression sur le champ d'écriture du script dans Glisser et Mode dépose.

Riz. 15. Astuce pour compléter une expression

En conséquence, l'expression requise et un indice comme celui-ci apparaîtront sur le champ de travail (Fig. 15) : vous sélectionnez la commande souhaitée 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 pointsAppuyez sur « ", ou appuyez sur la touche " », ce qui correspond à un appui sur les touches du clavier (flèche gauche, flèche droite), c'est-à-dire qu'il est possible de créer un album photo qui sera « feuilleté » à l'aide des touches du clavier.

Riz. 16. Appels des boutons du clavier

Utilisons la commande keyPress " (Fig. 16), puis allez dans le dossier Timeline Control, sélectionnez la commande nextFrame et faites-la glisser vers le champ de travail (Fig. 17).

Riz. 17. La commande nextFrame se trouve dans le dossier Timeline Control

Pour un bouton qui amène le film au début de l'album photo, vous pouvez sélectionner l'appui sur la touche Accueil dans le menu comme événement, puis (Fig. 18) faire glisser la commande gotoAndStop sur le champ, ce qui entraînera un autre un indice apparaîtra sur la syntaxe possible de cette commande.

Les flèches dans l'info-bulle vous permettent d'afficher 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 seulement un cadre. Dans notre cas, il suffit de spécifier uniquement le Frame. Si le nom de la scène est omis, la valeur par défaut consiste à passer à l'image de la scène actuelle.

Riz. 18. Astuce sur la syntaxe de commande possible

Riz. 19. La flèche triangulaire vous permet d'afficher les options de syntaxe

Après avoir attribué les boutons du clavier correspondants à tous les boutons, nous obtiendrons le film suivant, dans lequel le feuilletage des photos se fera à partir du clavier, et cliquer sur les boutons à l'écran avec la souris n'entraînera aucune conséquence.

Est-il possible de proposer un scénario dans lequel différents événements mèneront aux mêmes actions ? Il s'avère que vous pouvez - pour ce faire, vous devez répertorier une liste de noms d'événements dans le gestionnaire d'événements on. 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 entrez une virgule dans la liste des événements, un menu de commandes supplémentaires apparaît automatiquement

Ajoutons au premier événement (appuyer sur un bouton du clavier) un deuxième événement (relâcher le bouton à l'écran) :

activé (appuyez sur une touche » ", libérer)

Répétons la procédure pour les boutons restants et nous obtiendrons ainsi un album photo dans lequel les photos défileront à l'aide de la souris et du clavier (le fichier FLA original peut être obtenu à partir du lien).

Dans l'exemple considéré, nous avons utilisé la transition par numéro d'image, mais cette méthode n'est pas toujours pratique : si la numérotation des images change au cours du montage du film, la logique peut s'effondrer. Il est plus pratique d'utiliser la transition par marque de cadre. Regardons un exemple qui nécessite non seulement de feuilleter l'album, mais aussi de passer à différentes sections, c'est-à-dire une navigation plus complexe.

Que l'album soit composé de dessins, d'infographies et de photographies.

Nommons le premier cadre de la section "Dessins" Images ; de la même manière, nous attribuerons les étiquettes "graphiques" et "photo" aux premiers cadres des autres sections.

Créons un calque pour placer les étiquettes et appelons-le Lables. Pour étiqueter un cadre, dans le panneau Propriétés, vous devez sélectionner le type d'étiquette Nom et noter son nom. Dans notre cas, des images (Fig. 21). De même, nous placerons des marqueurs dans les images 5 et 10 (Fig. 22).

Riz. 21. Exemple d'attribution d'une étiquette à un cadre

Ajoutons maintenant un nouveau calque et appelons-le Actions. Dans la première image clé du calque Actions, appelez le panneau Actions Frame (en appuyant sur le bouton F9) et entrez la commande stop () (voir Fig. 22)

Riz. 22. Scénario du premier plan

Ajoutons un autre calque appelé Sujets (sujets), dans lequel nous donnerons des titres aux cadres correspondants : « Dessins » (Fig. 23), « Graphiques » et « Photos ».

Riz. 23. Titre des cadres de la section « Dessins »

Ajoutons maintenant des boutons de menu portant des noms similaires sur le côté, que nous placerons sur un nouveau calque appelé Menu.

Imprimons le premier élément du menu "Images" à partir du bord gauche et convertissons-le en 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 (cette commande peut également être exécutée à 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 PictureButton au bouton permettant d'accéder à la section images

Créons quatre cadres pour le bouton "Dessins" : le premier représentera simplement le texte original (Fig. 25), le second représentera le même texte uniquement en bleu, on sautera le troisième cadre (dans ce cas, le cadre Down sera le même que le cadre Over ), et dans le cadre Hit, nous dessinerons une zone rectangulaire qui définira la zone où le bouton est enfoncé (Fig. 26).

Riz. 25. Cadre supérieur de l'imageBouton

Riz. 26. Hit-frame du bouton PictureButton

Nous devons maintenant attacher le script au 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 entrez le code indiqué sur la Fig. 27.

Riz. 27. Script pour passer à un cadre avec une étiquette