Comment créer un nouveau cadre dans Adobe Flash. Comment créer une animation flash. Comprendre le script d'action

Téléchargez Flash depuis le site Peut différentes façons. Mais certains d’entre eux sont assez lourds, certains nécessitent l’utilisation de plugins, de programmes et de sites Internet. En attendant, il existe une méthode très élégante et simple, dont la mise en œuvre ne prend pas beaucoup de temps.

Tout d’abord, définissons pourquoi nous avons besoin d’une chasse d’eau et de quoi il s’agit. Éclair est une présentation multimédia réalisée à l'aide du programme Adobe Flash ou . Ces fichiers sont appelés films flash, bien qu'ils puissent être bien plus qu'un film.

Il peut s'agir de mini-programmes entiers : des bannières qui réagissent au mouvement de la souris du visiteur, des petits jeux, ce qu'on appelle jeux flash, tests avec résultats, etc.

Ou il peut s’agir simplement de clips vidéo ou audio.

L'extension standard des fichiers Flash est SWF. Et lorsque nous rencontrons de telles vidéos sur des sites Web, nous ne pouvons pas les télécharger aussi facilement que des images, avec le bouton droit de la souris. Vous devrez travailler un peu plus dur.

Téléchargez Flash depuis le site

Accédez à la page du site Web contenant le fichier flash dont vous avez besoin. Après cela:

Ouvrir le code de la page

Faites un clic droit sur la page et sélectionnez Afficher le code de la page . Deux autres options pour ouvrir le code de la page : cliquez sur Ctrl+U, ou écrivez avant l'adresse de la page voir la source:

Recherchez l'adresse vidéo SWF dans le code

Pour ce faire, activez la recherche à l'aide des raccourcis clavier Ctrl+F, et saisissez dans le champ de recherche .swf. Puis appuyez Entrer .

Trouvez l'adresse elle-même, qui ressemblera à :

http://site.ru/papki/rolik.swf
ou comme ça :

/papki/rolik.swf

Si vous avez la deuxième option, l’adresse est relative et non absolue. Il doit être placé à gauche de l'adresse page d'accueil site.

Vérification de l'adresse

Collez l'adresse de la vidéo flash dans la barre d'adresse de n'importe quel navigateur dans un nouvel onglet. Une vidéo devrait apparaître.

Faire de l'adresse un lien

Si la vidéo apparaît, copiez l'adresse dans un bloc-notes et faites-en un lien, c'est-à-dire ajoutez-y le code approprié.

En conséquence, l'inscription dans le bloc-notes ressemblera à ceci :

Lien

Téléchargez la vidéo flash sur votre ordinateur

Ouvrez le fichier enregistré dans le navigateur. Il y aura un lien à l’intérieur. Faites un clic droit dessus, sélectionnez Enregistrer le lien sous... ou Enregistrer via un lien... et enregistrez la vidéo flash sur votre ordinateur.

Pour regarder, soit ouvrez-le dans un navigateur, soit utilisez un lecteur Flash par exemple Macromédia Lecteur Flash .

Autres options

Bien que l'option décrite ci-dessus me semble la plus intéressante, je vais quand même donner d'autres moyens de sauvegarder du flash sur votre ordinateur.

• Utiliser le site http://save2go.ru. Entrez l'adresse de la page sur laquelle se trouve votre animation flash et cliquez sur Enregistrer depuis le site . Un lien vers la vidéo apparaîtra ci-dessous. Faites un clic droit et sélectionnez Enregistrer le lien sous... ou Enregistrer via le lien... .
• En utilisant un plugin de navigateur, par ex. Assistant de téléchargement Pour Firefox .
• En utilisant des programmes de téléchargement, par exemple, Téléchargez Maître. Vous devez d'abord trouver l'adresse de la vidéo flash, puis l'insérer dans le téléchargeur.

Vous pouvez obtenir des informations plus détaillées dans les sections « Tous les cours » et « Utilitaires », accessibles via le menu supérieur du site. Dans ces sections, les articles sont regroupés par sujet en blocs contenant les informations les plus détaillées (dans la mesure du possible) sur divers sujets.

Vous pouvez également vous abonner au blog et découvrir tous les nouveaux articles.
Cela ne prend pas beaucoup de temps. Il suffit de cliquer sur le lien ci-dessous:

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'appareils peuvent lire du contenu multimédia de ce type. applications tierces. 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. En particulier pour appareils mobiles un poids léger Version Flash Léger.

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 de l'animation interactive en Flash s'appuie sur 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, quel que soit leur caractéristiques techniques résolution d'écran).

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

