Lesson02 paintpot การวาดเส้น

คลิก New Project ตั้งชื่อ paintpot

กำหนดพื้นที่วาดภาพและปุ่มเลือกสี และ เคลียร์เพื่อวาดใหม่ Step 1

1. คลิก Drawing and Animation ลากปุ่ม canvas มาวางบน Screen1

2. กำหนดความกว้าง width เป็น Fill parent 3. กำหนดความสูง height 300 pixels

4. คลิก Layout ลาก Horizontal Arrangement มาวาง 5. กำหนดความกว้าง width เป็น Fill parent

6. คลิก user interface ลากปุ่ม Button มาวาง 7. คลิกปุ่ม Rename เปลี่ยนชื่อปุ่มเป็น ButtonRed

8. เปลี่ยนสีพื้นเป็นสีแดง

9. เปลี่ยนข้อความปุ่มเป็น RED

10. ลากปุ่ม Button มาวาง 11. คลิกปุ่ม Rename เปลี่ยนชื่อปุ่มเป็น ButtonBlue 12. เปลี่ยนสีพื้นเป็น สีน้ำเงิน 13. เปลี่ยนข้อความ เป็น BLUE

14. ลากปุ่ม Button มาวาง 15. คลิกปุ่ม Rename เปลี่ยนชื่อปุ่มเป็น ButtonGreen 16. เปลี่ยนสีพื้นเป็น สีเขียว 17. เปลี่ยนข้อความเป็น GREEN

18. ลากปุ่ม Button มาวาง 19. คลิกปุ่ม Rename เปลี่ยนชื่อปุ่มเป็น ButtonClear 20. เปลี่ยนข้อความเป็น CLEAR

20. ลากปุ่ม Button มาวาง 21. คลิกปุ่ม Rename เปลี่ยนชื่อปุ่มเป็น ButtonBig 22. เปลี่ยนข้อความเป็น BIG

223 ลากปุ่ม Button มาวาง 24. คลิกปุ่ม Rename เปลี่ยนชื่อปุ่มเป็น ButtonSmall 25. เปลี่ยนข้อความเป็น SMALL

26. คลิกปุ่ม Blocks เพื่อเปิดหน้าต่าง กำหนดการทำงาน

กำหนดให้เมื่อเกิดการคลิกปุ่มเลือกสี และ เคลียร์เพื่อวาดใหม่ Step 2 Blocks for click button

1. คลิกปุ่ม ButtonRed แล้วเลือก When ButtonRed Click มาวาง พื้นที่ด้านขวา 1 23

2. คลิกปุ่ม canvas1 แล้วเลือก set canvas1 paint color to มาวาง พื้นที่เชื่อม ที่ When ButtonRed Click 1 3 2

3. คลิกเลือกสีแดงมาต่อท้าย set canvas1 paint color to 1 3 2

4. คลิกปุ่ม ButtonBlue แล้วเลือก When ButtonBlue Click มาวาง พื้นที่ด้านขวา 1 2 3

5. คลิกปุ่ม canvas1 แล้วเลือก set canvas1 paint color to มาวาง พื้นที่เชื่อม ที่ When ButtonBlue Click 1 3 2

6. คลิกเลือกสีน้ำเงินมาต่อท้าย set canvas1 paint color to 1 3 2

9. คลิกเลือกสีเขียวมาต่อท้าย set canvas1 paint color to 7. คลิกปุ่ม ButtonGreen แล้วเลือก When ButtonGreen Click มาวาง ด้านขวา 8. คลิกปุ่ม canvas1 แล้วเลือก set canvas1 paint color to มาวาง พื้นที่เชื่อม ที่ When ButtonGreen Click

10. คลิกปุ่ม ButtonClear แล้วเลือก When ButtonClear Click มาวาง ด้านขวา 11. คลิกปุ่ม canvas1 แล้วเลือก call canvas1 Clear มาวางพื้นที่ เชื่อม ที่ When ButtonClear Click

กำหนดให้เมื่อแตะให้เกิดจุดวงกลม ขนาด 5 pixel Step 3 blocks for touch

