Programme d'animation Flash en russe. Comment créer une animation flash

Un programme gratuit pour créer des vidéos flash de presque n'importe quel degré de complexité ! Comprend presque tous les outils nécessaires au travail quotidien avec Flash et peut être utilisé aussi bien par les débutants que par les professionnels. La principale différence et avantage de ce programme est sa prise en charge d'ActionScript 2.0, sans laquelle il est tout simplement impossible d'imaginer créer du contenu Flash professionnel.

Il semble que Dima Bilan ait raison lorsqu'il dit que l'impossible est possible :). Jusqu'à récemment, les développeurs Web devaient pirater ou payer beaucoup d'argent pour avoir la possibilité de travailler avec l'animation Flash. Et maintenant, enfin, l'heure est venue où une troisième option à part entière est apparue : utiliser un éditeur Flash gratuit.

Auparavant, il existait déjà un programme similaire sur notre site, mais son inconvénient était qu'il était quelque peu obsolète, disposait d'un ensemble d'outils limité et ne prenait pas en charge le langage de programmation ActionScript, si nécessaire pour créer des sites Web, des jeux, des jeux, etc. etc.

Aujourd'hui, je vais vous présenter un éditeur Flash complètement moderne, qui peut rivaliser presque sur un pied d'égalité avec le célèbre Adobe Flash - Giotto vectoriel.

Comparaison du Vectorian Giotto avec un analogue payant

Comme vous pouvez le constater, les développeurs de Vectorian Giotto ont fait de leur mieux et ont essayé d'intégrer dans leur programme le maximum possible de fonctions similaires à Adobe Flash. De plus, la plupart des raccourcis clavier sont également les mêmes, donc ceux qui sont habitués à travailler avec l'éditeur Adobe n'auront pas beaucoup de difficulté à passer à la plateforme gratuite Vectorian Giotto !

Eh bien, pour le dessert, l'éditeur gratuit a aussi quelque chose qui manque parfois à son « grand frère » : une bibliothèque intégrée d'effets d'animation qui plaira particulièrement à ceux qui créent des bannières flash.

Préparation au travail

Pour commencer à travailler avec Vectorian Giotto, nous devons télécharger l'archive avec l'installateur, qui d'ailleurs ne pèse que 8 mégaoctets ! Lorsque l'archive est téléchargée, ouvrez-la et exécutez le fichier VectorianGiotto.exe.

Malgré le fait que l'installation (et le programme lui-même, malheureusement :)) soit en anglais, cela ne devrait poser aucune difficulté, puisqu'il n'est pas nécessaire de modifier quoi que ce soit dans les paramètres par défaut. Cliquez simplement plusieurs fois sur le bouton « Suivant » et attendez la fin du processus d'installation ;).

Première connaissance de l'interface

Une fois l'installation terminée, si nous n'avons rien modifié dans les paramètres standard, la fenêtre de travail de Vectorian Giotto apparaîtra en plein écran :

Comme je l'ai déjà dit, l'interface du programme est en anglais, donc afin d'éviter des malentendus et des malentendus lors de l'exécution d'autres actions décrites dans l'article, je voudrais vous présenter quelques appareils conceptuels :). Commençons, comme d'habitude, de haut en bas et de gauche à droite.

Barre de menus. C'est le panneau sur lequel se trouvent tous les menus du programme Vectorian Giotto. Lorsque vous travaillez avec une animation, vous aurez peut-être besoin de sections telles que « Fichier » (pour enregistrer et exporter votre animation au format SWF), « Affichage » (pour définir les paramètres d'affichage de l'espace de travail), « Modifier » (pour gérer les paramètres du document actuel et travailler avec les effets de la bibliothèque) et « Fenêtre » (pour personnaliser les modules affichés et les panneaux de programme).

Barre d'outils principale. Voici des boutons de gestion des actions du projet et un panneau de lecture d'animation.

Panneau de dessin (occupe tout le côté gauche de la fenêtre du programme). Vous trouverez ici tous les outils nécessaires pour créer les objets souhaités de votre animation, ainsi que des boutons qui vous permettent de configurer les paramètres des outils nécessaires.

Storyboard (ou chronologie). Vous permet de gérer les cellules du cadre et les calques créés.

Panneau de contrôle des couleurs. Avec son aide, vous pouvez modifier rapidement la couleur des formes précédemment créées. Il permet également de sélectionner le type de remplissage de vos objets d'animation (solide, dégradé, etc.).

