L'App Musique

Panda se transforme en DJ le temps d’un mash up. Amoureux de la table de mixage, apprenez à vous amuser avec vos sons grâce à tous les composants du studio. Let’s rock!

 

C’est une application complète à destination d’utilisateurs aguerris. Elle vous permettra un bon aperçu de la synchonisation + le composant multi-état + la gestion de l'audio + les capteurs + l'avant-plan et l'arrière-plan.

L’application est construite en cinq écrans, un menu d’accueil et trois propositions de mash-ups (+ une variante d’un écran) :

  1. Imagine Dragons feat. Daft Punk (2 écrans)

  2. Nirvana feat. The Jackson Five

  3. Mickael Jackson feat. Daft Punk

 

1. L'écran d'accueil**

Il se décompose en quatre états pour réaliser cet effet “jukebox” de rotation et de sélection des albums CD.

L’état 1 comprend les deux roues à CD (images) et le bouton de lancement (composant multi-état “start the experiment”, 2 états). Au toucher du bouton, celui-ci s’enfonce (2ème état du multi-état) et une fois relâché, amène sur l’état 2.

A l’affichage de l’état 2, les images changent de rotation. Une durée a été ajoutée afin de ralentir la transition entre l’état 1 et l’état 2. Les textes de description des albums apparaissent (passage d’un état vide à un état avec description, multi-état “play or select”, 4 états), ainsi qu’un bouton PLAY (multi-état “start”, 2 états) et l’option de relancer la roue (zone interactive). Toucher le bouton PLAY amène au 2ème écran. Si je choisis de relancer, quand je touche la zone interactive, j’enlève la description d’album (changement d’état, multi-état “play or select”) et dirige vers l’état 3.

Dans l’état 3, je retrouve la même construction que dans l’état 2 avec une nouvelle description d’album (autre état, multi-état), un nouveau bouton PLAY (autre état, multi-état) vers le 3ème écran et toujours la possibilité de relancer (zone interactive).

Si je choisis de relancer, j'atterris sur un 4ème état construit de la même façon, vers un écran 4 quand j’appuie sur PLAY et qui permet de reboucler avec l’état 2 si je le désire.

 

2. L'écran Daft Punk feat. Imagine Dragon***

Il est composé de 3 états qui permettent une apparition sympa de l’activité.

Dans l’état 1, l’album est fermé et un bouton PLAY (multi-états “play-pause”, 2 états) est situé au-dessus de la pochette. Automatiquement, à l’affichage de l’état 1, l’état 2 est lancé. Une durée a été spécifiée pour ralentir la transition entre les 2 états.

Dans l’état 2, l’album s’ouvre (image) et le fond d’écran change de couleur (changement d’arrière-plan). Sous l’album se trouvent tous les boutons de l’activité suivante (multi-états), en opacité 0%, ce qui permet d’obtenir une transition de l’état 2 à l’état 3 avec un changement de position, comme avec la pochette d’album. Automatiquement, à l’affichage de l’état 2, l’état 3 est lancé.

L’état 3 fait apparaître le contenu de mon activité (opacité modifiée à 100%). Le son se lance automatiquement et le multi-état “play-pause” passe du marqueur par défaut PLAY à PAUSE. Le son est synchronisé (composant synchronisation “synchro scoll”) avec la barre de progression (composant zone de défilement “scroll”). En-dessous, chaque bouton est construit de la même façon : au toucher, l’arrière-plan change et le bouton s’enfonce (2ème état du composant). On entend le son. Quand il est relâché, l’arrière plan change à nouveau et le bouton se relève.

Au toucher sur “initiation mode”, je me dirige vers l’écran 3, qui comprend le mode alternatif de ce mash-up.

 

3. Le mode alternatif****

Dans ce nouveau mode, les boutons s’illuminent automatiquement au bon moment pour indiquer à l’utilisateur quand appuyer. Ainsi, des marqueurs ont été placés sur le son pour déclencher l’action d’allumer les boutons.

Quand j’arrive sur l’écran, le son se lance. La construction de la partie haute de l’écran (au-dessus des boutons de Daft Punk) est identique à l’écran précédent.

Sur chaque bouton, ce n’est plus 2 états mais 3 qui sont présents. Le nouvel état correspond à l’état “allumé”.

Sur le son Imagine Dragons, 36 marqueurs (oui, oui !) ont été placés à des temps différents et chaque marqueur déclenche le changement d’état d’un bouton (composant multi-état) : le bouton s’allume et au toucher, le son correspondant se lance.

Dans l’avant-plan, une icône est créée pour permettre de revenir au menu au simple toucher.

 Note : Cet écran aurait très bien pu être traité comme un état 4 sur l’écran 2, nous l’avons réalisé dans un écran à part uniquement pour simplifier la prise en main de l’application sur le studio, et mettre l’action sur les marqueurs du son.

 

4. L'écran Nirvana feat. The Jackson Five*****

Les deux premiers états sont construits de la même façon que les deux premiers états de l’écran n°2.

Dans l’état n°3 apparaissent les éléments de mon activité (par un changement d’opacité de 0 à 100%). A l’affichage de l’état, le bouton PLAY passe en PAUSE (changement d’état du composant multi-état “play pause”, 2 états) et le son “rockin’ robin” débute. Sur ce son, des marqueurs ont été placés pour faire défiler le compteur (composant multi-état “counter”, 15 états). A la fin du son, un dernier marqueur dirige vers le 4ème état.

Sur le 4ème état, un capteur de mouvement (“motion - speaker”) a été paramétré horizontalement pour, en fonction de l’inclinaison, allumer les visuels haut parleur (multi-états “speaker”) et le compteur en conséquence (multi-état “counter”). Quatre marqueurs ont été définis : l’un le plus à gauche pour allumer le haut-parleur de Nirvana, deux pour définir une zone au milieu avec les haut-parleurs éteints, le dernier le plus à droite pour allumer le haut-parleur des Jackson Five. Deux autres capteurs de mouvement ont défini la zone précise de lancement des 2 audios, Nirvana et The Jackson Five.

 

5. L'écran Mickael Jackson feat. Daft Punk****

A l’affichage de l’état, les vinyls tournent sur eux-mêmes (composant multi-état “big vinyl digital love”, 3 états par une transition automatique entre états et une durée de 10s) et les pochettes d’albums s’ouvrent (composant multi-état “covers”, changement d’état, 2 états).

Les sons vocaux sont lancés par une lecture automatique : ils sont placés dans un composant multi-état (mickael jackson and digital love) pour s’assurer qu’ils démarrent en même temps que les 2 autres sons, placés également dans un multi-état. Le volume est contrôlé par une synchronisation qui comprend le fichier audio et une zone de défilement. C’est le volume qui est lié à la position verticale de la zone de défilement. Il existe 2 synchronisations, une pour chaque son.

Le bouton switch (composant multi-état) permet de choisir l’instrumental. Au niveau de chaque état se trouvent les 2 fichiers audio, mais avec un volume différent. Sur l’état 1, l’un est au volume maximum et l’autre à 0, sur l’état 2 c’est l’inverse. Cela permet, lorsque l’on passe d’un état à l’autre, de couper le son d’un fichier tout en augmentant le son du deuxième ; ainsi, les sons ne sont jamais arrêtés et jouent bien en même temps.

Quand les sons sont terminés, les vinyls arrêtent de tourner (changement d’état de chaque multi-état).

Pour en savoir plus :

 

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0

Créez votre contenu interactif dès aujourd'hui

Simple d'utilisation ∗ Gratuit ∗ Pas d'installation

COMMENCEZ MAINTENANT !