DE OLIVEIRA SANTOS Adrien SI28 : Écriture interactive et multimédia LAMBRY Cyril P16 LAMROUS Sofiane LENHARDT Loïs

1

Rapport de Projet SI28

Melomaniiiac

Introduction Ce projet a été réalisé dans le cadre de l’UV SI28 enseignée par Mr. Serge Bouchardon.

L’un des enjeux de cette UV est de mener à bien un projet par groupe de 3 ou 4 étudiants et de

réaliser une création originale mettant l’accent sur l’interactivité.

Nous avons décidé de créer une application à l’aide du logiciel Construct2. Cette application a pour

but de donner une expérience musicale à l’utilisateur.

DE OLIVEIRA SANTOS Adrien SI28 : Écriture interactive et multimédia LAMBRY Cyril P16 LAMROUS Sofiane LENHARDT Loïs

2

Table des matières Introduction ............................................................................................................................................. 1

Synopsis ................................................................................................................................................... 3

Concept ............................................................................................................................................... 3

Public cible ........................................................................................................................................... 3

Objectif ................................................................................................................................................ 3

Cahier des charges................................................................................................................................... 3

Ressources média ................................................................................................................................ 3

Structure et navigation ........................................................................................................................ 4

Degrés d’interactivité : ........................................................................................................................ 6

Choix techniques ................................................................................................................................. 6

Scénario ................................................................................................................................................... 7

Story-board .............................................................................................................................................. 9

Typographie et charte graphique ........................................................................................................ 9

Impression d’écran de l’application .................................................................................................. 10

Mini jeu Tempo ............................................................................................................................. 10

Mini jeu Rythme ............................................................................................................................ 10

Mini jeu Style ................................................................................................................................. 11

Partie creation ............................................................................................................................... 11

Conclusion ............................................................................................................................................. 12

DE OLIVEIRA SANTOS Adrien SI28 : Écriture interactive et multimédia LAMBRY Cyril P16 LAMROUS Sofiane LENHARDT Loïs

3

Synopsis

Concept Nous souhaitons réaliser une application donnant des notions sur le tempo, rythme et style musical

ainsi qu’une partie de création.

Partie 1 : Découverte et apprentissage

• Tempo : Mini jeu consistant à trouver le bon tempo de plusieurs musiques.

• Rythme : Mini jeu consistant à se familiariser avec la notion de rythme.

• Style : Mini jeu consistant à associer des musiques avec leurs styles.

Partie 2 : Atelier de création

• Création musicale avec la musique Back in Black

Public cible Notre jeu visera un public assez large, notamment :

• UTCéens

• Étudiants à partir du lycée

• Non-musiciens

• Non informaticiens (consignes claires, utilisation simple)

Objectif • Maîtriser les concepts de tempo, rythme et style

• « Créer » son propre thème à partir de pistes préconçues.

Cahier des charges

Ressources média Notre application utilise principalement des musiques, sons et images. La majorité du contenu

sonore sera importée et issue de musiques existantes sauf pour la partie création où les sons seront

réalisés grâce au logiciel Ableton.

Les boutons, images et fond d’écrans sont créés et importés en lien avec notre charte graphique.

DE OLIVEIRA SANTOS Adrien SI28 : Écriture interactive et multimédia LAMBRY Cyril P16 LAMROUS Sofiane LENHARDT Loïs

4

Structure et navigation

Nous avons décidé d’utiliser une structure arborescente hiérarchisée pour donner à l’utilisateur la

possibilité de choisir la partie voulue. Celles-ci sont indépendantes et ont un concept différent ; il est

alors possible pour l’utilisateur de ne faire qu’une seule partie sans avoir besoin d’effectuer les

autres. A l’inverse, s’il décide de découvrir la totalité de l’application, il ne sera pas lassé car les

parties sont diverses et variées. Pour chaque application de la partie découverte, nous avons décidé

de créer plusieurs niveaux de difficulté à la suite. Par exemple, pour la découverte du rythme,

l’utilisateur commence d’abord par un niveau facile, puis un niveau intermédiaire, et enfin un niveau

plus difficile. Les niveaux de difficulté se font obligatoirement à la suite pour que l’on puisse mettre

en place un chronomètre qui mesurera le temps que met l’utilisateur pour effectuer chaque niveau

de difficulté. Ainsi il pourra essayer de battre son propre record.

Il est possible de revenir à la page d’accueil à partir de n’importe quelle autre page.

Page d’accueil :

Bouton “Partie découverte”

Bouton “Partie créative”

