Share
Pour les concepteurs, l’attrait de Flash réside en grande partie dans sa capacité à permettre aux utilisateurs d’ajouter du mouvement et de l’interactivité à presque tout. Pour la plupart des nouveaux utilisateurs, le vrai Wow! le facteur intervient lorsqu’ils découvrent comment donner vie aux choses en utilisant le scénario Flash et ActionScript.
Aujourd'hui, nous verrons comment tirer le meilleur parti des outils proposés par Flash pour ajouter de l'animation à nos symboles. Cela peut être un sujet assez dense à couvrir compte tenu de l’importance croissante de l’application en tant que puissance multimédia depuis ses débuts, mais je vais essayer de garder les choses concises et faciles d’approche. Pour une couverture plus détaillée, n'hésitez pas à consulter d'autres tutoriels sur Activetuts + et je suis sûr que vous trouverez ce que vous recherchez..
Bien que cet article ait été écrit pour Flash Professional CS5, la plupart des astuces devraient fonctionner correctement dans les versions antérieures. Je vais essayer de souligner chaque fois que quelque chose est très spécifique à la dernière version de Flash.
Avant d'entrer dans les détails, prenons quelques minutes pour relire le jargon auquel nous allons faire référence ici. Étant donné que la plupart des débutants en Flash n’ont que peu ou pas d’exposition au concept d’images en mouvement, certains de ces concepts peuvent être un peu intimidants. Il est préférable de les couvrir avant de plonger dans les aspects pratiques de l'animation et de l'interactivité en Flash..
Le FPS (ou frame rate), très simplement, fait référence au nombre d'images rendues à la seconde. Toute image en mouvement - animation ou vidéo - est une série d’images fixes, projetées l’une après l’autre à une vitesse très élevée, créant l’illusion d’un mouvement. Si vous avez vu une bobine de film à partir du moment où ils utilisaient un film pour filmer des vidéos, vous verrez qu'il s'agit simplement d'une bande avec beaucoup d'images fixes. La vitesse à laquelle le projecteur de film les traverse est ce qu'on appelle FPS.
Le FPS par défaut dans les versions précédentes de Flash était de 12, qui a maintenant été augmenté à 24 au cours des deux dernières versions. Cela est peut-être dû au fait que Flash est passé d'un simple outil d'animation vectoriel au mode préféré de lecture de vidéos sur le Web. Étant donné que les vidéos doivent être lues à un minimum de 24 ips pour fonctionner sans accroc, le conteneur Flash doit également être en phase de rattrapage. En outre, le lecteur Flash s’est considérablement amélioré à présent et peut générer des volumes de données beaucoup plus importants pour pouvoir jouer à des vitesses plus élevées sans subir de perte de performances..
Prise directement à partir des livres d’animation cel, l’interpolation est la méthode utilisée pour créer des images intermédiaires entre deux images clés. Par exemple, si je devais animer la main d'un personnage en partant de sa position habituelle pour indiquer quelque chose, je dessinerais les premières et dernières positions, puis les images entre les deux pour simuler le mouvement. Le nombre d'images compris entre les deux images clés est défini par le taux de trame de l'animation et le temps nécessaire à l'achèvement du mouvement. Les mouvements lents signifient plus d'interpolation et inversement.
Flash nous facilite la tâche en dessinant les images interpolées, contrairement à ce que vous feriez dans une animation traditionnelle dessinée à la main. Depuis CS4, il existe trois manières très différentes d’interpénétrer - l’interpolation classique et l’interpolation de mouvement. Comprenons chacun un peu:
Interpolation de forme: Le type d'interpolation le plus élémentaire, même si vous ne l'utiliserez probablement pas trop. Vous commencez avec une forme et vous la transformez avec le temps. À moins que les deux formes ne soient pas complexes et ressemblent beaucoup l'une à l'autre, vous aurez probablement besoin de beaucoup de pratique pour que cela fonctionne. Vous pouvez ajouter des repères de forme pour forcer certains points d'une forme à se comporter pendant la transformation..
Tween classique: Jusqu'à la version CS3, il s'agissait de la principale méthode d'interpolation en Flash, une méthode aussi appréciée de tous que haïe. En gros, vous prenez un symbole et modifiez ses propriétés entre les images clés - telles que la taille, la position, les effets de couleur, etc. Étant donné que la méthode dépend de deux états distincts - un sur chaque image clé - la modification d'un symbole animé peut s'avérer une tâche fastidieuse. Aussi simple que de déplacer le symbole, vous devez le sélectionner sur chaque image clé et la déplacer exactement de la même quantité..
Interpolation de mouvement: De loin la plus grande mise à niveau des capacités d'animation de Flash, l'interpolation de mouvement permet à l'éditeur de mouvements très apprécié d'After Effects d'accéder à Flash. Le changement le plus important entre l'ancienne et la nouvelle méthode est que l'interpolation de mouvement est désormais basée sur les objets plutôt que sur la timeline, comme dans l'ancienne méthode. Vous appliquez des interpolations aux symboles, avec un contrôle précis de pratiquement tous les aspects physiques de l'objet via le panneau de l'éditeur de mouvement. Bien sûr, vous appliquez toujours un mouvement sur la timeline, mais il est maintenant possible de sélectionner un symbole, de le déplacer et de faire suivre son animation..
Nous savons que lorsqu'une balle tombe dans le monde réel, sa vitesse n'est pas toujours la même. Il prend de la vitesse à l'approche du sol, puis rebondit approximativement à la même vitesse et ralentit lorsqu'il atteint le sommet où il se dirige vers le sol. Lorsque vous animez des objets dans Flash, ils se transforment à un rythme uniforme par défaut. Si vous vous demandez pourquoi votre texte animé entrant et sortant de la scène semble plat, c’est la raison. Avec l'accélération, vous pouvez dire à Flash d'accélérer ou de décélérer le mouvement sans avoir à ajuster la position manuellement à chaque image..
L'un des plus gros problèmes liés à l'ancienne interpolation de mouvement dans Flash - quelque chose que je n'avais pas compris avant d'avoir vu le nouveau - était que l'animation était principalement basée sur une chronologie. Vous avez créé une image clé sur un calque, y avez placé un symbole, ajouté une autre image clé à quelques images de distance et modifié le symbole. Essentiellement, vous avez affaire à deux occurrences distinctes d’un symbole. Le déplacement d'une personne ne diffère pas vraiment de l'instance de l'image clé suivante. Bien sûr, nous avons tous vécu des moments difficiles en essayant de repositionner des éléments après les avoir animés, mais c'est comme ça que Flash jouait ses cartes.
Puis, avec CS4, l'éditeur de mouvement est arrivé et les choses ont changé pour toujours. Malheureusement, l'éditeur de mouvement n'est pas exactement la partie la mieux comprise de Flash, même après l'incrémentation d'une version et demie. Permettez-moi de prendre quelques instants pour ensuite discuter de quelques détails intéressants sur la façon dont cette chose fonctionne et comment vous pouvez la faire fonctionner pour vous..
Vous pouvez maintenant éditer vos symboles de deux manières différentes pour lancer une animation: depuis l'éditeur de mouvement ou directement sur la scène, comme à l'ancienne. Chaque paramètre physique du symbole sélectionné (coordonnées x & y, échelle, effets de couleur, filtres, etc.) est maintenant répertorié sous forme de ligne dans l'éditeur de mouvement. Déplacez-vous simplement vers un point de la chronologie et modifiez le paramètre. Une image clé est générée pour ce paramètre. Si vous aimez la manière traditionnelle et visuelle d’animer des choses, il vous suffit de vous rendre dans un cadre et d’éditer le symbole sur la scène..
Il est important de comprendre que les images clés sont maintenant ajoutées par paramètre. Par conséquent, si vous ne déplaciez l'instance que sur scène, il n'y aura qu'une image clé pour les coordonnées X et / ou Y dans l'éditeur de mouvement. Cela fournit une gamme extrêmement vaste de contrôles sur l'animation, ce qui était impossible dans les anciennes versions de Flash..
Remarque: Vous n'avez plus besoin de créer explicitement une image clé. Il suffit de passer à une image, de modifier quelque chose à propos de l'instance et une image clé est automatiquement générée pour ce paramètre uniquement. Pour beaucoup de gens, il s’agit d’un changement culturel; une chose à laquelle ils trouvent très difficile de s’habituer. Bien que vous puissiez toujours créer manuellement une image clé, j’ai trouvé qu’elle était inutile pour la plupart..
Au lieu du champ de saisie unique et du bouton "Modifier", vous obtenez maintenant une ligne entière dédiée à la simplification dans le nouvel éditeur de mouvement. Une ligne en pointillés couvrant toutes les images d'une interpolation permet de voir facilement comment fonctionne l'accélération. Les préréglages inclus sont un bon moyen de commencer. Une ligne courbe signifie que la vitesse de l'animation augmente ou diminue progressivement. Une ligne droite signifie un rythme constant et uniforme. Vous pouvez créer autant de raccourcis que vous le souhaitez et en attribuer des différents à chaque paramètre. N'oubliez pas que l'assouplissement doit être explicitement affecté à chaque ensemble de paramètres. Si vous ne le faites pas, votre animation continuera à être le même mouvement à plat.
Une fois que vous avez compris le fonctionnement de l'assouplissement avec les préréglages, il est temps de vous aventurer et d'essayer l'option 'Personnalisé'. Ce que vous obtenez ici, c'est une ligne continue rouge au lieu de celle en pointillé, ce qui indique que vous pouvez l'éditer. Accédez à une image et créez une image clé dans la ligne d'accélération «Personnalisé» pour ajouter un nœud de Bézier dans le scénario. Vous pouvez ensuite utiliser les poignées de noeud pour modifier le curver à votre guise..
Conseil rapide: Si vous n'êtes pas trop sûr du fonctionnement de l’assouplissement mais que vous souhaitez prendre instantanément vos animations de plusieurs crans, utilisez cette règle selon laquelle je vais généralement avec moi-même: les éléments qui apparaissent (tout ce qui entre dans le cadre ou sur scène) fonctionnent mieux avec un effet positif. «Atténuer à« 50 »simple (moyen), tandis que les éléments disparaissants fonctionnent mieux avec le même atténuation à« -50 ». Cela rend l’animation générale plus agréable et cohérente. En règle générale, j'atténue pratiquement tout ce qui bouge dans mes animations.
Lorsque vous déplacez un objet avec le temps en utilisant l'interpolation de mouvement, une ligne apparaît à partir du point d'alignement du symbole, indiquant les points de début et de fin du mouvement, ainsi que chacune des images. Une caractéristique apparemment cachée ici est le fait que ce chemin est comme n'importe quelle autre ligne de Flash. Vous pouvez utiliser les outils de sélection et de plume pour le modifier comme vous le feriez pour tout autre chemin. Cliquez et faites glisser n'importe où sauf les extrémités du chemin (tant qu'il n'est pas sélectionné) pour le convertir en courbe. Vous pouvez ensuite utiliser l'outil de sous-sélection pour modifier les poignées de Bézier sur les nœuds pour un contrôle plus précis. Chaque fois que vous ajoutez une image clé dans la trajectoire, une nouvelle courbe de Bézier est ajoutée à la trajectoire, que vous pouvez ensuite modifier à votre guise..
Si la 3D en Flash est ce que vous avez toujours rêvé, mais que vous n'avez pas eu le courage de jouer avec les frameworks 3D tels que la papervision, voici un moyen rapide et sale de simuler des mouvements 3D en Flash. Vous pouvez utiliser le nouvel outil de rotation 3D avec l'éditeur de mouvement pour faire pivoter les objets en 3 dimensions pour ajouter du jazz..
La rotation 3D ne figure pas dans l'éditeur de mouvement, sauf si vous l'utilisez réellement sur un objet. Pour ce faire, sélectionnez l'outil de rotation 3D, sélectionnez votre objet et cliquez et faites glisser l'une des trois lignes colorées qui apparaissent. Chacune des trois lignes représente un axe - le vert correspond à Y, le rouge à X et le bleu à Z. X et Y sont généralement ceux qui donneront à votre objet l'aspect d'une rotation dans un espace 3D. Positionnez-le à la fin de l'interpolation de mouvement et faites-le pivoter à nouveau. Ajoutez une touche 'Bounce' pour des épices supplémentaires.
Mon processus d'animation typique consiste à créer un composite des images clés dans une animation, puis à ajouter un mouvement à chaque objet, si nécessaire. Pour tout ce qui doit glisser de l'extérieur de la scène sur la gauche, cela signifie que je dois déplacer l'objet sur la première image, réduire l'alpha, aller à la dernière image, le ramener à l'endroit souhaité et augmenter l'alpha. à 100%. C’est comme cela que cela a toujours été, donc je ne me suis jamais autant préoccupé de cela jusqu’au beau matin où j’ai découvert les «images clés inversées». L'idée est simple, mais stupide, mais vaut la peine d'innombrables heures si vous animez des scènes dans et hors de la scène tous les jours.
Voici comment ça fonctionne. Une fois votre composite en place, animez simplement l’opposé de l’effet souhaité. Commencez par la position finale de l'objet et animez-le en sortant vers la gauche. Incluez tout ce dont vous avez besoin pour rendre l'animation parfaite - alpha, flou, etc. Ensuite, il vous suffit de cliquer avec le bouton droit de la souris sur l'interpolation, de cliquer sur "inverser les images clés" et le tour est joué! Vous avez votre diapositive à partir de l’animation de gauche exactement comme vous le souhaitez.
L’économie de temps la plus importante pour moi depuis que j’ai commencé à utiliser l’éditeur de mouvement dans Flash a été la possibilité d’appliquer un mouvement à un objet, de le copier et de le coller pour tous les autres objets similaires. Cela a plus de sens quand vous avez plusieurs objets qui entrent ou sortent de la même manière - une liste à puces, par exemple. Une fois que vous avez appliqué une interpolation à l'un des éléments de la liste (en supposant qu'il s'agisse d'un clip vidéo unique sur son propre calque, bien sûr), cliquez avec le bouton droit de la souris sur l'interpolation et sélectionnez "Copier le mouvement". Ensuite, sélectionnez simplement les premières images clés de tous les autres éléments de la liste, cliquez avec le bouton droit de la souris et sélectionnez "Coller le mouvement". Vous pouvez ensuite les modifier individuellement si nécessaire.
Voici quelques astuces rapides pour gagner du temps, de l'énergie et quelques images lors de l'utilisation d'animation dans Flash:
Cela nous amène à la fin d'un autre chapitre des conseils éclair et meilleures pratiques pour les concepteurs. Si vous avez utilisé Flash il y a quelques années et que vous y avez récemment repensé, vous apprécierez sans doute l'énorme bond que cela a pris au fil des années en tant qu'outil d'animation de niveau professionnel. J'espère que ces conseils vous aideront à comprendre certains des outils et fonctionnalités les plus récents, étonnamment rarement documentés. Vous avez plus de trucs et astuces à partager? Écoutons-les dans les commentaires.
Accentsconagua