Comment insérer un son dans Construct2 ?

Ici, dans ma démo, on veut entendre un son quand on appuie sur un "cadre texte" (le cas le plus simple).

Ce serait le même principe avec un clic sur une image, etc... 

 

(Fichiers exemples en bas de la page...)

Pour les utilisateurs de Construct2 sous Windows XP et de Vista, lire une note importante en bas de page pour être compatible avec MacOS, iPad, iPhone, IE

Un soucis avec l'audio quand on utilise Internet Explorer 10 sous Windows 8... N'ayant pas encore d'ordi sous Win8, je ne peux chercher une solution à ce problème. Sous Win8, utilisez Firefox ou Chrome !

 

 

Il faut d'abord importer le fichier son dans le répertoire "Sounds" puis le relier à un événement ("event").

 

1/ Importer le fichier son dans le répertoire "Sounds" :

 

- Le fichier son doit être présent sur l'ordinateur.

Il peut être au format ".wav",( ou au format ".ogg" pour prendre moins de place), ou autre.

De toute façon, il sera converti automatiquement en ".ogg" et "m4a".

... ".ogg" : pour Android, Firefox, Chrome, etc.

... "m4a" : pour iPad, iPhone, Safari, IE, etc.

( Pour les utilisateurs de Windows XP et de Vista, lire en bas de page ! )

- Cliquer sur "Project" à droite :

 

- Cliquer sur "Sounds" :

 

- Cliquer-droit sur "Sounds" puis cliquer sur "Import sounds" :

 

- Parcourir l'ordinateur à la recherche du fichier. Ici "bravo.ogg" et cliquer sur "Ouvrir" :

 

- Cliquer sur "Import" :

 

- Cliquer sur "OK" :

 

- Voilà, le fichier son "bravo.ogg" est dans le répertoire "Sounds", prêt à être inséré dans votre application HTML5.

 

 

2/ Relier la lecture d'un fichier son à un "événement" ("event")  : Si vous n'avez pas de "projet" en cours, créez-en un...

 

-Cliquez sur "New mobile project" pour avoir une structure de projet avec un minimum de fonctionnalités toutes prêtes ( Très important ! ) :

( Evitez "New empty project" si vous êtes un novice... )

 

On veut entendre un son quand on appuie sur un "cadre texte", donc on va relier certains événements...

 

-Dans le "Layout 1" ( l' "Aperçu 1"), cliquez-droit sur le fond (1) puis cliquez sur "Insert new object" (2) :

 

- On crée le "Cadre texte" :

 

- On choisit l'endroit où sera ce "Cadre texte" : placer la croix au bon endroit et cliquer...

  On pourra le déplacer autant de fois que l'on aura besoin, après.

 

- Changer le contenu du "Cadre texte" (Remplacer le mot "Text" par "Dire bravo !"...)

  et Il faut s'organiser pour s'y retrouver : Renommer le "Cadre texte" (Remplacer le mot "Text" par "CadreTexte1"...).
Sinon, il y aura risque de confusion : le mot "Text" apparaissant à 2 endroits !

 

- Observer les modifications dans l'interface de Construct2 : c'est plus clair...

 

Le fichier son existe, le cadre texte aussi : Il faut créer une interaction entre eux :

- Cliquer sur l'onglet "Event sheet 1" puis sur "Add event" : ( "event" pour "événement" )

 

- Cliquer sur "Touch", "Next",

      "On touch object", "Next",

 

 

A côté de "Object", cliquer sur "<click to choose>" :

 

- Cliquer sur "CadreTexte1" :

 

Voilà le résultat dans "Event sheet 1".

- Cliquer sur "Add action" puis "Audio", "Next", "Play", "Next", "Done" :

 

- Voilà le résultat, l'événement est créé :

 

Pour tester "en local" sur votre ordinateur cliquer ici :

 

Cliquer ici pour tester le résultat.

 

Pour créer l'application Html5, il faut exporter le projet : 

 

- Choisir le format "HTML5 website", "Next" :

 

Attention, à chaque fois que vous lancerez Construct2, le répertoire d'exportation sera le même : "New project" sur le bureau...
( Ce n'est pas très ergonomique ! Je ne sais pas pourquoi c'est comme ça... )

Pensez à le modifier, sinon vous écraserez une précédente exportation et vous risqueriez de perdre un précédent travail !  (Grr ...)

 

L'application HTML5 est créée.

Elle est constituée du répertoire "media" où se trouve le fichier audio et de 5 fichiers dont "c2runtime.js" qui correspond à l'application personnalisée par vos soins. Les autres fichiers ont le même contenu quelque soit votre application.

 

Il faut double-cliquer sur le fichier "index.html" pour lancer l'application dans un navigateur (Firefox, Chrome, etc.)

Cliquer ici pour tester le résultat en ligne.

Le fichier pour essayer soi-même dans Construct2

L'application zippée

 

(un quizz sonore)

Ce tutoriel peut vous paraître long, mais il faut considérer que l'on vient de voir beaucoup de choses :

Importation d'un fichier son, Création d'une application, Exportation en HTML5, etc.

Vous pourrez, dès à présent, créer une application multi-plateforme !

Faites des recherches dans Web, YouTube ou encore DailyMotion pour y trouver une quantité incroyable d'exemples et tutoriels !

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Note importante pour les utilisateurs de Construct2 sous Windows XP ou Vista :

le problème du format ".m4a" (MPEG-4 AAC)

 

Pour créer des applications, avec des sons, qui fonctionnent sous iPad, iPhone, MacOS, Internet Explorer et Safari

>> Il faut créer et copier manuellement vos fichiers audio au format ".m4a" dans le répertoire "media" une fois votre application exportée au format HTML5 !     

Construct2 ne générera pas les fichiers en double aux formats ".m4a" et ".ogg" comme sous Seven ou Win8

 

Pourquoi ?

Le format audio ".m4a" (MPEG-4 AAC) est un format dit "propriétaire" (payant), donc absent en standard sur les logiciels libres et gratuits...
et sur XP qui est un "vieux" système d'exploitation. ".m4a" n'existant pas à la création de XP.

- Donc, pour des raisons de droits commerciaux, Windows XP et Vista, ne gèrent pas, par défaut, le format ".m4a" (MPEG-4 AAC) !

Si vous ne gérez pas manuellement les fichiers ".m4a" vos applications risquent d'être muettes avec certains appareils !

 

La solution serait qu'Apple et Microsoft utilisent un format libre comme ".ogg", mais, c'est une autre histoire...

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Pour créer un fichier au format ".m4a", on peut utiliser Audacity ( Il faudra d'abord installer "FFmpeg for Audacity" pour qu'Audacity puisse exporter en ".m4a" ! )

- Audacity

- FFmpeg_v0.6.2_for_Audacity_on_Windows.exe