Synchroniser une animation HTML5
Aucun problème pour insérer vos animations HTML5 (Greensock, Edge Animate...) : vous n'avez qu'à uploader le dossier .zip dans le composant HTML et hop ! elles s'affichent ! :-)
Si vous souhaitez aller plus loin et synchroniser votre animation avec un autre composant, il est nécessaire de l'indiquer directement dans la construction du dossier HTML5.
Pour vous simplifier la vie, nous avons préparé un modèle d'animation HTML5 prêt pour synchronisation : n'hésitez pas à le télécharger et à l'utiliser dans votre application.
Aperçu de l'animation synchronisée avec le capteur de mouvement :
Dans cet article, nous vous expliquons comment créer cette synchronisation dans le studio et pour ceux qui voudraient synchroniser leur animation HTML5, nous vous détaillons également sa construction.
1. Synchroniser ce modèle d'animation HTML5
Dans le studio de création, insérez un composant HTML là où vous voulez afficher l'animation. Dans la fenêtre Propriétés du composant, sélectionnez le type HORS LIGNE, cliquez sur AJOUTER UNE SOURCE et uploadez le dossier .zip de l'animation.
Pour afficher l'animation, double-cliquez sur la zone transparente du composant ! Par contre, elle reste statique tant que vous n'avez pas créé d'interactions.
Insérez un composant Capteur de Mouvement et paramétrez l'axe horizontal dans la fenêtre Propriétés. Insérez un composant Synchronisation et ouvrez la fenêtre Propriétés. Ajoutez le composant Capteur de Mouvement, sélectionnez la synchronisation de l'axe horizontal et ajoutez le composant HTML.
Nous retrouvons la propriété "Synchroniser progression animation" spécifiquement créée dans ce module HTML. Notre animation est prête ! :-)
2. Avancé : créer sa propre synchronisation
Dans cette partie, nous détaillons pas-à-pas la construction du module pour comprendre comment insérer le paramètre de synchronisation dans vos propres animations HTML5.
Cette animation est composée d'un fichier index.html, d'un fichier css, d'une image et de fichiers Javascript.
Le fichier de description : pandasuite.json
Dans le fichier pandasuite.json, nous avons décrit la synchronisation dans la catégorie synchronization. Nous avons choisi le nom à faire apparaître dans le studio (Synchronize animation progression) et sa traduction française (Synchroniser progression animation).
C'est ainsi que nous retrouvons dans le studio une propriété synchronisable dédiée.
Le fichier PandaBridge
Pour que l'animation communique avec le studio, il est nécessaire d'inclure ce fichier qui permet d'accéder à la classe PandaBridge et ses différentes méthodes. Il n'y a aucune modification à apporter à ce fichier.
Les méthodes de la classe PandaBridge
Dans le fichier index.html. Il est nécessaire d'inclure la connection avec le panda-bridge et les propriétés de synchronisation précédemment déclarées.
Voici les différents ajouts :
- Insertion du script dans le header du code
- Mise en place de la synchronisation
-
La méthode init permet l'initialisation, c'est elle qui va permettre d'exécuter les fonctionnalités de PandaBridge.
La méthode synchronize s'appuie sur une fonction spécifique dans laquelle les arguments correspondent au pourcentage de synchronisation.
Une fois cette fonction implémentée, vous pouvez créer une synchronisation avec le capteur de votre choix ! A vous de l'implémenter dans votre animation HTML5 et amusez-vous bien :-)