Comment créer une animation GIF dans Illustrator. Comment créer une animation dans Adobe Illustrator. Exporter des fichiers SWF depuis Illustrator
Aujourd'hui, nous avons quelque chose d'inhabituel Leçon Adobe Illustrateur. Car cette fois nous ne ferons pas une image statique, mais une véritable animation. Imaginez, il s'avère que en utilisant Adobe Illustrator peut aussi dessiner des dessins animés :)
Et pour cela, nous n’avons besoin de rien du tout. Bonne organisation des calques et exportation du travail final au format swf, où chaque calque est converti en image d'animation. Dans le didacticiel d'aujourd'hui, nous allons dessiner une animation de compte à rebours dans le style d'un film rétro. Le résultat devrait être une vidéo flash avec ce même compte à rebours.
La première chose à faire est de dessiner tous les éléments nécessaires à une future animation. Pour ce faire, dans un document séparé, j'ai réalisé deux positions d'un cadre de film, 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 d'antiquité, ainsi que tous les chiffres et les inscriptions.
Lorsque toutes les parties de notre dessin animé sont prêtes, nous pouvons 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, nos calques joueront le rôle d'images d'animation. Et dans la toute première couche, il vous suffit de copier une image du film. Placez-le au milieu de votre zone de travail.
Créez maintenant un deuxième calque et copiez-y une image du film, dans laquelle les trous le long des bords sont réalisés avec un décalage. Il doit également être placé au centre.
À partir de ces deux couches, vous pouvez déjà obtenir une animation de film en mouvement. Mais plus tard, nous aurons besoin de beaucoup plus de couches. Sélectionnez donc les deux premiers calques, accédez aux options du panneau et faites une copie des calques.
De la même manière, nous devons accumuler 12 couches d’images du film qui définissent son mouvement.
Nous avons maintenant tout un tas de calques et ils sont tous visibles. Dans le sens où les couches supérieures bloquent les couches inférieures, ce qui n'est pas tout à fait pratique pour le travail. Par conséquent, vous pouvez désactiver certains calques en cliquant sur l'icône avec un œil à gauche du nom du calque. Pour activer ou désactiver tous les calques en même temps, maintenez la touche Alt enfoncée tout en cliquant sur l'icône en forme d'œil. En activant et désactivant les calques, vous pouvez voir exactement ce qui se trouve dans une image spécifique de notre future animation. Et maintenant, pour ajouter une légère instabilité au mouvement du film, nous devons déplacer légèrement les images résultantes dans des directions différentes. Pour ce faire, activez uniquement le calque avec lequel vous allez travailler. ce moment, puis déplacez le cadre de quelques pixels dans n'importe quelle direction.
Une fois que vous avez parcouru tous les calques et ajouté un petit décalage, vous pouvez commencer à créer l'animation du cercle en mouvement. Pour ce faire, copiez le cercle composé de secteurs du document contenant les parties du dessin animé et placez-le sur le premier calque au-dessus du cadre du film.
Si vous désélectionnez le cercle, il ressemblera à un tout unique. C'est exactement ce dont nous avons besoin.
Mais comme il se compose de secteurs individuels, vous pouvez créer une animation très rapidement et facilement en changeant leur couleur. Pour ce faire, copiez ce cercle sur le deuxième calque et éclaircissez le premier secteur. Vous vous souvenez que notre film tremble lorsqu'il bouge, il n'est donc pas du tout nécessaire de placer le cercle exactement au centre du cadre. Positionnez-le à l'œil nu.
De la même manière, vous devez copier le cercle dans chaque calque suivant, tout en peignant un secteur de plus avec une couleur plus claire que la fois précédente. Ensemble, ces 12 couches forment une animation du film se déplaçant avec un cercle rempli.
Ensuite, nous devons ajouter de la texture à nos calques. Activez le premier calque et copiez la texture du fichier original avec les pièces de rechange.
Activez ensuite les calques suivants un par un et copiez-y la même texture. Pour lui donner un aspect différent dans chaque image, faites-le simplement pivoter de 90 degrés. Comme vous l'avez peut-être deviné, nous devons ajouter de la texture aux 12 images.
Si vous en avez déjà assez de copier, alors je peux vous faire plaisir - il en reste très peu. Le plus dur est passé. Il ne reste plus qu'à ajouter des rayures verticales et c'est presque tout. Pour ce faire, nous copions à nouveau le scratch original et le plaçons à un endroit arbitraire en plusieurs couches. Dans mon cas, les rayures n’apparaissent que sur deux couches.
Maintenant que le cycle principal avec l'animation cinématographique est prêt, il ne reste plus qu'à additionner les chiffres. Puisque notre compte à rebours passe de 3 à 1 plus le mot Go !!!, nous avons besoin d'encore plus de couches. Pas 12, mais jusqu'à 48. Pour ce faire, vous devez créer trois copies supplémentaires de calques prêts à l'emploi avec une animation cinématographique.
Et puis tout est simple. Allumez le tout premier calque et placez-y le numéro trois.
Ensuite, vous devez copier ce numéro dans les calques suivants jusqu'à la fin de l'animation du cercle. Lorsque vous atteignez la copie suivante des calques, où le cercle sera à nouveau complètement rempli, vous devez mettre le chiffre deux. De la même manière, copiez le numéro un dans les calques souhaités. Et lorsque vous arrivez aux derniers calques de l'inscription Go !!!, supprimez simplement le cercle avant de copier l'inscription sur le calque souhaité.
C'est tout pour l'animation. L'essentiel ici est de ne pas se tromper. Vous pouvez donner aux calques des noms pratiques, mais j'étais un peu paresseux :) Et aussi, lorsque vous avez terminé votre travail, assurez-vous de réactiver tous les calques en cliquant sur l'icône en forme d'œil.
Dans la fenêtre des paramètres d'exportation, veillez à définir Exporter sous : couches AI vers des images SWF. C'est cette option qui transforme les calques Illustrator en images d'animation. Ensuite, cliquez sur le bouton Avancé.
Ouvrira paramètres additionnels. Ici, vous devez définir la fréquence d'images. J'ai 12 images par seconde. La case à cocher Looping est responsable de l'animation cyclique. Grâce à lui, la vidéo sera jouée en cercle. Et l’option Ordre des calques : de bas en haut reproduit les calques de l’illustrateur de bas en haut dans le panneau. C'est exactement ainsi que nous avons construit notre animation.
Le résultat est une vidéo flash avec notre animation.
Vous voyez maintenant ce qu'une simple animation peut faire dans Adobe Illustrator pas aussi difficile qu'il y paraît à première vue.
Mais pour créer de longues vidéos ou applications interactives c'est quand même mieux d'utiliser Adobe Flash ou d'autres éditeurs flash. Par exemple, j'ai réalisé ce chat dans un vieux Macromédia Flash, que j'ai déterré dans mon travail.
De plus, récemment, 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
Abonnez-vous à notre newsletter pour ne rien manquer de nouveauté :
Récemment, divers types d'animation de graphiques SVG (Scalable Vector Graphics) sur des sites Web et des applications sont devenus très populaires. Cela est dû au fait que tout derniers navigateurs supporte déjà ce format. Voici des informations sur la prise en charge du navigateur pour SVG.
Cet article présente l'exemple le plus simple d'une animation vectorielle SVG utilisant le plugin Jquery léger Lazy Line Painter.
SourcePour réaliser et bien comprendre cette tâche, des connaissances de base en HTML, CSS, Jquery sont souhaitables, mais pas obligatoires si vous souhaitez simplement animer du SVG) Commençons !
Et voici les étapes que nous devons suivre :
1. Créez la structure de fichiers correcte
Le service Initializr nous y aidera, où nous devons sélectionner des paramètres comme dans l'image ci-dessous.
- Classique H5BP (plaque de chaudière HTML5)
- Aucun modèle
- Juste HTML5 Shiv
- Minifié
- Cours IE
- Cadre chromé
- Cliquez ensuite sur Téléchargez-le !
2. Téléchargez et connectez le plugin
Étant donné qu'initializr est livré avec la dernière bibliothèque Jquery, à partir de l'archive que nous devons télécharger depuis le référentiel du projet Lazy Line Painter, nous n'avons besoin de transférer que 2 fichiers vers notre projet. Le premier est « jquery.lazylinepainter-1.1.min.js » (la version du plugin peut différer), il se trouve à la racine du dossier résultant. Le second est example/js/vendor/raphael-min.js.
Ces 2 fichiers sont placés dans le dossier js. Et nous les connectons à notre index.html avant main.js comme suit :
3. Dessinez une image de contour sympa dans Adobe Illustrator
Par exemple, vous pouvez utiliser les icônes de la pièce jointe.
4. Convertissez notre image en Lazy Line Converter
Faites simplement glisser votre icône dans la fenêtre de l'image ci-dessous.
L'épaisseur, la couleur du contour et la vitesse d'animation peuvent être modifiées dans le code lui-même, qui apparaîtra après conversion !
5. Collez le code résultant dans main.js
Maintenant, nous collons simplement le code résultant dans un fichier main.js vide
Possibilités :
StrokeWidth — épaisseur du contour
StrokeColor — couleur du contour
Vous pouvez également modifier la vitesse de dessin de chaque vecteur en modifiant les valeurs du paramètre de durée (600 par défaut)
6. Ajoutez du CSS au goût
Supprimer un paragraphe de index.html
Bonjour le monde! Il s’agit du passe-partout HTML5.
Et à la place nous insérons un bloc dans lequel notre animation aura lieu
puis ajoutez du CSS au fichier main.css pour le rendre plus joli :
Corps ( arrière-plan :#F3B71C ; ) #icons ( position : fixe ; haut : 50 % ; gauche : 50 % ; marge : -300px 0 0 -400px; )
enregistrez tous les fichiers.
Maintenant, ouvrez simplement index.html dans un navigateur moderne et profitez de l'effet.
P.S. au démarrage machine locale Il peut y avoir un retard de plusieurs secondes au démarrage de l'animation.
Optimisation des graphiques Web
Informations graphiques est transmis beaucoup plus lentement que le texte 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 de fichier intégré. images graphiques, ce qui est obtenu grâce à leur optimisation. L'optimisation de l'image fait référence à sa transformation, garantissant une taille de fichier minimale tout en maintenant la qualité d'image requise dans ce cas, 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 image. fragments.
Illustrator dispose d'outils d'optimisation d'image intégrés qui rendent le processus d'optimisation rapide et efficace grâce à diverses méthodes de prévisualisation. L'aperçu donne une idée assez précise de ce à quoi ressemblera l'image optimisée en temps réel, ce qui vous aide à évaluer le résultat de l'optimisation et à sélectionner avec succès les bons paramètres. Et vous pouvez optimiser à la fois les images créées directement dans le programme Illustrator et d'autres, par exemple les photographies censées être placées sur un site Web.
Les paramètres d'optimisation sont définis dans la fenêtre Enregistrer pour le Web, appelée par la commande du même nom depuis le menu Fichier. Le programme suggère d'utiliser l'un des quatre modes de prévisualisation, mais deux sont les mieux adaptés pour évaluer la qualité de l'optimisation :
- Visualisation simultanée 2-Up (deux options) de l'image originale et optimisée conformément aux paramètres spécifiés (Fig. 1) ;
- 4-Up (quatre options) Dans ce mode, la fenêtre est divisée en quatre fenêtres (Fig. 2) pour afficher l'image originale et trois versions de l'image optimisée : la première version est créée en fonction des valeurs d'optimisation définies, et la les deux autres sont des variantes des paramètres d'optimisation actuels.
Les deux modes vous permettent de gagner considérablement du temps dans la recherche de la meilleure option d'optimisation, car ils éliminent le besoin d'enregistrer des images avec différents paramètres d'optimisation et de 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 chargement sous différentes options de connexion. A titre de comparaison, le mode le plus pratique est 4-Up (quatre options), qui vous permet d'évaluer visuellement l'effet de la compression ou de la réduction de palette sur la qualité de l'image et sa taille 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 SWF et SVG. Les images indexées comportant un petit nombre de couleurs sont enregistrées au format GIF. Le format JPG est utilisé pour enregistrer des images en couleur et en niveaux de gris, des photographies et des graphiques riches en couleurs, tels que des remplissages dégradés. 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'au format PNG-8, le nombre maximum possible de couleurs de l'image optimisée est de 256, et dans au format PNG-24, l'image peut avoir des millions de couleurs, et c'est pourquoi elle ressemble Format JPEG. La différence entre PNG-24 et JPEG est que la méthode de compression utilisée pour optimiser les images au format PNG-24 n'entraîne pas de perte de qualité, mais par conséquent la taille du fichier augmente. Les formats SVG et SWF combinent des graphiques, du texte et des composants interactifs et peuvent également être optimisés.
Considérons exemple spécifique optimisation des images. Supposons qu'un logo de site Web ait été développé dans Illustrator (Fig. 3), initialement enregistré au format AI. Une tentative de l'optimiser immédiatement pour le Web ne mènera à rien de bon, puisque dans ce cas l'image sera automatiquement recadrée, ce qui ne prendra pas en compte la véritable position de l'inscription résultante suite à la déformation (Fig. 4 et 5).
Essayons donc d'exporter le logo au format PSD avec la commande File=>Export (File=>Export) la taille de l'image créée sera de 143 Ko. Ouvrez le fichier PSD résultant et utilisez la commande 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, dont les paramètres spécifiques doivent être décidés. En expérimentant les paramètres, vous pouvez vous assurer que meilleure qualité donne l'algorithme de compression par défaut du programme, Sélectif. Quant au lissage, compte tenu de la présence d'un remplissage dégradé, il est préférable de choisir un algorithme avec génération de bruit Noise (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 au format GIF avec le fichier HTML (Fig. 8). De ce fait, dans cet exemple, les fichiers Emblem.html et Emblem.gif ont été obtenus dans le dossier Primer1.
Les boutons de contrôle graphiques constituent un élément spécifique indispensable à la conception de toute page Web. Il est tout simplement impossible d’imaginer une page sans eux. Le dessin de boutons est devenu aujourd'hui un genre particulier et Illustrator vous permet de créer les options les plus complexes. Par exemple, les boutons conçus comme des objets maillés et/ou avec des masques de superposition sont beaucoup plus impressionnants que les boutons classiques.
Envisagez la possibilité de créer un bouton rond et convexe dans Illustrator. Dessinez un objet vectoriel sous la forme d'un cercle rempli d'une couleur arbitraire (Fig. 9) et convertissez-le en maillage avec la commande Objet => Créer un filet de dégradé (Objet => Créer un filet de dégradé), en spécifiant quatre lignes et quatre colonnes, et dans la liste Apparence, en sélectionnant l'option To Center Highlight égale à 60 (Fig. 10). Sélectionnez l'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 Nuancier (Fig. 12).
Prenez l'outil Ellipse, placez le marqueur de la souris au centre du cercle créé précédemment et, en maintenant les touches Alt et Shift enfoncées, étirez le nouveau cercle sur l'ancien afin qu'il soit 1 à 2 pixels plus grand que l'ancien sur tout côtés. Donnez-lui une bordure noire (Trait) de 1 à 2 pixels de large et remplissez-la d'un dégradé radial dans le sens du rouge au blanc (Fig. 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 sortez menu contextuel sélectionnez Organiser => Envoyer à l'arrière-plan. Le résultat sera un blanc pour le bouton, illustré à la Fig. 14.
En règle générale, sur n'importe quelle page Web, il existe plusieurs boutons du même type, ne différant, par exemple, que par la direction des flèches dessinées dessus, indiquant 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, signifiera passer à la page suivante, et un bouton avec une flèche vers le haut signifiera passer à la page précédente. Comme modèle de flèche, prenons un triangle régulier, dessiné avec l'outil Polygone, peint en noir et, pour plus d'effet, également conçu comme un objet maillé. 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 correspondants dans la palette Aligner. Le premier des boutons résultants est illustré à la Fig. 15. Faisons une copie du calque avec le bouton en sélectionnant la commande Dupliquer les calques, nous obtiendrons ainsi deux calques identiques. Sélectionnez ensuite la flèche sur la copie du calque et faites-la pivoter de 180° en sélectionnant la commande Transform=>Rotate Transformation=>Rotate dans le menu contextuel. Nous obtiendrons le même bouton que celui illustré sur la Fig. 16. Veuillez noter qu'il est beaucoup plus pratique de stocker tous les mêmes types de boutons pour un projet dans un seul fichier sur différents calques, ce qui est démontré dans ce cas.
Vous devez maintenant enregistrer les versions optimisées de chaque bouton. Rendez d'abord le calque inférieur invisible. Dans ce cas, le bouton du calque supérieur sera conservé. Sélectionnez la commande File=>Save for Web, configurez les paramètres d'optimisation du bouton, par exemple, comme indiqué sur la Fig. 17, cliquez sur le bouton Enregistrer et entrez un nom de fichier. Le bouton finalement enregistré est illustré à la Fig. 18. Renvoyez maintenant la visibilité au calque inférieur, 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 présenté sur la Fig. 19.
Il ne reste plus qu'à s'assurer que les boutons semblent tout à fait acceptables sur la page Web et à les placer sur une page personnalisée (Fig. 20). En conséquence, dans cet exemple, le fichier Primer2.html et deux images graphiques ont été obtenues dans le dossier images (dossier Primer2).
Si vous le souhaitez, pendant le processus d'optimisation, il est facile de transformer le bouton en tranche. Dans ce cas, après avoir sélectionné la commande File=>Save for Web (File=>Save for Web) et défini les paramètres d'optimisation, vous devez sélectionner l'outil Slice Select dans la palette d'outils et double-cliquer sur l'image, qui finira par se transforme automatiquement en tranche portant le numéro de série 1 (Fig. 21). Un double-clic à nouveau ouvrira la fenêtre Options de tranche, dans laquelle vous devrez spécifier un lien et éventuellement modifier le nom de la tranche (Figure 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).
Une façon de donner vie à une page consiste à introduire des éléments de conception qui modifient son apparence. apparence(ou état) en fonction du comportement de la souris ou, moins souvent, en cas d'autres situations : mise à l'échelle, défilement, chargement, erreurs, etc.
Parmi ces éléments, les plus connus sont les rollovers (de l'anglais roll over roll over, turn over) qui changent d'apparence sous l'influence de la souris. Des exemples de survols typiques sont les boutons animés. Les survols sont souvent utilisés lors de la création d’autres éléments de navigation sur un site Web. En réalité, tout survol n'est pas une, mais plusieurs (jusqu'à quatre) images dont chacune correspond à un événement précis. Les principaux événements sont considérés comme les suivants : Normal état normal, Survolez le curseur de la souris sur un élément et appuyez vers le bas sur le bouton gauche de la souris lorsque vous passez le curseur dessus. Théoriquement, des événements tels que Clic en relâchant le bouton gauche de la souris après avoir cliqué, Up après avoir relâché le bouton, Out en quittant la zone active peuvent être impliqués. Cependant, en pratique, ils se limitent souvent à changer d'élément uniquement pour les trois, voire deux premiers événements.
Renversements classiquesAu sens classique, un survol est une série d'images graphiques au format GIF et le code HTML correspondant, grâce auquel, en fonction du comportement de la souris, une image en remplace une autre dans la fenêtre du navigateur.
Illustrator n'est pas destiné à créer directement des survols au sens classique du terme, mais il peut aider à développer les éléments initiaux de ceux-ci. L'idée dans ce cas est de créer un calque avec l'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 multicouche résultante est exportée vers un fichier PSD avec les calques conservés, sur la base duquel un survol est créé dans le programme Image Ready. L'avantage d'utiliser le programme Illustrator, comme dans de nombreux autres cas, réside dans un certain nombre de fonctionnalités intéressantes qui ne sont pas disponibles dans d'autres logiciel, combiné à la commodité de transformer des 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 en forme de rectangle arrondi 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 un objet maillé avec une surbrillance au centre (commande Objet=>Créer un objet de maillage de dégradé=>Créer un maillage de dégradé), en spécifiant quatre lignes et dix colonnes (Fig. 25). Activez la deuxième copie du rectangle et réglez-la sur un remplissage dégradé approximativement comme indiqué sur la Fig. 26. Superposez l'objet dégradé sur celui du maillage, réduisez l'opacité de l'objet dégradé à environ 80 % et la taille d'environ 1 pixel pour éventuellement simuler l'effet d'une bosse. Et puis imprimez l'inscription sur les objets. Dans sa forme originale, laissez-lui une couleur blanche, qui correspondra à l'état Normal (Fig. 27), puis lorsque l'état de survol change, la couleur de l'inscription changera, par exemple, en vert lorsque le marqueur de la souris est survolé (état Over) et devient bleu lorsque le bouton de la souris est enfoncé (état Down).
Faites attention à la palette Calques à ce stade, elle ne contient qu'un seul calque. Faites deux copies de ce calque en utilisant la commande Dupliquer le calque du menu de la palette Calques ; 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 deuxième copie en bleu (Fig. 29). En conséquence, le blanc nécessaire au retournement sera obtenu.
Exportez l'image créée au format PSD, en préservant les calques, en utilisant la commande Fichier=>Exporter et en sélectionnant le modèle de couleur RVB (Fig. 30). Ouvrez le fichier PSD créé dans le programme ImageReady (Fig. 31 et 32). Créez des images basées sur des calques en sélectionnant la commande Créer des images à partir de calques dans le menu de la palette Animation. La fenêtre Animation ressemblera à la Fig. 33. Dans ce cas, un seul état Normal sera initialement créé dans la palette Survols.
Ensuite, dans la fenêtre Animation, sélectionnez l'image correspondant à l'état induit, et le calque Layer 1 Copy sera automatiquement sélectionné dans la palette Calques (Fig. 34). Allez dans la palette Rollovers 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 Over State dans la palette Rollovers (Fig. 36). Créez un état Down de la même manière. Activez l'état Normal dans la palette Survols et supprimez toutes les images de la palette Animation sauf celle qui doit correspondre à l'état Normal. En conséquence, pour chaque état de survol, il n'y aura qu'une seule image dans la palette Animation (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 State
Vérifiez le résultat en cliquant sur le bouton Aperçu dans le navigateur par défaut de la barre d'outils et en accédant à la fenêtre du navigateur (Figure 40). Après cela, enregistrez le fichier à l'aide de la commande File=>Save Optimized 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 ont été obtenues dans le dossier images.
Riz. 40. Fenêtre du navigateur avec élément Rollover
Survols SVGLe format SVG (Scalable Vector Graphics) de plus en plus populaire Graphiques vectoriels), créé sur la base du standard XML, permet également de recevoir divers éléments interactifs, notamment des rollovers, mais en pratique cela est implémenté de 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.
Pour travailler avec des objets SVG, il existe une palette spéciale Interactivité SVG, qui peut être facilement ouverte à l'aide de la commande Fenêtre => Interactivité SVG (Fenêtre => Interactivité SVG) fig. 41.
Considérons cette option de création d'un survol en prenant l'exemple d'un bouton interactif dont la couleur de l'inscription passera du noir au bleu au survol de la souris et se transformera à nouveau en noir lorsque la souris quittera la zone active.
Créez un bouton rectangulaire avec des bords arrondis et sélectionnez un remplissage dégradé approprié, par exemple comme indiqué sur la Fig. 42. Ajustez la transparence du bouton dans la palette Transparence. Dans cet exemple, la valeur Opacité est définie sur 50 %. Faites une copie du bouton, remplissez-le de vert foncé (Figure 43), puis convertissez-le en objet maillé avec la commande Objet => Créer un filet de dégradé, en spécifiant quatre lignes et dix colonnes, et dans la liste Apparence (Vue) en sélectionnant l'option Au centre et en définissant la valeur de surbrillance sur 100. Réduisez l'opacité du calque avec l'objet maillé à environ 40 % (Fig. 44). Placez un objet maillé au-dessus d'un objet dégradé et le bouton ressemblera à celui illustré sur la Fig. 45.
Riz. 44. Transformer une copie d'un bouton en un objet maillé
Complétez le bouton avec l'inscription souhaitée et ajustez sa position à l'aide des boutons correspondants dans la palette Aligner. L'image résultante contiendra un calque avec trois objets superposés les uns sur les autres (Fig. 46). Les événements planifiés seront relatifs à 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 Calque 1 à Calque (Fig. 47).
Le traitement des événements implique l'utilisation de procédures JavaScript. Vous devez donc inclure un fichier décrivant 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. Programmes Adobe Illustrateur. Pour connecter le fichier Events.js, utilisez la commande JavaScript Files SVG Interactivity (Fig. 48). Ensuite, vous devez cliquer sur le bouton Ajouter et rechercher le fichier souhaité sur votre disque dur. Lorsque son nom apparaît dans le champ URL (Figure 49), cliquez sur le bouton Terminé.
Riz. 48. Sélection de la commande Fichiers JavaScript
Ensuite, vous devez définir une réponse aux événements de souris pour l'objet Texte. Sélectionnez l'objet Texte, dans le champ Evénement de la palette Interactivité SVG, sélectionnez l'événement onmouseover elemColor(evt, "Text", "#3333FF") cela signifiera que lorsque la souris sera sur l'objet Texte, sa couleur changera en bleu (Fig. 50 ). Pour que la couleur du texte devienne noire une fois que la souris quitte la zone active, vous devrez créer un autre événement onmouseout, en le sélectionnant dans le champ Événement de la palette d'interactivité SVG. Ensuite, dans la ligne d'action, entrez le texte elemColor(evt, "Text", "#000000"), cela ramènera la couleur au noir (Figure 51).
Riz. 51. Aspect final de la palette d'interactivité SVG pour l'objet Texte
Enregistrez le survol créé 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, vous n'en recevrez qu'un seul. un seul fichier avec l'extension SVG, et non deux, comme dans le cas d'un rollover classique ; dans ce cas, le fichier Primer5.svg a été reçu (dossier Primer5). Cependant, pour que le rollover fonctionne réellement, vous devez en plus). copiez le fichier Events.js dans le dossier contenant la description du fichier SVG des procédures JavaScript. Après cela, vous pouvez vérifier la fonctionnalité du survol ; le résultat ressemblera à celui illustré sur la figure 53.
Le format SVG peut également être utilisé pour véhiculer une animation. Essayons de créer un élément animé simple (dans ce cas il s'agira d'informations sur l'entreprise), qui apparaîtra à l'écran lorsque vous passerez la souris sur l'objet graphique correspondant et disparaîtra lorsque vous retirerez la souris de l'élément interactif.
Créons approximativement la série suivante d'objets graphiques et textuels, comme le montre la Fig. 54. Renommons tous les objets créés de manière pratique en cliquant séquentiellement sur le nom de l'objet suivant dans la palette Calques et en entrant nom désiré(Fig. 55). Veuillez noter que ceux mis en évidence sur la Fig. 56 objets Text1, Text2, Text3 et Path1 seront toujours visibles, et tous les autres uniquement lorsque vous passerez la souris sur l'objet Text1.
Riz. 54. Vue originale de l'image
Incluez le fichier Events.js décrivant les procédures JavaScript en utilisant la commande Fichiers JavaScript de la palette d'interactivité SVG, en cliquant sur le bouton Ajouter, en pointant sur le fichier souhaité sur votre disque dur et en cliquant sur le bouton Terminé.
Définissez une réponse aux événements de souris pour l'objet Text1. Sélectionnez l'objet Texte, dans le champ Événement de la palette Interactivité SVG, sélectionnez l'événement onmouseover et dans la ligne en dessous saisissez le texte elemShow(evt, "Text4"); elemShow(evt, "Chemin2") . Par conséquent, lorsque la souris passe sur l'objet Text1, les objets Text4 et Path2 deviendront visibles. Attention, si plusieurs actions doivent être effectuées lorsqu'un événement survient, elles doivent être précisées à l'aide du signe « ; ». Effectuez ensuite une opération similaire pour l'événement onmouseout, en saisissant le texte correspondant, ce qui signifie masquer des objets (Fig. 57).
Enregistrez le résultat sous forme de fichier SVG à l'aide de la commande Fichier => Enregistrer sous, en spécifiant le nom du fichier, en sélectionnant le format SVG dans le champ Type de fichier, puis en définissant les options d'enregistrement du fichier SVG conformément à la Fig. 58. Après l'enregistrement, le fichier Primer6.svg sera reçu (dossier Primer6). N'oubliez pas de copier le fichier Events.js dans le dossier contenant ce fichier. Si après ça tu cours parce que ce fichier, alors vous verrez le résultat montré sur la Fig. 59. C'est presque ce dont vous avez besoin. La seule chose qui n'était pas incluse dans nos plans était l'apparence initiale des objets Text 4 et Path 2 lors du chargement. Pour remédier à cette lacune, sélectionnez les deux données d'objet à la fois et créez une action pour elles elemHide(evt, "Text4"); elemHide(evt, "Path2") lors de l'événement onload (Fig. 60). Enregistrez à nouveau le fichier et assurez-vous que les objets Text4 et Path2 ne sont désormais visibles que lorsque vous survolez l'objet Text1.
Toute page Web est impensable sans animation Web, y compris les gifs animés. L'une des options pour les créer est d'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 dans différentes applications, notamment Adobe Illustrator.
Il est très simple de créer une animation à partir d'éléments de la palette Symboles, ouverte avec la commande Fenêtre=>Symboles, ou d'une des bibliothèques de symboles pouvant être ouvertes à l'aide de la commande Fenêtre=>Bibliothèques de symboles).
Par exemple, nous essaierons 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 au-dessus des autres, puis augmentez la taille de chaque objet suivant, par exemple comme le montre la Fig. 61. En conséquence, un calque avec de nombreux objets sera créé dans la palette Calques (Fig. 62). Si vous exportez directement cette image au format PSD, cela ne donnera rien, puisqu'il n'y a qu'un seul calque, et naturellement, lorsque vous ouvrirez le fichier PSD dans le programme 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 moyen le plus simple consiste à sélectionner d’abord le calque 1 dans la palette Calques et à utiliser la commande Relâcher vers le calque. Le résultat sera que chacun des objets sera déplacé vers son propre calque, mais ils seront tous imbriqués dans le calque 1. Par conséquent, vous devrez ensuite faire glisser manuellement tous les calques imbriqués vers le haut de la palette Calques afin qu'ils soient au-dessus du calque Calque 1, puis simplement supprimer le calque Calque 1 désormais vide (Fig. 63). Exportez l'image au format PSD à l'aide de la commande Fichier => Exporter avec les paramètres comme sur la Fig. 64.
Chargez le fichier PSD créé dans le programme ImageReady (Fig. 65 et 66). Ouvrez le menu de la palette Animation Créer des images à partir de calques. En conséquence, cinq images seront créées, chacune correspondant à son propre calque, et la fenêtre de la palette Animation ressemblera à la Fig. 67.
Après cela, définissez la durée de chacune des images créées. Dans ce cas, la durée de toutes les images est définie sur 0,2 s. Et puis enregistrez l'animation avec optimisation à l'aide de la commande File=>Save Optimized (File=>Save with optimisation). Le résultat obtenu peut ressembler à la Fig. 68.
Il est encore plus pratique d’obtenir des blancs qui peuvent ensuite être facilement convertis en animation dans ImageReady pour utiliser les fonctions Live Blends d’Illustrator. 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 connectez-les avec un lien de fusion avec les paramètres appropriés (Fig. 69). Il est impossible d'utiliser ce fichier directement pour créer une animation, puisque l'image est sur un seul calque (Fig. 70). Par conséquent, vous devrez d’abord placer chaque élément de l’objet de fusion sur un calque séparé. Pour ce faire, dans la fenêtre Calques, sélectionnez la ligne, activez le menu de la palette en cliquant sur la flèche noire dans son coin supérieur droit et sélectionnez la commande Libérer vers la séquence de calques (Fig. 71). Maintenez la touche Maj enfoncée, sélectionnez les calques créés et placez-les au-dessus du calque Calque 1, puis supprimez le calque Calque 1 lui-même, en le déplaçant vers la corbeille. La palette des calques prendra la même forme que sur la Fig. 72.
Riz. 70. Etat initial Fenêtres Calques
Exportez le fichier créé au format PSD à l'aide de la commande Fichier=>Exporter. Ouvrez le fichier PSD créé dans le programme ImageReady (Fig. 73). Veuillez noter que tous les calques créés dans Illustrator apparaîtront dans la fenêtre des calques (Fig. 74) et dans la fenêtre Animation, il n'y aura pour l'instant qu'une seule image.
Activez le menu de la palette Animation en cliquant sur la flèche noire dans le coin supérieur droit de la palette et sélectionnez la commande Créer des images à partir de calques. En conséquence, dans cet exemple, cinq images seront créées et la fenêtre de la palette Animation prendra la place. formulaire conforme à la fig. 75. Sélectionnez toutes les images tout en maintenant la touche Maj enfoncée et définissez la durée d'image appropriée dans cet exemple, le même temps de 0,2 s est pris pour chaque image. Enregistrez ensuite le fichier avec optimisation à l'aide de la commande Fichier=>Enregistrer optimisé (Fichier=>Enregistrer avec optimisation), en définissant l'option Images uniquement (*.gif) dans la liste Type de fichier. L'animation ressemblera à la Fig. 76.
Ce qui semble beaucoup plus intéressant, ce n'est pas le mouvement, mais le redimensionnement fluide des objets mélangés. Par exemple, vous pouvez utiliser la transition de mélange déjà créée. Dans ce cas, après avoir créé des calques séparés pour chaque élément de transition de fusion, placez tous les objets les uns sur les autres à l'aide des boutons Centre d'alignement horizontal et Centre d'alignement vertical de la palette Aligner (Fig. 77) .
Exportez le fichier créé au format PSD (Fichier=>Export File=>Export) et ouvrez le fichier PSD créé dans le programme ImageReady (Fig. 78). Créez des images d'animation basées sur des calques (Créer des images à partir de calques Créer des images à partir de calques) et sélectionnez une durée appropriée pour elles (Fig. 79). Et puis, pour rendre l'animation plus efficace, copiez les images existantes, mais dans l'ordre inverse pour que l'image augmente d'abord puis diminue, et ainsi de suite en cercle (Fig. 80). Enregistrez ensuite le fichier d'optimisation (Fichier=>Enregistrer le fichier optimisé=>Enregistrer avec optimisation). L'animation résultante est présentée sur la Fig. 81.
Riz. 80. Etat de la fenêtre Animation après duplication d'images
Riz. 81. Animation terminée
Un GIF transparent est créé dans Adobe Illustrator comme suit. Allez dans le menu Fichier > Enregistrer pour le Web et les appareils (Alt+Ctrl+Shift+S). Dans la fenêtre qui s'ouvre, dans le champ Format de fichier optimisé, vous devez d'abord vous rendre dans l'onglet Taille de l'image. Le fait est que par défaut, la page entière est incluse dans la fenêtre d'optimisation, ce qui n'est généralement pas nécessaire. Par conséquent, dans l’onglet Taille de l’image, décochez la case Clip to Artboard et cliquez sur le bouton Appliquer.
Ensuite, dans la liste de sélection des formats, sélectionnez GIF et cochez la case Transparence.
Après cela, nous déterminerons quelles couleurs seront transparentes. Toutes les couleurs présentes dans l'image sont contenues dans l'onglet Table des couleurs et sont affichées sous forme de carrés colorés. Sélectionnez l'outil Pipette dans la barre d'outils sur le côté gauche de la fenêtre.
Il existe deux manières de définir les couleurs. Le moyen le plus simple consiste à spécifier une couleur avec une pipette directement sur l'image - après cela, la couleur sera mise en évidence sur la table des couleurs avec un trait sombre. Eh bien, si vous savez exactement quelle couleur doit être transparente, vous pouvez la sélectionner directement sur la table des couleurs en cliquant sur le carré de couleur correspondant. Dans le premier comme dans le deuxième cas, si vous devez sélectionner plusieurs couleurs, vous devez travailler avec la touche Maj (ou Ctrl) enfoncée. Après avoir choisi une couleur, vous devez demander au programme de la rendre transparente. Pour ce faire, cliquez sur l'icône Mapper les couleurs sélectionnées sur Transparent. Sur l'image, ce bouton est encerclé et la couleur rouge est définie sur transparent. Une zone transparente apparaîtra dans l'image et le carré de la table des couleurs changera d'apparence - une partie deviendra un triangle blanc. Pour annuler la couleur sélectionnée, vous devez la sélectionner dans la table des couleurs, puis cliquer à nouveau sur l'icône Mapper les couleurs sélectionnées sur Transparent.
Quelques mots sur la méthode de réglage de la transparence. Il est responsable du menu déroulant Spécifier l'algorithme de tramage de transparence, en russe - Algorithme de simulation de transparence (Fig. ci-dessous). Il existe quatre choix : Pas de tramage de transparence, Dither de transparence de diffusion, Dither de transparence de motif et Dither de transparence de bruit. En mode algorithme de diffusion, le curseur Quantité devient actif, vous permettant de modifier la valeur de diffusion. Que mettre en pratique ? Selon le but et l'image. Je n'utilise pas cette option et je la laisse toujours par défaut - Pas de tramage de transparence.
Cliquez sur Enregistrer - le GIF transparent est prêt. Le travail a été réalisé dans Adobe Illustrator version CS4 (v.14), mais toutes les actions et raccourcis clavier sont également pertinents pour la version antérieure CS3 (v. 13).
Importer et animations simples Bonjour. Aujourd'hui, nous examinons une animation simple dans After Effects.
Ressources : Adobe Illustrator CC
Adobe After EffectsCC
Commençons par apprendre en dessinant dans Illustrator.
Dessinons
1) Dessinez un rectangle jaune comme arrière-plan
Figure 1 - Rectangulaire
2) Dessinez un cercle et remplissez-le d'un dégradé
Travaillons un peu le cercle :
- supprimez le point bas du contour, on obtient un arc ;
- tracez une ligne droite, fermant le bas de l'arc, on obtient un demi-cercle
Figure 2 - 1) tracez un cercle ; 2) dégradé ; 3) supprimer un point
3) Dessinez un rectangle et faites-en une copie
- un rectangle gris ;
- un autre rectangle est gris foncé
4) Dessinez un Triangle à partir d'un astérisque en fixant le nombre de rayons à 3
Figure 3 - 1) lumière rectangulaire ; 2) rect foncé ; 3) triangle
5) Dessinez un chat à l'aide d'un stylo et de formes simples 
Figure 4 - 1) tête ; 2) cou ; 3) corps ; 4) jambe ; 5)queue
Et maintenant le moment le plus IMPORTANT
Répartissons les images en calques (ce qui sera animé se trouve sur un calque séparé) comme ceci : 
Figure 5 - toutes les photos (couches importantes marquées en rouge)
Ça y est, maintenant économisons.
Regardons les paramètres de sauvegarde
Figure 6 - Enregistrer
Et maintenant la prochaine étape. Fermez Adobe Illustrator et ouvrez After Effects.
Importer dans After Effects
Fichier - Importer - Fichier - sélectionnez notre fichier Illustrator enregistré.
Choisissons d'importer des calques depuis Illustrator ; si nous insérons des images, nous obtiendrons une image avec des calques fusionnés, mais nous n'en avons pas besoin.
Figure 7 - Importer en tant que composition
Voilà, importé.
Voyons maintenant ce que nous avons. Double-cliquez sur la composition pour qu'elle s'ouvre et que l'on voie les calques (si tout est fait correctement, il y aura plusieurs calques). Nous obtenons ceci, voir figure
Figure 8 - Composition ouverte
Et maintenant, ce pour quoi nous sommes ici aujourd'hui, c'est l'animation.
Animation dans After Effects
Définissez le point de rotation en haut de la flèche à l'aide de l'outil Pan Behind (raccourci - Y). Nous prenons simplement un point et le déplaçons là où c'est nécessaire. En conséquence, cela ressemblera à ceci.. 
Figure 9 - Outil Panoramique et Calques
Ça y est, passons maintenant aux calques d'animation.
Nous aurons besoin d'une couche Arrow et Head_cat.
Commençons par la flèche.
Développons la liste, trouvons-la et cliquons sur l'horloge. Nous fixons donc le premier point à zéro seconde. L'animation durera 2 secondes au total.
Voici donc les réglages que vous devez effectuer (nous mettrons 3 points au total) :
| Deuxième | 0 | 1 | 2 |
| +66 | - 70 | +66 |
Figure 10 - Flèche de rotation
Animons maintenant la tête du chat.
Développons head_cat et trouvons Position .
Il y aura 4 points ici.
Seule la dernière coordonnée sera modifiée sans affecter les autres.
| Deuxième | 0.1 | 0.17 | 1.12 | 2.0 |
| Position | 689.3 | 729.3 | 729.3 | 689.3 |
Figure 11 - Positionner la tête
Donc, le principe de l’animation était le suivant. La flèche se balance d'un côté à l'autre, dès qu'elle s'approche du chaton, elle rentre la tête, s'attarde un peu dans cette position, puis la remet à sa place.
La dernière étape
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 de rendu s'ouvrira et dans le module de sortie (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 spécifier le chemin).
C'est tout.
