Kommunauty
Connexion
Inscription

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

  
6 commentaires

le tuto a l'air super sympa, mais ça m'intéresse pas trop le flash, tu crois que je pourrais l'appliquer en C++ facilement ?

PS : j'ai composé une musique sympa, mais ça fait n'importe quoi a des moment

le 26 juillet 2011

Très bon tuto (mais y a pas les touches noires du piano !!)

le 26 juillet 2011

@Vanyali : Oui, tu peux aussi utiliser le même principe des doubles arrays adapté au C++, et après il faut juste savoir mettre des boutons qui modifient les valeurs dans les arrays, et un décompte de temps qui fait "lire" une ligne toutes les X secondes, et qui charge des sons.

ça doit être faisable

@Lucas : ça équivaudrait à doubler la banque de sons, et à faire une map 2² = 4 fois plus grandes, mais oui, pourquoi pas

le 26 juillet 2011

@Dawlin : hé hé hé... non monsieur ! dans une gamme il n'y a que 5 touches noires, contre 7 blanches... Mais oui, effectivement ça risque de faire une map conséquente...

le 26 juillet 2011

C'est juste, donc étant donné qu'ici on a 8 touches blanches, il nous en faudrait 6 noires, soient 14 touches, donc multiplierait le nombre de sons à enregistrer par 7/4 et donc la taille de la map par 49/16...

Je sais pas si ça sert à quelque chose d'être précis

le 26 juillet 2011

en tout cas, je sais pas si ça va me servir bientôt, mais merci

il faut surtout que je trouve un moyen de jouer les sons en C++, mais normalement, il existe une bonne bibliothèque pour ça

le 26 juillet 2011



Ajoute un commentaire !

Ajouter une image... Trouvée sur internet » De mon PC »
Adresse URL :
Adresse de la page de la vidéo :
Taille du texte :
Couleur du texte :

Article lu 4543 fois.