The Music App

Do you know DJ Panda? It's time for a mash up! Learn how to have fun with your sounds using all components of the studio. Let's rock!

This is an application to the advanced users. It gives a good overview of the Synchonization component + the Multi-state + the Audio management + the Sensors + the foreground and background.

There are five screens in this application, a homepage and three mash-up propositions (+ a screen variant):

  1. Imagine Dragons feat. Daft Punk (2 screens)

  2. Nirvana feat. The Jackson Five

  3. Michael Jackson feat. Daft Punk


1. The homepage**

It is divided into four states to create a "jukebox" effect of rotation and selection of CD albums.

State 1 contains two CD wheels (images) and a "start" button (Multi-state component "start the experiment," 2 states ). When touching the button, this one seems pushed (second state of the Multi-state) and when released, it redirects to state 2.

When displaying state 2, images have a new rotation. A duration has been defined to slow down the transition between state 1 and state 2. Album descriptions appear (transition between a virgin state to a state with description, Multi-state "play or select" 4 states) but also a PLAY button (Multi-state "start", 2 states) and the option to turn the wheel again (Interactive Area). Touching the PLAY button leads to the second screen. If I choose to turn the wheel again, when I touch the interactive area, there's no album description anymore (change of state, multi-state "select or play") and it goes to state 3.

In state 3, there's the same construction as in state 2 with a new album description (other state, multi-state), a new PLAY button (other state, multi-state) to the third screen and it's still possible to turn the wheel again (Interactive Area).

If I choose to turn it again, I go to a fourth state, to a screen 4 in which when I press PLAY, I can go back to state 2 if I want.


2. The screen Daft Punk feat. Imagine Dragon***

It is composed of 3 states to create a nice effect.

In state 1, the album is closed and a PLAY button (multi-state "play-pause", states 2) is located above the album. State 2 is automatically displayed after displaying state 1. A duration was specified to slow down the transition between the two states.

In state 2, the album opens (image) and the background color changes (change of the background). Under the album there are all the buttons on the following activity (multi-state), with 0% opacity, which allows a transition from state 2 to state 3 with a change of position, as with the album. State 3 is automatically displayed when displaying state 2.

In state 3, there is the content of this mash-up (change opacity to 100%). The sound automatically starts and the multi-state "play-pause" goes from the default marker PLAY to PAUSE. Sound is synchronized (synchronization component "Scoll sync") with the progress bar (scroll box component "scroll"). Below, each button is built the same way: when touching, the background changes and the button is pressed (second component state). We can hear the sound. When it is released, the background changes again and the button is raised.

When touching the "initiation mode", I go to the screen 3, which corresponds to the alternative mode of this mash-up.


3. The alternative mode****

In this new mode, the buttons automatically light up at the right time to tell the user when to press. Markers were placed on the sound for triggering the action of lightening the buttons.

When opening the screen, the sound starts. The upper part of the screen (above Daft Punk buttons) is the same as in the previous screen.

On each button, there are no more 2 but 3 states: the new state is the "on" state.

On the Imagine Dragons sound, 36 markers (yes, yes) were placed at different times and each marker triggers the change of state for a button (multi-component state): the button lights in and when touching, the right sound starts.

In the foreground, there's an icon to return to the menu: you just have to touch it.

 Note: This screen could very well be treated as the state 4 of screen 2. We have created it in a separate screen only to make it easier for you and define the action on the sound markers.


4. The screen Nirvana feat. The Jackson Five*****

The first two states are built the same way as the first two states of screen 2.

In state 3, there is the content of the mash-up (change opacity to 100%). When displaying the state, the PLAY button goes into PAUSE (change of state, Multi-state component "play pause", 2 states) and the sound "rockin 'robin' starts. On this sound, markers were created to activate the counter (multi-state component "counter" 15 states). At the end of the sound, a last marker redirects the fourth state.

On the fourth state, a motion sensor ("motion - speaker") was set horizontally, in order to turn on the visual speakers (multi-state "speaker") and the counter (multi- state "counter") according to the tilt. Four markers were defined: one leftmost to turn on the Nirvana speaker, two to define an area in the middle with the speakers turned off, the last righ to turn on the Jackson Five speaker. Two other motion sensors define the precise area where to ​​launch the 2 audios, Nirvana and The Jackson Five.


A first synchronization between the "nirvana motion" sensor and the sound "nirvana" allows to take into account the horizontal axis and the volume of the first sound. A second synchronization between the "rockin'robin motion" sensor and sounds "rockin'robin instrumental" and "Voice rockin'robin" allows to take into account the horizontal axis and the volume of the second sound. Two motion sensors with different minimum and maximum values ​​on the horizontal axis have been created to allow two sounds to be cut when the shelf is right (parallel to the ground). If we had used one motion sensor to the two sounds, in upright position, the two sounds were played simultaneously with a volume of 50%.


5. The screen Mickael Jackson feat. Daft Punk****

When displaying the state, vinyls turn on themselves (multi-state component "big digital vinyl love", 3 states with an automatic transition between states and a duration of 10s) and album covers open (multi-state component "covers" change of state, two states).

Vocals play automatically: they are placed in a multi-state component (mickael jackson and digital love) to ensure that they start at the same time as two other sounds, placed in a multi-state. Volume is controlled by a synchronization that includes the audio file and a scrolling area. This is the volume which is related to the vertical position of the scrolling area. There are two synchronizations, one for each sound.

The switch button (multi-state component) allows you to choose the instrumental. In each state are the two audio files, but with a different volume. On state 1, one is at maximum volume and the other at 0; on state 2, it's the opposite. This allows, when going from one state to another, to mute a sound while increasing the second file; well, sounds are never stopped and play well together.

When the sounds are at the end, vinyls stop rotating (change of state of each multi-state).


To go further:

Was this article helpful?
0 out of 0 found this helpful

Create today your interactive content

Easy-to-use ∗ Free ∗ No installation