หนังสือเรียนคอมพิวเตอร์มัลติมีเดียเบื้องต้น

45

16. จากนั้นใช้ layer style ตกแต่งรูปห่วง เพื่อเพิ่มความสวยงาม

17. ตวั อย่างการใช้ layer style แบบ Satin ใหก้ ับภาพ

46
18. ตัวอยา่ งการใช้ layer style แบบ Pattern Overlay ให้กับภาพ

19. ตัวอย่างการใช้ layer style แบบ Stroke ใหก้ ับภาพ

47

20. ให้ Copy layer หว่ งมาอีก 4 เลเยอร์

21. นาํ รูปทรงสาํ เร็จรปู หรือข้อความมาตกแตง่ สมดุ

48

3.8 การสรา้ งภาพเวกเตอร์ด้วยโปรแกรม Illustrator ตวั อย่างการวาดภาพการต์ ูน

มขี น้ั ตอนการวาดดังน้ี
 ขน้ั ตอนที่ 1 เมอื่ เปิดโปรแกรมขึ้นมาให้เลือก Basic RGB Document กาํ หนดขนาดของหนา้ กระดาษ
800 x 600 Pixels แล้วคลิกปมุ OK ดงั

ภาพ
 ขัน้ ตอนที่ 2 ใหเ้ ลือก เครอ่ื งมือ Ellipse Tool (L) เพอ่ื วาดสว่ นหวั ดังภาพ

49
 ขั้นตอนที่ 3 เลอื กเครือ่ งมอื Line Segment Tool วาดส่วนใบหน้าของโดเรมอน ดงั ภาพ
 ขัน้ ตอนที่ 4 เลือกเครอ่ื งมือ Rectangle Tool (M) วาดสว่ นลําตัวของโดเรมอน ดังภาพ

50

 ขั้นตอนท่ี 5 วาดสว่ นท้องของโดเรมอน ดังภาพ
 ขัน้ ตอนที่ 6 เลอื กเครอ่ื งมือ Rounded Rectangle Tool วาดสว่ นคอ และเลือกเครือ่ งมือ Ellipse

Tool (L) วาดส่วนขา ดังภาพ

51

 ขน้ั ตอนท่ี 7 วาดกระด่ิง โดยใชว้ งกลม และเสน้ ตรง ดงั ภาพ
 ขั้นตอนที่ 8 เมือ่ วาดครบทุกสว่ นแล้วให้เตมิ สใี หก้ ับโดเรมอน โดยคลกิ สว่ นท่ตี อ้ งการจะเตมิ สี แล้ว

เลือกสที ่แี ถบเมนูข้างบนดา้ นซา้ ย > เลอื กสที ต่ี ้องการ ดังภาพ

52

จะได้ผลลพั ธด์ งั ภาพ

 ข้ันตอนที่ 9 วาดสว่ นจมูกโดยเลือกเคร่ืองมือ Ellipse Tool (L) และเลือกสเี ปน็ สขี าว จะได้ผลลัพธด์ ัง
ภาพ

53

บทท่ี 4 ตัวอกั ษร

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

4.1 ทาความรู้จักกับตวั อักษร

ในปัจจุบันการส่ือสารโดยใช้ข้อความเป็นสื่อกลางเพื่อรับส่งข้อมูลข่าวสารได้รับการพัฒนาให้มี
รปู แบบทห่ี ลากหลาย เพ่อื นาํ ไปประยกุ ต์ใช้กับงานในรปู แบบตา่ งๆได้อย่างเหมาะสม โดยเฉพาะการนําไปใช้บน
คอมพิวเตอร์ จึงได้มีการพัฒนาซอฟแวร์ประมวลผลคํา(Word Processing) ที่ใช้งานง่าย (เช่น Microsoft
Word) และสามารถนําเสนอมัลติมีเดียด้วยการนําตัวอักษรมาผสมผสานรวมกับสื่อชนิดอื่นๆ เพื่อเพิ่ม
ประสทิ ธิภาพในการนําเสนอข้อมลู การนาํ ตวั อกั ษรมาประยุกต์ใช้ร่วมกับคอมพิวเตอร์ไม่ว่าจะเป็นการจัดทําสื่อ
สิ่งพิมพ์ และสื่อโฆษณา (เช่น รางงาน โบรชัวร์ แบบฟอร์ม หนังสือ และพจนานุกรม เป็นต้น) รวมทั้งการ
นํามาใช้งานร่วมกับเครือข่ายอินเทอร์เน็ต เพื่อเผยแพร่ข้อมูลท่ีอยู่ในรูปแบบภาษา HTML (Hypertext
Markup Language) ซึ่งไดร้ บั ความนยิ มอย่างสูงในปจั จบุ นั

4.2 ประเภทของตัวอกั ษร

โดยทั่วไปตัวอักษรจะถูกนํามาใช้สําหรับสร้างเอกสารเพื่อการส่ือสารข้อมูลหรือข่าวสารต่างๆ โดย
สามารถแบง่ ตัวอักษรออกเป็น Unformatted Text และ Formatted Text

4.2.1 Unformatted Text
Unformatted Text หรือเพลนเท็กซ์ (Plaintext) คือ อักษรทั่วไปท่ีถูกจัดเก็บอยู่ในรูปแบบต่างๆ

เช่น มาตรฐานรหัสแอสกี (ASCII Standard : American Standard Code for Information Interchange)
เป็นกลุ่มตวั อกั ษรมาตรฐานท่ถี กู นาํ มาใชก้ ําหนดเพลนเทก็ ซ์อย่างกว้างขวาง พ้ืนฐานของกลุ่มตัวอักษรเหล่านี้จะ
อยู่ในรูปแบบตารางตัวอักษร โดยแต่ละตัวจะแทนด้วยรหัสไบนาร่ีขนาด 7 บิต ซ่ึงแทนรหัสตัวอักษรได้ 128
ได้แก่ตัวอักษร a-z, A-Z, ตัวเลข 0-9 และเครื่องหมายวรรคตอนอ่ืนๆ รวมถึงตัวคอนโทรล (Control) ที่ทํา
หน้าท่ีควบคุมตัวอักษรตา่ งๆ

4.2.2 Formatted Text
Formatted Text คือตัวอักษรท่ีแยกออกจากตัวอักขระ และตัวคอนโทรลอ่ืนๆ ใช้สําหรับเปล่ียน

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

54

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

4.3 มาตรฐานของตวั อกั ษรแบ่งไดเ้ ป็น 2 ชนดิ คอื

4.3.1 มาตรฐานแอสกี (ASCII Standard)
แอสกี (ASCII = American Standard Code for Information Interchange) เป็นรหัสขนาด 7

บิต รองรับตัวอักษร (a-z ทั้งตัวพิมพ์เล็ก ตัวพิมพ์ใหญ่) ตัวเลข (0-9) และสัญลักษณ์พิเศษต่างๆ ได้ 128 รหัส
(Code Point) ประกอบขึ้นด้วยตัว 95 ตัวอักษร มีค่าแบ่งเป็น 0-31 และ 0-127 รหัสแอสกีพัฒนาขึ้นมาเพ่ือ
รองรับภาษาองั กฤษ

4.3.2 มาตรฐานยนู ิโค้ด (Unicode Standard)
มาตรฐานยูนิโค้ด (Unicode Standard) คือ มาตรฐานการเข้ารหัสตัวอักษรแบบสากล สามารถเข้า

รหัสตัวอักษรของภาษาต่างๆให้สอดคล้องกับมาตรฐานสากลได้มากกว่า 1 ล้านตัวอักษร ยูนิโค้ดเป็นรหัสท่ี
พัฒนาขน้ึ โดยองค์กรกําหนดมาตรฐานสากล (ISO: International Organization for Standardization) เพ่ือ
รองรับตัวอักษรและสัญลักษณ์แบบต่างๆ ของแต่ละภาษา ซึ่งเป็นรหัสขนาด 16 บิต ในปี ค.ศ. 1991 ยูนิโค้ด
คอนซอร์เทียม (Unicode Consortium) เป็นสมาคมที่พัฒนาและเผยแพร่มาตรฐานยูนิโค้ด โดยมี Unicode
Technical Committee (UTC) ซึ่งเป็นกลุ่มหุ้นส่วนของยูนิโค้ดซอร์เทียมทําหน้าท่ีสร้าง ปรับปรุง และรักษา
คุณภาพของมาตรฐานยูนิโค้ด โดยจะกาํ หนดความแตกต่างระหวา่ งตัวอักษรแต่ละตัวอย่างชัดเจน มาตรฐานยูนิ
โค้ดจะใช้รหัสไบนาร่ีแทนตัวอักษร ซ่ึงสามารถแปลงตัวอักษรด้วยกระบวนการแมพปิ้ง (Mapping) เพ่ือจับคู่
ระหว่างตัวอักษรและยูนิโค้ดให้ตรงกัน ประกอบด้วยข้อมูลจํานวน 2 ไบต์โดยไบต์แรกแทนด้วยรูปแบบของ
ภาษา และไบต์ถัดไปแทนด้วยตัวอักษรจริง ตัวอย่างของภาษาที่สามารถรองรับมาตรฐานยูนิโค้ด เช่น Latin,
Greek, Arabic, Thai, Lao, Georgian, Chiness, Japanese และ Korean เป็นตน้

4.4 รูปแบบฟอนต์ (Font Format)

การกําหนดรูปแบบตัวอักษรทําได้ด้วยการระบุช่ือฟอนต์ ซ่ึงจะอ้างไปยังไฟล์ฟอนต์ท่ีประกอบด้วย
การอธิบายรูปแบบตัวอักษรท่ีถูกเก็บไว้ในระบบปฏิบัติการต่างๆ เช่น ไฟล์ฟอนต์บนแพล็ตฟอร์มวินโดว์จะถูก
เก็บไว้ในโฟลเดอร์ “C:\WINDOWS\Fonts” ไฟล์ฟอนต์เหล่านี้จะอยู่ในรูปแบบเวกเตอร์ (Vector Format)
หรอื ตวั อกั ษรที่ถูกจัดเกบ็ ในลักษณะทางคณติ ศาสตร์โดยสามารถเปล่ียนแปลงขนาดของตัวอักษรได้โดยฟอนต์ที่
อยู่บนแพลต็ ฟอรม์ ของวนิ โดวแ์ ละแม็กอนิ ทอช เรียกว่า “True Type” เนื่องจากอุปกรณ์ที่แตกต่างกันสามารถ
เข้าใจฟอนต์ชนิดนี้ได้ เช่น จอภาพ หรือเคร่ืองพิมพ์ เป็นต้น ส่วนไฟล์ฟอนต์อีกชนิดหนึ่งเรียกว่า “บิตแม็พ
(Bitmap)” เป็นฟอนต์ท่ีเกิดจากการรวมตัวกันของกลุ่มพิกเซล สามารถแสดงผลได้เร็วกว่าไฟล์แบบเวกเตอร์
แต่ไม่ได้รับความนิยมในการใช้งานเนื่องจากเมื่อขยายขนาดตัวอักษรจะทําให้ความคมชัดลดลงและตัวอักษร
อาจมีรูปแบบเปลี่ยนแปลง

55

ในระบบปฏิบัติการวินโดว์ มาตรฐานของฟอนต์แต่ละประเภท จะประกอบด้วยตัวอักษรที่แตกต่าง

กันกว่า 1,000 ตัวอักษร ซึ่งสามารถดาวน์โหลดฟอนต์ต่างๆ ได้จากอินเทอร์เน็ต เพ่ือนํามาใช้บนแอปพลิเคชั่น

ต่างๆไดโ้ ดยผใู้ ชส้ ามารถระบุรปู แบบของฟอนต์ท่ีต่างการผ่านทางแอปพลเิ คชน่ั ที่ใช้

ขนาดและสไตลต์ ัวอกั ษร (Font Size and Style)

ฟอนตข์ องตัวอักษรสามารถปรับเปล่ียนได้ โดยปกติขนาดของตัวอักษรจะมีหน่วยเป็นพอยต์ (Point:

pt) โดย 1 พอยต์ จะเท่ากับ 1/72 นิ้ว หรืออาจกําหนดในหน่วยของพิกเซลก็ได้ โดยทั่วไปขนาดมาตรฐานของ

ตัวอักษรในเอกสารจะอยู่ในช่วง 10 ถึง 14 พอยต์ รูปแบบของฟอนต์มีหลายสไตล์ เช่น ตัวหนา (Bold) ตัว

เอียง (Italic) ขีดเส้นใต้ (Underline) ตัวยก ( ) และตัวห้อย ( ) เป็น เพื่อเพิ่ม

ความน่าสนใจและความสวยงามให้กับตัวอักษร รวมถึงการเปลี่ยนรูปแบบที่หลายหลาย เช่น โค้ง (Bending)

เอน (Slanting) บิต (Warping) หมุน (Rotating) เงา (Shadow) และเอฟเฟ็กต์สามมิติ (3D Effect) เป็นต้น

รวมท้ังใช้รูปแบบของแอนนิเมชั่น เช่น การม้วน (Scrolling) การเล่ือน (Fading) การเปลี่ยนสี (Changing)

และการเพม่ิ เสยี ง (Sound Effect) เปน็ ตน้

Arial Arial Arial Arial Arial

4.5 ลกั ษณะของตวั อักษร

