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

CF : formation individuelle Animate CC

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 Animate CC

JE RECOMMANDE LES PRODUITS OU APPLICATIONS QUE JE JUGE QUALITATIF. SANS AUCUN COUT SUPPLEMENTAIRE SUR VOS ACHATS, EN TANT QUE PARTENAIRE AMAZON, JE REALISE UN BENEFICE SUR LES ACHATS REMPLISSANT LES CONDITIONS REQUISES. IDEM POUR LES AUTRES PARTENARIATS.

TERMES :

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 !
Application recommandéelogiciels graphisme PAO
formateur graphiste motion designer

Je m'appelle Fabien LESBORDES, formateur digital et graphiste professionnel diplomé et spécialiste certifié ADOBE avec plus de 20 ans d'expérience. Mes formations et cours particuliers portent sur la création et la conception graphique PAO 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