Comment faire une animation gif dans illustrator. Comment créer une animation dans Adobe Illustrator. Isométrique avec styles graphiques

Aujourd'hui, nous avons une leçon inhabituelle sur Adobe Illustrator. Car cette fois nous ne ferons pas une image statique, mais une véritable animation. Imaginez, il s'avère qu'avec l'aide d'Adobe Illustrator, vous pouvez également dessiner des dessins animés :)

Et nous n'avons besoin de rien pour cela. Organisation compétente des couches et exportation du travail final au format swf, où chaque couche est convertie en une image d'animation. Dans le didacticiel d'aujourd'hui, nous allons dessiner une animation de compte à rebours dans un style de film rétro. La sortie devrait être un film flash avec ce même compte à rebours.

La première chose à faire est de dessiner tous les éléments nécessaires à la future animation. Pour ce faire, j'ai fait deux positions d'image de film dans un document séparé, un cercle de référence, qui est découpé en secteurs séparés, une texture et une rayure verticale pour ajouter l'effet de l'antiquité, ainsi que tous les chiffres et inscriptions.

Lorsque toutes les parties de notre dessin animé sont prêtes, vous pouvez commencer à créer l'animation elle-même. Pour plus de commodité, il est préférable de le faire dans un nouveau document. Dans ce cas, les calques joueront le rôle de trames d'animation. Et dans la toute première couche, il vous suffit de copier le cadre du film. Positionnez-le au milieu de la zone de travail.

Vous voyez maintenant que créer une animation simple dans Adobe Illustrator n'est pas aussi difficile qu'il n'y paraît à première vue.

Mais pour créer de longues vidéos ou des applications interactives, il est toujours préférable d'utiliser Adobe Flash ou d'autres éditeurs flash. Par exemple, j'ai fait ce chat dans un vieux Macromedia Flash que j'ai déterré au travail.

Récemment également, HTML5 et CSS3 sont de plus en plus utilisés pour créer des animations. Ce code est pris en charge par les navigateurs modernes et ne nécessite pas l'utilisation d'un lecteur flash.

Roman alias dacascas spécialement pour le blog Notes d'un illustrateur microstock

Abonnez-vous à notre newsletter pour ne rien manquer des nouveautés :

Optimisation graphique Web

Les informations graphiques sont transmises beaucoup plus lentement que les informations textuelles et le temps de chargement des images est proportionnel à leur taille. fichiers graphiques. Par conséquent, le chargement rapide des pages Web nécessite une petite taille d'images graphiques intégrées dans celles-ci, ce qui est obtenu en les optimisant. L'optimisation d'image est comprise comme sa transformation qui fournit la taille de fichier minimale tout en maintenant la qualité d'image requise dans ce cas, qui est obtenue principalement en réduisant le nombre de couleurs dans les images graphiques, en utilisant des formats de fichiers compressés et spéciaux et en optimisant les paramètres de compression pour chaque fragments d'images.

Illustrator dispose d'outils d'optimisation d'image intégrés qui fournissent un processus d'optimisation rapide et efficace grâce à une variété de méthodes de prévisualisation. Aperçu donne une idée assez précise de l'apparence de l'image optimisée en temps réel, ce qui permet d'évaluer le résultat de l'optimisation et de sélectionner avec succès les paramètres souhaités. Et vous pouvez optimiser à la fois les images créées directement dans Illustrator et d'autres, telles que les photos que vous avez l'intention de mettre sur un site Web.

Les paramètres d'optimisation sont définis dans la fenêtre Enregistrer pour le Web(Save for Web), appelé par la commande du même nom du menu Dossier(Dossier). Le programme propose d'utiliser l'un des quatre modes de prévisualisation, mais deux sont les meilleurs pour évaluer la qualité de l'optimisation :

• 2-Up(deux options) visualisation simultanée de l'original et de l'image optimisée conformément aux paramètres spécifiés (Fig. 1);
• 4-Up(quatre options) Dans ce mode, la zone d'affichage est divisée en quatre fenêtres (Fig. 2) pour afficher l'image d'origine et trois versions de celle optimisée : la première version est créée en fonction des valeurs d'optimisation définies, et les deux autres sont des options pour les paramètres d'optimisation actuels.

Les deux modes vous permettent de gagner considérablement du temps sur la recherche. la meilleure option optimisation, car ils éliminent le besoin d'enregistrer des images avec différents paramètres d'optimisation et leur comparaison visuelle ultérieure. De plus, il est possible d'évaluer non seulement la qualité de l'image optimisée, mais également sa taille et son temps de téléchargement pour différentes options de connexion. À titre de comparaison, le mode le plus pratique est 4-Up (quatre options), qui vous permet d'évaluer visuellement l'impact de la compression ou de la réduction de la palette sur la qualité et la taille de l'image, et finalement de déterminer les meilleurs paramètres d'optimisation.

