Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

AIR pour Android : Utilisation du microphone - Faire intéragir une animation avec le son capté par le microphone

Compatible AIR 2. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Compatible Flash CS5. Cliquer pour en savoir plus sur les compatibilités.Par joni (Joni), le 28 août 2011

Une des fonctionnalités d’AIR pour Android est l’accès au microphone du téléphone.

Ceci est rendu très simple par la classe Microphone. Cette classe existe depuis longtemps dans Flash est s'utilise à peu près de la même façon sur Android. Un des gros avantages des smartphones Android contrairement aux PC, c'est qu'ils sont tous équipés d'un microphone (ben oui, sinon comment tu téléphone, banane ! :) ). Cela permet donc d'augmenter les fonctionnalités de ses jeux par exemple, en proposant une interaction supplémentaire à l'utilisateur.

Je me souviens par exemple d'un jeu sur Nintendo DS dans lequel se trouvait un mini-jeu qui consistait à allumer un feu de camp. Il fallait par intermittence frotter un bout de bois avec le stylet pour faire démarrer les braises et ensuite souffler dans le micro pour les attiser. Ce genre d'interaction peut apporter un gros plus et une immersion plus profonde au joueur.

Après cette introduction, entrons dans le vif du sujet.

Pour commencer, téléchargez ce fichier.

Il contient tous les éléments graphiques nécessaires à la réalisation de ce tutoriel. Ouvrez le dans Flash CS5.

Réalisation du tutoriel

Commençons par le commencement (oui je sais ça parait évident dit comme ça) : la classe Microphone.

La classe Microphone, que vous trouverez dans le package flash.media, permet donc d'intéragir avec le microphone de l'utilisateur si celui-ci en possède un. Autant sur un ordinateur l'utilisateur doit accepter au cas par cas si l'application ou le jeu à le droit d’accéder à son micro, autant dans une application Android, cela se fait de manière quasi invisible à l'installation. Il vous suffira de choisir la permission RECORD_AUDIO et lorsque l'utilisateur acceptera d'installer l'application, il acceptera du même coup que celle-ci accède à son microphone.

Une fois le fichier préalablement téléchargé ouvert, mettez-vous sur le calque nommé AS sur la première et seule image clé et appuyez sur F9 pour ouvrir la fenètre de code.

Nous allons donc commencer par créer un nouvel objet de la classe Microphone qui nous permettra de manipuler les données reçues de celui-ci.

//Déclaration de l'objet Micro
var myMic:Microphone = Microphone.getMicrophone();

Vous remarquez que pour créer l'objet Microphone, la syntaxe n'est pas du style var monObj:MaClasse = new MaClasse(); mais fait appelle directement à une méthode static de la classe Microphone. C'est ce qu'on appelle un Singleton. Sans rentrer dans les détails pour ne pas noyer les débutant, ce système permet de n'avoir qu'un seul objet d'une même classe, quoi qu'il arrive. Le principe est qu'en appelant cette fonction, celle-ci va soit créer l'objet s'il n'existe pas et nous le retourner, soit nous retourner directement l'objet déjà existant stocké au niveau de la classe. Si vous souhaitez plus de détails sur le design pattern Singleton, vous pouvez consulter cette page.

Nous allons maintenant utiliser quelques méthodes de notre objet myMic afin de configurer le microphone pour notre application.

Dans le système AIR pour Android, il est obligatoire que le loopBack du micro (le fait que ce qui est capturé par le micro soit retransmis dans les hauts-parleurs) soit activé. Cela peut être assez génant dans certains cas, si nous n'avons besoin comme dans notre exemple que de faire souffler l'utilisateur dans son micro pour déclencher une action. Mais pas d'inquiétude, il est possible de baisser le volume du micro à 0 ( ne cherchez pas la logique … ).

Donc à la suite de l'instruction précédente :

//Activation du loopback (permet d'entendre ce que le micro capte) /!\ Obligatoire à true pour l'utilisation sous Android
myMic.setLoopBack(true);
//On baisse le volume du micro car on ne veut pas entendre le souffle
myMic.soundTransform = new SoundTransform(0);

