ใบความรู้ที่ 7 application paint pot

3,403 views

Published on

Application: PaintPot เป็นแอพลิเคชันที่สามารถวาดภาพด้วยสีต่างๆ ลงบนพื้นที่วางที่กำหนดไว้ได้ ดังรูป

Published in: Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,403
On SlideShare
0
From Embeds
0
Number of Embeds
370
Actions
Shares
0
Downloads
469
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

ใบความรู้ที่ 7 application paint pot

  1. 1. ครูณัฐพล บัวอุไร [www.nattapon.com] 1 การสร้างแอพลิเคชันด้วย MIT AppInventor ใบความรู้ที่ 7 เรื่อง Application PaintPot Application: PaintPot เป็นแอพลิเคชันที่สามารถวาดภาพด้วยสีต่างๆ ลงบนพื้นที่วางที่กาหนดไว้ ได้ ดังรูป 1. สร้างโปรเจ็คใหม่  คลิกปุ่ม New Project  ตั้งชื่อโปรแกรม PaintPot  กดปุ่ม OK 2. สร้างหน้าต่างโปรแกรม  เปลี่ยนชื่อ Screen1 เป็น PaintPot ด้วยการคลิกที่พื้นหลังโปรแกรม  ไปตั้งค่าในหน้าต่าง Properties หัวข้อ Title ดังรูป     
  2. 2. ครูณัฐพล บัวอุไร [www.nattapon.com] 2 การสร้างแอพลิเคชันด้วย MIT AppInventor  ลากคอมโพเน้นท์ Button มาวางบนหน้าจอ 3 ปุ่ม แล้วปรับแต่งให้มีลักษณะดังรูป (เป็นปุ่ม สาหรับเลือกสีสาหรับวาดรูป)  เปลี่ยนชื่อคอมโพเน้นท์ในหน้าต่าง Components ดังรูป (เปลี่ยนชื่อเพื่อให้รู้ว่าปุ่มไหนคือสีอะไร)  เลือกคอมโพเน้นท์ในกลุ่ม Layout แล้วลากคอมโพเน้นท์ HorizontalArrangement มาวางบน หน้าจอ (เพื่อจัดรูปแบบปุ่มตามแนวนอน)  ลากปุ่มทั้ง 3 ปุ่มไปใส่ในคอมโพเน้นท์ HorizontalArrangement จะได้ผลลัพธ์ดังรูป  
  3. 3. ครูณัฐพล บัวอุไร [www.nattapon.com] 3 การสร้างแอพลิเคชันด้วย MIT AppInventor  เลือกคอมโพเน้นท์ในกลุ่ม Drawing and Animation แล้วลากคอมโพเน้นท์ Canvas มาวางบน หน้าจอ  ปรับขนาดของ Canvas ให้ด้านกว้าง (Width) = Fill parent และด้านสูง (Height) = 300 pixels  ลากคอมโพเน้นท์ Button มาวางด้านล่าง Canvas แล้วเปลี่ยนชื่อเป็น Clear (เป็นปุ่มสาหรับ เคลียร์พื้นที่วาดรูปในกรณีที่ต้องการวาดใหม่) และเปลี่ยนชื่อปุ่มในหน้าต่างคอมโพเน้นเป็น ButtonWipe  
  4. 4. ครูณัฐพล บัวอุไร [www.nattapon.com] 4 การสร้างแอพลิเคชันด้วย MIT AppInventor 3. การเขียนคาสั่งควบคุมโปรแกรม  คลิกปุ่ม Blocks เพื่อเข้าสู่หน้าต่างเขียนคาสั่งควบคุมโปรแกรม  ลากบล็อกคาสั่งต่างๆ มาใส่ในหน้าต่าง Viewer โดยให้มีบล็อกต่างๆ ดังนี้ บล็อคคาสั่งตั้งต่างปุ่มสีและปุ่มเคลียร์ บล็อกคาสั่งสาหรับวาดเส้นสีบนพื้นที่ Canvas
  5. 5. ครูณัฐพล บัวอุไร [www.nattapon.com] 5 การสร้างแอพลิเคชันด้วย MIT AppInventor 4. ทดสอบ Application  คลิกเมนู Connect เลือก Emulator  รอจนกระทั่งโปรแกรมเปิดขึ้นมาสาเร็จ ดังรูป ซึ่งนักเรียนสามารถคลิกปุ่มสีและวาดรูปตาม ต้องการลงบนพื้นที่ Canvas ได้

×