Perney Romain GI02 projet SI28 : Table de mixageVerret Valentin GB02 P06

PROJET SI28 :

« Le DJmix Studio »

Serge Bouchardon

- 1 -

Perney Romain GI02 projet SI28 : Table de mixageVerret Valentin GB02 P06

Dans le cadre de l’UV SI28 « Ecriture Interactive », nous avons décidé de réaliser au cours de semestre un projet intitulé « DJmix Studio », l’idée étant de permettre à des utilisateurs de créer de la musique à partir de notre application.

Etant nous-mêmes guitaristes amateurs, notre intérêt a été suscité par la réalisation de ce projet musical. Nous voulions tenter de procurer le plaisir de jouer, de composer, etc.

Nous tenons, avant de développer la réalisation du projet, remercier Serge Bouchardon (enseignant de si28) pour nous avoir permis de concrétiser l’application. Notre entourage nous a aussi soutenu, chacun à sa manière, et c’est pour cela que nous remercions les administrateurs du forum si28, Gaël, Nellie, Mélanie, Jérémie, Thomas, et les oubliés.

- 2 -

Perney Romain GI02 projet SI28 : Table de mixageVerret Valentin GB02 P06

Table des matières

I. Cahier des charges.................................................................4A. Concept...............................................................................................................4B. Objectifs...............................................................................................................4C. Public-cible..........................................................................................................4D. Objets à manipuler...............................................................................................4E. Structure et navigation.........................................................................................5F. Formes et degrés d'interactivité...........................................................................5G. Choix techniques.................................................................................................5H. Scénario..............................................................................................................7

II. Story Board...........................................................................9III. Conclusion.........................................................................10

A. Dérives du projet initial.......................................................................................10B. Réflexions sur le projet......................................................................................11

- 3 -

Perney Romain GI02 projet SI28 : Table de mixageVerret Valentin GB02 P06

- 4 -

Perney Romain GI02 projet SI28 : Table de mixageVerret Valentin GB02 P06

I. Cahier des chargesA. Concept

A partir d'une base de données fournie par l’application, et divisée en plusieurs catégories (guitare rythmique, guitare riff, accordéon, batterie, etc.), l'utilisateur peut faire glisser les courts morceaux de musique vers une piste de mixage, afin d'assembler les samplers et de constituer son propre morceau original.

B. Objectifs

L’utilisateur a la possibilité de lire le morceau dans la base de donnée, avant de l’importer sur sa piste. Il peut aussi à tout moment lire les pistes ensemble, et donc avoir un aperçu de son travail.On veut procurer à l'utilisateur le plaisir de créer, et le plaisir de l'oreille...Les échantillons de musique proposés seraient de type rock, tirés de chansons de variétés.L’utilisateur est intégré dans un univers délirant, lui proposant un défi, lui donnant une motivation pour rester.

C. Public-cible

Toute personne sachant manier la souris, à partir de 10/12 ans, correspond au profil de l’utilisateur de l’application. A partir de cet âge, on considère que la personne acquiert une autre perception de la musique, autre que celle qu'elle a éventuellement apprise au solfège. On commence à aimer la musique pour la musique, et non plus pour les paroles des comptines, etc. L'utilisation de l'application n'implique pas une connaissance préalable de la musique. On veut permettre à quiconque veut créer, de créer, sur la seule base de l'appréciation personnelle. Evidement, on veut attirer l'attention des amateurs de musique, et il serait difficile de prétendre à satisfaire un public de musiciens, mixeurs, ingénieurs du son confirmés.

D. Objets à manipuler

D’une part, l’utilisateur navigue dans les différentes interfaces qu’on lui propose par simples boutons intuitifs et plutôt explicites, de type « Sortie », « Retour », etc. Ces boutons sont des symboles « bouton » dans Flash. D’autre part, l’utilisateur est amené à déplacer les samples d’une zone de l’interface à l’autre. Ces samples sont représentés par des symboles « Clip », qui sont liés à des fichiers sons, stockés dans le dossier racine.Les symboles ont la nomenclature suivante : « nombre ». Ce « nombre » indique un ordre arbitraire de classement dans chaque sous catégorie de la bibliothèque. Une fois en « Drag », l’intitulé du sample prend la forme « sample i » avec i correspondant au « nombre ». On peut faire disparaître le sample déposé sur la piste en le faisant glisser à l’extérieur. Un sample utilisé ne disparaît pas de la bibliothèque.Les fichiers sons ont l’extension *.mp3, et ne durent que 2 secondes (ce qui correspond à un tempo de 90 pour une mesure à 4 temps). La qualité de ces sons est : 44kHz.

