Monday, December 17, 2012

Baby piano sample

In this sample we will try to show you how to do a simple baby piano by using JM-Mobile Editor. The sample application generated for Android can be download here Bebepiano-release.apk

The Sample will show how to use:

  • the round rectangle to create the piano touches;
  • the color to fillPaint, LinePaint to decorate the piano touches;
  • the Pressed Event Behavior to allow playing the audio when pressing on the piano touches;
  • the Color animation to create the visual effect when pressing on the piano touches;
  • the Exclusive and Parallel temporal structures to create the background music and drum buttons;
  • etc. 

In fact each piano touch is composed of a round-rectangle and a text to name the piano touch, e.g. the touch Do has the RoundRect_Do and TextTitle_Do.

There is a list of audio grouped in the ParGroup_NodeAudio. By default the begins of these audio are indefinite, i.e., the audios won’t be played automatically. 

Then on each the RoundRect of the piano touches there is a pressed event behaviours (PtPressedEventBehaviour) that will allow to define the action when user presses on the touch (RoundRect), the action defined in this case is to start playing the audio corresponding in the ParGroup_NodeAudio group.

The touch pressing also activates a color animation on the background color of the touch (RoundRect) to make a visual effect of the pressing.


We use the Exclusive structures of an image and a parallel group (ParGroup_MusicOn and ParGroup_DrumON) to make two buttons background music and background drum. Note that the Exclusive group is a temporal structure that allows only one child being active at a moment.

By default the images representing of the music and drum deactivating are displayed (Image_MusicOff and Image_DrumOFF), when user presses on these images the MusicOn/DrumON part will be activated. As they are in the Excl structure so the activations of the MusicOn/DrumON part will automatically deactivated the off images (Image_MusicOff and Image_DrumOFF).

You can download the JM-Mobile project of the sample here babyPianoSampleProject.


(1) the sample is only tested on Samsung Galaxy III, if you have any problem on your tests please give me a feedback.

(2) By now JM-Mobile doesn’t treat the multi-touches so the user can play only one piano touch at time.

(3) The sample uses the midi audio file format that JM-Mobile Editor doesn't know to handle. So when open this sample on JM-Mobile Editor you will get some warning popup.

No comments:

Post a Comment