1) การจดั วางตาํ แหน่ง (Alignment) เป็นการกาํ หนดวิธกี ารเรียงของตัวอกั ษรหรือข้อความในแต่ละย่อ
หน้า ว่าต้องการให้ชิดซ้าย ชิดขวา หรืออยู่ก่ึงกลางหรือจัดซ้าย – ขวาเสมอกันภายในท้ังด้านซ้าย ขวา บน ล่าง
ตําแหนง่ อื่นๆ

2) เส้นขอบ (Borders)เป็นการกําหนดค่าให้เส้นขอบว่าต้องการลักษณะของเส้นขอบ สีเส้นและความ
หนักเบาของเสน้ ของหรือความหนาของเส้นขอบอยา่ งไร

3) ขนาดของตัวอักษร (Font Size) จะเริ่มกําหนดต้ังแต่ส่วนบนสุดของตัวอักษรจนถึงส่วนล่างของ
ตัวอกั ษรพมิ พ์เลก็

4) สี (Colors) เปน็ ส่วนกาํ หนดรายละเอียดเก่ียวกับสีตัวอักษร, สีพื้นหลังของตัวอักษรและรวมถึงการ
เลอื กรูปภาพ, พืน้ หลังของตัวอักษร และการจดั เรียงตวั ของรปู ภาพพ้ืนหลัง

5) ตัวอักษรหรือข้อความ (Text) เป็นการกําหนดรูปแบบตัวอักษรหรือข้อความโดยตรง สามารถ
กําหนดความหนาและลักษณะของตัวอักษร
การจดั รปู แบบของเอกสารและข้อความ

การนําตวั อักษรมาใช้ในงานเอกสารต่างๆ ควรจัดว่างให้สวยงาม และอ่านได้ง่าย โดยในหัวข้อนี้จะ
กล่าวถงึ การจดั รูปแบบของเอกสารและข้อความ ดังน้ี

4.6 การจดั วางขอ้ ความ

การจัดวางข้อความที่จะแสดงบนจอภาพคอมพิวเตอร์ควรคํานึงถึงความเหมาะสม เพ่ือให้อ่านได้
ง่ายและสบายตาเหมือนกับอ่านข้อความจากในหนังสือ ดังนั้น การจัดวางข้อความบนจอคอมพิวเตอร์ควรมี
รูปแบบ ดงั น้ี

56

1) จดั วางข้อความสาํ คญั ๆ แตล่ ะหวั ขอ้ ให้อยบู่ นจอภาพเดยี วกนั
2) แบง่ เนือ้ ความอธบิ ายเป็นสว่ นๆ แยกยอ่ ยกันไปในแตล่ ะย่อหนา้
3) ใช้ตวั อักษรทอี่ ่านง่าย และมีขนาดของตัวอกั ษรที่ไม่ใหญห่ รอื เล็กจนเกนิ ไป
4) เชือ่ โยงความสัมพนั ธข์ องข้อความให้งา่ ยตอ่ การเขา้ ถงึ ข้อมูลท่ีต้องการได้อย่างรวดเร็ว
5) จัดช่องวา่ งของบรรทัดให้เหมาะสมและอ่านงา่ ย
6) หัวขอ้ ทใ่ี ชต้ วั อกั ษรขนาดใหญ่ควรมรี ะยะช่องไฟของตัวอักษรท่ีใหค้ วามรูส้ ึกดี ไมช่ ิด หรือหา่ งจนเกนิ ไป
7) จดั สีของข้อความให้อา่ นง่าย มคี วามแตกตา่ งจากสขี องพน้ื หลงั เชน่ ตัวอักษรสีดําบนพ้ืนสีขาว
8) ข้อความท่ีต้องการเน้นควรมีลักษณะที่แตกต่างจากข้อความธรรมดา เช่น มีการขีดเส้นใต้ ทําเป็น
ตวั อกั ษรตัวเอยี ง หรอื ตัวหนา เปน็ ตน้
9) หากตอ้ งการจัดข้อความใหอ้ ยูก่ งึ่ กลางบรรทัด ไมค่ วรทาํ ติดต่อกันหลายบรรทดั จะดูไมส่ วยงาม
10) ในภาษาองั กฤษควรใช้อกั ษรพิมพ์ใหญ่ และพิมพเ์ ล็กอยา่ งเหมาะสม
11) เน้นความสนใจของข้อความด้วยการใส่แสงเงาให้กับตัวอักษร หรือวางหัวข้อหลักๆ บนพื้นที่ว่าง ซึ่ง
เปน็ จดุ สนใจทม่ี องเหน็ ไดอ้ ยา่ งชดั เจน
12) สรรหาข้อคิด คําเสนอแนะ หรือคําติชมจากหลายๆความคิดมาสรุปเพ่ือเลือกใช้ตัวอักษรที่เหมาะสม
สุดกับข้อความทีต่ ้องการ
13) ใชค้ ําศพั ท์ทม่ี คี วามหมายนา่ สนใจและเข้าใจง่าย เพอื่ เช่ือมโยงหัวข้อกับข้อความเขา้ ดว้ ยกนั
14) ขอ้ ความสําหรับเช่ือมโยงบนหน้าเว็บเพจ (Text Link) ควรมีลักษณะตัวอักษรท่ีเน้นข้อความ เช่น ใส่
สสี ัน ขีดเส้นใตข้ อ้ ความ และควรหลีกเล่ียงการเน้นด้วนสีเขียวบนพ้ืนสีแดง เพราะจะทําให้ตัวอักษรมีสีสันท่ีไม่น่า
อา่ น
15) เน้นเน้นความที่เป็นจุดสําคัญด้วยการทําแถบสีที่ข้อความนั้นๆ แต่ไม่ควรให้เหมือน Text Linkหรือ
ขอ้ ความบนปุมกด (Button)

4.7 การจดั วางข้อความสาหรบั การอ่าน (Fields for Reading)

1) จัดวางข้อความสาํ คัญๆ แตล่ ะหัวข้อให้อยบู่ นจอภาพเดียวกัน
2) แบ่งเนื้อความอธิบายเปน็ ส่วนๆ แยกยอ่ ยกนั ไปในแตล่ ะยอ่ หน้า
3) ใช้ตวั อักษรท่อี ่านงา่ ย และมขี นาดของตวั อักษรไม่ใหญห่ รอื เลก็ จนเกินไป
4) เชือ่ มโยงความสมั พนั ธข์ องข้อความให้งา่ ยตอ่ การเข้าถึงข้อมลู ทีต่ ้องการได้อย่างรวดเร็ว
5) การกาํ หนดรูปแบบเอกสาร

การกําหนดรูปแบบเอกสารสามารถจัดทําได้ท้ังที่เป็นแนวต้ัง (Portrait) และแบบแนวนอน

(Landscape) เพ่ือประโยชน์สําหรับการพิมพ์ออกทางเครื่องพิมพ์ และการจัดทําเอกสารให้อยู่ในรูปไฟล์เอกสาร

อิเลก็ ทรอนิกส์ (Electronic Document) โดยมีรายละเอียดดงั นี้

1) เอกสารแนวตั้ง (Portrait Document) เปน็ การกําหนดเอกสารหรือกระดาษในแนวตั้งให้มีความสูง
มากกว่าความกว้างทําให้ไม่สามารถอ่านข้อความภายในเอกสารทั้งหน้ากระดาษบนจอคอมพิวเตอร์ท่ีมีความ

57

ละเอียด 640 x 480 พิกเซลได้ เอกสารที่จัดวางแบบ Portrait จะเป็นกระดาษขนาด 8.5 x 11 นิ้ว หรือ
กระดาษ A4 ซง่ึ มขี นาด 8.27 x 11.69 นว้ิ

2) เอกสารแนวนอน (Landscape Document) เป็นการกําหนดกระดาษในแนวนอนให้มีขนาดด้าน
กว้างมากกว่าด้านสูงเทียบกับจอภาพคอมพิวเตอร์ทั่วไปที่มีความสูง 480 พิกเซล กว้าง 640 พิกเซล แต่การประ
จอภาพไปท่ีความละเอียด 1024 x 768 พิกเซล หรือ 1280 x 1024 พิกเซล จะสามารถแสดงเอกสารแบบ
Portrait ไดภ้ ายในจอภาพเดียว

4.8 การใช้งานตวั อกั ษรและรูปแบบตวั อกั ษรในงานมัลติมีเดีย

1) ตัวอกั ษรท่มี ีขนาดเล็กตอ้ งชัดเจนและอา่ นง่าย
2) ข้อความท่ีควรเนน้ ควรมลี กั ษณะแตกต่างจากธรรมดา
3) จัดชอ่ งว่างให้เหมาะสมและอา่ นง่าย
4) จดั ขนาดตัวอักษรตามลาํ ดับความสาํ คญั ของข้อความ
5) หัวข้อทใ่ี ช้ตวั อักษรใหญ่ควรเวน้ ระยะช่องไฟ ทใ่ี ห้ความรูส้ กึ ท่ีไม่ตดิ กนั หรือห่างเกินไป
6) จดั สขี อ้ ความให้อ่านง่าย
4.8.1 เมนนู ําทาง (Menus for Navigation)

1) การสร้างปฏิสัมพันธ์ด้วยข้อความท่ีเข้าใจง่าย จะช่วยให้การติดต่อส่ือสารผ่านคอมพิวเตอร์สะดวก
และรวดเร็วยิ่งข้ึน เช่น การจัดให้มีข้อความภายในกรอบส่ีเหลี่ยมจํานวนสองกรอบ กรอบข้อความแรกเขียนว่า
“ไปหน้าถดั ไป” และอกี กรอบขอ้ ความทสี่ องเขียนว่า “ย้อนกลับไปหน้าท่ีผ่านมา” ทําให้ผู้ใช้เข้าใจถึงทิศทางท่ีจะ
ไปไดอ้ ยา่ งถกู วิธี

2) การสร้างรายการให้เลือกบนเมนูควรวางตําแหน่งบนจอภาพให้ง่ายต่อการมองเห็น และน่าสนใจท่ี
จะติดตามข้อมูลต่างๆ ได้อย่างทั่วถึง นอกจากน้ี ควรทําการเช่ือมโยงในแต่ละหน้าให้สัมพันธ์กันและสามารถ
กลับมาเร่ิมต้นท่จี อภาพหลกั ได้

4.8.2 ปุมกดโตต้ อบ (Button for Interaction)
1) ในงานด้านมัลติมีเดีย “ปุมกด (Button) เป็นกล่องของข้อความแบบ 3 มิติ สําหรับสร้างเหตุการณ์

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

2) โปรแกรมท่ีเป็นเครื่องมือในการสร้างปุมกดสําหรับงานมัลติมีเดีย และเอกสาร Html หลาย
โปรแกรมด้วยกัน สามารถเปลี่ยนสถานะของปุมกดตามการทํางานโดยอัตโนมัติ แต่ผู้สร้างงานจะต้องทําการ
ปรับแตง่ ข้อความบนปุมกดใหส้ ัมพันธก์ ับการทาํ งานของปมุ กดเอง

3) การวางข้อความบนปุมกดจะต้องมีขนาดตัวอักษรท่ีเหมาะสมกับขนาดของปุมกด เมื่อวางข้อความ
แล้ว ต้องมีระยะห่างระหว่างขอบของปุมกดกับข้อความที่ไม่กว้างหรือชิดขอบจนเกินไป และสีสันท่ีใช้จะต้อง
มองดแู ล้วสบายตา นา่ อา่ น และชดั เจน นอกจากนก้ี ารทําปุมกดเป็นรูปภาพพร้อมคําอธิบายจะช่วยทําให้ง่ายและ
มีความนา่ สนใจมากยงิ่ ข้ึน

58

4.9 การเพม่ิ ตวั อกั ษร

4.9.1 การเพิม่ ตวั อกั ษรด้วยคยี ์บอร์ด
การเพิ่มตัวอักษรในเอกสารดิจิตอลจะใช้อุปกรท่ีเช่ือมต่อกับเคร่ืองคอมพิวเตอร์ ได้แก่ คีย์บอร์ด ซ่ึง

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

4.9.2 การคัดลอก และวางตัวอักษร
การคัดลอกและวางตัวอักษร เป็นอีกวิธีหนึ่งสําหรับใส่ตัวอักษรลงในเอกสาร โดยจะเลือกตัวอักษร
หรือข้อความจากเอกสารดิจิตอลท่ีมีอยู่ด้วยคีย์บอร์ดหรือเมาส์ จากนั้นจึงใช้คําสั่ง “คัดลอก (Copy)” เพ่ือ
คัดลอกข้อความหรือตัวอักษรที่ต้องการนําไปเพิ่มลงในส่วนอื่นของเอกสาร หรือเพ่ิมลงในเอกสารใหม่ ด้วยการ
ใช้คําส่ัง “วาง (Paste)” หลังจากท่ีตัวอักษรถูกคัดลอกจากเอกสารหนึ่งไปยังเอกสารหน่ึงแล้ว สามารถแก้ไข
ตัวอักษรไดต้ ามความต้องการของผใู้ ช้

4.10 รูปแบบของไฟล์ (File Format) ที่ใช้เก็บตวั อกั ษร

1) TXT (Text) ตัวอักษรบนเอกสารถูกสร้างด้วย Text Editor ต่างๆ (เช่น Notepad ของ
ระบบปฏบิ ัตกิ ารวินโดวส์) โดยเอกสารในรูปแบบน้ีสามารถนาํ ไปเปดิ กบั ระบบปฏิบตั กิ ารทีต่ ่างกันได้ เช่น วินโดวส์
ดอส และยนู กิ ส์ เป็นตน้ โดยข้อมลู จะถกู เขา้ รหสั ไว้ในรูปแบบต่างๆ เชน่ แอสกี หรือยูนิโค้ด

