Share
Hype 3, de Tumult, est une application OS X permettant de créer des animations HTML5. Si vous avez déjà utilisé les outils de chronologie emblématiques de Flash, l'interface de Hype 3 vous semblera très familière. Dans ce tutoriel, nous allons rapidement nous familiariser avec l'application, puis créer une animation de base de Material Design à l'aide des outils disponibles..
Au moment de la rédaction, Hype 3 coûte 49,99 $ pour l'application standard ou, si vous avez besoin de fonctionnalités plus avancées, Hype 3 Professional est disponible à 99,99 $. Vous pouvez télécharger une version d’essai de 14 jours afin de suivre.
Et, désolé, ce n'est que Mac.
En tant qu'utilisateur Mac, vous serez parfaitement à l'aise avec la présentation de l'application. Nous utilisons l'édition standard de Hype 3 (la version professionnelle a une interface utilisateur plus sombre et plus complète), nous allons donc parcourir les parties principales:
L'interface de Hype 3Lorsque vous ouvrez l'application, un document vierge vous est attribué par défaut. Commencez par déterminer la taille de votre toile.
L'onglet "Scène"Sous le Scène onglet, vous verrez quelques options pour définir la scène en cours. J'ai opté pour donner les dimensions de la toile de 600x400px. Ceci fait, cliquez sur le sélecteur de couleur sous Contexte et changer cela en # 424242.
Remarque: nous ne travaillerons qu'avec une scène et une timeline dans ce didacticiel, mais il est possible d'avoir plusieurs scènes, avec de nombreuses timelines, et de basculer entre elles.
Nous allons animer l’un des boutons d’action flottants de Google Material Design, alors dirigez-vous vers le Éléments icône du menu et sélectionnez le Ellipse:
Utilisez le curseur de votre souris pour dessiner sur la scène décalage contraindra les proportions à un cercle (un peu comme toute application graphique). Selon les directives de Material Design, le gros bouton d’action flottante doit mesurer 56 pixels de large, avec une icône de 24 pixels. Faites le vôtre proportionnel à ces nombres:
Pointe: aller à Affichage> Afficher la règle pour faire apparaître les règles à côté de votre scène. Faites glisser des guides, des règles sur la scène, pour vous aider à positionner des objets.
Avec l'ellipse sélectionnée, sous le Élément Dans l'onglet, vous pouvez modifier la couleur d'arrière-plan (j'ai utilisé # 00E676 de la palette de couleurs Material Design) et supprimer sa bordure..
Aussi sous la Élément onglet, vous verrez que vous pouvez ajouter une ombre au cercle. J'ai donné à la nôtre un flou de 5 pixels et je l'ai déplacé de 5 pixels sur l'axe des ordonnées. Il a la couleur # 2E2E2E, bien que vous ne puissiez sélectionner aucun mode de fusion. Maintenant, ça a l'air très “Material Design”, je pense que vous serez d'accord:
Pour ajouter un symbole «plus» au bouton, nous avons quelques options à nous proposer. Nous pourrions utiliser les outils de dessin pour le créer nous-mêmes, mais les outils sont limités (surtout si vous êtes habitué à la liberté d’Adobe Illustrator ou de Sketch). Au lieu de cela, nous allons récupérer l'icône SVG de Google.
Sélectionnez l'icône "ajouter", choisissez la variante blanche, puis téléchargez-la.
Vous pouvez maintenant faire glisser le fichier SVG directement dans votre document. À ce stade, il sera ajouté en tant que calque d'image..
Avec l’icône SVG sélectionnée, sous le Métrique onglet, assurez-vous que c'est la taille correcte pour votre animation:
Notre icône SVG n'a pas été importée en tant que vecteur éditable. Au lieu de cela, si vous regardez le Éléments onglet, vous verrez que c'est une ressource distincte et est appliquée comme une image d'arrière-plan. Cela signifie que nous ne pouvons pas changer de couleur ou quoi que ce soit d'autre (honte).
En outre, cette approche peut causer des problèmes dans certains navigateurs, bien que Hype 3 vous en avertisse:
Comme avec de nombreuses applications graphiques, vous pouvez maintenant sélectionner les deux couches que nous avons ajoutées à notre chronologie, puis aller à Organiser> Groupe pour les organiser un peu mieux. Double-cliquez sur le nom du groupe de couches pour le renommer:
Hype 3 fournit plusieurs méthodes pour animer des objets et leurs propriétés. Nous allons commencer par le plus simple, alors allez-y et frappez le gros, rouge Record bouton:
Maintenant, faites glisser le tête de lecture sur la timeline, en s'arrêtant à la 24ème image.
Remarque: vous verrez les secondes marquées le long de la timeline, chacune comprenant 30 images.
La tête de lecture étant maintenant sur l’image 24, sélectionnez l’icône «Ajouter», allez à la Métrique onglet dans la barre latérale droite, puis trouver le Rotation section et modifier la Z valeur à 45 °. Cela fera pivoter l'icône, de sorte qu'elle ressemble maintenant à une croix (×).
Vous pouvez maintenant cliquer sur le Record bouton à nouveau, pour terminer le processus.
Hype 3 aura automatiquement ajouté une image clé de propriété au début du scénario (il s'agit de l'état de début) et une à la fin de l'animation (l'état de fin). Dans ce cas, nous avons seulement modifié le Angle de rotation (Z) propriété, de sorte que c'est là que les images clés apparaissent.
Si vous appuyez sur le bouton de lecture ou faites glisser la tête de lecture le long de la timeline, l’icône s’animera en douceur entre les deux états de propriété..
Pour faciliter la visualisation de ce qui se passe sur la timeline, augmentez la valeur d'échelle de la timeline à l'aide du curseur situé dans le coin supérieur droit:
Avec notre animation de propriété sélectionnée (cliquez dessus), nous pouvons modifier le type d'accélération utilisé dans l'animation. Par défaut ce sera facilité d'entrée, ce qui signifie que l'animation commencera lentement, accélérera, puis ralentira à nouveau vers la fin.
Quoi d'autre allons-nous animer? Faisons en sorte que notre bouton fasse quelque chose - nous révélerons une carte lorsque le bouton semble avoir été cliqué.
Utilisez le Éléments menu pour ajouter un Rectangle à la scène. Nommez le calque «Carte». Donnez-lui une couleur d'arrière-plan (# 757575) et placez le calque sous le groupe de boutons. Positionnez-le en bas de la scène et réduisez son opacité à 0 (nous allons animer quelques propriétés cette fois).
Maintenant, au lieu de frapper Record, Cette fois, nous allons faire les choses manuellement. Avec la tête de lecture au début de l’animation et le calque Carte sélectionné, cliquez sur Ajouter une image clé sur le Opacité couche de propriété. Puis déplacez la tête de lecture à la fin de l’animation et ajoutez un autre image clé.
Alors que sur la dernière image clé, dans le Élément onglet, donnez au rectangle une opacité de 100%. Vous allez maintenant avoir une animation soignée entre les deux états.
Après avoir animé l'opacité du rectangle, animez maintenant sa position (nous voulons qu'il glisse vers le haut). Ceci est réalisé avec la propriété Origin (Top), alors répétez le processus que nous venons de faire, en ajoutant une image clé au début de l'animation, une à la fin, puis en modifiant la position du rectangle sur l'image clé finale..
Vous devriez voir un chemin tracé, indiquant le mouvement pris par le rectangle:
Pour le moment, tout se passe en même temps, dès que la scène commence, mais on peut changer cela. Faisons en sorte qu'il y ait un court délai, puis l'icône tourne rapidement, puis la carte se glisse progressivement.
Faites glisser les barres d’animation sur le plan de montage supérieur, afin qu’elles chronomètrent différemment les différents éléments:
Remarque: n'oubliez pas que vous pouvez modifier l'assouplissement pour donner des effets différents. Consultez les directives de Google sur Authentic Motion pour plus d'inspiration..
Une fois votre animation terminée, rendez-vous sur Fichier> Exporter au format HTML5 ou Fichier> Exporter en tant que film. Les options disponibles s’expliquent assez bien; choisissez de générer un répertoire avec HTML avec les ressources JavaScript et SVG, les images GIF animées, MP4, etc..
N'oubliez pas que lors de l'exportation en tant que film, toute interaction que vous avez ajoutée (ce que nous n'avons pas fait dans ce cas) pourrait ruiner la séquence..
Temps pour une mission! En suivant ce tutoriel, vous êtes armé des compétences nécessaires pour mener cette animation beaucoup plus loin. Téléchargez le code source et vous trouverez les fichiers de démarrage nécessaires pour vous amener à ce stade, puis:
Les chronologies sont vraiment utiles pour visualiser l’animation au fur et à mesure que vous construisez. Au-delà de ce que nous avons fait ici, Hype 3 permet également tout type d’interaction, d’événements et de contrôle du scénario (mais c’est un tout autre tutoriel). Amusez-vous à jouer avec ces outils, construisez-vous et montrez-nous ce que vous proposez dans les commentaires.!
Accentsconagua