1
1. How to design a look and feel of xylophone app at Desiggner” screen Let’s learn the program skill called “subroutine” while making the xylophone app. You must save the app we made earlier in the NUC because we are going to use the app’s “Designer” screen here and for a game app later. In the “Components” section, delete all the components except for “Blue_Button” and “Red_Button”. Change the component’ name to “Two_Buttons” which should include the subcomponents of blue and red buttons. Change the two buttons’ text to “Play” and “Reset” respectively. Bring 8 buttons from the “Palette” section to show from low to high C notes of the xylophone keyboard. For each button, set ‘Width’ as ‘Fill Parent’ and ‘Height’ as 40 pixels in the ‘Properties’ section. Change the background colors to the xylophone keyboard colors. Download each key’s sound source from the homepage. Select the sound files saved in the NUC by clicking on ‘Upload File…’ of the ‘Media’ section below the ‘Components’ section. To utilize these, bring ‘Sound’ component in the ‘Media’ category of the ‘Palette’ section.
2
Change ‘Minimuminterval’ of the “Properties” section from 500ms to 0. You should also change the text on top of the keyboard. Now, start programming on the “Blocks” screen.
3
2. Brining sound files before the “runtime” In the “Button1” component, find and drag the “whenButton1.Click” block.
Fill it with two blocks of ‘set Sound1.Source to’ and ‘call Sound1.Play’ in the ‘Sound1’ component.
In the empty socket, bring the “text string” block and type in “1.wav”. Duplicate 4 more of these blocks and fix them to correspond to the situation.
4
An Error Message will appear when you first click the keys through the Emulator. But there will be no problem from the next time. It would not be good if the same problem arose every time you started the app.
Thus, we have found and dragged the ‘when Screen1.Initialize do’ block in the ‘Screen1’.
Inside it, we put three ‘set Sound1.Source to’ blocks. Fill the empty sockets with “text string” blocks and type in 6, 7, and 8.
5
Duplicate the same blocks as we did before three more time and fix them to correspond to the situation. Click the “Reset Connection” in the ‘Connect’ menu of AI2 screen.
When you start the Emulator again, you will find that there is no error message only when you click on the 6th,7th and 8th keys and that it plays well from the beginning. Why do you think this is so? The sound source files we have used are not the resources that Android originally has. You bring sound sources at the time of a ‘runtime’ situation, such as when you click on the keys. But this takes time, so sound cannot be played right away. This is solved when you explicitly bring in sound sources as soon as the app begins.
6
3. Making Subroutine There are many repetitions in our second app. In this case, programmers make a separate “subroutine”. In AI2, you can use the “Procedures” component, which is in Built-in. When our first subroutine is called, make sure that the ‘Sound1’ component is played after each sound source file is assigned. Think of the inside of the subroutine first. Drag the “SetSound1.Source to”. To fill the socket, bring the “join” block of the “Text” component. The blue box on the upper left corner of “join” is called “mutator”. When you click on this, you will find that “join” is composed of multiple strings.
Enter ‘.wav’ in the lower socket after bringing in the ‘text string’ block. In the upper socket, fill it with the ‘get’ blocks of the ‘Variables’ component in order to get numbers from 1 to 8. When you place the “call Sound1.Play” block on the bottom, the subroutine’s body is complete.
7
In order to set when the Subroutine should operate, bring in the ‘to procedure’ block of the ‘Procedures’ component and make it surround the subroutine’s body. Name the Subroutine as ‘PlayNote’.
Click on the procedure block’s ‘mutator’, and place ‘input: x’ in the ‘inputs’ block in the mutator. Change ‘x’ to ‘number’. When you click on the arrow of the ‘get’ block, you will find that ‘number’ has been automatically created.
8
4. Call the subroutine We have programmed the subroutine’s functions. This time, we are going to program where and how to call the subroutine and operate it. On the left side of the “Blocks” screen, you will find a new block called “call PlayNote number” in the ‘Procedures’ component. This is because we have set the subroutine’s name as “PlayNote” and argument’s name as “number”. ‘Argument’ is a bag that will hold the contents when we call the subroutine. Place this block into the “when Button1. Clicked” block. To fill the socket, bring the “text string” block and type in “1”.
Duplicate these blocks 7 times and move them to a suitable place and change the values. When you use the Emulator to play it, you will find the same result as when you don’t use the subroutine. Subroutine shows more of its ability when the contents inside it are complex. In the program, it enables us to Reuse, Reduce and Recycle. It is ‘Readable’ because you can focus on the main part of the program once you take out the redundant parts. It is ‘Rapid’ because CPU’s ‘Cache’ facilitates the frequently repeated jobs according to the theory called ‘program locality’.
9