- 5 -

Perney Romain GI02 projet SI28 : Table de mixageVerret Valentin GB02 P06

E. Structure et navigation

L’utilisateur est accueilli par une animation d’introduction, en trois scènes, présentant le personnage, et la mission de l’utilisateur. A la fin des trois tableaux, l’utilisateur arrive dans l’interface principale  : la table de mixage. Cette page est divisée en trois parties :

1. La barre de liensElle se situe en haut, à gauche de la page. Elle propose plusieurs fonctionnalités à l’utilisateur, sous forme de boutons. Les différents boutons sont :

a. L’aide : elle montre comment se servir de l’interface, le fait de devoir cliquer sur les samples et de faire des glisser déposer sur les pistes n’étant pas évident, tout comme le fait qu’il faille proposer son morceau au personnage pour terminer.

b. Le retour vers l’intro : comme son nom l’indique, il permet à l’utilisateur de visionner à nouveau l’animation d’introduction, à partir de la deuxième scène.

c. Les crédits : il renvoie vers une page où sont présentées nos noms, e-mails et dessins.

2. La barre d’outilsElle se situe en haut, au milieu de la page. Elle propose des outils de lecture de la musique créée, toujours sous forme de boutons.

a. Lecture : lit toutes les pistes en même temps, jusqu’au bout des pistes.b. Arrêt : stoppe la lecture.

c. Soumettre au clochard : Ce bouton est un clip animé cliquable. Il représente le clochard.

3. La barre de navigationElle se situe à gauche de l’écran. Elle présente les fichiers audio disponibles, classés selon plusieurs catégories. Les catégories sont : guitare solo ; guitare rythmique ; percussions. Le curseur est transformé en « main » ce qui indique à l’utilisateur qu’il peut sélectionner les fichiers, et les manipuler. Les fichiers sont rangés par style musical et instrument.

4. La table de mixageElle se situe en bas à droite et la majorité de la surface de l’écran lui est consacrée. On y trouve plusieurs trois pistes de mixage qui correspondent aux trois catégories de fichiers audio. L’utilisateur y dépose les fichiers musicaux. Dès que l’on dépose un fichier, le cadre s’accroche à la piste. Quand on clique sur un cadre, le fichier audio est lu. Une time-line permet de suivre l’évolution de la lecture.

Si l’utilisateur souhaite quitter l’application, il peut couper brusquement l’application par le cadre Windows. Néanmoins, il peut poursuivre le défi que nous lui proposons, en soumettant sa création au clochard. Dans ce cas, il sera amener aux outros présentées en 2.c.

F. Formes et degrés d'interactivité

L’utilisateur est d’abord guidé par l’introduction, dans laquelle il est amené à suivre un parcours que nous lui imposons, puis il accède à l’interface où il évolue seul.Dans l’introduction, l’originalité provient du fait que l’utilisateur, pour poursuivre l’aventure doit rentrer en collision avec le personnage de droite dans la salle de concert. Il fait ainsi apparaître des étoiles autour du personnage, qui montrent qu’il a subit un choc. Après quelques coups, le clochard se fait chasser de la salle de concert.Dans cette interface, il peut cliquer sur les boutons, sur des images, déplacer le personnage dans un cadre, déplacer les samples vers les pistes de lecture, lire les fichiers sons, écouter le morceau qu’il est en train de composer, demander l’avis du clochard, mettre fin à l’application, et aller demander de l’aide, consulter la page de crédits, etc.

G. Choix techniques

1. Les animationsLes animations d’intro et d’outro sont réalisées avec Flash MX en plusieurs séquences.

- 6 -

Perney Romain GI02 projet SI28 : Table de mixageVerret Valentin GB02 P06

2. Les personnagesLe personnage principal, ainsi que tous les personnages apparaissant dans l’animation et dans la page de crédits ont été créés à partir d’un éditeur de personnages « South park » disponible sur ce site :