Illustrator vous permet d'optimiser les graphiques Web non seulement aux formats GIF, JPG, PNG-8 et PNG-24, mais également aux formats SWF et SVG. Les images indexées qui ont un petit nombre de couleurs sont enregistrées au format GIF. Pour enregistrer des images en couleur et en niveaux de gris, des photos et des graphiques riches en couleurs tels que des dégradés, utilisez Format JPG. Pour les images en couleur avec des zones transparentes, le format PNG est utilisé, ce qui vous permet d'enregistrer à la fois des images indexées et en couleur, tandis qu'en PNG-8, le nombre maximum possible de couleurs d'une image optimisée est de 256, et en PNG- 24 l'image peut avoir des millions de couleurs, et est donc similaire au format JPEG. La différence entre PNG-24 et JPEG est que la méthode de compression utilisée pour optimiser les images PNG-24 n'entraîne pas de perte de qualité, mais augmente la taille du fichier. Les formats SVG et SWF combinent des graphiques, du texte et des composants interactifs et peuvent également être optimisés.

Prenons un exemple spécifique d'optimisation d'image. Disons que dans le programme Illustrator, un emblème de site a été développé (Fig. 3), initialement enregistré au format AI. Une tentative d'optimisation immédiate pour le Web ne mènera à rien de bon, car dans ce cas l'image sera automatiquement recadrée, ce qui ne tiendra pas compte de la position réelle de l'inscription obtenue à la suite d'une déformation (Fig. 4 et 5).

Par conséquent, essayons d'exporter l'emblème au format PSD avec la commande Fichier=>Exporter(Fichier=>Exporter) La taille de l'image générée sera de 143 Ko. Ouvrez le fichier PSD résultant et utilisez la commande Fichier=>Enregistrer pour le Web(Fichier=>Enregistrer pour le Web). Compte tenu du nombre limité de couleurs impliquées dans l'image, dans ce cas, le format GIF est optimal, avec les paramètres spécifiques dont vous devez décider. En expérimentant les paramètres, vous pouvez voir que la meilleure qualité donne l'algorithme de compression par défaut du programme sélectif(Sélectif). Quant au lissage, alors, compte tenu de la présence d'un remplissage dégradé, mieux vaut choisir un algorithme avec génération de bruit bruit(Fig. 6). La taille du fichier d'optimisation résultant sera de 6,729 Ko (Fig. 7), tandis que la transparence de l'arrière-plan sera préservée, ce qui est facile à vérifier en enregistrant l'image GIF avec le fichier HTML (Fig. 8). En conséquence, dans cet exemple les fichiers emblem.html et emblem.gif ont été obtenus dans le dossier Primer1 .

Boutons

Un élément de conception spécifique indispensable de toutes les pages Web sont les boutons de commandes graphiques. Il est tout simplement impossible d'imaginer une page sans eux. Les boutons de dessin sont devenus aujourd'hui un genre spécial et Illustrator vous permet de créer les options les plus complexes. Par exemple, les boutons conçus comme des objets de grille et (ou) avec des masques semblent beaucoup plus efficaces que les boutons habituels.

Envisagez la possibilité de créer un bouton rond en relief dans Illustrator. Dessinez un objet vectoriel rempli d'une couleur arbitraire sous la forme d'un cercle (Fig. 9) et convertissez-le en une grille à l'aide de la commande Objet=>Créer un filet de dégradé(Object=>Create Gradient Mesh) en spécifiant quatre lignes et quatre colonnes, et dans la liste Apparence(Afficher) en sélectionnant une option Au centre souligner(Rétroéclairage) à 60 (Figure 10). Choisissez un outil Sélection directe et cliquez dans le coin supérieur gauche de l'objet, en sélectionnant les points d'ancrage qui s'y trouvent (Fig. 11). Changez la couleur de la cellule correspondante en blanc en la sélectionnant dans la palette Échantillons(Fig. 12).

Prenez un outil Ellipse(Ellipse), placez le marqueur de la souris au centre du cercle créé avant et, tout en maintenant les touches enfoncées autre et Décalage, étirez le nouveau cercle au-dessus de l'ancien afin qu'il soit plus grand que l'ancien de 1 à 2 pixels sur tous les côtés. Faites-en une bordure noire Coup) 1-2 px de large et remplissez-le avec un dégradé radial du rouge au blanc (Figure 13). Faites glisser l'objet vectoriel créé de 1 à 2 pixels vers la droite et vers le bas, puis, sans supprimer la sélection, faites un clic droit dessus et de menu contextuel sélectionner une équipe Organiser => Envoyer à l'arrière(Organiser=>Renvoyer). En conséquence, nous obtenons un blanc pour le bouton illustré à la Fig. Quatorze.

En règle générale, sur toute page Web, il existe plusieurs boutons du même type, ne différant, par exemple, que par le sens des flèches dessinées dessus, qui indiquent le sens de déplacement sur le site. Considérons le cas le plus simple d'avoir deux boutons, dont l'un, avec une flèche vers le bas, signifie passer à la page suivante, et le bouton avec une flèche vers le haut à la précédente. Comme blanc pour la flèche, prenons un triangle régulier dessiné avec l'outil Polygone(Polygone) rempli de noir et également stylisé comme un objet maillé pour un plus grand effet. Déplacez la flèche vers le bouton et ajustez la position de tous les objets les uns par rapport aux autres à l'aide des boutons de palette correspondants Aligner(Alignement). Le premier des boutons reçus est illustré à la fig. 15. Faites une copie du calque avec le bouton en sélectionnant la commande Couche dupliquée Couches, on obtient ainsi deux couches identiques. Sélectionnez ensuite la flèche sur la copie du calque et faites-la pivoter de 180° en sélectionnant la commande du menu contextuel Transformer=>Rotation Transformation=>Rotation. Nous obtenons le même bouton que celui illustré à la Fig. 16. Veuillez noter qu'il est beaucoup plus pratique de stocker tous les boutons de même type d'un projet dans un fichier sur différentes couches, ce qui est démontré dans ce cas.