Zone de travail. C'est une feuille de « papier » virtuelle conçue pour dessiner vos animations :).

Éditeur ActionScript. Si vous devez créer non pas de simples bannières, mais quelque chose de plus complexe, comprenant des boutons et toutes sortes d'objets interactifs, vous ne pouvez pas vous passer d'un éditeur de script.

Panneau de structure de clips. Affiche toutes les formes qui sont « dans le cadre » et vous permet de basculer rapidement entre elles et de gérer leur séquence.

Panneau Propriétés. Chaque objet en flash possède certaines propriétés. Ce panneau permet de les gérer.

Panneau de transformation. Vous permet de modifier rapidement la taille et la position de l'élément d'animation sélectionné.

Bibliothèque d'éléments. Représente une liste d'objets créés ou importés qui peuvent être (et sont à plusieurs reprises !) insérés dans une animation.

Un programme gratuit pour créer une animation Flash à l'aide d'applets prêts à l'emploi.

Je pense que beaucoup d’entre vous ont déjà essayé de créer leurs propres sites Web (et peut-être même possèdent-ils un portail très populaire).

D'une manière ou d'une autre, tout le monde a été confronté au problème de la conception efficace de ses pages Web. Et comme le code HTML statique devient progressivement une chose du passé, nombreux sont ceux qui se tournent aujourd'hui vers des technologies aussi populaires que JavaScript et Flash. Ils vous permettent de créer de belles pages dynamiques animées avec des fonctionnalités avancées.

Il ne sera pas difficile pour un spécialiste de réaliser une petite bannière flash animée, mais que doivent faire les autres non-initiés ? Si une étude approfondie des langages de programmation ne fait pas partie de vos projets immédiats, vous pouvez, comme toujours, recourir à l'aide de logiciels spécialisés. Aujourd'hui, nous allons nous familiariser avec les bases du travail dans le programme Créateur d'effets avancé.

Cet utilitaire vous permet de créer toutes sortes d'effets Flash et JavaScript, à la fois les vôtres « à partir de zéro » et basés sur des modèles prêts à l'emploi ! Advanced Effect Maker existe en plusieurs éditions, qui diffèrent par le nombre d'effets prêts à l'emploi et le degré de liberté de l'utilisateur. Comparons les configurations maximales et gratuites :

Comparaison de la version gratuite de l'éditeur Flash Advanced Effect Maker Free Edition avec la version commerciale Commercial Edition

Le plus gros inconvénient de la version gratuite du programme est la présence d'une sorte de pré-applodeur, qui permet de visualiser certains effets prêts à l'emploi uniquement après avoir cliqué sur la bannière créée. C'est là que s'arrêtent toutes les différences :).

Installation du programme

L'installation d'Advanced Effect Maker s'effectue de manière standard, passons donc directement au travail avec le programme :

Lors du premier lancement, il nous sera demandé de lire le contrat de licence. Pour l'accepter, cliquez sur le bouton « J'accepte ». Après cela, vous pouvez commencer à étudier l'interface de l'utilitaire :

Interface et travail avec l'éditeur

