Salut tout le monde! Aujourd'hui, je vais essayer de faire une description des possibilités Logiciel Adobe Illustrator, en le comparant aux capacités de Flash. 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, il y avait un Deco Tool, 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 : Effect - Distort&Transform - Transform .

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. dernière version programmes.

4. Arrondissement automatique des coins (Round Corners)

Peut être fait manuellement : sur un objet graphique lorsqu'il est sélectionné dans un coin (dans tous les coins) apparaît point blanc et un signe de ligne arrondie. 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 - Distort&Transform - Roughen). 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. Pucker&Bloat (Pucker & Bloat)
Un exemple dans l'image ci-dessous :

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

Dans le 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 nouvelle versionéclair - . 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 Blob Brush. 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, présenté en illustrator, probablement depuis sa première sortie. Avec lui, vous pouvez créer, par exemple, des textures de bois :

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

Décaler l'objet de régler la distance. 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. Une version antérieure de flash avait un plugin qui faisait 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 (Object-Pattern-Make ). Je me souviens comment j'excellais frénétiquement en flash avec la création de . Dans la version illustrator de 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. En plus premières versions les programmes devaient être faits manuellement, comme en flash jusqu'à présent.

(Remarque - le motif peut être transformé en un objet vectoriel modifiable à l'aide de la fonction d'expansion (Objet - Développer l'apparence).

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

Création palette de couleurs basé sur l'image existante. Importez l'image que vous aimez dans l'ill (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. Pour ma part, ce n'est pas très pratique, j'utilise plus souvent l'outil Build Shape Tool.

(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 le dernier - la création d'isométries sans utiliser 1 clic (ou plutôt 3 clics, car nous avons 3 côtés ;) en utilisant des styles graphiques (Graphic Styles). 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 aucun problème (ouvrir un fichier .ai dans flash, par Import - Import to stage).
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 ( Pot 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;)

Aujourd'hui, nous avons un tutoriel Adobe Illustrator inhabituel. Car cette fois nous ne ferons pas une image statique, mais une véritable animation. Imaginez qu'il s'avère aide d'Adobe Illustrator peut aussi dessiner des dessins animés :)

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

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

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

Créez maintenant un deuxième calque et copiez-y le cadre du film, dans lequel les trous sur les bords sont faits avec un décalage. Il doit également être centré.

A partir de ces deux couches, vous pouvez déjà obtenir l'animation d'un 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 avec des images de film qui définissent son mouvement.

Maintenant, nous avons 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 très pratique pour le travail. Par conséquent, vous pouvez désactiver certains calques en cliquant sur l'icône en forme d'œ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 un certain cadre de notre future animation. Et maintenant, pour que nous puissions ajouter une légère secousse au mouvement du film, nous devons déplacer légèrement les images reçues dans différentes directions. Pour ce faire, activez uniquement le calque avec lequel vous allez travailler dans ce moment, puis déplacez le cadre de quelques pixels de chaque côté.

Lorsque 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 des parties du dessin animé et placez-le sur le premier calque au-dessus de l'image du film.

Si vous supprimez la sélection du cercle, elle ressemblera à un tout unique. C'est exactement ce dont nous avons besoin.

Mais comme il est constitué de secteurs distincts, il est possible, en changeant leur couleur, de créer une animation très rapidement et facilement. Pour ce faire, copiez ce cercle sur le deuxième calque et éclaircissez le premier secteur. Vous vous souvenez que le film tremble pendant le mouvement, il n'est donc pas nécessaire de placer le cercle exactement au centre du cadre. Placez-le sur l'œil.

De même, vous devez copier le cercle sur chaque calque suivant, tout en peignant avec une couleur plus claire un secteur de plus que la fois précédente. Ensemble, ces 12 couches forment une animation du mouvement du film avec un cercle de remplissage.

Ensuite, nous devons ajouter de la texture à nos calques. Activez le premier calque et copiez la texture du fichier source avec des pièces de rechange.

Ensuite, activez les calques suivants à tour de rôle et copiez-y la même texture. Pour le rendre différent sur chaque image, il suffit de le faire pivoter de 90 degrés. Comme vous l'avez peut-être deviné, nous devons ajouter de la texture aux 12 images.

Si vous êtes déjà assez fatigué de copier, alors je peux vous faire plaisir - il en reste très peu. Le plus dur est passé. Il reste à ajouter des rayures verticales, et presque tout. Pour ce faire, encore une fois, copiez le scratch d'origine et placez-le à un endroit arbitraire sur plusieurs couches. Dans mon cas, les rayures apparaissent en seulement deux couches.

Maintenant que le cycle principal avec l'animation du film est prêt, il reste à ajouter les chiffres. Puisque nous comptons 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 animation de film.

Et puis tout est simple. Allumez la toute première couche et placez-y le numéro trois.

Ensuite, vous devez copier cette figure sur les calques suivants jusqu'à la fin de l'animation du cercle. Lorsque vous arrivez à la copie suivante des calques, où le cercle sera à nouveau complètement rempli, vous devez mettre le numéro 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'étiquette Go!!!, supprimez simplement le cercle avant de copier l'étiquette sur le calque souhaité.

C'est tout avec l'animation. L'essentiel ici est de ne pas se tromper. Vous pouvez donner aux calques des noms pratiques, mais j'étais en quelque sorte trop paresseux :) Et pourtant, lorsque vous avez terminé, 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 en tant que : calques AI sur cadres SWF. C'est cette option qui transforme les calques Illustrator en images d'animation. Ensuite, cliquez sur le bouton Avancé.

Des paramètres supplémentaires s'ouvriront. Ici, vous devez définir la fréquence d'images. J'ai 12 images par seconde. La case à cocher Boucle est responsable du cycle de l'animation. Grâce à elle, la vidéo tournera en rond. Et l'option Ordre des calques : de bas en haut rend les calques de l'illustrateur de bas en haut dans le panneau. C'est exactement ainsi que nous avons construit notre animation.

En conséquence, nous obtenons un film flash avec notre animation.

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

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

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

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

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

Récemment, divers types d'animations 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 prennent déjà en charge ce format. Voici des informations sur la prise en charge de SVG par les navigateurs.

Cet article traite l'exemple le plus simple Animez des vecteurs SVG à l'aide du plug-in Jquery léger Lazy Line Painter.

source

Pour compléter et bien comprendre cette tâche, des connaissances de base en HTML, CSS, Jquery sont souhaitables, mais pas nécessaires si vous souhaitez simplement animer du SVG) Commençons !