Vous devez maintenant enregistrer les options optimisées pour chacun des boutons. Rendre le calque inférieur invisible en premier dans ce cas le bouton du calque supérieur sera conservé. Choisissez une équipe Fichier=>Enregistrer pour le Web(Fichier=>Enregistrer pour le Web), configurez les paramètres d'optimisation du bouton, par exemple, comme indiqué sur la fig. 17, cliquez sur le bouton Sauver(Enregistrer) et saisissez un nom de fichier. Le bouton enregistré en conséquence est illustré à la Fig. 18. Rendez maintenant le calque inférieur visible, rendez le calque supérieur invisible et enregistrez le deuxième bouton de la même manière, en lui donnant un nom différent. Le résultat est montré dans la fig. dix-neuf.

Il ne reste plus qu'à s'assurer que les boutons s'affichent correctement sur la page Web et à les placer sur une page personnalisée (Figure 20). Par conséquent, dans cet exemple, le fichier Primer2.html et deux images graphiques ont été obtenus dans le dossier images (dossier Amorce2).

Si vous le souhaitez, pendant le processus d'optimisation, le bouton peut être facilement transformé en tranche. Dans ce cas, après avoir choisi la commande Fichier=>Enregistrer pour le Web(Fichier => Enregistrer pour le Web) et les paramètres d'optimisation doivent être sélectionnés à partir de l'outil de la palette d'outils Sélection de tranche(sélection de la tranche) et double-cliquez sur l'image, qui se transformera automatiquement en une tranche avec le numéro de série 1 (Fig. 21). Double-cliquez à nouveau pour ouvrir la fenêtre Options de tranche(Options de tranche), dans laquelle vous devrez spécifier un lien et, si vous le souhaitez, modifier le nom de la tranche (Fig. 22), puis enregistrer l'image optimisée. Le résultat dans ce cas sera les fichiers Primer3.html (Fig. 23) et Primer3.gif (dossier Primer3).

Éléments interactifs

Une façon de pimenter une page consiste à introduire des éléments de conception qui changent d'apparence (ou d'état) en fonction du comportement de la souris ou, plus rarement, en cas d'autres situations : zoom, défilement, chargement, erreurs, etc.

Parmi ces éléments, les plus connus sont les rollovers (de l'anglais roll over to roll, roll over) éléments qui changent d'apparence sous l'influence de la souris. Les boutons animés sont des exemples de survols typiques. Les survols sont souvent utilisés lors de la création d'autres éléments de navigation du site. En fait, tout survol n'est pas une, mais plusieurs (jusqu'à quatre) images, chacune correspondant à un événement spécifique. Les événements principaux sont considérés comme étant les suivants : État normal normal, Survol du curseur de la souris sur l'élément et Bas en appuyant sur le bouton gauche de la souris lors du survol de celui-ci. Théoriquement, des événements tels que Clic relâchant le bouton gauche de la souris après avoir cliqué, Haut après avoir relâché le bouton, Sortant en quittant la zone active peuvent être impliqués. Cependant, en pratique, on se limite le plus souvent à ne changer l'élément que pour les trois voire les deux premières épreuves.

Roulements classiques

Au sens classique, un survol est une série d'images graphiques au format GIF et leur code HTML correspondant, grâce auquel, selon le comportement de la souris, une image en remplace une autre dans la fenêtre du navigateur.

Illustrator n'est pas conçu pour créer directement des survols au sens classique, mais il peut aider au développement des éléments initiaux pour eux. L'idée dans ce cas est de créer un calque avec une image correspondant au premier événement. Faites ensuite une copie du calque et transformez l'image pour qu'elle corresponde au deuxième événement, et ainsi de suite. L'image en couches résultante est exportée vers un fichier PSD avec des couches conservées, sur la base desquelles un survol est créé dans le programme Image Ready. L'avantage d'utiliser Illustrator, comme dans de nombreux autres cas, est un certain nombre de ses fonctionnalités intéressantes qui ne sont pas disponibles dans d'autres outils logiciels, combinées à la commodité de la transformation de graphiques vectoriels.

Essayons de créer un survol sous la forme d'une inscription qui change de couleur en fonction du comportement de la souris. Ouvrez Illustrator et créez une forme sous la forme d'un rectangle arrondi et rempli de noir (Fig. 24), faites-en une copie et placez-la dans une partie libre de l'écran. Convertissez la première copie du rectangle en objet grille avec une surbrillance au centre (commande Objet=>Créer un filet de dégradé Object=>Create Gradient Mesh), en spécifiant quatre lignes et dix colonnes (Fig. 25). Activez la deuxième copie du rectangle et définissez-lui un remplissage dégradé, similaire à celui illustré à la fig. 26. Superposez l'objet dégradé au-dessus du maillage, réduisez l'opacité de l'objet dégradé à environ 80 % et la taille de l'objet dégradé à environ 1 pixel pour simuler un effet de renflement à la fin. Et puis sur les objets imprimer l'inscription. Dans sa forme d'origine, laissez-lui une couleur blanche qui correspondra à l'état Normal (Fig. 27), puis lorsque l'état de survol change, la couleur de l'inscription passera, par exemple, au vert lorsque le marqueur de la souris est survolé (état Over) et en bleu lorsque le bouton de la souris est enfoncé (état Down).