Maintenant que le micro est configuré comme nous le souhaitons, nous allons ajouter un écouteur d'évenement ENTER_FRAME :

//On écoute l'évenement Enter Frame
addEventListener(Event.ENTER_FRAME,EFHandler);
 
//FFonction appelée à chaque frame
function EFHandler(evt:Event):void
{
 
}

Cela va nous permettre d'écouter en permanence le micro pour connaitre son volume d'entrée et ainsi déclencher notre action.

L'objet myMic de la classe Microphone possède une propriété appelée activityLevel. Celle-ci permet de connaitre à un instant t le volume de son capté par le micro. Attention, cette valeur n'est pas exprimée dans une quelconque unité (comme le décibel par exemple) mais une valeur arbitraire comprise entre 0 (aucun son) et 100 (volume très fort). Dans notre cas, afin d'éviter que n'importe quel son parasite ou ambiant n'enclenche notre action, nous ne la déclencherons que lorsque ce paramètre est supérieur à 20.

Ce qui donne dans la fonction EFHandler :

//Si le volume d'entrée du micro est supérieur à 20 (ceci permet d'éviter que le micro réagisse avec le moindre bruit ambiant)
//On va déclencher notre action
if(myMic.activityLevel > 20)
{
 
}

Et nous allons maintenant pouvoir déclencher notre action qui consiste à faire grossir le ballon présent sur la scène. Ce clip à pour nom d'occurence balloon et nous allons le faire grossir selon le volume capté par le micro.

Ce qui donne dans le code à l'intérieur de la condition précédemment ajoutée :

//On grossit le ballon
balloon.scaleX += myMic.activityLevel/5000;
balloon.scaleY += myMic.activityLevel/5000;

Pour finir, ajoutons une petite condition afin de faire exploser le ballon si celui-ci dépasse une certaine taille. L'animation est déjà préparée dans le clip balloon, elle se trouve sur la deuxième image du clip.

Ainsi, en dessous du code que nous venons d'ajouter, nous allons mettre :

//Si le ballon dépasse une certaine taille ...
if(balloon.scaleX > 2)
{
	//Il explose
	balloon.gotoAndPlay(2);
}

Ce qui donne pour l'intégralité du code :

//Déclaration de l'objet Micro
var myMic:Microphone = Microphone.getMicrophone();
//Activation du loopback (permet d'entendre ce que le micro capte) /!\ Obligatoire à true pour l'utilisation sous Android
myMic.setLoopBack(true);
//On baisse le volume du micro car on ne veut pas entendre le souffle
myMic.soundTransform = new SoundTransform(0);
//On écoute l'évenement Enter Frame
addEventListener(Event.ENTER_FRAME,EFHandler);
 
//FFonction appelée à chaque frame
function EFHandler(evt:Event):void
{
	//Si le volume d'entrée du micro est supérieur à 20 (ceci permet d'éviter que le micro réagisse avec le moindre bruit ambiant)
	//On va déclencher notre action
	if(myMic.activityLevel > 20)
	{
		//On grossit le ballon
		balloon.scaleX += myMic.activityLevel/5000;
		balloon.scaleY += myMic.activityLevel/5000;
 
		//Si le ballon dépasse une certaine taille ...
		if(balloon.scaleX > 2)
		{
			//Il explose
			balloon.gotoAndPlay(2);
 
		}
	}
}

Vous pouvez maintenant compiler (sans oublier de cocher la permission RECORD_AUDIO) et lancer l'application sur votre téléphone. Lorsque celle-ci est lancée, soufflez dans votre micro, vous verrez le ballon se gonfler. Si vous continuez, le ballon finira par exploser.

Conclusion

Vous savez maintenant comment utiliser le son capté par le microphone de votre téléphone pour ajouter de l'interactivité dans votre application ou votre jeux.

Je vous laisse trouver de nouvelles idées toujours plus folles pour exploiter cela et l'adapter à vos besoins.

En savoir plus