-
♩♫♪♬
-
Hey, welcome back. It's Shay and Emily and we are here with the third tutorial of the App Inventor Hour of Code.
-
- Hey Emily, I challenge you to a quick draw!
- You're on!
-
Okay, that was childish but surprisingly fun.
-
Yeah. It's time for our next step and we just gave you a preview.
-
It's going to be a great app. For this app we are going to make a drawing canvas on the board where you can use your finger as a pen.
-
We call it "Digital Doodle".
-
Okay, back to the drawing board. Haha, get it? Drawing board... hum. Great. Here we go.
-
Once again, log on to App Inventor if you're not already there.
-
Start a new project. Name this one "DigitalDoodle".
-
Just like in the "Ball Bounce" app, you'll need a canvas to start.
-
But before we do that - do you remember the trick we learned for keeping the app from scrolling?
-
Right. Go into the properties for "Screen1" and uncheck "Scrollable".
-
Now add a canvas which you can find under "Drawing and Animation".
-
Go to the properties pane of the canvas and change the settings for both width and height to "Fill parent".
-
That opens up our canvas quite a bit.
-
Also, even tough we are not going to use it just yet, drag out an accelerometer component from the sensor drawer and drop that into your app.
-
Time to program the blocks!
-
Okay. So, the event that will detect someone's finger dragging on the canvas is pretty easy to guess.
-
Click on the canvas components' blocks and look around in the drawer. Can you figure out which block you need?
-
Right, you want the event handler for when "Canvas1" is dragged.
-
This event handler has a whole bunch of parameters. Don't worry - they're pretty easy to understand.
-
And, you can get on-screen help anytime just by mousing over a block. Like this.
-
Okay, great! So, we want to draw a line from wherever the finger drag was last to where it is now.
-
We'll essentially make the canvas draw hundreds of tiny lines between the points of the finger drag.
-
This will look just like drawing on the phone's screen.
-
But first we need that block that will draw a line. Go to "Canvas1" again and this time get the block that says to "call Canvas1.DrawLine".
-
Now, we need the X and Y coordinates of the beginning of the line draw to the end.
-
The "when Dragged" event will call "DrawLine" over and over while the finger is dragging on the screen.
-
We just need to provide the XY coordinates for these lines.
-
Go ahead and use previous X and previous Y.
-
You'll also need current X and current Y.
-
Now, go try out your app.
-
It should let you draw on the screen.
-
This app is great but wouldn't it be cool if you could shake to erase the screen rather than press a button?
-
Yeah, like Etch A Sketch.
-
Okay, It's Etch A Sketch time. Remember, we put in an accelerometer sensor into the components' list.
-
So now, we can program that.
-
Go to the accelerometer drawer and pull out "when Shaking".
-
The block we need to erase the screen is really simple to get.
-
Go to canvas and choose "call Canvas1.Clear". Plug that purple block right into the event handler for shaking.
-
Great! Test your app again.
-
Does your drawing erase when you shake it?
-
All right! So once again we've built a very simple app which can be extended in lots of fun ways.
-
The app that we demonstrated at the beginning of this tutorial lets you take a picture first and then put the picture on the canvas where you can draw on it.
-
You could also set up buttons to change the color of the ink used in the drawing.
-
All of these extensions are explained in the "PaintPot" tutorial on our website.
-
As you can see, there are endless possibilities of what you can build with App Inventor. It tabs into almost all of your phones capabilities.
-
You can even send and receive text and phone calls if you have a fully functional phone.
-
Even on a tablet over Wifi you can do some pretty cool things.
-
Thanks for joining us. If you're interested in learning more about App Inventor, go to the App Inventor website.
-
Happy Inventing!
-
♩♫♪♬