Attention à la palette Couchesà ce stade, il ne comporte qu'une seule couche. Faites deux copies de ce calque à l'aide de la commande Couche dupliquée(Dupliquer le calque) dans le menu de la palette Couches, il y aura trois calques dans la palette (Fig. 28). Ensuite, dans la première copie du calque, changez la couleur de l'inscription en vert et dans la seconde en bleu (Fig. 29). En conséquence, le blanc nécessaire pour le roulement sera obtenu.

Exportez l'image créée au format PSD avec les calques conservés à l'aide de la commande Fichier=>Exporter(Fichier=>Exporter) et en sélectionnant le modèle de couleur RVB (Fig. 30). Ouvrez le fichier PSD créé dans ImageReady (Figures 31 et 32). Créez des cadres basés sur des calques en choisissant la commande Créer des cadres à partir de calques(Créer des cadres à partir de calques) dans le menu de la palette animation. La fenêtre Animation ressemblera à la fig. 33. En même temps dans la palette Roulements Initialement, un seul état Normal sera créé.

Puis à la fenêtre animation sélectionner le cadre correspondant à l'état survolé, dans la palette Couches le calque est automatiquement sélectionné Copie de la couche 1(Fig. 34). Aller à la palette Roulements et cliquez sur le bouton Créer un état de survol(Créer un état de survol) fig. 35, ce qui fera apparaître l'état Au-dessus de l'état dans la palette Roulements(Fig. 36). Créez l'état de la même manière État bas. Activer l'état Normal dans la palette Roulements et supprimer dans la palette animation tous les cadres sauf celui qui doit correspondre à l'état Normal. Par conséquent, pour chaque état de survol dans la palette animation il n'y aura qu'un seul cadre (Fig. 37, 38 et 39).

Riz. 38. Vue de l'image, de la fenêtre Animation et des palettes Calques et Survols pour l'état Over

Vérifiez le résultat en cliquant sur le bouton Aperçu dans le navigateur par défaut(Aperçu du navigateur) dans la barre d'outils et en accédant à la fenêtre du navigateur (Figure 40). Après cela, enregistrez le fichier en utilisant la commande Fichier=>Enregistrer optimisé(Fichier=>Enregistrer avec optimisation) et en spécifiant l'option HTML et images (*.html). En conséquence, dans cet exemple, le fichier Primer4.html et une série d'images graphiques dans le dossier images ont été obtenus.

Riz. 40. Fenêtre du navigateur avec élément Rollover

Renversements SVG

Le format SVG (Scalable Vector Graphics scalable Graphiques vectoriels), créé sur la base du standard XML, vous permet également d'obtenir une variété d'éléments interactifs, en particulier des survols, mais en pratique, cela est implémenté d'une manière complètement différente. Il est à noter que la création de survols SVG interactifs, contrairement aux survols classiques, lorsque le code HTML correspondant est généré de manière entièrement automatique, nécessite une connaissance du langage JavaScript et une compréhension des principes de base de la programmation orientée objet.

Une palette spéciale est conçue pour fonctionner avec des objets SVG. Interactivité SVG, qui est facile à ouvrir avec la commande Fenêtre=>Interactivité SVG(Fenêtre=>interactivité SVG) fig. 41.

Considérons cette variante de création d'un survol en prenant l'exemple d'un bouton interactif, dont la couleur du libellé passera du noir au bleu au survol de la souris et redeviendra noire lorsque la souris quittera la zone active.

Créez un bouton rectangulaire avec des bords arrondis et choisissez un remplissage dégradé approprié, par exemple, comme indiqué sur la fig. 42. Ajuster la transparence du bouton dans la palette Transparence(Transparence) dans cet exemple, la valeur du paramètre Opacité(Opacité) est réglé sur 50 %. Faites une copie du bouton, remplissez-le de vert foncé (Fig. 43), puis convertissez-le en objet maillé avec la commande Objet=>Créer un filet de dégradé(Object=>Create Gradient Mesh) en spécifiant quatre lignes et dix colonnes, et dans la liste Apparence(Afficher) en sélectionnant une option Au centre(Vers le centre) et réglage de la valeur souligner(Surbrillance) à 100. Réduisez l'opacité du calque d'objet maillé à environ 40 % (Figure 44). Placez l'objet maillage au-dessus de l'objet dégradé et le bouton ressemblera à celui illustré à la Fig. 45.

Riz. 44. Transformer une copie d'un bouton en objet de grille

Complétez le bouton avec l'inscription souhaitée et ajustez sa position à l'aide des boutons de la palette correspondante Aligner(Alignement). L'image résultante contiendra un calque avec trois objets superposés (Fig. 46). Les événements planifiés feront référence à un objet texte, donc pour plus de commodité, changez son nom en Texte en double-cliquant sur l'objet et en saisissant un nouveau nom. De même, changez le nom du calque de Couche 1 à couche(Fig. 47).

