เล่ม-2

46

เราสามารถแบง่ ภาพกราฟิกได้ 2 ประเภท คือ
 ภาพกราฟิกชนดิ บิตแมพ (Bitmap)
 ภาพกราฟิกชนดิ เวกเตอร์ (Vector)

ภาพกราฟกิ ชนดิ บติ แมพ (Bitmap) ข้ อ ดี ภ าพ ชนิ ดนี้ จะส าม าร ถแ สด ง
เป็นภาพท่ีเกิดจากเม็ดสีหรือจุดสีที่เราเรียกว่ากัน
“พิกเซล (pixel)” มาเรียงกันจนเป็นภาพ รายละเอียดได้ใกล้เคียงภาพจริง เช่น
เพราะฉะน้ันความสวยงามของภาพจึงขึ้นอยู่กับ ภาพถ่ายท่ีมีรายละเอียดสูง เพราะเป็นการใช้
ความละเอยี ดของเมด็ สี พิกเซลจานวนมากมาประกอบกัน

ข้อเ สีย ภาพชนิดนี้จะมีขนาดใหญ่

ตามความละเอียดของภาพ เพราะต้องใช้
จานวนพิกเซลเพิ่มข้ึนตาม นอกจากน้ัน
การนาภาพมาขยายให้ใหญ่กว่าขนาดปกติ
จะทาใหไ้ ดภ้ าพที่ไม่ชดั

ไฟล์แบบบิตแมพ เมื่อทาการขยายกจ็ ะเห็นเมด็ สที แี่ ตกออกมา

รูปท่ี 15 ภาพแสดงกราฟกิ ชนดิ บติ แมพ
ที่มา http://itcenter.cdd.go.th/wp-content/uploads/sites/105/2017/08/Present-Adobe-Flash-CS6.pdf

47

ภาพกราฟิกชนดิ เวกเตอร์ (Vector) ข้อดี ภาพชนิดน้ีปรับหรือย่อขนาด

ภาพชนิดเวกเตอร์ไม่ใช้พิกเซลเหมือนภาพชนิดบิตแมพ ได้ตามต้องการ โดยไม่มีผลต่อความละเอียด
แต่จะใช้การคานวณทางคณิตศาสตร์เข้ามาช่วยในการ ของภาพ เพราะไม่ว่าภาพจะเล็กหรือใหญ่
สรา้ งเสน้ และลวดลายตา่ ง ๆ ท่ีประกอบกนั เปน็ ภาพแทน ความคมชัดก็ไม่เปลี่ยนแปลง เพราะ
คอมพิวเตอร์จะสร้างภาพขึ้นมาโดย ใช้วิธี
ข้อเสีย เนื่องจากลักษณะของภาพที่สร้าง คานวณ ซึ่งไม่ได้ถูกจากัดด้วยจานวนพิกเซล
ในภาพว่ามมี ากนอ้ ยเพยี งใด
จากการคานวณ จึงมีข้อจากัดในการแสดง
ภาพถ่าย แต่จะเหมาะกับภาพกราฟิก นอกจากน้ันภาพชนิดเวกเตอร์
แนวเส้นลาย ท่มี ีสีคอ่ นข้างต่อเนอ่ื งเทา่ นัน้ มีขนาดไฟล์เล็กกว่าบิตแมพ เพราะไม่ได้ใช้
พิกเซลจานวนมากสร้างเป็นภาพ แต่มีเพียง
คาส่ังสร้างลวดลายเพ่ือประกอบเป็นภาพ
เท่าน้นั

ไฟล์แบบเวกเตอรเ์ มือ่ ถกู ขยายกย็ ังคมชัดอยู่

รูปท่ี 16 ภาพแสดงกราฟกิ ชนิดเวกเตอร์
ทม่ี า http://itcenter.cdd.go.th/wp-content/uploads/sites/105/2017/08/Present-Adobe-Flash-CS6.pdf

48

เราสามารถนาเขา้ ภาพบติ แมพมาใชใ้ นโปรแกรม Adobe Flash โดยเลอื กคาส่ัง File > Import
> Import to Stage หรอื Import to Library ไดด้ งั น้ี

1 เลือกคาส่งั File>Import to Stage

หรอื Import to Library

2 เลอื กไฟล์ภาพ และคลิกปมุ่ open

หากเลอื กคาสั่ง Import to Stage
ภาพจะถูกนามาใสใ่ นสเตจ และมาไว้
ในพาเนล Library ด้วย

รูปที่ 17 ภาพแสดงการนาเขา้ ภาพบิตแมพ

