Tumulte Hype

Qu'est-ce que Hype?

Hype est un puissant outil d'animation HTML5 pour Mac. Il permet aux concepteurs de créer des animations interactives et accrocheuses, qui peuvent être exportées et intégrées dans des pages Web.

Blocs est optimisé pour fonctionner en tandem avec Hype, offrant un flux de travail de conception rationalisé. Les deux coutumes gratuites suivantes Brics doit être installé dans Blocs avant de continuer.

Aperçu de Hype Bric

Hype Intégrer Bric

Important!

Veuillez noter que ce flux de travail nécessite Blocs 3.4.3 minimum et Hype 4.0.3 minimum.

Aperçu du projet Hype en temps réel

Blocs prend en charge la prévisualisation en temps réel d'un projet Hype actuellement ouvert, permettant aux concepteurs de créer des animations HTML5 dans Hype et de voir à quoi ils ressemblent dans un Blocs projet sans avoir besoin de les compiler et de les exporter, cela offre un flux de travail de conception Web d'animation incroyablement rapide, efficace et puissant.

Utilisez les étapes suivantes pour prévisualiser la séquence d'animation Hype actuellement ouverte dans Blocs.

1.Ajoutez le Hype Preview Bric à votre page en utilisant le Barre Bric.

2. Dans Hype, appuyez sur le bouton d'aperçu et sélectionnez Blocs parmi les options disponibles. L'aperçu Hype Bric dans Blocs va maintenant afficher la séquence d'animation Hype actuelle.

Aperçu des modes de sortie

L'aperçu Hype Bric, dispose de deux modes de sortie, avant-première et le travail.

Mode de prévisualisation

Le mode Aperçu affichera la séquence d'animation actuelle telle qu'elle apparaîtrait une fois exportée et intégrée dans une page. Ce mode est activé par défaut.

Mode direct

Le mode Live affiche un miroir en temps réel de l'étape de conception réelle de Hype à l'intérieur Blocs environnement de conception. Par exemple, si vous définissez Hype pour lire et boucler la séquence d'animation actuelle à l'aide des commandes de chronologie Hype, la même sortie sera affichée dans Blocs.

Important!

Veuillez noter que l'aperçu Bric Hype est uniquement destiné à être utilisé pendant que vous créez et testez votre séquence d'animation Hype. Lorsque vous devez exporter et héberger votre site Web contenant l'animation Hype finale, utilisez le Hype Intégrer Bric pour ajouter votre séquence Hype pour la production.

Incorporer une animation hype

Incorporer une séquence Hype dans une page de Blocs est incroyablement simple.

1. Dans Hype, exportez votre séquence en sélectionnant Fichier> Exporter au format HTML5> Dossier… depuis le menu principal de l'application. Cela créera un répertoire contenant toutes les ressources requises pour votre animation Hype. Vous devriez remarquer que le nom du répertoire se terminera par .hyperressources, Par exemple: votre_nom_projet.hyperesources

2. Faites simplement glisser le Hype exporté .hyperressources répertoire du Finder MacOS sur le Blocs toile de conception. Cela ajoutera toutes les ressources de la séquence d'animation Hype dans la séquence actuelle Blocs projet comme pièces jointes au projet.

3. Ajoutez le Hype Embed Bric à votre page en utilisant le Barre Bric. Avec le Hype Bric sélectionné sur le Blocs canevas de conception, accédez au Menu déroulant dans l'inspecteur de la barre latérale, étiqueté Nom du battage médiatique et sélectionnez la séquence d'animation Hype que vous souhaitez afficher ici.

Maintenant quand tu prévisualisez votre projet dans les Blocs votre animation Hype s'affichera.

Astuce pour les débutants!

Veuillez noter qu'une seule séquence d'animation Hype ne peut être rendue qu'une seule fois sur une page. Pour ajouter une séquence d'animation Hype à chaque page d'un Blocs projet, incluez simplement le Hype embed Bric dans un Bloc qui est imbriqué dans l'un des projets Zones globales.

Nouveau sur Hype

Si vous êtes nouveau sur Hype et que vous recherchez de l'aide concernant la création de contenu qui évolue de manière réactive, nous vous recommandons de lire ce qui suit dans la documentation Hype.

Mises en page réactives

Layouts flexibles

Mis à jour le 13 mars 2020

Cet article a-t-il été utile?

Articles Relatifs