Le traitement des événements implique l'utilisation de procédures JavaScript, vous devez donc inclure un fichier avec une description de ces procédures. Il s'appelle Events.js et est enregistré sur le disque dans le dossier Sample Files\Sample Art\SVG\SVG lors de l'installation d'Adobe Illustrator. Pour inclure le fichier Events.js, utilisez la commande Fichiers JavaScript Interactivité SVG(Fig. 48). Ensuite, vous devez appuyer sur le bouton Ajouter(ajouter) et trouver fichier souhaité sur le disque dur. Lorsque son nom apparaît dans le champ URL(fig. 49), cliquez sur le bouton Fait(Se déconnecter).

Riz. 48. Sélection de la commande de fichiers JavaScript

Après cela, vous devez définir la réaction aux événements de la souris pour l'objet Texte. Sélectionnez l'objet Texte, dans le champ un événement Palettes (Événement) Interactivité SVG sélectionner un événement surmouseover elemColor(evt, "Texte", "#3333FF") cela signifie que lorsque la souris est sur l'objet Texte sa couleur deviendra bleue (Fig. 50). Pour que la couleur du texte passe au noir lorsque la souris quitte la zone active, vous devez créer un événement supplémentaire onmouseout sélectionnez-le dans le champ un événement Palettes (Événement) Interactivité SVG. Ensuite, dans la ligne d'action, entrez le texte elemColor(evt, "Texte", "#000000") cela redeviendra noir (Fig. 51).

Riz. 51. L'aspect final de la palette Interactivité SVG pour l'objet Texte

Enregistrez le survol généré en tant que fichier SVG avec la commande Fichier=>Enregistrer sous(Fichier=> Type de fichier format SVG, puis en définissant les options d'enregistrement du fichier SVG comme indiqué sur la fig. 52. Après l'enregistrement, un seul fichier avec l'extension SVG sera obtenu, et non deux, comme dans le cas du survol classique, dans ce cas, le fichier Primer5.svg (dossier Primer5) a été obtenu. Cependant, pour que le roulement fonctionne vraiment, vous devez également copier le fichier Events.js avec la description des procédures JavaScript dans le dossier contenant le fichier SVG. Après cela, vous pouvez vérifier les performances du roulement, le résultat ressemblera à celui illustré à la Fig. 53.

Animation SVG

Le format SVG peut également être utilisé pour véhiculer une animation. Essayons de créer un élément d'animation simple (dans ce cas, il s'agira d'informations sur l'entreprise), qui apparaîtra à l'écran lorsque la souris passera sur l'objet graphique correspondant et disparaîtra lorsque la souris sera retirée de l'élément interactif.

Créons approximativement une telle série d'objets graphiques et textuels, comme illustré à la Fig. 54. Renommez tous les objets créés de manière pratique en cliquant successivement sur le nom de l'objet suivant dans la palette Couches et saisir le nom souhaité (Fig. 55). Notez que mis en évidence dans la Fig. 56 articles Texte1, Texte2, Texte3 et Chemin1 sera toujours visible, et tous les autres uniquement lorsque vous survolez l'objet Texte 1.

Riz. 54. Vue originale de l'image

Incluez le fichier Events.js avec une description des procédures JavaScript à l'aide de la commande Fichiers JavaScript(fichiers JavaScript) de la palette Interactivité SVG en appuyant sur le bouton Ajouter(Ajouter) en sélectionnant le fichier souhaité sur le disque dur et en cliquant sur le bouton Fait(Se déconnecter).

Définir une réponse d'événement de souris pour un objet Texte 1. Sélectionnez l'objet Texte, dans le champ un événement Palettes (Événement) Interactivité SVG sélectionner un événement surmouseover et dans la ligne ci-dessous entrez le texte elemShow(evt, "Text4"); elemShow(evt, "Path2"). Par conséquent, lorsque la souris est sur l'objet Texte 1 les objets deviendront visibles Texte4 et Chemin2. Veuillez noter que si plusieurs actions doivent être effectuées lorsqu'un événement se produit, elles doivent être spécifiées par le signe ";". Ensuite, faites de même pour l'événement onmouseout, en saisissant le texte correspondant, ce qui signifie masquer des objets (Fig. 57).

Enregistrez le résultat dans un fichier SVG avec la commande Fichier=>Enregistrer sous(Fichier=>Enregistrer sous), en spécifiant le nom du fichier, en sélectionnant dans le champ Type de fichier Format SVG, puis en définissant les options d'enregistrement du fichier SVG conformément à la Fig. 58. Après l'enregistrement, le fichier Primer6.svg (dossier Primer6) sera obtenu. N'oubliez pas de copier le fichier Events.js dans le dossier contenant ce fichier. Si après ça tu cours car fichier donné, vous verrez le résultat montré dans la Fig. 59. C'est presque ce dont vous avez besoin. La seule chose qui n'était pas incluse dans nos plans était l'apparition initiale des objets Texte 4 et Chemin 2 lors du chargement. Pour vous débarrasser de cette lacune, sélectionnez ces deux objets à la fois et créez une action pour eux elemHide(evt, "Text4"); elemHide(evt, "Path2") sur événement en charge(Fig. 60). Enregistrez à nouveau le fichier et assurez-vous que les objets sont maintenant Texte4 et Chemin2 visible uniquement lors du passage de la souris sur l'objet Texte 1.

Animation GIF

Toute page Web est impensable sans animation Web, y compris les gifs animés. Une façon de les créer consiste à utiliser l'application Adobe ImageReady, qui permet, entre autres, de créer une animation à partir de calques. Dans ce cas, l'image multicouche elle-même peut être préparée en différentes applications, y compris dans Adobe Illustrator.