4 หากเลือกคาส่งั Import to Library ภาพจะถูกนามาไวใ้ น
พาเนล Library เท่านั้น แต่ยงั ไม่มกี ารใช้งานบนสเตจ

49

นอกจากโปรแกรม Adobe Flash นาเข้าภาพบิตแมพได้แล้ว เราสามารถนาเข้าภาพเวกเตอร์ได้
เช่นกันโดยเลือกคาสั่ง File > Import > Import to Stage เลือกชนิดไฟล์ AI และคลิกปุ่ม Open
แล้วคลิกปุม่ OK ได้ดังน้ี

1 เลือกคาส่งั File>Import to Stage

2 เลอื กไฟล์ภาพ และคลิกปมุ่ open

คลกิ OK

รปู ท่ี 18 ภาพแสดงการนาเข้าภาพเวกเตอร์

50

กิจกรรมท่ี 7
การนาเขา้ ภาพ

คาชแี้ จง ให้นกั เรยี นฝกึ ทกั ษะกระบวนการตอ่ ไปนี้ ( 10 คะแนน)

1. ให้นาเขา้ ภาพบติ แมพ 1 รูป ลงในสเตจ
2. เมอื่ ทาเสรจ็ แลว้ ใหบ้ นั ทกึ งาน ในไดรฟ์ D : โดยตงั้ ชอ่ื วา่
Import ชอ่ื ตนเอง ชน้ั หอ้ ง เลขที่ (ตัวอยา่ ง Import pairin M3-1-1)

51

การสร้างภาพเคล่ือนไหวในโปรแกรม Adobe Flash จะคล้ายกับหลักการสร้างภาพยนตร์
โดยจะมีการแบง่ เนือ้ หาท้ังหมดออกเป็นฉากย่อย ๆ ที่เรียกว่า ซีน (Scene) แต่ละซีนจะประกอบด้วย
ภาพน่ิงจานวนมากท่ีเราเรียกว่า เฟรม (Frame) และแต่ละเฟรมจะประกอบด้วยภาพเรียงซ้อนกัน
หลายชนั้ เรยี กว่า เลเยอร์ (Layer)

ไทมไ์ ลนเ์ ป็นส่วนที่ใช้ในการควบคุมการแสดงภาพเคลื่อนไหว ซ่ึงประกอบไปด้วย 2 ส่วน

สาคัญคอื เลเยอรแ์ ละเฟรม ดงั รูป หัวอา่ น

เลเยอร์ เฟรม

รปู ท่ี 19 ภาพแสดงไทมไ์ ลน์ ส่วนควบคมุ แอนิเมชนั

หวั อ่าน (Playhead) ในการแสดงภาพเคลอ่ื นไหว โปรแกรม Adobe Flash จะแสดงภาพ
ในแต่ละเฟรมอย่างรวดเร็ว โดยหัวอ่านจะชี้อยู่ท่ีเฟรมท่ีกาลังแสดงอยู่บนสเตจ ในขณะที่สร้างช้ินงาน
เราสามารถคลกิ เลือ่ นหวั อ่านไปมา เพ่ือดูเฟรมทต่ี อ้ งการแกไ้ ขได้

52

เลเยอร์ เป็นเหมือนการวางแผ่นใสซ้อนทับกันเป็นลาดับขั้นขึ้นมาเรื่อย ๆ โดยบริเวณ
ของเลเยอร์จะไม่มีรูปจะเห็นทะลุถึงเลเยอร์ที่อยู่ข้างล่าง การใช้เลเยอร์ทาให้เราสามารถวาดแก้ไข และ
ปรับแต่งวัตถุบนแต่ละเลเยอร์ได้อย่างเป็นอิสระต่อกัน และการแก้ไขแต่ละเลเยอร์น้ันจะไม่ส่งผล
ตอ่ เลเยอร์อื่น ๆ

สร้างเลเยอร์ใหม่ เมื่อเริ่มต้นทางาน โปรแกรมจะสร้างเลเยอร์แรกมาไว้แล้ว ช่ือว่า
Layer 1 เม่อื เราต้องการสร้างเลเยอร์เพ่ิม มวี ธิ สี ร้างเลเยอรใ์ หม่ได้ 3 วธิ ี ไดแ้ ก่

วธิ ีที่ 1 คลิกเลือกเมนู Insert > Timeline > Layer
วธิ ีที่ 2 คลิกขวาท่เี ลเยอร์ แลว้ เลือกคาส่งั Insert Layer
วธิ ีที่ 3 คลิกท่ี New Layer ดา้ นล่างของไทม์ไลน์

