Animate CC formation animation responsive abeille interactive son SVG

Voilà un nouvel exercice de ma formation en animation avec Animate CC. L'abeille suit un tracé jusqu'à la ruche en battant des ailes. Le son est synchronisé. La première version est plus simple avec le rendu au format vidéo. La seconde en HTML5 Canvas nécessite quelques lignes de code pour pouvoir lire le son, qui ne peut être déclenché que par une interaction de l'utilisateur. Le code est modifié et le son hébergé en ligne. C'est un des pré-requis des navigateurs actuels, le son fonctionne sur mobile également. La troisième animation en SVG avec son est plus complexe à mettre en ligne. Je l'ai testé, mais pas encore proposé en animation de formation. NB : Les versions SVG et Canvas placées sur une même page HTML rendent le chargement impossible de la version Canvas sous Chrome. Celle-ci n'est donc pas présentée.

Version SVG avec son

Cette version animée est exportée en SVG. Le son est ajouté après directement dans le fichier. Un peu de code spécifique est nécessaire pour jouer le son, afficher le curseur de la souris et le rendre responsive. Les codes sont à incorporer dans le SVG. Le son s'active au click de la souris sur toute la zone du fichier. Le fichier HTML est aussi à adapter pour que l'interaction puisse se faire et rendre l'animation responsive. Poids version SVG : 22 ko + 12 ko de son au format mp3, et 16 ko au format ogg. La version html5 Canvas : 22 ko + 12 ko de son au format mp3 + 190 ko de librairie JS.
interaction animation SVG son abeille

Version video

Le fichier est enregistré au format actionscript et mis à jour pour que le son soit exporté dans la vidéo.
L'illustration vient de FreePik et de son de Freesound.

animation vidéo motion design after effects

formateur graphiste motion designer

Je m'appelle Fabien Lesbordes, formateur depuis 10 ans dans le digital et graphiste professionnel avec plus de 15 ans d'expérience.

Animate CC formation animation responsive abeille interactive son SVG