2901-2011 การสร้างภาพเคลื่อนไหวเบื้องต้น

Adobe Flash CS6 3บทท่ี สรา้ งชนิ้ งานจากเครอ่ื งมอื ของโปรแกรม Flash CS6 จดุ ประสงค์เชงิ พฤติกรรม (Behavioral Objectives) หลงั จากศึกษาจบบทเรยี นนแี้ ล้ว นกั ศึกษาจะมีความสามารถดังนี้ 1. ปฏบิ ัติการวาดภาพโดยใช้โปรแกรม Adobe Flash CS6 ได้ 2. สร้างเสน้ ตรงดว้ ยเครอ่ื งมอื Line Tool ได้ 3. สรา้ งเส้นอิสระดว้ ยเครือ่ งมือ Pencil ได้ 4. ปฏิบัติการสรา้ งรูปทรงเรขาคณติ ได้ 5. สรา้ งรปู ทรงอสิ ระด้วยเครื่องมือ Pen Tool ได้ 6. ปฏบิ ตั ิการปรบั แตง่ รปู ทรงและระบายสภี าพได้ 7. ใชเ้ ครือ่ งมือลงสีพืน้ หรือเส้นได้ 8. ตกแตง่ และเตมิ ลวดลายใหร้ ูปภาพได้

การสร้างภาพเคลอื่ นไหวเบือ้ งต้น Adobe Fla4s5h CS6 บทท่ี สรา้ งชิ้นงานจากเครอื่ งมอื 3 CS6ของโปรแกรม Flash สำ�หรับการสร้างช้ินงาน (Object) ข้ึนมาใช้งานน้ันสามารถทำ�ได้หลายวิธี เช่น หากต้องการ สร้างรูปเส้นตรงสามารถทำ�ได้ด้วยเครื่องมือ Line Tool สามารถสร้างดินสอได้จากเคร่ืองมือ Pencil Tool สร้างวงกลมจากเครื่องมือ Oval Tool และสร้างส่ีเหลี่ยมจากเครอ่ื งมือ Rectangle Tool หรอื หาก ต้องการสร้างตวั อักษรก็สามารถทำ�ไดโ้ ดยใช้ป่มุ เครือ่ งมือ Text Tool ในบทน้ีจะได้เรียนรู้เก่ียวกับข้ันตอนและวิธีการสร้างช้ินงาน (Object) ด้วยเคร่ืองมือต่าง ๆ ในโปรแกรม Flash CS6 นอกจากนี้ หลงั จากท่ไี ด้ทำ�การสรา้ งชนิ้ งาน (Object) รูปทรงต่าง ๆ ขน้ึ มาแล้ว หากต้องการปรับเปลี่ยนแก้ไขก็สามารถทำ�ได้อย่างสะดวก โดยก่อนท่ีจะเริ่มต้นสร้างช้ินงาน (Object) นั้นเราควรจะต้องมาทำ�การศึกษาเก่ียวกับส่วนประกอบต่าง ๆ ของโปรแกรม Flash CS6 ก่อน โดย โปรแกรม Flash CS6 มีสว่ นประกอบตา่ ง ๆ ทีต่ ้องรู้จัก ดังน้ี ลกั ษณะการวาดและการก�ำ หนดสี การวาดภาพด้วยเคร่ืองมือต่าง ๆ เราก็ได้รูปทรง (Shape) หรือออบเจ็กต์ (Object) โดยแต่ละ ออบเจก็ ตจ์ ะประกอบไปดว้ ยพน้ื ภาพ (Fill) เปน็ พน้ื ทภ่ี ายในเสน้ ขอบและเสน้ (Line) เปน็ โครงรา่ งของภาพ ลกั ษณะการวาด • Object Drawing รูปทรงทีว่ าดจะเปน็ อสิ ระจากกัน หากออบเจ็กตใ์ ดเปลีย่ นแปลงจะไม่ ส่งผลต่อออบเจ็กต์อน่ื โดยวธิ กี ารคือ เม่อื คลกิ เลอื กรปู ทรงท่ีจะวาดแล้วให้เลือกท่ี Object Drawing รปู ทรงทวี่ าดทบั กนั การเลือกวาด Object แบบ Drawing จะท�ำ ให้รูปทรงเปน็ อิสระจากกัน

Adobe4F6lash CS6 บทที่ 3 สรา้ งชน้ิ งานจากเครอ่ื งมอื ของโปรแกรม Flash CS6 • Merge Drawing รูปทรงท่ีวาดจะมีผลกระทบต่อรูปทรงอ่ืน วิธีการคือ ไม่ต้องคลิกเลือกท่ี Object Drawing รปู ทรงท่วี าดทับกัน เม่ือย้ายรูปใดรูปหน่ึงออก จะสง่ ผลกระทบตอ่ อกี รูป การก�ำ หนดสพี น้ื และสเี สน้ กอ่ นการวาด เม่ือคลิกเลือกเคร่ืองมือ เราจะเห็นเครื่องมือเปล่ียนสี Fill Color กำ�หนดสีพ้ืนและ Stroke Color กำ�หนดเสน้ ขอบ เม่ือคลิกเลือกที่ช่องสีจะมีหน้าต่างชุดสีขึ้นมาให้เรา เลอื กสไี ดต้ ามต้องการ ดังรปู คณุ สมบัติตา่ ง ๆ ในพาเนล Properties มี รายละเอียด ดงั น้ี Stroke การกำ�หนดความหนาของเสน้ Style เลอื กลวดลายเส้น Hinting ชว่ ยลดการเบลอของเส้นตรง สว่ นโคง้ เมื่อแสดงผล Scale ความหนาของเสน้ ทส่ี มั พันธ์ กับการซูม Cap รปู แบบลายเสน้ Join Miter รูปแบบของมมุ

การสรา้ งภาพเคลื่อนไหวเบือ้ งต้น Adobe Fla4s7h CS6 สรา้ งเสน้ ตรงดว้ ยเครอ่ื งมอื Line Tool เคร่อื งมอื Line Tool เปน็ เครอื่ งมอื ทีใ่ ชใ้ นการวาดเส้นตรง และในขณะทที่ �ำ การวาดเส้นอยนู่ ั้น จะปรากฏวงกลมเลก็ ๆ ท่เี รยี กว่า Snap to Objects ท�ำ ใหส้ ามารถวาดเส้นแต่ละเสน้ เข้าหากนั จนเกดิ ความต่อเน่ืองข้ึนมาได้โดยอัตโนมัติ นอกจากนี้ เมื่อมีการวาดเส้นข้ึนมาเรียบร้อยแล้วยังสามารถ เปล่ยี นแปลงสี ขนาด และรปู รา่ งของเส้นในภายหลังไดอ้ กี ดว้ ย ขน้ั ตอนในการสร้างเส้นตรงดว้ ยเครอ่ื งมอื Line Tool สามารถทำ�ได้ตามขัน้ ตอน ดังนี้ 1. คลิกเลอื กที่ Line Tool 1 2. กำ�หนดลกั ษณะของสีและรปู แบบ 2

