Embedded Files
Touch!
Touch!
When programming software it's important to consider everyone who may want to use your program. This means considering different ways people interact with your content.
Let's start with touch. What would it take to modify the machine for use on a touch device like an iPad or Surface?
The next steps will guide you through a few easy steps to make your machine ready for touch.
4.1
This is actually much easier than you may think. Let's create a workflow, since we will need to make this change to every pad sprite in the program.
Let's look at the code for the [Z] sprite.
STEP 1: Select the sprite and open the code tab.
4.2
STEP 2: Right mouse click (Ctrl+Click) the line of code that holds the sound block.
4.3
STEP 3: Select "Duplicate" from the dropdown.
4.4
STEP 4: Place the duplicated stack to the right of your original stack.
4.6
STEP 5: Separate the stack from the [When I receive...] block by clicking the stack at the [If] block and dragging the stack down.
4.5
STEP 6: Drag the [When I receive] to the block library to remove it from your coding area.
4.5
STEP 6: Locate the [When this sprite is clicked] block and place it on top of the duplicated line of code.
Let's Recap!
Let's Recap!
STEP 1: Go to the Pad code tab.
STEP 2: Ctrl+Click the line of code
STEP 3: Duplicate the line of code.
STEP 4: Place the duplicated stack
STEP 5: Separate the stack from the Event block.
STEP 6: Locate
Repeat this process for all 16 pads.
Repeat this process for all 16 pads.
Once, you are finished be sure to check your code by using the Green Flag to run your software. Then, let's move on the next steps!
RESPONSIVE DESIGN!
RESPONSIVE DESIGN!
Finally let's bring some life to our machine. User experience (UX) design is equally important to the user interface (UI) when developing software. Responsiveness is key. If you played the completed beat machine before this build you may have noticed that the pads light up when hit. Let's make your machine light up too!
4.6
Let's start by selecting the [Z] sprite. Then, click the [Costumes] Tab.
4.7
You'll notice that we've got several choices in backlit colors to choose from. In the next steps we will be adding code that switches to one of the backlit colors each time the pad is played.
4.9
Click the [Code] tab and find this line of code.
You'll notice some code about broadcasts which you don't need to know about for this build. But if you were curious, the broadcasts blocks in this machine are used to tell the blue display screen what to show.
4.10
Next, drag two [Switch costume to ____] blocks into the coding area.
Use the dropdown to change one to "Pad - color of your choice" and the other block to "Pad - OFF"
4.11
Drag the [Switch costume to Pad - Color] brick into the line below [broadcast - note on]
4.12
Drag the [Switch costume to Pad - OFF] brick into the line below [broadcast - note off]
Let's test our code!
Let's test our code!
Click
Then press
Then press
Did it LIGHT UP?
Did it LIGHT UP?
4.13
If it worked, great! Go to the code tab for the [X] sprite to repeat the process.
You will need to add these two costume blocks to every "Pad" sprite on your machine.
You will need to add these two costume blocks to every "Pad" sprite on your machine.
You get can get creative with this part choosing to use all of the same color or different colors for each pad.
You can even modify how long the pad lights up by changing the [wait (time) seconds] block. What do you think the code to the right will do?
Google Sites
Report abuse