2) Doc (Document) เป็นรูปแบบไฟล์จากเอกสารท่ีสร้างด้วยโปรแกรมไมโครซอฟต์ ซึ่งได้รับความนิยม
อย่างมากในปัจจบุ ัน ตัวอยา่ งโปรแกรมที่ใชส้ ร้างไฟล์ DOC คอื MS Word

3) PDF (Portable Document Format) PDF ได้รับการพัฒนาโดย Adobe System มีวัตถุประสงค์
เพ่ือการแลกเปล่ียนเอกสารข้ามแพล็ตฟอร์ม รวมท้ังสามารถเพ่ิมรูปภาพ และกราฟิกต่างๆลงในเอกสารได้ PDF
เปน็ ไฟล์ทเ่ี ปน็ มาตรฐานเปดิ สามารถเปิดอ่านและแกไ้ ขได้ด้วยโปรแกรมต่างๆท่ีมีอยู่เป็นจํานวนมาก โดยสามารถ
ดาวนโ์ หลดโปรแกรมสําหรับเปกิ ไฟล์ PDF ไดฟ้ รีจากเว็บไซต์ของ Adobe

4) PS (PostScript)PS (PostScript) ได้รับการพัฒนาข้ึนในปี ค.ศ. 1985 โดย Adobe เปน็ ภาษาระดับสูง
ใช้สําหรับจัดการกับองค์ประกอบของเอกสาร (Page Description Language) และภาพกราฟิกที่ต้องการพิมพ์
ผ่านเคร่ืองพิมพ์ องค์ประกอบเหล่าน้ีจะถูกประมวลผลด้วยระบบคอมพิวเตอร์และซอฟต์แวร์ของเคร่ืองพิมพ์ ซึ่ง
จะแทนภาพกราฟิกและตัวอักษรในรูปแบบเวกเตอร์ เช่น การผสมผสานระหว่างเส้นตรงและเส้นโค้งเข้าด้วยกัน
เพื่อสร้างเป็นภาพกราฟิก เป็นต้น โดยซอฟต์แวร์ของเครื่องพิมพ์จะแปลงเอกสารให้อยู่ในรูปแบบ PostScript
เพื่อส่งไปยังเครื่องพิมพ์ จากนั้นจะแปลงข้อมูลแบบเวกเตอร์ให้อยู่ในรูปแบบที่ เรียกว่า “เรสเทอร์ด็อท (Raster
Dot)”เพ่ือพิมพผ์ า่ นเครอ่ื งพมิ พ์

5) CSS (Cascading Style Sheet) เป็นไฟล์ท่ีเก็บข้อมูลการกําหนดรูปแบบและลักษณะของตัวอักษร
(Style Sheet) เพอื่ นํามาใชก้ ับเวบ็ เพจ ซ่ึงเป็นคุณสมบัติใหม่ท่ีกําหนดข้ึนโดย World Wide Web Consortium

59
ไม่เพียงแต่สามารถกําหนดรูปแบบตัวอักษรที่มีความซับซ้อนได้มากย่ิงข้ึน (เช่น ส่วนของหัวเร่ือง หัวข้อ และย่อ
หน้า) แต่ยังสามารถจัดวาตําแหน่งของตัวอักษรได้สะดวกและเป็นระเบียบด้วย โดยไฟล์ชนิดนี้จะมีนามสกุลเป็น
*.css

4.11 เครอ่ื งมือสาหรบั สร้างและแกไ้ ขรปู แบบตวั อกั ษร

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

โปรแกรมเก่ียวกบั งานกราฟิก เชน่ Photoshop ก็สามารถนํามาใช้ปรบั แตง่ ตวั อกั ษรได้เช่นกัน ไม่ว่าจะ
เปน็ แสงเงา รูปลกั ษณ์ หรอื แม้แตเ่ ฉดสีต่างๆ ของตัวอักษร นอกจากนี้ยังมีโปรแกรมสําหรับออกแบบตัวอักษรอีก
ประเภทท่ีสามารถทําให้ตัวอักษรมีความลึก และมุมมองกระทบของแสงได้หลายทิศทางของภาพ 3 มิติ เช่น
COOL 3D ซึ่งสามารถปรับแต่งพื้นผิว เฉดสี แสงเงา และหมุนตัวอักษรได้ เหมาะสําหรับการนําเสนองานที่
ต้องการความละเอียดสูง เช่น งานด้านการโฆษณาและบริการ หรือจัดทําเป็นสื่อการเรียนการสอนในลักษณะ
เสมอื นจรงิ (Virtual Reality)

4.12 การสร้างขอ้ ความดว้ ยโปรแกรม Photoshop

การสร้างข้อความ หรือ การพิมพ์ข้อความ จะเป็นการสร้างข้อความท้ังท่ีเป็นตัวอักษรตัวเดียวหรือ
เปน็ ประโยค โดยการสรา้ งข้อความในโปรแกรม Photoshop จะใช้เคร่ืองมือ Type Tool ในการสร้างข้อความ
รปู แบบตา่ งๆ เช่น การกาํ หนดรูปแบบตวั อักษร, ขนาดตวั อกั ษร รวมทง้ั การจัดรปู แบบของยอ่ หน้า

โดยท่ีเครื่องมือ Type Tool จะมีเคร่ืองมือย่อยอยู่อีก 4 เคร่ืองมือ และทุกครั้งที่มีการสร้างข้อความ
โปรแกรมจะสร้างเลเยอร์ข้นึ ใหมใ่ นทันที ซึ่งเลเยอรน์ จ้ี ะเปน็ เลเยอร์ที่ใช้สาํ หรบั การพิมพข์ ้อความโดยเฉพาะ

รปู ที่ 4.1 เคร่อื งมือ Type Tool

เครอื่ งมือ Type Tool มคี ําส่ังย่อยอยู่อกี 4 คาํ สัง่ ซงึ่ มีรายละเอยี ดดังน้ี
1) Horizontal Type Tool สรา้ งขอ้ ความแบบ Outline ในแนวนอน
2) Vertical Type Tool สรา้ งข้อความแบบ Outline ในแนวต้งั

60

3) Horizontal Type Mask Tool สร้างขอ้ ความแบบ Mask ในแนวนอน
4) Vertical Type Mask Tool สร้างข้อความแบบ Mask ในแนวต้งั
Character Palette คือตัวควบคุมการพิมพ์ข้อความซ่ึงประกอบด้วยการกําหนดรูปแบบตัวอักษร
สไตลต์ ัวอกั ษร, ขนาดตัวอักษร การเวน้ ระยะระหว่างบรรทัด หรือ สขี องตัวอกั ษร เป็นต้น

15

2 6
7

38

49

รูปท่ี 4.2 หน้าตา่ ง Character

1) รูปแบบตัวอักษร (Font) ประกอบด้วยตัวอักษรในลักษณะต่าง ๆ ท่ีโปรแกรมเตรียมไว้ให้ ซึ่ง
สามารถติดตง้ั เพ่ิมภายหลงั ได้

2) ขนาดตัวตัวอักษร (Size) สามารถคลิกเลือกจากรายการตัวอักษร ที่กําหนดไว้ให้ หรือ พิมพ์ค่า
ตวั เลขลงไป

3) กําหนดความสูงตัวอักษร (Vertically Scale) กําหนดความสูงของตัวอักษร โดยพิมพ์ค่าที่
ต้องการลงไปไดเ้ ลยทนั ที

4) เลือกภาษา (Language) กําหนดภาษาทจ่ี ะนาํ มาใช้พมิ พ์ขอ้ ความ
5) ลักษณะสไตลต์ วั อกั ษร(Type Style) คอื กาํ หนดใหต้ ัวอกั ษรมีความเอยี ง หนา หรือ ลักษณะอ่นื ๆ
6) ระยะห่างระหว่างบรรทัด (Leading) ใช้สําหรับกําหนดระยะห่างระหว่างบรรทัดไม่ให้ระหว่าง
บรรทดั อยู่ติดหรอื ห่างกันเกินไป
7) เว้นช่องไฟ (Tracking) เว้นช่องไฟเช่นเดียวกับ Kerning แต่เน้นในการเว้นช่องไฟเฉพาะตัวท่ี
เลือกดว้ ยวิธกี ารดรากสเ์ มาส์แลว้ จงึ กาํ หนดค่า
8) กําหนดสขี องตวั อักษร (Color) เลือกสีท่นี าํ มาใช้พมิ พ์ขอ้ ความ
9) ตกแตง่ ขอบตวั อกั ษร (Anti - Alias) ตกแตง่ ขอบของอกั ษรให้เรยี บเนียน ซ่งึ ประกอบด้วย

 None ไมท่ าํ การปรบั แต่งตัวอักษร
 Sharp แสดงตัวอกั ษรให้ดคู มชดั มากที่สุด
 Crisp แสดงตวั อกั ษรใหด้ คู มขึ้น

61

 Strong แสดงตวั อักษรโดยเน้นใหเ้ หน็ ถงึ นํา้ หนกั ของแต่ละตัวอกั ษร

รปู ท่ี 4.3 หนา้ จอการสรา้ งตวั อกั ษร

4.13 การสรา้ งขอ้ ความให้โคง้ อสิ ระตามแนวเส้น Path

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

1) สร้างเสน้ พาธโดยคลิกเลอื กเครือ่ งมือ Path Tool บน Toolbox

รูปที่ 4.4 เคร่ืองมอื สร้างเส้นพาธ
2) คลิกเคร่ืองมือ Type Tool บน Toolbox จากน้ันนําเมาส์ไปคลิกบนเส้นพาธ สังเกตว่าจะมี

เคอร์เซอรก์ ระพรบิ บนเสน้ พาธแล้วพมิ พข์ ้อความที่ต้องการ โดยข้อความจะถกู วางไว้บนเส้นพาธ

62

รูปที่ 4.5 การสรา้ งเสน้ พาธ

รปู ท่ี 4.6 การนําข้อความมาวางไว้บนเส้นพาธ
3) ถ้าต้องการ ให้นําเส้นพาธออกเพ่ือจะได้เฉพาะข้อความที่ไม่มีเส้นพาธติดมาด้วย โดยคลิกเลือก

เครอื่ งมือ Direct Selection Tool บน Toolbox แล้วนําไปคลิกท่ีเส้นพาธและกดปุม Enter เส้น
พาธจะถกู ลบออกไปเหลือแตข่ ้อความท่สี ร้างเปน็ ลักษณะโค้งตามต้องการ

รปู ท่ี 4.7 เครื่องมอื สําหรับการคลิกเลือกเส้นพาธ

63

รูปท่ี 4.8 ตวั อย่างการสรา้ งข้อความบนเสน้ พาธ

4.14 การตกแต่งข้อความดว้ ย Layer Style

Layer Style เป็นการใส่เอฟเฟกต์พิเศษ ได้แก่ การใส่เงา การทําให้ข้อความดูนูนข้ึนมา หรือทําให้ดู
ลึกลงไป เป็นต้น ซ่ึงการตกแต่งให้กับข้อความนี้จะเป็นการใส่เอฟเฟกต์ท่ีสําเร็จรูปท่ีโปรแกรม Photoshop มี
มาให้ วธิ ีการปรบั แต่งข้อความดว้ ย Layer Style มีดงั นี้

1) พิมพข์ ้อความทตี่ ้องการ
2) คลกิ เลอื กเมนู Layer -> Layer Style
3) คลิกเลือกรูปแบบที่ต้องการ จากน้ันจะปรากฏไดอะล็อกซ์บล็อกซ์ของ Layer Style ให้

ปรับแต่งรูปแบบชนิดตา่ งๆ

64
รูปท่ี 4.9 หน้าจอ Layer Style

รปู ที่ 4.10 หนา้ จอ การเลอื ก option Drop Shadow

65
รูปที่ 4.11 หน้าจอ การเลือก option Stroke
รูปที่ 4.12 ตัวอยา่ งการสรา้ งข้อความดว้ ย Layer style

66

4.15 การตกแตง่ ขอ้ ความด้วย Style Palette

Style Palette คือกลุ่มรูปแบบพิเศษที่ใช้ในการตกแต่งรูปภาพ วัตถุ หรือข้อความ ที่อยู่ในแต่ละเล
เยอร์ ซึ่งมีส่วนช่วยทําให้ข้อความท่ีพิมพ์ลงไปน้ันมีความสวยงามน่าสนใจมากย่ิงขึ้น โดย Style Palette
สามารถใชท้ ั้งเครื่องมอื Type Tool และ Type Mask Tool

1) สรา้ งขอ้ ความทต่ี อ้ งการ
2) ไปทเ่ี มนู Windows -> Styles โดยวิธีการปรับแตง่ ขอ้ ความดว้ ย Style Palette มีดังน้ี

รปู ท่ี 4.13 หน้าตา่ ง Style Palette
3) เลือกรูปแบบของ Style ท่ีต้องการในพาเล็ตซ่ึงมีรูปแบบสําเร็จรูปที่โปรแกรมสร้างมาให้ แต่ถ้า
ต้องการเลือกรูปแบบ Style ที่เพ่ิมมากขึ้นให้คลิกเมาส์ที่ปุม บนพาเล็ต จากน้ันเลือกรูปแบบท่ีแบ่งเป็นชุดๆ
ของ Style ซ่ึงเมื่อเลือกชุดไหนโปรแกรมจะขึ้นกรอบคําส่ังถามว่าต้องการให้ Style ใหม่แทนที่รูปแบบเดิม
หรือไม่ ถ้าไม่ตอ้ งการใหแ้ ทนทร่ี ูปแบบเดมิ ใหเ้ ลือกคาํ ส่ัง Append เพอื่ ใหร้ ปู แบบใหม่ตอ่ จากรูปแบบเดิม