Adobe4F8lash CS6 บทที่ 3 สรา้ งชน้ิ งานจากเครอ่ื งมอื ของโปรแกรม Flash CS6 3. วาดรปู ตามต้องการ 3 หมายเหตุ : หากต้องการบังคับเส้นให้ทำ�มุมทีละ 45 ํ หรือ 90 ํ ให้กดคีย์ Shift ค้าง ขณะคลิกลาก และกดคยี ์ Alt สำ�หรบั การยึดจุดทเี่ ริ่มคลิกลากเปน็ จดุ กลางเส้น สรา้ งเสน้ อสิ ระดว้ ยเครอ่ื งมอื Pencil เครือ่ งมอื Pencil จะช่วยให้วาดเส้นไดอ้ ย่างอิสระเหมอื นใช้ดนิ สอวาดบนกระดาษทั่วไป 1 1. คลิกเลอื กท่ีเคร่อื งมือ Pencil

การสร้างภาพเคลอื่ นไหวเบื้องต้น Adobe Fla4s9h CS6 2. กำ�หนดลกั ษณะของสีและรูปแบบ 2 3. วาดรูปตามตอ้ งการ 3 เครื่องมือ Pencil สามารถเลือกปรับแต่งลักษณะเส้น ท่วี าด ดงั น้ี Straighten ปรับเส้นใหเ้ ป็นแนวตรง Smooth ปรบั เส้นให้โค้งมนและเรยี บ Ink ไม่มกี ารปรับเส้นใด ๆ

Adobe5F0lash CS6 บทที่ 3 สรา้ งชน้ิ งานจากเครอ่ื งมอื ของโปรแกรม Flash CS6 สรา้ งรปู ทรงเรขาคณติ สร้างรูปทรงแบบ Rectangle หรือ Rectangle Primitive การวาดรูปทรงเรขาคณิตแบบ Rectangle และ Rectangle Primitive ท้ังสองรูปแบบจะแตกต่างกันที่ Rectangle จะสามารถ ปรับแต่งความโค้งได้ก่อนการวาด Rectangle Primitive จะสามารถปรับแต่งความโค้งได้ท้ังก่อนและ หลังการวาด แต่ทั้งสองแบบมีขั้นตอนการสรา้ งเหมอื นกัน ดังนี้ 1. เลือกเครื่องมอื Rectangle หรือ Rectangle Primitive 1 2. กำ�หนดสีพน้ื และรปู แบบเส้น 2

การสร้างภาพเคล่ือนไหวเบ้ืองตน้ Adobe Fla5s1h CS6 3. กำ�หนดคา่ ความโค้งมน 3 4. คลกิ วาดรปู ตามต้องการ 4

Adobe5F2lash CS6 บทที่ 3 สรา้ งชน้ิ งานจากเครอ่ื งมอื ของโปรแกรม Flash CS6 สรา้ งรปู ทรงวงกลมหรอื วงรดี ว้ ย Oval และ Oval Primitive ทั้งสองเครื่องมือใช้วาดทั้งวงกลมและวงรีได้ทั้งคู่ แต่มีความแตกต่างกันคือ Oval จะสามารถ ดัดแปลงรูปทรงได้เฉพาะก่อนการวาด แต่ Oval Primitive จะสามารถดัดแปลงรูปทรงได้ทั้งก่อนและ หลังการวาด ซงึ่ ท้ังสองแบบจะมขี นั้ ตอนการสร้างเหมือนกนั ดังน้ี 1 1. คลกิ ทเี่ คร่ืองมือ Oval หรือ Oval Primitive 2. กำ�หนดรปู แบบสพี น้ื และเส้น 2

การสรา้ งภาพเคลอื่ นไหวเบอ้ื งตน้ Adobe Fla5s3h CS6 3. กำ�หนดค่าการแปลงรูป 3 4. วาดรูปตามต้องการ 4 การกำ�หนดค่าของรูปทรงมีรายละเอยี ด ดงั น้ี Start Angle คา่ ของมุมเรม่ิ ตน้ End Angle คา่ ของมมุ สุดท้าย Inner Radius รศั มขี องวงกลมวงใน Close Path เลือก Close Path หากตอ้ งการใหร้ ูปทรงเปน็ แบบปดิ

Adobe5F4lash CS6 บทที่ 3 สรา้ งชน้ิ งานจากเครอ่ื งมอื ของโปรแกรม Flash CS6 สรา้ งรปู ทรงอสิ ระดว้ ยเครอ่ื งมอื Pen Tool Pen Tool เป็นเคร่ืองมือที่ใช้สำ�หรับสร้างรูปทรง ที่ซับซ้อน ใช้สำ�หรับวาดเส้นตรงและเส้นโค้งโดยเส้นท่ีวาด จะเชอื่ มกนั จดุ ตอ่ จดุ Pen Tool ใชว้ าดเส้นพาธ Add Anchor Point Tool ใช้เพิ่มจุดแองเคอร์ Delete Anchor Point Tool ใช้ลบจดุ แองเคอร์ Convert Anchor Point Tool ใชเ้ ปลย่ี นชนิดจดุ แองเคอร์ จดุ แองเคอร์ (Anchor Point) เปน็ จดุ ทต่ี รงึ เส้นพาธแต่ละช่วงไวใ้ นต�ำ แหน่งตา่ ง ๆ การวาดรูปทรงท่ปี ระกอบดว้ ยเสน้ ตรงของเคร่อื งมือ Pen วธิ กี าร คอื ใหค้ ลิกสรา้ งจากจุดแองเคอร์ทีละจุดไปเรอ่ื ย ๆ เพื่อให้รูปทรงตอ่ เน่อื งจนเป็นรูปทรง 1. คลกิ เลอื กเครอื่ งมือ Pen Tool 1 2. ก�ำ หนดรูปแบบเส้น 2

การสรา้ งภาพเคล่ือนไหวเบอ้ื งต้น Adobe Fla5s5h CS6 3. คลิกวาดจากจุดเริ่มต้นเพ่ือสรา้ งจดุ แองเคอรแ์ ล้วคลกิ ต่อเนือ่ งไปยงั จุดต่าง ๆ 3 การปรบั แตง่ รปู ทรง หลังจากท่ีได้ทำ�การวาดรูปทรงแล้ว ถ้าต้องการแก้ไขปรับแต่งกส็ ามารถท�ำ ได้ โดยมีรายละเอียด ดงั นี้ การปรบั ความโค้งของรปู ทรงด้วยเครอ่ื งมอื Subselection มวี ธิ ีการ ดังนี้ 1. คลกิ เลือกท่เี ครื่องมือ Subselection 1

Adobe5F6lash CS6 บทท่ี 3 สรา้ งชน้ิ งานจากเครอ่ื งมอื ของโปรแกรม Flash CS6 2. คลิกที่เส้นขอบรูปเพือ่ แสดงจุดแองเคอร์ 2 3. คลิกลากจดุ เพ่อื ปรับเสน้ สัมผัส 3

การสร้างภาพเคลอ่ื นไหวเบ้ืองตน้ Adobe Fla5s7h CS6 การระบายสภี าพ ระบายภาพด้วยเครื่องมือ Brush Brush เป็นเครื่องมือท่ีมีลักษณะของสีคล้ายพู่กัน สามารถระบายภาพได้หลายแบบและ แสดงความหนกั เบาของลายเส้นได้ โดยมีวธิ ีการ ดงั น้ี 1. คลิกเลอื กเครอื่ งมือ Brush 1 2. กำ�หนดลกั ษณะตา่ ง ๆ ในการระบาย 2 3. คลิกลากระบายสตี ามตอ้ งการ 3

