Synchroniser des animations 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.

TÉLÉCHARGER LE MODULE

Synchroniser ce modèle d’animation HTML5

Dans le Studio, insérez un composant Web là où vous voulez afficher l’animation. Dans ses propriétés, gardez le type Hors ligne, ouvrez Source et choisissez le fichier .zip de l’animation (le + de la liste permet de l’importer).

Pour afficher l’animation, double-cliquez sur le composant pour y entrer. Par contre, elle reste statique tant que vous n’avez pas créé d’interactions.

Insérez un composant Capteur de mouvement et gardez son axe horizontal dans ses propriétés. Insérez un composant Synchronisation. Dans ses propriétés, cliquez sur Ajouter et désignez le capteur (Sélection interactive), puis gardez l’Axe horizontal activé. Cliquez de nouveau sur Ajouter et désignez le composant Web.

Nous retrouvons la propriété “Synchroniser progression animation” spécifiquement créée dans ce module HTML. Notre animation est prête ! :-)

Synchronisation sélectionnée : ses composants sont le composant Web synchro.zip, synchronisé, et le capteur sur son axe horizontal

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.

Contenu du module : dossiers css, img et js, fichiers index.html, panda-bridge-3.0.3.min.js et pandasuite.json

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).

Extrait de pandasuite.json : la synchronisation animationProgress, nommée Synchronize animation progression, avec sa traduction fr_FR

C’est ainsi que nous retrouvons dans le studio une propriété synchronisable dédiée.

Dans la synchronisation, le composant Web Animation (synchro.zip) propose la propriété « Synchronize animation progression », activé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 connexion 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.

Code JavaScript : PandaBridge.init, puis PandaBridge.synchronize sur animationProgress, qui règle la progression TweenLite en pourcentage

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 :-)