Malgré la langue anglaise, tout ici est simple et clair. La fenêtre Advanced Effect Maker est divisée en deux parties. Sur la gauche, il n'y a que deux gros boutons : le premier permet d'accéder à la galerie d'effets disponibles, et le second permet d'ajouter des applets supplémentaires (c'est si vous souhaitez les acheter ;)). Sur le côté droit, nous voyons un catalogue de modèles disponibles avec des sous-sections et une fenêtre d'aperçu, ainsi qu'une zone d'édition d'effets.

Pour commencer à éditer le modèle souhaité, cliquez simplement sur son image, et si vous voulez juste voir comment il fonctionne, cliquez sur « Aperçu » sous l'image :

Lors de l'ouverture de l'effet souhaité, un message peut apparaître indiquant que le fichier existe déjà. Si cela se produit, ignorez-le simplement en cliquant sur le bouton « Ok » :

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

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

Le premier onglet est « Général ». Celui-ci contient les paramètres généraux du projet. Il s'agit généralement des dimensions (largeur - largeur et hauteur - hauteur), du nom (nom du fichier), de la qualité du futur fichier (qualité), ainsi que du mode fenêtre de l'animation flash (mode fenêtre).

Le deuxième onglet, « Couleur », comme son nom l'indique, est responsable des couleurs utilisées dans le projet. Tout est très clair ici, passons donc au suivant – « Messages » :

Ici, nous avons deux champs. Dans le premier champ (à gauche), nous saisissons le texte que nous devons afficher avec un effet spécial, et dans le second, le lien que l'utilisateur suivra en cliquant sur notre bannière. L'avantage d'Advanced Effect Maker est que nous pouvons saisir un nombre illimité de lignes de texte (ainsi que des liens), mais le principal inconvénient est le manque de prise en charge de la langue russe :(.

Les deux onglets suivants permettent respectivement de gérer les polices (Polices) et les propriétés d'animation (Autres). Une mise en garde : si vous souhaitez utiliser des polices TTF alternatives, elles devront d'abord être converties pour être compatibles avec Advanced Effect Maker. Pour cela, appelez l'outil « Convertir les polices » depuis le menu « Outils » et, après avoir sélectionné la police souhaitée, cliquez sur le bouton « Convertir » :

Lorsque toutes les modifications ont été apportées, nous pouvons cliquer sur le bouton « Créer une applet ». Après cela, deux fichiers seront créés dans le dossier de destination du projet : SWF (animation directe) et HTML (contient des instructions pour implémenter l'animation résultante dans le code de votre page :

Sauvegarde des résultats du travail

Cependant, ce n'est pas tout. Avec Advanced Effect Maker, vous pouvez créer votre propre effet basé sur un effet existant, ou entièrement à partir de zéro ! Pour cela, allez dans le menu « Outils » et activez l'élément « Plugin Maker » :

Ici, vous devrez d'abord définir un nom pour le nouveau projet, ainsi que quelques autres paramètres (facultatifs). Après cela, vous pouvez cliquer sur le bouton « Créer une applet », et nous irons directement à la fenêtre de l'éditeur d'effets :

Il y a plusieurs boutons ici qui vous permettent d'entrer certaines fonctions standard dans le futur script d'effet. Le seul problème est que vous devrez saisir vous-même manuellement toutes les variables et valeurs nécessaires, ce qui nécessite quelques compétences en programmation en ActionScript ou JavaScript :(.

Conclusions

Advanced Effect Maker peut plaire aux concepteurs de sites Web débutants, car il vous permet de créer sans effort des bannières assez impressionnantes, des menus animés, des diaporamas et même de petits jeux (comme un tag). Le défaut sous la forme d'un pré-applodeur (s'il est présent dans l'effet sélectionné) peut être éliminé à l'aide de programmes spéciaux de décompilation de fichiers SWF (y compris gratuits) ;).

Bonne chance à vous dans tous vos efforts et réussite créative !

P.S. L'autorisation est accordée de copier et de citer librement cet article, à condition qu'un lien actif ouvert vers la source soit indiqué et que la paternité de Ruslan Tertyshny soit préservée.

gratuit
SWiSHmax 3.0 Build 2009.11.30 vous permettra de créer rapidement une animation de texte au format Macromedia Flash. Le programme SWiSHmax vous permet d'appliquer facilement des effets lorsque vous travaillez avec du texte.

Gratuit
SWF.max 1.6.865 est un lecteur de fichiers Macromedia Flash riche en fonctionnalités. Le programme SWF.max comprend un navigateur multimédia qui prend en charge l'affichage des vignettes et vous permet de parcourir rapidement et facilement les dossiers pour rechercher des clips Flash et sélectionner celui dont vous avez besoin, en vous concentrant non seulement sur leurs noms, mais également en affichant des images familières.

Gratuit
Flash Movie Player 1.5 est un programme qui lit les fichiers Flash pour vous. Flash Movie Player peut lire des fichiers Flash aux formats EXE, SWF ou FMP.

Gratuit
Adobe Shockwave Player 11.6.4.634 est un lecteur conçu pour lire des vidéos Flash. La technologie Adobe Shockwave vous permet de profiter de toutes les possibilités et de la luminosité des graphiques 3D interactifs lors de la visualisation sur Internet.

Gratuit
Adobe Flash Player 11.1.102.62 est un module multiplateforme qui sera votre outil indispensable pour visualiser du contenu Flash interactif multimédia (fichiers FLV et SWF) dans divers systèmes d'exploitation et navigateurs. Le programme Adobe Flash Player permettra à ses utilisateurs de visualiser, sans aucune restriction, des sites Web contenant des animations, du matériel vidéo, des jeux, des applications et du contenu Flash similaire sur leurs pages.

Gratuit
GetFlash 2.5 est un utilitaire capable de sauvegarder toutes les vidéos Flash trouvées sur les pages Web. L'utilitaire GetFlash simplifie grandement l'enregistrement de vidéos et d'animations en affichant la barre d'outils Flash au moment où la page contenant la vidéo ou l'animation est chargée.

Gratuit
Flash to Video Encoder Pro 5.2.21 est un convertisseur qui fonctionne avec les vidéos Flash au format SWF et FLV, en les convertissant au format vidéo MPEG, AVI, MP4, ASF ou WMV. Le programme Flash To Video Encoder PRO peut également être utilisé pour graver des fichiers Flash sur des disques DVD. De plus, le convertisseur Flash To Video Encoder PRO permet d'enregistrer chaque image d'un fichier flash sous forme d'image dans un format différent.

Gratuit
Flash Saver 6.3 est un programme qui enregistrera l'animation flash de n'importe quelle page sur Internet. Le programme Flash Saver fonctionne de la même manière que lors de l'enregistrement d'images en mode standard, c'est-à-dire en utilisant le bouton droit de la souris sur l'animation flash. Le programme est intégré au navigateur Internet Explorer et lors de son utilisation, il ne sera pas nécessaire de rechercher une vidéo que vous avez aimé dans des documents temporaires récents et d'y consacrer beaucoup de temps.

Gratuit
Alligator Flash Designer 8.0.24 est un programme permettant de créer des animations interactives (Flash) pour les sites Web. Le programme contient environ 130 effets d'animation. Le programme vous permet également de sélectionner une action onclick ou OnOver pour différents boutons et permet d'exporter immédiatement l'animation créée au format html.

Gratuit
SWF Maestro SCR 2.0 offre la possibilité d'utiliser l'animation SWF comme économiseur d'écran pour votre affichage. À l'aide du programme SWF Maestro SCR, vous pouvez créer un économiseur d'écran pour le mode veille à partir d'une animation ou d'une démonstration Flash sophistiquée. Grâce aux capacités du programme SWF Maestro SCR, qui compile les fichiers de votre choix, vous pouvez utiliser des fichiers aux formats FLV, XML, JPG, MP3 et autres pour créer un économiseur d'écran pour votre ordinateur.

Gratuit
Le didacticiel Macromedia Flash 5 est un assistant pratique et de haute qualité pour tout utilisateur, car il révèle les secrets d'utilisation du lecteur Macromedia Flash, nécessaire pour regarder diverses vidéos ou créer vos propres présentations.

Gratuit
Save Flash 4.3 sera utile pour de nombreux utilisateurs, car il est utilisé lorsque vous devez enregistrer un fichier au format flv ou swf. Si vous êtes fasciné par un jeu flash, une belle carte postale ou une bannière de n'importe quel site et que vous souhaitez l'obtenir sur votre ordinateur ou l'envoyer à un ami, alors ce programme est fait pour vous. Le programme SaveFlash affiche l'URL de la page que vous ouvrez sur Internet, indique la taille de n'importe quelle vidéo Flash et offre la possibilité de sauvegarder n'importe laquelle d'entre elles sur votre ordinateur.

Gratuit
Macromedia Flash Player 8.5 b133 RU est non seulement pratique et facile à utiliser, mais aussi le lecteur de la plus haute qualité qui lit des vidéos Flash.

Il semble que Dima Bilan ait raison lorsqu'il dit que l'impossible est possible :). Jusqu'à récemment, les développeurs Web devaient pirater ou payer beaucoup d'argent pour avoir la possibilité de travailler avec l'animation Flash. Et maintenant, enfin, l'heure est venue où une troisième option à part entière est apparue : utiliser un éditeur Flash gratuit.

Auparavant, il existait déjà un programme similaire sur notre site, mais son inconvénient était qu'il était quelque peu obsolète, disposait d'un ensemble d'outils limité et ne prenait pas en charge le langage de programmation ActionScript, si nécessaire pour créer des sites Web, des jeux, des jeux, etc. etc. Aujourd'hui, je vais vous présenter un éditeur Flash complètement moderne, qui peut rivaliser presque sur un pied d'égalité avec le célèbre Adobe Flash - Giotto vectoriel.

Comparaison du Vectorian Giotto avec un analogue payant

Comme vous pouvez le constater, les développeurs Giotto vectoriel Ils ont fait de leur mieux et ont essayé d'intégrer dans leur programme le maximum possible de fonctions similaires à Adobe Flash. De plus, la plupart des raccourcis clavier sont également les mêmes, donc ceux qui sont habitués à travailler avec l'éditeur Adobe n'auront pas beaucoup de difficulté à passer à la plateforme gratuite Giotto vectoriel! Eh bien, pour le dessert, l'éditeur gratuit a aussi quelque chose qui manque parfois à son « grand frère » : une bibliothèque intégrée d'effets d'animation qui plaira particulièrement à ceux qui créent des bannières flash.

Préparation au travail

Pour commencer Giotto vectoriel nous devrons télécharger l'archive avec l'installateur, qui d'ailleurs ne pèse que 8 mégaoctets ! Lorsque l'archive est téléchargée, ouvrez-la et exécutez le fichier installvectoriangiotto.exe. Malgré le fait que l'installation (et le programme lui-même, malheureusement :)) soit en anglais, cela ne devrait poser aucune difficulté, puisqu'il n'est pas nécessaire de modifier quoi que ce soit dans les paramètres par défaut. Cliquez simplement sur le bouton "Suivant" plusieurs fois et attendez la fin du processus d'installation ;).