Adobe5F8lash CS6 บทที่ 3 สรา้ งชน้ิ งานจากเครอ่ื งมอื ของโปรแกรม Flash CS6 หมายเหตุ : ออปช่ันของเครื่องมือ Brush ท่ีช่วยให้เรากำ�หนดลักษณะการระบายสีได้มากขึ้น ดงั น้ี 1. สีท่เี ลอื กจะเป็นวัตถุ 1 2. การล็อกตำ�แหน่งสเี กรเดียนท์ 2 3. การระบายทบั รูปทรงเดิม มีรายละเอียด ดังน้ี - Paint Normal ระบายทบั ทงั้ เสน้ และสีพื้น - Paint Fills ระบายทับเฉพาะสพี ื้นและท่วี ่างโดยไมม่ ผี ลต่อเสน้ - Paint Behind ระบายบนพน้ื ที่วา่ งนอกรูปทรงเดิม โดยไม่ส่งผลกระทบต่อรูปทรงน้ัน - Paint Selection ระบายทับเฉพาะสีพ้ืนท่ีได้เลือกไว้ก่อนแล้ว โดยไม่กระทบเส้นและ พื้นท่วี า่ ง - Paint Inside ระบายทบั สพี นื้ เท่าน้ัน แตห่ ากพ้ืนภาพมหี ลายสีก็จะระบายเฉพาะใน ขอบเขตของสีเดียวกบั ที่คลกิ เมาสล์ งไปคร้ังแรก โดยไม่กระทบถงึ สพี นื้ อนื่ หรอื เส้นของรูปทรง 3

การสร้างภาพเคลอ่ื นไหวเบอ้ื งต้น Adobe Fla5s9h CS6 4. รูปทรงของหัวแปรง 4 5 5. ขนาดของหัวแปรง การพน่ ระบายสดี ้วยเครือ่ งมือ Spray Brush มีวิธีการ ดังนี้ 1. คลกิ เลอื กที่เครื่องมอื Spray Brush 1 2. ก�ำ หนดสี ขนาดและลักษณะอ่นื 2

Adobe6F0lash CS6 บทที่ 3 สรา้ งชน้ิ งานจากเครอ่ื งมอื ของโปรแกรม Flash CS6 3. คลิกลากพ่นสตี ามต้องการ การลบสพี ้ืนหรอื เส้น 3 การลบสีพ้นื หรือเสน้ ด้วยเคร่ืองมอื Eraser 1. คลิกเลือกทเี่ คร่อื งมือ Eraser 1 2. ก�ำ หนดรูปแบบในการลบรูปภาพ โดยมีรายละเอียด ดงั นี้ Eraser Normal ลบทงั้ เสน้ และสีพื้น Eraser Fills ลบเฉพาะสพี ื้น Eraser Lines ลบเฉพาะเส้น Eraser Selected Fills ลบเฉพาะสพี น้ื ในส่วนทเ่ี ลอื กไว้ Eraser Inside ลบสีพื้นเท่าน้ัน แต่ถ้าสีพื้นมีหลายสีจะลบเฉพาะสีท่ีคลิกเมาส์ ไปคร้ังแรกเทา่ นั้น

การสรา้ งภาพเคล่อื นไหวเบ้อื งตน้ Adobe Fla6s1h CS6 การลบด้วยเครื่องมือ Faucet เคร่อื งมือ Faucet จะทำ�ไดง้ ่ายกว่า Eraser เพราะว่าใชว้ ิธีคลกิ พืน้ ทีท่ ี่ตอ้ งการลบเพียงคร้ังเดยี ว โดยมีวธิ กี าร ดงั นี้ 1. คลิกเลอื กที่เครื่องมอื Eraser 1 2. เลือกที่ Faucet 2 3. คลิกรูปท่ีตอ้ งการลบ 3

Adobe6F2lash CS6 บทท่ี 3 สรา้ งชน้ิ งานจากเครอ่ื งมอื ของโปรแกรม Flash CS6 การเตมิ ลวดลายให้รปู ภาพ 1 เราสามารถเติมลวดลายต่าง ๆ ให้กบั สเตจได้หลายวิธี ดังตอ่ ไปน้ี ตัวอย่างการใช้เคร่ืองมอื Deco เติมลวดลายแบบ Vine Fill 1. คลกิ เลือกท่ี Deco 2 2. เลอื กที่ Vine Fill 3 3. กำ�หนดคุณสมบตั ิของ Vine Fill โดยมีรายละเอยี ด ดงั น้ี - Leaf คอื ส่วนใบ - Flower คือ ส่วนดอก - Branch Angle คอื การก�ำ หนดการหมนุ เอยี ง ของกง่ิ - Pattern Scale ปรับขนาดของลวดลาย - Segment Length ระยะห่างของดอกใบ - Animate Pattern การเลือกให้โปรแกรมสร้าง ชว่ งการเตมิ เอฟเฟก็ ตเ์ ปน็ ภาพเคลอ่ื นไหว

การสร้างภาพเคลื่อนไหวเบอ้ื งต้น Adobe Fla6s3h CS6 4. คลกิ เพื่อเตมิ ลวดลาย 4 ตวั อยา่ งการใชเ้ ครอ่ื งมอื Deco เตมิ ลวดลายแบบ Grid Fill 1 1. คลิกเลือกที่ Deco 2 2. เลอื กท่ี Grid Fill

Adobe6F4lash CS6 บทที่ 3 สรา้ งชน้ิ งานจากเครอ่ื งมอื ของโปรแกรม Flash CS6 3 3. กำ�หนดคุณสมบัติของ Grid Fill โดยมรี ายละเอียด ดงั นี้ - Fill การเติมสีโดยเลือกจากช่อง ด้านขวา - Horizontal Spacing การกำ�หนดระยะห่างในแนว นอน - Vertical Spacing การกำ�หนดระยะห่างในแนว ตง้ั - Pattern Scale การกำ�หนดขนาดจุดสีหรือ ซิมโบล 4. คลกิ เพอ่ื เติมลวดลาย 4 สรปุ ท้ายบท โปรแกรม Adobe Flash CS6 สามารถสร้างรูปภาพสำ�หรับเป็นภาพนิ่งหรือภาพเคลื่อนไหว แอนิเมชัน โดยมีเคร่ืองมือทใ่ี ช้ชว่ ยในการวาดภายในโปรแกรม Flash CS6 ได้เลย ไมว่ ่าจะเป็นสร้างเส้น ปากกาด้วยเคร่อื งมอื Pen Tool สรา้ งเสน้ ดินสอดว้ ยเครอ่ื งมอื Pencil Tool สรา้ งวงกลมดว้ ยเครอ่ื งมอื Oval Tool สรา้ งสเ่ี หลี่ยมด้วยเคร่ืองมอื Rectangle Tool และสามารถลงสภี าพที่วาดไดเ้ ลย

