Share
La première partie de ce didacticiel explique aux novices de Flash les principes fondamentaux du dessin et de l'animation de vecteurs dans Flash. Nous allons dessiner et animer un ballon de plage qui rebondit. La connaissance préalable de Flash aidera certes, mais les techniques suivantes devraient être accessibles à tous et à la plupart des versions de logiciel. Partie 2 à venir…
Vous trouverez ci-dessous l'animation finale sur laquelle nous allons travailler. Vous voulez accéder à l'intégralité des fichiers Vector Source et aux copies téléchargeables de chaque didacticiel, y compris celui-ci? Rejoignez VECTORTUTS PLUS pour seulement 9 / mois.
Commençons par ouvrir un nouveau document (Fichier> Nouveau…). Un document sous forme de fichier Flash (ActionScript 2.0) suffit. la version Actionscript n'est pas pertinente car nous n'utiliserons aucune.
Utilisez l’Inspecteur des propriétés au bas de votre écran pour saisir les Propriétés du document, puis cliquez sur le bouton Dimensions. Tout d’abord, donnez un titre à votre document, puis donnez à la scène (la zone de votre document qui sera visible lorsqu’elle sera publiée) des dimensions de 600 pixels sur 400 pixels. La couleur d'arrière-plan sera laissée en blanc, mais changez la cadence d'images en 21 fps (images par seconde). 21 ips donne un taux d'animation rapide et fluide.
L'organisation est essentielle lorsque vous travaillez avec Flash. Avant de commencer à dessiner notre balle, nommons la couche sur laquelle elle va s'asseoir. Double-cliquez sur le calque 1 et appelez-le "Ball".
Sélectionnez l'outil Ovale, définissez un trait et une couleur de remplissage, tels que ceux affichés. Ensuite, dessinez un cercle uniforme (en maintenant la touche Maj enfoncée et en faisant glisser la souris). Utilisez également l’Inspecteur des propriétés pour attribuer à la barre un poids de 3 pixels..
En créant des symboles dans Flash, vous pouvez utiliser plusieurs occurrences des mêmes objets dans un même fichier. Les symboles sont tous accessibles à partir de la palette Bibliothèque (Fenêtre> Bibliothèque). En changeant un symbole, toutes les occurrences de ce symbole dans le fichier seront changées.
Nous allons transformer notre cercle en un symbole qui deviendra notre balle. Sélectionnez le cercle entier et appuyez sur F8. Nommez-le "mc_ball", choisissez de le transformer en un symbole de clip et cliquez sur OK..
Ajoutez un deuxième calque sous le calque "Ball" et appelez-le "Ombre". Dans la première image de cette couche, tracez une ellipse pour former une ombre sous la balle. Supprimez le trait et colorez-le # E2E0E5. Transformez-le en symbole comme vous l'avez fait auparavant avec le ballon, puis nommez-le "mc_shadow".
Placez les deux symboles à peu près à la bonne hauteur pour suggérer que la balle est assise sur le sol. Dans la palette Aligner (Fenêtre> Aligner), cochez la case Mettre en scène et centrer les deux symboles horizontalement..
Nous avons créé nos symboles dans leur forme la plus élémentaire, commençons maintenant à les animer. Maintenez la touche Maj enfoncée et cliquez sur l'image 20 des deux calques de la timeline. Sélectionnez Modifier> Scénario> Convertir en images clés ou appuyez sur la touche F6 pour transformer ces images en images clés. Les images clés représentent des points de la chronologie où quelque chose se passe. Ce point sur la timeline sera la fin de l'animation; En d'autres termes, le ballon aura rebondi du sol, atteint son apex et sera revenu à cette position de départ. La même chose s’applique à notre ombre: elle s’est évanouie lorsque la balle est montée et est revenue à cet état de départ à la 20e minute.
Ajoutons maintenant le point où la balle est à son maximum. Sélectionnez l'image 10 sur les deux calques et appuyez sur F6 pour les transformer en images clés..
Le curseur étant toujours à l'image 10, déplacez le symbole de la balle verticalement vers le haut jusqu'à un point de la scène. Sélectionnez l'outil de transformation libre et agrandissez l'occurrence du symbole "shadow_main"..
Enfin, avec l'ombre sélectionnée, accédez à Couleur dans l'inspecteur des propriétés et définissez-la sur une valeur alpha de 30%..
L'interpolation est le processus par lequel Flash génère automatiquement toutes les étapes. entre un objet ou forme deux états.
Nous allons interpoler les images entre notre première image et le milieu de l'animation à l'image 10. Sélectionnez une image comprise entre 1 et 10 sur les deux calques et faites à nouveau référence à l'inspecteur des propriétés. Choisissez Motion dans la sélection Tween et vous verrez les images résultantes virer au violet.
Déplacez le curseur d'avant en arrière le long de la timeline avec votre souris pour voir la balle et l'ombre bien animées. La vitesse de ce mouvement est cependant complètement uniforme. Nous avons besoin du ballon pour décélérer car il atteint son apex et nous pouvons le faire avec facilité (ha ha).
De nouveau, avec une image de chaque couche sélectionnée (dans la zone interpolée), reportez-vous à l’Inspecteur des propriétés. Changez le Tweening à Ease avec une valeur de 100. Cela ralentira notre balle grimpante.
Après avoir réussi à animer la remontée du ballon, répétez les étapes d’interpolation pour les images 11 à 20. Cette fois, facilitez l’interpolation de mouvement. dans -100, provoquant l'accélération du ballon à l'approche du sol.
Appuyez sur Commande + Entrée pour afficher votre balle animée jusqu'à présent. Cela devrait ressembler à l'animation ci-dessous.
En supposant que notre balle soit faite de quelque chose d'un peu plus souple que le diamant, elle changera légèrement de forme à l'impact avec le sol. Ajoutons une dernière image clé où la balle s'aplatit momentanément.
Sélectionnez l'image 21 sur les deux calques et appuyez sur F6 pour les transformer en images clés. Puis utilisez l’outil de transformation libre pour écraser le symbole "balle" à partir du bord supérieur (maintenez la touche Alt enfoncée pour que le bord inférieur reste le même).
Notre mouvement de rebond est terminé. Nous devons maintenant ajouter plus de détails et de mouvement à notre balle. Double-cliquez sur le symbole "balle" de l'une des images clés pour entrer dans la chronologie de ce symbole. Vous verrez votre emplacement actuel sous la timeline - vous devriez être dans "Scène 1, mc_ball".
Cliquez sur l'icône Insérer un calque pour créer un deuxième calque au-dessus du calque actuel. Copiez et collez le cercle en place du calque 1 au calque 2 (Commande + C, Commande + Maj + V). Maintenant, nommez la couche inférieure "Ball Spinning" et celle du haut "Ombre". Enfin, verrouillez le calque "Ball Spinning".
Dessinez un grand cercle quelque part sur la scène en vous assurant qu'il a une couleur différente de celle du cercle existant..
Positionnez le cercle le plus large de manière à ce que le cercle jaune soit encore visible et corresponde à la forme idéale pour l’ombrage de la balle. Libérer tous les objets.
Maintenant, sélectionnez à nouveau le cercle plus grand et appuyez sur Supprimer. En superposant des formes non groupées ou non symbolisées, vous les combinez de la même manière que vous le feriez avec des pixels dans des applications de peinture. En supprimant maintenant le cercle le plus large, il ne reste plus que le petit croissant qui deviendra l’ombrage de la balle. Sélectionnez et enlevez le trait restant et colorez le croissant # E2E0E5.
Comme ce croissant agit comme un ombrage sur notre ballon, il serait bien de lui donner une Multiply Opacity. Pour ce faire, nous devons le convertir en un symbole de clip (vous devez être habitué à cette action maintenant). Appuyez sur F8 et nommez-le "mc_ball_shading" (ces noms deviennent louche). Reportez-vous à l'inspecteur des propriétés et modifiez le mélange en multipliant. Parfait!
Appuyez à nouveau sur Commande + Entrée pour afficher votre balle animée jusqu'à présent. Cela devrait ressembler à l'animation ci-dessous.
Après avoir traité de l'ombrage, vous pouvez maintenant verrouiller le calque "Shade" (peut-être même le rendre invisible pour faciliter le travail) et déverrouiller "Ball Spinning". Nous allons ajouter un motif à donner à notre cercle pour lui donner ce look de ballon de plage. Utilisez l'outil Ovale pour dessiner un grand ovale sur la scène. Il faut un trait de 1px et #FFFFFF, mais pas de couleur de remplissage.
Placez le trait comme indiqué dans l'image ci-dessous et relâchez. Sélectionnez ensuite la partie du trait située en dehors de la balle en cliquant simplement dessus. Comme pour la création du croissant d'ombrage plus tôt, tous les vecteurs de cette couche se sont fusionnés pour former des régions séparées. Supprimer la partie extérieure du trait.
Dessinez quelques autres ovales et placez-les au-dessus du cercle de manière à ce qu'ils se rejoignent quelque part au sommet. Ensuite, retirez l'excédent de l'extérieur du cercle. Les ovales ne doivent pas tous être de taille ou de proportions égales, essayez simplement de recréer quelque chose qui ressemble un peu à l'image ci-dessous. Ce que vous aurez créé est une série de segments qui peuvent maintenant être colorés individuellement.
Coloriez les segments alternés avec # EA512D et supprimez tous les morceaux de trait blanc de la balle. Appuyez sur Commande + Entrée pour voir ce que vous avez fait jusqu'à présent. Cela devrait ressembler à l'animation ci-dessous.
Ajoutons une dernière dimension de mouvement à l'animation, nous ferons tourner le ballon lentement à mesure qu'il rebondit. Pour ce faire, nous avons d’abord besoin de transformer la boule sur la couche "Ball Spinning" en symbole. Cliquez sur la première image clé du calque pour vous assurer que tout ce qu'il contient est sélectionné. Maintenant, appuyez sur F8 et nommez ce symbole de clip "mc_ball_base". Vous verrez qu'il a été ajouté aux autres symboles de la palette Bibliothèque (Fenêtre> Bibliothèque)..
Sélectionnez l'image 32 du scénario sur le calque "Spinning Ball" et appuyez sur F6 pour créer une nouvelle image clé. Sélectionnez l'image 32 du scénario sur le calque supérieur et appuyez sur F5. Cela créera une nouvelle image, mais comme le symbole "Shade" ne change pas d'état, nous n'avons pas besoin d'en faire une image clé. Nous devons simplement nous assurer que lorsque le curseur atteint ce point le long de la timeline, le symbole "Shade" est présent..
Pourquoi avons-nous choisi l'image 32? En faisant cela, nous allons faire tourner notre balle une fois toutes les 32 images. Notre balle rebondit une fois toutes les 20 images et ce calage irrégulier signifiera que la balle se trouvera à différents stades de rotation pendant le rebond. Si ce n'est pas encore clair, ce sera bientôt…
Sélectionnez une image quelque part dans le scénario sur le calque "Rotation de la balle" et reportez-vous à l'Inspecteur des propriétés. Sélectionnez Interpolation de mouvement comme vous l'avez fait avec le mouvement de rebond. Cette fois, nous ne voulons pas de valeur de facilité, nous avons besoin que le ballon tourne régulièrement à la même vitesse. Sélectionnez CW (Clockwise) dans le menu déroulant Rotate et laissez 1 comme le nombre de fois que la balle va tourner pendant l'interpolation. Bien entendu, la couche "Shade" n’est pas affectée et l’ombrage restera donc dans la même position sur la face de la balle..
Donc là vous l'avez! Appuyez à nouveau sur Commande + Entrée et vérifiez que le mouvement est comme vous le souhaitiez. Si cela doit changer, vous pouvez augmenter le nombre d'images dans les interpolations, modifier la hauteur de la balle, le nombre de rotations, etc. outils de dessin vectoriel, hiérarchie des objets et symboles Flash et interpolation de mouvement.
J'espère que tu as aimé! La partie 2 doit paraître le mois prochain et développera ces techniques en améliorant le processus avec une touche d'Illustrator…
Abonnez-vous au flux RSS VECTORTUTS pour rester informé des derniers tutoriels et articles sur les vecteurs.
Accentsconagua