Première connaissance de l'interface

A la fin de l'installation, si nous n'avons rien modifié dans les paramètres standard, une fenêtre de travail apparaîtra devant nous en plein écran Giotto vectoriel:

Comme je l'ai déjà dit, l'interface du programme est en anglais, donc afin d'éviter des malentendus et des malentendus lors de l'exécution d'autres actions décrites dans l'article, je voudrais vous présenter quelques appareils conceptuels :). Commençons, comme d'habitude, de haut en bas et de gauche à droite.

Barre de menus. C'est le panneau sur lequel se trouvent tous les menus du programme. Giotto vectoriel. Lorsque vous travaillez avec une animation, vous aurez peut-être besoin de sections telles que "Déposer"(pour enregistrer et exporter votre animation au format SWF), "Voir"(pour configurer les paramètres d'affichage de l'espace de travail), "Modifier"(pour gérer les paramètres du document actuel et travailler avec la bibliothèque d'effets) et « Fenêtre » (pour configurer les modules affichés et les panneaux de programme).

Barre d'outils principale. Voici des boutons pour contrôler les actions du projet et un panneau de lecture d'animation.

Panneau de dessin(occupe tout le côté gauche de la fenêtre du programme). Vous trouverez ici tous les outils nécessaires pour créer les objets souhaités de votre animation, ainsi que des boutons qui vous permettent de configurer les paramètres des outils nécessaires.