Et donc les étapes que nous devons suivre:

Créer la bonne structure de fichiers

Téléchargez et connectez le plugin

Dessinez un dessin au trait sympa dans Adobe Illustrator

Convertir notre image en Lazy Line Converter

Collez le code résultant dans main.js

Ajoutez du CSS au goût

1. Créez la bonne structure de fichiers
Le service Initializr nous y aidera, où vous devez sélectionner les paramètres comme dans l'image ci-dessous.

• H5BP classique (HTML5 Boiler Plate)
• Aucun modèle
• Juste HTML5 Shiv
• minifié
• Classes .IE
• Cadre chromé
• Cliquez ensuite sur Télécharger !

2. Téléchargez et connectez le plugin

Étant donné que 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, seuls 2 fichiers doivent être transférés vers notre projet. Le premier est 'jquery.lazylinepainter-1.1.min.js' (la version du plugin peut différer) il est situé à 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 incluons dans notre index.html avant main.js comme ceci :

3. Dessinez une image de contour cool dans Adobe Illustrator

Dessinez notre image de contour dans Illustrator (la façon la plus simple de le faire est d'utiliser l'outil Plume)

Il faut que les contours de notre dessin ne se ferment pas, car pour notre effet il nous faut un début et une fin

Ne devrait pas avoir de remplissage

La taille maximale du fichier est de 1000 × 1000 px, 40 Ko

Recadrons aux bordures de l'objet Objet>Plans de travail>Ajuster aux limites des plans de travail

