Vous avez une ou deux icônes que vous aimeriez donner vie à l'animation. Par où commenceriez-vous ? Disons que vous avez des fichiers SVG, Illustrator CC et After Effects CC, mais la solution vous échappe.

Dans cet article, je vais vous montrer comment animer facilement un fichier SVG, notamment en préparant le fichier SVG dans Illustrator et en l'important dans After Effects CC. J'expliquerai également comment vous pouvez le convertir en calques de forme et ajouter du mouvement. Et enfin, parlons de l'exportation et du rendu.

Le résultat final des travaux.

Passons maintenant à la partie la plus intéressante - apprenez à animer des images.

Préparation du fichier SVG dans Illustrator

Commençons par ouvrir votre fichier SVG dans Adobe Illustrator CC. Je vais animer une petite icône de voiture qui est disponible gratuitement sur Week Of Icons.

Après avoir ouvert le fichier, nous devons dissocier et séparer tous les objets en calques. Vous pouvez le faire manuellement ou utiliser Relâcher sur les calques (séquence) pour accélérer le processus. Avant d'importer le fichier dans After Effects, nous devons l'enregistrer au format de fichier Illustrator.

Nous pouvons dégrouper des objets en utilisant Release to Layers (Sequence) afin de ne pas perdre un temps précieux.

Importation et organisation d'un fichier dans After Effects CC

Vous êtes maintenant prêt à importer dans After Effects CC. Utilisons le raccourci clavier Ctrl+I (Windows) ou Commande + je (Mac) pour charger la boîte de dialogue Importer le fichier, ou rendez-vous sur Fichier > Importer > Fichier… Au même endroit, sélectionnez le fichier Illustrator CC que nous avons préparé et cliquez sur importer. Une petite boîte de dialogue devrait apparaître avec le nom du fichier sélectionné. Sélectionner composition dans la liste déroulante appelée Type d'importation.

Un moyen plus rapide d'importer un fichier consiste à double-cliquer sur un emplacement de colonne dans le panneau de projet.

Dans le panneau Chronologie, nous verrons la nouvelle composition. Nous double-cliquons dessus. Nous devrions maintenant voir les calques Illustrator CC avec des icônes orange à gauche de leurs noms.

Avant de passer aux choses sérieuses, nous devons convertir toutes ces couches en calques de forme. Nous devons tous les sélectionner avec Ctrl+A/Commande+A, ou manuellement en utilisant Maj + souris gauche. Après cela, faites un clic droit sur le calque et sélectionnez Créer > Créer des formes à partir d'un calque vectoriel.

Maintenant que les nouveaux calques sont sélectionnés, faites-les glisser vers le haut du panneau au-dessus des calques Illustrator CC, puis supprimez les calques Illustrator CC afin qu'ils ne gênent pas.

Conversion des calques Illustrator CC en calques de forme dans After Effects CC

Bien que cela ne soit pas nécessaire, il est important que nous donnions à chaque calque un nom et/ou une couleur appropriés. Cela nous permettra de travailler plus efficacement en nous concentrant sur les images clés. Dans l'exemple ci-dessous, les couleurs des étiquettes correspondent plus ou moins aux remplissages de leurs calques respectifs.

Étiqueter les calques de forme avec des noms, des couleurs, des étiquettes et des positions appropriés est très pratique.

Utilisez le raccourci clavier pour configurer les paramètres Ctrl+K/Commande+K ou Composition > Paramètres de composition… Dans les paramètres de composition, nous devons sélectionner la largeur, la hauteur, la fréquence d'images et la durée pour la largeur, la hauteur, la fréquence d'images et la durée. Pour ce projet, j'ai choisi 60 ips pour que l'animation reste fluide.

À ce stade, tout semble être prêt à partir, mais il reste encore une chose à faire. Nous devons regrouper certaines couches afin que leurs mouvements soient synchronisés avec la couche principale que nous pouvons contrôler. Cette méthode s'appelle parentalité.

Utilisez Pick Whip pour attribuer un calque parent à plusieurs calques.

