Insérer un son dans une animation Edge

© Christian PAULUS. Document créé le 20 octobre 2011 , mis à jour le 20 octobre 2011.

Quand on a dix pas à faire, neuf font la moitié du chemin. Proverbe chinois

Accueil du site > Astuces > WEB > Insérer un son dans une animation Edge

Multimédia / Adobe Edge Preview

Adobe propose depuis août 2011 Adobe Edge, un éditeur de contenu animé et interactif. D’aucuns font depuis la comparaison avec Adobe Flash. Et si ce dernier permet de produire un fichier flash/shockwave, propriétaire, non ouvert, Adobe Edge lui, génère du code HTML5, accompagné de JavaScript et CSS.

La version mise à disposition par l’éditeur n’est ni une version alpha, ni une version béta, mais une verson preview. Et bon nombre confondent sur le net, pensant qu’il s’agit là juste de copies d’écrans d’une nouvelle application, ou d’une version de démo.

Curiosité que cette appellation. Mais Adobe n’en reste pas là ! Dans une des dernières versions d’Adobe Edge, il est possible d’attacher un événement à un objet (rectangle ou bloc texte), et d’y insérer du code Javascript. Et dans l’interface, on ne parle pas de JavaScript, mais d’Actions ! Peut-être pour ne pas déstabiliser les développeurs flash ?

Adobe Edge, preview, mais pas béta

Il est possible d’importer dans le plan de travail des images, mais pas de fichier son, ni de fichier vidéo, ni de ... fichier swf ! (swf est un format bien connu d’Adobe, ShockWave Flash).

Ne pas oublier que la version actuelle est une preview. Et que la sortie officielle, release, du produit est prévue pour 2012. D’ici là, Adobe Edge aura probablement évolué.

En attendant, les passionnés ou les amateurs d’animations téléchargent cette version preview d’Adobe Edge sans hésiter, et découvrent une interface plutôt sympathique, même si l’emploi d’un grand écran se découvre rapidement indispensable.

Et très rapidement, l’impossibilité d’insérer un objet son ou image se fait cruellement sentir.

Impossible ? Disons pas directement. Pas simplement.

En fouillant dans le code généré par Adobe Edge, une bonne surprise apparaît : l’outil s’appuie sur le framework JQuery et le plugin jquery.easing, deux outils performants pour la manipulation des éléments de la page (le DOM) et l’animation en JavaScript.

Comment profiter de ces outils pour insérer un objet multimédia ?

Insérer un son dans son animation

Un exemple rapide, en guise de guide, pour insérer un son dans son animation produite par Adobe Edge :

Commencez par créer votre projet, avec, disons, un titre et une simple boite, un rectangle.

Ajoutez une action à l’objet rectangle : clic-droit sur l’objet rectangle, puis "Open Actions for "Rectangle").

Ajouter une action à un objet {PNG}

Dans la boîte de sélection de l’action, choisir le clic.

Sélectionner une action pour l’objet {PNG}

Dans la boite d’édition de l’action, ajouter le code JavaScript nécessaire. Par exemple :

$('#stage_Rectangle').append ('<embed src="success.mp3" autostart=true loop=false>');

Dans cet exemple, le son success.mp3 est chargé, joué au démarrage de la page.

Ce qui donne :

Boite d’édition de l’action {PNG}

#stage_Rectangle est l’ID, le nom unique de votre objet rectangle. Ce nom est précisé dans l’interface d’Adobe Edge dans la fenêtre des propriétés.

Nom de l’objet à manipuler {PNG}

Ne pas oublier d’ajouter à la racine de votre projet publié le fichier success.mp3 indispensable.

Il ne vous reste plus qu’à tester le résultat dans votre navigateur (menu File > Preview in Browser).

Plussoyez !

Répondre à cet article