8/20/2019 _ __ 3.2 PaintPot.pdf

http://slidepdf.com/reader/full/-32-paintpotpdf 1/5

กจกรรมท  3 เร อง Application PaintPot 1

การสรางแอพลเคชันดวย MIT AppInventor ครณ ัฐพล บัวอไร [www.nattapon.com]

กจกรรมท  3 

เร อง Application PaintPot

 Application: PaintPot เปนแอพลเคชันท สามารถวาดภาพดวยสตางๆ ลงบนพ นท วางท กาหนดไว ได โดยมวธการสรางดังน 

 

1. สรางโปรเจคใหม  คลกป ม New Project

 ตั งช อโปรแกรม PaintPot

 กดป ม OK

2. สรางหนาตางโปรแกรม 

เปล ยนช อ Screen1 เปน PaintPot ดวยการคลกท พ นหลังโปรแกรม 

  ไปตั งคาในหนาตาง Properties หัวขอ Title ดังรป 

 

 

 

 

 

8/20/2019 _ __ 3.2 PaintPot.pdf

http://slidepdf.com/reader/full/-32-paintpotpdf 2/5

กจกรรมท  3 เร อง Application PaintPot 2

การสรางแอพลเคชันดวย MIT AppInventor ครณ ัฐพล บัวอไร [www.nattapon.com]

 ลากคอมโพเนนท Button มาวางบนหนาจอ 3 ป ม แลวปรับแตงใหมลักษณะดังรป (เปนป มสาหรับเลอกสสาหรับวาดรป)

 เปล ยนช อคอมโพเนนท ในหนาตาง Components ดังรป (เปล ยนช อเพ อใหร  วาป มไหนคอสอะไร) 

 เลอกคอมโพเนนท ในกล ม Layout แลวลากคอมโพเนนท HorizontalArrangement มาวางบนหนาจอ (เพ อจัดรปแบบป มตามแนวนอน)

 ลากป มทั ง 3 ป มไปใส ในคอมโพเนนท HorizontalArrangement จะไดผลลัพธดังรป 

 

 

8/20/2019 _ __ 3.2 PaintPot.pdf

http://slidepdf.com/reader/full/-32-paintpotpdf 3/5

กจกรรมท  3 เร อง Application PaintPot 3

การสรางแอพลเคชันดวย MIT AppInventor ครณ ัฐพล บัวอไร [www.nattapon.com]

 เลอกคอมโพเนนท ในกล ม Drawing and Animation แลวลากคอมโพเนนท Canvas มาวางบนหนาจอ 

 ปรับขนาดของ Canvas ใหดานกวาง (Width) = Fill parent และดานสง (Height) = 300

pixels

 ลากคอมโพเนนท Button มาวางดานลาง Canvas แลวเปล ยนช อเปน Clear (เปนป มสาหรับเคลยรพ นท วาดรปในกรณท ตองการวาดใหม) และเปล ยนช อป มในหนาตางคอมโพเนนเปน ButtonWipe

 

 

8/20/2019 _ __ 3.2 PaintPot.pdf

http://slidepdf.com/reader/full/-32-paintpotpdf 4/5

กจกรรมท  3 เร อง Application PaintPot 4

การสรางแอพลเคชันดวย MIT AppInventor ครณ ัฐพล บัวอไร [www.nattapon.com]

3. การเขยนคาส ังควบคมโปรแกรม 

 คลกป ม Blocks เพ อเขาส หนาตางเขยนคาสั งควบคมโปรแกรม 

 ลากบลอกคาสั งตางๆ มาใส ในหนาตาง Viewer โดยใหมบลอกตางๆ ดังน  

บลอคคาสั งตั งตางป มสและป มเคลยร 

บลอกคาสั งสาหรับวาดเสนสบนพ นท  Canvas

บลอกคาสั งสาหรับวาดจดบนพ นท  Canvas

8/20/2019 _ __ 3.2 PaintPot.pdf

http://slidepdf.com/reader/full/-32-paintpotpdf 5/5

กจกรรมท  3 เร อง Application PaintPot 5

การสรางแอพลเคชันดวย MIT AppInventor ครณ ัฐพล บัวอไร [www.nattapon.com]

4. ทดสอบ Application

 คลกเมน Connect เลอก Emulator

 รอจนกระทั งโปรแกรมเปดข นมาสาเรจ ดังรป ซ งนักเรยนสามารถคลกป มสและวาดรปตามตองการลงบนพ นท  Canvas ได