Il est très facile de créer une animation basée sur des éléments de la palette Symboles(Symboles) ouvert par la commande Fenêtre=>Symboles(Fenêtre=>Symboles) ou depuis l'une des bibliothèques de symboles pouvant être ouvertes à l'aide de la commande Fenêtre=>Bibliothèques de symboles(Fenêtre=>Bibliothèques de symboles).

Par exemple, essayons d'augmenter la taille de n'importe quel objet-symbole, les étapes clés du processus d'augmentation de l'objet doivent être définies sur des calques séparés. Tout d'abord, placez simplement les objets symboles les uns sur les autres, puis augmentez la taille de chacun objet suivant, par exemple, comme le montre la Fig. 61. En conséquence, dans la palette Couches un calque avec de nombreux objets sera créé (Fig. 62). Si vous exportez directement cette image au format PSD, cela ne fonctionnera pas, car il n'y a qu'un seul calque, et naturellement, lorsque vous ouvrez le fichier PSD dans ImageReady, il n'y aura également qu'un seul calque. Par conséquent, vous devez d'abord placer les objets sur différents calques. Ceci peut être fait différentes façons le plus simple est de sélectionner d'abord le calque Couche 1 dans la palette Calques et utilisez la commande Relâcher sur calque(Libération en couches). Le résultat déplacera chacun des objets vers son propre calque, mais ils seront tous imbriqués dans le calque Couche 1. Par conséquent, vous devrez ensuite faire glisser manuellement toutes les couches imbriquées dans partie supérieure la palette Calques afin qu'ils soient au-dessus du calque Couche 1, puis le calque vide Couche 1 facile à enlever (Fig. 63). Exportez l'image au format PSD à l'aide de la commande Fichier=>Exporter(Fichier=>Exporter) avec les paramètres comme dans la fig. 64.

Chargez le fichier PSD créé dans le programme ImageReady (Fig. 65 et 66). Ouvrir le menu des palettes animationCréer des cadres à partir de calques(Créer des cadres à partir de calques). En conséquence, cinq cadres seront créés, chacun correspondant à son calque, et la fenêtre de la palette animation ressemblera à la Fig. 67.

Après cela, définissez la durée de chacune des trames créées dans ce cas, la durée de toutes les trames est fixée à 0,2 s. Et puis enregistrez l'animation optimisée avec la commande Fichier=>Enregistrer optimisé(Fichier=>Enregistrer avec optimisation). Le résultat obtenu peut ressembler à la Fig. 68.

Il est encore plus pratique d'utiliser les fonctions Mélanges en direct Logiciel illustrateur. Cette utilisation combinée d'Illustrator et d'ImageReady accélère considérablement le processus de création d'animations GIF.

Par exemple, dessinez deux objets multicolores arbitraires, puis mélangez-les avec les paramètres appropriés (Fig. 69). Il est impossible d'utiliser directement ce fichier pour créer une animation, puisque l'image est située sur un seul calque (Fig. 70). Par conséquent, vous devrez d'abord placer chaque élément de l'objet de mélange sur un calque séparé. Pour ce faire, dans la fenêtre Couches mettre la ligne en surbrillance , activez le menu de la palette en cliquant sur la flèche noire dans son coin supérieur droit, et choisissez la commande Séquence de libération vers les calques(Transformer en couches séquentiellement) (Fig. 71). Maintenir une touche enfoncée Décalage, sélectionnez les calques créés et placez-les au-dessus du calque Couche 1, puis supprimez le calque lui-même Couche 1, en le déplaçant vers la corbeille, la palette des calques prendra la même forme que sur la fig. 72.

Riz. 70. État initial de la fenêtre Calques

Exportez le fichier créé au format PSD avec la commande Fichier=>Exporter(Fichier=>Exporter). Ouvrez le fichier PSD créé dans ImageReady (Fig. 73). Veuillez noter que tous les calques créés dans le programme Illustrator apparaîtront dans la fenêtre des calques (Fig. 74) et dans la fenêtre animation il n'y aura qu'un seul cadre.

Activer le menu palette animation, en cliquant sur la flèche noire dans le coin supérieur droit de la palette, et choisissez la commande Créer des cadres à partir de calques(Créer des cadres à partir de calques) à la fin, dans cet exemple, cinq cadres seront créés, et la fenêtre de la palette animation prendra la forme conformément à la Fig. 75. Sélectionnez toutes les images en maintenant la touche Décalage, et définissez une durée de trame appropriée dans cet exemple, le même temps de 0,2 s est pris pour chacune des trames. Enregistrez ensuite le fichier avec la commande d'optimisation Fichier=>Enregistrer optimisé(Fichier=>Enregistrer avec optimisation) paramètre dans la liste Type de fichier option Images uniquement (*.gif). L'animation ressemblera à la Fig. 76.

Beaucoup plus intéressant n'est pas le mouvement, mais le redimensionnement en douceur des objets de fusion. Par exemple, vous pouvez utiliser la transition de fusion déjà créée. Dans ce cas, après avoir créé des calques séparés pour chaque élément de la transition de fusion, placez tous les objets les uns sur les autres à l'aide des boutons Centre d'alignement horizontal(Alignement par rapport au centre horizontal) et Centre d'alignement vertical Palettes (Alignement au centre vertical) Aligner(Fig. 77).