http://spstudio.claudia.hosting-friends.de/spstudio.htmlLes retouches et le découpage du personnage principal en plusieurs éléments sont réalisés sous Flash MX, afin de créer autant de symboles différents qu’il y a de parties du corps qui bougent, où qui seront amenées à être modifiées (exemple : le bras droit, gauche, les yeux, etc.).Les autres personnages ont été copiés à partir de copies d’écran, vers Photoshop, où l’on a éliminé le fond blanc, et créé un fond transparent, que nous avons conservé en utilisant le format *.png.

3. La table de mixageL’interface principale est conçue sous Flash MX, à partir d’une photo tirée du WEB, et dont nous avons tracer le Bitmap à partir du logiciel. En effet, Flash Mx semble être le moyen le plus efficace de produire une interface dynamique, interactive et jolie. La taille de l’image à l’écran est 800*600, dans le but de permettre à toutes les configurations d’accéder à l’application.

4. Les fichiers AudioLes sons sont générés à partir de GuitarPro 5.0 car ce programme permet d’exporter, à partir de partitions, des fichiers sonores d’excellente qualité grâce à la technologie RSE (Real Sound Effect), ce qui permet de combiner les sons sans rupture de la continuité sonore. Les partitions sont des reprises de riffs célèbres ou juste des accords quelconques. Pour obtenir les fichiers sons, nous ouvrons une tablature sous Guitar Pro 5, nous isolons une mesure à 4 temps, puis nous l’exportons en midi après avoir modifié le tempo.Au besoin, les fichiers seront retouchés sous Audacity. Un autre logiciel (« midi to mp3 ») convertit tous les sons midi en mp3, afin d’obtenir une meilleure qualité de compression, et donc gagner de la place en mémoire et d’être lisibles par flash.L’intérêt de l’application réside surtout dans l’intérêt qu’ont ces samples à être mixés entre eux. N’étant pas musiciens expérimentés, il s’est révélé difficile de créer des samples pouvant bien se marier. Nous espérons mettre environ 10 samples de types de rythmiques de guitare différentes, 10 samples de percussions, et 15 de solos.

5. Les dessins de fondLes fonds d’écran ont été déssinés par Gaël Enaud (GM01), scannés et retouchés sous Photoshop, puis retravaillés encore sous Flash MX.

6. La page de créditsLes pages HTML ont été réalisées sous Dreamweaver MX, ainsi que la page d’accueil de l’application « index.html » depuis laquelle se lance les animations. Des pages « bien.html » et « mal.html » édités avec le même logiciel sont les pages de fin d’application.

- 7 -

Perney Romain GI02 projet SI28 : Table de mixageVerret Valentin GB02 P06

H. Scénario

1. La séquence de présentationDans cette séquence, on présente l’application qui va suivre. L’utilisateur est autorisé à « passer l’intro » grâce au bouton qui porte ce texte. On donne le titre « DJmix : Studio de mixage », le contexte « projet Si28 ». Le but de l’animation est devoilé par le texte : « Crée toi même le tube de l'été, et accède au Hit Parade...Ou comment la musique peut changer une vie... »Une phrase vient décrire la situation avant que ne commence le jeu. « Tout commence ici, au "Funk'n hard'n street'n fight'n club"... Où Misspent Youth donne un concert. ». On informe alors l’utilisateur du lieu où se passe l’histoire, pourquoi, etc. (Misspent Youth est un groupe de Ska Punk de la banlieue sud-est de Paris).

2. La séquence d’introductionOn retrouve tout de suite le bouton « passer l’intro ». La musique « Sick » de Misspent Youth est jouée.Dans cette séquence, on veut faire comprendre à l’utilisateur qu’il est le personnage central, habillé en clochard dépravé. Ceci est permis par le fait que la souris disparaît et contrôle le clip du personnage lorsque l’on passe dans une certaine zone, proche du personnage. Le rythme rapide de la musique induit le personnage à faire de petits mouvements de souris pour faire « sautiller » le personnage sur place, où même pour le déplacer. Dans la salle, on trouve 4 autres personnages qui profitent du concert, et un videur qui se reconnaît grâce à une oreillette et un casque-micro.