Scénario(ou chronologie). Vous permet de gérer les cellules du cadre et les calques créés.

Panneau de contrôle des couleurs. Avec son aide, vous pouvez changer rapidement la couleur des formes précédemment créées. Il permet également de sélectionner le type de remplissage de vos objets d'animation (solide, dégradé, etc.).

Zone de travail. C'est une feuille de « papier » virtuelle conçue pour dessiner vos animations :).

ÉditeurActionScript. Si vous devez créer non pas de simples bannières, mais quelque chose de plus complexe, comprenant des boutons et toutes sortes d'objets interactifs, vous ne pouvez pas vous passer d'un éditeur de script.

Panneau de structure de clips. Affiche toutes les formes qui sont « dans le cadre » et vous permet de basculer rapidement entre elles et de gérer leur séquence.

Panneau Propriétés. Chaque objet en flash possède certaines propriétés. Ce panneau permet de les gérer.

Panneau de transformation. Vous permet de modifier rapidement la taille et la position de l'élément d'animation sélectionné.

Bibliothèque d'éléments. Représente une liste d'objets créés ou importés qui peuvent être (et sont à plusieurs reprises !) insérés dans une animation.

Bases du dessin dans Vectorian Giotto

Le cercle que nous avons dessiné a maintenant deux paramètres de couleur : "Stylo"- accident vasculaire cérébral et "Brosse"- remplir (ou littéralement « brosser »). Ces deux paramètres peuvent être modifiés dans le panneau de contrôle des couleurs (« Forme »). Mais pour l'instant, nous nous intéressons à autre chose...

Dans le panneau de dessin, sélectionnez un outil "Outil de sous-sélection"(flèche blanche) et cliquez dessus sur notre figure. Des points apparaîtront sur le remplissage à l'intérieur du cercle et le trait se transformera en une ligne verte, divisée en petits segments par des points verts :). N'ayez pas peur, c'est tellement nécessaire. Nous sommes entrés dans le mode d'édition du contour de la figure et maintenant, grâce aux points apparus sur le contour, nous pouvons transformer notre cercle, par exemple, en citron :).

