[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:02.38,0:00:12.12,Default,,0000,0000,0000,,♩♫♪♬
Dialogue: 0,0:00:12.36,0:00:17.48,Default,,0000,0000,0000,,Hey, welcome back. It's Shay and Emily and we are here with the third tutorial of the App Inventor Hour of Code.
Dialogue: 0,0:00:17.62,0:00:20.78,Default,,0000,0000,0000,,- Hey Emily, I challenge you to a quick draw!\N- You're on!
Dialogue: 0,0:00:27.02,0:00:29.56,Default,,0000,0000,0000,,Okay, that was childish but surprisingly fun.
Dialogue: 0,0:00:29.65,0:00:33.80,Default,,0000,0000,0000,,Yeah. It's time for our next step and we just gave you a preview.
Dialogue: 0,0:00:33.91,0:00:40.18,Default,,0000,0000,0000,,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.
Dialogue: 0,0:00:40.44,0:00:42.09,Default,,0000,0000,0000,,We call it "Digital Doodle".
Dialogue: 0,0:00:42.16,0:00:49.10,Default,,0000,0000,0000,,Okay, back to the drawing board. Haha, get it? Drawing board... hum. Great. Here we go.
Dialogue: 0,0:00:49.19,0:00:52.48,Default,,0000,0000,0000,,Once again, log on to App Inventor if you're not already there.
Dialogue: 0,0:00:52.57,0:00:56.91,Default,,0000,0000,0000,,Start a new project. Name this one "DigitalDoodle".
Dialogue: 0,0:00:56.99,0:01:00.94,Default,,0000,0000,0000,,Just like in the "Ball Bounce" app, you'll need a canvas to start.
Dialogue: 0,0:01:01.01,0:01:06.04,Default,,0000,0000,0000,,But before we do that - do you remember the trick we learned for keeping the app from scrolling?
Dialogue: 0,0:01:06.72,0:01:11.54,Default,,0000,0000,0000,,Right. Go into the properties for "Screen1" and uncheck "Scrollable".
Dialogue: 0,0:01:11.64,0:01:16.58,Default,,0000,0000,0000,,Now add a canvas which you can find under "Drawing and Animation".
Dialogue: 0,0:01:16.68,0:01:23.58,Default,,0000,0000,0000,,Go to the properties pane of the canvas and change the settings for both width and height to "Fill parent".
Dialogue: 0,0:01:23.71,0:01:25.52,Default,,0000,0000,0000,,That opens up our canvas quite a bit.
Dialogue: 0,0:01:25.68,0:01:34.14,Default,,0000,0000,0000,,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.
Dialogue: 0,0:01:34.60,0:01:36.74,Default,,0000,0000,0000,,Time to program the blocks!
Dialogue: 0,0:01:37.07,0:01:42.58,Default,,0000,0000,0000,,Okay. So, the event that will detect someone's finger dragging on the canvas is pretty easy to guess.
Dialogue: 0,0:01:42.67,0:01:49.25,Default,,0000,0000,0000,,Click on the canvas components' blocks and look around in the drawer. Can you figure out which block you need?
Dialogue: 0,0:01:50.19,0:01:53.69,Default,,0000,0000,0000,,Right, you want the event handler for when "Canvas1" is dragged.
Dialogue: 0,0:01:53.77,0:01:59.68,Default,,0000,0000,0000,,This event handler has a whole bunch of parameters. Don't worry - they're pretty easy to understand.
Dialogue: 0,0:01:59.74,0:02:05.21,Default,,0000,0000,0000,,And, you can get on-screen help anytime just by mousing over a block. Like this.
Dialogue: 0,0:02:05.86,0:02:11.81,Default,,0000,0000,0000,,Okay, great! So, we want to draw a line from wherever the finger drag was last to where it is now.
Dialogue: 0,0:02:11.91,0:02:17.51,Default,,0000,0000,0000,,We'll essentially make the canvas draw hundreds of tiny lines between the points of the finger drag.
Dialogue: 0,0:02:17.60,0:02:20.91,Default,,0000,0000,0000,,This will look just like drawing on the phone's screen.
Dialogue: 0,0:02:20.98,0:02:30.92,Default,,0000,0000,0000,,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".
Dialogue: 0,0:02:33.22,0:02:37.77,Default,,0000,0000,0000,,Now, we need the X and Y coordinates of the beginning of the line draw to the end.
Dialogue: 0,0:02:37.87,0:02:44.18,Default,,0000,0000,0000,,The "when Dragged" event will call "DrawLine" over and over while the finger is dragging on the screen.
Dialogue: 0,0:02:44.29,0:02:47.79,Default,,0000,0000,0000,,We just need to provide the XY coordinates for these lines.
Dialogue: 0,0:02:47.85,0:02:51.45,Default,,0000,0000,0000,,Go ahead and use previous X and previous Y.
Dialogue: 0,0:02:52.76,0:02:55.12,Default,,0000,0000,0000,,You'll also need current X and current Y.
Dialogue: 0,0:02:57.58,0:02:58.84,Default,,0000,0000,0000,,Now, go try out your app.
Dialogue: 0,0:02:59.77,0:03:01.18,Default,,0000,0000,0000,,It should let you draw on the screen.
Dialogue: 0,0:03:03.40,0:03:08.82,Default,,0000,0000,0000,,This app is great but wouldn't it be cool if you could shake to erase the screen rather than press a button?
Dialogue: 0,0:03:08.88,0:03:10.36,Default,,0000,0000,0000,,Yeah, like Etch A Sketch.
Dialogue: 0,0:03:10.47,0:03:16.18,Default,,0000,0000,0000,,Okay, It's Etch A Sketch time. Remember, we put in an accelerometer sensor into the components' list.
Dialogue: 0,0:03:16.32,0:03:18.48,Default,,0000,0000,0000,,So now, we can program that.
Dialogue: 0,0:03:18.57,0:03:22.81,Default,,0000,0000,0000,,Go to the accelerometer drawer and pull out "when Shaking".
Dialogue: 0,0:03:22.87,0:03:26.14,Default,,0000,0000,0000,,The block we need to erase the screen is really simple to get.
Dialogue: 0,0:03:26.24,0:03:34.66,Default,,0000,0000,0000,,Go to canvas and choose "call Canvas1.Clear". Plug that purple block right into the event handler for shaking.
Dialogue: 0,0:03:35.67,0:03:37.02,Default,,0000,0000,0000,,Great! Test your app again.
Dialogue: 0,0:03:37.15,0:03:39.38,Default,,0000,0000,0000,,Does your drawing erase when you shake it?
Dialogue: 0,0:03:39.46,0:03:45.58,Default,,0000,0000,0000,,All right! So once again we've built a very simple app which can be extended in lots of fun ways.
Dialogue: 0,0:03:45.66,0:03:55.06,Default,,0000,0000,0000,,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.
Dialogue: 0,0:03:55.17,0:03:59.15,Default,,0000,0000,0000,,You could also set up buttons to change the color of the ink used in the drawing.
Dialogue: 0,0:03:59.22,0:04:03.78,Default,,0000,0000,0000,,All of these extensions are explained in the "PaintPot" tutorial on our website.
Dialogue: 0,0:04:03.88,0:04:10.82,Default,,0000,0000,0000,,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.
Dialogue: 0,0:04:10.89,0:04:15.35,Default,,0000,0000,0000,,You can even send and receive text and phone calls if you have a fully functional phone.
Dialogue: 0,0:04:15.44,0:04:18.56,Default,,0000,0000,0000,,Even on a tablet over Wifi you can do some pretty cool things.
Dialogue: 0,0:04:18.65,0:04:24.49,Default,,0000,0000,0000,,Thanks for joining us. If you're interested in learning more about App Inventor, go to the App Inventor website.
Dialogue: 0,0:04:24.60,0:04:26.30,Default,,0000,0000,0000,,Happy Inventing!
Dialogue: 0,0:04:26.41,0:04:36.09,Default,,0000,0000,0000,,♩♫♪♬