En marche avec Hype lynda.com

• Mai 16, 2024

Dans cette formation vidéo de lynda.com intitulée En marche avec Hype, l'instructeur Jake Stroh, couvre les bases de Hype. Lorsque vous aurez terminé ce cours d'une heure et 37 minutes, vous aurez les bases pour créer une animation simple dans Hype.

Stroh commence par une présentation rapide de l'interface utilisateur de Hype, de la barre d'outils à la timeline. Il montre ensuite comment créer votre première animation, qui consiste à déplacer un rectangle sur l'écran avec un effet de fondu, à l'aide de la fonction d'enregistrement. Il vous guide tout au long du processus de définition des valeurs de propriété de position et d'opacité pour les images clés de début et de fin.

En s'appuyant sur cet exemple simple, Stroh explique ensuite quels types d'images peuvent être animés dans Hype et comment les importer via le menu Éléments. L'image échantillon importée est un avion et il montre comment créer un chemin d'animation pour que l'avion vole à travers l'écran et comment le convertir en chemin de mouvement. Il termine le deuxième exemple en ajoutant du texte à la scène, en stylisant le texte et en créant des images clés pour un effet de fondu.

Dans la section suivante, Stroh entame une discussion approfondie sur la façon dont les animations html5 et css3 sont créées par l'animateur à l'aide de la chronologie, des images clés et de la fonction d'enregistrement. Il couvre plusieurs exemples d'application d'images clés aux propriétés d'élément. Il explique également comment utiliser certains des contrôles de la timeline pour effectuer des ajustements précis de votre animation.

Le sujet suivant est l'accélération et comment utiliser six types d'accélération pour ajouter de la physique réelle à votre animation. L'exemple qu'il discute est de savoir comment réaliser une animation de balle rebondissante en combinant plusieurs effets d'accélération. Dans les exemples suivants, Stroh montre comment créer une animation de transformation et comment utiliser l'outil Capo pour affiner l'animation d'une séquence d'éléments sur la timeline. Il explique également comment réutiliser des animations dans la même scène et comment contourner la limitation selon laquelle Hype n'a pas d'outil de point d'ancrage pour l'animation de rotation. Enfin, il discute de l'utilisation du masquage, du recadrage et des filtres CSS dans vos animations.

La section suivante présente l'interactivité. Stroh commence par une discussion sur les types de boutons intégrés et comment ajouter des actions à leurs étapes. Il explique ensuite comment ajouter des actions aux images pour qu'elles fonctionnent comme des boutons à l'écran. Il passe rapidement au contrôle des animations avec plusieurs chronologies et comment ajouter des boutons à la chronologie principale pour contrôler des chronologies supplémentaires. Il montre également comment créer une chronologie en boucle.

Pour créer des animations plus complexes, Stroh explique comment travailler avec des chronologies relatives et l'enchaînement d'actions. Dans les exemples suivants, il montre comment travailler avec des fichiers audio et contrôler la lecture avec des actions de bouton. Il montre également les différences entre l'utilisation de plusieurs chronologies et uniquement la chronologie principale pour contrôler un diaporama de galerie d'images interactives.

Ensuite, l'exemple de projet est une galerie de produits. Stroh discute des avantages et des inconvénients de deux options, plusieurs chronologies ou scènes, pour construire cela dans Hype.

Vous êtes maintenant prêt à mettre votre projet sur le Web. Stroh montre comment exporter et intégrer votre projet Hype et les différentes options pour un site Web autonome ou ajouter le projet dans un site Web existant.

Ce n'est pas un cours d'apprentissage approfondi pour Hype. Cependant, ce cours vous donnera une idée des types d'animation qui peuvent être créés à l'aide du logiciel Hype. Si vous connaissez les clips vidéo d'Adobe^R Éclat^R, vous apprécierez la discussion de Stroh sur les délais d'imbrication, les délais relatifs et l'enchaînement des actions.

//www.lynda.com/Hype-tutorials/Up-Running-Hype/135360-2.html

Divulgation: je n'ai pas été compensé financièrement pour cet article. Les opinions sont entièrement les miennes en fonction de mon expérience.

Instructions Vidéo: Hype tutorial: Working with relative timelines | lynda.com (Mai 2024).