รปู ที่ 4.14 หนา้ ตา่ งการยนื ยันการเลือกรูปแบบ Style
4) คลกิ เลอื กรูปแบบ Style บนพาเลต็

รูปท่ี 4.15 หน้าตา่ งเลอื กรูปแบบ Style

67
รูปที่ 4.16 ตัวอยา่ งการตกแต่งขอ้ ความดว้ ย Style Palette

68

บทท่ี 5 ภาพเคล่อื นไหว (Animation)

ภาพเคลื่อนไหวหรือ แอนิเมชัน (Animation) เป็นการทําให้วัตถุเกิดการเคล่ือนไหวในลักษณะต่างๆ
เช่น รถแล่นไปบนถนน การเคล่ือนที่ของแมลง การเคลื่อนไหวของมนุษย์ และลมพัดใบไม้ เป็นต้น
ภาพเคลื่อนไหวสร้างข้ึนจะถูกแสดงและควบคุมผ่านโปรแกรมต่างๆ เช่น โปรแกรม QuickTime เป็นต้น โดย
สามารถนําแอนิเมชันไปพัฒนางานในรูปแบบต่างๆ ได้มากมาย เช่น การ์ตูนแอนิเมชัน ภาพยนตร์แอนิเมชัน
วิดโี อแอนเิ มชัน และส่ือโฆษณาแอนเิ มชัน เปน็ ตน้

5.1 ความหมายแอนเิ มชัน

แอนิเมชัน (Animation) หมายถึง “การสร้างการเคล่ือนไหว” ด้วยการนําภาพนิ่งมาเรียงลําดับกัน
และการแสดงผลอยา่ งตอ่ เน่ือง ทาํ ให้ดวงตาเห็นเปน็ ภาพทีม่ ีการเคลอ่ื นไหวในลักษณะภาพติดตา (Persistence
of Vision) เม่ือตามนุษย์มองเห็นภาพท่ีฉายอย่างต่อเนื่อง เรตินาจะรักษาภาพนี้ไว้ในระยะเวลาสั้นๆ ประมาณ
1/3 วินาที หากมีภาพอื่นแทรกเข้ามาในระยะเวลาดังกล่าว สมองมนุษย์จะเช่ือมโยงภาพท้ังสองเข้าด้วยกันทํา
ใหเ้ หน็ เปน็ ภาพเคล่ือนไหวท่มี คี วามตอ่ เน่อื งกนั แม้ว่าแอนเิ มชันจะใชห้ ลักการเดยี วกบั วิดีโอ แต่แอนิเมชันจะเป็น
การนําภาพวาดหรือภาพกราฟกิ ต่างๆ มาใช้ในการสร้างภาพเคล่ือนไหว แอนิเมชันสามารถนําไปประยุกต์ใช้กับ
งานตา่ งๆ ๆดม้ ากมาย เช่น งานภาพยนตร์ งานโทรทัศน์ งานพัฒนาเกมส์ งานสถาปัตยกรรม งานก่อสร้าง งาน
ดา้ นวทิ ยาศาสตร์ หรืองานพัฒนาเว็บไซต์ เป็นต้น

5.1.1 ความเป็นมาของแอนเิ มชัน
 ในศตวรรษท่ี 19 John Marey และ Edward Muybridge ได้พัฒนาอุปกรณ์สําหรับบันทึกภาพ

การเคลื่อนไหวของวัตถุ และถูกนํามาใช้เพื่อบันทึกการเคลื่อนไหวของม้า ต่อมา Thomas Edison ได้ประดิษฐ์
กลอ้ งถ่ายภาพ ท่เี รยี กวา่ “Kinetograph” เป็นกล้องทส่ี ามารถถา่ ยภาพได้ถึง 10 ภาพต่อนาที

 ในตอนต้นศตวรรษท่ี 20 ได้มีการพัฒนาฟิล์มสําหรับบันทึกแอนิเมชันแบบส้ัน โดยจะจัดเก็บการ
เคลือ่ นไหวในลักษณะเฟรมทมี่ คี วามต่อเนอื่ งกัน

 ในปี ค.ศ. 1928 Disney ได้สร้างการ์ตูนเร่ือง Mickey Mouse ซ่ึงเป็นการ์ตูนเรื่องแรกที่เป็น
ภาพสี และมีเสยี งบรรยายประกอบท้ังเร่ือง

 ในปี ค.ศ. 1950 ได้เริ่มมีการนําคอมพิวเตอร์กราฟิก (Computer Graphic) และภาพยนตร์
(Film) มาผสมผสานเข้าด้วยกันเพอื่ สร้างเอฟเฟ็กต์พิเศษใหก้ ับภาพยนตร์

 ในปี ค.ศ. 1980 – 1990 บริษัท Industrial Light and Magic และ Pacific Data Image and
Pixar ได้นําคอมพิวเตอร์ท่ีมีประสิทธิภาพสูงมาใช้สําหรับสร้างวิดีโอและภาพยนตร์ ในปี ค.ศ. 1995 Pixar ได้
สรา้ งการต์ ูนแอนเิ มชนั เร่ือง Toy Story ซึ่งเป็นภาพยนตร์การ์ตูนแอนิเมชันท่ีประสบความสําเร็จเป็นอย่างมาก
ในปัจจุบันแอนิเมชันได้เข้ามีบทบาทในอุตสาหกรรมต่างๆมากมาย ท้ังด้านความบันเทิง เกมคอมพิวเตอร์
การศึกษา และ การโฆษณา

5.1.2 คีย์เฟรม (Key frame) และทวนี น่งิ (Tweening)

69

การสร้างแอนิเมชันในยุคเร่ิมต้น แอนิเมเตอร์ (ผู้สร้างแอนิเมชัน) จะวาดภาพสําคัญที่บอกเหตุการณ์
ต่างๆ ลงบนเฟรมที่เรียกว่าคีย์เฟรม (Key Frame) เช่น หากต้องการสร้างแอนิเมชันของคนลุกจากเก้าอี้ คีย์
เฟรมที่ต้องวาด คือ ภาพของคนนั่งบนเก้าอ้ีและภาพของคนที่ลุกจากเก้าอ้ีแล้ว โดยเฟรมท่ีอยู่ระหว่างคีย์เฟรม
ทงั้ สองจะถกู ส่งใหผ้ ูช้ ่วยของแอนเิ มเตอร์ (Assistant Animator) เป็นผู้วาดต่อไป เรียกกระบวนการวาดเฟรมที่
อยู่ระหว่างคียเ์ ฟรมนเ้ี รียกว่าทวนี นง่ิ (Tweening) ซ่ึงมาจากคําว่า In-Between
การนาํ คอมพวิ เตอรม์ าใช้กับงานแอนเิ มชัน

การนําคอมพิวเตอร์มาช่วยพัฒนาแอนิเมชันจะใช้แนวคิดของคีย์เฟรม เม่ือแอนิเมเตอร์กําหนดคีย์
เฟรมแล้ว เฟรมท่ีเป็น In-Between จะถูกสร้างด้วยซอฟต์แวร์โดยอัตโนมัติ โดยซอฟต์แวร์จะใช้หลักการเซล
แอนิเมชันด้วยการสร้างการเคล่ือนไหวของวัตถุบนไทม์ไลน์ (Timeline) ซึ่งใช้อธิบายการแสดงแอนิเมชันบน
เฟรมในแต่ละเวลา และใช้ Playback Head ซึ่งจะวิง่ ไปบนไทมไ์ ลน์เพ่อื แสดงภาพต่างๆในแต่ละเฟรม เมื่อแอนิ
เมเตอรเ์ ลือกคยี ์เฟรมบนไทม์ไลนแ์ ละกําหนดรายละเอยี ดต่างๆให้กับคีย์เฟรมแล้ว โปรแกรม จะสร้างเฟรมที่อยู่
ระหวา่ งคยี เ์ ฟรมทงั้ สอง (In-Between) ให้โดยอตั โนมตั ิ

สามารถแบง่ การเคล่อื นไหวแบบทวีนไดเ้ ปน็ 2 ประเภท ดงั นี้
1) Motion Tween หรือ Motion Path เป็นการสร้างการเคล่ือนไหวที่กําหนดการเคลื่อนท่ี หมุน
ย่อ หรือ ขยายวตั ถไุ ปตามเส้นท่วี าดไว้ โดยที่รูปทรงของวัตถุไม่มีการเปลี่ยนแปลง นอกจากน้ี Motion Tween
ยังเปน็ รูปแบบการสร้างภาพเคลอ่ื นไหวทนี่ ิยมใช้มากท่ีสดุ
2) Shape Tween เป็นการสร้างภาพเคลื่อนไหวท่ีมีการเปล่ียนแปลงรูปทรงของวัตถุ จากรูปทรง
หนึ่งไปเป็นอีกรูปทรงหน่ึงโดยสามารถกําหนดตําแหน่ง ขนาด ทิศทาง และสีของวัตถุในแต่ละช่วงเวลาได้ตาม
ตอ้ งการ

5.2 ชนิดของแอนิเมชนั

5.2.1 เซลแอนิเมชัน (Cel Animation) หรอื Traditional Animation
คําว่า “เซล (Cel)” มาจากคําว่า “เซลลูลอยด์ (Celluloid)” เป็นแผ่นใสสําหรับวาดภาพในแต่ละ

เฟรม ซง่ึ เป็นเทคนิคสําหรับสร้างแอนิเมชันท่ี Walt Disney ใช้ในการผลิตภาพยนตร์การ์ตูน มีความเร็วในการ
แสดงภาพ 24 เฟรมต่อวินาทีการสร้างภาพยนตร์ด้วยวิธีน้ีจะต้องใช้ความชํานาญและฝีมือของผู้วาดตัวการ์ตูน
เป็นอย่างมาก ตั้งแต่ข้ันตอนการออกแบบการสเกตซ์ตัวการ์ตูน และการสร้างภาพเคล่ือนไหว โดยจะแบ่งภาพ
แต่ละเซลออกเป็นชั้นหรือเลเยอร์ (Layer) การแบ่งเลเยอร์ทําให้สามารถแยกและนําแต่ละส่วนของภาพมา
แก้ไขได้อย่างอิสระโดยไม่ส่งผลกระทบต่อเลเยอร์อื่น เช่น การกําหนดภาพพื้นหลัง (Background) ไว้เลเยอร์
ลา่ งสดุ แล้วกําหนดใหเ้ ลเยอรบ์ น (Foreground) เป็นภาพการเคล่อื นไหวของตัวละครลักษณะดังกล่าวทําให้ไม่
ตอ้ งวาดภาพพ้ืนหลงั ใหม่ทุกครง้ั แตจ่ ะใช้วธิ ีแก้ไขภาพของตัวละครท่ีอยู่ในเลเยอร์บนแทน ดังน้ัน จึงใช้ภาพพ้ืน
หลังเพียงเฟรมเดยี ว

70

5.2.2 พาธแอนเิ มชัน (Path Animation)
เป็นการสร้างแอนิเมชันบนคอมพิวเตอร์ด้วยวิธีกําหนดเส้นทางเคล่ือนท่ี (Motion Path) ให้กับภาพ

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

5.2.3 แอนเิ มชัน 2 มติ ิ และ 3 มติ ิ (2D and 3D Animation)
แอนิเมชัน 2 มิติจะเป็นการแสดงวัตถุแบบแบนราบโดยไม่คํานึงถึงความลึก โดยมองวัตถุในระบบ

พิกดั แบบ 2 แกน คอื แกน x และ y เทา่ นนั้ ส่วนแอนเิ มชัน 3 มติ ิ จะพิจารณาถึงความลกึ ของ วัตถุด้วย ซ่ึง
จําเป็นต้องสร้างแบบจําลองของวัตถุ (Model) ข้ึนมา แล้วนําไป Render รวมท้ังสร้างคุณสมบัติต่างๆ ให้กับ
พื้นผิวของวัตถุนั้น เช่น มุมมองของกล้อง หรือการกําหนดแสงเงา เป็นต้น โดยจะใช้ระบบพิกัดแบบ 3 มิติ ซึ่ง
ประกอบด้วยแกน x, y และ z

5.3 วธิ ีการสรา้ งแอนิเมชัน

วิธีการสรา้ งแอนเิ มชันมี 3 วธิ ี ดังน้ี
5.3.1 การสร้างแอนิเมชันด้วยการวาด (Draw Animation)
เปน็ วธิ กี ารวาดภาพแตล่ ะภาพด้วยมือตอ่ เนอื่ งกันไปจนไดเ้ ป็นแอนิเมชนั การสร้างแอนิเมชันเพียงไม่ก่ี

นาทีด้วยวิธีน้ีอาจต้องใช้ภาพวาดหลายพันภาพ ทําให้ใช้เวลาในการผลิตนานต้องใช้นักวาดภาพแอนิเมชัน
จํานวนมากด้วย ส่งผลใหต้ ้นทนุ สงู

5.3.2 การสร้างแอนเิ มชันด้วยโมเดล (Model Animation)
การสร้างแอนิเมชันด้วยวิธีนี้เรียกว่า Stop Motion โดยจะใช้วิธีสร้างของหุ่นด้วยวัสดุด้วยดินน้ํามัน