วิธีท่ี 1 เลือกคาสง่ั
Insert > Timeline >Layer

วิธีที่ 2 คลกิ ขวาท่ีเลเยอร์ เลือก Insert Layer

วธิ ีที่ 3 คลิก New Layer เพื่อเพ่ิมเลเยอร์  ผลลพั ธจ์ ะมี Layer 2 เพิ่มขน้ึ มา

รปู ท่ี 20 ภาพแสดงการสร้างเลเยอร์ใหม่

53

ตวั อยา่ ง รูปที่ 21 ภาพแสดงการนาเข้าภาพบนเลเยอร์

1. วาดภาพบน 2. นาเข้าภาพบน Layer 2
Layer 1

3. นาเข้าภาพบน Layer 3

เปล่ียนช่ือเลเยอร์ ควรตั้งช่ือให้กับแต่ละเลเยอร์ที่ส่ือความหมายให้ตรงกับเนื้อหาในเลเยอร์นั้น
เพื่อง่ายในการจดจาและการแก้ไขงาน โดยการเปลี่ยนช่ือเลเยอร์นั้น ให้ดับเบิลคลิกช่ือเลเยอร์
ที่ต้องการเปล่ียน พิมพ์ชื่อใหม่ที่ต้องการ และกดปุ่ม <Enter>

เลเยอรต์ ่าง ๆ เรียงกนั ตามลาดับ

ดบั เบิลคลกิ ที่เลเยอร์
แล้วพมิ พ์ช่ือใหม่ลงไป

รปู ท่ี 22 ภาพแสดงการเปลย่ี นช่ือเลเยอร์ ผลลพั ธห์ ลงั จากเปลยี่ นชื่อเลเยอรท์ งั้ หมด

54

จดั การเลเยอร์ กอ่ นทจ่ี ะทาสง่ิ ใด ๆ กบั เลเยอร์
เราจะตอ้ งเลือกเลเยอรน์ ้ันกอ่ น โดยคลกิ ชื่อเลเยอร์

หรือชอ่ งเฟรมใดก็ไดใ้ นเลเยอรน์ นั้ เลเยอร์ทเ่ี ลือก

จะมรี ูป ข้างชอื่ แสดงว่าเปน็ เลเยอร์ทเ่ี รา

ทาการแก้ไขอยู่ เราเรยี กเลเยอรน์ ้วี า่ Active

Layer เลเยอร์ท่ถี ูกเลอื ก

เปลี่ยนลาดับเลเยอร์ เม่ือเราเล่ือนรูปทรงที่วาดในแต่ละเลเยอร์มาเรียงซ้อนกัน จะเห็นว่า

รูปทรงในเลเยอร์ที่สูงกวา่ จะซ้อนทับเลเยอร์ล่าง หากต้องการเปล่ียนลาดับเลเยอร์ให้คลิกลากเลเยอร์ไปไว้

ในตาแหนง่ ที่ต้องการได้

เลเยอร์เชอรรี่อยบู่ นสดุ  ภาพบนสเตจ ก่อนทาการเปลยี่ นลาดบั ของเลเยอร์

คลกิ ลากเลเยอร์ เคก้ ข้นึ ไปไวด้ ้านบนสดุ

 ภาพบนสเตจ หลังทาการเปลีย่ นลาดบั ของเลเยอร์

รปู ท่ี 23 ภาพแสดงการเปลี่ยนลาดบั เลเยอร์

55

เฟรม (Frame) คือช่องที่แสดงภาพเคลื่อนไหวในแต่ละช่วงเวลา เม่ือนามาแสดงตามลาดับ
อยา่ งรวดเร็ว จะทาให้เกิดภาพเคลื่อนไหว ซึ่งเฟรมท่ถี กู แสดงบนสเตจ คอื เฟรมทห่ี วั อ่าน (Playhead) ชอ้ี ยู่

ช่องเฟรมบนไทม์ไลน์จะแสดงเฟรมแต่ละชนิดด้วยลักษณะที่แตกต่างกัน โดยคีย์เฟรมจะมี
ลกั ษณะเป็น ถา้ เป็นคีย์เฟรมวา่ งทีไ่ ม่มีวตั ถุอยู่ และ เปน็ คีย์เฟรมทม่ี ีวัตถุอยู่

คยี ์เฟรมว่าง
คยี เ์ ฟรมทม่ี วี ตั ถุอยู่

รูปที่ 24 ภาพแสดงร้จู ักกบั เฟรม