Exportez le fichier créé au format PSD ( Fichier=>Exporter Fichier=>Exporter) et ouvrez le fichier PSD créé dans le programme ImageReady (Fig. 78). Créer des images d'animation basées sur des calques ( Créer des cadres à partir de calques Créez des images à partir de calques) et choisissez la durée appropriée pour celles-ci (Fig. 79). Et ensuite, pour rendre l'animation plus efficace, copiez les images existantes, mais dans l'ordre inverse afin que l'image augmente d'abord puis diminue, et ainsi de suite en cercle (Fig. 80). Enregistrez ensuite le fichier d'optimisation ( Fichier=>Enregistrer optimisé Fichier=>Enregistrer avec optimisation). L'animation résultante est illustrée à la fig. 81.

Riz. 80. État de la fenêtre d'animation après la duplication des images

Riz. 81. Animation terminée

Adobe Illustrator et effets secondaires
Importation et animation simple

Ressources: Adobe IllustratorCC
Adobe After Effect CC

Commençons par dessiner dans Illustrator.

Nous dessinons
1) Dessinez un rectangle jaune en arrière-plan

Figure 1 - Rectangle

2) Dessinez un cercle et remplissez-le avec un dégradé
Travaillons un peu sur le cercle :
- supprimer le point inférieur sur le contour, on obtient un arc ;
- tracez une ligne droite en fermant le bas de l'arc, nous obtenons un demi-cercle

Figure 2 - 1) tracer un cercle ; 2) gradient ; 3) supprimer un point

3) Dessinez un rectangle et faites-en une copie
- un rectangle gris ;
- un autre rectangle gris foncé
4) Dessinez un triangle à partir d'un astérisque en définissant le nombre de rayons - 3

Figure 3 - 1) lumière rectiligne ; 2) recto sombre; 3) Triangle

5) Dessinez un chat avec un stylo et des formes simples

Figure 4 - 1) tête ; 2) cou ; 3) corps ; 4) jambe ; 5) queue

Et maintenant le plus PRINCIPALE moment
Distribuons les images en calques (ce qui sera animé - sur un calque séparé) comme ceci :

Figure 5 - toutes les photos (marque rouge couches importantes)

Tout, maintenant nous économisons.
Voyons les paramètres de sauvegarde

Figure 6 - Enregistrer

Et maintenant la prochaine étape. FermerAdobe Illustrator et ouvrez After Effects.

Importer dans After Effects
Fichier - Importer - Fichier - sélectionnez notre fichier enregistré Illustrateur.
Choisissons d'importer des calques depuis Illustrator, si nous mettons du métrage, nous obtiendrons une image avec des calques fusionnés, mais nous n'en avons pas besoin.

Figure 7 - Importer en tant que composition

Tous importés.
Voyons maintenant ce que nous avons. Double-cliquez sur la composition , ce qui s'ouvrirait et on verrait les calques (si tout a été fait correctement, il y aura plusieurs calques). Nous obtenons cela, voir photo

Figure 8 - Composition ouverte

Et maintenant, pourquoi nous sommes ici aujourd'hui - Animation.

Animations en effets secondaires
Définissez le point de pivot en haut de la flèche à l'aide de l'outil Pan Behind ( touche de raccourci- Y). Prenez simplement un point et déplacez-le où vous voulez. En conséquence, cela ressemblera à ceci..

Figure 9 - Outil panoramique et calques

Voilà, passons maintenant aux calques pour l'animation.
Nous avons besoin d'un calque Arrow et d'un Head_cat.
Commençons par la flèche.
Développez la liste, recherchez et cliquez sur l'horloge. Nous mettons donc le premier point à zéro seconde. Au total, l'animation durera 2 secondes.
Donc, ce sont les réglages que vous devez faire (nous mettrons 3 points au total)

Animons maintenant la tête du chat.
Développez head_cat et trouvez Positionner.
Il y aura 4 points.
Il ne changera que la dernière coordonnée sans toucher au reste.

Figure 11 - Tête de positionnement

Donc, le principe de l'animation était comme ça. La flèche se balance d'un côté à l'autre, dès qu'elle s'approche du chaton, elle ramène sa tête en elle-même, s'attarde un peu dans cette position, puis la remet à sa place.

L'étape finale

Production
Vous devez créer un produit fini à partir de votre travail.
Allez dans le menu - Ajouter à la file d'attente de rendu
Le panneau Render s'ouvre et dans le module Output (deux clics) sélectionnez le format de sortie. J'ai pris *.mov

Figure 12 - Rendu