การสร้างภาพเคล่ือนไหวเบ้ืองต้น Adobe Fla6s5h CS6 แบบทดสอบและกิจกรรมการฝึกทกั ษะ บทท่ี 3 สร้างชน้ิ งานจากเครอื่ งมือ ของโปรแกรม Flash CS6 ตอนที่ 1 : อธบิ าย (หมายถึง การใหร้ ายละเอยี ดเพ่มิ เติม ขยายความ ถ้ามีตัวอยา่ งใหย้ กตัวอย่าง ประกอบ) 1. Object Drawing คืออะไร 2. Merge Drawing คืออะไร 3. เครอ่ื งมอื Line Tool มีหน้าที่อยา่ งไร 4. เครื่องมือ Pencil มลี ักษณะการทำ�งานอย่างไร 5. รูปทรงเรขาคณติ แบบ Rectangle และ Rectangle Primitive แตกต่างกนั อยา่ งไร 6. Pen Tool มีลกั ษณะการทำ�งานอยา่ งไร 7. Brush มคี ุณสมบตั ิในการทำ�งานอย่างไร 8. เคร่ืองมือ Faucet มลี กั ษณะการทำ�งานอยา่ งไร 9. Paint Inside มคี ณุ สมบตั ิในการระบายสแี บบใด 10. เคร่อื งมอื Pencil สามารถเลือกปรบั แตง่ ลักษณะเสน้ ทวี่ าดได้ก่แี บบ อะไรบา้ ง ตอนท่ี 2 : จงเลอื กค�ำ ตอบท่ีถูกตอ้ งทส่ี ดุ เพียงขอ้ เดียว 1. Stroke ในพาเนล Properties ใช้ส�ำ หรับท�ำ อะไร ก. ความหนาของเส้นที่สัมพนั ธ์กับการซมู ข. รปู แบบลายเส้น ค. เลือกลวดลายเส้น ง. การกำ�หนดความหนาของเสน้ 2. ถา้ ตอ้ งการใชง้ านเพ่อื เลอื กลวดลายเสน้ ตอ้ งเลือกใช้คณุ สมบตั ิใดในพาเนล Properties ก. Cap ข.Style ค. Stroke ง. Scale 3. หากตอ้ งการบงั คบั เส้นที่สรา้ งด้วย Line Tool ใหท้ ำ�มมุ ทลี ะ 45 ํ หรือ 90 ํ องศา ตอ้ งท�ำ อยา่ งไร ก. กดคีย์ Shift คา้ งขณะคลกิ ลาก ข. กดคยี ์ Alt ค้างขณะคลกิ ลาก ค. กดคยี ์ Alt + Shift คา้ งขณะคลกิ ลาก ง. กดคีย์ Ctrl คา้ งขณะคลกิ ลาก 4. ถา้ เราต้องการวาดเส้นอยา่ งอสิ ระเหมอื นใชด้ นิ สอวาดต้องใช้งานเครื่องมอื ใด ก. Line Tool ข.Pen Tool ค. Pencil Tool ง. Brush Tool

Adobe6F6lash CS6 บทที่ 3 สรา้ งชน้ิ งานจากเครอ่ื งมอื ของโปรแกรม Flash CS6 5. ถา้ ตอ้ งการปรับเสน้ ของ Pencil Tool ให้โคง้ มน 8. เมื่อทำ�การวาดรูปทรงเรียบร้อยแล้วแต่ และเรียบต้องเลือกปรบั แตง่ เส้นวาดเปน็ แบบใด ต้องการปรับแต่งความโค้งของรูปทรงควรใช้ ก. Ink เคร่อื งมือใด ข. Smooth ก. Eraser ค. Straighten ข. Spray Brush ง. Oval Primitive ค. B r u s h 6. ถ้าเราต้องการกำ�หนดของวงกลมภายในสำ�หรับ ง. Subselection การสร้างรปู ทรง Oval ต้องเลือกก�ำ หนดคา่ ใน 9. ถ้าต้องการลบเฉพาะเส้นของรูปทรงควรเลือก ข้อใด ใช้คณุ สมบัตใิ ดของ Eraser ก. Close Path ก. Eraser Lines ข. End Angle ข. Eraser Fills ค. Start Angle ค. Eraser Inside ง. Inner Radius ง. Eraser Selected Fills 7. หากต้องการสร้างรูปทรงที่ซับซ้อนสำ�หรับวาด 10. Paint Fills มคี ุณสมบตั ิอยา่ งไร เส้นตรงและเส้นโค้งและมีชุดเชื่อมต่อกันควร ก. ระบายทับเฉพาะสีพื้นและท่ีว่างโดยไม่มี ใช้เครื่องมือใด ผลตอ่ เสน้ ก. Line Tool ข. ระบายทับท้งั เส้นและสีพนื้ ข. Pen Tool ค. ระบายบนพ้ืนทว่ี ่างนอกรปู ทรงเดมิ โดย ค. Pencil Tool ไมส่ ง่ ผลกระทบตอ่ รูปทรงน้ัน ง. Brush Tool ง. ระบายทับเฉพาะสีพื้นที่ได้เลือกไว้ก่อน แลว้ โดยไมก่ ระทบเสน้ และพืน้ ที่ว่าง ตอนท่ี 3 : อธบิ ายค�ำ ศพั ท์ (หมายถงึ การให้รายละเอยี ดเพิม่ เติม ขยายความ ถา้ มตี วั อยา่ งให้ยก ตัวอย่างประกอบ) 1. Object Drawing 6. Pencil 2. Merge Drawing 7. Straighten 3. Fill Color 8. Pen Tool 4. Stroke Color 9. Brush 5. Line Tool 10. Eraser

การสรา้ งภาพเคลอื่ นไหวเบือ้ งต้น Adobe Fla6s7h CS6 ใบงานที่ 3.1 ตอนท่ี 1 ให้นักศึกษาใชเ้ ครื่องมอื Oval Tool สรา้ งรูปวงกลมแบบต่าง ๆ ใหไ้ ดผ้ ลลัพธ์ดงั ตวั อยา่ ง โดยทดลองก�ำ หนดค่า Start angle, End angle และ Inner radius เพอื่ ให้ไดว้ งกลมในรูปแบบ ตา่ ง ๆ ตามตวั อยา่ งท่กี �ำ หนดให้ ……………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………

Adobe68Flash CS6 บทที่ 3 สรา้ งชน้ิ งานจากเครอ่ื งมอื ของโปรแกรม Flash CS6 ตอนที่ 2 ให้นักศึกษาทดลองใช้เครือ่ งมือ Polystar Tool สรา้ งรปู ทรงใหไ้ ด้ผลลัพธ์ ดังตัวอยา่ ง โดยใหน้ กั ศกึ ษาทดลองก�ำ หนดคา่ ท่ี 1. เมนู Tool Setting แล้วกดปมุ่ Options 2. จะแสดงหน้าต่างส�ำ หรับก�ำ หนดคา่ ดังรูป Style มคี า่ ให้เลือก 2 แบบ คือ Polygon และ Star Number of Side คือ จำ�นวนของด้าน Star point size คือ ระยะจากจุดศูนยก์ ลางจนถึงขอบ มีค่าตงั้ แต่ 0.1 - 1.0