การเพม่ิ เฟรมแบบตา่ ง ๆ
คลกิ ขวาตาแหน่งทีต่ ้องการเพ่มิ เฟรม เลือกคาสงั่
 Insert Frame เพม่ิ เฟรม (คียล์ ดั <F5> หรอื เลอื กคาสั่ง Insert >
Timeline > Frame)
 Insert Keyframe เพมิ่ คยี เ์ ฟรม (คียล์ ัด <F6> หรือเลือกคาสงั่ Insert >
Timeline> Keyframe)
 Insert Blank Keyframe เพม่ิ คยี เ์ ฟรมว่าง (คยี ล์ ดั <F7> หรือเลือก
คาสั่ง Insert > Timeline > Blank Keyframe)

56

กิจกรรมท่ี 8
เลเยอร์

คำชี้แจง ใหน้ กั เรยี นฝกึ ทกั ษะกระบวนกำรตอ่ ไปนี้ ( 10 คะแนน)

1. ใหส้ รำ้ งเลเยอรแ์ ละวำดภำพตำมทกี่ ำหนดให้ ดังตวั อยำ่ งตอ่ ไปนี้
- Layer 1 ทอ้ งฟำ้
- Layer 2 สนำมหญำ้
- Layer 3 ตน้ ไม้

2. เมอ่ื ทำเสรจ็ แลว้ ใหบ้ นั ทกึ งำน ในไดรฟ์ D : โดยตง้ั ชอ่ื วำ่
Layer ชอื่ ตนเอง ชน้ั หอ้ ง เลขท่ี (ตัวอยำ่ ง Layer pairin M3-1-1)

57

คำชแ้ี จง ใหน้ กั เรยี นทำเคร่ืองหมำย X ทับข้อ ก. ข. ค. หรอื ง. ท่ถี ูกท่สี ดุ
เพียงข้อเดียว ลงในกระดำษคำตอบ

1. ซิมโบลมกี ่ีประเภท
ก. 1 ประเภท
ข. 2 ประเภท
ค. 3 ประเภท
ง. 4 ประเภท

2. ข้อใดคอื ซมิ โบลสำหรบั สรำ้ งปุ่ม
ก. Library
ข. Graphic
ค. Movie Clip
ง. Button

3. อินสแตนซ์เป็นกำรทำสิ่งใดกบั ซมิ โบล
ก. กำรคัดแยกสำเนำ
ข. กำรทำสำเนำ
ค. กำรลบสำเนำ
ง. กำรสร้ำงซิมโบล

58

4. ถำ้ ต้องกำรวำดเสน้ ตรงในลกั ษณะต่ำง ๆ ตอ้ งใช้เครอ่ื งมือใด
ก. Line tool
ข. Pencil tool
ค. Pen tool
ง. Ovel tool

5. พำเนลใดท่ใี ชเ้ กบ็ ซิมโบล
ก. Properties
ข. Library
ค. Tool bar
ง. Window

6. ข้อใดคอื ควำมหมำยของซมิ โบล
ก. กำรนำกรำฟกิ ปุ่ม หรือมฟู วส่ี ร้ำงข้นึ มำเป็นต้นแบบ
ข. สำเนำของซิมโบลท่ถี ูกดงึ มำใช้งำน
ค. ซมิ โบลสำหรับสร้ำงภำพเคลอ่ื นไหว
ง. ซมิ โบลสำหรับสรำ้ งวตั ถุหรือรูปภำพ

7. ขอ้ ใดคือควำมหมำยของอนิ สแตนซ์
ก. กำรนำกรำฟกิ ปมุ่ หรอื มฟู วีส่ ร้ำงขึ้นมำเป็นต้นแบบ
ข. สำเนำของซมิ โบลท่ีถูกดงึ มำใช้งำน
ค. ซิมโบลสำหรับสร้ำงภำพเคล่อื นไหว
ง. ซมิ โบลสำหรบั สร้ำงวัตถุหรอื รูปภำพ

8. คำสั่งใดเป็นกำรสร้ำงซมิ โบลจำกวตั ถุท่ีมอี ย่แู ล้ว
ก. Create New Symbol
ข. Create New Instance
ค. Convert to Symbol
ง. Convert to Instance

59

9. คำสงั่ ใดเป็นกำรสรำ้ งซมิ โบลใหม่
ก. Create New Symbol
ข. Create New Instance
ค. Convert to Symbol
ง. Convert to Instance