Lorsque le clochard mis en contact avec le personnage de droite, on considère qu’il l’a cogné. Des étoiles jaunes apparaissent pour comprendre qu’il a pris un coup, et l’on entend un petit son «  Aïe ». Immédiatement, le videur réagit et joue son rôle, déclamant « Hey ho ! », pour le rappeler à l’ordre. On compte sur le fait que ce panneau va déclencher chez l’utilisateur une crise de curiosité, qui va le faire rentrer plusieurs fois en collision avec le personnage de droite. Ces événements déclenchent alors des cadres de textes, faisant acte de bulles de BD, retranscrivant les paroles du videur. On a successivement les textes : « Calme toi ! Tout de suite ! », « Encore une fois et… », « MAINTENANT TU DEGAGES ! ». Ce dernier texte induit la fin de la séquence. On comprend que le clochard se fait exclure de la salle pour mauvais comportement. Le volume de la musique décroît.

Le personnage se retrouve alors dans la rue (on retrouve encore le bouton « passer l’intro »). Il se pose la grande question : « Quel boulet suis-je donc ? Quand cela cessera t’il ? Il faut que je fasse quelque chose de ma vie... Aidez-moi !! ». C’est un appel à l’aide de l’utilisateur qui doit maintenant prendre en main l’avenir du clochard. On joue « La dispute » de Yann Tiersen, qui est une musique lente, triste, à l’accordéon et au piano. Elle renforce l’idée de détresse du personnage.Le nom du studio de musique en face de la salle du concert est inscrit sur la façade : « DJmix Studio ». Il change de couleur quand on passe la souris dessus. De plus, cette action fait apparaître une nouvelle bulle de texte : « Dans ce studio, je pourrais moi-même créer une musique et devenir quelqu’un ! ». On donne un nouvel indice à l’utilisateur quant à la mission qu’on lui confie. A ce stade, il doit l’avoir comprise.En cliquant sur la porte du studio, le personnage se déplace tout seul vers la porte et un fondu sonore et visuel indique qu’il rentre dans le studio. On arrive alors dans l’interface principale.

3. La page principaleIci, sont écrits uniquement les liens vers les différents outils apparaissant dans le cadre en haut à gauche : - « Aide »

- « Intro »- « Crédits »

Les étiquettes sont suffisamment explicites pour ne pas avoir à en écrire d’avantage.

Dans la barre d’outils, le texte « soumettre » est affiché sous la tête du personnage. Deux boutons sont alignés à la gauche de la tête :

- « Lecture » - « Arrêt » 

A gauche, en bas, une étiquette « bibliothèque » renseigne l’endroit où sont les samples.

- 8 -

Perney Romain GI02 projet SI28 : Table de mixageVerret Valentin GB02 P06

Dans la zone des pistes, les pistes sont numérotées : « piste i » pour i = « rythme » ; « solo » ; « percussions ».

4. Pages de fin :A ce niveau, une page « bien.html » ou « mal.html » est ouverte, selon que la condition définie

plus haut est remplie ou non. On rappelle que le but de l’application est de créer une musique pour donner un sens à la vie du clochard. Quand l’utilisateur considère qu’il a finit son morceau, il peut le soumettre au clochard. Le clochard le félicite, dans une page d’outro si plus de 2 pistes de mixage sont remplies, et si l’une d’elle dure plus de 10 secondes (5 samples). On affiche alors une page HTML. Le texte « Le clochard te remercie de lui avoir sauvé la vie. Finie la misère musicale » explicite la situation. Dans le cas contraire, le clochard apparaît encore plus misérable qu’avant. On affiche alors le texte suivant : « Booouuuuuh ! Le pauvre homme est condamné à passer sa vie sous les ponts... ».Dans les deux cas, on permet à l’utilisateur de relancer l’application.

Voici les dessins correspondant aux deux pages de fin :

L’un est propre (gagnant), l’autre est sale (perdant).

5. Crédits :C’est une page « crédits.html ». On y présente des dessins nous représentant, ainsi que nos noms en dessous de chaque image. On y remercie aussi un certain nombre de personne. Le texte apparaissant à l’écran est le suivant :

