Programme de téléchargement pour créer une animation flash. Créer une animation flash. Nous transformons un objet en un symbole pour une animation simple

Cet article vous dira comment Étapes simples Démarrer la connaissance S. Adobe Flash. CS5. Cours de thème animation simple, nous la créerons sans ingérence dans la complexité de l'interface et du programme.

Création d'un nouveau document Flash

Ouvrez le programme et créez nouveau document "ActionScript 3.0".

Dessinez un objet pour une animation ultérieure

Dessinez maintenant un cercle. Sélectionnez l'outil "ovale" situé sur le panneau de droite et grimper sur le bouton gauche de la souris et le bouton "Shift" du clavier tirant sur un cercle de fond blanc.

À l'aide de l'outil d'outil de sélection, nous allouons l'objet qui vient d'être créé en cliquant dessus ou en capturant dans la sélection carrée.

Nous transformons un objet en un symbole pour une animation simple

Pour plus de travaux, vous devez convertir un objet en un symbole. Puisque le cercle est déjà mis en surbrillance, appuyez sur le bouton droit de la souris et dans menu contextuel Sélectionnez "Converser au symbole".

Dans la liste "Type", choisissez "Graphic"

Maintenant, le carré bleu devrait apparaître autour de notre objet.

Créer une animation classique (Tween classique)

Afin de créer une animation, vous devez désigner le "cadre clé".

Sur le panneau inférieur, il existe une échelle d'animation, sélectionnez la vingt-cinquième image et appuyez sur le bouton droit de la souris, dans le menu contextuel apparu, sélectionnez "Insérer une image clé".

Nous mettons en valeur le cercle et en maintenant le bouton gauche de la souris, déplacez-le à droite.

Nous mettons en évidence la première image sur l'échelle d'animation et dans le menu principal ci-dessus, dans le point "Insert", sélectionnez "Classic Tween".

Voir l'animation créée

Maintenant, nous pouvons voir l'animation. Dans le menu principal, dans le paragraphe "Control", sélectionnez "Play".

Ajoutons l'effet "Disparition" du cercle. Pour ce faire, nous sélectionnons l'objet et dans le volet de droite dans le menu "Effet de couleur", sélectionnez "Alpha", nous définissons la valeur "0".

Voyons ce qui se passe. Allez au point "Control", sélectionnez "Play".

Nous sommes constamment confrontés à l'animation Flash - sur Internet et dans les émissions de télévision. Création d'une animation flash simple à l'aide de la technologie Flash - une tâche assez simple, car Flash offre beaucoup outils utilesqui simplifient tout le processus. Si vous souhaitez créer une animation flash ou une bande dessinée, vous pouvez le faire croquis en quelques heures seulement.

Pas

Partie 1

Animation Flash Flash

Principes fondamentaux de l'animation de l'échantillon. Cette méthode est considérée comme la méthode principale de créer une animation "traditionnelle", dans laquelle chaque cadre ultérieur comprend une image, mais une image légèrement modifiée. Lorsque vous jouez à tous les cadres, l'image "vient à la vie". La même méthode est utilisée par des animateurs, dessinant des dessins animés de la main et prend plus de temps que Tweing (voir la section suivante).

• Par défaut, Flash reproduit 24 images par seconde (FPS). Cela signifie que dans une seconde 24 images sera montrée, mais tous ne devraient pas nécessairement être nécessairement différents. Vous pouvez modifier ce paramètre (si vous le souhaitez) pour 12 images par seconde, mais à 24 images par seconde, l'animation sera jouée plus "doucement".

1. Installez Flash Professional. Il existe de nombreux programmes pour 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 sur Adobe Creative Cloud). Ensuite, cet article explique comment travailler avec Flash Professional.

   Étant donné que l'animation de cadre nécessite plusieurs images (qui diffèrent légèrement 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 la taille de vos images change facilement sans perte de leur qualité, créez des images dans le vecteur et non graphique raster. Images vectorielles Je vais redessiner lorsque vous changez de taille (c'est-à-dire que vous éviterez la pixélisation ou le lissage). Images raster - Ce sont des images traditionnelles, telles que des photos, des images dessinées et ainsi de suite. Lorsque vous essayez d'augmenter de telles images, vous obtiendrez une image fortement déformée.