10. Break Apart เป็นคำส่ังสำหรับทำสิง่ ใด
ก. แปลงวัตถเุ ปน็ ตวั เลข
ข. แปลงวัตถุเปน็ ตวั อักษร
ค. แปลงวตั ถเุ ป็นรูปทรง
ง. แปลงวตั ถุเปน็ รปู ภำพ

11. ขอ้ ใดไมใ่ ช่ประเภทของขอ้ ควำม
ก. Static text
ข. Dynamic text
ค. Input text
ง. Style text

12. เครอ่ื งมือใดท่ีใชใ้ นกำรระบำยสีให้กบั ภำพคลำ้ ยพู่กัน
ก. Text tool
ข. Brush tool
ค. Eye Dropper tool
ง. Free Transfrom tool

13. ข้อควำมแบบ Static text เปน็ ข้อควำมแบบใด
ก. แบบธรรมดำท่วั ไป
ข. แบบเปลี่ยนแปลงเนอื้ หำได้ด้วยโค้ด
ค. แบบช่องรับค่ำ
ง. แบบสวยงำม

60

14. ขอ้ ควำมแบบ Input text เป็นข้อควำมแบบใด
ก. แบบธรรมดำท่ัวไป
ข. แบบเปลี่ยนแปลงเนอื้ หำไดด้ ว้ ยโค้ด
ค. แบบช่องรับคำ่
ง. แบบสวยงำม

15. นำมสกลุ .ai เปน็ ไฟล์ชนิดใด
ก. Adobe Photoshop
ข. Adobe Illustrator
ค. PNG
ง. Bitmap

16. ขอ้ ใดเปน็ นำมสกลุ ไฟลภ์ ำพบติ แมพ
ก. *.ai
ข. *.jpg
ค. *.psd
ง. ไมม่ ีข้อใดถูก

17. คำส่ัง File > Import > Import to Library ภำพจะเก็บไว้ทีพ่ ำเนลใด
ก. พำเนล Library
ข. พำเนล Properties
ค. พำเนล Scene
ง. พำเนล Color

18. เนื้อหำทีแ่ บ่งฉำกออกเปน็ ย่อย ๆ เรยี กว่ำ อะไร
ก. เฟรม
ข. เลเยอร์
ค. ซนี
ง. หัวอำ่ น

61

19. ขอ้ ควำมท่ีเปลี่ยนแปลงเน้อื หำไดจ้ ำกกำรเปล่ียนแปลงโค้ดโปรแกรม
ก. Static Text
ข. Dynamic Text
ค. Input Text
ง. Style Text

20. กำรสร้ำงรปู ภำพทีเ่ ปน็ ภำพน่งิ ควรใชซ้ มิ โบลชนดิ ใด
ก. Graphic Symbol
ข. Button Symbol
ค. Option Symbol
ง. Movie clip Symbol

62

กำพล ลลี ำภรณ.์ (2551). Flash Action Script. โปรวิชั่น.
จิรพงษ์ คำปวง. (2553). กำรสรำ้ งสอื่ โปรแกรมบทเรยี นคอมพวิ เตอรช์ ว่ ยสอน

CAI : Online ดว้ ย Adobe Flash CS3. สบื คน้ เมื่อวนั ที่ 10 ธันวำคม 2557,
จำกเวบ็ ไซต์ชือ่ : http://www.caistudio.info/computer/flash_cai_online/index.php.
ธเนศ หำญใจ. (2552). กำรต์ นู แอนเิ มชนั . สบื ค้นเมอ่ื วนั ที่ 6 มกรำคม, 2558,
จำกเวบ็ ไซตช์ อื่ : http://www.kanlayanee.ac.th/animation/web/animation.html .
ปณุ ยวีร์ รุจปิ ูรติ ำนันท.์ (2553). Flash Cartoon Animation. กรงุ เทพฯ : โปรวิชน่ั .
พนั จนั ทร์ ธนวัฒนเสถยี ร. (2558). สรำ้ งงำนมลั ตมิ เี ดยี แอนเิ มชนั ดว้ ย Flash CS6 สำหรบั
ผเู้ รมิ่ ตน้ . (พิมพค์ รั้งที่ 3). กรุงเทพฯ : รีไววำ่ .
ภทั ทริ ำ เหลอื งวลิ ำศ. (2551). มือใหม่ Flash CS3 ใชง้ ำนอยำ่ งมอื โปรฯ. กรงุ เทพฯ : ซเี อด็ ยูเคช่นั .
อศิ เรศ ภำชนะกำญจน์. (2557). Flash CS6 Essntial. นนทรี : ไอซีดีฯ.