App Inventor Task 3 - Munchin' Pizza
This page will teach you how to make a simple app that changes pictures when a button is pressed.
​
You can make the app more complex by adding sounds or additional buttons.
Step 1: Set up
Open App Inventor 2 (use the button on the right) and create a new project. You will need to log in with a Google account.
​
Download the picture images from the zipped folder on the App Inventor 2 Basics page here.
Once you have downloaded the pizza pictures you will need to upload them. Find the Media tab on the right side of App Inventor and click 'Upload File...'
You will need to upload each picture individually.
In the Palette tab on the left side, drag two buttons into the middle screen so they look like this:
In the Components tab on the right, click on Button1 and click the Rename button at the bottom to change it to Pizza. Then Rename Button2 to Munch. This will help us when we code later as it will be less confusing.
Click on the second button (Munch) that you just dragged into the centre then look in the Properties tab on the right and scroll down to Text.
Change 'Text for Munch' to something like 'Munch Pizza'.
Now click on the first button in the centre (Pizza) and in the Properties tab, click on Image and select the first image.
​
It should be the full slice of pizza.
​
When you have set the image, you might notice it goes a bit crazy. Still in the Properties tab, change the Height and Width to 'Fill parent...' for both. This will make the image fit within the boundaries of the screen.
Finally, change the Text for the Pizza button to be blank. Otherwise it will appear on top of the pizza and look odd.
So far you should have a button disguised as a pizza and another button that tells you to munch that lovely cheesy deliciousness.
​
If your program does not look like this, read the instructions above again carefully.
Step 2: Code
Click on the Blocks button in the top right to start adding code.
In the Blocks tab on the left side click on Munch and drag the when Munch Click block into the centre.
This block will execute any code inside of it whenever the munch button is clicked.
In the Blocks tab on the left side click on Logic and drag an if then block and snap it inside the block you just dragged over.
Click on the blue cog button and drag four else if blocks inside the if block at the bottom.
​
The blocks at the top will automatically update when you drag the blocks under the if block underneath.
Because we are using different images, we need to check which image is currently being displayed, so we know which picture to change to.
​
Firstly we want to check if the first image is being displayed. Connect an = block from the Logic section.
​
Then add a Pizza Image block from the Pizza section.
Lastly grab a " " block from the Text section and write the name of your first image inside (e.g. pizza1.jpg) Don't forget the extension (.jpg).
But what does this code actually mean? It is checking to see what the current pizza image is. And if it is pizza1.jpg then it is going to...
​
...change the picture to pizza2.jpg, as if someone has munched the pizza!
​
Grab a set Pizza Image to block from Pizza and then snap another " " block from Text and add the pizza2.jpg text inside.
Now that we have written the code to check the current picture and move it to the next one when pressed, we just need to copy this for the other four pizza pictures.
​
Rather than select all the blocks again, right-clicking on the blocks and selecting 'Duplicate' will copy them. Copy each block and then change the values so that if pizza2.jpg is the current image, then it sets it to pizza3.jpg and so on.
​
Make sure that pizza5.jpg sets the image to pizza1.jpg so that it goes round in a loop.
​
Program 3 Complete!
Step 3: Run
The easiest way to run an app that you have created at home using App Inventor 2 is to download the free MIT AI2 Companion App on your smartphone from the Google Play Store. At the top of the App inventor program on your computer, click on Connect and AI Companion. This will generate a six-digit code you can type into your phone.
​
If your school has the emulator installed, you can also use this to test your app.
Extra Step: Challenges
1. Create your own images and upload them. You can easily create your own set of pictures and link them together. Why not try:
​
-
Eating a different type of food (e.g. cookie or doughnut).
-
A simple scene that changes from night to day.
-
A simple character that changes appearance (like Pikachu powering up a thunder strike with each button press).
2. Add a sound effect whenever a button is pressed. In the video at the top of the page, you'll see I have a 'munch' sound whenever the button is pressed. You could record this sound yourself or use a sound effect site.
​
Once you have got your sound file (it should be short and .mp3) you need to upload it, just like you uploaded your images. In the Designer layout click 'Upload file...' in the Media tab on the right.
Then look in the Palette tab on the left side, open the Media section and drag a Sound block into the centre. It will appear underneath the phone screen in a section called 'non-visible components' which is fine.
​
Now click on Properties on the right side and choose the sound file you just uploaded in the Source box.
Click on the Blocks button in the top right to start adding the code!
In the Blocks tab on the left side, click on Sound1 and drag the call Sound1 Play block directly underneath when Munch click. This will play the sound everytime the button is pressed.
3. Add more buttons. You could add a second clickable button which reverses the pattern and a third button that resets the order back to the first image.
Adding new buttons is easy - drag them from the Palette tab in the Designer layout.
Change the button text in the Properties tab and the name of the button in the Components tab.
​
To add code, click on Blocks in the top right then you can duplicate the code for Munch by right-clicking and choosing Duplicate. Now just change the values to what you want. If you are making a reset button, you don't need an if then statement, just set the image to your first image when the button is clicked.
​
Keep messing around with the program and have fun!