Workshop 1 :
การวาดภาพและการ Group
คำสั่ง ให้นักเรียนใช้เครื่องมือ Line tool วาดภาพและลงสีตามที่กำหนดให้ต่อไปนี้
ม.4/1 วาดกล่องใส่หนังสือและหนังสือ
ม.4/2 วาดกล่องใส่ของและร่ม
ม.4/3 วาดกล่องใส่ของและดินสอ
ม.4/4 วาดแจกันและดอกไม้
ม.4/5 วาดตะกร้าและผลไม้
หมายเหตุ : แต่ละห้องจะวาดรูปต่างกัน แต่วิธีการทำงานเดียวกันค่ะ
ขั้นตอนการทำงาน (ภาพประกอบ เป็นตัวอย่างงานของ ม.4/1 การวาดกล่องใส่หนังสือและหนังสือ)
- ให้นักเรียนกำหนดขนาด Stage = 750 x 550 px และกำหนดสีของ Bg ตามต้องการ
- ใช้ Line tool วาดเส้นและดัดให้เป็นภาพ ภาชนะ และ สิ่งของ โดยให้ใช้รูปแบบการวาดเส้นแบบ Shape
- ลงสีในภาพให้สวยงาม
![](images/workshop1.1.jpg)
- ให้ Group สิ่งของ ให้เป็นวัตถุเดียวกัน โดยการใช้ Selection เลือกภาพ สิ่งของ ทั้งหมด แล้วกดปุ่ม Ctrl+G
- ให้คัดลอก สิ่งของ เพิ่มเป็น 3 อัน โดยกดปุ่ม Ctrl ค้างไว้ เลือกเครื่องมือ Selection แล้ว Drag เมาส์เพื่อคัดลอกภาพ สิ่งของ ให้ได้ 3 อัน
![](images/workshop1.2.jpg)
- แก้ไขสีของ สิ่งของ ทั้ง 3 อันให้แตกต่างกัน โดยการ Double click ที่ภาพ สิ่งของ ทีละอันเพื่อเข้าไปใน Group แล้วเปลี่ยนสีตามต้องการ
- Double click ที่พื้นที่ว่าง ๆ เพื่อออกจากการแก้ไข Group สิ่งของ
![](images/workshop1.3.jpg)
- ใช้ Selection เลือกภาพ ภาชนะ ทั้งหมด แล้วกดปุ่ม Shift ค้างไว้ คลิ๊กเลือกพื้นที่ของ ภาชนะ ด้านหลังเพื่อยกเลิกการเลือก (ให้เหลือการเลือกเฉพาะส่วนของ ภาชนะ ด้านหน้าและด้านข้าง)
- กดปุ่ม Ctrl+G เพื่อ Group ภาชนะ ที่เลือกไว้ให้เป็นวัตถุเดียวกัน
![](images/workshop1.4.jpg)
- ใช้ Selection เลือกพื้นที่ ภาชนะ ที่เหลือด้านหลัง (ถ้ามีหลายส่วน ให้กดปุ่ม Shift ค้างไว้ขณะเลือก)
- กดปุ่ม Ctrl+G เพื่อ Group ภาชนะ ที่เลือกไว้
![](images/workshop1.5.jpg)
- ใช้ Selection ย้าย สิ่งของ ทั้ง 3 อันมาใส่ไว้ใน ภาชนะ ซึ่งต้องจัดวางลำดับของ ภาชนะ ส่วนหน้าและส่วนหลัง โดยการคลิ๊กขวาที่ ภาชนะ ส่วนหลัง เลือกคำสั่ง Arrange --> Send to back
- ก็จะสามารถใส่ สิ่งของ ลงไปใน ภาชนะ ได้อย่างสมจริง บันทึกไฟล์ชื่อ Workshop1.fla
ตัวอย่างงาน ม.4/1
ตัวอย่างงาน ม.4/2
ตัวอย่างงาน ม.4/3
ตัวอย่างงาน ม.4/4
ตัวอย่างงาน ม.4/5
Workshop 2 :
Animation แบบ Frame by frame
คำสั่ง ให้นักเรียนนำภาพจาก Workshop 1 มาสร้างเป็น Animation แบบ Frame by frame
หมายเหตุ : แต่ละห้องจะใช้รูปต่างกัน แต่วิธีการทำงานเดียวกันค่ะ
ขั้นตอนการทำงาน (ภาพประกอบ เป็นตัวอย่างงานของ ม.4/5 ภาพตะกร้าและผลไม้)
- เปิดไฟล์ workshop1.fla ขึ้นมา กำหนด Frame rate เป็น 20
- ทำงานบน Time line ให้เปลี่ยนชื่อ Layer 1 เป็น Fruit เพื่อให้ง่ายต่อการใช้งาน
- คลิ๊กที่เฟรม 60 ของเลเยอร์ Fruit แล้วกดปุ่ม F5 เพื่อ Insert frame
- สร้างเลเยอร์ ใหม่ โดยคลิ๊กที่ปุ่ม Insert Layer จะได้ Layer 2 ขึ้นมา ให้ตั้งชื่อเลเยอร์ เป็น Count
![](images/workshop2.1.jpg)
- ใช้เครื่องมือ Text tool คลิ๊กที่ว่างบน Stage แล้วพิมพ์เลข 3 Three ลงไป แล้วปรับขนาด สีสัน รูปแบบฟอนต์ ในพาเลท Properties และจัดวางตำแหน่งข้อความตามต้องการ
![](images/workshop2.2.jpg)
- บน Time line ให้คลิ๊กเฟรม 21 ของเลเยอร์ Count แล้วกดปุ่ม F6 เพื่อ Insert keyframe
- เลื่อกเครื่องมือ Text tool แล้ว Drag เมาส์ที่ตัวเลข 3 Three แล้วพิมพ์ข้อความทับเพื่อเปลี่ยนเ็ป็น 2 Two
![](images/workshop2.3.jpg)
- บน Time line ให้คลิ๊กเฟรม 41 ของเลเยอร์ Count แล้วกดปุ่ม F6 เพื่อ Insert keyframe
- เลื่อกเครื่องมือ Text tool แล้ว Drag เมาส์ที่ตัวเลข 2 Two แล้วพิมพ์ข้อความทับเพื่อเปลี่ยนเ็ป็น 1 One
![](images/workshop2.4.jpg)
- บน Time line ให้คลิ๊กเฟรม 60 ของเลเยอร์ Count แล้วกดปุ่ม F5 เพื่อ Insert frame
- คลิ๊กเลเยอร์ Fruit คลิ๊กเฟรมที่ 61 แล้วกดปุ่ม F6 เพื่อ Insert keyframe
- ใช้ Selection tool ย้ายตำแหน่งของผลไม้ทั้ง 3 ลูก ให้ขยับออกจากตะกร้าเล็กน้อย
![](images/workshop2.5.jpg)
- คลิ๊กเฟรมที่ 66 แล้วกดปุ่ม F6 เพื่อ Insert keyframe ใช้ Selection tool ย้ายตำแหน่งของผลไม้ทั้ง 3 ลูก ให้ขยับออกจากตะกร้าเล็กน้อย
- ทำซ้ำขั้นตอนที่ 13 ไปเรื่อย ๆ จนกว่าผลไม้จะหล่นลงถึงพื้น โดยให้ Insert keyframe ทุก ๆ 5 เฟรม
เฟรมที่ 66 ![](images/workshop2.6.jpg)
เฟรมที่ 71 ![](images/workshop2.7.jpg)
เฟรมที่ 76 ![](images/workshop2.8.jpg)
เฟรมที่ 81 ![](images/workshop2.9.jpg)
- ทดสอบการแสดงผลโดยกดปุ่ม Ctrl+Enter
- บันทึำกไฟล์ชื่อ workshop2.fla