Pour ce faire, nous récupérons nos points et les faisons glisser vers la position souhaitée. S’il y a peu de points, on peut facilement les ajouter. Pour ce faire, pointons l'outil "Outil de sous-sélection" jusqu'à la position souhaitée et, en maintenant enfoncée la touche « Alt » du clavier, cliquez avec le bouton gauche de la souris.

Si vous vous retrouvez avec un coin trop pointu et que vous devez absolument l'arrondir, vous pouvez alors effectuer cette tâche en utilisant le même outil. Il suffit de sélectionner n'importe quel point du contour et sur les côtés de celui-ci apparaîtra leviers d'arrondi, avec lequel vous pouvez ajuster la quantité de courbure de n'importe quel vecteur :

Parfois (surtout si nous dessinons des objets symétriques), il est pratique d'utiliser guides. DANS Giotto vectoriel, comme dans Flash, vous pouvez les ajouter en maintenant enfoncé le bouton gauche de la souris sur la règle (en haut ou sur le côté) et en déplaçant le curseur vers la zone de travail.

Puisque nous dessinons un citron, nous devons choisir la bonne couleur. Pour le modifier, il suffit de sélectionner notre forme et dans la section « Pinceau » du Panneau de Contrôle des Couleurs, de cliquer sur la teinte souhaitée dans la palette.

Afin de rendre notre citron plus réel, activez l'outil « Crayon » (Crayon) et ajoutez une queue et d'autres éléments décoratifs :

Maintenant, tout est prêt, mais notre citron n'est pas encore un objet monolithique et se compose de nombreuses petites pièces. Afin de les « rassembler » en un tout, nous devons transformer notre citron en symbole. Un symbole en flash fait référence à des objets complexes constitués de nombreuses parties traitées comme un tout. Pour créer un symbole pour notre citron, nous devons tout sélectionner à l'aide de l'outil "Outil de sélection"(flèche noire) et appelez le menu contextuel de la sélection obtenue. Reste ici à trouver le point "Convertir en symbole"(ou appuyez sur F8 sur votre clavier) :

Le résultat de cette action sera l'ajout de notre citron à la bibliothèque ( "Bibliothèque"), à partir duquel nous pouvons l'ajouter à l'animation un nombre illimité de fois ! Naturellement, le symbole sera désormais traité comme un seul objet, mais nous ne pourrons plus le séparer :

Animation d'objets simples dans Vectorian Giotto

Nous avons donc créé l'objet que nous souhaitons animer. Faites-le dans Giotto vectoriel peut se faire de deux manières :

1. Animation en stop-motion. Dans ce cas, nous modifions simplement l'image de la précédente dans chaque image suivante, sans appliquer aucune action supplémentaire et en utilisant les outils standard du panneau de dessin. C’est le moyen le plus simple, mais aussi le plus long, de créer une animation.
2. Animation de mouvement. Ce type d'animation se caractérise par le fait que l'on crée manuellement seulement deux image clé(indiqué par un cercle sur la chronologie). Tout le monde est pareil cadres intermédiaires(indiqués par une bande grise unie avec un rectangle à la fin de la séquence d'images) sont créés automatiquement par le programme, en fonction de la différence de position de l'objet animé dans la première et la dernière image. Cette méthode est un peu plus compliquée, mais vous permet d'obtenir une animation fluide et sans saccades. C'est cette méthode que nous allons maintenant considérer.

Je propose de faire une animation de la rotation de notre citron, qui se situe dans la première image. Pour créer une animation de mouvement, il suffit, comme mentionné ci-dessus, d'ajouter une autre image légèrement modifiée. Je suggère de choisir 10ème image sur la timeline et appuyez sur le clavier Touche "F6". Notre première image sera copiée sur la 10ème, et entre elles apparaîtra une chaîne d'images intermédiaires, complètement identiques les unes aux autres.

Et maintenant - le plus important. À la 10ème image, nous devons changer d'une manière ou d'une autre la position de notre citron. Nous avons convenu qu'il devait tourner, alors retournons-le à 180°. Pour ce faire, vous pouvez utiliser le « Free Transform Tool » ou Panneau de transformation(ce qui est plus pratique dans notre cas). Entrez-le simplement dans le champ "Rotation" l'angle de rotation souhaité (le nôtre est de 180°) et appuyez sur Entrée.

Nous devons obtenir une séquence de 10 images, où dans la première image le citron « regarde » avec sa queue vers le haut, et dans la dernière - vers le bas. Si tout est fait correctement, alors il ne reste plus rien, à savoir - transformer une séquence d'images en une animation animée. Pour cela nous choisissons d'abord notre image sur la timeline et appelez son menu contextuel (bouton droit de la souris). Recherchez ensuite l'élément dans la liste des actions qui apparaît "Créer une interpolation de mouvement" et appuyez dessus. Vous devriez voir une flèche noire entre la première et la dernière image :

Si vous avez réussi, nous pouvons vous féliciter : vous avez créé votre première animation ! Vous pouvez le visualiser en plaçant le curseur sur la première image et en cliquant sur le bouton du panneau de lecture "Jouer"(triangle noir à droite). Malheureusement, dans Giotto vectoriel Il n'y a pas de fonction de pré-compilation, on ne peut donc visualiser l'animation que sur l'espace de travail, ce qui n'est pas si mal :).