2. Créer la première image. Lorsque vous démarrez d'abord Adobe Flash Professional, vous verrez une canevas vide (couche) et une timeline vide. Au fur et à mesure que le cadre ajoute, la chronologie sera remplie automatiquement. Vous pouvez travailler avec des couches comme vous le faites dans Photoshop.

   • Avant d'ajouter une image, créez un arrière-plan de base de votre animation. Renommez la "couche 1" dans le "fond", puis fixez-la. Créez une deuxième couche et nommez-le comme vous le souhaitez. Ce sera une couche sur laquelle vous allez créer une animation.
   • Ajoutez le dessin à la toile de la première image. Vous pouvez importer un dessin de votre ordinateur ou utiliser des outils de dessin pour créer un dessin directement dans le programme.
   • La première image est une image "clé". Le cadre clé est un cadre qui inclut l'image et forme la base ("osseuse") animation. Vous créerez une nouvelle image clé à chaque fois que vous modifiez l'image.
   • Les cadres de clés sur la chronologie sont désignés dans un point noir.
   • Vous n'avez pas besoin d'une image clé dans chaque cadre ultérieur. Créez un cadre clé tous les quatre ou cinq images pour faire une bonne animation.

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

   • Mettre en surbrillance le dessin. Cliquez sur clic-droit Souris dans le dessin et sélectionnez "Convertir en symbole" (convertir en symbole). L'image sera ajoutée à la bibliothèque, ce qui simplifiera son utilisation à l'avenir.
   • Retirez le dessin. Ne vous inquiétez pas - vous pouvez l'ajouter à un cadre simple glisser de la bibliothèque. Vous pouvez donc ajouter une seule et même image dans le cadre plusieurs fois.

4. Ajouter des cadres vides. Si votre première image clé est prête, insérez des cadres vides, puis continuez à créer une deuxième image clé. Appuyez sur F5 (quatre ou cinq fois) pour ajouter des cadres vides après la première image clé.

   Créez une deuxième image clé (après avoir ajouté plusieurs cadres vides). Il y en a deux diverses méthodes Faites-le: Vous pouvez copier une image clé existante et apporter de petits changements à ce sujet, 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 façon. Si vous insérez une image créée à l'aide d'outils de dessin professionnel Adobe Flash, utilisez la première méthode.

   • Pour créer une image clé à l'aide du contenu de la zone clé précédente, appuyez sur F6. Pour créer une image clé vide, cliquez avec le bouton droit de la souris sur la dernière image de la chronologie et sélectionnez "Insérer une image clé vide" (insérez un cadre de clé vide).
   • Une fois que vous avez créé une deuxième image clé, vous devez apporter des modifications à son image afin que l'animation "vint à la vie". Si vous avez utilisé Adobe Flash Professional Tood Outils, sélectionnez l'outil de transformation pour mettre en surbrillance l'élément de votre dessin (par exemple, la main d'un personnage) et la modifier.
   • Si vous insérez une nouvelle image sur chaque image clé, assurez-vous qu'il se trouve au bon endroit (selon la séquence logique des cadres).

5. Répéter le processus. Après avoir créé deux cadres clés, répétez le processus - ajoutez quelques cadres vides entre chaque images clés Et assurez-vous que l'animation sera jouée "en douceur".

   • Faire de petits changements. Les changements plus petits (inaperçus), plus l'animation est reproduite. Par exemple, si vous voulez que le personnage augmente la main, le deuxième cadre de clé ne doit pas inclure le dessin, sur lequel le caractère est représenté avec la main déjà élevée. Au lieu de cela, utilisez plusieurs cadres de clé pour vous déplacer des mains baissées à une main relevée. Dans ce cas, l'animation sera plus douce.

