Matrice musicale en flash

le 26 juillet 2011 • Flash • par Dawlin

Bonjour à tous. Une autre application du tutoriel sur les maps : les matrices musicales. Alors on appelle ça comme on veut, un séquenceur, un sampler, un échantillonneur, moi j'appelle ça une matrice parce que ça fait plus classe

Et on le rappelle, ce tutoriel sur les maps est ici

Bon alors, tout d'abord vous vous demandez ce que c'est, une matrice musicale. Normal, hein >< Et bien c'est ça :

Note : ici, les sons sont chargés depuis un site externe à Kommunauty, d'où une certaine latence que vous n'aurez pas en local

C'est à dire que simplement en cliquant sur des carrés et grâce à un curseur qui lit les cases remplies, on peut écrire une petite mélodie de piano qui va se répéter.

on y va ?

Préparation de la scène

Alors rassurez-vous, on n'a pas besoin de grand chose pour préparer ce tutoriel. Seulement d'un curseur (j'ai simplement dessiné un trait) d'occurrence "pnt" placé sur la scène,

D'un clip placé dans la bibliothèque, d'occurrence bibliothèque "carre", contenant sur la première frame un carré gris de côté 50px, et un stop(); dans les actions, et sur la deuxième le même carré mais en rouge.

Bon bien sûr on a un dossier "piano" avec des sons de piano en mp3 numérotés de 1 à 8, vous pouvez les trouver dans l'archive de la source.

Et c'est fait ce programme c'est surtout du code

Et maintenant, codons :)

Voici le code commenté que je vous balance cash :


/*
On commence par déclarer une map de 8x8 cases :
- 8 cases par colonne (de Do à Do)
- 8 lignes (Pour avoir une mélodie de 8 temps)
On déclare la map vide car l'utilisateur la remplira tout seul
*/
var map:Array =  [[0,0,0,0,0,0,0,0],
				  [0,0,0,0,0,0,0,0],
				  [0,0,0,0,0,0,0,0],
				  [0,0,0,0,0,0,0,0],
				  [0,0,0,0,0,0,0,0],
				  [0,0,0,0,0,0,0,0],
				  [0,0,0,0,0,0,0,0],
				  [0,0,0,0,0,0,0,0]];
// On crée un clip qui accueillera les cases de la map
this.createEmptyMovieClip("cont",4);

// On lit la map en lisant les cases à l'intérieur des lignes
for(i=0; i<map.length;i++){
	for(j=0;j<map[i].length;j++){
		//On crée à chaque fois un clip que l'on attache depuis la bibliothèque (voir description du clip en question dans le début du tutoriel)
		var clp:MovieClip = cont.attachMovie("carre","c"+i+"-"+j,cont.getNextHighestDepth());
		// On lui donne ses positions qui dépendent de la largeur de la case (50) et des numéros de ligne et colonnes
		clp._x = j*50;
		clp._y = i*50;
		// on lui inscrit à l'intérieur de lui diverses valeurs qui lui correspondent :
		// Ses numéros i et j, respectivement ligne et colonne
		clp.vi = i;
		clp.vj = j;
		// La valeur actuelle de la map pour sa case
		clp.val = map[i][j];
		// Si la valeur actuelle de la map est 1, on va à l'image 2 (qui correspond à ce qu'on affiche quand la case est à 1)
		if(map[i][j] == 1){
			clp.gotoAndStop(2);
		}
		// Quand on cliquera sur le clip...
		clp.onPress = function(){
			// 		attention, à partir de maintenant et jusqu'à la ligne 52, "this" désigne le clip
			// on vérifie la valeur de la map pour le clip
			if(this.val == 0){
				//Si elle est égale à 0, on la passe à 1, et on actualise la map, on passe aussi le clip à l'image qui correspond à sa valeur
				map[this.vi][this.vj] = 1;
				this.val = 1;
				this.gotoAndStop(2);
			}
			else{
				//Sinon elle est égale à 1, on la passe à 0, et on actualise la map, on passe aussi le clip à l'image qui correspond à sa valeur
				map[this.vi][this.vj] = 0;
				this.val = 0;
				this.gotoAndStop(1);
			}
		}
	}
}

// Définition des sons
// on crée une fonction "jouer" pour jouer un son
jouer = function(vnote){
	// Variable de type son qui jouera un son quand on lui demandera
var s:Sound= new Sound();
s.onLoad = function(){
s.start(0);
}
// Puis on demande de jouer le son correspondant au paramètre "vnote" de la fonction
s.loadSound("piano/"+vnote+".mp3");
}

// Définition des constantes de temps de la matrice :
t=0;
// Tempo
tmax = 10;
l=-1;
// 24 fois par secondes ...
this.onEnterFrame = function(){
	// On incrémente le timer
	t++;
	// On place le pointeur (qui indique quelle ligne est lue) à sa bonne position
	pnt._y = (l*50)+25;
	
	// Si le timer est égal au tempo, (ce qui correpond en fait à chager dynamiquement la cadence de l'animation !)
	if(t>=tmax){
		// ça veut dire qu'on veut changer de ligne, donc on incrémente l, le numéro de la ligne
		l++;
		// Et si le numéro de ligne est trop haut, on le ramène à 0
		if(l>=map.length){
			l=0;
		}
	// On réinitialise le timer pour recommencer le comptage
	t=0;
	// On lit les valeurs des cases de la ligne l de la map
	for(j=0;j<map[l].length;j++){
		// Si cette valeur est égale à 1, on joue le son correspondant.
		if(map[l][j] == 1){
			jouer(j+1);
		}
	}
	}
}

Alors ici on retrouve différentes notions comme par exemple celle du timer, et celle des maps (mais c'est le but du tuto) donc n'hésitez pas à vous référer aux cours de débutants

Extendons le système

exercice pour la prochaine fois : Je veux que quand on clique sur le bouton, il puisse devenir rouge (un clic) et charge un son de piano, puis bleu (2 clics) et charge un son de guitare.

Pour ça on aura besoin d'une autre valeur à inscrire dans la map, et on définira que si c'est "1" on charge dans le dossier "piano" et si c'est 2 on charge dans le dossier "guitare".

bonne chance

Fais péter les sources

Voici une archive .zip avec la source .fla et les sons de piano utilisés.

La source .fla toute seule, sinon, mais c'est plus calme...

Voilà, merci d'avoir suivi ce tutoriel,

Dawlin

Matrice musicale en flash

Préparation de la scène

Et maintenant, codons :)

Extendons le système

Fais péter les sources

Lisez aussi...

Flash : Charger et exploiter un fichier XML externe

Créer un jeu de parachute en FLASH