แล้วค่อยๆ ถ่ายภาพของหุ่นทีละภาพ เพ่ือนํามาแสดงต่อเนื่องกัน วิธีการน้ีต้องใช้เวลาและความละเอียดเป็น
อย่างมาก ตวั อยา่ งของภาพยนตร์ทใี่ ช้วิธี Model Animation ไดแ้ ก่ Chicken Run

5.3.3 การสร้างด้วยแอนเิ มชนั ดว้ ยคอมพิวเตอร์ (Computer Animation)
เป็นการนาํ คอมพิวเตอร์มาช่วยในการสร้างแอนิเมชันโดยใช้โปรแกรมต่างๆ เช่น Adobe Flash, 3D

Studio MAX หรือ Maya เป็นต้น โดยจะใช้เคร่ืองมือท่ีโปรแกรมได้จัดเตรียมไว้ เช่น การปรับผิวของวัตถุและ
ปรับรอยหยักตามขอบภาพ (Anti-Aliasing) นอกจากนี้ยังสามารถกําหนดอัตราการแสดงผลภาพได้ว่าจะให้
แสดงผลด้วยความเรว็ ก่ีเฟรมต่อวินาที

5.4 กระบวนการพฒั นางานแอนิเมชนั

กระบวนการพัฒนางานแอนิเมชันประกอบด้วย 3 ขั้นตอนสําคัญ คือ ข้ันตอนเตรียมการพัฒนา
ข้นั ตอนการพฒั นางาน และช้ันตอนการเกบ็ งาน โดยแต่ละขัน้ ตอนมีรายละเอยี ด ดังรปู

71

ข้ันตอนเตรียมการพฒั นา

กาหนดเน้อื เรื่อง

สร้างบอร์ดเรียบเรียงเน้ือหา

ข้ันตอนการพฒั นางาน

ขั้นตอนการเกบ็ งาน

รปู ที่5.1 กระบวนการพัฒนางานแอนเิ มชนั

5.4.1 ขน้ั ตอนเตรียมการพัฒนา
เป็นข้ันตอนในการเตรียมงาน ซึ่งเป็นข้ันตอนท่ีมีความสําคัญมาก เน่ืองจากจะเป็นการกําหนด

แนวทางในการพฒั นางานทั้งหมด หากเตรยี มการพฒั นาไม่ดี จะทําให้การผลติ งานแอนิเมชนั ไม่ราบร่ืน และงาน
ท่ีได้อาจไม่สมบูรณ์ตามต้องการ ทําให้ต้องนํากลับมาแก้ไขใหม่ ในข้ันตอนน้ีควรเขียนเอกสารท่ีแสดง
รายละเอียดของโครงการไว้อย่างละเอียด (เช่น ระยะเวลา วิธีการผลิต งบประมาณ หรือผู้รับผิดชอบ) เพ่ือให้
ทีมงานพัฒนางานไปในแนวทางเดียวกัน โดยอ้างอิงจากเอกสารที่เขียนขึ้นเป็นหลักเม่ือเขียนเอกสารและ
กําหนดตางรางเวลาแลว้ จะตอ้ งเตรยี มองคป์ ระกอบต่างๆ ของงาน ดงั น้ี

5.4.2 กาํ หนดเนอื้ เร่อื ง (Story)
เน้อื เรือ่ งใช้บอกเรอื่ งราวและตัวละครของงานแอนเิ มชันทีต่ ้องการสรา้ งอย่างคร่าวๆ การเขียนเน้ือเร่ือง
จะใช้คําอธิบายสั้นๆเพอื่ บอกสาระสําคัญ และแสดงถึงความนา่ สนใจของงาน โดยเน้ือเร่ืองที่ ดีควรมีเนื้อหา
ทไ่ี มซ่ าํ้ ซาก ให้สาระ และความบันเทิงกับผู้ชม รวมท้ังเข้าใจได้ง่าย เม่ือกําหนดเนื้อเรื่องแล้วจะต้องนําตัวละคร
ทอ่ี ยูใ่ นเนอ้ื เร่อื งมาออกแบบตามลักษณะของตัวละครแตล่ ะตัว โดย ควรออกแบบตัวละครให้สอดคล้องกับ
ลักษณะเฉพาะ ความชอบ และอุปนิสัยของ ตัวละคร อาจใช้โปรแกรมสําหรับออกแบบโมเดลแบบ 3 มิติ เพ่ือ
ข้นึ รูปรา่ งของตัวละคร
5.4.3 สรา้ งบอร์ดเรียบเรยี งเนอ้ื หา (Storyboard) และ Story Reel
เมื่อกําหนดเนื้อเร่ืองและออกแบบตัวละครแล้ว ขั้นตอนต่อไปคือสร้างบอร์ดเรียบเรียงเนื้อหาหรือ
Storyboard โดยทั่วไปจะประกอบด้วยรูปภาพ และอาจมีข้อความอธิบายเพิ่มเติม เพื่อบอกวัตถุประสงค์ของ
แตล่ ะภาพได้ดียิง่ ขนึ้ Storyboard จะแสดงให้เหน็ ถึงเนอื้ เร่อื งวา่ เกดิ เหตกุ ารณอ์ ะไรข้ึน ท่ีไหน เม่ือไหร่ และเนื้อ
เรอ่ื งน้ันมใี ครเกย่ี วข้องบ้าง นอกจากนีย้ ังบอกถงึ มุมกล้องที่จะใช้ในการสร้างงานแอนิเมชันอย่างคร่าวๆ อีกด้วย

72

จากนั้น Storyboard จะถูกนําไปจัดเรียงฉากต่างๆตามลําดับเหตุการณ์ที่วาดไว้ด้วยซอฟต์แวร์ เช่น Adobe
Premier และจะต้องนําบทพูดของตัวละครมากําหนดระยะเวลาในการแสดงแต่ละฉากให้สอดคล้องกัน เรียก
ข้นั ตอนน้ีว่า “Story Reel” ซึ่งเปน็ Storyboard ท่อี ยู่ในรูปแบบดิจิตอลนั้นเอง

5.4.4 ข้ันตอนการพฒั นางาน
เมื่อเตรียมส่ิงต่างๆ เรียบร้อยแล้ว ข้ันตอนต่อไปจะเป็นขั้นตอนการพัฒนางาน ซ่ึงเป็นหน้าที่หลักของ
แอนิเมเตอร์ (หรือ ผู้สร้างภาพเคลื่อนไหว) โดยจะนําโมเดลของตัวละครมาสร้างการเคล่ือนไหวให้สัมพันธ์กับ
Story Reel จากนั้นจะเก็บรายละเอียดต่างๆ เช่น กําหนดการขยับปากให้สัมพันธ์กับเสียง หรือกําหนด
ระยะเวลาในการเคล่ือนที่ให้เหมาะสม เป็นต้น จากน้ันจะนํางานที่ได้มาปรับแต่งแสงเงา ซึ่งสามารถใช้สื่อถึง
อารมณ์ไปยังผู้ชมได้ดว้ ยการใช้โทนสีและระดบั ความสว่างของแสงนอกจากน้ีแสงเงายังช่วยให้งานแอนิเมชันดูมี
มิติมากขึ้น และสามารถใช้โทนสีของแสงเพื่อบอกเวลาได้ เช่น ใช้โทนสีดําเพ่ือบอกเวลากลางคืนหรือใช้โทนสี
แดงเพ่ือบอกเวลาท่ีพระอาทิตย์กําลังตกดิน เป็นต้น เม่ือตกแต่งฉากเสร็จแล้วขั้นตอนต่อไปของการพัฒนางาน
แอนิเมชัน คือ การ Rendering ซงึ่ จะใช้ซอฟต์แวรเ์ พื่อนําคา่ ต่างๆ ของงานแอนเิ มชันแต่ละส่วนท่ีปรับแต่งไว้มา
คํานวณเป็นจุดสีของแต่ละพิกเซล เพื่อแสดงผลลัพธ์ทางจอภาพ โดยอาจ Render ส่วนประกอบของงาน
แอนิเมชันแยกจากกัน เช่น ฉากกับตัวละครจะถูก Render แยกกัน แล้วนํามาประกอบกันในภายหลัง เพื่อ
ความสะดวกในการปรับปรุงและแก้ไขงานแต่ละส่วน การ Render จะต้องกําหนดค่าต่างๆ ท่ีส่งผลต่อคุณภาพ
ของงานแอนิเมชัน เช่น รูปแบบการบีบอัดไฟล์ ความละเอียด และคุณภาพของภาพ เป็นต้น ภาพแต่ละส่วนท่ี
Render แล้ว จะถูกนํามาตัดต่อโดยแยกเป็นเลเยอร์ (Layer) เพื่อความสะดวกในการรวมและปรับแต่งใน
ภายหลงั

5.4.5 ขน้ั ตอนการเก็บงาน
เมื่อปรับแต่ง Render และนําส่งวนประกอบต่างๆ มาตัดต่อรวมกันแล้ว ขั้นตอนต่อไปจะเป็นการ

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

73

5.5 รปู แบบไฟลภ์ าพเคลือ่ นไหว (Animation)

รปู แบบไฟล์ของงานภาพเคลื่อนไหว (Animation) มีหลายชนิด ดงั น้ี

ช่อื ไฟล์ นามสกลุ คุณลักษณะ
GIF .gif ไฟล์ GIF Animation เป็นไฟล์สําหรับแอนิเมชันที่ได้รับความนิยมมาก
Animation เนื่องจากเป็นไฟล์ที่มีขนาดเล็ก ประหยัดพ้ืนที่ในการจัดเก็บข้อมูล เหมาะ
MNG .mng สาํ หรับการใช้งานบนเว็บไซต์
ANI .ani เป็นไฟล์แอนิเมชันท่ีสามารถใช้งานกับบราวเซอร์ต่างๆ ได้หลากหลาย เช่น
SWF .swf Firefox , Internet Explorer , และบราวเซอร์ของ Sony Ericsson
เป็นไฟล์ภาพท่ีใช้งานกับ Animated Cursor บนแฟล็ตฟอร์มของ
FLC / FLI .flc/.fli Windows ซ่ึงจะจัดเก็บองค์ประกอบต่างๆ แบบแยกเปน็ เฟรมตามแอนิเมชัน
เป็นไฟล์ที่ถูกสร้างจากโปรแกรม Adobe Flash สามารถเล่นไฟล์ได้ด้วย
MAX .max Flash Player หรือ บราวเซอร์ท่ีมี Plug-in รองรับไฟล์ชนิดน้ี นิยมนําไปใช้
บนเวบ็ ไซต์ เน่อื งจากมขี นาดเลก็
เป็นไฟล์สําหรับแอนิเมชันท่ีถูกพัฒนาโดย Autodesk ซึ่งสร้างจากโปรแกรม
Autodesk Animator Studio และ Autodesk 3D Studio Program
สามารถ แสดงผลได้ 256 สี
เป็นไฟล์แอนิเมชันท่ีสร้างจาก 3D Studio MAX ได้รับการพัฒนาโดย
Autodesk
Media & Entertainment ได้รับความนิยมมากในปัจจุบัน เหมาะสําหรับ
การใช้งานบนแพล็ต Windows ซึ่งสามารถแก้ไขคุณสมบัติต่างๆ ของอ็อบ
เจ็กซ์ได้ เช่น พ้ืนผิว และแสง เป็นต้น ไฟล์ชนิดน้ีอาจแปลงให้เป็นไฟล์ AVI
ในลกั ษณะวิดโี อคลิปได้

ตารางท่ี 5.1 รปู แบบไฟล์ของงานภาพเคล่ือนไหว

74

5.6 ตวั อยา่ งซอฟต์แวรท์ ่ใี ช้กบั ภาพเคล่อื นไหว (Animation) มดี งั น้ี