6. Convertir une image. Si vous avez créé des cadres de clé et une trajectoire, vous pouvez convertir une image afin qu'elle ait changé en douceur lorsque la trajectoire jumelle est en mouvement. Vous pouvez modifier la forme, la couleur, la pente, la taille et tout autre paramètre d'image.

   • Sélectionnez un cadre dans lequel l'image sera transformée.
   • Ouvrez le panneau Propriétés du dessin. Pour ce faire, appuyez sur F3.
   • Modifiez les valeurs de paramètre dans la fenêtre Propriétés du dessin. Par exemple, vous pouvez modifier la nuance ou la couleur, ajouter des filtres, redimensionnez.
   • Vous pouvez également utiliser l'outil de transformation libre (transformation libre) pour changer le dessin que vous voulez.

7. Ajoutez des traits finaux. Vérifiez l'animation créée en appuyant sur Ctrl + Entrée. Assurez-vous que le dessin (caractère) change correctement et que l'animation est reproduite avec la vitesse correcte. Si l'animation est jouée trop rapidement, réduisez la valeur FPS ou augmentez la durée de la ficelle.

   • Le FPS par défaut est 24, alors essayez de réduire cette valeur jusqu'à 12. Modifiez la valeur FPS sur le panneau Propriétés. Cependant, avec FPS \u003d 12, l'animation peut être jouée pas suffisamment en douceur.
   • Pour modifier la durée du jumeau, sélectionnez une couche contenant une twin et avec le curseur, modifiez la durée de la ficelle. Si vous voulez doubler la durée du jumeau, déplacez le curseur sur 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 Fo nouvelle CoucheCliquez sur la dernière image de l'animation (sur la chronologie), puis appuyez sur F5.

Partie 3.

Ajout d'effets audio et de musique

1. Notez ou téléchargez des effets sonores et de la musique. Vous pouvez ajouter des effets sonores à l'animation pour le rendre plus spectaculaire. La musique rendra l'animation plus excitante et peut transformer une bonne animation en magnifique. Soutenir Flash divers formats Fichiers audio, y compris AAC, MP3, WAV et AU. Sélectionnez 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 de format WAV sont grands.

2. Importer des fichiers audio vers la bibliothèque pour pouvoir ajouter rapidement des sons et de la musique dans l'animation. Cliquez sur "Fichier" - "Importation" (Import) - "Importer vers la bibliothèque" (importation vers la bibliothèque). Trouvez le fichier audio sur votre ordinateur. Assurez-vous que le fichier audio a un nom facile à retenir afin que vous puissiez le trouver rapidement.

   Créez un nouveau calque pour chaque fichier audio. Il n'est pas nécessaire et vous pouvez ajouter du son aux couches existantes, mais l'insertion du fichier audio sur une couche séparée vous permettra de mieux contrôler la bande originale de l'animation.

   Créez une image clé à partir de laquelle la lecture du son commencera. Sur la couche avec du son, sélectionnez le cadre de l'animation à partir de laquelle la lecture du son commencera. Appuyez sur F7 pour insérer un cadre de clé vierge. Par exemple, si vous souhaitez insérer un fichier audio qui sera joué dans l'animation, sélectionnez la première image sur la couche avec un fichier audio. Si vous ajoutez la voix d'un personnage, sélectionnez un cadre où le personnage commence à parler.

Vous n'avez pas pensé qu'il se cachait derrière la belle animation des bannières sur Internet? Ou pour les dessins animés neufs créés par la technologie informatique? Le plus souvent, ils sont basés sur "chair", il est plus précisément traduit par la technologie Flash anglaise anglaise. Aujourd'hui, nous parlerons d'animation flash pour le site:

Technologie flash

La base multimédia a été développée par Macromedia. Mais après son absorption (fusion), tous droits à la technologie sont passés au nouveau propriétaire - Adobe Systems.

Région d'utilisation moderne Adobe Flash:

• La création d'applications Web est une direction assez nouvelle. Il implique une utilisation totale ou partielle de Flash pour créer des sites. Utilisation partielle utilisant cette technologie, des éléments de conception distincts sont créés: divers menus interactifs, boutons animés, etc.

Comparé aux ressources ordinaires sur hTML-Basé Les sites Flash ont certaines fonctionnalités qui limitent leur application. Cela peut être attribué au plus grand coût de développement, aux exigences de ressources de serveur, au long temps de chargement avec une connexion lente avec Internet et d'autres aspects:

• Mise en œuvre des fonctionnalités multimédia - Pour écouter de la vidéo audio et de lire sur des sites, les lecteurs multimédia créés basés sur Flash sont souvent utilisés. Leur développement comprend l'utilisation de l'une des langues de script (plus souvent JavaScript):

• Dans la publicité sur Internet - le plus souvent, la technologie est utilisée pour créer des bannières animées. Ils signifient non seulement la lecture de la publicité multimédia, mais également une interaction avec l'utilisateur sur une base de jeu.

Fondamentaux et outils pour le développement de Flash

Pour créer une animation flash, la boîte à outils traditionnelle d'Adobe est la plus souvent utilisée:

• Adobe Flash Professional est un programme de création d'une animation interactive (animateur);
• Adobe Flash Builder - mercredi pour créer une interface d'application Web;
• Adobe Lecteur Flash. - Intégré au joueur de navigateur pour jouer à Flash.

En plus de cela, reproduit le contenu multimédia de ce type. applications tierces. Les plus populaires d'entre eux sont Gnash, QuickTime et quelques autres:

Cette technologie vous permet d'afficher n'importe quel type de graphisme ( raster, vecteur, 3d). Et prend également en charge le relais de diffusion de données audio et vidéo. En particulier pour appareils mobiles Une version légère de Flash Lite a été développée.

La norme principale pour les fichiers flash est l'extension SWF. L'abréviation est déchiffrée comme un petit format Web. La vidéo enregistrée dans Flash a des extensions de fichier FLV, F4V.

La base du développement de l'animation interactive pour flash réside graphiques vectoriels. C'est à cause de cela qu'il était possible de mettre en œuvre le soutien de la plate-forme multimédia et de l'indépendance de la qualité de l'animation à partir de la résolution de l'écran.

Les applications de taille de fichier flash sont les mêmes pour tous les utilisateurs indépendamment de caractéristiques techniques Écran (autorisations).

L'animation interactive sur le flash est basée sur la morphing (type de vecteur), dans laquelle un écoulement lent entre les images clés survient. Pour reproduire des données, un lecteur flash est utilisé, dont le travail est en grande partie semblable au travail. machine virtuelle Javascript. La composante du programme de la technologie est mise en œuvre à l'aide de la langue ActionScript.

Le manque de technologie comprend les points suivants:

• Forte charge sur cPU Voiture cliente. Cela est dû à la faible efficacité de la machine virtuelle Flash intégrée au lecteur dans le navigateur de l'utilisateur;
• Une probabilité élevée d'erreurs - une animation flash clignotante peut se produire avec une forte probabilité d'événement d'erreur. De plus, les échecs de lecture flash affectent négativement le travail de l'ensemble de l'application cliente (navigateur). Cela en est dû en contrôlant insuffisant la tolérance de défaillance du code de programme lors de la création d'applications flash;
• L'impossibilité d'indexation est tout contenu de texteAffiché dans le contenu de Flash ne participe pas au processus d'indexation. Cette restriction est particulièrement problématique pour ces ressources basées sur cette technologie.

Vue d'ensemble du logiciel tiers pour créer Flash

En tant que prototype d'une demande sur laquelle nous allons démontrer les fondations créer un flash. a été pris sothink swf plus vite. Selon de nombreux professionnels, le programme est le plus compréhensible et facile à explorer.