การสรา้ งภาพเคลอ่ื นไหวเบ้ืองต้น Adobe Fla6s9h CS6 ใบงานท่ี 3.2 ใหน้ ักศกึ ษาใชเ้ ครอื่ งมือต่าง ๆ สรา้ งรูปทรงใหไ้ ดต้ ามผลลพั ธ์ท่ีกำ�หนด ตามข้นั ตอนดังน้ี ผลลัพธ์ท่ีได้ 1. เลือกเครอ่ื งมอื Line Tool วาดเสน้ สี่เหลี่ยม ดงั รปู 2. จากน้ันใช้ Line Tool วาดเส้นต่าง ๆ เพม่ิ เติม ลวดลายให้ได้ ดงั ภาพ

Adobe70Flash CS6 บทที่ 3 สรา้ งชน้ิ งานจากเครอ่ื งมอื ของโปรแกรม Flash CS6 3. เลือกเครื่องมือ Selection Tool ดึงเส้นด้านบนให้โค้งมน รวมท้ังเส้นภายในด้วย จะได้ ผลลพั ธด์ งั รปู ด้านลา่ ง ใช้ Selection Tool ดงึ เส้นให ้ โค้งมนตามต้องการ 4. เลือกเครื่องมือ Paint Bucket Tool เพื่อเติมสีสันให้กับรูปดินสอท่ีเราวาด เลือกสีตามท่ี ตอ้ งการ เมอื่ เติมสีทต่ี ้องการแลว้ จะได้ ดนิ สอทีม่ สี ีสนั สดใส

Adobe Flash CS6 4บทท่ี การสรา้ งและเพมิ่ กลเมด็ ใหต้ วั อกั ษร Flash CS6 จุดประสงคเ์ ชงิ พฤตกิ รรม (Behavioral Objectives) หลงั จากศกึ ษาจบบทเรยี นนแี้ ลว้ นักศึกษาจะมีความสามารถดังน้ี 1. ระบุประเภทขอ้ ความในโปรแกรม Flash ได้ 2. ปฏบิ ัตกิ ารสร้างขอ้ ความประเภทตา่ ง ๆ ได้ 3. บอกวธิ ีการจดั การฟอนต์ในมูฟวี่ได้ 4. ปรับแต่งขอ้ ความดว้ ยเครือ่ งมือได้ 5. ปฏบิ ตั กิ ารใส่ลงิ คใ์ ห้กบั ขอ้ ความได้ 6. ปฏบิ ัติการแก้วรรณยุกต์ลอยได้

บทท่ี 4 CS6Adobe7F2lash CS6 บทที่ 4 การสรา้ งและเพม่ิ กลเมด็ ให้ตวั อกั ษร Flash CS6 การสรา้ งและเพม่ิ กลเมด็ ใหต้ วั อกั ษร Flash การนำ�ตัวอักษรมาประกอบกับภาพกราฟิกนั้น นอกจากจะใช้ส่ือความหมายและอธิบาย รายละเอยี ดต่าง ๆ แล้ว ยังชว่ ยเพิ่มความนา่ สนใจใหก้ บั ช้นิ งานมากขนึ้ โดยสามารถปรบั แต่งคณุ สมบตั ิ ของตัวอักษรได้หลากหลาย ไม่ว่าจะเป็นการปรับแต่งด้วยสี การเลือกใช้ฟอนต์ การจัดช่องไฟและระยะ บรรทดั การยอ่ - ขยาย การหมนุ การบิดเอน หรือสรา้ งเอฟเฟ็กตเ์ คลื่อนไหวได้เชน่ เดียวกบั ออบเจก็ ต์ ทัว่ ๆ ไป ซง่ึ มักจะพบในลกั ษณะขอ้ ความแบนเนอรบ์ นเวบ็ เพจ ขอ้ ความในโปรแกรม Flash แบง่ ออกเปน็ 3 ประเภท ได้แก่ 1. ข้อความคงที่ (Static Text) คือ ข้อความธรรมดาท่วั ไป 2. ข้อความไดนามิก (Dynamic Text) คือ ข้อความท่ีสามารถเปล่ียนแปลงได้ตามการ ประมวลผล หรือเปน็ ข้อมูลทร่ี ับมาจากการเขียนโค้ดของโปรแกรม 3. ขอ้ ความอนิ พตุ (Input Text) คอื ฟลิ ดข์ อ้ ความรบั มาจากการปอ้ นของผใู้ ชผ้ า่ นแบบฟอรม์ เช่น User Name หรอื Password การสรา้ งข้อความ เคร่อื งมือ Text Tool เป็นเครื่องมือท่ีใช้พมิ พข์ ้อความไดท้ ัง้ ในแนวนอน แนวตั้งจากซา้ ย ไปขวา และแนวตั้งจากขวาไปซ้าย โดยข้อความเหล่าน้ีสามารถปรับแต่งคุณสมบัติได้เหมือนกับ โปรแกรม Word ทว่ั ไป เชน่ การเลอื กฟอนต์ การปรบั ขนาดตวั อกั ษร และการปรบั ระยะหา่ งของบรรทดั เปน็ ตน้

การสร้างภาพเคลอื่ นไหวเบ้ืองตน้ Adobe Fla7s3h CS6 1. คลิกเลือกทเ่ี ครือ่ งมอื Text Tool 2. เลอื กประเภทขอ้ ความท่ีจะพิมพ์ 3. ปรับแตง่ ลกั ษณะขอ้ ความตามต้องการ 4. คลิกลากสร้างกรอบข้อความท่ีจะพิมพ์แล้วพิมพ์ข้อความ จากนั้นคลิกท่ีพ้ืนท่ีด้านนอกเพื่อ จบการพิมพ์ ตัวเลือกในการปรบั แต่งลกั ษณะขอ้ ความมดี ังนี้ Family ฟอนตต์ ัวอักษร Size ขนาดตวั อักษร Letter Spacing ระยะหา่ งระหว่างตัวอกั ษรโดยรวม Color สีตวั อกั ษร Auto Kern ระยะหา่ งระหว่างคูอ่ กั ษร Format การจดั ย่อหนา้ ชิดซา้ ย ก่งึ กลาง ชดิ ขวา Spacing และ Margins รูปแบบการเยือ้ งและระยะบรรทัด

Adobe7F4lash CS6 บทที่ 4 การสร้างและเพ่มิ กลเมด็ ให้ตวั อกั ษร Flash CS6 การก�ำ หนดขนาดกรอบข้อความ เมอื่ เราพิมพ์ขอ้ ความ ในบางครงั้ ขอ้ ความอาจจะยาวกว่าพน้ื ที่ กรอบขอ้ ความท่เี ราได้ก�ำ หนดเอาไว้ เรามวี ธิ จี ัดการเพือ่ ให้ขอ้ ความท่เี ราพมิ พ์มกี รอบของข้อความได้ตาม ต้องการ โดยเราสามารถคลิกลากเมาสข์ องกรอบขอ้ ความเพ่อื ขยายกรอบขอ้ ความได้ตามตอ้ งการแล้วจงึ ปลอ่ ยเมาส์ โดยมขี น้ั ตอนดงั น้ี 1. เลอื กที่เครอื่ งมอื Text Tool ท�ำ การพิมพข์ ้อความท่ตี ้องการ 1 2. เม่ือพิมพ์ข้อความเสร็จแล้วจะเห็นว่าข้อความอาจจะไม่เป็นระเบียบหรือตัดบรรทัดไม่ตรง ตามความต้องการ 3. ใหท้ ำ�การคลกิ ที่ขอ้ ความดงั รปู 3