ชอ่ื โปรแกรม คําอธบิ าย
Adobe Director เปน็ โปรแกรมทีส่ ามารถสร้างงานมลั ติมีเดยี คุณภาพสูง
Adobe Flash เป็นโปรแกรมทีช่ ว่ ยในการสร้างแอนเิ มชันและกราฟกิ สําหรบั มลั ติมเี ดียบนเว็บ
True Space โปรแกรมสรา้ งรปู ทรง 3 มิติ สามารถใชส้ ร้างรูปมนษุ ย์ ใบหน้า การแสดงอารมณ์
ตา่ งๆ และวาดรปู ทรงเลขาคณิตได้
Cad 4 โปรแกรมสําหรับงานออกแบบภายใน เช่น อาคาร บ้านเรือน และโรงงาน เป็น
ตน้
3D Browser Light โปรแกรมสาํ หรบั สรา้ งภาพ 2 มิติ และ 3 มิติ
2O-sim Pro Viewer โปรแกรมสําหรับสร้างภาพเสมือนแลพะจําลองระบบการทํางานต่างๆ ด้าน
วศิ วกรรม
Mosaic Magic โปรแกรมสาํ หรับสร้างภาพโมเสก
Ulead Cool 3D โปรแกรม Ulead Cool 3D เป็นโปรแกรมสําหรับสร้างแอนิเมชันทั้ง GIF
animation และไฟล์ AVI เพอื่ นําไปใชง้ านกับเว็บหรืองานนาํ เสนอต่างๆ
SWiSH โปรแกรมสําหรับสร้างเว็บเพจในรูปอินเตอร์แอ๊กทีฟ (Interactive) เช่นเดียวกับ
Adobe Flash
3D Canvas โปรแกรมสรา้ งภาพ 3 มติ ิ แบบเรยี ลไทม์
CADMAX Solid Master โปรแกรมสาํ หรบั สร้างแบบจาํ ลองทั้ง 2 มิติ และ 3 มติ ิ
SendPic เปน็ โปรแกรมสาํ หรับแกไ้ ขและดัดแปลงคุณลักษณะต่างๆ ของรปู ภาพ
Famous 3D producer โปรแกรมสาํ หรบั การสรา้ งภาพแอนิเมชันแบบเหมือนจรงิ
Xara X โปรแกรมสาํ หรับสร้างภาพแบบ Vector Graphic
3D Explortion โปรแกรมสาํ หรบั สรา้ งภาพ 3 มติ ิ
Adobe Atmosphere โปรแกรมสาํ หรบั ออกแบบกราฟกิ แบบ 3 มติ ิ
Design CAD โปรแกรมสาํ หรบั ออกแบบสิ่งพิมพแ์ ละงานมลั ติมเี ดียตา่ งๆ
Amorphium โปรแกรมสาํ หรบั สร้างและแกไ้ ขแบบจําลองของแบบ 3 มติ ิ
Bryce โปรแกรมสําหรับสร้างภาพภูมิทัศน์ (Landscape) เช่น การสร้างภาพภูเขา
ทะเล ท้องฟูา ก้อนเมฆ และต้นไม้ เป็นต้น รวมถึงสร้างภาพในจินตนาการต่างๆ
Maya เชน่ บรรยากาศบนดวงดาวต่างๆ เปน็ ต้น
เป็นโปรแกรมท่ีนิยมใช้กันมากท่ีสุดในธุรกิจภาพยนตร์ สามารถนํามาใช้สร้าง
3D Studio Max แอนิเมชนั งานออกแบบตกแตง่ ภายใน และการออกแบบผลิตภัณฑ์ได้
โปรแกรมสําหรับสร้างแอนิเมชันและกราฟิกแบบ 3 มิติ นิยมในการสร้างสื่อ
มลั ตมิ เี ดยี และงานภาพยนตร์
ตารางที่ 5.2 ซอฟต์แวร์ท่ีใชก้ ับภาพเคลอ่ื นไหว

75

5.7 การสรา้ งภาพเคล่ือนไหว/Animation ด้วยโปรแกรม Flash

5.7.1 ตัวอย่างการสรา้ ง Animation แบบ Frame by Frame ด้วยโปรแกรม Flash

1) New File หรอื กด Ctrl + N 1

2) คลิกเฟรมที่ 1 สรา้ งวงกลม 1 วง และพมิ พเ์ ลข 1 ลงไป ดงั รปู

2

รปู ท5ี่ .2 การสรา้ งวงกลมเฟรมท่ี 1
3) สร้างเฟรมที่ 2 โดยกดปุม F6 เพ่ือเพิ่มคียเฟรม จะไดภาพเหมือนเฟรมแรก จากนั้นคลิกที่เมนู
Edit > Select All แล้วคลิกท่ี Edit > Copy เพื่อคัดลอกวงกลมพรอมตัวเลข แล้วคลิก Edit > Paste in
Place เพ่ือวางรูปวงกลมซ้อนในตําแหน่งเดิม แล้วใช้ Arrow Tool เลือกท้ังรูปแล้วย้ายไปทางขวาของวงกลม
เดิม โดยในขณะที่ย้าย ให้กดปุม Shift บนคีย์บอร์ดค้างไว้ไวด้วย จากน้ันให้เปลี่ยนตัวเลขในวงกลมขวามือใน
เฟรมท่ี 2 จากเลข 1 เป็นเลข 2

3

รูปที่5.3 สรา้ งวงกลมเฟรมท่ี 2
4) สร้างเฟรมที่ 3 โดยกดปุม F6 เพ่ือเพ่ิมคีย์เฟรม จะไดภาพเหมือนเฟรมที่ 2 จากนั้นใช้ Arrow
Tool เลอื กวงกลมดา้ นขวามือ พรอมเลข 2 ในวงกลม แล้วคลิกที่ Edit > Copy เพ่ือคัดลอก แล้วคลิก Edit >
Paste in Place เพอื่ วางรูปวงกลมซ้อนใน ตําแหน่งเดิม แล้วใช้ Arrow Tool เลือกตําแหน่งวงกลมท่ี 2 ทั้งรูป

76

แล้วย้ายไปทางขวา โดยในขณะที่ย้ายให้กดปุม Shift บน คีย์บอร์ดค้างไว้ จะไดวงกลมช้ินที่ 3 จากน้ันให้
เปล่ียนตัวเลขในวงกลมจากเลข 2 เป็นเลข 3

4
2

รปู ท่ี5.4 สร้างวงกลมเฟรมท่ี 3

5) จากน้ันใช้เมาส์คลิกที่พ้ืนท่ีว่างบน Stage แล้วกําหนด Frame Rate ให้เท่ากับ 1 เฟรมต่อวินาที
แล้วทดลองกดปมุ Enter เพือ่ ดูตวั อยา่ ง หรอื กด Ctrl + Enter เพ่อื ดูผลงาน

5

รูปท่ี5.5 การกําหนด Frame Rate

5.6.2 การสรา้ ง Animation แบบ เชฟทวีน (Shape Tweening) 2

เป็นการสร้างภาพเคล่ือนไหวโดยแปลงจากรูปทรงหน่ึงไปเป็นอีกรูปทรงหนึ่ง โดยโปรแกรม

Flash จะคํานวณเฟรมแทรกระหว่างท้ังสองคีย์เฟรมให้ สังเกตจากรูปข้างล่าง รูปส่ีเหลี่ยมจะค่อยๆ เปล่ียน

เปน็ รูปวงกลม

แอนเิ มชนั แบบเชฟทวีนนี้จะทําได้กบั วัตถุท่ีเปน็ รปู ทรงพื้นฐาน (Shape หรือ Drawing object)

เทา่ นัน้ หากเปน็ อนิ สแตนซ์ บติ แมพ หรือข้อความ จะต้องใชค้ าํ สั่ง Break Apart เพอื่ แปลงใหเ้ ปน็ รูปทรง

พืน้ ฐานก่อน จงึ จะนํามาใชไ้ ด้ (ในกรณีทเี่ ปน็ ข้อความจะต้องใช้คาํ สงั่ Break Apart ถงึ สองครั้ง จึงจะได้

ตัวอักษรทีเ่ ปน็ รปู ทรงพนื้ ฐาน)

ตัวอย่างการสรา้ ง Animation แบบ เชฟทวีน

1) New File หรือ กด Ctrl + N

2) คลิกเฟรมที่ 1 สร้างรูปสเี่ หล่ยี ม 1 รปู

77

2
3
2

รูปท่ี5.6 สรา้ งรปู สี่เหล่ยี ม เฟรมท่ี1
3) คลิกทเ่ี ฟรมท่ี 30 เลอื กคําสัง่ Insert > Key frame หรอื กดปุม F6 เพอื่ เพ่มิ คีย์เฟรม
4) กดปุม Delete ท่ีคีย์บอร์ด1 คร้ัง เพ่ือลบรูปส่ีเหล่ียมออก แล้วสร้างรูปวงกลมข้ึนมาแทนท่ี
สเ่ี หล่ียม จะได้ภาพเฟรมที่ 1 เปน็ ส่ีเหล่ยี มและภาพเฟรมท่ี 30 เป็นรปู วงกลม

3
4
3
2

4
2
4 รปู ที่5.7 สร้างรูปวงกลมเฟรมท่ี 30
5) คลิกที่เฟรมท3ี่ 1 กําหนด Properties ในช่อง Tween เป็น Shape จะพบว่ามีเสน เชื่อมระหว่าง
เฟรมที่ 1 กบั เฟรมท่ี 30 2

78

5
รปู 4ท่ี5.8 กาํ หนด Properties ในช่อง Tween เป็น Shape
6) ทดสอบการทํา3งานโดยกด Ctrl+Enter หรือคลิก Play ที่ Windows Controller จะพบว่า รูป
สเ่ี หล่ียมจะเปลย่ี นแปลงรูปร2า่ งกลายเปน็ รปู วงกลม
4
3
2

รปู ท่ี5.9 ทดสอบการทาํ งานการเปลย่ี นรปู รา่ ง
ตัวอย่างการสร้าง Animation แบบ เชฟทวีน ต้องแปลงรูปช้างกับรูปม้าที่เป็นซิมบอล ให้เป็นรูปทรง
ธรรมดากอ่ น

79

รูปท่ี5.10 ตวั อยา่ งช้างกลายเป็นรปู ม้า

รปู ที่5.11 ซมิ บอลช้างและม้า
มขี ัน้ ตอนดังต่อไปน้ี
1) คลิกเลือกเลเยอร์ท่ีจะสร้างเซฟทวีน กําหนดเฟรมเริ่มต้น (เฟรมท่ี 1) ให้เป็นคีย์เฟรม วางซิม
บอลชา้ งลงไป และใช้คาํ ส่ัง Break Apart เพอ่ื แปลงซมิ บอลเป็นรปู ทรง
2) กําหนดเฟรมสุดท้าย (เฟรมท่ี 20) ให้เป็นคีย์เฟรม จะเห็นว่าโปรแกรม Flash จะคัดลอกรูปทรง
ม้าในคีย์เฟรมก่อนมาไว้ในคีย์เฟรมน้ีให้อัตโนมัติ ให้ลบรูปทรงดังกล่าว แล้ววางซิมบอลช้างลงไป และใช้คําส่ัง
Break Apart เพื่อแปลงซิมบอลเปน็ รปู ทรง
3) ตอ่ ไปคลิกขวาในเฟรมระหว่างกลาง เลือกคําส่ัง Create Shape Tween แล้วทดสอบเม่ือกดคีย์
<Enter> จะเหน็ การเปล่ยี นรปู ทรงจากช้างเป็นม้า
4) แลว้ กดคยี ์ Enter แสดงภาพเคล่ือนไหว

12

80
รูปท่ี5.12 วางซิมบอลชา้ งเฟรมที่1และม้าเฟรมท่ี20

3

รูปท่ี5.13 เลือกคาํ สั่ง Create Shape Tween

รูปที่5.14 การเปลีย่ นรูปช้างเป็นรปู ม้า
5.7.3 ตวั อยา่ งการสรา้ ง Animation แบบ Classic Tween

การสรา้ งแอนิเมชันแบบทวีนเป็นวิธีสร้างภาพเคล่ือนไหววิธีหลักใน Flash ซ่ึงต่างจากการสร้าง
แอนิเมชันแบบเฟรมต่อเฟรมท่ีผ่านมา ตรงท่ีไม่ต้องกําหนดการเคลื่อนไหวทุกคีย์เฟรม แต่จะต้องระบุอย่าง
น้อยสองคีย์เฟรม (เฟรมเร่ิมต้นและเฟรมสิ้นสุดการเคล่ือนไหว) เพื่อให้โปรแกรม Flash คํานวณและสร้าง
เฟรมแทรกระหว่างคียเ์ ฟรมเหลา่ นัน้ ให้เองโดยอัตโนมัติ
การเคลือ่ นไหวแบบทวีนแบง่ เปน็ 3 ลักษณะดว้ ยกัน

1) การเคลือ่ นไหวแบบดงั้ เดิม หรือคลาสสิกทวนี (Classic Tween)
2) .การเคลอ่ื นไหวตามเส้น (Path) ทกี่ ําหนด หรือโมชันทวีน (Motion Tween)
3) การเคลือ่ นไหวแบบเปล่ยี นรูปทรงวัตถุ หรือเซฟทวีน (Shape Tween)
เพ่ือให้เห็นความแตกต่างระหว่างการสร้างแอนิเมชันแบบทวีนและแบบเฟรมต่อเฟรม จะนํา
ตัวอย่างลูกบอลเคลื่อนที่มาทําใหม่ โดยใช้คลาสสิกทวีน โดยจะสร้างเพียง 3 คีย์เฟรม (เฟรมท่ี 1 แสดงลูก

81
บอลเริ่มเคล่ือนท่ี เฟรมที่ 2 แสดงลูกบอลตอนปะทะกับพ้ืน เฟรมท่ี 3 แสดงลูกบอลเมื่อส้ินสุดการเคล่ือนท่ี)
และให้โปรแกรม Flash คํานวณตามการเคลื่อนท่ขี องคีย์เฟรมแล้วสร้างเฟรมแทรกใหโ้ ดยอตั โนมตั ิ

รูปที่5.15 ตวั อยา่ งการสร้าง Animation แบบ Classic Tween
มขี ัน้ ตอนการทาํ งานทงั้ หมด 5 ขน้ั ตอน ดังนี้
ขัน้ ตอนที่ 1 กาํ หนดเลเยอรพ์ ้นื และสร้างพ้นื เปน็ เฟรมภาพนิง่

กาํ หนดขนาดของสเตจให้มีขนาดเท่ากับ 340x180 พิกเซล แล้วให้วาดรูปสี่เหล่ียม ใส่สีเกรเดียนต์
โดยใช้ Rectangle Tool และบดิ ให้ได้สัดส่วนโดยใช้ Free Transform Tool และตัง้ ชอื่ เลเยอรน์ ว้ี า่ Floor

สรา้ งเลเยอร์ Floor โดยใหม้ พี ื้นสเี่ หลยี่ มใส่สีแบบ
เกรเดยี นต์ คือการไลร่ ะดบั สี พรอ้ มทง้ั ปรบั ใหเ้ อียง