En plus de créer et d'éditer un flash, l'éditeur "sait" pour travailler avec tous les autres types d'animation Web (GIF, HTML et d'autres normes):

Après l'installation, entrez dans une interface de programme conviviale. Malheureusement, après errer pour tous les promoteurs du commutateur de langue de l'interface, nous n'avons pas trouvé.

Afin de comprendre comment créer une animation flash dans cette application, utilisez les modèles intégrés. La boîte de dialogue Nouvelle Modèle de gounde 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 la création d'une bannière:

Dans la fenêtre suivante de l'assistant dans la liste déroulante, sélectionnez le modèle pour lequel l'animation se produira. Sous une petite image dans laquelle le modèle sélectionné est joué:

Dans les étapes suivantes, vous devez définir la taille de la bannière et entrer 5 phrases du texte qui sera joué dans l'animation. De plus, vous devez spécifier l'adresse de la ressource à laquelle l'utilisateur dirigera la clic sur la bannière:

Après avoir compilé le projet et fermer la fenêtre de l'assistant, vous pouvez afficher le rouleau résultant dans le joueur intégré. Pour ce faire, cliquez sur la flèche verte en haut:

Après avoir fermé le joueur, étudions l'interface de l'application plus en détail. Veuillez noter qu'il se compose de deux fenêtres principales: le sommet est conçu pour éditer l'intervalle de temps du rouleau et le plus bas représente l'habituel. éditeur graphique. Chacun des éléments est situé sur une couche séparée, disponible pour le changement en utilisant outils standardsitué sur la barre latérale.

Programme GRATUIT pour créer une animation flash avec des applets finis.

Beaucoup d'entre vous, je pense, un jour a essayé de créer vos propres sites (et peut-être que vous avez même le propriétaire d'un portail très populaire).

D'une manière ou d'une autre, tout le monde est tombé sur le problème de la conception spectaculaire de ses pages Web. Et, étant donné que le code HTML statique passe progressivement dans le passé, beaucoup aujourd'hui paient leur attention à un tel technologies populairescomme JavaScript et flash. Ils vous permettent de créer de belles pages dynamiques animées avec une fonctionnalité étendue.

Pour un spécialiste ne fera pas beaucoup de difficulté à créer une petite bannière flash animée, cependant, que faire le reste des non-initiés? Si l'étude scrupuleuse des langages de programmation n'est pas incluse dans vos plans immédiats, vous pouvez toujours recourir à l'aide de logiciels spécialisés. Aujourd'hui, nous vous familiariserons avec les bases du travail dans le programme Fabricant d'effet avancé..

Cet utilitaire vous permet de créer toutes sortes d'effets Flash et JavaScript, ainsi que notre propre "à partir de zéro" et sur la base de modèles prêts! Exploiteur avancé existe dans plusieurs éditions, qui diffèrent du nombre d'effets finis et de degré de liberté de l'utilisateur. Comparez la configuration maximale et libre:

Comparaison de l'éditeur flash gratuit Editeur Flash Editeur Advanced Effect Maker Edition gratuite avec version commerciale Édition commerciale

Le plus gros défaut version gratuite Programmes - La présence d'une sorte de prapstode, qui vous permet d'afficher certains des effets de préparation uniquement après avoir cliqué sur la bannière créée. C'est toutes les différences de principe et de fin :).

Installation du programme

L'installation d'un fabricant d'effet avancé se produit de manière standard, alors allons directement travailler directement avec le programme:

Lorsque vous commencez par commencer, nous serons proposés de vous familiariser avec accord de licence. Pour l'accepter, cliquez sur "Je suis d'accord". Après cela, vous pouvez procéder à l'étude de l'interface utilitaire:

Interface et travail avec éditeur

Malgré anglais, tout est simple et clair. La fenêtre de fabricant d'effet avancé est divisée en deux parties. À gauche n'est que deux gros boutons: Le premier à entrer dans la galerie d'effets abordables, et la seconde consiste à ajouter des applets supplémentaires (ceci est si vous souhaitez les acheter;)). Dans la partie droite, nous voyons le répertoire des modèles disponibles avec des sous-sections et une fenêtre d'aperçu, ainsi que l'effet de l'édition de l'effet.