Dans notre exemple, j'ai attribué des couches moins importantes (couches enfants) telles que le pare-brise, les parties du corps, le bois et les cordes à la couche principale du corps (couche parent). Cela m'a permis de contrôler la position et la rotation de toute la voiture (à l'exception des roues) à l'aide du calque parent.

Création d'animations

Je voulais que la voiture heurte un rocher et reste un peu en l'air. Je voulais aussi que l'arbre monte et descende et ouvre le tronc. J'ai commencé par construire la pierre, la voiture et les roues. Ensuite, il était temps de franchir le plus gros obstacle - mettre l'action sur l'arbre. Une fois cela fait, je me suis mis au travail sur les petits détails comme le rack et les cordes.

Croquis décrivant l'animation

La première étape consistait à créer un élément ou un calque de roche, mais au lieu de revenir à Illustrator CC pour ajouter un autre calque, j'ai simplement utilisé l'outil Plume dans After Effects CC. Cela m'a permis de concevoir rapidement une petite pierre.

Oh, puissant outil stylo !

Le tronc était une tâche relativement simple. Je l'ai installé à l'arrière de la voiture et j'ai fait un point d'ancrage au sommet inférieur gauche. À l'aide de Pick Whip , je l'ai attribué au calque parent du corps. L'avant-dernière étape consistait à donner l'effet de rotation, ce qui rendait le moment de rebondissement de la voiture plus réaliste Bodymovin en combinaison avec la bibliothèque mobile Lottie.

PS vous pouvez trouver mes fichiers Illustrator CC et After Effects CC.

Le jeu d'icônes est disponible en téléchargement gratuit sur .

Optimisation graphique Web

Les informations graphiques sont transmises beaucoup plus lentement que les informations textuelles et le temps de chargement des images est proportionnel à la taille de leurs 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. L'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 choisir les bons paramètres. Et vous pouvez optimiser à la fois des images créées directement dans Illustrator et d'autres, telles que des 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(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 beaucoup de temps sur la recherche de la meilleure option d'optimisation, car ils éliminent le besoin d'enregistrer des images avec différents paramètres d'optimisation, puis de les comparer visuellement. 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 remplissages en dégradé, le format JPG est utilisé. 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 vous assurer que la meilleure qualité est donnée par l'algorithme de compression sélectionné par le programme par défaut. 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 au format GIF avec le fichier HTML (Fig. 8). Par conséquent, 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 Accident vasculaire cérébral) 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 sélectionnez la commande dans le menu contextuel 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, 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, se déplacera à la page suivante, et un 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 sauvegarder(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. 19.

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 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 : Normal l'état normal, Surpassant le curseur de la souris sur l'élément et Bas appuyant sur le bouton gauche de la souris lors du survol. 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 le programme 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 changera, la couleur de l'inscription changera, par exemple, en vert lorsque vous la survolerez avec le marqueur de la souris (état dessus) et en bleu lorsque le bouton de la souris est enfoncé (état bas).

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 généré 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

La popularité croissante du SVG (Scalable Vector Graphics scalable vector graphics), créé sur la base de la norme XML, vous permet également d'obtenir une variété d'éléments interactifs, en particulier des survols, mais en pratique, cela est mis en œuvre 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 recherchez le fichier souhaité sur votre disque dur. Lorsque son nom apparaît dans le champ URL(fig. 49), cliquez sur le bouton Fait(Sortir).

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(Sortir).

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 vous exécutez ensuite le fichier créé, vous verrez le résultat illustré à 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 le même temps, l'image multicouche elle-même peut être préparée dans différentes applications, y compris 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 au-dessus des autres, puis augmentez la taille de chaque objet suivant, par exemple, comme illustré à 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. Cela peut être fait de différentes manières, la manière la 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 tous les calques imbriqués vers le haut de 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 mélange. 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

Salut tout le monde! Aujourd'hui, je vais essayer de faire une description des fonctionnalités du programme Adobe Illustrator, en le comparant avec les capacités de la chasse d'eau. Il ne s'agira pas d'une analyse globale du programme osseux, mais plutôt d'une description de quelques-unes des puces intéressantes que j'ai découvertes dans ce programme. J'ai collecté des informations pièce par pièce au fur et à mesure que je les étudiais afin de les mettre toutes dans un seul article. Je dois admettre tout de suite que je ne suis pas un utilisateur d'illustrateur super expérimenté, seulement depuis six mois que je l'utilise en dessin (avant cela, je dessinais tout en flash). Beaucoup se plaignent que l'illustrateur est complexe, pas toujours intuitif. Dans une certaine mesure, je suis d'accord qu'après le flash, ce programme est difficile. Mais l'essentiel ici n'est pas d'arrêter, mais de continuer à étudier. Et après quelques semaines, la pensée se pose, comment ai-je pu m'en passer avant !

Donc, ce que j'ai aimé chez illustrator, et ce que j'ai trouvé par moi-même qui n'est pas en flash.
1. Je vais commencer par le plus simple, mais en même temps nécessaire. Essayez d'arranger les objets en cercle en flash. Auparavant était Déco Outil, mais il a été supprimé, apparemment considéré comme inutile. Nous avons décidé que ce serait plus amusant de le faire à la main. Illustrator a cette fonction : Effet - Déformer et transformer - Transformer.

Tout est simple et rapide, nous fixons nous-mêmes les valeurs (distance entre objets, nombre de copies) dans les paramètres.

2. Zigzag

Chose encore plus simple, mais néanmoins utile. Cela semblerait une bagatelle, mais en flash il faut dessiner à la main, en illustrator c'est une question de secondes.

3. Déformation des objets (Warp)

Il n'y a rien de tel dans Flash. Dans l'exemple ci-dessous, je n'ai montré que 2 façons de déformer des formes simples (Effet - Warp - Arc / Fish). En fait, il y en a 15 dans la dernière version du programme.

4. Arrondissement automatique des coins (Round Corners)

Cela peut être fait manuellement : sur un objet graphique, lorsqu'il est sélectionné dans un coin (dans tous les coins), un point blanc et un signe de ligne arrondi apparaissent. Faites glisser la souris, ajustez à votre goût.

Mais cela ne s'applique qu'aux formes, avec un trait de crayon un peu différent - appliquez l'effet d'arrondi ( Effet - Styliser - Coins arrondis). A la sortie on obtient le même résultat.

5. Rugueux

L'effet est appliqué à des formes simples ( Effet-distorsion et transformation-rugosité). En conséquence, nous obtenons quelque chose qui ressemble à des modèles 3D low-poly. Je pense que c'est cool :) Et surtout - très simple.

6 plisser et ballonner(Tirer et gonfler)
Un exemple dans l'image ci-dessous :

7. Extension de formulaire (chemin décalé)

En flash, il existe une fonction Expand Fill (extension de remplissage), elle ne fonctionne pas du tout avec des traits de crayon, contrairement à illustrator.

8. Pinceaux (Art Brush, Pattern Brush, Scatter Brush)
Voir l'image ci-dessous pour des exemples :

9. Pinceau de texture (pinceaux de texture)

Il existe également de nombreux pinceaux de texture dans l'illustrateur sur lesquels j'ai écrit et comment ils sont apparus dans la nouvelle version de flash - . Il a été remarqué que l'utilisation des pinceaux dans Adobe Animate est terriblement lente. C'est ça:(

10. Je ne sais pas si c'est une astuce, mais je veux me concentrer sur un pinceau avec un drôle de nom goutteBrosser. Situé sur la barre d'outils, un pinceau très agréable à utiliser. Il a un tas de paramètres, je l'aime plus que d'habitude. Il est difficile d'expliquer ses avantages avec des mots, il vaut mieux l'essayer une fois.

10. Diviser en grille

Une autre fonctionnalité utile est la fonction Split to Grid (Object-Path-Split to Grid) qui vous permet de découper le formulaire en segments égaux. Qu'est-ce que cela nous rappelle ? C'est vrai - des fenêtres dans un immeuble de grande hauteur. Quant à moi, un truc sympa pour dessiner, par exemple, des paysages urbains ;)

Un autre outil utile introduit dans illustrator, probablement depuis sa première version. Avec lui, vous pouvez créer, par exemple, des textures de bois :

12. Déplacer (droite - Transformer - Déplacer)

Décaler un objet d'une distance donnée. Si vous le souhaitez, vous pouvez créer immédiatement une copie qui sera placée à la distance souhaitée de l'objet sélectionné horizontalement / ou verticalement. Dans une version antérieure de flash, il y avait un plugin qui exécutait cette fonction. Malheureusement, je ne me souviens plus de son nom.

Il est très pratique de créer des motifs sans couture dans illustrator ( Objet-Pattern-Make). Je me souviens comment j'excellais frénétiquement en flash avec la création de . Dans l'illustrateur de la version CC 2015, tout est automatisé, un tas de paramètres vous aideront à créer un motif dans des dizaines de variations, avec seulement quelques éléments graphiques à portée de main. Dans les versions antérieures du programme, tout devait être fait manuellement, comme en flash jusqu'à présent.

(Remarque - le motif peut être transformé en un objet vectoriel modifiable à l'aide de la fonction d'analyse ( Apparence de développement d'objet).

14. Mosaïque d'objets (mosaïque)

Créez une palette de couleurs basée sur une image existante. Importez l'image que vous aimez dans l'illustration (Ouvrir), puis Objet - Créer une mosaïque d'objets. Dans les paramètres, nous spécifions la fréquence de division en hauteur et en largeur.

Et en sortie on obtient :

15.Blend (Mélange)

Utilisé pour créer des dégradés. Vous pouvez créer des transitions étape par étape, comme, par exemple, dans l'image. Je ne peux pas dire que je l'utilise souvent, mais cela pourrait être utile à quelqu'un. Il me semble qu'il peut être utilisé pour créer des images d'arrière-plan simples.

L'outil peut également être utilisé pour cloner des objets. Nous plaçons deux objets à distance l'un de l'autre et appliquons les options de fusion, sélectionnons le nombre d'étapes (le nombre d'objets clonés).

16. Outil de construction de forme. Une chose très pratique pour travailler avec des primitives. En un éclair, comme il me semblait, c'est moins pratique.

Maintenez Alt et cliquez sur les segments sélectionnés - supprimez les segments. Si nous faisons simplement glisser la souris sur plusieurs zones sélectionnées - connexions.

Addition - un outil qui aide à couper, connecter, etc. automatiquement. formes sélectionnées. Quant à moi, ce n'est pas très pratique, je l'utilise plus souvent Construireformeoutil.

(plans de travail)

18. Panneau d'outils personnalisé

La possibilité de créer votre propre barre d'outils, en supprimant celles qui ne sont pas nécessaires et en sélectionnant uniquement celles que vous utilisez.

En flash, les plans de travail, à savoir les scènes ( Scène 1,2,3..) sont situés séparément et vous devez basculer entre eux (Maj + F2). Dans illustrator, ils peuvent tous être positionnés sous vos yeux. C'est pratique lorsque vous créez plusieurs versions du même dessin, afin que toutes les options soient devant vos yeux pour comparaison.

19. Isométrique avec styles graphiques

Et la dernière chose est la création d'isométrie sans utiliser en 1 clic (ou plutôt, en 3 clics, car nous avons 3 côtés ;) en utilisant des styles graphiques ( Styles graphiques). Comment cela est fait, j'écrirai la prochaine fois.

Ce qu'illustrator a en commun avec flash, c'est la possibilité d'enregistrer un objet dans un symbole (symbole) et ce symbole peut également être transféré dans flash sans problème (ouvrir un fichier .ai dans flash, en Importer - Importer vers l'étape).
Le symbole dans illustrator a les mêmes propriétés que dans flash.
Et à la fin, j'écrirai ce qui dans illustrator, à mon avis, est inférieur au flash. Oui, oui, et il y en a. Et voici l'outil de remplissage ( seau de peinture). Peu importe à quel point j'essaie de m'y habituer en illa, c'est plus pratique en flash.
Si mes notes vous sont devenues utiles ou si vous souhaitez ajouter quelque chose par vous-même, bienvenue dans les commentaires ! Bonne chance à tous;)

Le GIF transparent dans Adobe Illustrator se fait comme suit. Allez dans le menu Fichier > Enregistrer pour le Web et les appareils (Alt+Ctrl+Maj+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(taille de l'image). Le fait est que la page entière entre par défaut 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 sur le plan de travail(Rogner pour ajuster la page) 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 tableau des couleurs(Nuancier) et sont affichés sous forme de carrés de couleur. Sélectionnez un outil dans la barre d'outils sur le côté gauche de la fenêtre pipette(pipette).

Les couleurs peuvent être définies de deux manières. Le moyen le plus simple consiste à spécifier la couleur avec une pipette directement sur l'image - après cela, la couleur sera mise en surbrillance 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 la case colorée correspondante. Et dans les premier et 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 cela, cliquez sur l'icône Mappe les couleurs sélectionnées sur Transparent(Ajouter les couleurs sélectionnées à la transparence). Dans la figure, ce bouton est encerclé et la couleur rouge est définie sur transparent. Une zone transparente apparaîtra sur l'image et le carré sur 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. Le menu déroulant en est responsable. Spécifier l'algorithme de tramage de transparence, en russe - Algorithme de simulation de transparence (fig. ci-dessous). Il y a quatre choix : No Transparency Dither - aucun algorithme, Diffusion Transparency Dither - algorithme diffus, Pattern Transparency Dither - algorithme basé sur le modèle et Noise Transparency Dither - algorithme basé sur le bruit. En mode algorithme diffus, le curseur devient actif Montant(Montant) qui vous permet de modifier la valeur de diffusion. Que mettre en pratique ? Selon le but et l'image. Je n'utilise pas cette option et laisse toujours la valeur par défaut - No Transparency Dither.

Appuyez sur Enregistrer - le GIF transparent est prêt. Le travail a été effectué dans Adobe Illustrator version CS4 (v.14), mais toutes les actions et raccourcis clavier sont pertinents pour la version antérieure CS3 (v. 13).

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.