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

Cours Animation 2D Vidéos Motion-design After-Effects

Mes cours particuliers de MotionDesign
Cours domicile motiondesign

Cours Ă  domicile AfterEffects :

Apprenez à animer et donner vie à vos créations graphiques en 2D. Utilisez vos créations de Photoshop et Illustrator pour les animer. Créez des intros de clips vidéos et des animations percutantes ! Cours individuel en visioconférence.

Inscrivez vous maintenant !
TERMES :
  • FORMATION ANIMATE CC
  • INTERACTIVITÉ
  • MOTION DESIGNER
  • SVG SON
  • VIDÉO
formateur graphiste motion designer

Je m'appelle Fabien Lesbordes, formateur digital et graphiste professionnel avec plus de 18 ans d'expérience. Mes formations et cours particuliers portent sur la création et la conception graphique avec la suite Adobe (Photoshop, Illustrator et Indesign). J'interviens également en animation 2D ou motion-design ainsi qu'en apprentissage des langages HTML5 et CSS3, jusqu'à l'apprentissage du célébre CMS Wordpress et le SEO (référencement naturel). Ces formations sont destinées à un public débutant, intermédiaire et avancé. Il s'agit de graphistes et photographes essentiellement. Ce sont des cours particuliers en vidéo FOAD, en visio-conférence ou à domicile et des formations collectives ou individuelles en entreprise.

🐝ANIMATE CC FORMATION ANIMATION RESPONSIVE ABEILLE INTERACTIVE SON SVG