/ / Instructions
- Go to placekitten.com/294/270 and download the cat picture.
- CTRL+Click to download this file to the desktop:
sound -
Start the Designer and create a new project
In your web browser, go to the App Inventor Web site at http://appinventor.googlelabs.com. If this is the first time you've used App Inventor, you'll see the Projects page, with no projects in it yet. It should look like this:
-
Create a new project
- Click New on the left side, near the top of the page.
- Enter the project name (one word, with no spaces) in the dialog box that appears, click OK.
The browser will open the Designer, the place where you select components for your app, and should look like this:
-
Selecting components to design your app
App Inventor components are located on the left hand side of the Designer screen under the title Palette. Components are the basic elements you use to make apps on the Android phone. They're like the ingredients in a recipe. Some components are very simple, like a Label component, which just shows text on the screen, or a Button component that you tap to initiate an action. Other components are more elaborate: a drawing Canvas that can hold still images or animations, an accelerometer (motion) sensor that works like a Wii controller and detects when you move or shake the phone, components that make or send text messages, components that play music and video, components that get information from Web sites, and so on.
App Inventor components are located on the left hand side of the Designer screen under the title Palette. To use a component in your app you need to click and drag it onto the viewer in the middle of the Designer. When you add a component to the viewer it will also appear in the components list on the right hand side of the viewer.
Components have properties that can be adjusted to change the way the component appears within the app. To view and change the properties of a component you must first select the desired component in your list of components.
Your App will use a Button component that has the image property set to the image file you downloaded earlier. To do this:
Drag and drop the Button component to Screen1. The Button component is located under Palette. -
Click on Button1 listed under Components.
- In the list of properties, under image, click on none...
- Click add.
- Upload the the image file.
- Delete Text for Button1 listed under the Text property.
Your Designer should look like this:
-
Open the Blocks Editor and connect to the emulator
The Designer is one of three key tools you'll use in creating your apps. The second is the Blocks Editor. You'll use the Blocks Editor to assign behaviors to your components, such as what should happen when the user of your app taps a button.
The Blocks Editor runs in a seperate window. When you click Open the blocks editor from the Designer window, the Blocks Editor program file should download and run. This process may take 30 seconds or longer. If the Blocks Editor never opens, it might be because your browser is not set up to run downloaded Java applications automatically. In this case, find the downloaded file named AppInventorForAndroidCodeblocks.jnlp and open it. The Blocks Editor window should look as shown below, with "drawers" for the program blocks to the left, and a large empty "canvas" space for placing blocks to assemble the program, which you'll do below.
. -
Before continuing to build the app, you'll need to start the emulator. Click the
New emulator button at top of the window. You'll
get a notice saying that the emulator is starting, and asking you to be patient:
starting the emulator can take a couple of minutes. The emulator will initially
appear with an empty black screen. Wait until the emulator is ready, with a colored
screen background as shown below. Even after the background appears, you should
wait until the emulated phone has finished preparing its SD card: there will be a
notice at the top of the phone screen while the card is being prepared. You might
also need to use your mouse on the emulated phone screen to unlock the device by
dragging the green lock button to the right.
When the emulator is finally ready, click the Connect to device... button, select the emulator from the dropdown list and click it. You'll see a yellow animated arrow move back and forth, showing that App Inventor is connecting to the emulated phone. Creating this connection can take another minute or two. When it's all done, the arrow will stop moving and turn green, and if you look at the emulated phone screen, you'll see the kitty there — this is the beginning of your app!
Something not working right? Visit the troubleshooting page, or check the App Inventor User Forum for help.
- Now that you've set up your computer and device, and you've learned how the
Designer and the Blocks Editor work, you are ready to complete the HelloPurr app.
At this point, you should have the Designer open in your browser, the Blocks Editor
open in another window, and your chosen device (phone or emulator) connected to the
Blocks Editor.
In the Blocks Editor: Create an event handler that tells the Sound component to play when the user taps the button.
-
Adding the 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 device.
- Change the BackgroundColor of Label1 by clicking on the box
- Change the TextColor of Label1
- Change the FontSize of Label1
The Designer should now look like this:
- Adding the 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.
-
Under Media
Click Add... - Upload the meow.mp3 file to this project.
-
Under Properties
For the Sound1 component, set its Source to meow.mp3.
The Designer should now look like this:
-
Making the sound play
Using the Blocks Editor we will define how the app is going to behave. We'll tell the components what to do, and when to do it. You're going to tell the kitty button to play a sound when the user taps it. If components are ingredients in a recipe, you can think of blocks as the cooking instructions.
The Blocks Editor has two tabs on the upper left hand corner: Built-in and My Blocks. The buttons under each tab expand and expose blocks when clicked. The Built-in blocks are the standard set of blocks that are available for every app you build. The blocks under My Blocks contain specific blocks that are tied to the set of components that you have chosen for your app.
To make the sound play, you'll need to drag and drop the Button1.Click block and the Sound1.Play block into the editor. The blocks connect together like puzzle pieces.
Navigate to the Blocks Editor. It may be covered up by the web browser. - Click the My Blocks tab at the top left hand
side.
- Click Button1.
- Drag and drop the when Button1.Click do block onto
the editor.
- Click Sound1.
- Drag the call Sound1.Play block onto the editor and
drop it into the when Button1.Click do block.
- Click the kitty picture on your device. You should hear the kitty meow.
Your Blocks Editor should look like this:
Review
Here are the key ideas covered so far:
-
You build apps by selecting components (ingredients) and then telling them what to do and when to do it.
-
You use the Designer to select components. Some components are visible and some aren't.
-
You can add media (sounds and images) to apps by uploading them from your computer.
-
You use the Blocks Editor to assemble blocks that define the components' behavior
-
when ... do ... blocks define event handlers, that tell components what to dowhen something happens.
-
call ... blocks tell components to do things.
/ /
/ /
$("p:not(p:eq(2))").css("border","2px solid pink").css("padding", ".5em");