Introduction to Computer Science with Scratch and App Inventor

Recommendations

Info

When the canvas is created, it is given the default name Canvas1 by App Inventor. Let’s rename the canvas – we will give all of our elements new names to help us keep them straight when we are writing our program. To rename the canvas: Now we will change the size of our canvas element. Again, make sure that the MyCanvas element is selected in the Components part of the screen. In the Properties section, change the width and the height to 300 pixels. Note the other properties that you can set at this point. For each element we use, there will be a selection of properties that you can set using this panel of the App Inventor. 1) In the Components section of the screen make sure that Canvas1 is selected (highlighted green) 2) Click on the rename button at the bottom of the panel 3) In the dialog that pops up, give the canvas element a new name, I am going to call mine MyCanvas Now that we have our canvas all set up, we need to add our mole image. Go to this url: http://appinventor.googlelabs.com/learn/tutorials/molemash/MoleMashAssets/mole.png You will need to save the mole image to your desktop. To do this on a PC, right-click on the image (on a Mac, hold down the CTRL button and click the mouse). Choose Save Image As from the menu that pops up. Make sure you save the image on your desktop so that you can easily find it later. mbrace Game Development Workbook Page 36
To add the mole to our program, we will use an ImageSprite. A sprite (like in Scratch) is an element that can move around on a canvas element. The sprite element is located in the Animation block menu. Drag an ImageSprite from the Animation menu onto the MyCanvas element in the Viewer. Make sure you put the sprite on the canvas and not on the background of the screen. Now we need to associate our mole image with our sprite. In the Properties panel, click on Picture. This will pop open a menu. On the menu, click the Add button and use the Browse feature in the Upload File box to find our mole picture (it should be called mole.png and will be located on your desktop). Every time we use an image or sound, we will add it to our project like this. Unlike Scratch, there is not a library of built in images for App Inventor. You can create your own images, or use images that you find using the Internet. You could even use the images from the Scratch library in your App Inventor programs if you have Scratch on the same computer. On a PC, the Scratch Images are located in: C:\Program Files\Scratch\Media\Costumes At this point, also change the name of the ImageSprite to Mole. [Hint, refer back to how we changed the name of the canvas if you need a reminder]. In the Properties panel for the Mole, you will see an X and Y. These are the coordinates for the sprite on the canvas. If you drag the sprite around on the canvas, you will see that the X and Y values automatically update. mbrace Game Development Workbook Page 37
Page 1 and 2: Introduction to Computer Science wi
Page 3 and 4: LESSON 1: Getting Started with Scra
Page 5 and 6: I decided to pick a dinosaur. You c
Page 7 and 8: The direction that your sprite move
Page 9 and 10: Let’s add some yellow wait blocks
Page 11 and 12: Changing the Background on the Stag
Page 13 and 14: To use an if block to control the m
Page 15 and 16: Costumes and Animation Now that you
Page 17 and 18: Other useful blocks are the say and
Page 19 and 20: ? Now we know how to tell when the
Page 21 and 22: Here is one script that works. To m
Page 23 and 24: After you create a variable, you wi
Page 25 and 26: Winning, Losing, and Game Play Our
Page 27 and 28: You might have noticed that when th
Page 29 and 30: Click the checkbox next to timer to
Page 31 and 32: Scratch Review Now you have built y
Page 33 and 34: App Inventor Interface The App Inve
Page 35: The first thing that we will do is
Page 39 and 40: Your Blocks Editor Screen should lo
Page 41 and 42: We know that our X and Y locations
Page 43 and 44: Our mole shows up in the emulator,
Page 45 and 46: The last thing we need is the value
Page 47 and 48: Team Project Worksheet We have lear

Introduction to Computer Science with Scratch and App Inventor

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?