Bouton “Quitter”

Bouton “Mute”

Bouton “A propos”

Image de fond

Musique de fond - Daybreak de Michael Haggins

Texte : Titre de l’application “Mélomaniiiac”

Texte : à propos (description du projet, auteurs, objectifs, etc...)

Partie Découverte :

1. Menu :

Titre

Bouton “Tempo”

Bouton “Rythme”

Bouton “Style”

Bouton “Retour”

DE OLIVEIRA SANTOS Adrien SI28 : Écriture interactive et multimédia LAMBRY Cyril P16 LAMROUS Sofiane LENHARDT Loïs

5

Bouton “Désactiver le son”

Image de fond

Musique de fond - Daybreak de Michael Haggins

2. Tempo :

Titre

1 curseur (réglage métronome)

1 métronome animé

Son du métronome

3 musiques :

Rapide → OutKast - Hey Ya!

Moyen → Lilly Wood & The Prick - Prayer in C

Lent → Gorillaz - Clint Eastwood

Bouton “aide”

Texte “aide”

Chronomètre

Bouton “retour”

3. Rythme :

Titre

Image de fond

Timeline + curseur

Symboles représentant les notes à jouer

Bouton “aide”

Texte “aide”

Score

Sons de percussion

Bouton “retour”

4. Style

Titre

Image de fond

Bouton “instructions”

Texte “instruction”

Bouton “retour”

Bouton “valider”

6 musiques

SKA → Ska-p - Ni Fu Ni Fa

Drum & Bass → Kronology - Voyager

Death Metal → Gojira - L'Enfant Sauvage

Gabber → Ophidian - Butterfly VIP

Rocksteady → Judy Mowatt - Silent River Runs Deep

Drill → Chief Keef - Love Sosa

Partie création :

Image de fond

Cases déplaçables

DE OLIVEIRA SANTOS Adrien SI28 : Écriture interactive et multimédia LAMBRY Cyril P16 LAMROUS Sofiane LENHARDT Loïs

6

Timeline

Titre

Sons

Bouton “play”

Bouton “aide”

Texte “aide”

Bouton “retour”

(Bouton “Enregistrer en MP3” + envoyer à un ami)

Degrés d’interactivité : Tempo : Manipulation

Rythme : Manipulation

Style : Introduction de données et manipulation

Création : Manipulation

Notre application se veut très tournée vers l'interactivité étant donné qu’elle est composée de

plusieurs mini jeux pour apprendre les différentes notions de tempo, de rythme et de style.

A travers ces mini jeux l’utilisateur se servira du clavier et de la souris, la partie créativité aussi

permettra à l’utilisateur d'interagir aussi bien pour placer les notes dans la timeline que pour changer

le volume et le tempo de la musique.

L'interactivité passe par l’écoute et la prise en main de l’application via une interface ergonomique

qui offre plusieurs manières d’interagir avec la musique.

Choix techniques Logiciel : Construct2

Technologie : HTML5

Musique : Ableton Live

Images : Photoshop/Illustrator

Contraintes initiales:

L’objectif étant la création d’une application d’initiation à la musique, le logiciel devra prendre en

compte le temps, il devra intégrer une timeline et pouvoir utiliser des loops.

Il devra permettre la création de boutons réactifs au survol, et de boutons mouvants dont la

trajectoire est modifiable par l’utilisateur (métronome).

Le site devra tourner sur la plupart des navigateurs.

Les pistes audio devront être créées spécialement pour l’occasion et destinées à l’usage de

l’utilisateur directement sur le site.

La banque de sons conséquente devra être adaptée à l’utilisation que l’on en fera, soit un format pas

trop lourd.

Les différents fonds, images, boutons et éléments devront être en partie créés spécialement pour

l’occasion.

DE OLIVEIRA SANTOS Adrien SI28 : Écriture interactive et multimédia LAMBRY Cyril P16 LAMROUS Sofiane LENHARDT Loïs

7

Solutions

Pour ces raisons, nous avons choisi le logiciel Construct2. Méconnu, il présentait pourtant toutes les

qualités que nous recherchions, et est facile d’utilisation.

HTML5 étant la technologie la plus utilisée, c’est celle que nous choisirons.

Le logiciel de Musique Assistée par Ordinateur (MAO) Ableton Live étant déjà maîtrisé par l’équipe, il

a été désigné. Sa grande banque d’instruments logiciels permet la création des différentes pistes.

Nous n’écartons cependant pas l’usage d’Audacity si celui-ci se fait ressentir.

