Introduction à l'animation avec Hype Record

• Mai 9, 2024

Hype a une très belle fonctionnalité pour l'animateur débutant, appelée fonctionnalité d'enregistrement. Pour utiliser cette fonction, cliquez simplement sur le gros bouton rouge d'enregistrement. C’est ce que nous allons faire dans ce tutoriel.

Comme nous l'avons appris, pour créer une animation, nous n'avons besoin que d'une image de début et de fin. Par exemple, pour diminuer la taille d'un rectangle pendant qu'il se déplace sur l'écran, nous dirions à Hype sur quelle image démarrer l'animation et sur quelle image s'arrêter. Parce que nous travaillons avec une animation basée sur la chronologie, nous pouvons parler à Hype en utilisant des images clés sur la chronologie. Et, vous l'aurez deviné, nous placerons ces images clés sur ces deux images de démarrage et d'arrêt spéciales.

Lorsque Hype voit une image clé, il prend note des propriétés d'un objet, tel qu'un rectangle, à l'écran. Quelques-unes des propriétés que Hype prendra en compte sont l'opacité, l'origine gauche, l'origine droite, la hauteur de la taille et la largeur de la taille. Ces propriétés correspondent aux propriétés de style CSS dans un document HTML5. Hype stocke les valeurs de ces propriétés ainsi que la position ou l'image correspondante sur la timeline.

Notre première étape dans la création de cet exemple d'animation consiste à indiquer à Hype quelle taille créer le rectangle et où le placer à l'écran au début et à la fin de l'animation. Nous pouvons faire tout cela avec le bouton Enregistrer.

1. Cliquez sur Fichier - Nouveau pour démarrer un nouveau document dans Hype, en utilisant les paramètres par défaut.
   
   Ajoutons le rectangle à l'écran.
   
   
2. Cliquez sur l'icône Éléments dans la barre d'outils et choisissez Rectangle. Hype placera un nouveau rectangle au centre de l'écran.
   
   Posons le rectangle où nous voulons qu'il soit pour le début de l'animation. Nous conserverons la taille par défaut, il nous suffit donc de déplacer le rectangle.
   
   
3. Faites glisser le rectangle vers le bord gauche de l'écran.
   
   
4. Jetez un œil à l'inspecteur des mesures. Le rectangle est maintenant à 7 pixels du bord gauche et 149 pixels du bord supérieur. De plus, il mesure 102 x 102 pixels.
   
   

Maintenant, nous voulons que le rectangle se déplace vers le bord droit et réduise de 50%. De plus, nous voulons que cela se produise sur seulement 30 images. Donnons ces informations à Hype via la fonction d'enregistrement du prochain didacticiel.

Continuer

Instructions Vidéo: Creating Videos with Tumult Hype - Animation and Interactivity (Mai 2024).