รูปที่5.16 สรา้ งเลเยอร์ Floorและรูปสี่เหล่ยี ม

82
จากนนั้ ขยายคียเ์ ฟรมน้ีให้เป็นเฟรมภาพนิ่งท่ีครอบคลมุ เฟรมท่ี 1 ถึง 30 โดยคลิกขวาท่ีตําแหนง่ ช่อง

เฟรมท่ี 30 แลว้ เลือก Insert Frame (หรือกดคียล์ ดั <F5>) จะปรากฏเฟรมภาพนิง่ ครอบคลุมเฟรมที่ 1 ถึง
30 โดยอตั โนมัติ (จะทําการลอ็ กเลเยอร์นี้ไวเ้ พราะจะไมแ่ ก้ไขเพมิ่ เติมอีก) ภาพพ้นื หลังจะปรากฏตั้งแต่เฟรม 1-
30

คลกิ ท่ีเฟรม 30 แลว้ กดคีย์ <F5> เพิม่ เฟรมเป็น 30 เฟรม

คลกิ เมาส์ทาํ การล็อกเลเยอร์เพอ่ื จะไมแ่ ก้ไขเพ่ิมเตมิ

รปู ท่ี5.17 ขยายคยี เ์ ฟรมจากเฟรมท่ี 1 ถงึ 30 เพ่ิมเลเยอร์ใหม่ และต้ังชื่อ
ข้นั ตอนที่ 2 กาํ หนดเลเยอรล์ ูกบอล

สรา้ งเลเยอรใ์ หมใ่ หเ้ ป็นลกู บอลและทาํ ให้มันเคล่ือนไหวได้ โดยคลิก
วา่ ball สังเกตวา่ เลเยอร์น้จี ะมีความยาว 30 เฟรมเหมือนกับเลเยอร์ Floor