Photoshop et Illustrator seront utilisés pour la création et le traitement des images du site. Certains

éléments devront être vectoriels comme les boutons mouvants, et quelques-uns seront matriciels.

Difficultés :

La première difficulté s’est fait ressentir sur le choix du logiciel. En effet, bien que Construct2

soit la meilleure alternative, le placement de boutons réactifs à une timeline doit être très

précis, pour respecter le rythme de la musique. Nous avons finalement réussi à créer

plusieurs “points d’ancrage” paramétrés auparavant pour que le drag & drop n’interfère pas

avec le rythme.

Chronomètre réel vs chronomètre de Construct2

Scénario Italique : éléments scénaristiques visuels, audios ou dynamiques. En rouge : Textes affichés

1. Accueil La musique de fond “Daybreak” se met en boucle dès l’arrivée sur la page. Le titre: MELOMANIIIAC Partie découverte: Tempo / Rythme / Style Partie création: Création

2. Tempo Il n’y a pas de musique de fond La fenêtre de texte suivante apparaît: “Le tempo est ce qui désigne la vitesse à laquelle est jouée une chanson. De manière scientifique, on le définit en nombre de temps marqués ou beats par unité de mesure du temps, la minute, d’où l’anglais Beat Per Minute ou BPM. Ainsi, un morceau joué à 200 bpm sera joué deux fois plus vite qu’à 100 bpm.” Un bouton “Ok” permet de passer à la fenêtre de texte suivante. “Un métronome est un outil qui permet de marquer le tempo. Si on le règle à 100 par exemple, alors il émettra 100 temps par minute, marqués par un son“. Un bouton “Ok” permet de passer à la fenêtre de texte suivante. “Dans cet atelier, tu vas exercer ton oreille et essayer de trouver le tempo d’une musique. Pour cela, fais glisser la molette du métronome avec la souris et relâche la quand tu penses que le tempo du métronome est le même que celui de la musique“. Un bouton “Ok” permet de passer à l’atelier proprement dit. Une fois le bon tempo trouvé, la fenêtre de texte suivante apparaît:

DE OLIVEIRA SANTOS Adrien SI28 : Écriture interactive et multimédia LAMBRY Cyril P16 LAMROUS Sofiane LENHARDT Loïs

8

“Bravo, tu as trouvé le bon tempo en x secondes ! Tu peux maintenant passer à la difficulté supérieure” Une fois le dernier niveau de difficulté réussi, la fenêtre de texte suivante apparaît: “Bravo, tu as trouvé le bon tempo en x secondes ! Tu peux maintenant passer à une autre activité”

3. Rythme Il y a une musique de fond qui change en fonction du niveau de difficulté La fenêtre de texte suivante apparaît: “Le rythme désigne la structure qui va se répéter pendant le morceau. Jouer en rythme revient à jouer les bonnes notes au bon tempo, mais aussi sur les bons temps.” Une flèche vers la droite permet de passer à la fenêtre de texte suivante. “Pour jouer en rythme, utilise les touches A et Z de ton clavier. Quand un signal de note passe dans le cadre dédié, tu dois appuyer sur la touche correspondante au bon moment. Lance le morceau avec la touche ESPACE de ton clavier.” Un bouton “Ok” permet de passer à l’atelier proprement dit. Si l’utilisateur réussit toutes les notes, la fenêtre de texte suivante apparaît: “Bravo, tu as le rythme dans la peau ! Tu peux maintenant passer à un autre atelier.” Le bouton “Ok” renvoie l’utilisateur à la page Accueil.

4. Style Il n’y a pas de musique de fond La fenêtre de texte suivante apparaît: “Le genre musical est un ensemble de formes de même caractère, réunies par leur destination ou par leur fonction. Le genre musical est un concept sans limites précises. Il est impossible de faire une liste complète des genres ou styles. La dénomination d’un genre peut venir d’une expression qui a marqué une scène musicale, de techniques ou sources sonores utilisées par le genre musical, de son origine géographique, ou de l’intention que porte le style. Ainsi le Gospel est une expression de la souffrance des esclaves noirs américains, le Gangsta Rap raconte la vie dans les ghettos et la tropical house fait danser les jeunes pendant les festivals estivaux.” Un bouton “Ok” permet de passer à la page suivante. “Pour vérifier ta connaissance du style, passe ce test ! Tu peux écouter différents extraits en cliquant dessus, et ensuite y associer un style en les faisant glisser avec ta souris.” Un bouton “Ok” permet de passer à l’atelier proprement dit. Une fois l’atelier terminé (quand l’utilisateur a trouvé les 6 bonnes correspondances musique/style), la fenêtre de texte suivante apparaît: “Bravo ! Les styles musicaux n’ont plus de secret pour toi ! Tu peux maintenant passer à une autre activité” Il peut passer à la suite avec un bouton Ok”.

