Adaptation et Animation sur HTML5 Canvas

Configuration et organisation du scénario, création des calques
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Ateliers créatifs Adobe Animate CC
Revoir le teaser Je m'abonne
Transcription

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont d'apprendre à ajuster la taille de la scène à un élément, à positionner et animer divers éléments graphiques, et à utiliser des scripts pour contrôler les animations.

Apprenez à adapter la taille de votre scène à un élément contenu, positionner et animer des éléments comme un avion et des villes sur une carte.

Dans cette leçon, vous allez découvrir une méthode simple pour ajuster la taille de votre scène à un élément spécifique dans une animation HTML5 Canvas. Nous commencerons par la manipulation des panneaux de propriétés pour adapter la taille de la scène. Ensuite, nous apprendrons comment positionner des éléments animés, tels qu'un avion qui se déplace d'une ville à une autre. Vous verrez également comment ajouter des puces pour les villes, et comment vectoriser du texte pour éviter des problèmes de polices sur les différentes machines des utilisateurs. Enfin, nous créerons des interpolations et ajouterons un calque de script pour contrôler l'animation avec des actions comme un stop à la fin.

Voir plus
Questions réponses
Pourquoi est-il important de vectoriser le texte dans une animation HTML5 Canvas?
La vectorisation du texte garantit que la police s'affiche correctement même si l'utilisateur n'a pas la police installée sur sa machine.
Comment ajuster la taille de la scène à un élément contenu dans HTML5 Canvas?
Vous devez aller dans les panneaux de propriétés, sélectionner les paramètres avancés et cliquer sur 'ajusté au contenu'.
Quelle est l'astuce pour éviter les problèmes de police dans une animation HTML5 Canvas?
La meilleure solution est de vectoriser le texte afin qu'il s'affiche correctement sur toutes les machines.
Je vais créer mes calques cartes. Alors le souci que j'ai quand je me mets en mode aperçu, je vois que la carte est plus grande que ma scène. Bon c'est pas tellement gênant mais juste je vais vous montrer une petite manipulation très simple qui permet d'adapter la taille de la scène à un élément qu'elle contient. Vous allez dans les panneaux dans le panneau propriétés paramètres avancés ajusté au contenu et vous voyez que maintenant la scène s'est adaptée à la taille de ma carte. Je vais positionner mes éléments à animer donc l'avion que je vais placer ici qui va partir de la ville de Rio et qui va aller jusqu'à la ville de Pékin qui se trouve à peu près ici. Je vais rajouter un calque pour les puces et les villes. Je vais masquer mon avion temporairement et je vais rajouter ici donc une petite puce, désactiver le scénario, l'accrochage à la grille, je vais réduire un peu ma puce un petit peu grosse, voilà et je vais aller positionner la puce pour la ville de Pékin ici. Je rajoute, je prends l'outil texte pour rajouter du texte donc Rio, donc là vous pouvez prendre une police de caractère bâton de votre choix. Alors j'ai un souci avec ça, voilà je vais rester comme ça pour l'instant. Alors au niveau du texte on en avait déjà parlé, étant donné que c'est une animation chez HTML5 Canva, à moins que l'internaute ait la police impact installée sur sa machine, le mieux par sécurité est de vectoriser donc contrôle B pour séparer le texte et je vais créer un movie clip pour cet élément Pékin parce que je vais le faire apparaître en fondu à la fin de mon animation. Pour la puce, pas besoin de clip, elle sera présente dès le départ, Rio c'est pareil sauf que je vais quand même le séparer en vecteur de manière à ce qu'il n'ait pas ce problème de police sur l'ordinateur de l'internaute. Voilà donc là je pense qu'on est bon, on a tous les éléments graphiques, je peux afficher à nouveau mon avion, je vais allonger mon scénario pour créer mon interpolation et surtout ne pas oublier de rajouter un calque de script pour pouvoir mettre un stop sur la dernière image. Voilà, je ferme mon calque, mon panneau action, je n'en aurai plus besoin pour cette animation.

Programme détaillé de la formation

Nos dernières formations Animate CC