การสร้างภาพเคลื่อนไหวเบือ้ งตน้ Adobe Fla7s5h CS6 4. น�ำ เมาส์ไปทัดตรงจดุ ของกรอบข้อความดงั รูป 4 5. ทำ�การลากเมาสป์ รบั แต่งกรอบขอ้ ความตามตอ้ งการ 5 6. เมือ่ ท�ำ การลากเสร็จแลว้ จะไดก้ รอบขอ้ ความขนาดใหมด่ งั ภาพ 6

Adobe7F6lash CS6 บทท่ี 4 การสร้างและเพ่ิมกลเมด็ ใหต้ ัวอักษร Flash CS6 การจดั การฟอนต์ในมูฟวี่ดว้ ย Embedded Fonts เป็นการฝงั ฟอนต์ไปในไฟล์ เปน็ การบันทกึ รปู แบบตวั อักษรไปกับช้นิ งานนน้ั ไวใ้ นไฟล์มูฟว่ี (.swf) ซึ่งจะมีผลทำ�ให้ไฟล์มีขนาดใหญ่ด้วย แต่สำ�หรับข้อความไดนามิกและข้อความอินพุตน้ัน โปรแกรม จะไม่ฝงั ฟอนต์ทใ่ี ช้ในไฟล์มูฟวใ่ี ห้ ขั้นตอนการ Embedded Fonts 1. เลอื กท่ีเครอ่ื งมือ Text Tool ทำ�การพิมพข์ อ้ ความ 1 2. เปลี่ยนชนิดข้อความเป็น Dynamic Text 2

การสร้างภาพเคล่ือนไหวเบ้ืองตน้ Adobe Fla7s7h CS6 3. ทำ�การคลิกที่ปุม่ Embed ทเี่ มนู CHARACTER 3 4. คลกิ ปมุ่ เคร่อื งหมาย + เพ่อื เพิ่มฟอนต์ที่เราตอ้ งการจะเพิม่ 4

Adobe7F8lash CS6 บทท่ี 4 การสรา้ งและเพมิ่ กลเม็ดให้ตัวอักษร Flash CS6 5. ทเ่ี มนู Character ranges: ทำ�การคลกิ เลือกชนิดตัวอักษรที่เราต้องการใช้ สามารถเลอื กได้ หลายชนดิ 6 5 6. ทำ�การคลิกทปี่ มุ่ OK การสร้างขอ้ ความไดนามกิ และอนิ พุต ข้อความไดนามิก (Dynamic Text) เป็นประเภทข้อความที่เป็นข้อความที่รับข้อมูลของ ตัวแปร ซ่ึงจะถูกเรียกขึ้นมาแสดงจากการเขียนคำ�ส่ัง ActionScript เช่น แสดงผลคะแนนการเล่นเกม เวลา หรือผลลัพธจ์ ากการคำ�นวณทางคณติ ศาสตร์ 1 การสรา้ งขอ้ ความไดนามกิ (Dynamic Text) 1. คลกิ เลือกท่เี ครอ่ื งมือ Text Tool

การสรา้ งภาพเคลอ่ื นไหวเบ้อื งต้น Adobe Fla7s9h CS6 2. เลอื ก Dynamic Text 2 3. กำ�หนดลักษณะต่าง ๆ ของตวั อกั ษร 4 3 4. คลกิ สรา้ งกรอบข้อความ 4

Adobe8F0lash CS6 บทท่ี 4 การสร้างและเพม่ิ กลเมด็ ให้ตัวอกั ษร Flash CS6 5. ตง้ั ชอื่ ตวั แปรท่ีใช้เกบ็ ข้อความ 5 การสรา้ งขอ้ ความอินพุต (Input Text) ขอ้ ความอนิ พุต (Input Text) เปน็ กรอบที่ให้ผใู้ ช้ปอ้ นข้อมูลลงไปเพอ่ื โต้ตอบกับมฟู ว่ี ซง่ึ ขอ้ มูลนั้น จะนำ�ไปเก็บไว้เพื่อใช้แสดงผล การคำ�นวณ หรือจัดเก็บในฐานข้อมูลบนเซิร์ฟเวอร์ต่อไป เช่น ชื่อผู้ใช้ รหัสผ่าน เปน็ ต้น 1. คลกิ เลือกท่ีเครือ่ งมอื Text Tool 1 2. เลือก Input Text 2

การสรา้ งภาพเคลือ่ นไหวเบื้องต้น Adobe Fla8s1h CS6 3. กำ�หนดลักษณะต่าง ๆ ของตวั อักษร 3 4. คลิกสร้างกรอบข้อความ 4 5. ต้ังช่ือตัวแปรทีใ่ ชเ้ ก็บขอ้ ความ 5

Adobe8F2lash CS6 บทท่ี 4 การสรา้ งและเพิม่ กลเม็ดให้ตัวอักษร Flash CS6 ปรบั แตง่ ขอ้ ความด้วยเครื่องมือ การปรับแตง่ รปู ทรงข้อความ 1 1. คลกิ เลอื กเครอื่ งมือ Free Transform 2. เลอื กท่ขี อ้ ความ 2

การสรา้ งภาพเคลอื่ นไหวเบอื้ งต้น Adobe Fla8s3h CS6 3. เลอื กลักษณะการปรับแตง่ ข้อความ 3 4. คลิกลากปรบั ข้อความ 4

Adobe8F4lash CS6 บทท่ี 4 การสร้างและเพ่มิ กลเม็ดให้ตัวอักษร Flash CS6 การแยกส่วนขอ้ ความเป็นรูปทรง การแยกข้อความออกเป็นรูปทรง เพ่ือท่ีเราจะได้แก้ไขรูปทรงข้อความได้เองตามใจชอบ หรือ ทำ�เพื่อในกรณีท่ีเราป้องกันการมีปัญหาเร่ืองฟอนต์ที่ไม่มี ในกรณีท่ีเราไปเปิดทำ�งานที่เคร่ืองอื่นท่ีไม่ใช่ เคร่ืองทีเ่ ราเคยใชง้ านแล้วไม่แน่ใจว่าเครอ่ื งน้ันมีฟอนตห์ รือไม่ 1 1. คลกิ เลือก Modify > Break Apart (จะท�ำ การแบง่ ตัวอักษรใหแ้ ยกออกจากกนั ) 2 2. คลิกเลือก Modify > Break Apart (จะทำ�การ เปลีย่ นตัวอกั ษรข้อความใหเ้ ปน็ รปู ทรง) 3. คลกิ เลอื ก Modify > Group (เพอ่ื รวมตวั อกั ษรให้ 3 เปน็ ค�ำ เวลาเคลอ่ื นยา้ ยจะไดย้ า้ ยไปเปน็ ค�ำ ) 4. ปรับแตง่ ตัวอักษรตามตอ้ งการ การทำ�ให้ขอ้ ความเคล่อื นที่ การทำ�ให้ข้อความเคล่ือนท่ี จะทำ�เพ่ือให้ข้อความมีความน่าสนใจข้ึน โดยการใช้เทคนิคง่าย ๆ คือ การปรับขนาดของกรอบข้อความในแนวนอน รว่ มกบั การสร้าง Motion Tween โดยมขี ้นั ตอนและ วธิ ีการทำ�ดงั ต่อไปนี้ 1. พมิ พข์ อ้ ความลงไปแลว้ เปลย่ี นใหเ้ ปน็ สรา้ ง Symbol แบบ Graphic คลิกเมาส์ขวาท่ี Frame 1 แล้วคลิกเลือกเมนู Create Classic Tween 1