5. Création Il n’y a pas de musique de fond La fenêtre de texte suivante apparaît: “Dans cet atelier, tu peux donner libre cours à ton imagination et remixer le titre Back in Black du groupe AC/DC. Chaque carré représente quelques secondes du morceau jouées par un instrument, dans un style particulier. Remplis le quadrillage avec les carrés, puis appuie sur le bouton jouer pour lancer ton remix !” Un bouton “Ok” permet de passer à l’atelier proprement dit.

DE OLIVEIRA SANTOS Adrien SI28 : Écriture interactive et multimédia LAMBRY Cyril P16 LAMROUS Sofiane LENHARDT Loïs

9

6. À propos

La musique de fond “Daybreak” est toujours en route. La fenêtre de texte suivante apparaît: “Le site MELOMANIIIAC a été réalisé à l’UTC par Adrien DE OLIVEIRA SANTOS, Cyril LAMBRY, Sofiane LAMROUS et Loïs LENHARDT dans le cadre de l’UV SI28 sous la supervision de M. Serge Bouchardon. Les logiciels utilisés sont Construct2, Ableton Live, Adobe Photoshop et Illustrator.” Contacts: adrien.de-oliveira-santos@etu.utc.fr cyril.lambry@etu.utc.fr sofiane.lamrous@etu.utc.fr lois.lenhardt@etu.utc.fr” Un bouton “Ok” renvoie à la page où l’utilisateur était précédemment.

Story-board Typographie et charte graphique Voici les choix qui ont été fait concernant la typographie :

Titre: Melomaniiiac

Police “Edo”, taille 72, couleur rouge.

Sous-titre: Tempo, Rythme Police “Californian FB”, taille 48?, couleur blanche

Bouton: JOUER, VALIDER, SON...

Police “Bernard MT condensed”, taille 18, couleur noir.

Texte: Ce jeu consiste à trouver la bonne musique avec le style correspondant…

Police “ Californian FB ”, taille 12 à 24, couleur noir, sur fond clair.

Nous avons fait nos choix en fonction de la lisibilité, de la cohérence et de nos goûts. Le rendu avec le

logiciel Construct2 est à la hauteur de nos attentes.

DE OLIVEIRA SANTOS Adrien SI28 : Écriture interactive et multimédia LAMBRY Cyril P16 LAMROUS Sofiane LENHARDT Loïs

10

Impression d’écran de l’application Accueil

Mini jeu Tempo

Mini jeu Rythme

DE OLIVEIRA SANTOS Adrien SI28 : Écriture interactive et multimédia LAMBRY Cyril P16 LAMROUS Sofiane LENHARDT Loïs

11

Mini jeu Style

Partie creation

DE OLIVEIRA SANTOS Adrien SI28 : Écriture interactive et multimédia LAMBRY Cyril P16 LAMROUS Sofiane LENHARDT Loïs

12

Conclusion La réalisation de ce site nous a permis d’aborder et de mettre en œuvre beaucoup d’aspects de l’interactivité multimédia. Notre projet utilise le son et la vue et la liaison entre les deux se fait en rythme, par le toucher. La réalisation du projet s’est faite sans trop d’accrocs, justement car les différentes parties pouvaient partager le travail entre les membres du groupe, avec l’aval des autres membres du groupe, bien évidemment.

Nous avons observé certains problèmes liés à la technologie, simplement car des programmes devant tourner “en rythme” ne peuvent tolérer aucune latence. Même si son interface n’est pas complexe, c’est bien la mise en place de l’exercice sur le métronome qui se fit la plus compliquée.

L’importance du choix des commandes lors de la création des programmes s’est relevée importante lorsque nous fûmes limités pendant un moment à 100 commandes par partie.

La partie la plus intéressante fut cependant celle de conception théorique, avant même de toucher à

l’ordinateur. Réfléchir aux moyens de faire visualiser la musique, et définir des termes flous comme

“rythme” et “style” par le multimédia était un défi, que nous avons su relever en nous inspirant de

nombreux outils musicaux déjà existants : logiciels de remix, métronomes anciens, néo-partitions,

comportement d’un chef d’orchestre et même des jeux éducatifs pour enfants.