Share
Ce didacticiel développe les techniques décrites dans la première partie de la série Illustrer et animer une balle qui rebondit. Nous allons utiliser les outils 3D d'Illustrator pour améliorer le mouvement rotatif de la balle qui rebondit de Flash et examiner le travail entre les deux applications. Les étapes impliquées peuvent également être suivies indépendamment de la partie 1.
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.
… Et rappelons-nous simplement l'animation subtile que nous avons créée lors de la première partie de ce tutoriel…
Les mains en l'air, qui a suivi la première partie de ce tut Illustrer et animer une balle qui rebondit: Première partie - Adobe Flash? Bien, ceux d'entre vous qui en ont eu auront un fichier Flash à ajouter - ceux qui ne l'ont pas fait, ne vous inquiétez pas. Cette deuxième partie peut également être suivie individuellement, donnant un résultat final tout aussi satisfaisant..
Pour commencer, nous allons créer une boule 3D dans Illustrator. Deuxièmement, nous l'animerons dans Illustrator, puis nous passerons ensuite à Flash pour les dernières retouches. Commençons par ouvrir un nouveau document dans Illustrator. La balle que nous avons utilisée pour la première partie de ce tut mesure 90px x 90px afin de définir votre Artboard comme ayant les mêmes dimensions..
Avant de créer notre objet 3D, ajoutons un motif à la palette Symboles que nous utiliserons pour mapper la balle terminée. Si vous vous rappelez de la première partie du tut, notre ballon avait six bandes alternativement colorées - décorer notre version 3D de la même manière sera simple.
Créez six rectangles verticaux, de tailles égales et espacés. Coloriez-les en alternance avec le rouge # DF3F22 et le jaune # E3CB0E. Regroupez-les si vous le souhaitez et faites glisser le tout dans la palette Symboles (Fenêtre> Symboles). Attribuez à ce nouveau symbole un nom tel que "ball_pattern", bien que nous ne créions aucun autre symbole dont vous avez besoin pour le différencier ...
Nous allons utiliser l'outil 3D Revolve pour créer une balle. Commencez avec l'outil Ellipse et faites un cercle de la même taille que (et aligné sur) l'Artboard. Utilisez l'outil Sélection directe pour supprimer le point d'ancrage gauche. Terminez en vous assurant que le remplissage est correct (bien que la couleur ne soit pas pertinente car nous allons mapper le "ball_pattern"), mais pas de contour..
Avec cet objet sélectionné, allez à Effets> 3D> Révolution ... Vérifier l'aperçu et les options par défaut devraient vous donner le résultat suivant.
Maintenant, donnez à la balle son motif en cliquant sur l’art cartographique dans la boîte de dialogue Options 3D. Une sphère n'aura qu'une surface à cartographier; gentil et simple. Sélectionnez votre "ball_pattern" dans la liste déroulante Symbole et cochez l'option Adapter à l'échelle.
L'option Shade Artwork est particulièrement pertinente ici. Si vous le vérifiez, vous obtiendrez un excellent effet sur la surface de la balle (voir image ci-dessous). Cependant, les vecteurs résultants deviennent si complexes que Flash trouve très difficile de les rendre dans une animation. Cela ne veut pas dire qu'il ne soit pas possible d'ombrer votre balle. Si vous le souhaitez, vous pouvez utiliser les images Flash en les pixellisant d'abord. Flash n'a aucun problème à gérer les bitmaps que cela crée, mais vous perdez bien sûr la flexibilité de travailler avec des chemins.
Je le démontrerai plus tard, mais pour l’instant, prenez simplement ma parole et laissez Shade Artwork inchecked! Cliquez sur OK pour revenir à la boîte de dialogue Options 3D et assurez-vous que l'option Surface est également définie sur Aucune ombrage..
Pour terminer le processus 3D (pour l'instant), positionnez votre balle à un angle approprié et cliquez sur OK. Gardez à l'esprit que nous l'animerons autour de son axe central, comme illustré ci-dessous..
Copiez et collez votre boule 3D à la place (Commande + C, Commande + F). Les deux objets seront visibles sous forme de chemins distincts si vous développez le calque.
La bille en double étant sélectionnée, reportez-vous à la palette Apparence (Fenêtre> Apparence). Double-cliquez sur l'effet 3D afin de l'éditer.
Une fois de retour dans la boîte de dialogue Options 3D, vous devrez effectuer une seule tâche, puis cliquer sur OK. Nous devons faire tourner la balle autour de 120 °. Cela fera tourner la balle au premier point où elle se présente exactement comme le point de départ; il ne sert à rien de tourner à 360 ° quand il semble identique à trois reprises au cours d'une révolution…
Cela nécessitera un peu de travail des yeux. Cliquez et faites glisser l'un des bords verts du cube de position pour faire pivoter la balle autour de l'axe central. Gardez un œil sur l’aperçu de votre balle et arrêtez de glisser lorsque vous voyez que la balle a suffisamment tourné. Le fil de fer de la balle correspond parfaitement à notre modèle; chaque segment coloré de notre balle est constitué de deux segments longitudinaux de la structure filaire. Cela devrait rendre assez facile de juger exactement où arrêter de traîner.
Une fois vos deux objets 3D terminés, sélectionnez Objet> Fusion> Options de fusion. Ici, vous allez spécifier les étapes d'animation entre les deux états de la balle. Choisissez Étapes spécifiées et entrez 18 (ceci est arbitraire, plus vous choisissez d'étapes, plus l'animation sera progressive).
Sélectionnez vos deux objets et accédez à Objet> Fusion> Créer. Le résultat sera totalement invisible: toutes vos étapes fusionnées se superposent…
Pour les animer en Flash, nous devons fractionner les étapes et les placer sur des calques distincts. Développez le calque contenant votre mélange et assurez-vous de l'avoir sélectionné (comme illustré ci-dessous). Ouvrez maintenant le menu de la palette Calques et choisissez Libérer en calques (séquence)..
Cela fait, sélectionnez toutes les couches résultantes et faites-les glisser hors de la première couche dans laquelle elles se trouvent. Nous avons besoin qu'elles soient totalement indépendantes. Ensuite, supprimez l'original "couche 1;" il est maintenant vide après tout. Il vous restera une série de couches, chacune contenant une boule 3D à des degrés de rotation progressifs. Le dernier et le premier sont exactement les mêmes (bien entendu, ce sont les deux états d'origine qui ont été mélangés), vous pouvez donc également supprimer l'une de ces couches..
Eh bien, c'est ça. Je viens d'expliquer quoi faire dans le titre de cette étape; Enregistrez et fermez votre document. C'est fini!
Depuis que Adobe a pris l'empire de Macromedia, travailler entre leurs applications est devenu de plus en plus facile. L'importation et l'exportation entre Illustrator et Flash sont possibles depuis un certain temps, bien que les résultats puissent parfois être un peu imprévisibles. L'exportation de calques Illustrator sous forme de séquences de films SWF ou sous forme de fichiers SWF individuels offre une assez bonne compatibilité entre programmes. Puis vint CS3. Depuis ce moment, nous avons été en mesure d'importer directement des fichiers d'intelligence artificielle et de gérer entièrement le processus depuis Flash..
Jetons un coup d'oeil aux options que nous avons et appliquons-les à ce tut. Si vous avez un fichier Flash de la partie 1 de cette tâche, ou si vous travaillez avec les fichiers source, ouvrez "source_1.fla;" notre balle animée originale. Sinon, ouvrez simplement un nouveau document dans Flash.
Allez à Flash> Préférences… et choisissez Importateur de fichiers AI. Les options sont toutes raisonnablement explicites. nous devons nous assurer que le contenu de notre fichier d'IA est importé sous forme de chemins (pas de bitmaps, bien que, comme je l'ai mentionné précédemment, cette option soit une option si les chemins sont trop complexes). Configurés comme ci-dessous, nos chemins importés seront modifiables, le contenu de chaque couche sera converti en clips individuels et tout élément situé en dehors de l'Artboard sera ignoré (nous n'avons que des objets dans l'Artboard, cela ne nous affecte donc pas vraiment. ).
OK, importons notre fichier source AI. Encore une fois, si vous travaillez sur un nouveau fichier flash, ignorez simplement mes références à la partie 1 de ce tutoriel..
Dans "source_1.fla" (ou votre propre fichier FLA complet de la partie 1), ouvrez la bibliothèque (Commande + L) et double-cliquez sur "mc_ball_base". C'était notre balle dans son état le plus fondamental; ce clip était ce que nous avons étalé et ensuite, à son tour, a rebondi. Tout ce que nous faisons pour ce film sera donc également filé et rebondi. Verrouillez la "couche 1" et créez-en une nouvelle appelée "balle importée".
Avec la première image clé du calque "boule importée" sélectionnée, sélectionnez Fichier> Importer> Importer dans la scène…
Sélectionnez le fichier AI de votre système et cliquez sur OK. Vous serez présenté avec le Importer * fichier * dans la bibliothèque dialogue, voici où vous finalisez les options d'importation concernant votre fichier AI et cela peut être fait au niveau couche par couche, objet par objet.
Tout d'abord, vous remarquerez que chaque couche d'Illustrator contient un objet Chemin. Chaque chemin comporte un symbole d'avertissement indiquant qu'il y a un problème. En effet, cliquer sur Rapport d'incompatibilité confirmera que ces objets ne sont pas compatibles avec Flash en raison de l'effet de révolution 3D..
Ce sont nos boules 3D rendues et Flash ne peut pas les éditer dans leur état actuel; nous aurions dû élargir les effets 3D pour qu'ils puissent être édités. Ce n'est pas un problème dans notre cas. Nous ne voulons pas les éditer, mais nous pouvons vouloir les redimensionner. Ignorer l'option de les importer en tant que bitmaps; ils vont importer très bien comme chemins évolutifs.
Tous les autres paramètres par défaut conviennent à nos besoins. assurez-vous simplement que les couches seront converties en images clés. Cliquez sur OK.
Une fois votre fichier AI importé, vous verrez une séquence d'images clés sur votre calque "balle importée". En déplaçant le curseur vers le haut et le bas de la chronologie, vous verrez comment ces images vous donneront votre balle tournante. Parfait!
Terminez maintenant l’effet en plaçant "Couche 1" au-dessus de "boule importée" et en supprimant tout le contenu de cette couche, à l’exception du trait. Cliquez ensuite sur l'image située au-dessus de la dernière image clé de votre séquence (dans mon cas, l'image 19) et cliquez sur F5 pour répartir les images sur toute la longueur de l'animation. Cela aura placé le coup original sur votre balle.
Commande + Entrée pour prévisualiser votre animation. Dans mon cas, j'ai également choisi de ralentir l'effet de rotation d'origine en allongeant l'interpolation de mouvement du "film mc_ball". Vous verrez la balle tourner à 360 ° dans le sens des aiguilles d'une montre et à 360 ° autour de l'axe central; un effet impossible (sans concentration massive et quelques mois de dessin) en utilisant uniquement Flash.
Êtes-vous curieux de savoir à quoi cela aurait ressemblé si nous avions opté pour le ballon ombragé? Répétez les étapes précédentes après avoir choisi d'ombrer votre balle 3D dans Illustrator:
Vous remarquerez que j'ai choisi de ne pas importer les images clés dans le mouvement de rotation. la balle ne tourne plus dans le sens des aiguilles d'une montre. Si j'avais fait cela, l'éclairage serait également en train de tourner (et cela gâcherait l'effet). C'est un très bon résultat, vous ne pensez pas? Encore une fois cependant, le problème avec les bitmaps est qu’elles ne sont pas mises à l’échelle ou en rotation dans Flash. Comme vous l'avez peut-être vu, le point auquel la balle s'aplatit au moment où il touche le sol est un peu pixelisé - les vecteurs à problèmes ne rencontrent pas.
Ici se termine la deuxième partie de ce tut en 2 parties! Nous espérons que ces dernières étapes vous ont permis de mieux comprendre: la séparation des fondus Illustrator en couches, l'importation de fichiers AI dans Flash, ainsi que des fonctionnalités et des limites relatives aux vecteurs et aux images bitmap. Comme toujours, j'espère que vous avez apprécié celui-ci!
Abonnez-vous au flux RSS VECTORTUTS pour rester informé des derniers tutoriels et articles sur les vecteurs.
Accentsconagua