การสร้างภาพเคลอื่ นไหวเบื้องต้น Adobe Fla8s5h CS6 2 2. สร้างคีย์เฟรมที่ Frame 10 โดยคลิกที่ Frame 10 แลว้ คลิกเลอื กเมนู Insert > Timeline > Keyframe หรอื คลิกขวาแล้วเลือก Insert Keyframe 3. ค ลิ ก ท่ี ข้ อ ค ว า ม ที่ สเตจแล้วทำ�การเลื่อนข้อความไป ทางขวา 3 4. สรา้ งคยี เ์ ฟรมท่ี Frame 20 โดยคลกิ ท่ี Frame 20 แลว้ คลกิ เลอื กเมนู Insert > Timeline > Keyframe หรือคลกิ ขวาแลว้ เลอื ก Insert Keyframe

Adobe8F6lash CS6 บทที่ 4 การสรา้ งและเพ่ิมกลเม็ดใหต้ ัวอักษร Flash CS6 5. คลิกท่ีข้อความที่สเตจแล้วทำ�การเลื่อนข้อความไปทางซ้ายไปยังตำ�แหน่งที่เดียวกับใน Frame ที่ 1 5 4 6. คลกิ Frame ท่ี 1 แลว้ กดปมุ่ Enter จะเหน็ วา่ กรอบขอ้ ความไดเ้ ลอ่ื นไปทางขวาและเลอ่ื นกลบั มาทางซา้ ยทต่ี �ำ แหนง่ เดมิ การใสล่ งิ ค์ให้กับขอ้ ความ การใสล่ ิงคใ์ ห้กบั ข้อความเพอื่ ให้ลิงคไ์ ปยังหน้าเว็บ โดยเราจะทำ�การเลือกข้อความท่ีตอ้ งการแลว้ ทำ�การพิมพล์ งิ ค์ทีต่ ้องการไปในช่อง Link โดยมีขนั้ ตอนดงั นี้ 1 2 3

การสรา้ งภาพเคลื่อนไหวเบ้ืองตน้ Adobe Fla8s7h CS6 1. พมิ พ์ขอ้ ความทีต่ อ้ งการ 2. ใส่ URL ทตี่ ้องการใหล้ ิงคไ์ ปตรงชอ่ ง Link 3. ระบุวธิ กี ารเปดิ หน้าน้ี โดยมตี วั เลือกดังน้ี - _blank ใหเ้ ปดิ เวบ็ เพจปลายทางในวินโดวส์ใหม่ - _parent ให้เปิดเว็บเพจปลายทางในเฟรมท่ีครอบมูฟว่ีปัจจุบันอยู่ (กรณีมีการใช้คำ�ส่ัง สร้างเฟรมครอบมูฟวีไ่ ว้) - _self ใหเ้ ปิดเวบ็ เพจปลายทางในเฟรมเดมิ ของมูฟวี่ - _top ใหแ้ สดงเวบ็ เพจปลายทางในวินโดวสเ์ ดิม โดยยกเลิกเฟรมที่ครอบอยูท่ ้ังหมด 4. กด Ctrl + Enter เพื่อทดสอบมูฟว่ี การแก้วรรณยุกตล์ อย การใช้ภาษาไทยใน Flash ปัญหาหนึ่งท่ีพบ คือ วรรณยุกต์ท่ีอยู่สูงกว่าปกติ ซ่ึงไม่ได้เป็น ขอ้ ผิดพลาดที่สำ�คัญ แตจ่ ะแสดงใหเ้ ห็นถงึ ความไม่ประณีตของชน้ิ งาน ดงั นน้ั เราควรปรับใหส้ วยงามโดย วิธแี กไ้ ขมีดงั นี้ 1. เลือกใช้ Device Fonts โดยขณะแสดงผล Flash Player จะปรับตำ�แหน่งวรรณยุกต์ ใหอ้ ตั โนมตั ิ 2. แยกตัวอักษร (Break Apart) ข้อความออกจากกัน แล้วทำ�การเล่ือนตำ�แหน่งวรรณยุกต์ ลงมาทลี ะตัว หรอื อาจใช้วธิ ีการใส่วรรณยกุ ต์ดว้ ยวธิ ีป้อนรหัส ดงั นี้

Adobe8F8lash CS6 บทที่ 4 การสรา้ งและเพ่ิมกลเมด็ ใหต้ ัวอกั ษร Flash CS6 1. คลิกเลือกที่เครอ่ื งมือ Text 2. คลิกท่ีช่องใกล้สระหรือวรรณยุกต์แล้วลบตัวเดิมออก กดคีย์ Alt ค้างไว้แล้วกดเลข 4 หลัก บนแปน้ พมิ พต์ ัวเลข โดยมรี ายละเอยี ดดังนี้ วรรณยุกต์ การนั ต์ ใชค้ ีย์บอร์ดภาษาไทย (TH) ใชค้ ีย์บอรด์ ภาษาองั กฤษ (EN) สระ และตัวอักษร พยญั ชนะทั่วไป พยัญชนะมีหาง พยญั ชนะทั่วไป พยัญชนะมีหาง เอก 0139 0134 0135 0130 0136 0131 โท 0140 0135 0137 0132 0138 0133 ตรี 0141 0136 0139 0134 จัตวา 0142 0137 0119 0120 การันต์ 0143 0138 0121 0122 สระอิ 0129 0149 0150 สระอี 0130 0151 สระอึ 0131 สระอือ 0132 ไมห้ นั อากาศ 0152 นคิ หิต 0153 ไม้ไต่คู้ 0154 ญ ไม่มเี ชิง 0159 ฐ ไมม่ ฐี าน 0140 สรปุ ทา้ ยบท การสรา้ งตวั อกั ษรหรอื ขอ้ ความในโปรแกรม Flash CS6 โดยสามารถใช้ Text Tool แบง่ ออกเปน็ ขอ้ ความคงท่ี (Static Text) คอื ขอ้ ความธรรมดาทว่ั ไป ขอ้ ความไดนามกิ (Dynamic Text) คอื ขอ้ ความท่ี สามารถเปลี่ยนแปลงได้ตามการประมวลผล หรือเป็นข้อมูลท่ีรับมาจากการเขียนโค้ดของโปรแกรม และ ข้อความอินพุต (Input Text) คือ ฟิลด์และข้อความหรือตัวอักษรนั้นสามารถนำ�มาตกแต่งเพ่ือเติมเป็น ภาพนิ่งหรอื ภาพเคลอ่ื นไหวแอนเิ มชันได้ และยงั สามารถน�ำ มาท�ำ เปน็ ลิงคข์ อ้ ความไปยังเว็บไซตต์ ่าง ๆ ได้ อีกด้วย