Projet SI28 réalisé au Printemps 2006La table de mixagedu DJmix STUDIO

Par Valentin Verret (GB02) et Romain Perney (GI02)Merci à Serge Bourchardon, les administrateurs du forum si28, Gaël, Nellie, Mélanie, Jérémie,

Thomas, et aux oubliés.

On utilise encore une fois la même charte graphique (fond noir, écriture violette, etc.)

6. Aide :Une animation « aide.swf » est lancée dans une nouvelle page. L’utilisateur est passif jusqu’à la fin. Il est également invité à fermer le navigateur pour quitter l’aide. L’animation montre des impressions d’écrans de la page principale, avec un curseur qui se déplace et qui manipule les samples.

- 9 -

P ro je t S I2 8

PAS S ER L'I NTRO

Hey ho !

Perney Romain GI02 projet SI28 : Table de mixageVerret Valentin GB02 P06

II. Story Board1. L’écriture

La chartre graphique utilisée dans cette séquence est dans les tons noir pour le fond et violet majoritairement pour le texte. La police utilisée est le Times New Roman, en taille 40, de couleur violette (code hexadécimal : #CC99FF) :

On utilise aussi les couleurs bleu-vert (#00FFFF), rouge (#FF0000) et orange (#FF9900) pour souligner des mots importants comme le nom du groupe qui joue, le nom de la salle et du projet.Tout au long de l’application, on retrouve des boutons rectangulaires, de bord fin et rouge, avec un fond blanc et un niveau de transparence de 10%. L’écriture est en Arial rouge.

Lorsque les personnages parlent, les paroles sont représentées par des infos-bulles rectangulaire, aux bords arrondis, jaune clair comme celle-ci :

Dans rue, sur le studio est inscrit « Djmix Studio ». Cette écriture a été réalise sous PowerPoint en Word Art. Un passage sur le bouton de la porte fait passer la couleur de l’écriture du noir au bleu clair.

Les inscriptions dans la page principale sont en Times New Roman aussi.

2. Les illustrations

Les fonds des séquences animées ont été déssinés par Gaël Enaud, ainsi que les spot de lumière.

Les boutons ronds ont été récupérés dans la bibliothèque commune de Flash MX.

Les personnages ont tous été fabriqués à partir de l’éditeur sur INTERNET. Les looks les plus fous ont été dessinés.

Le fond de la page principale (une table de mixage)a été récupérée sur un site INTERNET, et a subi une retouche dans Flash MX ave l’option « tracer le Bitmap », ce qui lui donne l’impression d’être peinte.

- 10 -

Perney Romain GI02 projet SI28 : Table de mixageVerret Valentin GB02 P06

III. ConclusionEntre l’idée initiale, le cahier des charges réalisé en cours de semestre et le projet final, le contenu a subit une grande transformation. Des points ont été supprimés, d’autres ont été ajoutés, mais la plupart, seulement transformés par rapport aux idées de départ. Il est clair qu’entre la théorie est la pratique, la marge n’est pas négligeable, surtout en considérant nos compétences dans le logiciel utilisé. Romain avait déjà une certaine expérience de la programmation, alors que Valentin a dû apprendre beaucoup.

Voici un inventaire des fonctionnalités du projet que nous n’avons pas réalisées.

A. Dérives du projet initial1. Base de données et PHP

Tout d’abord, la gestion des sons devait s’effectuer par l’intermédiaire d’une base de données, et une communication en PHP devait être mise en place pour faire communiquer la base de données avec l’animation Flash. Cette technologie a été abandonné car nous nous sommes rendu compte qu’enregistrer les fichiers dans le dossier racine de l’animation était plus simple, et suffisant pour notre problème. Par contre, ce choix nous oblige à modifier le fichier source Flash si nous souhaitons ajouter de nouveaux samples, ce qui aurait pu être évité avec la base de données, et une fonction créant un nouvel objet « sample » pour chaque objet de la base de données.

2. Scénario généralIl a été largement modifié au fur et à mesure de l’avancée du projet. En effet, les animations à développer se révélaient trop complexes, trop chronophages, car chaque nouveau point abordé dans Flash nécessitait beaucoup de littérature (forum, aide en ligne, didacticiels) et d’essais avant que les résultats soient ceux attendus. Ainsi, l’animation du personnage principal, à part dans la première scène est réduite à son strict minimum ensuite.Des séquences animées étaient prévues pour les deux outros prévues, mais du fait de la source des personnages (copier-coller d’INTERNET), la manipulation des images s’est avérée être trop difficile pour que nous puissions parvenir au résultat désiré. Nous aurions voulu animer le vigile de la salle de concert pour rendre la scène plus vivante par exemple.L’aide aurait dû être sous forme animée, mais par manque de temps, elle a été remplacée par une succession de copies d’écran.

La première version du scénario mettait en scène un génie semblable à celui d’Aladin, qui sortait d’une radio, en comparaison à la lampe, et qui soumettait le clochard au même défi que celui de notre projet. Cette version a été abandonné, car la manipulation graphique du génie s’est avéré être un vrai casse-tête. Toutes les images disponibles sur INTERNET sont de mauvaise qualité.

3. InterfaceNous aurions voulu créer une arborescence pour classer les fichiers pour afficher dans la bibliothèque, mais la création de celle-ci en Flash s’est révélée trop compliquée. Nous avions aussi voulu fournir à l’utilisateur beaucoup de possibilités d’interactions dans la page principale. D’autres fonctions ont été modifiées, telles que la suppression d’un clip musical. On voulait qu’une partie du graphisme soit un bouton de suppression, une croix par exemple, mais nous avons évolué vers la solution suivante. Si l’utilisateur accroche le clip, et qu’il le déplace en dehors des pistes, le clip disparaît.

4. FonctionsLors de la première ébauche de cahier des charges, nous voulions permettre à l’utilisateur d’utiliser pleins de fonctions, mais nous avons jugé la plupart de ces fonctionnalités inutiles. Ainsi, nous avions pensé à un bouton de réglage de volume, « pause », « quitter ».Une fonction « exporter » avait été pensée. En cliquant sur un bouton, l’utilisateur aurait enregistré son travail. Nous voulions ainsi exporter, dans un premier temps un fichier *.mp3, mais coller les fichiers audio les uns a la suite des autres s’est révélé être très difficile. Ensuite nous avions pensé

- 11 -

Perney Romain GI02 projet SI28 : Table de mixageVerret Valentin GB02 P06

créer un fichier *.txt qui donnerait l’enchaînement des samples utilisés sur chaque piste. Cela s’est aussi révélé trop difficile à réaliser.

B. Réflexions sur le projet

Une fois la réalisation de l’application achevée, nous sommes amenés à nous poser certaines questions. Ces questions ont, certes, déjà été posées avant de commencer la réalisation, mais les poser après que les idées soient concrétisées nous semble indispensable.

D’abord, interrogeons nous sur la finalité de l’application, est-ce que l’utilisateur s’amuse t’il ? Les samples choisis permettent-ils à un utilisateur de profiter pleinement de l’application ? Sa musique représente t’elle un véritable attrait ?

Ensuite, nous voudrions savoir si les animations, telles que nous les avons conçues sont intelligibles ou non. Manque t’il des éléments à la compréhension du scénario ? En effet, étant immergés dans la conception de l’animation et dans le scénario, nous savons où nous voulons amener l’utilisateur. Est-ce que ceci est bien perçu par ce même utilisateur ? L’objectif étant implicite, l’utilisateur éprouve-t-il une satisfaction à la réalisation d’une musique, et au sauvetage du clochard ?

Toutes les réponses à ces questions sont des avis objectifs que nous pourrons obtenir par une enquête auprès des utilisateurs. Ceci nous permettra peut-être d’améliorer, lors de nos futurs temps libres, cette application.

Au cours de la réalisation, nous sommes tout le temps rester confiant en ce qui était de la fonctionnalité de l’application, mais des doutes et des inquiétudes ont fait surface quant à la réalisation des animations, qui ne respectaient pas le cahier des charges, et donc les charges ont dues être revues à la baisse, ce qui nous déçoit un peu. Cependant nous restons fier de notre première véritable réalisation en Flash.

Enfin, nous espérons faire évoluer cette application autant que possible, en développant le plus grand nombre de samples adéquats, pour améliorer l’attrait du jeu.

- 12 -