Travailler avec des calques

Jusqu'à présent, nous n'avons travaillé qu'avec un seul objet, cependant, dans des animations à part entière, il peut y avoir des dizaines d'objets de ce type ! Si vous devez placer plusieurs symboles différents sur une même scène, il est préférable de les placer sur des calques séparés. Le principe de fonctionnement des calques en flash est similaire au principe de leur fonctionnement dans les éditeurs graphiques. La seule différence est que nos calques apparaîtront sur toutes les images.

Je propose de continuer notre animation et d'y ajouter nouvel élément - mur, que notre citron va frapper et voler hors du cadre.

Tout d’abord, poursuivons l’animation de la rotation du citron. Insérons un nouveau « mot-clé » (bouton F6, si vous ne l'avez pas oublié) dans 18ème image. Sur Panneaux de transformation augmentez le degré de rotation à 280° et appuyez sur Entrée. Créons une animation de mouvement entre les images 10 et 18 en appelant le menu contextuel dans la 10ème image et en cliquant sur "Créer une interpolation de mouvement".

Maintenant, allons créons un nouveau calque. Pour cela, trouvez un petit bouton sous le storyboard "Insérer un calque"(feuille blanche avec un signe plus vert) et appuyez dessus. Vous devriez avoir un nouveau calque avec une première image clé vide. Allons à 18ème image et créez-y un autre « mot-clé » (touche F6). Maintenant tu peux commencer à dessiner "mur". Pour ce faire, sélectionnez l'outil sur le panneau de dessin "Outil Rectangulaire"(Rectangle) et dessinez une petite bande de la couleur souhaitée sur le côté droit du cadre :

Maintenant, sur chaque calque, nous devons créer par clé 20ème image. Dans celui-ci, nous tournerons notre citron à 300° et le mur à l'aide de l'outil de déplacement "Outil de transformation gratuit" ou "Outil de sous-sélection" Rapprochons-le du citron :

Créons-le sur la base de la 21ème image clé. Ici, nous allons créer l’illusion du citron interagissant avec le mur. Lorsqu'ils heurtent une surface, tous les objets élastiques sont légèrement déformés. Afin de montrer cette déformation, on peut encore utiliser soit l'outil "Outil de transformation gratuit", ou le panneau de transformation. Dans notre cas, nous devons compresser un peu le citron le long de l'axe Y, nous modifions donc la valeur en pourcentage dans le champ "Échelle Y" sur le panneau de transformation de 100 % à 80 %, après avoir décoché "Rapport de verrouillage":

La touche finale sera que notre citron s'envole de l'écran. Pour ce faire, créez des clés sur les deux calques 25ème images et passez à la couche de citron. Puisqu’il a été compressé le long de l’axe Y, il devrait voler en diagonale. Dans la 25ème image, nous remettons notre symbole à une taille de 100 % et le déplaçons vers le coin supérieur gauche comme ceci. Cette partie s’étend donc au-delà du bord du cadre. Il ne reste plus qu'à revenir à la 21ème image et appliquer une animation de mouvement :

À ce stade, notre animation est prête et nous pouvons la visualiser en cliquant sur "Jouer".

Travailler avec la bibliothèque d'effets

Au tout début de l'article, j'ai mentionné que Giotto vectoriel Il se compare avantageusement à ses analogues non seulement parce qu'il est gratuit, mais aussi parce qu'il dispose d'une bibliothèque d'effets intégrée ! Ces effets sont plus beaux lorsqu’ils sont appliqués au texte. Je propose de poursuivre notre animation précédente avec un citron avec un insert de texte. Pour cela, créez une nouvelle image clé (26ème) sur le calque citron et prenez l'outil "Outil Texte" et écrivez du texte dans la zone de travail (par exemple, « Game Over » :)) :

Enregistrement de l'animation

Eh bien, maintenant nous avons compris les bases du travail dans Giotto vectoriel. La seule chose que nous n'avons pas encore faite est de sauvegarder notre animation. Vous pouvez à nouveau enregistrer la vidéo terminée de deux manières :

1. Enregistrement dans un fichier modifiable. Cette fonction vous permet de sauvegarder le source de votre animation dans un fichier qui pourra être modifié ultérieurement. Contrairement à Adobe Flash, Giotto vectoriel ne prend pas en charge l'édition des fichiers FLA et propose d'enregistrer les codes sources d'animation dans son propre format - VGD. Si vous envisagez de terminer ou de modifier quoi que ce soit dans votre projet à l'avenir, vous devez enregistrer l'animation dans ce format. Pour cela, cliquez simplement sur le bouton "Sauvegarder" dans la barre d'outils principale ou appelez le menu "Déposer" et sélectionnez-y un élément similaire. Dans la fenêtre qui apparaît, définissez le nom du fichier et sélectionnez l'emplacement où l'enregistrer. Veuillez noter que le fichier résultant ne peut être utilisé pour être visualisé nulle part, sauf Giotto vectoriel.
2. Enregistrement dans un fichier SWF. Si vous avez créé la version finale de votre vidéo et souhaitez la publier publiquement, vous devrez l'enregistrer sous forme de fichier SWF. Pour ce faire, appelez le menu "Déposer" et activez l'élément "Exporter une vidéo Flash". Dans la fenêtre qui s'ouvre, on sélectionne également l'emplacement où l'animation sera enregistrée, son nom et on clique "Sauvegarder". Après cela, la fenêtre suivante apparaîtra :

Ici on nous propose de compresser notre vidéo en activant la case à cocher "Compresser le film". Je ne peux pas donner de conseils précis ici... Oui, le programme compresse la taille de la vidéo d'environ un tiers, mais parfois, lorsque l'option de compression est activée, il coupe également l'animation. Par conséquent, si vous décidez d'utiliser la compression, assurez-vous de vérifier si toutes les images sont bien en place ;).

