(อาจารย์สุธิรา) วันนี้นะคะ จะมาพาทำแอปอีกตัวหนึ่งที่ใช้วิธีการ เรียกว่าอะไร ก็คือ เดี๋ยวๆ ยกตัวอย่างนะคะ เป็นแอปนะ ไว้วาดไว้เขียนน่ะ ก็คือจะมีเหมือนสีให้เลือกนะคะ เป็นแอปลักษณะนี้ มีสีแล้วก็มีขนาดของหัวแปรงนะคะ เราจะมากำหนดขนาดหัวแปรงแล้วก็กำหนดสีเพื่อให้ใช้เขียนได้วาดได้นะคะ หลักการ ก่อนอื่นเปิด Thunkable นะคะ แล้วให้เด็ก ๆ สร้าง Project ใหม่นะ ของเด็ก ๆ น่ะ ก็คือไปที่ Create New App นะคะ คลิก Create New App ชื่อ ให้ตั้งชื่อว่า “Drawing” Drawing แปลว่า การวาดน่ะ นะคะ D-r-a-w-i-n-g Drawing แล้วก็เลือก Category เป็น Education ก็ได้ การศึกษานะ นะคะ ทำเป็น Education นะคะ ตั้งชื่อเสร็จแล้วก็กด Create ได้เลยนะคะ ของเด็ก ๆ น่ะ การศึกษาเลือกหมวด Category เป็น Education ของเด็ก ๆ สร้างใหม่เลยนะคะ ของแม่จะใช้ตัวเดิมเพราะว่า Upgrade แล้วมันต้องเสียสตางค์ เราไม่อยากเสียสตางค์ เราจะใช้ตัวเดิม ในหน้า Screenshot นะคะ Component ที่เราจะใช้ 1. มี Button นะคะ แล้วก็มี Slider แล้วก็อีกตัวหนึ่ง ชื่อว่า Canvas นะคะ ก็คือผ้าใบ หลักการก็คือเราจะมีปุ่มสีสำหรับเลือกสีอยู่ด้านบน โดยใช้ปุ่มนะคะเป็นตัวสร้างปุ่มสีแล้วก็มี Slider อยู่ด้านล่าง Slider ใช้เพื่อเพิ่มขนาดของหัวตัวเขียนเรานั่นเองนะคะ และสุดท้าย Canvas Canvas จะอยู่ตรงกลาง Canvas ก็คือ ผืนผ้าใบหรือพื้นที่สำหรับในการวาดหรือเขียนเองนะคะ ตัวแรกที่เราจะใส่เข้าไปใน Screen ในหน้าแอปของเรานะคะ ตัวแรกเลยก็คือ Slider คลิกที่ Slider นะคะ อยู่ตรง Input ลูก อยู่ตรงหมวด Input ตอนนี้ไปที่หมวด Input ก่อน Input นะคะ หา Slider อันที่ 2 เห็นไหมคะ Input เห็นไหมมันจะมีหมวดของมันนะ ใน Component แต่ละตัวของเราน่ะ เราจะมีทั้งหมดดูนะคะ หมวดแรก Basic หมวดที่ 2  Data หมวดที่ 3 Inputหมวดที่ 4 Media แล้วก็หมวดที่ 5 Embed ตอนนี้ให้ไปที่ Component ที่อยู่ในหมวดที่ 3 Input นะคะ แล้วเลือก Slider Component ตัวที่ 2 นะคะ Slider เอามาวางด้านล่างลูก เราจะได้แถบเครื่องมือที่เป็นรูปอย่างนี้ มีสีน้ำเงินอย่างนี้นะคะ เด็ก ๆ ขยายให้มันเกือบเต็มจอหน่อยเด้อ ขยายพื้นที่ให้น้องเกือบเต็มจออย่างนี้นะคะ โอเคไหม ใครยังไม่ได้ Slider ได้หรือยัง ตอนนี้ได้หรือยัง คลิกที่ Component Input Slider แล้วลากไปวาง ดูนะคะ ตอนนี้มาที่ Component ที่ชื่อว่า Input เห็นไหม อันที่ 3 นี่ แล้วเลือก Slider ที่อยู่ตัวที่ 2 กด เมาส์ค้างแล้วลากมาวางอย่างนี้นะคะ เอาตัวเดียวนะ แล้วจัดขนาดโดยการขยายให้มันเกือบเต็มจอน่ะค่ะ แต่ไม่ต้องเต็มนะ เว้นขอบไว้นิดหนึ่งอย่างนี้นะคะ เห็นไหม เว้นซ้ายกับขวานิดหนึ่ง ให้เกือบเต็ม ทีนี้สิ่งที่เราจะต้องมากำหนดให้ Slider ก็คือกำหนดค่าเริ่มต้นนะ มันไม่ควรจะมาอยู่ที่ตรงกลางอย่างนี้ นึกออกไหม มันจะต้องมาอยู่ที่ค่าเริ่มต้น แล้วก็ค่าสูงสุดของจำนวน ที่มันจะสไลด์ได้ไปจนถึงนะ ด้านหลังสุดนะคะ คลิกที่ Slider ของเราแล้วมาดูที่เห็นไหม Property Property ที่อยู่ขวามือเห็นไหมคะ ให้เด็ก ๆ มาที่นี่ Value Value Range เห็นหรือยัง ตัวแรก Min Min ก็คือค่าต่ำสุดคือ 0 นะคะ Max ค่าสูงสุดให้พิมพ์ค่าสูงสุดจนมันมาถึงอันหลังสุดนี้มันจะอยู่ที่ประมาณ 200 200 250 นะ เอาให้สัก 250 แล้วก็ค่า Value เห็นไหมคะ Value ตัวบนสุดกำหนดค่า Value เริ่มต้นที่ 0 ค่ะ ใส่ 0 นะคะ ใน Property หรือคุณสมบัติที่เราจะต้องกำหนดคือ 1 ช่อง Value ใส่ 0 Step นี่คือ 1 คือให้มันเพิ่มทีละ 1 ถ้าเราอยากให้มันเพิ่มมากกว่านี้เราก็แก้ได้ทีหลังนะคะ แต่ค่าต่ำสุดคือ 0 ก็คือให้มันเริ่มจากศูนย์ก็คือ เริ่มต้นที่ตำแหน่งมุมซ้ายนะคะ และสูงสุด 250 ก็คือมันจะเลื่อนมาได้จนถึงด้านหลังสุดนะคะ ก็คือเลื่อนขนาดไอ้ตัวนี้ Slider นี่มาได้ถึง 250 พอได้ส่วนของ Slider แล้วนะคะ ส่วนต่อไปที่เราจะทำ ก็คือส่วนของปุ่มที่จะเป็นปุ่มสำหรับสีน่ะค่ะ กดเลือกสีนั้นสีนี้นะคะ หลักการง่าย ๆ ให้เราเลือก Component ที่ชื่อว่า Basic เลือก Component แรก Button อันแรกเลย ลากมาวาง 1 อัน เอาแค่อันเดียวก่อนนะลูก มันจะมีคำว่า Button อยู่ตรงกลางให้เด็ก ๆ ไปที่ Property เห็นไหมที่มันจะมีช่องนี้ ชื่อมันนี่ ลบออกค่ะ ลบคำว่า Button ที่อยู่ตรงนี้ออก เห็นไหม จะได้แถบอย่างนี้ เราต้องการเป็นลักษณะกลม ๆ เพราะฉะนั้นเราย่นขอบมันเข้าไป กลม ๆ ขนาดนี้เห็นไหมคะ ได้ไหม สีแรก หลักการง่าย ๆ เราเลือกจากไอ้นี่เลยลูก เห็นไหม ฝั่งสีตามค่าสีเลย สีแรกคือสีอะไร สีแดงใช่หรือเปล่า สีแดงหรือสีส้ม ส้มละกัน ส้มนะ ออกโทนส้ม จะเอาสีส้มนะคะ เป็นสีที่ 1 ได้กลม ๆ อันแรกแล้ว เราอยากให้มันได้ขนาดเท่า ๆ กัน เพราะฉะนั้น เรากดที่เห็นไหมคะ ตรง Property ส่วนหัวที่มีจุด 3 จุด เลือก Duplicate ทำซ้ำ ทำซ้ำแล้วกดที่ตัวนั้นแล้วลากออกมา 1 อัน เห็นไหม ทำซ้ำแต่เราไปเปลี่ยนอะไรคะ เปลี่ยนสีที่ 2 เมื่อกี้แดงแล้วก็เป็นถัดมาก็คือเหลืองใช่หรือเปล่าลูก เราอยากได้สีเหลือง สีเหลืองนะคะ เหมือนเดิมค่ะ ทำให้ครบอะไร ไล่สีกันนะเด็ก ๆ  มีแดง เหลือง เขียว น้ำเงิน ม่วง เอ้ย ไม่ใช่แดงสิ อันแรกส้มนะ ส้ม แล้วก็มาเหลือง แล้วก็มาเขียว แล้วก็ฟ้า น้ำเงิน ม่วง ชมพู แล้วสุดท้าย แดงนะคะ ทำต่อค่ะ เด็ก ๆ ทำต่อ Duplicate ต่อเหมือนเดิม ทำซ้ำอีกครั้งหนึ่ง อุ้ย เวลากดระวังนะคะ มันจะลากขยาย เราอยากได้ขนาดมันเท่าเดิม ถ้าขนาดมันไม่เท่าเดิมเดี๋ยวเราลบทิ้งก่อน เอาใหม่เราก็กด Duplicate ใหม่นะคะ เราจะได้ไม่ต้องไปแก้ Size มันใหม่น่ะ เราแค่ไปเปลี่ยนตรงสี แล้วก็ลากน้องออกไป แล้วก็เปลี่ยนสีเป็นเขียว แล้วก็เหมือนเดิม ทำซ้ำสีถัดไปนะคะ Duplicate ซ้ำ แล้วก็ลากออกไป เขียวแล้วอะไรต่อนะ เขียว ฟ้า ฟ้า ขอบฟ้าแบบตระกูล ฟ้า โอเค ฟ้าและก็น้ำเงิน ดูการจัดแนวนะ เห็นไหมมันจะมีเส้นสีขึ้นมานะ เราจะได้เห็นว่ามันอยู่ในแนวเดียวกันหรือเปล่า น้ำเงินนะคะ ต่อไปสีน้ำเงิน น้ำเงิน น้ำเงินแล้วก็ Duplicate เพิ่ม น้ำเงินแล้วก็ ม่วง ม่วงแล้วก็สีอะไรเอ่ย สีอะไรเอ่ย ชมพู สีสุดท้ายแล้วนะคะ สีสุดท้าย สีสุดท้ายคือสีแดง แดง ๆ ๆ ๆ นี่ ทีนี้ มีสีแล้วทีนี้เผื่อจะลบ นึกออกไหม เราจะลบน้องออกนะ เราหารูปยางลบมาใส่แทนแล้วกันนะคะ เพราะอันนี้เป็นปุ่มสีนะ ยางลบนะคะ ยางลบ หาภาพยางลบ เราอยากได้ภาพที่เป็นภาพวาด เราก็เติมด้วย vector เข้าไป ขอเอารูปนี้แล้วกัน เอารูปนี้แล้วกันนะคะ หรือจะเอารูปอื่น อยากได้ยางลบสีอะไร เลือกเอานะเด็ก ๆ ให้เห็นว่า ถ้าเลือกปุ่มนี้มันจะเป็นลบน่ะ จะให้มันลบออกนะคะ เอาล่ะว้า เอาอันนี้แหละนะ จะเอาสีนี้แหละ ขอบันทึกรูปภาพเป็น ใส่ใน Picture ยางลบ ชื่อยางลบภาษาอังกฤษก็คือ Eraser นะคะ E E-r-a-s-e-r แล้วขอปุ่มเพิ่ม พอทำซ้ำ Size มันจะได้เท่ากัน แต่เราจะไม่ใส่สี เราจะเปลี่ยน ดูนะคะ วิธีการเอาภาพเข้ามาใส่ แทน Background คลิกที่คำว่า Background เลือกเป็น Image แทนเห็นไหม Background แล้วเลือก Image นะคะ Image แล้วให้เราคลิกที่ No File Source นี่ เห็นไหม เลือก Upload File เหมือนเดิม วิธีการเอาภาพเข้าจำได้นะ เหมือนเดิมนะคะ เห็นไหมได้รูปยางลบแล้วนะคะ ตึ๊ด ๆ ๆ เดี๋ยวจะเดินดูนะคะว่าใครทำสีและก็ยังลบครบแล้วนะคะ ไม่อย่างนั้นเดี๋ยวเราทำตัวอื่นต่อไม่ได้นะคะ ต้องทำตัวนี้ให้ได้ก่อนนะคะ เพราะเป็นตัวหลักสำคัญ จัด จัดให้สวยงามเมื่อกี้ตำแหน่งไม่สวย จัดใหม่ จัดวางให้สวยงามนะลูก บางคนทำขนาดใหญ่เกินไปนะคะ ลดขนาดได้นะลูก วิธีการดูนะคะ ถ้าเราทำไปแล้วขนาดไม่เท่ากันนี่ เด็ก ๆ เช็กที่ตำแหน่งนี้ลูก สมมติเอารูปแรกเป็นหลักนะ เห็นไหม ตรง Layout ของ Property นี่ ตรง Layout เห็นไหมคะ ให้เด็ก ๆ ดูที่ตำแหน่ง W W ก็คือ Width Width นั่นก็คือความกว้าง แล้วก็ดูที่ตำแหน่งตัว H H ก็คือ Height ก็คือความสูงนะคะ ถ้าเราอยากให้มันเท่ากันเช่นกว้างสูงเท่ากันก็อันนี้ 32 เพราะฉะนั้น Height เราก็ใส่ 32 ตัวอื่นเราก็ทำ Size เดียวกันก็คลิกลงไปแล้วก็มาคลิกที่ W 32 แก้ให้เท่ากัน มันก็จะได้ขนาดของปุ่มเท่า ๆ กันทุกอันเลยนะคะ มาแก้ที่ตำแหน่งนี้ได้นะลูก แก้ความกว้างกับความสูงของมัน Width กับ Height แค่นั้นเอง  Size จะเท่ากันเป๊ะเลย ถ้าใครทำแล้วไม่เท่ากันน่ะ เราเช็กได้นะคะว่าขนาดเรามันเท่ากันไหม เห็นไหมคะ ถ้าไม่เท่าเราก็แก้ได้ อยากให้มันเท่ากัน มันจะได้ดูสวยสวยนะคะ ทำงานก็ ทำทั้งทีก็ทำให้มันสวย ๆ แล้วก็ดูตำแหน่งการจัดวาง บอกทุกครั้ง พอเวลาเราจัดมันจะมีเส้นสี ๆ ชมพูขึ้นมาเห็นไหม แนวเดียวกันมันก็จะขึ้นระนาบให้ดูว่าอยู่ในแนวเดียวกันแล้วนะ อย่างนี้นะคะ นี่เห็นไหม มันจะเป็นอย่างนี้เลย โอเค เมื่อกี้ไปเดินสำรวจมาแล้ว เด็ก ๆ ได้เกือบ… ได้ครบหมดแล้วล่ะ ทีนี้เรามาเพิ่มนะคะ องค์ประกอบที่เราจะเพิ่มอยู่ที่ Component นะคะ มาที่แถบเครื่องมือทางซ้ายมือนะคะ Component ที่ชื่อ อะไรนะ Canvas Canvas อยู่ อยู่ตัว Component สุดท้ายนะคะ Embed เลือกอันที่ 3 1 2 3 Canvas เห็นไหม รูปเหมือนผ้าใบนี่ค่ะ คลิกค้างแล้วเอาไปวาง พื้นที่ที่เราจะทำก็คือ เด็ก ๆ เห็นนะ นี่ ตั้งแต่ขอบสีข้างบนลงมาจนถึงตรงนี้ เห็นไหมคะ ให้ลักษณะกรอบผืนผ้าใบเรา อยู่ตรงพื้นที่นี้เห็นหรือเปล่า เห็นหรือยังเอ่ย นี่ ๆ ถ้าใครเลือกถูกอัน Canvas มันจะมีตัวหนอนโผล่ขึ้นมาแบบนี้นะคะ เจ้าหนอนแดง Red Worm เลือก Canvas นะคะ Canvas แล้วปรับขนาดให้เท่ากับที่แม่วางไว้ก็คือให้เกือบเต็มกรอบแต่ไม่เกินแถบสีกับแถบ Slider ของเรา เวลาจัดนะลูก สังเกตว่าเห็นไหมตรงนี้แม่ไม่ได้เอามาทับไอ้ตัวส่วนนี้ มันจะมีขอบของมันนะ ดูนะคะ เพราะถ้าเด็ก ๆ ไปทับกันน่ะ นี่พอไปวางทับน่ะ เดี๋ยวมันจะใช้… มันจะใช้ไอพวกนี้ไม่ได้ นึกออกนะคะ เพราะฉะนั้น ถึงได้บอกว่า เหลือพื้นที่ให้แต่ละส่วนด้วยนะคะ แต่ละกรอบ เหมือนตรงนี้ แม่ก็ไม่ได้เอาไปทับข้างบน เห็นไหมนะคะ เราแบ่งสัดส่วนดี ๆ แบ่งดี ๆ นะคะ กรอบทำ แต่ไม่ถึงกับทำเต็มก็มีพื้นที่ไว้นิดหนึ่ง  อย่างละนิดอย่างละหน่อย โอเค ส่วนใครที่ได้ Canvas มาแล้ว เด็ก ๆ เห็นตัวหนอนอันแรกไหมคะ ตัวแรก คลิกที่ตัวหนอนอันแรก แล้วคลิกถังขยะเราลบออกค่ะ เราไม่ต้องการไอ้รูปตัวหนอนนี้มาโชว์นึกออกไหม เราต้องการแค่ผืนผ้าใบเฉย ๆ นะคะ อะไรขึ้นมาเตือนเยอะแท้ เสร็จแล้วคลิกกลับไปที่ Canva เรานะคะเด็ก ๆ นี่นะคะ เจ้าหนอนต้องหายไปนะ เราเอาแค่ ตัวผืนผ้าใบเปล่า ๆ ใครยังทำหนอนหายไม่ได้ คลิกเข้าไปที่ตรงนี้ แล้วมันจะมี ถ้าแต่เดิมนี่ มันจะมีหนอนวางอยู่นะคะ แล้วลบออกแค่นั้นเอง โอเคนะคะ ทุกคนได้… ได้แล้วนะคะ ตอนนี้เด็ก ๆ จะมีองค์ประกอบของ ทำไมไม่เข้ามา ใจเย็น ๆ อ้าว เครื่องค้าง ไปสิจ๊ะ โอเค แหม่ ดูนะคะ เราจะมีปุ่มสีแล้วนะเด็ก ๆ นะ แล้วก็มีตัว Slide ตัว Slider นี่ สำหรับเพิ่มขนาดของหัวพู่กันหรือหัวดินสออะไรก็แล้วแต่นะคะ แล้วก็ตัว Canvas นี้นะคะ ไว้เป็นพื้นที่สำหรับวาด ทีนี้ตรง Canvas เรามากำหนดค่าตรงนี้นะคะ ให้เด็ก ๆ คลิกเข้าไปที่ดูนะคะ เด็ก ๆ จะเห็น Canvas ใช่ไหม คลิกเข้าไปใน Canvas ค่ะ ที่ Component เราเห็นไหมคะ แล้วคลิกที่ Stage 1 ตรง Property จะต้องขึ้นคำว่า Stage 1 แล้วเลื่อนไปที่ตำแหน่งของ Touch Drawing เห็นไหมคะ เห็นหรือยัง เปิดเราต้องเปิด Touch Drawing นะคะ เลื่อนเปิดตรงนี้ ตำแหน่งนี้เห็นหรือเปล่าลูก ใครหาตำแหน่งนี้ไม่เจอ เด็ก ๆ ต้องเข้าไปที่ Stage นะคะ ใน Canvas ก่อน เห็นไหมใน Canvas มันจะมีซ่อนอยู่นี่ ถ้าเราไม่คลิกนี่ มันจะไม่เห็นคำว่า Stage ขึ้นมาใช่ไหมคะ เด็ก ๆ คลิกเข้าไป 1 ครั้ง Stage มันจะขึ้นมา พอ Stage ขึ้นมา เด็ก ๆ คลิกที่ Stage นะคะ แล้วมาเลือก Touch Drawing แต่เดิม Touch Drawing มันจะเป็นปิดไว้อยู่ เป็นสีเทา ๆ อย่างนี้ เราต้องเปิดมันนะคะ เพื่อใช้งาน Touch Drawing ให้เป็นสีน้ำเงินขึ้น เปิดค้างไว้เดี๋ยวจะไปเดินดูว่าใครยังไม่เปิด Touch Drawing โอเคนะคะ พร้อมจะเขียนโค้ดหรือยังเด็ก ๆ ถ้าพร้อมแล้ว เตรียมพร้อมนะคะ เรากลับไปที่ Screen ของเราค่ะ ทีนี้ นะคะ แล้วเลือก Block เลือก Screen ก่อนนะ แล้วมาเลือก Block นะคะ ทีนี้ Block นี้ เด็ก ๆ ดูนะคะมันจะอยู่ที่ชื่อว่า Advance เด็ก ๆ ต้องไปที่ Advance ลูก ไปที่ Block ล่างสุดเลย Advance เห็นไหมคะ แล้วก็เลือก Any component Any component นะคะ คลิก 1 ครั้ง ใช่ ๆ อยู่ที่ Advance นะลูก อยู่ที่ Advance เห็นไหมคะ อยู่ที่ Block ตัวสุดท้ายที่ชื่อว่า Advance หมวดสุดท้าย Advance แล้วก็อยู่ที่อันสุดท้ายด้วย Any component นะคะ หลักการของเรา เดี๋ยวให้ดูหน้า Design ก็คือเมื่อเราเปิดหน้าแอปขึ้นมานะ แล้วสิ่งที่เราจะสามารถทำได้ก็คือ ถ้ากดปุ่มใช่ไหม ถ้ากดปุ่มสี เราก็จะเขียนสีนี้ได้ นึกออกนะ มันก็จะเขียนไปตามสีก็คือ ให้ปุ่มทุกปุ่มนี่มันทำงาน ทำงานแล้วทำอย่างไร ปุ่มนี้จะทำอย่างไร ก็ให้นึกถึงว่าถ้ากดสีส้ม เวลาเราวาดออกมามันก็ต้องเป็นสีส้มถูกไหมคะ ถ้ากดสีเหลืองเวลาวาดก็ต้องเป็นสีเหลือง กดสีไหนวาดออกมาเป็นสีนั้น แต่ถ้ากดปุ่มลบ ลืม เดี๋ยวจะงง เด็ก ๆ มาที่หน้า Design ก่อนลูกแป๊บหนึ่งกลับมาที่หน้า Design ก่อน ให้เราเลือกที่ปุ่มที่เป็นรูปยางลบของเราน่ะค่ะ แล้วเราไปตั้งชื่อให้น้องใหม่ก่อนไม่เอา Button 8 ให้รู้ไปเลยว่าปุ่มนี้เป็นยางลบ เห็นไหมคะ คลิกเข้าไปที่ตรงตำแหน่งชื่อมัน แล้วก็แก้ชื่อเป็น Eraser E-r-a-s-e-r นั่นก็คือถ้าเรากดปุ่มลบนะ มันก็จะต้องลบไอ้สิ่งที่อยู่ในหน้าในผืนผ้าใบเรานี่ออกไปนะคะ แก้เป็น Eraser นะคะตัวอื่นไม่ต้องแก้ เพราะจิ้มตามสี ก็ออกตามสีนั้นว่าอย่างนั้นเถอะนะคะ เพราะเราใส่ค่าให้เข้าไปแล้วเรียบร้อยแล้วด้วย คลิกนะคะที่ปุ่มสุดท้ายที่เป็นรูปยางลบ และชื่อปุ่มจะต้องขึ้นว่า Eraser โอเค พร้อมไปที่การเขียน Coding ไปที่ Block ของเราแล้วนะคะ คลิกที่ Screen ของเราค่ะ คลิก Screen แล้วก็เลือก Block นะคะ ไปที่ Component Advance ตัวสุดท้าย เลือก Any Component Block ที่เราจะเลือกก็คือเมื่อเห็นไหมคะ Any Button ปุ่มใด ๆ คลิกปุ่มใด ๆ โดนกดนี่ Do ให้ทำอะไร เราจะเลือกตัวนี้ออกมา Block นี้ออกมา เพราะใน Block นี้มันบอกไว้ว่าเมื่อมีการกดปุ่มอะไรก็แล้วแต่ เห็นไหมคะ Any Button Click เมื่อมีการคลิก Component จะทำอะไร ทำอะไรได้ มาดูกัน สิ่งที่เราอยากให้ทำก็คือ ผ้าใบของเรา นึกออกนะ เพราะฉะนั้นเราต้องคลิกที่ Stage อยู่ไหนนี่ คลิกที่ Stage เดี๋ยวนะ เราต้องเลือก Stage นะคะเด็ก ๆ เพราะพื้นที่ที่เราจะทำก็คือ ฃพื้นผ้าใบตรงนั้นมันจะเป็น Stage นะ เลือก Stage แล้ว เดี๋ยวนะ ขอดูโค้ดก่อนแป๊บหนึ่งนะคะ เมื่อ Stage เมื่อมีการคลิก สิ่งที่จะต้องทำก็คือ Stage Touch Drawing to เจอแล้ว อันสุดท้ายนะลูก เดี๋ยว ๆ ๆ เดี๋ยวหาไม่เจอ Block ต่อไปที่เราจะเอามาใส่อยู่ที่ Stage นะคะ แล้วก็อยู่ที่ตัวสุดท้ายเลย ที่มี ไม่ตัวสุดท้ายสิ ตัวที่มีคำว่า Set Stage Drawing Color to นี่ เห็นหรือยัง ใครยังหาไม่เห็นจ๊ะ หาไม่เห็นยกมือ เดี๋ยวย้อนให้ดูใหม่ช้า ๆ นะคะ ตอนนี้ Block ที่เราได้ก็คือเมื่อมีการกดปุ่มใด ๆ Any Button Click Do Do จะให้ทำอะไรให้ทำอะไร สิ่งที่เราจะให้ทำมันอยู่ที่ Canvas หรือใน Canvas ก็คือมี Stage เพราะฉะนั้นเราคลิกที่ Stage นะคะ เห็นไหม Canvas ก็ Stage แล้วก็เลื่อนลงไปจนเห็น นี่ ๆ ที่มันมีแถบสีอยู่ด้านหลังนี่ สังเกตง่ายอยู่นะ ไปที่ Set Stage Drawing Color to แล้วก็มีช่องสีนะคะ ตัวนี้นะคะ ก็คือให้ Stage มัน Set Stage Drawing Color เห็นไหม Drawing Color ก็คือวาดใช่ไหมคะ วาดอะไรวาดสี สีอะไร เดี๋ยวอันนี้ค่อยไประบุใส่ทีหลัง ลากมาก่อน ลาก Block มาก่อน มาวางก่อน โอเคไหม ใครยังไม่ได้แบบนี้ ทีนี้ ลองนะคะลอง Test ดู คลิก Testing กดเลือกสี เอ้า ๆ ๆ ๆ โผล่ไปด้านไหนนะนี่ มันให้วาดนิดเดียวเมื่อกี้เห็นไหม สีมันขึ้นนิดเดียว อันนี้มันค้าง ของเด็ก ๆ น่าจะขึ้นไหม เลือกแล้ววาด ได้ไหม ดูหรือยัง ดูหรือยัง เอาใหม่ เพราะอะไร เพราะยังเป็นสีดำเพราะอะไรในตัวเลือกเรามันเป็นสีดำถูกไหมคะ อันนี้ คือแม่มีหน้าเก่าค้างไว้น่ะ มันก็เลยย้อนกลับมาหน้าเดิมนะ โอเคนะคะ เพราะนี่ ดูสีที่เลือกตอนนี้ยังไม่ได้ระบุเปลี่ยนสี ยังระบุเป็นสีนี้อยู่ Do ตรงนี้จะเปลี่ยนนะคะ เปลี่ยนเป็น หาตัวไหน ย่อลงไปก่อน มี Canvas แล้ว อันนี้ Component อีก แล้วเลือก Stage ตัวนี้ไปวางเข้าช่องนี้แทนนะลูก เปลี่ยนจาก Stage เป็น Button ปุ่ม… ปุ่มอะไรล่ะ แล้วก็ไป ตรงนี้ลาก Component เข้ามาใส่ ก็คือเมื่อ… ก็จะวาดในจากอะไร จากปุ่มที่กด นึกออกไหม Component ก็คือมันก็จะเช็กตามสี ดูสิว่ามันจะเป็นสีนั้นไหม Test ทำเหมือนเดิม โอเคไหมเด็ก ๆ ได้สี เอาใหม่เด้อ อันไหน อันนี้ใหม่ใช่ไหม ตัวนี้นะคะดู ตอนนี้มีอันนี้ครบแล้วนะ ตัวนี้มันมาจากนี่เห็นไหม Any Component ต้องไปที่ Any Component นะคะ แล้วเลือกนี่ Stage Stage Background Color นี่ เลือกตัวนี้ มาใส่ตรงช่องสีแทน เพราะถ้าอย่างนี้มัน Fix ไว้ที่สีเดียว นึกออกนะ แต่ทีนี้ เรามีสีใช่ไหม เราก็จะต้องมาให้มันทำตามค่าปุ่มสีของเรานั่นเองนะคะ เพราะฉะนั้นตรงช่องแรก Stage เราก็เปลี่ยนจาก Stage เป็น to Button ก็คือไปที่ปุ่ม ปุ่มนี่ ปุ่มเรา เราใช้ Component เพราะว่าปุ่มเรามีหลายปุ่ม เห็นไหมคะ Any Component เอ้ย Any Button เพราะมีหลายปุ่ม เพราะฉะนั้นต้องไปดึง Component ที่มันสร้างไว้ให้อัตโนมัติน่ะมาใส่ แล้วพอเราคลิก Play ปุ๊บนะคะ เมื่อเรากดสีไหนก็แล้วแต่ มันก็จะ… มันจะย้อนกลับมาทำไม ขอเล่นก่อนไม่ได้หรอ เห็นหรือเปล่า นะคะ เมื่อกี้สีชมพูและสีน้ำเงิน แม่ได้ทุกสีนะ ใครไม่ได้ ช่องกลางลากมานะคะ ลากมาไม่ใช่ติ๊กเลือก ดูใหม่นะคะ ดูโค้ด Block ดี ๆ อะไรโปรแกรมเล็ก ๆ เองทำไมช้าจัง นี่ ๆ ๆ อันนี้ แล้ว Component นี่ลากมาจากตรงนี้นี่ ลากมาใส่ มันสร้างไว้ให้อัตโนมัติไง มันเช็กแล้วว่า Any Button ของเรามีอะไรบ้างนี่ มันก็ทำ Component มา พอทำ Component เราก็บอกว่า ท่อนนี้ ตาม Component นี้ แล้วก็เป็น Background Color โอเคนะ แล้วลองจิ้มสีดู โอเคนะคะ โอเค ได้วาดได้แล้วนะ แต่ยังไม่เสร็จใช่ไหม เพราะอะไรลูก เดี๋ยวย้อนกลับมาที่นี่ก่อน เรามีปุ่มลบอีกใช่ไหมเมื่อกี้ให้เพื่อนลอง Test กดปุ่มลบแต่มันออกสีถูกไหมลูก เพราะฉะนั้น เมื่อใดที่กดปุ่มลบ มันจะต้องทำอะไรคะ ลบออกใช่ไหมลูก เราต้องไปกำหนดเขียนโค้ดให้กับ Block ของ… เขียน Block ให้… เดี๋ยวจะเขียนโค้ดให้ปุ่มลบนะคะ เขียน Block ให้ปุ่มลบ เขียนโค้ดให้ปุ่มลบนะคะ เรากลับไปที่ Block ของเราเหมือนเดิม ตอนนี้เรามีอะไรแล้วบ้าง มีบอกว่าเมื่อมีการคลิกปุ่ม ทีนี้มันก็ต้องมีการตรวจสอบเพราะมีวาด สิ่งที่ตรงกันข้ามกับวาดก็คือลบ เพราะฉะนั้นเราต้องใส่เงื่อนไขให้มันนะคะ ไปที่ Core เลือก Logic ลูก เอ้ย เลือก Control สิ Control if เห็นไหมคะ เลือก if เอาใส่ไว้ก่อน ก่อนเงื่อนไข เงื่อนไขต้องมาก่อน ถ้าแล้วหรือ ถ้าแล้วถึงจะทำ เงื่อนไขของ if นะคะ if อะไร สิ่งที่จะอยู่ในนี้ก็คือ Stage ไหม Stage เราอยู่ไหนน่ะ หา Stage ก่อนน่ะ อยู่ที่ Canvas Stage if ปึ๊บ ๆ ๆ Stage นะคะ แป๊บหนึ่งนะคะ If แล้วก็เลือก Logic if นะคะ if แล้วไปเลือก Logic นะคะเด็ก ๆ อันแรก… อันแรกที่มีเครื่องหมายเท่ากับน่ะ ไม่ ๆ ๆ อยู่ที่ Logic อยู่ที่ Logic นี่ เครื่องหมายที่มีเครื่องหมายเท่ากับก่อน อันนี้ก่อน แล้วก็เลือก Eraser Eraser เราอยู่ไหนเด็ก ๆ จะเจอไหมอยู่ข้างล่างสุด อยู่ไหนหว่า ไป Any Component ครับเด็ก ๆ เลือกอันเดียวนี่ ๆ ที่มี  Block อันเดียวที่ขึ้นว่า Layer 1 แต่เราไม่ได้เอา Layer 1 เปลี่ยนจาก Layer 1 เป็นของเราก็คือ Eraser เราจะเลือก ถ้ามีการลบ นึกออกนะ เงื่อนไข เปลี่ยนจากถูก เอ้ย ไม่เท่ากับ ถ้า ปึ๊บ ๆ ๆ ไม่เท่ากับ ถ้าอะไร ถ้า Component เห็นไหมคะ ถ้า Component นี่ เมื่อปุ่มโดนคลิกใช่ไหม โดยมี Component กำกับไว้นี่ นั่นหมายถึง Any Button ก็คือปุ่มใด ๆ  ถ้าปุ่มใด ๆ ที่คลิกไม่ใช่ปุ่มลบเห็นไหมคะ เงื่อนไขมันบอกว่า ถ้า if Component ก็คือปุ่มใด ๆ นี่ ไม่เท่ากับนะคะ เป็นเครื่องหมายไม่เท่ากับนะ ไม่ใช่เท่ากับนะ ถ้าไม่เท่ากับปุ่มลบนะคะ สิ่งที่เราต้องการให้เขาทำก็คือ เราก็มาเลื่อนไอ้นี่ขึ้นมา Do Stage นี่ Do ขึ้นมาตำแหน่งนี้ เห็นไหมคะ เพราะเมื่อกี้ Do Stage มันเลื่อนไปอยู่ข้างล่างนะ มันอยู่ตรงนี้ไม่ใช่ เลื่อนมันขึ้นมาเพราะเราใส่เงื่อนไขเข้ามาเพิ่ม ทำอะไรให้มันไปคลิกค่าสี คลิกค่าสีเสร็จแล้ว แต่ถ้าเป็นปุ่มลบล่ะ เพราะฉะนั้นเมื่อมี เงื่อนไขที่ 1 บอกไม่ใช่ปุ่มลบ เพราะฉะนั้นต้องเพิ่ม else else คือเงื่อนไขที่ 2 ว่า แล้วถ้าเป็นปุ่มลบนะคะ คลิกที่ไอ้ตัวปุ่มสีม่วง ๆ นี้นะลูก ตำแหน่งสีม่วง ๆ กด 1 ครั้ง เห็นไหมคะ เลือก else มาวางต่อ if เห็นหรือเปล่า มันจะมีช่อง else โผล่ขึ้นมา อย่างนี้ เห็นไหมคะ ใครยังไม่ได้ Block แบบนี้บ้าง กดไอ้นี่ else ลากเข้าไปต่อตรง if จ้ะ นี่ ๆ ๆ ลากเข้าไปต่อ ตรงช่องนี้ เห็นไหม ข้างล่างมันถึงจะขึ้น ดูนะคะ ดูใหม่นะคะ คลิกกลับคืนก่อน คลิกที่สีม่วง ใช่ นี่ไง ลากไปต่อนี่ แล้วมองหาคำว่า Canvas Canvas ไปที่ Canvas แล้วดูที่ Look ลูก ลบได้แล้ว ใช่สิ เอ้าก็อย่าเพิ่ง ไปทีละอย่างสินะ ก็รอเพื่อนหน่อยตัวเองได้แล้ว ก็รอเพื่อนก่อน หา Color Drawing อยู่ไหนหว่า Clear Drawing On เห็นไหมคะ เอ้ย เมื่อกี้ลืมบอกใช่ไหม ให้ไปที่ Look เพราะสิ่งที่เราจะทำมันยังอยู่ในอะไรคะ อยู่ใน Canvas ของเราใช่ไหมคะ Look ก็คือเพื่อมองหาอะไร มองหาคำสั่ง Clear Drawing On ก็คือให้มันลบใช่ไหม เพราะอันแรกบอกว่าถ้าปุ่มนั้นไม่ใช่ปุ่มลบ แต่ถ้ามันเป็นปุ่มลบปุ๊บ else มันจะทำงาน ก็คือให้ลบ Clear Drawing On Canvas 1 ผ้าใบเราชื่อว่า Canvas 1 นะคะ ใครได้อย่างนี้แล้ว เอ้าลองเช็กดูนะคะ วาดลงไปก่อนนะคะ วาดก่อนแล้วเด็ก ๆ ค่อยลบนะ วาดแล้วกดปุ่มลบ ของเด็ก ๆ น่าจะได้ ไอ้ตัวนี้มันมาค้างกับไอ้ตัว Poptiggy นี่เฉย ๆ นะคะ โอเคไหม ลบไหมคะ ใครลบไม่ได้ ชื่อมันก็บอกแล้วนะ Clear Drawing ลบไอ้สิ่งที่วาดอยู่น่ะ ออกเสีย นะคะ ทีนี้ต่อไปส่วนที่เราจะทำ ตรงส่วนของปุ่มควบคุมได้หมดแล้วนะคะ เมื่อกดปุ่มนี้วาดก็จะเป็นสีนี้กดปุ่มลบ ไอ้ที่วาดก็ได้หาย ทีนี้ส่วนต่อมา Slider เราจะมาเขียนโค้ดให้ Slider เรา นั่นก็คือเมื่อเรามีการเลื่อนขนาด เห็นไหม ขนาดของหัว… หัวแปรงหรือขนาดหัวเขียนก็จะเปลี่ยนไปตาม Size Slider ที่เราเลือกนะคะ กลับไปที่ Block ลูก แล้วเลือก Slider เลือกอันแรกเลยนะคะ When Slider On Value Change เมื่อมีค่า มีการเปลี่ยนค่าเห็นไหมคะ เลือกอันนี้มาเลย เมื่อ Slider มีการเปลี่ยนค่า Value ก็จะเปลี่ยนตาม Value ใน Component ที่เรากำหนด เมื่อ Slider มีการเปลี่ยนค่า สิ่งที่มันจะมาทำใน Block นี้ก็คือ Stage นี่นะคะ เลือก เลือกจาก Any Compnent นี่เด๊ Slider นี่ตรง Component นี่ ดูไอ้ Component นี่้ Slider ตัวเองน่ะ ก็ให้มันเลือกเอาอันใดอันหนึ่ง เลือกจากตรงนี้นะคะ เลือกจาก Component Slider ที่เราสร้างนะคะ มันถึงขึ้นนะคะ เพราะเราจะไปสั่ง Coding ให้ Slider ตัวนั้นทำงานนะคะ เพราะฉะนั้นเลือก Slider นั้น แล้วก็ไปที่ Stage เลือก Stage นี่นะคะ เลือก Set Stage Drawing Width แต่ที่ Drawing จริง ๆ มันต้อง Drawing ตาม Volume ที่เราเปลี่ยน เห็นไหมคะ ลาก Volume Block Volume มาใส่แทนค่าที่มันมีตัวแรก เห็นหรือเปล่า Test สิดอม เปลี่ยนได้ไหม เข้าใจหรือยัง เพราะเราจะสั่งให้ Slider ใช่ไหม มันทำงานตามการเปลี่ยนเห็นไหมคะ On Value Change เมื่อค่าของ Slider มีการเปลี่ยน สิ่งที่เราจะให้ทำก็คือ Stage นี้จะวาด Drawing Width วาดความกว้างตาม to Value เห็นไหมคะ แต่ถ้าเราไม่ใส่ to Value เอา to Value ออก ดูนะลูก Test ให้ดู ของแม่จะไม่เห็นอันนี้ เดี๋ยว Test ให้ดู ถ้าไม่เอา Value ใส่แล้วเดี๋ยว Test นะคะ ค่าไอ้ตัวนี้มันก็จะแค่ 20 เท่านั้น แต่ถ้าเดี๋ยวแม่ใส่ไอ้นี่เข้าไป เดี๋ยวใส่ Value เข้าไปนะคะ แล้ว Test ปึ๊บ เลื่อนขนาดแล้ววาด มันไปกลับ แต่เพื่อนบอกทำได้นะคะ เดี๋ยวไปแก้ Edit Block นี้ก่อน มันย้อนกลับ โอเคไหม เปลี่ยนได้ไหมคะ ให้นึกถึงวาดอะไรได้อีก วาดวงกลมได้อีกใช่ไหม ให้ดูที่… ที่ไหนหว่า Drawing Look เอ้ย Canvas แล้วก็ไปที่ Look เห็นไหม ใน Block น่ะ มี Downline เห็นไหมคะ วาดเส้นได้ วาด Circle ได้ วาด Polygon ได้เห็นไหม ถ้าสมมติเราสร้างปุ่มแล้วบอกว่าให้วาดเป็นรูปอย่างนี้ นึกออกนะ วาดวงกลม วาดเส้น นี่เห็นไหมคะ ลองดึง Block ไปใส่ แล้วก็กำหนดให้น้องวาด เพิ่มเข้าไปเช่น สมมติ ๆ ๆ ๆ นี่นะ มีปุ่มนี่ไม่พอ อยากให้สร้างวงกลม ทำรูปวงกลมลงไป ทำรูปสี่เหลี่ยม สามเหลี่ยม แล้วพอกดปุ่มวงกลมมันก็มาวาดรูปเป็นวงกลมให้ กดปุ่ม หลักการเดียวกันกับตัวนี้เลย ดูนะคะ เราต้องไปหารูป มาใส่แทน ดอมลองสิ Test วงกลมให้แม่สิ สร้างวงกลมปุ่มวงกลม 1 อันแล้ว… แล้วลองเขียน ว่าถ้ากดที่รูปวงกลมนี่ แล้วลองมาวาดนี่ มันก็จะวาดเป็นรูปวงกลมให้เรา โดยใช้ Block ที่ชื่อว่า Look นี่เห็นไหม Look Drawing Draw เห็นไหมคะ มันจะมี Draw Circle เห็นไหม ล่องสิ เห็นไหมมันจะมีสัดส่วนของ Block แบ่งไว้ให้เรียบร้อยนะครับ คนอื่นเป็นอย่างไรคะ บางคนไปดูแล้วS Slider แล้วทำไมมันใหญ่ ให้เด็ก ๆ เช็กตรงนี้ด้วยนะคะ ตรงหน้า Design นี่ เดี๋ยวนะ ประมวลผลอย่างช้า ในหน้า Design เราต้องคลิกที่ตัว Slider เรานะ บอกแล้วตอนตั้งค่าเห็นไหมคะ ค่า Maximum เมื่อกี้ของแฝดนี่ แฝดน่าจะพิมพ์ซ้ำ ให้ดูนะคะ ไอ้ค่าตรงนี้ก็มีส่วน ยิ่งใส่ค่าเยอะ ๆ น่ะ ไอ้เส้นมันก็จะใหญ่ตามนะ ใหญ่ตามค่า เพราะฉะนั้น กำหนดให้เมื่อกี้บอกเท่าไรนะ 250 อยู่ที่ประมาณ 250 นะ เพราะแม่ลอง Test แล้วบางคนใส่เกินนั้นน่ะ มันก็เลยเส้นมันออกมาก็เลยใหญ่นะคะ ตรง Max ค่าสูงสุดเขาน่ะค่ะ Maximum Volume ลักษณะเส้นที่วาดออกมามันก็จะแล้วตรง Volume เริ่มต้นเริ่มที่ 0 แต่ Stage เริ่มที่ 1 นะคะ Min ก็เริ่มที่ 0 นะคะ เท่านั้นนะคะ นี่คือจุดที่จะต้องสังเกตนะคะ หลักการเดียวกัน ถ้าทำวงกลมวงรีอะไรก็แล้วแต่ก็ต้องกำหนดค่าให้น้องเสียก่อน พวก Component พวก Volume เห็นไหมคะ มันจะขึ้นตามค่าที่เรากำหนดไว้นั่นเองนะคะ เพราะเหมือน Component น่ะ ในหน้า Design ของสีแต่ละสี เวลาเราเรียกใช้เห็นไหม ใช่ไหมดอม แม่ไม่ต้องไปเรียกสีนั้นสีนี้มา เพราะแม่เลือกว่าให้มันเช็กจาก Component เลย มันจะเช็กจากค่าสีที่เราเปลี่ยนใน Design ไว้แล้ว นึกออกนะ เหมือนปุ่มส้มนี่ ในค่าสีของมันก็เป็นสีส้ม ปุ่มนี้สีเหลืองค่าสีก็เป็นสีเหลืองเห็นไหมคะ นั่นคือ Component ที่เราสร้างขึ้นมา แล้วมันก็จะมีค่าสีตามนั้นนะคะ นี่ โอเค สัปดาห์นี้เราจะพอแค่นี้นะคะ สัปดาห์หน้าเจอกันใหม่ การบ้านใครยังทำไม่เสร็จ ทำให้มันเสร็จด้วย ทำให้สวยงามนะคะ เป็นคะแนน การบ้านมี 2 ชิ้นแล้วตอนนี้ ชิ้นสุดท้าย เดี๋ยวจะดูว่าจะให้ทำอะไร เด็ก ๆ ต้องลองผนวกจากที่สอน ๆ ไปทั้ง 3-4 งานนี่ แล้วเอามาสร้างเป็นชิ้นงาน 1 ชิ้นงานนี่ จะได้อะไรบ้างนะคะ จะให้ลองทำ เพราะฉะนั้นให้ดูย้อนกลับไปดูในงานเก่าแต่ละชิ้นของตัวเองด้วยนะคะ สัปดาห์นี้พอแค่นี้ค่ะ ขอบคุณพี่ล่ามค่ะ สวัสดีค่ะ [สิ้นสุดการถอดความ]