1. คลิกปุ่ม canvas1 แล้วเลือก When canvas1 Touch มาวาง 2. คลิกปุ่ม canvas1 แล้วเลือก call canvas1 Drawing circle มา เชื่อม

4. ชี้เมาส์ที่ X บน When canvas1 Touch เลือก get X มาวาง ต่อท้าย 5. ชี้เมาส์ Y บน When canvas1 Touch เลือก get Y มาวาง ต่อท้าย

6. คลิกเมาส์ที่ว่าง ๆ พิมพ์ number คลิกเลือก number 7. คลิกที่เลข 0 พิมพ์เลข 5 ลงไปแทน แล้วลากมาวางต่อท้าย r

กำหนดให้เมื่อลากให้เกิดเส้น Step 4 blocks for dragged

1. คลิกปุ่ม canvas1 แล้วเลือก When canvas1 Dragged มาวาง 2. คลิกปุ่ม canvas1 แล้วเลือก call canvas1 DrawLine มาเชื่อม

3. ชี้เมาส์ที่ preX บน When canvas1 Dragged เลือก get preX มา วาง ต่อท้าย 4. ชี้เมาส์ preY เลือก get preY มาวาง ต่อท้าย 5. ชี้เมาส์ current X เลือก get current X มาวาง ต่อท้าย 6. ชี้เมาส์ current Y เลือก get current Y มาวาง ต่อท้าย

1. กำหนดค่าสำหรับค่าจุดวงกลมปกติ โดยคลิก Variable ใน Built-in แล้วเลือก initialize global name to มาวาง 2. คลิก name เพื่อเปลี่ยนชื่อเป็น dotsize 3. คลิกที่ว่าง พิมพ์ number แล้วเลือก number เติมเลข 2 แล้ว ลากมาวางต่อท้าย

1. กำหนดค่าสำหรับปุ่มขนาดเล็ก โดยคลิก Variable ใน Built-in แล้วเลือก initialize global name to มาวาง 2. คลิก name เพื่อเปลี่ยนชื่อเป็น small 3. คลิกที่ว่าง พิมพ์ number แล้วเลือก number เติมเลข 2 แล้ว ลากมาวางต่อท้าย

4. กำหนดค่าสำหรับปุ่มขนาดใหญ่ โดยคลิก Variable ใน Built-in แล้วเลือก initialize global name to มาวาง 5. คลิก name เพื่อเปลี่ยนชื่อเป็น Big 6. คลิกที่ว่าง พิมพ์ number แล้วเลือก number เติมเลข 8 แล้ว ลากมาวางต่อท้าย

7. กำหนดค่าสำหรับขนาดเดิม โดยคลิก Variable ใน Built-in แล้วเลือก initialize global name to มาวาง 8. คลิก name เพื่อเปลี่ยนชื่อเป็น dotsize 9. คลิกที่ว่าง พิมพ์ number แล้วเลือก number เติมเลข 5 แล้ว ลากมาวางต่อท้าย

10. คลิกปุ่ม ButtonBig แล้วเลือก When ButtonBig Click มาวาง พื้นที่ด้านขวา

11. คลิก Variables เลือก set to มาวางใน When ButtonBig Click

12. คลิกปุ่ม Set เลือก global big

13. คลิก Variables เลือก get มาวางต่อ set global big

14. คลิก get แล้วเลือก global big

15. คลิกปุ่ม ButtonSmall แล้วเลือก When ButtonSmall Click มา วางพื้นที่ด้านขวา 16. คลิก Variables เลือก set to มาวางใน When Buttonsmall Click 17. คลิกปุ่ม Set เลือก global small 18. คลิก Variables เลือก get มาวางต่อ set global small 19. คลิก get แล้วเลือก global small

20. เปลี่ยน r 5 ใน call canvas1 DrawCircle เป็น get global dotsize 21. ลบ 5 โดยลากลงในถังขยะ 22. เลือก get จาก Variable แล้วเลือก get เป็น global dotsize

Step 5 บันทึก

1. คลิกที่หน้าชื่อ Project ในที่นี้คือ paintpot แล้วคลิก Project > Export selected project (aia) to my computer 1 2 3

2. ไฟล์ paintpot.aia ที่ส่งออกมายังเครื่อง คอมพิวเตอร์ของเรา