รปู ท่ี5.18 สรา้ งเลเยอรข์ องลูกบอลใหม่
จากน้ันจะสรา้ งซิมบอลไวใ้ นพาเนล Library โดยซิมบอลจะเป็นรูปทรงกลมทสี่ รา้ งด้วย Oval Tool
จากน้นั กาํ หนดลักษณะและช่อื ของซิมบอล (ในตัวอย่างสรา้ งเป็นซมิ บอลแบบ Graphic ชอื่ ball เสร็จแลว้ ให้
คลกิ ลากซิมบอลน้ีมาเปน็ อนิ สแตนซ์บนสเตจแรกของเลเยอร์ Ball ใหส้ ังเกตวา่ โปรแกรม Flash จะแสดงรูปลกู
บอลนไ้ี ว้ในทุกเฟรมในเลเยอร์ ball โดยอตั โนมตั ิ

83
1
คลิกสรา้ งซิมบอลใหม่ขน้ึ มา

2

รูปที่5.18 สรา้ งซิมบอลไว้ในพาเนล Library 3
5 คลิกกลบั ไปทส่ี เตจ

4

รปู ท่ี5.19 สร้างซมิ บอลเป็นลูกบอล

84

6

รูปที่5.19 การลากซิมบอลลูกบอลมมาไวท้ ส่ี เตจ
ข้นั ตอนที่ 3 กาหนดคยี เ์ ฟรมหลักท่ใี ช้ในการเคล่อื นท่ีของลูกบอล

ในการสรา้ งแอนเิ มชันแบบทวนี ตอ้ งระบุคีย์เฟรมหลักสําหรับโปรแกรม Flash ใช้เป็นแนวในการสร้าง
เฟรมอ่ืนๆ เอง ซ่ึงในตัวอย่างน้ีมี 3 คีย์เฟรมหลักท่ีต้องกําหนดในการเคลื่อนท่ีของลูกบอล ได้แก่ จุดเร่ิมต้น
(เฟรมท่ี 1) จุดที่ลูกบอลปะทะกับพ้ืน (เฟรมท่ี14) และจุดสุดท้าย(เฟรมท่ี30) โดยคลิกขวาเลือกช่องเฟรมท่ี
ตอ้ งการบนเลเยอร์ Ball เลอื กคาํ สงั่ Insert Key frame (หรือกดคยี ล์ ัด <F6>)

รูปท่ี5.20 สร้างคียเ์ ฟรมเพม่ิ ในเฟรมท่ี 14 และ 30
สังเกตว่าเม่ือคลิกดูแต่ละคีย์เฟรม (เฟรม 1,14 และ 30) จะแสดงลูกบอลในตําแหน่งเดียวกันให้ย้าย
ตําแหน่งลูกบอลในเฟรม 14 ให้อยู่ท่ีจุดสัมผัสกับพื้น และในเฟรม 30 ให้อยู่ที่จุดสุดท้าย โดยใช้ Selection
Tool

85

ภาพในเฟรมที่ 1 ภาพในเฟรมที่ 30

ภาพในเฟรมท่ี 14
รูปท่ี5.21 การเคลื่อนย้ายตําแหนง่ ของลูกบอล

ขั้นตอนท่ี 4 ให้โปรแกรม Flash คานวณการเคลื่อนทแ่ี ละแทรกเฟรมทเ่ี หลอื เอง
ตอ่ ไปจะกําหนดการเคลอื่ นไหวแบบทวนี โดยโปรแกรม Flash จะสรา้ งเฟรมแทรกระหว่างคีย์เฟรม

ทั้งสามท่ีกําหนดไป เพื่อแสดงการเคล่ือนท่ีของลูกบอล ให้กําหนดทวีนระหว่างคีย์เฟรมที่ 1 ถึง 14 โดยคลิก
ขวาเลอื กช่องเฟรมใดกไ็ ด้ระหว่างคยี ์เฟรมทง้ั สอง เลือก Create Classic Tween สังเกตวา่
ระหว่างคีย์เฟรมจะมรี ปู ลกู ศรช้ีจากคยี ์เฟรมหน่งึ ไปยังอีกคีย์เฟรมหน่งึ จากนัน้ กาํ หนดทวีนระหวา่ งคยี ์เฟรมท่ี
14 และคยี ์เฟรมที่ 30 โดยใชข้ ้ันตอนเดียวกัน

1

2

3

4

รูปที่5.22 กาํ หนดการเคลื่อนไหวแบบทวนี
ขั้นตอนที่ 5 ทดสอบผลทไี่ ด้

กดคีย์ <Enter> เพือ่ ให้โปรแกรม Flash แสดงภาพเคลอ่ื นไหวท่สี ร้าง การเคล่อื นไหวแบบทวีน ต้ังแต่
เฟรมที่ 1-30

86

รปู ท่ี5.23 การทดสอบการเคลอื่ นไหวแบบทวีน
5.7.4 ตวั อย่างการสรา้ ง Animation แบบ Classic Motion Guide

การเพิ่มโมชันพาธ ต้องสร้างคลาสสิกทวีนข้ึนมาก่อน จากน้ันคลิกขวาที่ช่ือเลเยอร์คลาสสิกทวีน
เลอื ก Add Classic Motion Guide จะได้เลเยอรใ์ หม่ เรียกวา่ “เลเยอร์ไกล์ (Guide: ซื่อเลเยอร์ที่เก็บคลาสสิก
ทวีน)” แล้วสร้างโมชันพาธด้วยเคร่ืองมือ Pen, Pencil, Line, Oval, Rectangle หรือ Brush ก็ได้ในเลเยอร์
นนั้ โดยพาธท่สี ร้างตอ้ งเป็นรูปทรงธรรมดา (Shape) ไมใ่ ช้วตั ถุ (Drawing Object) หรือถกู จดั กลมุ่ (Group)

รปู ท่ี5.24 ตวั อยา่ งงเสน้ พาธ
ตัวอยา่ งการทาํ ใหล้ กู บอลเคลือ่ นทีเ่ ป็นเสน้ โค้งโดยใช้ Motion path

1. คลกิ ขวาเลอื ก Create Motion Tween
2. เลอื่ นหวั อ่านไปท่เี ฟรม 15
3. เปลี่ยนตาํ แหนง่ ลูกบอลจะปรากฏเส้นพาธ แล้วดดั เส้นพาธตามตอ้ งการ
4. จากน้ันให้ใช้คําส่ัง Insert Frame เพ่ิมเฟรมท้ังสองเลเยอร์ถึงเฟรมที่ 30 ในเฟรมที่ 30 เปล่ียน
ตําแหนง่ ลกู บอลอกี ครงั้ และดดั เสน้ พาธตามต้องการ
5. กดคยี ์ <Enter> ลูกบอลจะเคล่ือนไหวตามแนวเสน้ พาธ

1

2

87
3

4

รูปท่ี 5.25 การสรา้ ง Animation แบบ Classic Motion Guide

ส่วนประกอบ คาอธิบาย

Ease ใชก้ ําหนดอตั ราเรว็ ในแตล่ ะเฟรม

 กาํ หนดค่าอัตราเร็วในแต่ละเฟรมเป็นศนู ย์ ความเรว็ คงที่

 ถ้ากําหนดคา่ เป็นลบ (Easing In) ความเร็วจะค่อยๆ เพิ่ม

 ถ้ากําหนดค่าเปน็ บวก (Easing Out) ความเรว็ จะคอ่ ยๆ ลด

Rotate กาํ หนดการหมุนในแตล่ ะเฟรม

Direction กําหนดทศิ ทางการหมนุ ในแต่ละเฟรม

 None ไม่ใหว้ ัตถุหมนุ

 CW (Clockwise) วตั ถหุ มุนตามเขม็ นาฬิกา

Orient to path  CCW (Counter Clockwise) วตั ถุหมุนทวนเข็มนาฬิกา
กําหนดให้วตั ถุมีทิศทางการเคลือ่ นทตี่ ามเสน้ พาธท่ีวาดไว้

ตารางที่ 5.3 การกําหนดคุณสมบตั ใิ นการสร้างโมชนั พาธ

Note: ถา้ พาธทสี่ ร้างไม่ไดเ้ ป็นรปู ทรง ให้ Break Apart พาธน้ันจนกวา่ จะกลายเป็นรปู ทรง

เทคนิคการใช้ Motion path การนําวัตถุในคีย์เฟรมไปวางท่ีปลายพาธ ควรเลือกคุณสมบัติ Snap ใน

Property Inspector เพื่อจะได้วางวัตถุได้โดยง่าย และถ้าเลือกคุณสมบัติ Orient to path วัตถุจะหันหน้า

ตามพาธ เช่น พาธชล้ี ง วตั ถกุ จ็ ะหนั หนา้ ลง เป็นตน้

รปู ท่ี 5.26 ถา้ คลิกไม่เลอื กคณุ สมบัติ Orient รปู ท่ี 5.27 ถา้ คลิกเลอื กคุณสมบัติ Orient to
to path path

88
 เม่ือกําหนดการเคลื่อนที่เรียบร้อยแล้ว สามารถซ่อนพาธ โดยคลิกท่ีรูปตาของเลเยอร์ไกด์ซึ่งการ

ซ่อนพาธ จะทําใหว้ ัตถไุ มส่ ามารถเคลอ่ื นทีไ่ ดห้ ายไป
 สามารถนาํ เลเยอร์ใดๆ มาเป็นเลเยอร์ไกด์ก็ได้ โดยคลิกเลือกเลเยอร์ที่ต้องการ จากนั้นคลิกเลือก

คาํ สั่ง Modify>Timeline>Layer Properties แลว้ กาํ หนดให้ชนดิ ของเลเยอรเ์ ปน็ แบบ Guide
 สามารถนําหลายเลเยอรม์ าอยใู่ ต้เลเยอร์ไกดเ์ ดยี วกนั เพื่อที่จะใหว้ ัตถุในทกุ เลเยอร์เคลื่อนไหวตาม

พาธเดียวกนั ได้ โดยคลิกลากเลเยอร์ไกดท์ ้ังหมดมาไว้ใตเ้ ลเยอร์ไกด์
5.7.5 ตัวอย่างการสร้าง Animation แบบ Mask Animation
1. New File หรอื กด Ctrl + N กําหนดสีพ้นื หลงั (Background) เปน็ สีดาํ
2. คลกิ ท่ีเฟรมท่ี 1 พมิ พขอความวา “Young ICT”โดยเลือกรูปแบบตวั อักษรและสีที่ตอ้ งการ

2
รปู ท่ี 5.28 การพิมพ์ข้อความในเฟรมที่ 1
3. จากนั้นคลิกท่ีเฟรม 30 กดปมุ เพมิ่ เฟรม (F5)
4. ทาํ การเพ่ิม Layer ใหม่ โดยคลกิ คาํ สงั่ Insert > Layer จะได Layer 2 เพมิ่ ขึน้ มา

3
4

รูปท่ี 5.29 เพิ่มเฟรมและเพิ่มเลเยอร์ใหม่

89

5. สร้างภาพวงกลมที่เฟรมท่ี 1 ของ Layer 2 ทด่ี า้ นซายของคาํ วา “Young ICT”

5

รปู ที่ 5.30 สร้างภาพวงกลมที่เฟรมท่ี 1 ของ Layer 2
6. จากน้ันเลือกคําส่ัง Insert > Create Motion Tween แล้วคลิกเฟรมที่ 30 กดปุม F6 เพ่ือ
เพิม่ Key frame จากนัน้ ใช้เมาสคลกิ ภาพวตั ถวุ งกลมไปวางไวทางด้านขวาของคําวา “Young ICT”

6

รปู ที่ 5.31 ลากวตั ถุวงกลมไปไวท้ างด้านขวา

7. เม่ือทดสอบโดยการกดปุม Ctrl Enter หรือ คลิกปุม Play จะเห็นภาพวงกลมวิ่งไปบน
ข้อความ “Young ICT”

90
8. คลิกเมาสท่ี Layer 2 แล้วเลือกคําสั่ง Mask โดยคลิกขวาของเมาสท่ี Layer 2 แล้วเลือกคําส่ัง

Mask

รูปที่ 5.32 การใช้คาํ ส่งั Mask
9. เมื่อทดสอบการทํางานก็จะพบว่าข้อความ“Young ICT” จะแสดงเม่ือมี Mask (Layer บน)
เคลอื่ นทีผ่ ่านเทา่ นนั้

รูปที่ 5.33 ทดสอบการทํางานภาพเคลอื่ นไหวแบบ Mask

91

บทที่ 6 เสยี ง (Sound) หรือ ออดโิ อ (Audio)

6.1 เสยี ง (Sound)

เสียง (Sound) อยู่ในรูปแบบของพลังงาน (Energy) เหมือนกับพลังงานความร้อน (Heat) และ
พลังงานแสง (Light) ที่สามารถถ่ายทอดจากที่หน่ึงไปยังอีกท่ีหนึ่งผ่านตัวกลางท่ีเกิดจากการสั่น (Vibrating)
ของวัตถุ และแปลงพลังงานที่อยู่ในรูปแบบคล่ืนท่ีประกอบด้วยแอมพลิจูด (Amplitude) และความถ่ี
(Frequency) ของคลื่นเสียง ตัวอย่างเช่น เม่ือส่ันกระดิ่งจะเกิดเป็นพลังงานเดินทางผ่านตัวกลางท่ีเป็นอากาศ
เพ่ือถ่ายทอดพลังงานดังกล่าว และสะท้อนมายังหูของมนุษย์ เป็นต้น โดยปกติมนุษย์สามารถได้ยินเสียงท่ี มี
ความถ่ีอยู่ระหว่าง 20 ถึง 20,000 เฮิรซต์ ในปัจจุบันเทคโนโลยีการผลิตเสียงได้เข้ามีบทบาทในการใช้ชีวิต
มนุษย์เป็นอย่างมาก ทําให้เกิดวิทยาศาสตร์แขนงหนึ่งท่ีเรียกว่า “อะคูสติกเอ็นจิเนียร์ร่ิง (Acoustic
Engineering)” ซึ่งศึกษาเก่ียวกับโครงสร้าง (Generation) การถ่ายทอด (Transmission) และการรับ
(Reception) คลื่นเสยี ง

ในปี ค.ศ. 1957 Olson ได้นิยามธรรมชาตขิ องคลน่ื เสียงวา่ “เสียงที่เกิดการเปลี่ยนแปลงด้านความกด
อากาศ การท่ีคล่ืนของอนุภาคหรือความเร็วของอนุภาคในการถ่ายทอดเสียงปุานวัตถุท่ีมีความยืดหยุ่น” การ
ถ่ายทอดพลังงานเสียงผ่านตัวกลางเป็นการกําหนดรูปแบบของการบีบอัดอนุภาคเสียง และตัวกลางท่ีมีความ
หนาแนน่ ของโมโลกลุ นอ้ ยกว่าบริเวณใกลเ้ คยี งทําใหอ้ นภุ าคสามารถเคล่ือนทผ่ี า่ นตวั กลางนน้ั ๆได้

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

การวัดระดับของคล่ืนเสียงจะมีหน่วยวัดที่เข้ามาเก่ียวข้องอยู่ 2 หน่วย คือ เดซิเบล (Decibel) ซ่ึงเป็น
หน่วยวัดความดังของเสียงและเฮิรตซ์ (Hertz: Hz) หรือจํานวนรอบของการแกว่งคลื่นเสียงในหนึ่งวินาที ซึ่ง
เป็นหน่วยวัดความถข่ี องเสยี ง โดยสามารถแสดงระดับความดังและชนดิ ของเสยี งได้ ดังนี้

92 ชนิดของเสียง

ความดงั ของ
เสียง(เดซิ

เบล)

0 เสยี งท่แี ผ่วเบาท่สี ุดท่ีหูมนษุ ย์ได้ยนิ

30 เสยี งกระซิบ หรือเสียงในหอ้ งสมดุ ทเี่ งียบสงดั

60 เสยี งพูดคยุ ตามปกติ เสียงจกั รเย็บผ้า หรือเสยี งพมิ พด์ ีด

85 เสียงตะโกนขา้ มเขา หรอื พื้นที่โล่งกวา้ ง เพ่ือใหไ้ ด้ยนิ เสยี งสะท้อนของตนเองกลบั มา

90 เสียงเคร่ืองตัดหญ้า เสียงเครื่องจักรในโรงงาน หรือเสียงรถบรรทุก (ไม่ควรได้ยินเกิน
วนั ละ 8 ชม.)

100 เลอ่ื ยไฟฟาู หรือเครื่องเจาะทใี่ ช้ลม : Pneumatic Drill (ไมค่ วรได้ยนิ เกนิ วนั ละ 2 ชม.)

115 เสียงระเบิดหิน เสียงในคอนเสิร์ต หรือเสียงแตรรถยนต์ (ไม่ควรได้ยินเกินวันละ 15
นาที)

เสยี งยิงปนื เสยี งเคร่ืองบินเจ็ท ซ่ึงเป็นเสียงท่ีทําให้ปวดหู และอาจทําให้หูเสื่อมได้ แม้
140 ได้ยินเพียงครั้งเดียวก็ตาม ดังน้ันผู้ที่จําเป็นต้องอยู่กับเสียงในระดับน้ี จะต้องสวม

อุปกรณ์ปอู งกนั หเู สมอ

ตาราง 6.1 ความดังของเสยี ง

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

6.2 ประเภทของเสยี ง

ประเภทของเสียงสามารถแบ่งได้ 2 ประเภท คือ เสียงแบบมิด้ี และเสียงแบบดิจิตอล โดยมี
รายละเอยี ด ดงั นี้

6.2.1 มิด้ี (MIDI: Musical Instrument Digital Interface)
มิดี้ (MIDI) คอื เสียงท่แี ทนเรื่องดนตรีชนิดต่างๆ ซ่ึงได้รับการพัฒนามาตั้งแต่ปี ค.ศ. 1980 สําหรับ

ใช้กับเคร่ืองดนตรีอิเล็กทรอนิกส์และคอมพิวเตอร์ เช่น สร้างเสียงตามเคร่ืองเล่นเปียโน เป็นต้น โดยในมุมของ
นักดนตรี มิด้ี หมายถึง โน้ตเพลงท่ีมีรูปแบบเป็นสัญลักษณ์หรือตัวเลขท่ีบอกให้รู้ว่าต้องเล่นตัวโน๊ตใดด้วย

93
ระยะเวลาเท่าไหร่ เพื่อให้เกิดเป็นเสียงดนตรี ดนตรีแบบมิด้ีจะไม่เหมือนเสียงจากเครื่องดนตรีจริงๆ ดังน้ัน จึง
จําเป็นต้องสร้างและปรับเสียงมิด้ีให้มีความไพเราะมากยิ่งข้ึน โดยไมโครซอฟต์ได้กําหนดมาตรฐานของเสียง
แบบมิด้ีขึ้นมา เรียกว่า GM (General MIDI Standard) ซึ่งใช้กําหนดรูปแบบของการสร้างข้อมูลเสียงแบบ
MIDI เพอ่ื ใหก้ ารเลน่ เสยี ง (Playback) บนอุปกรณ์ต่างๆเปน็ มาตรฐานเดยี วกนั

ข้อดีของมิด้ี คือ ไฟล์ข้อมูลมีขนาดเล็ก การสร้างข้อมูลมิดี้ไม่จําเป็นต้องใช้เคร่ืองดนตรีจริงๆ ใช้
หน่วยความจําน้องทําให้ประหยัดพ้ืนที่บนฮาริดดิสก์ เหมาะสําหรับใช้งานบนระบบเครือข่าย และง่ายต่อการ
แกไ้ ขและปรับปรงุ ส่วนข้อเสียคอื การแสดงผลได้เฉพาดนตรบี รรเลงและเสยี งทเ่ี กิดจากโนต้ ดนตรเี ท่านนั้

6.2.2 ดนตรีแบบดิจติ อล (Digital Audio)
ดนตรีแบบดิจิตอล (Digital Audio) คือสัญญาณเสียงท่ีส่งมากจากไมโครโฟนหรือเล่นเทป หรือ

จากแหล่งกําเนดิ เสียงตา่ งๆ ท้ังจากธรรมชาติ และที่สรา้ งขึ้นเอง และนําข้อมลู ทไี่ ด้มาแปลงเป็นสัญญาณดิจิตอล
ข้อมูลจะถูกสุ่มให้อยู่ในรูปแบบของบิตข้อมูล โดยเรียกอัตราการสุ่มข้อมูลท่ีได้มาว่า “Sampling Rate” และ
จํานวนของข้อมูลที่ได้เรียกว่า “Sampling Size” ซ่ึงจะเป็นตัวกําหนดคุณภาพของเสียงดิจิตอล เสียงแบบ
ดิจิตอลจะมีขนาดข้อมูลใหญ่ ทําให้ต้องใช้หน่วยความจําและทรัพยากรในการประมวลผลมากกว่ามิด้ี แต่จะ
แสดงได้หลากหลายและเป็นธรรมชาตมิ ากกว่า

6.3 องค์ประกอบของระบบเสยี ง

การนําเสียงจากธรรมชาติมาใช้งานบนคอมพิวเตอร์ต้องผ่านกระบวนการบันทึก (Record) จัด
(Manipulate) และเลน่ เสียง (Playback) แตก่ อ่ นทจ่ี ะผา่ นกระบวนการเหล่าน้ีจําเป็นต้องรับและแปลงเสียงให้
อยู่ในรูปแบบที่เหมาะสม โดยใช้เครื่องมือสําหรับประมวลผลและแปลงเสียงต้นฉบับให้เป็นสัญญาณทางไฟฟูา
ได้แก่ ไมโครโฟน (Microphone) เครื่องขยายเสียง (Amplifier) ลําโพง (Speaker) และอุปกรณ์ปรับแต่งเสียง
(Audio Mixer)

6.3.1 ไมโครโฟน (Microphone)
ไมโครโฟน (Microphone) เป็นอุปกรณ์อิเล็กทรอนิกส์ ทําหน้าท่ีเปล่ียนคล่ืนเสียง (Sound

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

รปู ท่ี 6.1 ไมโครโฟน (Microphone)
ท่มี า http://www.audiocity2u.com/Conference/BOSCH/LBB3330-50.html

94
สามารถแบ่งแบ่งชนิดของไมโครโฟนตามลักษณะโครงสร้างได้เป็น 2 ได้แก่ ไดนามิกไมโครโฟน

(Dynamic Microphone) และคอนเดนเซอรไ์ มโครโฟน (Condenser Microphone)
6.3.1.1 ไดนามคิ ไมโครโฟน (Dynamic Microphone)
ไดนามิกไมโครโฟน (Dynamic Microphone) หรือ มูฟวิ่งคอยล์ไมโครโฟน (Moving Coil

Microphone) เป็นไมโครโฟนชนิดขดลวดเคลื่อนที่ ทําหน้าท่ีเปล่ียนคล่ืนเสียงไปเป็นคล่ืนสัญญาณไฟฟูา โดย
อาศัยคุณสมบัติของการเหนียวนําทางแม่เหล็กไฟฟูา ซึ่งประกอบด้วยไดอะเฟรม (Diaphragm) ที่เป็นแผ่น
โลหะบางๆ ตดิ กบั ขดลวดเหน่ียวนํา เม่ือคล่ืนเสียงกระทบกับไดอะเฟรมท่ีติดอยู่กับขดลวด จะเกิดการเคล่ือนที่
ของขดลวดในสนามแม่เหลก็ ไฟฟูา และสร้างความเข้มของเสียงท่ีกระทบกับไดอะเฟรมอย่างเป็นสัดส่วน ทําให้
เกดิ เปน็ สัญญาณเสียง

รูปท่ี 6.2 ไมโครโฟน (Microphone)
ทมี่ า http://audio-video-fun.blogspot.com/2009_11_01_archive.html
6.3.1.2 คอนเดนเซอรไ์ มโครโฟน (Condenser Microphone)
เป็นไมโครโฟนที่ประกอบด้วยไดอะเฟรมท่ีมีลักษณะคล้ายกับแผ่นเก็บประจุไฟฟูาที่เป็นโลหะ
บางๆ 2 แผ่นวางขนานกันเม่ือมีเสียงมากระทบแผ่นโลหะบางๆ ของคอนเดนเซอร์เกิดการเคล่ือนที่ ซึ่งเป็นผล
ทําใหค้ า่ ความจไุ ฟฟูาของคอนเดนเซอร์เปลยี่ นไปจนเกิดคา่ แรงดนั ไฟฟาู ของศัญญาณเสียง
นอกจากนี้ยังสามารถแบ่งชนิดของไมโครโฟนตามทิศทางการรับเสียงได้เป็น 3 ชนิด ได้แก่
ไมโครโฟนชนิดรับเสียงรอบทิศทาง (Omni Directional Microphone) ไมโครโฟนชนิดรับสียงแบบ
สองทิศทาง (Bi Directional Microphone) และไมโครโฟนชนิดรับเสียงแบบทิศทางเดียว (Uni Directional
Microphone)