Back to Top
sunshine
Untitled Document

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 


 สาระการเรียนรู้

1.  ชนิดของภาพกราฟิก
2.  การวาดรูปโดยใช้เครื่องมือใน Flash
3.  การวาดรูปทรงเรขาคณิต


มาทำแบบทดสอบก่อนเรียนก่อนนะคะ
   แบบทดสอบ หน่วยที่ 2



Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

    รู้จักกับชนิดของภาพกราฟิก

เราสามารถแบ่งภาพกราฟิกออกเป็น 2 ชนิด คือ

   ภาพกราฟิกชนิดบิตแมป (
Bitmap )

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

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

 

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

 

   ภาพกราฟิกชนิดเวกเตอร์ Vector )

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

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

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

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

 


 

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

    เริ่มต้นการวาดรูปโดยใช้เครื่องมือใน Flash

ต่อไปนี้เราจะมารู้จักกลุ่มเครื่องมือพื้นฐานในทูลบ็อกซ์ สำหรับใช้วาดภาพกราฟิก ( เราสามารถเปิดทูลบ็อกซ์ได้โดยเลือกคำสั่ง Window->Tools  หรือกดคีย์  Ctrl + F2



การวาดภาพแบบปกติในแฟลช  นั้น เมื่อเราวาดรูปด้วยเครื่องมือต่างๆเราก็จะได้รูปทรง ( Shape )  ซึ่งรูปทรงของภาพประกอบด้วย



   เส้นขอบ( Stroke ) หรือลายเส้น (Outline)  เป็นโครงร่างของรูป

   ส่วนที่เป็นพื้นรูป (Fill) พื้นที่ภายในเส้นขอบ

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

 

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

   การกำหนดรายละเอียดของรูปทรงที่วาด

ในหัวข้อต่อไปเราจะกล่าวถึงเครื่องมือวาดรูปต่าง ๆ ในแฟลช ซึ่งเมื่อเราคลิกเลือกเครื่องมือใดเพื่อวาดรูปทรง ให้สังเกตใน Property Inspector  ของเครื่องมือนั้น จะปรากฏคุณสมบัติของเส้นและสีพื้นให้เรากำหนดเพิ่มเติมได้ ดังนี้



ใน Properties inspector มีรายละเอียดที่เรากำหนดได้ก่อนวาดภาพดังนี้

 

จากจานสีที่เราเลือกใช้งานข้างต้นเป็นสีมาตรฐานที่โปรแกรมกำหนดมา แต่หากเราต้องการผสมสีด้วยตัวเองก็ทำได้เช่นกันโดยวิธีการดังนี้

 

ด้านล่างของตัวเลือกทั้งสองนี้ในทูลบ็อกซ์จะมีอีก 2 ปุ่ม ดังนี้

   Black and White   เปลี่ยนสีของ Stroke Color และ Fill Color ให้กลับมาเป็นสีที่ใช้ตอนเริ่มต้น คือ สีเส้นเป็นสีดำและสีพื้นเป็นสีขาว

   Swap Colors      สลับสีระหว่าง Stroke  Color และFill Color

   การวาดรูปทรงซ้อนกันใน Flash

เมื่อมีการนำภาพหรือรูปทรงที่สร้างใน Flash มาเรียงซ้อนกัน จะมีผลทำให้รูปเหล่านั้นถูกรวมเข้าด้วยกันหรือถูกแตกออกเป็นส่วนย่อย ๆ แล้วแต่กรณี ดังนี้

  หากเราวาดรูปทรงที่มีแต่สีพื้นซ้อนทับอีกรูปทรงหนึ่งที่มีสีพื้นเดียวกัน จะทำให้พื้นรูปของทั้งสองถูกรวมเข้าด้วยกัน


 

  หากเราวาดรูปทรงที่มีแต่สีพื้นซ้อนทับอีกรูปทรงหนึ่งที่มีสีพื้นต่างกัน เมื่อแยกรูปทรงออกจากกันจะทำให้บริเวณสีเดิมที่ถูกอีกรูปทรงทับหายไป

  หากเราวาดรูปทรงที่มีเส้นขอบซ้อนทับอีกรูปหนึ่งเส้นขอบที่ซ้อนทับทั้ง 2  รูปทรงนั้นจะกลายเป็นของรูปทรงใดรูปทรงหนึ่ง ขึ้นอยู่กับการคลิกเลือกของเรา เช่น หลังจากซ้อนรูปทรงด้านล่าง ถ้าเราดับเบิ้ลคลิกเลือกรูปทรงใด เส้นขอบก็จะกลายเป็นของรูปทรงนั้น


  หากเราวาดเส้นตัดผ่านรูปทรงหนึ่ง หรือนำรูปทรงมาซ้อนทับเส้นจะทำให้รูปทรงนั้นถูกแบ่งออกเป็นส่วนย่อยๆตามแนวที่ถูกตัดเส้น
  หากเราวาดเส้นตัดกัน หรือนำเส้นหนึ่งมาซ้อนทับอีกเส้นหนึ่ง เส้นทั้ง 2 จะถูกตัดออกเป็นส่วนย่อยๆตรงจุดที่เส้นทั้งสองตัดกัน (ไม่ว่าทั้งสองเส้นจะเป็นสีเดียวกันหรือคนละสีก็ตาม)

 



 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

   การวาดเส้นตรงและเส้นโค้งเชื่อมต่อกันโดยใช้ Pen Tool

Pen Tool เป็นเครื่องมือที่ใช้วาดเส้นตรงและเส้นโค้ง โดยเส้นที่วาดจะเชื่อมต่อกันเป็นจุดต่อจุด เราจะเรียกจุดนี้ว่า “ จุดแองเคอร์ ”  ( anchor point )ภายในกลุ่มของ Pen Tool จะมีเครื่องมือต่างๆสำหรับปรับแต่งเส้นพาธให้เป็นรูปทรงต่างๆได้ตามที่ต้องการ ดังนี้

  Pen Tool   ใช้วาดเส้นด้วยปากา
  Add Anchor Point Toor  ใช้เพิ่มจุดในแนวเส้นพาธ
  Delete Anchor Point Toor  ใช้ลบจุดในแนวเส้นพาธ
  Convert Point Toor  ใช้เปลี่ยนแขนของเส้นพาธให้เป็นเส้นโค้งหรือเส้นตรง


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

เราสามารถจบวิธีการวาดรูปได้ 2 วิธี ขึ้นกับลักษณะรูปทรงที่เราวาด

  ถ้าต้องการสร้างรูปทรงแบบเปิดให้เราดับเบิ้ลคลิก
ที่จุดสุดท้ายที่กำหนดหรือคลิก  ในทูลบ็อกซ์

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

NOTE  !!

หากเราต้องการจบการสร้างรูปทรงนี้และต้องการสร้างรูปทรงต่อไปเลยให้กดที่ <Ctrl> ค้างไว้และคลิกที่ใดก็ได้ในสเตจ สังเกตว่าตัวชี้เมาส์จะเปลี่ยนเป็น    หมายความว่าได้เสร็จสิ้นการสร้างรูปทรงนี้แล้วแต่ยังเป็นการใช้เครื่องมือ  Pen Toolอยู่ ซึ่งถ้าหากเราคลิดที่ใดบนสเตจก็จะเป็นการเริ่มสร้างรูปทรงอื่น ๆ

สำหรับการวาดเส้นโค้ง ให้เราคลิกที่   ในทูลบ็อกซ์ตัวชี้เมาส์จะเปลี่ยนเป็นรูป  ปรับแต่งค่าต่างๆให้กับเส้นใน Property Inspectorแล้วเริ่มทำตามขั้นตอนดังนี้

  คลิกเมาส์ค้างไว้ที่จุดเริ่มต้น แล้วลากเมาส์ไปในทิศทางที่ต้องการ
  จะปรากฏเส้นสัมผัสที่ใช้ในการวาดเส้นโค้งขึ้นมา ให้ปล่อยเมาส์เมื่อเส้นสัมผัสมีความยาวและอยู่ในทิศที่ต้องการ( ถ้าเรากดคีย์ <Shift> จะมีผลทำให้เส้นสัมผัสถูกวางในแนวนอน แนวตั้ง หรือแนว  45  องศาเท่านั้น)
  คลิกเมาส์ค้างไว้ที่จุดปลายของเส้นโค้ง จะปรากฏเส้นโค้งขึ้นมา ให้ลากเมาส์ไปในทางใดทิศหนึ่งจะปรากฏเส้นสัมผัสอีกเส้นหนึ่งให้เราปรับความโค้งของเส้นได้ตามต้องการ
ก่อนจบการวาดเส้น จะใช้วิธีเดียวกันกับการวาดเส้นตรงที่ได้กล่าวไปแล้ว หรือจะวาดเส้นตรงหรือเส้นโค้งต่อไปก็ได้

  ปรับแต่งรูปทรงที่วาด

หลังจากที่เราได้วาดรูปทรงเสร็จแล้ว หากต้องการปรับแต่งรูปทรงนั้น ให้คลิกเลือกเครื่องหมาย Pen Toolอีกครั้ง และคลิกที่เส้นในรูปทรงเพื่อให้แสดงจุดแองเคอร์ให้เห็น เพื่อทำการปรับแต่งได้ ซึ่งจุดแองเคอร์แบ่งได้เป็น 2  แบบ ดังนี้
- Comer point        เป็นจุดที่อยู่ตรงมุมของเส้น
- Curve  point        เป็นจุดที่อยู่บนเส้นโค้ง

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

  การลบจุดแองแองเคอร์
ให้คลิกบนจุดที่ต้องการลบหนึ่งครั้ง(สังเกตว่าเมื่อตัวชี้เมาส์อยู่เหนือจุดแองเคอร์ จะเป็น  ) แต่ให้สังเกตในกรณีที่จุดแองเคอร์ที่ต้องการลบนั้นเป็นจุด Curve point เราจะต้องคลิกบนจุดแองเคอร์นี้ 2ครั้ง (นั้นคือคลิกครั้งแรกจะเป็นการเปลี่ยนจุดแองเคอร์เป็นจุด Corner  point ทำให้ส่วนโค้งของเส้นถูกยุบ ส่วนการคลิกครั้งที่สองจะเป็นการลบจุดแองเคอร์นั้น)

  ปรับส่วนโค้งให้เป็นมุม

ให้นำPen Tool ไปวางบนจุดแองเคอร์ ที่เป็น Curve point ที่ต้องการ จะปรากฏสัญลักษณ์  แล้วคลิกเมาส์ลงที่จุดแองเคอร์นั้น จะทำให้ส่วนโค้งของเส้นถูกยุบกลายเป็นมุมแทน





 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

  การวาดรูปทรงเรขาคณิต

ประกอบไปด้วยรูปสี่เหลี่ยม รูปวงกลม  วงรี และรูปหลายเหลี่ยม ดังรูป ขอแบ่งออกแป็นกลุ่มๆตามรายการที่ Tools  ดังนี้

  การวาดรูปสี่เหลี่ยมด้วย  Rectangle Tool และ Rectangle Primitive Tool

เครื่องมือ Rectangle Tool และ Rectangle Primitive Tool  ใช้สำหรับวาดรูปสี่เหลี่ยม หรือสี่เหลี่ยมมุมโค้ง แตกต่างกันตรงที่รูปที่ได้จาก Rectangle Primitive Tool  จะสามารถกลับมาเปลี่ยนลักษณะความโค้งของมุมที่ Property Inspectorได้อีกครั้ง

ทั้งสองเครื่องมือ สามารถวาดรูปสี่เหลี่ยมได้โดยการคลิกที่  ในทูลบ็อกซ์(หรือกดคีย์ลัด R  ซ้ำๆ  จะสลับไปมาของเครื่องมือทั้งสองตัว) ตัวชี้เมาส์จะเปลี่ยนเป็นรูป  จากนั้นปรับแต่งค่าต่างๆให้กันเส้นที่เราจะสร้าง ซึ่งสามารถกำหนดความโค้งของมุมของรูปสี่เหลี่ยมได้ใน Property Inspector  แล้วลากเมาส์วาดรูปสี่เหลี่ยมหรือวาดรูปสี่เหลี่ยมจัตุรัสได้โดยกดคีย์<Shift>ค้างไว้

  การวาดวงกลมหรือวงรีด้วย  Oval Tool และ Oval Primitive Tool

เครื่องมือ Oval Tool และ Oval Primitive Tool จะใช้วาด รุปวงกลมหรือวงรี แต่ Oval Primitive Tool สามารถกลับมเปลี่ยนแปลงรูปทรงหรือรัศมีภายในวงกลม ใน Property Inspector   ได้อีกครั้ง
ทั้งสองเครื่องมือ สามารถวาดรูปได้โดยการคลิกค้างที่เครื่องมือ Rectangle Toolที่ทลูบ็อกซ์จะปรากฏเมนูย่อยแสดงเครื่องมือ Oval Tool และ Oval Primitive Tool  (หรือกดคีย์ลัด Oซ้ำๆ จะสลับไปมาของเครื่องมือทั้งสองตัว) ตัวชี้เมาส์จะเปลี่ยนเป็นรูป  จากนั้นปรับแต่งค่าต่างๆให้กับเส้นที่เราจะสร้าง ซึ่งสามารถกำหนดความโค้งของมุมของรูปสี่เหลี่ยมได้ใน Property Inspector  แล้วลากเมาส์วาดวงรีหรือวาดรูปวงกลมโดยกดคีย์<Shift>ค้างไว้

  การวาดรูปหลายเหลี่ยมด้วย PolyStar  Tool

เครื่องมือ PolyStar  Tool จะอยู่ในกลุ่มเดียวกันกับเครื่องมือ  Rectangle Tool ใช้สำหรับสร้างรูปหลายเหลี่ยม โดยให้คลิกค้างที่เครื่องมือ Rectangle Toolที่ทลูบ็อกซ์จะปรากฏเมนูย่อยแสดงเครื่องมือ PolyStar  Tool ตัวชี้เมาส์จะเปลี่ยนเป็น   จากนั้นปรับแต่งค่าต่างๆให้กับรูปหลายเหลี่ยมที่เราจะสร้างใน Property Inspector  แล้วลากเมาส์วาดรูปหลายเหลี่ยมได้ตามต้องการ

  การวาดลายเส้นอิสระด้วย  Pencil Tool

Pencil Tool เป็นเครื่องมือสำหรับใช้วาดลายเส้นอิสระ เหมือนกับการใช้ดินสอวาดรูปบนกระดาษ โดยการคลิก  ในทูลบ็อกซ์ (หรือกดคีย์ลัด Y)ตัวชี้เมาส์จะเปลี่ยนเป็นรูป   จากนั้นให้ลากเมาส์วาดเส้นได้ตามต้องการ



Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

  ใช้ Selection Tool และ Subselection Tool ปรับแต่งรูปทรงที่วาด


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

  การปรับแต่งเส้นขอบของรูปโดยใช้ Selection Tool

เราสามารถใช้ Selection Tool ปรับแต่งเส้นขอบหรือปรับแต่งรูปทรงที่ไม่มีเส้นขอบ(เพราะถูกวาดโดยเครื่องมือ เช่น Brush Tool)ก็ได้ โดยการคลิกที่   ในทูลบ็อกซ์ เมื่อเรานำตัวชี้เมาส์ไปวางที่เส้นขอบของรูปทรง ตัวชี้เมาส์จะเปลี่ยนไปจาก  เป็น  ซึ่งเราใช้ดึงเส้นหรือขอบให้โค้งได้(ถ้าเรากดคีย์<Ctrl> ในขณะที่คลิกเมาส์ลากเส้น จะเป็นการเพิ่มมุมให้กับรูปทรง)

  ปรับแต่งรูปทรงด้วย Subselection Tool

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

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

 

 

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

  

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

 

  

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player