• Charge lourde sur CPU ordinateur 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

En tant qu'application prototype sur laquelle nous démontrerons les bases Création Flash, il a été emmené Sothink SWF Plus vite. 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 une fenêtre normale. éditeur graphique. 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.

Jusqu'à présent, nous avons examiné les films Flash qui sont lus sans l'intervention du spectateur du début à la fin. Cependant, Flash vous permet également de créer applications interactives, dans lequel 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 en externe fichier texte avec 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 Programme Flash, quelle instruction doit être exécutée lorsqu'un événement particulier se produit est appelée un gestionnaire d'événements.

Action Script a sa propre syntaxe, tout comme JavaScript. Flash MX 2004 prend en charge Action Script de tous Versions précédentesÉclair.

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 à exemples spécifiques.

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é, vous devez exécuter Commande Windows=> Bibliothèques communes des panneaux de commande => Boutons (Fig. 6).

Riz. 6. Ajoutez un bouton de bibliothèque standard

À la suite de l'exécution de cette commande, un panneau apparaîtra contenant un grand ensemble de boutons pré-dessinés divers 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 expérimentez en mettant en évidence divers éléments sur scène, tout en surveillant simultanément les messages dans les panneaux de l'éditeur Action Script, vous constaterez que le programme suggère sur quel élément vous pouvez « accrocher » le 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. DANS dernières versions ActionScript a la capacité 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é à tous les boutons le correspondant boutons du clavier, nous obtiendrons le film suivant, où le feuilletage des photos se fera à partir du clavier, et cliquer avec la souris sur les boutons à l'écran 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, infographie et des 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

Nous rencontrons constamment des animations flash – sur Internet et à la télévision. Créer une animation Flash simple à l'aide de la technologie Flash est une tâche assez simple, car Flash offre de nombreuses fonctionnalités. outils utiles, ce qui simplifie 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

Bases de l'animation stop-motion. Cette méthode est considérée comme la principale méthode de création d'animation « traditionnelle », dans laquelle chaque image suivante comprend la même image, mais légèrement modifiée. Lorsque toutes les images sont lues, l'image « prend vie ». Il s’agit de la même méthode utilisée par les animateurs de dessins animés dessinés à la main et prend plus de temps que le jumelage (voir section suivante).

• Par défaut, Flash joue à 24 images par seconde (FPS). Cela signifie que 24 images seront affichées en une seconde, mais elles ne doivent pas nécessairement toutes ê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.

1. Installez Flash Professionnel. Il existe de nombreux programmes permettant de créer des animations Flash, mais le plus puissant est Adobe Flash Professional CC. Vous pouvez installer gratuitement version d'essai ce programme ou utilisez 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 (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 soient facilement redimensionnées sans perte de qualité, créez vos images sous forme de graphiques vectoriels plutôt que de graphiques raster. Les images vectorielles se redessineront au fur et à mesure de leur redimensionnement (ce qui signifie que vous éviterez la pixellisation ou l'anticrénelage). Les images raster sont des images traditionnelles, telles que des photographies, des images dessinées, etc. Si vous essayez d’agrandir de telles images, vous obtiendrez une image très déformée.

2. Créez le premier cadre. La première fois que vous lancez Adobe Flash Professional, vous verrez un canevas vierge (calque) et une chronologie vierge. Au fur et à mesure que des images sont ajoutées, la chronologie se remplira 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 épinglez-le. Créez un deuxième calque et nommez-le comme vous le souhaitez. Ce sera le calque sur lequel vous créerez l'animation.
   • Ajoutez un dessin à la première toile du cadre. Vous pouvez importer le dessin depuis votre ordinateur ou 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 contient une image et constitue l’épine dorsale d’une animation. Vous créerez une nouvelle image clé à chaque fois que vous modifierez l’image.
   • Les images clés de la timeline sont indiquées par un point noir.
   • Vous n'avez pas besoin d'une image clé sur chaque image suivante. Créez une image clé toutes les quatre à cinq images pour créer une bonne animation.

3. Convertissez l'image en symbole. Dans ce cas, vous pouvez ajouter l'image au cadre plusieurs fois. Ceci est particulièrement utile si vous devez ajouter rapidement plusieurs images similaires dans un seul cadre (par exemple, un poisson dans un aquarium).

   • Sélectionnez le dessin. Faites un clic droit sur l'image et sélectionnez "Convertir en symbole". L'image sera ajoutée à la bibliothèque, ce qui facilitera son utilisation à l'avenir.
   • Supprimez le dessin. Ne vous inquiétez pas, vous pouvez l'ajouter à votre cadre en le faisant simplement glisser depuis la bibliothèque. De cette façon, vous pouvez ajouter plusieurs fois le même dessin à un cadre.