Enregistrer au format SVG (les paramètres d'enregistrement standard conviennent)

Par exemple, vous pouvez utiliser les icônes de la pièce jointe.

4. Convertir notre image en Lazy Line Converter
Faites simplement glisser et déposez votre icône dans la zone 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 la conversion !

5. Collez le code résultant dans main.js
Maintenant, collez simplement le code résultant dans fichier vide main.js
Option :
strokeWidth — épaisseur du contour
strokeColor - couleur de contour
Vous pouvez également modifier la vitesse de dessin de chaque vecteur en modifiant la valeur du paramètre de durée (600 par défaut)

6. Ajoutez du CSS au goût
Supprimer le paragraphe de index.html

Bonjour le monde! C'est le standard HTML5.

Et au lieu de cela, nous insérons un bloc dans lequel notre animation aura lieu

puis ajoutez du CSS au fichier main.css pour un look plus agréable :

Corps ( arrière-plan :#F3B71C; ) #icônes ( position : fixe ; haut : 50 % ; gauche : 50 % ; marge : -300px 0 0 -400px; )

enregistrer tous les fichiers.
Maintenant, ouvrez simplement index.html dans un navigateur moderne et profitez de l'effet.

PS lors de l'exécution sur une machine locale, le démarrage de l'animation peut être retardé de quelques secondes.

Le format de fichier Flash (SWF) est basé sur graphiques vectoriels et est conçu pour des graphiques évolutifs et compacts pour le Web. Étant donné que ce format de fichier est basé sur des graphiques vectoriels, l'objet conserve la qualité de l'image à n'importe quelle résolution et est idéal pour créer des images d'animation. Dans Illustrator, vous pouvez créer des cadres d'animation individuels sur des calques, puis exporter les calques d'image en tant que cadres individuels à utiliser sur le site Web. Vous pouvez également définir symboles dans un fichier Illustrator pour réduire la taille de l'animation. Une fois exporté, chaque symbole n'est défini qu'une seule fois dans le fichier SWF.

Commande d'exportation (SWF)

Fournit le meilleur contrôle sur l'animation et la compression des bits.

Fournit plus de contrôle sur le mélange de formats SWF et bitmap dans une mise en page fragmentée. Cette commande offre moins d'options d'image que la commande Exporter (SWF), mais utilise les options de commande Exporter les plus récemment utilisées (voir ).

Gardez à l'esprit les consignes suivantes lors de la préparation d'un objet en vue de son enregistrement au format SWF.

Utilisez l'application Device Central pour voir à quoi ressemblera un graphique Illustrator dans l'application Lecteur Flash sur divers appareils portables.

Insérer objet graphique Illustrateur

Les illustrations créées dans Illustrator peuvent être rapidement, facilement et facilement copiées et collées dans Application flash.

Lorsque vous collez un graphique Illustrator dans une application Flash, les attributs suivants sont conservés.

Contours et formes

• Épaisseur du trait

  Définitions des dégradés

  Texte (y compris les polices OpenType)

  Images associées

• Modes de fusion

En outre, Illustrator et Flash prennent en charge les fonctionnalités suivantes lors du collage d'un graphique.

La sélection de calques de niveau supérieur entiers dans une illustration Illustrator et leur collage dans Flash préserve les calques et leurs propriétés (visibilité et blocage).

Les formats de couleur Illustrator autres que RVB (CMJN, niveaux de gris et formats personnalisés) sont convertis par Flash en RVB. Couleurs RVB inséré de la manière habituelle.

Lorsque vous importez ou collez une illustration Illustrator, vous pouvez utiliser diverses options pour enregistrer certains effets (comme une ombre projetée par du texte) en tant que filtres Flash.

Flash enregistre les masques Illustrator.

Exporter des fichiers SWF depuis Illustrator

Les fichiers SWF exportés depuis Illustrator ont la même qualité et la même compression que les fichiers SWF exportés depuis Flash.

Lors de l'exportation, vous pouvez choisir parmi une variété de styles prédéfinis pour une sortie optimale et spécifier comment plusieurs plans de travail sont utilisés, comment les caractères, les calques, le texte et les masques sont convertis. Par exemple, vous pouvez choisir d'exporter des symboles Illustrator sous forme de films ou de graphiques, et de créer des symboles SWF à partir de calques Illustrator.

Importation de fichiers Illustrator dans une application Flash

Pour créer une mise en page complète dans Illustrator, puis l'importer dans Flash en une seule étape, vous pouvez enregistrer l'illustration dans propre format Illustrator (AI) et importez-le avec une haute fidélité dans Flash en utilisant Fichier > Importer vers la scène ou Fichier > Importer vers la bibliothèque.

Si Fichier illustrateur contient plusieurs plans de travail, sélectionnez le plan de travail à importer dans la boîte de dialogue Importer de Flash et spécifiez les paramètres de chaque calque de ce plan de travail. Tous les objets du plan de travail sélectionné sont importés dans Programme flash en une seule couche. Lorsque vous importez un autre plan de travail à partir du même fichier AI, les objets de ce plan de travail sont importés dans Flash en tant que nouveau calque.

Lorsque vous importez des illustrations Illustrator sous forme de fichiers AI, EPS ou PDF, Flash conserve les mêmes attributs que lorsque vous collez des illustrations Illustrator. De plus, si le fichier Illustrator que vous importez contient des calques, vous pouvez les importer en utilisant l'une des méthodes suivantes.

Convertissez les calques Illustrator en calques Flash.

Convertissez les calques Illustrator en images Flash.

Convertissez tous les calques Illustrator en un seul calque Flash.

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

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

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

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

Créez maintenant un deuxième calque et copiez-y le cadre du film, dans lequel les trous sur les bords sont faits avec un décalage. Il doit également être centré.

A partir de ces deux couches, vous pouvez déjà obtenir l'animation d'un 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 avec des images de film qui définissent son mouvement.

Maintenant, nous avons 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 très pratique pour le travail. Par conséquent, vous pouvez désactiver certains calques en cliquant sur l'icône en forme d'œ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 un certain cadre de notre future animation. Et maintenant, pour que nous puissions ajouter une légère secousse au mouvement du film, nous devons déplacer légèrement les images reçues dans différentes directions. Pour ce faire, activez uniquement le calque avec lequel vous allez travailler pour le moment, puis déplacez le cadre de quelques pixels dans n'importe quelle direction.

Lorsque 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 des parties du dessin animé et placez-le sur le premier calque au-dessus de l'image du film.

Si vous supprimez la sélection du cercle, elle ressemblera à un tout unique. C'est exactement ce dont nous avons besoin.

Mais comme il est constitué de secteurs distincts, il est possible, en changeant leur couleur, de créer une animation très rapidement et facilement. Pour ce faire, copiez ce cercle sur le deuxième calque et éclaircissez le premier secteur. Vous vous souvenez que le film tremble pendant le mouvement, il n'est donc pas nécessaire de placer le cercle exactement au centre du cadre. Placez-le sur l'œil.

De même, vous devez copier le cercle sur chaque calque suivant, tout en peignant avec une couleur plus claire un secteur de plus que la fois précédente. Ensemble, ces 12 couches forment une animation du mouvement du film avec un cercle de remplissage.

Ensuite, nous devons ajouter de la texture à nos calques. Activez le premier calque et copiez la texture du fichier source avec des pièces de rechange.

Ensuite, activez les calques suivants à tour de rôle et copiez-y la même texture. Pour le rendre différent sur chaque image, il suffit de le faire pivoter de 90 degrés. Comme vous l'avez peut-être deviné, nous devons ajouter de la texture aux 12 images.

Si vous êtes déjà assez fatigué de copier, alors je peux vous faire plaisir - il en reste très peu. Le plus dur est passé. Il reste à ajouter des rayures verticales, et presque tout. Pour ce faire, encore une fois, copiez le scratch d'origine et placez-le à un endroit arbitraire sur plusieurs couches. Dans mon cas, les rayures apparaissent en seulement deux couches.

Maintenant que le cycle principal avec l'animation du film est prêt, il reste à ajouter les chiffres. Puisque nous comptons 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 animation de film.

Et puis tout est simple. Allumez la toute première couche et placez-y le numéro trois.

Ensuite, vous devez copier cette figure sur les calques suivants jusqu'à la fin de l'animation du cercle. Lorsque vous arrivez à la copie suivante des calques, où le cercle sera à nouveau complètement rempli, vous devez mettre le numéro 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'étiquette Go!!!, supprimez simplement le cercle avant de copier l'étiquette sur le calque souhaité.

C'est tout avec l'animation. L'essentiel ici est de ne pas se tromper. Vous pouvez donner aux calques des noms pratiques, mais j'étais en quelque sorte trop paresseux :) Et pourtant, lorsque vous avez terminé, 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 en tant que : calques AI sur cadres SWF. C'est cette option qui transforme les calques Illustrator en images d'animation. Ensuite, cliquez sur le bouton Avancé.

Des paramètres supplémentaires s'ouvriront. Ici, vous devez définir la fréquence d'images. J'ai 12 images par seconde. La case à cocher Boucle est responsable du cycle de l'animation. Grâce à elle, la vidéo tournera en rond. Et l'option Ordre des calques : de bas en haut rend les calques de l'illustrateur de bas en haut dans le panneau. C'est exactement ainsi que nous avons construit notre animation.

En conséquence, nous obtenons un film flash avec notre animation.

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

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

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

Roman aka dacascas spécialement pour le blog

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