หน่วยที่ 3 ลงมือวาดภาพ
- 2. ภาพกราฟิกที่ใช้งานกับคอมพิวเตอร์แบ่งออกเป็ น 2 ประเภท ตามรูปแบบ การจัดเก็บข้อมูลของโปรแกรมและการแสดงผลคือ ภาพบิทแมพ (Bitmap) และ ภาพเวคเตอร์ (Vector) ซึ่งในโปรแกรม flash ข้อแตกต่างระหว่างภาพทั้งสองประเภทจะมีผลตั้งแต่การสร้าง, การแก้ไข, การ นาเข้าไฟล์ (import) และการนาภาพไปใช้ในโปรแกรมอื่นๆ (export) Flash เป็ นโปรแกรมที่เน้นการทางานกับกราฟิกชนิดเวกเตอร์ ดังนั้นรูปที่ คุณวาดขึ้นในโปรแกรมนี้ทั้งหมดจึงเป็ นภาพเวคเตอร์ สาหรับภาพบิทแมพคุณต้อง นาเข้ามาใช้จากแหล่งอื่น เช่น กล้องดิจิตอลหรือจากโปรแกรมที่สามารถสร้าง กราฟิกประเภทนี้ได้ เช่น Photoshop หรือ Fireworks และจะไม่สามารถแก้ไข เปลี่ยนแปลงเนื้อหาของภาพดังกล่าวได้
- 3. การฟิกแบบบิทแมพ (Bitmap) กราฟิกแบบบิทแมพ ภายในภาพจะประกอบไปด้วยจุดสีเล็กๆที่ เรียกว่า พิกเซล (pixel) ซึ่งจัดเรียงตัวกันเป็ นตารางสี่เหลี่ยม ลักษณะจะ คล้ายกับการปูกระเบื้องให้เกิดเป็ นภาพขึ้นมา โดยกระเบื้องแต่ละแผ่นก็คือจุด สีแต่ละพิกเซลนั่นเอง ภาพบิทแมพจะมีความกว้างยาวและจานวนพิกเซลคงที่ ดังนั้นการบอกขนาดจึงมักแสดงในรูปจานวนพิกเซลแนวนอน X แนวตั้ง เช่น 400 x 280 พิกเซล ซึ่งภาพนี้จะมีจานวนจุดสีทั้งหมด 112,000 พิกเซล เป็ นต้น ตัวอย่างของไฟล์ภาพบิทแมพที่พบทั่วไปก็เช่น BMP, JPG, GIF และ TIF เมื่อคุณนาภาพบิทแมพมาใช้โดยแสดงผลเล็กกว่าขนาดจริงจุดสี บางส่วนจะถูกดึงออกไป แต่ถ้าแสดงผลใหญ่กว่าขนาดจริง จุดสีจะถูกเพิ่ม เข้ามาโดยดึงข้อมูลมาจากพิกเซลข้างเคียง ดังนั้นจึงทาให้ดูเหมือนว่าจุดสีถูก ขยายใหญ่ขึ้นจนมองเห็นเป็ นชิ้นสี่เหลี่ยมอย่างชัดเจน นอกจากนี้การแสดง ถาพบิทแมพยังขึ้นกับคุณสมบัติของหน้าจอแสดงผล (resolution-
- 4. การฟิกแบบบิทแมพ (Bitmap) (ต่อ) กล่าวคือเมื่อแสดงบนจอความละเอียดต่า ภาพจะดูคุณภาพไม่ดีและมี ขนาดใหญ่ แต่เมื่อแสดงบนจอความละเอียดสูง ภาพจะดูมีคุณภาพดีแต่ขนาด ภาพจะเล็ก จุดเด่นของการฟิกแบบบิทแมพคือสามารถแสดงภาพที่มีการไล่ ระดับสีเหมือนธรรมชาติ เช่นภาพถ่าย(ในขณะที่กราฟิกแบบเวคเตอร์ซึ่ง ประกอบด้วยเส้นและรูปทรง จะเหมาะสมสาหรับใช้ทาลวดลายหรือภาพวาด แบบการ์ตูนมากกว่า) ส่วนข้อเสียก็คือไฟล์มักมีขนาดใหญ่และสามารถแยก องค์ประกอบแต่ละส่วนมาสร้างภาพเคลื่อนไหวได้ง่ายๆ
- 5. กราฟิกแบบเวคเตอร์ (Vector) ภาพการฟิกแบบเวคเตอร์จะประกอบไปด้วยเส้นและส่วนโค้ง ซึ่งเรียกว่า เวคเตอร์ โดยมีคุณสมบัติเพิ่มเติมเพื่อบอกสี, ขนาด และตาแหน่ง ตัวอย่างเช่น รูป การ์ตูนที่มีองค์ประกอบเป็ นเส้นและส่วนโค้งที่ลากผ่านไปตามจุดต่างๆทาให้เกิด เป็ นโครงร่างโดนรอบขึ้นมา พร้อมทั้งสามารถกาหนดสีของเส้นโครงร่างและสีของ พื้นที่ที่ด้านในโครงร่างได้ ข้อมูลที่เก็บอยู่ในไฟล์ภาพเวคเตอร์มีลักษณะเป็ น ชุดคาสั่งคล้ายภาษาโปรแกรมหรือเป็ นสมการทางคณิตศาสตร์ เช่น ในภาษา SVG (ScalableVector Graphic) ซึ่งเป็ นมาตรฐานสาหรับกราฟิกบนเว็บ คาสั่งที่ใช้วาด รูปสี่เหลี่ยมสีแดงขอบน้าเงินขนาด 10X5 ซม. จะเป็ นดังนี้ สาหรับในไฟล์มูฟวี่ของ Flash ภาพเวคเตอร์จะถูกเก็บในรูปสมการที่ใช้สร้างเส้นและ ส่วนโค้งต่างๆการแก้ไขภาพก็คือการเปลี่ยนแปลงคุณสมบัติของเส้นและส่วนโค้ง ไม่ว่าจะเป็ นการเคลื่อนย้าย, ปรับขนาด,ปรับรูปทรง หรือเปลี่ยนสีก็ตาม ตัวอย่าง ของไฟล์ภาพเวคเตอร์ที่พบทั่วไปก็เช่น SWF, AI, CDR, PDF, WMFและ SVG <rect x=”30”y=”30”width=”10cm”height= “5cm”fill=”red”stroke=”blue”/>
- 6. กราฟิกแบบเวคเตอร์ (Vector) (ต่อ) จุดเด่นของภาพเวคเตอร์ คือสามารถนาไปแสดงผลเป็ นขนาดเท่าใดก็ได้ โดยคุณภาพของภาพคงเดิมทั้งนี้เนื่องจากใช้วิธีคานวณเพื่อสร้างภาพใหม่ทุกครั้งที่ เงื่อนไขการแสดงผลเปลี่ยนแปลง นอกจากนั้นยังสามารถสร้างเป็ นภาพเคลื่อนไหว ได้ง่ายและทางานรวดเร็ว เพราะองค์ประกอบแต่ละชิ้นเป็ นอิสระจากกันส่วนจุดด้อย คือไม่สามารถถ่ายทอดภาพที่มีการไล่ระดับสีตามธรรมชาติ (เช่นภาพถ่าย) ได้
- 7. ภาพที่วาดขึ้นด้วยเครื่องมือต่างๆของโปรแกรม Flash จะเรียกว่า รูปทรง (Shape) หรือออปเจ็คก็ได้ โดยแต่ละรูปทรงจะประกอบไปด้วยสองส่วน คือ พื้นภาพ (Fill) และ เส้น (Stroke) พื้นภาพ (Fill) เป็ นส่วนที่อยู่ภายในรูปทรง มีคุณสมบัติอย่างเดียวนั่นคือสี ซึ่งสามารถ กาหนดรูปแบบต่างๆ ได้ เช่น สีแบบทึบ (Solid), แบบไล่โทนสี (Gradient) หรือจะใช้รูปภาพบิทแมทมาเป็ นพื้นก็ได้ เส้น (Stroke) เป็ นส่วนประกอบที่มีลักษณะเป็ นลายเส้น เช่น เส้นตรง เส้นโค้ง เส้นหยัก หรืออาจเป็ นเส้นที่อยู่รอบรูปทรง เช่น เส้นขอบของรูปวงกลม หรือรูป สี่เหลี่ยม คุณสมบัติของเส้นมีหลายอย่าง เช่น ลวดลายเส้น ความหนา และสี เป็ นต้น
- 8. ทั้งนี้ส่วนประกอบทั้งสองส่วนจะเป็ นอิสระต่อกัน คือ คุณสามารถวาด รูปทรงโดยไม่มีพื้นหรือไม่มีเส้นอย่างใดอย่างหนึ่งได้ สาหรับรูปทรงที่มีทั้งพื้นและ เส้น ก็สามารถแยกทั้งสองส่วนออกจากกัน โดยเส้นที่แยกออกมาสามารถนามา ใส่พื้นใหม่ ในทานองเดียวกันพื้นที่แยกออกก็สามารถใส่เส้นใหม่ได้นอกจากนี้ใน การแก้ไขก็สามารถเลือกแก้ไขเฉพาะพื้นที่หรือเส้นที่ต้องการได้
- 9. การวาดภาพกราฟิกใน Flash แบ่งออกเป็ น 2 รูปแบบดังนี้ วาดแบบ Object Drawing รูปทรงที่ได้จากการวาดแต่ละครั้งจะเป็ นอิสระจากกัน และเมื่อมีการวาง ซ้อนทับกันก็ไม่มีผลทาให้ออบเจ็คอื่นหรือตัวเองเปลี่ยนแปลงรูปร่าง ในการวาด แบบนี้ให้คุณคลิกเลือก Object Drawing ที่ออบชั่นของเครื่องมือไว้ (หรือกดคีย์ J) ก่อนลงมือวาด วาดแบบ Merge Drawing รูปทรงที่ได้จากการวาดจะมีผลต่อรูปทรงอื่น โดยเมื่อมีการวาดหรือนาไป วางซ้อนทับกันจะทาให้คุณสมบัติของพื้นภาพหรือเส้นแปรเปลี่ยนไป ในการวาด แบบนี้ให้คุณยกเลิกการเลือก Object Drawing ที่ออปชั่นของเครื่องมือ (ถ้าเลือก อยู่) ก่อนลงมือวาด
- 10. การซ้อนทับของรูปทรงในแบบ Merge Drawing ในการวาดแบบ Merge Drawing เมื่อคุณวาดรูปใดๆ ทับรูปทรงอื่นที่อยู่ ด้านล่าง (หรือย้ายรูปทรงที่วาดด้วยวิธีนี้มาซ้อนกัน) จะมีผลกับรูปทรงทั้งสอง โดยแยกได้เป็ นกรณีต่างๆดังนี้ - รูปทรงทั้งสองไม่มีเส้นและมีสีพื้นเป็ นสีเดียวกัน จะทาให้รูปทรงทั้งหมดถูกรวม เป็ นชิ้นเดียวกัน - รูปทรงทั้งสองไม่มีเส้นและมีสีพื้นที่ไม่ใช่สีเดียวกัน จะทาให้รูปทรงทั้งสองแยก ออกจากกัน โดยที่รูปด้านบนยังเหมือนเดิมแต่รูปด้านล่างจะถูกตัดและส่วนที่ถูก ทับจะหายไป วาดแบบ Merge Drawing (ต่อ)
- 11. การซ้อนทับของรูปทรงในแบบ Merge Drawing (ต่อ) - รูปทรงทั้งสองหรือชิ้นใดชิ้นหนึ่งมีเส้น (ไม่ว่าพื้นและเส้นจะเป็ นสีเดียวกันหรือ คนละสี) จะทาให้รูปทรงทั้งสองแยกออกจากกัน โดยที่รูปทรงทั้งสองแยกออก จากกัน โดยที่รูปทรงด้านบนยังเหมือนเดิมแต่รูปด้านล่างจะถูกตัด และหาก ดับเบิลคลิกเลือกที่รูปทรงใดก็จะได้เส้นกรอบตามรูปทรงนั้น - รูปทรงที่มีเฉพาะเส้น ไม่ว่าจะเป็ นสีเดียวกันหรือไม่ก็ตาม เส้นจะสามารถแยก ส่วนออกตามมุมหรือตรงจุดที่เส้นตัดกันได้ วาดแบบ Merge Drawing (ต่อ)
- 12. กาหนดสีพื้นและสีเส้น เมื่อมีการเลือกเครื่องมือสาหรับวาดรูปทรง คุณจะสามารถเลือกสี พื้นและสีเส้นก่อนการวาดได้ โดยใช้เครื่องมือบนทูลพาเนลหรือบน Property inspector โดยคลิก Stroke Color เพื่อเลือกสีเส้น และคลิก Fill Color เพื่อเลือกสีพื้น กาหนดคุณสมบัติของเส้น นอกจากสีแล้ว เส้นยังสามารถกาหนดคุณสมบัติอื่นก่อนการวาด เช่น ความหนา (height) และลวดลาย (style) ได้จาก Property inspector ดังภาพ
- 14. วาดเส้นตรงด้วยเครื่องมือ Line Line เป็ นเครื่องมือที่ใช้วาดเส้นตรง โดยคุณสามารถกาหนดสี, ความหนา, ลวดลาย และคุณสมบัติอื่นๆของเส้นจาก Property inspector ก่อนการวาด ตามที่ กล่าวไว้ข้างต้น
- 15. วาดเส้นอิสระด้วยเครื่องมือ Pencil Pencil เป็ นเครื่องมือที่ใช้วาดเส้นแบบอิสระเหมือนกับการใช้ดินสอวาด ภาพบนกระดาษ
- 16. วาดสี่เหลี่ยมหรือสี่เหลี่ยมมุมโค้งด้วยเครื่องมือ Rectangle และ Rectangle Primitive Rectangle และ Rectangle Primitive เป็ นเครื่องมือสาหรับวาดรูป สี่เหลี่ยม หรือสี่เหลี่ยมมุมโค้งเหมือนกัน แต่ต่างกันตรงที่ Rectangle จะสามารถ ปรับแต่งความโค้งได้เฉพาะก่อนการวาด ส่วน Rectangle Primitive จะสามารถ ปรับแต่งความโค้งได้ทั้งก่อนและหลังการวาด สาหรับขั้นตอนการวาดของทั้งสอง เครื่องมือจะเหมือนกัน กาหนดความโค้งของมุมต่างๆ ในขั้นตอนที่ 4 ของการวาด คุณสามารถปรับความโค้งของแต่ละ มุมได้ โดยกาหนดค่ารัศมีมุมโค้งบน Property inspector ซึ่งค่าบวกจะให้ผล เป็ นมุมโค้งออก ส่วนค่าลบจะให้ผลเป็ นมุมเว้าเข้า
- 17. ปรับแต่งรูปทรงหลังการวาด เฉพาะกรณีที่วาดด้วยเครื่องมือ Rectangle Primitive คุณจะสามารถ ดัดแปลงรูปทรงภายหลังได้โดยใช้เครื่องมือ Selection คลิกเลือกออบเจ็ค แล้ว คลิกลากปรับจุดควบคุมแต่ละมุมได้ ข้อยกเว้นในการปรับแต่งรูปทรงออบเจ็คแบบ Primeitive รูปทรงที่วาดด้วยเครื่องมือ Rectangle Primitive และ Oval Primitive (ดู หัวข้อถัดไป) จะไม่สามารถปรับแต่งเส้นพาธ (path) ด้วยกลุ่มเครื่องมือ Pen รวมถึงการปรับรูปทรงด้วยเครื่องมือ Selection ได้ หากต้องการแก้ไขในกรณี ดังกล่าวคุณต้องแปลงรูปทรงให้เป็ น Object Drawing ก่อน โดยใช้เครื่องมือ Selection ดับเบิลคลิกบนรูปทรง จะปรากฏไดอะล็อกบ็อกซ์ดังรูป ให้คุณคลิก ปุ่ ม OK เพื่อแปลงรูปทรงเป็ น Object Drawing
- 18. วาดวงกลมหรือวงรีด้วยเครื่องมือ Oval และ Oval Primitive Oval และ Oval Primitive เป็ นเครื่องมือสาหรับวาดรูปวงกลมหรือวงรี เหมือนกัน แต่ต่างกันตรงที่ Oval จะสามารถดัดแปลงรูปทรงได้เฉพาะก่อนการ วาด แต่ Oval Primitive จะสามารถดัดแปลงรูปทรงได้ทั้งก่อนและหลังการวาด ซึ่ง ทั้งสองเครื่องมือนี้มีขั้นตอนการวาดที่เหมือนกันดังนี้
- 19. การดัดแปลงรูปทรง ในขั้นตอนที่ 4 ของการวาด คุณสามารถดัดแปลงรูปวงกลมหรือวงรี ให้ มีลักษณะเป็ นเสี้ยวหรือเจาะเป็ นรูปโดนัท โดยกาหนดค่าต่างๆ บน Property inspector ซึ่งมีส่วนประกอบดังนี้ วาดวงกลมหรือวงรีด้วยเครื่องมือ Oval และ Oval Primitive (ต่อ)
- 20. วาดรูปทรงหลายเหลี่ยมและรูปดาวด้วยเครื่องมือ PolyStar PolyStar เป็ นเครื่องมือที่ใช้วาดรูปทรงหลายเหลี่ยมและรูปดาว โดย สามารถกาหนดจานวนด้านของรูปหลายเหลี่ยมหรือจานวนแฉกของดาวได้ ตั้งแต่ 3-32 ด้าน
- 21. Pen เป็ นเครื่องมือที่ใช้สาหรับวาดรูปทรงที่ซับซ้อนได้อย่างสะดวก และเที่ยงตรง ไม่ว่าจะเป็ นรูปทรงที่มีส่วนของเส้นตรงหรือเส้นโค้งก็ตาม ในการ ใช้เครื่องมือ Pen วาดคุณจะได้เส้นพาธ (Path) ขึ้นมา ซึ่ง พาธจะเป็ น ตัวกาหนดรูปทรงของภาพ (รวมถึงรูปทรงที่วาดด้วยเครื่องมืออื่นๆ ทั้งหมดก็ ประกอบด้วยเส้นพาธเช่นกัน) ความสัมพันธ์ระหว่างพาธและเส้นสัมผัส ในการวาดภาพ รูปทรงที่ได้จะสวยงามหรือไม่ขึ้นอยู่กับการปรับส่วน ต่างๆ ของพาธ ซึ่งแต่ละส่วนล้วนแล้วแต่สัมพันธ์กัน ดังนั้นจึงต้องทาความ เข้าใจลักษณะของเส้นพาธที่จะเกิดขึ้นเนื่องจากการปรับจุดและเส้นสัมผัสใน แบบต่างๆ ดังนี้
- 22. ความสัมพันธ์ระหว่างพาธและเส้นสัมผัส (ต่อ) - ส่วนของรูปทรงที่เป็ นมุมตัดเกินจากแองเคอร์ที่ไม่มีเส้นสัมผัสใดๆในทาง ตรงกันข้าม ส่วนของรูปทรงที่เป็ นแนวโค้ง เกิดจากจุดแองเคอร์ที่มีเส้นสัมผัสมา บังคับให้พาธบิดโค้งไปนั่นเอง - ความยาวของเส้นสัมผัสจะกาหนดขนาดของความโค้ง - ทิศทางของเส้นสัมผัสจะกาหนดทางของส่วนโค้ง - จุดแองเคอร์แต่ละจุดจะมีเส้นสัมผัสได้ 2 เส้นซึ่งแต่ละเส้นจะบังคับพาธใน ด้านของตัวเอง เช่น หากปรับเส้นสัมผัสชี้ไปด้านล่างเส้นพาธก็โค้งลงไปแต่ถ้า ปรับเส้นสัมผัสชี้ขึ้นด้านบนเส้นพาธก็จะโค้งขึ้น
- 23. วาดรูปทรงที่ประกอบด้วยเส้นตรง Pen เป็ นเครื่องมือซึ่งใช้วาดรูปทรงที่ซับซ้อนได้สะดวก โดยการคลิก สร้างจุดแองเคอร์ทีละจุดไปเรื่อยๆเพื่อให้ได้เส้นตรงที่ต่อเนื่องกันจนเป็ น รูปทรง วาดรูปทรงที่ประกอบด้วยเส้นโค้ง นอกจากการใช้เครื่องมือ Pen เพื่อวาดเส้นตรงแล้ว คุณยังสามารถ วาดรูปที่มีส่วนโค้งได้ โดยในขณะที่คลิกสร้างจุดแองเคอร์แต่ละจุด ให้ลากดึง เส้นสัมผัส (direction line) ออกมาด้วย เพื่อปรับให้พาธเป็ นส่วนโค้ง
- 24. รูปทรงที่วาดด้วยเครื่องมือ Pen รวมทั้งรูปทรงที่วาดด้วยเครื่องมืออื่นๆ ทั้งหมด คุณสามารถแก้ไขหรือปรับแต่งเพิ่มเติม เพื่อให้เป็ นรูปทรงที่สมบูรณ์ตาม ต้องการได้ ปรับความโค้งของรูปทรง ทาได้โดยใช้เครื่องมือ Subselection ดึงปรับเส้นสัมผัสนั่นเอง เปลี่ยนมุมตัดให้เป็ นส่วนโค้ง สาหรับรูปทรงที่มีส่วนเว้าส่วนโค้งซับซ้อน การวาดพร้อมๆกับปรับ ความโค้งไปด้วยในขั้นตอนเดียวอาจทาได้ยาก วิธีที่ง่ายกว่าคือให้คุณวาดรูป โครงร่างที่เป็ นเส้นตรงมุมตัดขึ้นมาก่อน แล้วค่อยปรับให้มุมเหล่านั้นกลายเป็ น ส่วนโค้ง โดยใช้เครื่องมือ Convert Anchor Point ดึงเส้นสัมผัสออกมา ซึ่งมี ขั้นตอนดังนี้
- 25. เปลี่ยนมุมโค้งเป็ นมุมตัด การเปลี่ยนส่วนโค้งให้เป็ นมุมตัด คือ การลบเส้นสัมผัสที่ทาให้มุมนั้น เป็ นส่วนโค้งออกไป โดยใช้เครื่องมือ Convert Avchor Point คลิกที่จุดแอง เคอร์ตรงมุมที่ต้องการ การปรับแต่งด้วยวิธีนี้จะช่วยให้สามารถดัดแปลงรูปทรง ให้มีทั้งมุมตัดและส่วนโค้งเป็ นส่วนประกอบได้ดี Brush เป็ นเครื่องมือสาหรับวาดและระบายสีคล้ายพู่กันหรือแปรง โดย ใช้สีพื้น (fill) ในการระบายต่างจากเครื่องมือ Pencil ที่ใช้สีเส้น (stroke) นอกจากนี้ยังมีคุณสมบัติพิเศษในการระบายภาพได้หลายแบบและสามารถ แสดงความหนักเบาของลายเส้นคล้ายพู่กันจริง เมื่อใช้ร่วมกับอุปกรณ์การวาด ที่ตรวจจับระดับของแรงกดได้ (pressure-sensitive tablet)
- 26. Eraser เป็ นเครื่องมือที่ทาหน้าที่คล้ายยางลบใช้ลบเส้นและสีพื้นของ รูปทรง โดยคุณสามารถลบเส้นหรือสีพื้นทีเดียวทั้งชิ้น หรือเลือกลบเพียง บางส่วน รวมถึงสามารถปรับรูปแบบหัวยางลบได้ตามความเหมาะสม ลบเส้นหรือสีพื้นบางส่วน ถ้าต้องการลบเพียงบางส่วนของเส้นหรือสีพื้น จะต้องใช้วิธีคลิกลาก เมาส์ทับบริเวณ (เหมือนกับใช้ยางลบถูบนกระดาษ) โดยคุณสามารถเลือก โหมดการลบได้หลายแบบ แล้วแต่ลักษณะของผลลัพธ์ที่ต้องการ ลบเส้นหรือสีพื้นทั้งชิ้นโดยใช้ Faucet เป็ นวิธีง่ายที่สุดในการลบเส้นหรือสีพื้นที่อยู่ในบริเวณเดียวกัน โดยใช้ การคลิกเพียงครั้งเดียว
- 27. ในการวาดรูปทรงด้วยเครื่องมือต่างๆ คุณสามารถกาหนดให้รูปทรงนั้น เป็ น Object Drawing ได้โดยเลือกออปชั่น Object Drawing ไว้ก่อนลงมือวาดซึ่ง วิธีนี้จะทาให้รูปทรงซ้อนทับกันได้โดยไม่มีผลต่อรูปทรงอื่น