4. Ajoutez des cadres vides. Une fois votre première image clé prête, insérez des images vierges, puis commencez à créer votre 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 y en a deux différentes façons pour ce faire : vous pouvez copier une image clé existante et y apporter de petites modifications, 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 insérez une image créée à l'aide des outils de dessin d'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é vierge, cliquez avec le bouton droit sur la dernière image de la timeline et sélectionnez Insérer une image clé vierge.
   • Une fois que vous avez créé la deuxième image clé, vous devez apporter des modifications à son image pour donner vie à l'animation. Si vous avez utilisé les outils de dessin d'Adobe Flash Professional, sélectionnez l'outil Transformation pour sélectionner un élément de votre dessin (comme la main d'un personnage) et modifiez-le.
   • 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).

5. Répétez le processus. Après avoir créé deux images clés, répétez le processus : ajoutez quelques images vierges entre chaque image clé et assurez-vous que l'animation est fluide.

   • Faites de petits changements. Plus les changements sont petits (plus subtils), plus l’animation sera fluide. Par exemple, si vous souhaitez qu'un personnage lève la main, la deuxième image clé ne doit pas inclure de dessin du personnage avec la main déjà levée. Utilisez plutôt plusieurs images clés pour passer d’une main baissée à une main levée. Dans ce cas, l’animation sera plus fluide.

6. Transformez le dessin. Si vous avez créé des images clés et un chemin, vous pouvez transformer l'image pour qu'elle change en douceur à mesure que vous vous déplacez le long du chemin de l'interpolation. Vous pouvez modifier la forme, la couleur, l'inclinaison, la taille et tout autre aspect de l'image.

   • Sélectionnez un cadre dans lequel le dessin sera transformé.
   • Ouvrez le panneau des propriétés du dessin. Pour ce faire, appuyez sur F3.
   • Modifiez les paramètres dans la fenêtre des propriétés du dessin. Par exemple, vous pouvez modifier la teinte ou la couleur, ajouter des filtres, modifier la taille.
   • Vous pouvez également utiliser l'outil Free Transform pour modifier le dessin comme bon vous semble.

7. Ajoutez la touche finale. Testez l'animation créée en appuyant sur Ctrl + Entrée. Assurez-vous que le dessin (personnage) change correctement et que l'animation est jouée à la bonne vitesse. Si l'animation est jouée trop vite, réduisez la valeur FPS ou augmentez la durée de l'interpolation.

   • Le FPS par défaut est de 24, essayez donc de réduire cette valeur à 12. Modifiez la valeur FPS dans le panneau des propriétés. Cependant, à FPS = 12, l'animation peut ne pas être suffisamment fluide.
   • Pour modifier la durée d'une interpolation, sélectionnez le calque contenant l'interpolation et utilisez le curseur pour modifier la durée de l'interpolation. Si vous souhaitez doubler la durée du jumeau, déplacez le curseur sur 48 images. Pensez à insérer le fond dans les frames vides afin que le fond 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 (sur la timeline), puis appuyez sur F5.

Partie 3

Ajout d'effets sonores et de musique

1. Enregistrez ou téléchargez des effets sonores et de la musique. Vous pouvez ajouter des effets sonores à votre animation pour la rendre plus percutante. La musique rend l’animation plus excitante et peut transformer une bonne animation en une excellente. Flash prend en charge une variété de formats de fichiers audio, notamment AAC, MP3, WAV et AU. Choisissez un format qui garantit haute qualité son avec une taille de fichier minimale.

   • Le format MP3 garantit une qualité sonore élevée avec une taille de fichier minimale. Les fichiers WAV sont de grande taille.

2. Importez des fichiers audio dans la bibliothèque pour ajouter rapidement des sons et de la musique à vos animations. Cliquez sur "Fichier" - "Importer" - "Importer dans la bibliothèque". Localisez le fichier audio sur votre ordinateur. Assurez-vous que le fichier audio porte un nom facile à retenir afin de pouvoir le retrouver rapidement.

   Créez un nouveau calque pour chaque fichier audio. Cela n'est pas nécessaire et vous pouvez ajouter de l'audio aux calques existants, mais coller le fichier audio sur un calque séparé vous donnera plus de contrôle sur la piste audio de l'animation.

   Créez une image clé qui lancera la lecture audio. Sur le calque son, sélectionnez l'image d'animation à partir de laquelle le son commencera à être joué. Appuyez sur F7 pour insérer une image clé vide. 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, choisissez un plan où le personnage commence à parler.