Pour commencer à éditer le modèle souhaité, il suffit de cliquer sur son image, et si vous voulez simplement voir comment cela fonctionne, cliquez sur l'inscription "Aperçu" sous l'image:

Lorsque vous ouvrez l'effet souhaité, un message peut apparaître sur un fichier existant. Si cela s'est produit, je l'ignore simplement en appuyant sur le bouton "OK":

Si le modèle a été ouvert avec succès, nous pourrons voir plusieurs onglets contenant toutes sortes de paramètres:

Paramètres du programme et création d'animation

Le premier onglet est "général". Voici contenue réglages généraux Projet. Ceci est généralement des tailles (largeur - largeur et hauteur de hauteur), nom (nom du fichier), qualité du fichier futur (qualité), ainsi que le mode Feuille de rouleau flash (mode fenêtre).

Le deuxième onglet est "couleur", comme on peut le voir à partir du nom, est responsable des couleurs utilisées dans le projet. Ici tout est extrêmement clair, alors passons à la suivante - "Messages":

Ici, nous avons deux domaines. Dans le premier champ (à gauche), nous entrons dans le texte que nous devons retirer avec un effet spécial et dans le second - un lien dans lequel l'utilisateur ira en cliquant sur notre bannière. Plus le fabricant d'effet avancé est que nous pouvons entrer un nombre illimité de chaînes de texte (ainsi que des liens), mais le principal minus est le manque de soutien de la langue russe: (.

Suivi de deux onglets sont utilisés pour contrôler les polices (polices) et les propriétés d'animation (autres), respectivement. Une nuance: si vous souhaitez utiliser des polices TTF alternatives, elles devront être pré-converties en compatibilité avec un fabricant d'effet avancé. Pour ce faire, appelez le menu "Outils" pour appeler l'outil "Convertir des polices" et en sélectionnant la police souhaitée, cliquez sur le bouton "Convertir":

Lorsque toutes les modifications sont effectuées, nous pouvons cliquer sur le bouton Créer une applet. Après cela, deux fichiers seront créés dans le dossier d'affectation de projet: SWF (animation directe) et HTML (contient des instructions pour l'introduction de l'animation reçue dans le code de votre page:

Préservation des résultats du travail

Cependant, ce n'est pas tout. Avec un fabricant d'effet avancé, vous pouvez créer votre propre effet sur la base d'un existant ou complètement «à partir de zéro»! Pour ce faire, allez dans le menu "Outils" et activez l'élément du fabricant de plug-in:

Ici, vous aurez d'abord besoin de demander un nom pour un nouveau projet, ainsi que d'autres paramètres (facultatif). Après cela, vous pouvez cliquer sur le bouton "Créer des applet" et nous vous tournez directement dans la fenêtre EFFECT Editor:

Ici, il y a plusieurs boutons qui vous permettent d'entrer une partie de l'effet futur dans le script. fonctions standard. Le problème consiste en le fait que toutes les variables et valeurs nécessaires devront être inspirées de manière manuelle et certaines compétences de programmation sur ActionScript ou JavaScript sont déjà requises :(.

conclusions

Le fabricant d'effet avancé peut goûter aux concepteurs Web novices, car il vous permet de créer des bannières assez spectaculaires, des menus animés, des diaporamas et même de petits jeux (types de taches) sans trop d'effort. L'inconvénient sous la forme d'un modèle de priorité (si disponible dans l'effet sélectionné) peut être éliminé à l'aide de programmes spéciaux de décompilateur de fichiers SWF (y compris libre);).

Bonne chance dans tous les efforts et succès créatifs!

P.s. Il est autorisé à copier librement et à citer cet article, à condition que vous spécifiez ouvert lien actif À la source et à la préservation de la paternité de Ruslana Toruschny.