การสร้างภาพเคลื่อนไหวเบ้ืองต้น Adobe Fla8s9h CS6 แบบทดสอบและกิจกรรมการฝกึ ทักษะ บทที่ 4 การสร้างและเพิ่มกลเมด็ ใหต้ ัวอักษร Flash CS6 ตอนที่ 1 : อธิบาย (หมายถงึ การใหร้ ายละเอยี ดเพิ่มเติม ขยายความ ถา้ มีตวั อยา่ งให้ยกตัวอย่าง ประกอบ) 1. ข้อความในโปรแกรม Flash แบง่ ออกเปน็ ก่ปี ระเภท อะไรบ้าง 2. เครอ่ื งมือ Text Tool มหี น้าที่สำ�หรับใชง้ านอย่างไร 3. Embedded Fonts คอื อะไร 4. Device Fonts คอื อะไร 5. Fonts Symbols คืออะไร 6. ข้อความไดนามิก (Dynamic Text) มีลกั ษณะอย่างไร 7. ข้อความอนิ พตุ (Input Text) มีลกั ษณะอย่างไร 8. ตัวเลอื กในการปรบั แตง่ ลักษณะขอ้ ความมอี ะไรบา้ ง จงอธิบาย 9. การแกไ้ ขข้อความสามารถท�ำ ไดอ้ ยา่ งไร 10. การย้ายตำ�แหน่งข้อความสามารถท�ำ ได้อยา่ งไร ตอนท่ี 2 : จงเลอื กค�ำ ตอบทถ่ี ูกต้องทส่ี ุดเพียงขอ้ เดียว 1. ขอ้ ความรับมาจากการปอ้ นของผู้ใชผ้ ่านแบบฟอรม์ เชน่ User Name หรอื Password คือขอ้ ความ ประเภท ก. Embedded Fonts ข. Static Text ค. Dynamic Text ง. Input Text 2. ข้อความทส่ี ามารถเปลีย่ นแปลงได้ตามการประมวลผล หรือเป็นข้อมลู ทีร่ ับมาจากการเขยี นโคด้ ของ โปรแกรม คือข้อความประเภทใด ก. Embedded Fonts ข. Static Text ค. Dynamic Text ง. Input Text 3. เครอื่ งมอื ท่ใี ชพ้ มิ พข์ ้อความในโปรแกรม Adobe Flash คอื เครอ่ื งมอื ใด ก. Text Tool ข. Pencil Tool ค. Pen Tool ง. Free Transform

Adobe9F0lash CS6 บทที่ 4 การสร้างและเพม่ิ กลเมด็ ให้ตัวอกั ษร Flash CS6 4. การฝงั ฟอนตไ์ ปในไฟลโ์ ดยบนั ทกึ รูปแบบตวั อักษรไปกบั ช้นิ งานนั้นไว้ในไฟล์มูฟว่ี (.swf) ดว้ ย เป็นวิธี การจดั การกบั ฟอนตข์ องขอ้ ความแบบใด ก. Embedded Fonts ข. Device Fonts ค. Fonts Symbols ง. Dynamic Text 5. การจัดการฟอนตข์ องข้อความแบบใดทจี่ ะมีผลท�ำ ให้ไฟลม์ ีขนาดใหญ่ดว้ ย ก. Embedded Fonts ข. Device Fonts ค Fonts Symbols ง. Dynamic Text 6. การจดั การกบั ฟอนตข์ องข้อความแบบใดสามารถเรียกใช้จากไลบราร่ีของไฟล์ตน้ แบบได้ทนั ที ก. Embedded Fonts ข. Device Fonts ค. Fonts Symbols ง. Dynamic Text 7. ขอ้ ความประเภทใดทเ่ี ปน็ ขอ้ ความทร่ี บั ขอ้ มลู ของตวั แปร ซง่ึ จะถกู เรยี กขน้ึ มาแสดงจากการเขยี นค�ำ สง่ั ActionScript ก. Dynamic Text ข. Static Text ค. Fonts Symbols ง. Input Text 8. การปรบั แตง่ รปู ทรงข้อความต้องใชเ้ คร่อื งมือใด ก. Text Tool ข. Free Transform ค. Selection ง. Subselection 9. หากตอ้ งการจะทำ�การแบ่งตวั อกั ษรให้แยกออกจากกนั ต้องเลือกใชง้ านค�ำ ส่ังใด ก. Insert Keyframe ข. Create Classic Tween ค. Break Apart ง. Group 10. ถา้ เราต้องการทดสอบมฟู ว่ี (Movie) ทส่ี ร้างตอ้ งกดคยี ล์ ดั ในข้อใด ก. Ctrl + Enter ข. Alt + Enter ค. Shift + Ctrl + Enter ง. Shift + Alt + Enter ตอนท่ี 3 : อธบิ ายค�ำ ศัพท์ (หมายถงึ การใหร้ ายละเอียดเพิม่ เตมิ ขยายความ ถ้ามีตวั อย่างให้ยก ตวั อยา่ งประกอบ) 1. Static Text 6. Letter Spacing 2. Dynamic Text 7. Embedded Fonts 3. Input Text 8. Device Fonts 4. Text Tool 9. Fonts Symbols 5. Family 10. Break Apart

การสร้างภาพเคลื่อนไหวเบือ้ งตน้ Adobe Fla9s1h CS6 ใบงานท่ี 4.1 ใหน้ ักศึกษาสร้างข้อความใหไ้ ดต้ ามผลลัพธท์ กี่ �ำ หนด ดงั รูป โดยสามารถท�ำ ไดต้ ามข้นั ตอนดงั นี้ 1. เปิดไฟล์ Lesson 4 Text Effect ขึน้ มา 2. เลือกเคร่ืองมือ Text Tool 2 3. พิมพ์ข้อความให้ได้ดังรูป โดยเลือก รูปแบบตวั อกั ษร ขนาด และสตี ามตอ้ งการ 3

Adobe9F2lash CS6 บทท่ี 4 การสร้างและเพม่ิ กลเม็ดใหต้ ัวอกั ษร Flash CS6 4. คลิกท่เี มนู Filter แล้วคลิกปุม่ Add Filter 4 5. เลอื กรูปแบบ Filter เป็น Drop Shadow 5 เพม่ิ เตมิ ใหน้ กั ศกึ ษาทดลองเปลย่ี นเอฟเฟก็ ตข์ องตวั อกั ษรเปน็ รปู แบบอน่ื ๆ ซง่ึ จะใหผ้ ลลพั ธท์ แ่ี ตกตา่ งกนั

การสร้างภาพเคลื่อนไหวเบ้ืองต้น Adobe Fla9s3h CS6 ใบงานท่ี 4.2 ให้นกั ศึกษาสรา้ งความเคลื่อนไหวใหต้ วั อักษร เพอ่ื ให้ได้ผลลัพธด์ งั ตวั อย่าง โดยทำ�ตามขน้ั ตอนดงั น้ี 1. เปิดไฟล์ Lesson 4 Text Animation.fla 1