Cliquez sur le bouton RENDER et obtenez le résultat (n'oubliez pas de préciser le chemin).
C'est tout.

Aujourd'hui, nous avons une leçon inhabituelle sur Adobe Illustrator. Car cette fois nous ne ferons pas une image statique, mais une véritable animation. Imaginez, il s'avère qu'avec l'aide d'Adobe Illustrator, vous pouvez également dessiner des dessins animés :)

Et nous n'avons besoin de rien pour cela. Organisation compétente des couches et exportation du travail final au format swf, où chaque couche est convertie en une image d'animation. Dans le didacticiel d'aujourd'hui, nous allons dessiner une animation de compte à rebours dans un style de film rétro. La sortie devrait être un film flash avec ce même compte à rebours.

La première chose à faire est de dessiner tous les éléments nécessaires à la future animation. Pour ce faire, j'ai fait deux positions d'image de film dans un document séparé, un cercle de référence, qui est découpé en secteurs séparés, une texture et une rayure verticale pour ajouter l'effet de l'antiquité, ainsi que tous les chiffres et inscriptions.

Lorsque toutes les parties de notre dessin animé sont prêtes, vous pouvez commencer à créer l'animation elle-même. Pour plus de commodité, il est préférable de le faire dans un nouveau document. Dans ce cas, les calques joueront le rôle de trames d'animation. Et dans la toute première couche, il vous suffit de copier le cadre du film. Positionnez-le au milieu de la zone de travail.

Vous voyez maintenant que créer une animation simple dans Adobe Illustrator n'est pas aussi difficile qu'il n'y paraît à première vue.

Mais pour créer de longues vidéos ou des applications interactives, il est toujours préférable d'utiliser Adobe Flash ou d'autres éditeurs flash. Par exemple, j'ai fait ce chat dans un vieux Macromedia Flash que j'ai déterré au travail.

Récemment également, HTML5 et CSS3 sont de plus en plus utilisés pour créer des animations. Ce code est pris en charge par les navigateurs modernes et ne nécessite pas l'utilisation d'un lecteur flash.

Roman alias dacascas surtout pour le blog

Abonnez-vous à notre newsletter pour ne rien manquer des nouveautés :

Maintenant, compliquons un peu la tâche - créons une bannière Flash animée. Bien sûr, il n'est pas nécessaire de parler d'une animation Flash à part entière dans ce cas - il existe des packages spécialisés pour cela. Mais vous pouvez également utiliser Illustrator pour créer une vidéo amateur simple.

Il n'y a pas d'outils spéciaux et d'outils d'interface, tels qu'une chronologie, typiques des programmes de développement d'animation, dans Adobe Illustrator. Mais il y a une subtilité - les calques peuvent être utilisés comme cadres.

Créez une bannière avec uniquement du texte.

1. Regroupez les symboles avec la commande Objet › Groupe(Objet › Groupe).
2. La tâche suivante consiste à créer des objets de contour à partir de caractères de police, sinon la formation correcte des calques ne fonctionnera pas. Pour ce faire, sélectionnez un groupe et sélectionnez Type › Créer des contours(Police › Trace).
3. Après cela, ouvrez le menu de la palette Couches(Calques) en cliquant sur le bouton en forme de flèche sur la palette (Fig. 8.11).

Riz. 8.11. Menu de la palette Calques

Nous sommes intéressés par la commande dans ce menu Relâcher sur calque (séquence)(Convertir en calques (séquentiellement)) qui traduit chaque objet individuel sur un nouveau calque. Veuillez noter que lors de l'application de la commande, le groupe doit être sélectionné groupe, pas une couche Couche 1.

À quoi devrait ressembler la palette Couches(Calques) après exécution Relâcher sur calque (séquence)(Convertir en calques (séquentiels)), illustré à la fig. 8.12.

Riz. 8.12. La palette Calques après Libération sur calque (séquence)

Ceci termine la préparation, vous pouvez économiser en utilisant Enregistrer pour le Web(Enregistrer pour le Web) en SWF. SWF est le principal format graphique basé sur les technologies Flash. Il serait plus exact de dire qu'il s'agit du format Flash (Fig. 8.13).

Probablement, aujourd'hui, tous les utilisateurs sont plus ou moins familiarisés avec Flash. C'est actuellement le format d'animation le plus courant sur Internet et il est utilisé pour créer la grande majorité des pages Web multimédias.

Bien sûr, même un dixième des capacités de Flash ne sont pas implémentées dans Adobe Illustrator, car le programme n'est pas conçu pour cela. Cependant, vous pouvez y créer soit une image statique, soit une simple animation.

Riz. 8.13. Paramètres d'optimisation pour le format SWF

Il existe les paramètres suivants.

• Lecture seulement(Uniquement en lecture). Si vous cochez la case, le fichier sera écrit de telle manière qu'il ne pourra plus être ouvert pour modification dans aucun programme. Ceci, d'une part, réduit la taille des fichiers, et d'autre part, protège vos droits d'auteur.
• Paramètre étiqueté 1. Paramètre spécifiant le type d'enregistrement - image ou animation.
• Si vous choisissez l'option Fichier AI vers fichier SWF(Fichier Illustrator vers fichier SWF), l'image sera enregistrée en tant qu'image statique exactement comme ce que vous voyez à l'écran lorsque vous travaillez dans Illustrator.
• Calques vers cadres SWF(Calques vers cadres SWF) vous permet d'animer des calques existants, qui seront rendus sous forme de cadres. Nous devons choisir cette option.
• Qualité de la courbe(Qualité des courbes). Précision des courbes répétant le fichier de courbes de l'image d'origine. La diminution de ce paramètre réduit considérablement la qualité, en particulier dans le domaine des petits détails, mais réduit la taille du fichier. Pour notre cas, la valeur optimale est "7".
• fréquence d'images(Délai de trame). Fréquence d'images et, par conséquent, vitesse d'animation. Pour que l'effet soit correct, ne définissez pas plus de 4 images par seconde.
• boucle(Répéter). Jouez l'animation plusieurs fois. Convient aux animations où une boucle répétitive est importante. La bannière appartient à ce type.