1
00:00:02,376 --> 00:00:12,115
♩♫♪♬

2
00:00:12,363 --> 00:00:17,482
Hey, welcome back. It's Shay and Emily and we are here with the third tutorial of the App Inventor Hour of Code.

3
00:00:17,625 --> 00:00:20,779
- Hey Emily, I challenge you to a quick draw!
- You're on!

4
00:00:27,024 --> 00:00:29,558
Okay, that was childish but surprisingly fun.

5
00:00:29,648 --> 00:00:33,803
Yeah. It's time for our next step and we just gave you a preview.

6
00:00:33,913 --> 00:00:40,180
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.

7
00:00:40,443 --> 00:00:42,092
We call it "Digital Doodle".

8
00:00:42,162 --> 00:00:49,105
Okay, back to the drawing board. Haha, get it? Drawing board... hum. Great. Here we go.

9
00:00:49,186 --> 00:00:52,485
Once again, log on to App Inventor if you're not already there.

10
00:00:52,566 --> 00:00:56,906
Start a new project. Name this one "DigitalDoodle".

11
00:00:56,990 --> 00:01:00,940
Just like in the "Ball Bounce" app, you'll need a canvas to start.

12
00:01:01,011 --> 00:01:06,038
But before we do that - do you remember the trick we learned for keeping the app from scrolling?

13
00:01:06,723 --> 00:01:11,545
Right. Go into the properties for "Screen1" and uncheck "Scrollable".

14
00:01:11,638 --> 00:01:16,580
Now add a canvas which you can find under "Drawing and Animation".

15
00:01:16,681 --> 00:01:23,585
Go to the properties pane of the canvas and change the settings for both width and height to "Fill parent".

16
00:01:23,706 --> 00:01:25,517
That opens up our canvas quite a bit.

17
00:01:25,680 --> 00:01:34,143
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.

18
00:01:34,602 --> 00:01:36,738
Time to program the blocks!

19
00:01:37,073 --> 00:01:42,576
Okay. So, the event that will detect someone's finger dragging on the canvas is pretty easy to guess.

20
00:01:42,668 --> 00:01:49,253
Click on the canvas components' blocks and look around in the drawer. Can you figure out which block you need?

21
00:01:50,190 --> 00:01:53,686
Right, you want the event handler for when "Canvas1" is dragged.

22
00:01:53,770 --> 00:01:59,678
This event handler has a whole bunch of parameters. Don't worry - they're pretty easy to understand.

23
00:01:59,735 --> 00:02:05,207
And, you can get on-screen help anytime just by mousing over a block. Like this.

24
00:02:05,863 --> 00:02:11,808
Okay, great! So, we want to draw a line from wherever the finger drag was last to where it is now.

25
00:02:11,912 --> 00:02:17,510
We'll essentially make the canvas draw hundreds of tiny lines between the points of the finger drag.

26
00:02:17,596 --> 00:02:20,913
This will look just like drawing on the phone's screen.

27
00:02:20,980 --> 00:02:30,915
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".

28
00:02:33,224 --> 00:02:37,774
Now, we need the X and Y coordinates of the beginning of the line draw to the end.

29
00:02:37,870 --> 00:02:44,185
The "when Dragged" event will call "DrawLine" over and over while the finger is dragging on the screen.

30
00:02:44,294 --> 00:02:47,792
We just need to provide the XY coordinates for these lines.

31
00:02:47,850 --> 00:02:51,449
Go ahead and use previous X and previous Y.

32
00:02:52,757 --> 00:02:55,121
You'll also need current X and current Y.

33
00:02:57,576 --> 00:02:58,836
Now, go try out your app.

34
00:02:59,774 --> 00:03:01,179
It should let you draw on the screen.

35
00:03:03,397 --> 00:03:08,820
This app is great but wouldn't it be cool if you could shake to erase the screen rather than press a button?

36
00:03:08,883 --> 00:03:10,363
Yeah, like Etch A Sketch.

37
00:03:10,471 --> 00:03:16,182
Okay, It's Etch A Sketch time. Remember, we put in an accelerometer sensor into the components' list.

38
00:03:16,322 --> 00:03:18,484
So now, we can program that.

39
00:03:18,573 --> 00:03:22,811
Go to the accelerometer drawer and pull out "when Shaking".

40
00:03:22,871 --> 00:03:26,145
The block we need to erase the screen is really simple to get.

41
00:03:26,245 --> 00:03:34,660
Go to canvas and choose "call Canvas1.Clear". Plug that purple block right into the event handler for shaking.

42
00:03:35,670 --> 00:03:37,021
Great! Test your app again.

43
00:03:37,148 --> 00:03:39,377
Does your drawing erase when you shake it?

44
00:03:39,457 --> 00:03:45,584
All right! So once again we've built a very simple app which can be extended in lots of fun ways.

45
00:03:45,656 --> 00:03:55,059
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.

46
00:03:55,172 --> 00:03:59,149
You could also set up buttons to change the color of the ink used in the drawing.

47
00:03:59,216 --> 00:04:03,777
All of these extensions are explained in the "PaintPot" tutorial on our website.

48
00:04:03,880 --> 00:04:10,817
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.

49
00:04:10,888 --> 00:04:15,349
You can even send and receive text and phone calls if you have a fully functional phone.

50
00:04:15,436 --> 00:04:18,555
Even on a tablet over Wifi you can do some pretty cool things.

51
00:04:18,652 --> 00:04:24,490
Thanks for joining us. If you're interested in learning more about App Inventor, go to the App Inventor website.

52
00:04:24,603 --> 00:04:26,305
Happy Inventing!

53
00:04:26,409 --> 00:04:36,091
♩♫♪♬