Avantages et inconvénients du vecteur Giotto

Avantages :

• gratuit;
• la présence de tous les outils nécessaires et la similitude de l'interface avec Adobe Flash ;
• travail pratique avec la couleur;
• modularité des interfaces ;
• disponibilité d'une bibliothèque d'effets et de modèles.

Inconvénients :

• forte intensité de ressources lorsque vous travaillez avec plusieurs couches ;
• pas de langue russe ;
• pas très pratique pour travailler avec ActionScript ;
• pas de prise en charge des fichiers FLA ;
• algorithme de compression vidéo inachevé.

Conclusion

Pour l'instant Giotto vectoriel- l'éditeur flash gratuit le plus fonctionnel qui peut être utilisé avec succès aussi bien par les flasheurs débutants que par les professionnels expérimentés ! Les débutants apprécieront la simplicité et le caractère quelque peu caricatural de l'interface, ainsi que la possibilité de créer de superbes effets sans avoir besoin de connaître les langages de programmation. Pour les professionnels Giotto vectoriel Vous pourriez l’aimer car il prend en charge le langage ActionScript et c’est gratuit ! Le seul inconvénient majeur du programme est sa langue anglaise, qui arrête généralement les débutants. Cependant, la plupart des leçons Flash sont également créées dans la version anglaise d’Adobe Flash, je ne pense donc pas qu’il y ait une grande différence pour vous. Mais si vous souhaitez quand même apprendre rapidement l'anglais, alors voici un programme pour vous aider ;). Allez-y!

P.S. Cet article est destiné à une distribution gratuite. Vous êtes invités à le copier tout en préservant la paternité de Ruslan Tertyshny et de tous les P.S. et P.P.S.

P.P.S. Si vous ne voulez pas vous embêter avec un éditeur Flash complet, mais souhaitez créer une belle bannière, vous pouvez utiliser l'application suivante :

02/07/15 5,3K

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 demandes en 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 distinct, qui peut être modifié à l'aide des outils standards situés dans la barre latérale :