Day 4: HelloPurr / Media
What We're Going to Learn Today
In today's tutorial, we are going learn how to upload media (pictures and sounds) to use in an app. We are going to make an app that is a picture of a kitty that meows when you pet it.
Getting Started
Go to the MIT App Inventor and log in using your google account
Click on "My Projects" on the top and then press the New button.
Name the new project Day4
Click on Day4 to open it
Connect Your Emulator
Select Connect from the menu bar at the top of the page and click on Emulator to launch it
Once the Emulator is running go on to the next step
Let's Start
Download this picture of a cat and this sound file: kitty.png & meow.mp3
Drag and drop the Button component to Screen1.
In the list of Properties, under Image, click on "None..."
Click "Upload File..." at the bottom of the window
Select the the "kitty.png" file you downloaded earlier and click OK.
Delete "Text for Button1" listed under the Text property using the Backspace key to remove the text on the image.
Add a Label
Under Palette:
Drag and drop the Label component to the Viewer, placing it below the kitty. It will appear under your list of components as Label1.
Under Properties:
Change the Text property of Label1 to read "Pet the Kitty". You'll see the text change in the Designer and on your Emulator.
Change the BackgroundColor of Label1 by clicking on the box to your choice
Change the TextColor of Label1 to your choice
Change the FontSize of Label1 to 30
Add a Sound
Under Palette:
Click on the header marked Media to expand the Media section of the palette of components.
Drag out a Sound component and place it in the Viewer. Wherever you drop it, it will appear in the area at the bottom of the Viewer marked Non-visible components as Sound1.
Under Media in the Components section:
Click Upload File...
Upload the meow.mp3 file to this project.
Under Properties:
For the Sound1 component, click Source
In the list that appears set the source to meow.mp3.
Making the Sound Play
Navigate to the Blocks Editor.
Click Button1.
Drag and drop the when Button1.Click do block onto the board.
Click Sound1.
Drag out the call Sound1.Play block and snap it into the when Button1.Click do block.
Click the kitty picture on your Emulator to see what happens.
Challenge Stuff
Here are some things to try.
Regular Challenge: Swap the picture of the cat with a picture of your cat or a cat you like on the internet.
Developers Challenge: Set the app's icon to the same picture as the kitty. Center the picture of the kitty and the text.
This tutorial was modified for middle school students from one of the original app inventor tutorials