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

formateur graphiste motion designer

Je m'appelle Fabien Lesbordes, formateur digital et graphiste professionnel avec plus de 15 ans d'expérience. J'interviens sur les applications de création graphique, en animation ainsi qu'en apprentissage HTMl et Wordpress.

🐝Animate CC formation animation responsive abeille interactive son SVG