Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player
 

       
 

Adding Sprites to your Paint Pot App

 

Time for some FUN! Today you are going to extend the Paint Pot app and turn it into a Snap Chat app where we can decorate your favorite friends. But to do this you will need to learn about Sprites!

Open App Inventor and then open your Paint Pot App. Test the app to be sure it is working. Now save the app as ImageSpriteYourName. Add a button to your app and label the button Mustache. Now search the web to find an image of a mustache that you would like to use. The one trick is that the image MUST be a PNG file and NOT a jpg. The reason for this is that PNG files have transparent backgrounds which is needed for this image to work, otherwise you would have a large white background to your mustache. Download the image and then upload it to app inventor.

Now add a sprite component to your app. Sprites are found in the Drawing and Animation palette. Drag an image sprite component into your app and rename it MoustacheSprite. Now add the Moustache image that you uploaded to your app to the sprite by setting its Picture to your moustache image.

Coding your app:
1. Code the Moustache button so it acts like a toggle switch that make the moustache appear and disappear. When the button is clicked check to see if the MoustacheSprite is visible, if it is make it invisible and if it is not visible then make it visible. Test the button to make sure it works.

2. Add a when MoustacheSprite dragged code block. Inside this block add a call MoustacheSprite MoveTo block and set the X and Y values to currentX and currentY from the dragged code block. Test your code to see if the moustache can be moved by dragging it on the screen. Troubleshoot as needed.

Demonstrate your working ImageSprite App for teacher check.

Now create your own ImageSprite app using a totally different set of images. Maybe your canvas will be a car and the buttons you provide will add different parts to the car. Come up with a creative and fun app using sprites. Save the app as MySpriteAppYourName. Once you have finished demonstrate for teacher check.