งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท

ประเภทของแอนิเมชั่นใน Flash

1.Frame-by-frame คือ การสร้างคีย์เฟรมหลายคีย์เฟรมต่อกันไป โดยคงความต่อเนื่องของชิ้นงานชิ้นเดิมไว้ ทำให้มองเป็นเป็นภาพเคลื่อนไหว การสร้างภาพเคลื่อนไหวแบบเฟรมต่อเฟรม จะเหมาะกับการสร้างภาพเคลื่อนไหวที่ซับซ้อนไม่มีรูปแบบแน่นอน

2.Tween  คำว่า Tween  มาจากคำว่า “in between”  เป็นการสร้างภาพเคลื่อนไหวจากเฟรมต้นและเฟรมสุดท้าย ซึ่งโปรแกรมจะสร้างการเปลี่ยนแปลงระหว่างเฟรมให้โดยอัตโนมัติ จึงมีจะมีการสร้างเฟรมเพียง 2 เฟรม ซึ่งแบ่งออกเป็น 3 รูปแบบ

3.Inverse Kinematic (IK)  เป็นการใส่กระดูก เพื่อเชื่อมโยงกับรูปทรงที่สร้าง หรือวัตถุหลายๆ ชิ้น ให้สัมพันธ์กันด้วยโครงกระดูก โดยสามารถขยับกระดูกเหล่านี้เพื่อให้เกิดการเคลื่อนไหว เช่น การสร้างการเคลื่อนไหวเลียนแบบการเดินของคน

 

Tween

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

2.Classic Tween เป็นการทำแอนิเมชั่นเพื่อโดยเปลี่ยนคุณสมบัติของวัตถุ สี ความสว่างของสี หรือขนาดรูปร่าง เช่น ภาพที่ค่อยๆ สว่างขึ้น หรือตัวหนังสือค่อยๆ จางหายไป

3.Motion Tween เป็นการสร้างภาพเคลื่อนไหวที่มีการเปลี่ยนตำแหน่ง ขนาด หรือหมุนวัตถุตามต้องการ เป็นการสร้างภาพเคลื่อนไหว ที่มีการเคลื่อนกำหนดการเคลื่อนที่ หมุน ย่อ หรือขยายให้กับวัตถุ

การสร้างแอนิเมชั่นด้วยคำสั่ง Tween

การสร้างแอนิเมชั่นด้วยคำสั่ง Tween

  • Tween คือการสร้างภาพเคลื่อนไหวในโปรแกรม flash ช่วยสร้างการเคลื่อนไหวระหว่าง เฟรมเริ่มต้นจนถึงเฟรมสิ้นสุดที่เราได้ทำการสร้าง Tween ขึ้นมาให้โดยอัตโนมัติTween แบ่งออกเป็น 3 รูปแบบ คือ

1.Shape Tween

2.Classic Tween

3.Motion Tween

 

Shape Tween

  • เป็น Animation สำหรับการเปลี่ยนรูปทรงหนึ่งเป็นอีกรูปทรงหนึ่ง เช่น วงกลมเปลี่ยนเป็นรูปดาว รูปดาวกลายเป็นสี่เหลี่ยม หรือน้ำกลิ้งไปกลิ้งมา ฯลฯ โดยอาศัยหลักการของ Tween  ซึ่งหลักการคือ วาดรูปเริ่มต้นไว้ที่ Keyframe  แรก และไปวาดรูปปลายทางที่ keyframe ต่อไป แต่ Shape Tween นั้นจะทำได้เพียงรูปทรงพื้นฐานเท่านั้น ในรูปทรงยาก ๆ ก็จะให้การเปลี่ยนแปลงที่ไม่สวย

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท

 

Classic Tween

คือ การสร้างแอนิเมชันโดยใช้ออบเจ็กต์เพียงชิ้นเดียว จากนั้นจึงสั่งให้มีการเคลื่อนไหวออบเจ็กต์นั้น Classic Tween สามารถใช้ในการเปลี่ยนแปลงคุณสมบัติของวัตถุ จากค่าหนึ่งไปเป็นอีกค่าหนึ่งได้โดยง่าย

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท

 

Motion Tween

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

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท

 

การทำ Motion Tween

การสร้างการเคลื่อนไหวแบบนี้ สามารถกำหนดค่าต่าง ๆ ให้กับการเคลื่อนไหวได้ เช่น ปรับความเร็วในการเคลื่อนไหว กำหนดจำนวนแสดงซ้ำ ทั้งหมดนี้ให้กำหนดค่าที่ พาเนล Properties

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

       เมื่อครั้งที่โปรแกรมนี้เกิดขึ้นมา มันถูกสร้างเป็นโปรแกรมวาดภาพ ต่อมาได้ถูกพัฒนาต่อในส่วนของการสร้าง Animationและ ยิ่งเพิ่มประโยชน์ใช้สอยขึ้นอีกเมื่อเสริมด้วยความสามารถในการตอบโต้กับ ผู้ชมงาน ทำให้โปรแกรมนี้ได้รับความนิยมสูงสุดในบรรดาโปรแกรมสำหรับสร้าง Animation และ Interactive แบบ มิติในยุคปัจจุบัน
       งาน Flash นั้นแบ่งเป็น ประเภทใหญ่ๆ คือ งาน Online (งานบนเว็บไซต์ที่ต้องดูผ่านระบบอินเทอร์เน็ต) และงาน Offline (งานที่เปิดบนคอมพิวเตอร์โดยไม่ต้องต่อระบบอินเทอร์เน็ต)

 

สัญลักษณ์ไฟล์ของโปรแกรม Flash มีดังนี้

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
ไฟล์ .fla เป็นไฟล์ต้นฉบับของโปรแกรม Flash โปรแกรมที่ใช้เขียน Flash 
สามารถแก้ไขได้ และ compile ให้เป็นไฟล์ .swf ได้

 

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
ไฟล์ .swf เป็นไฟล์ที่สมบูรณ์ ถูก compiled แล้ว ไม่สามารถแก้ไขได้อีก
เครื่องคอมพิวเตอร์ที่เปิดเล่นได้ ต้องติดตั้งโปรแกรมเสริม (Flash Player) 
หรือเป็นเครื่องที่ติดตั้งโปรแกรม Flash (ซึ่งจะมี โปรแกรมเสริม Flash Player ให้แล้ว)

 

ส่วนประกอบของโปรแกรม Flash

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  1. แถบชื่อหัวเรื่อง (Title Bar) แสดงปุ่มควบคุมหลัก (Control Menu) ชื่อโปรแกรม และปุ่มควบคุมหน้าต่างโปรแกรม

  2. เมนูบาร์ (Menu Bar) แสดงรายการคำสั่งต่างๆ ของโปรแกรม

  3. ไทม์ไลน์ (Timeline) หน้าต่างแสดงเส้นควบคุมเวลาสำหรับการนำเสนอผลงาน ประกอบด้วยส่วนทำงานเกี่ยวกับ Layer และ Timeline
  4. ทูลบ็อกซ์ (Toolbox) แสดงปุ่มเครื่องมือเกี่ยวกับการวาดภาพ สร้างภาพ ซึ่งสามารถ ซ่อน แสดง ได้ด้วยการคลิกเมนู Windows > Tools

  5. แถบแก้ไข (Edit Bar) ใช้แสดงชื่อ Scene จัดการกับหน้าจอโปรแกรม ปรับขนาดมุมมองของสเตจ ซึ่งสามารถซ่อน/แสดง ได้ด้วยการคลิกเมนู Windows > Toolbars > Edit Bar

  6. สเตจ (Stage) พื้นที่ส่วนที่ใช้ในการวางวัตถุต่าง ๆ หรืออาจจะเรียกว่า "เวที" เมื่อมีการนำเสนอผลงานจะ แสดงเฉพาะวัตถุบน Stage เท่านั้น
  7. แถบคุณสมบัติ (Properties) ใช้กำหนดค่าคุณสมบัติของ สเตจและออบเจ็กต์ต่าง ๆ โดยรายละเอียดที่ปรากฏขึ้นมา จะเปลี่ยนแปลงไปตามเครื่องมือหรือออบเจ็กต์ที่กำลังคลิกเลือก สามารถซ่อน/แสดง ได้ด้วยการคลิกเมนู Windows > Properties > Properties หรือกดปุ่ม Ctrl + F3

  8. พาเนล (Panel) หน้าต่างหรือชุดคำสั่งพิเศษที่ใช้ทำงานเฉพาะด้าน เช่น พาเนล Color ใช้เลือกและผสมสี พาเนล Library ใช้จัดเก็บออบเจ็กต์ต่าง ๆ เป็นต้น ซึ่งสามารถเปิดเรียกได้ด้วยการคลิกที่เมนู Windows

เครื่องมือต่างๆ บนทูลบ็อกซ์ Toolbox

 

ทูลบ็อกซ์ (Toolbox) เป็นกล่องเก็บอุปกรณ์ที่ใช้ในการสร้าง ปรับแต่ง และแก้ไขวัตถุ เราสามรถเรียกใช้งานทูลบ็อกซ์ ได้โดยเลือกคำสั่ง Windows > Tools แล้วคลิ้กเลือกเครื่องมือได้ตามต้องการ

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

เครื่องมือต่างๆ บนทูลบ็อกซ์

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Selection Tool ( V ) คำสั่ง Selection การเลือกวัตถุ

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Subselection Tool ( A ) คำสั่ง Selection การเลือกวัตถุ

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Free Transform Tool ( Q ) ยืด หด ย่อ หรือขยายขนาดของวัตถุ

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Gradient Transform Tool ( F ) ปรับแต่งการไล่โทนสีแบบ Linear และ Radial

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Lasso Tool ( L ) คำสั่ง Selection การเลือกวัตถุ

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Pen Tool ( P ) วาดเส้นและส่วนโค้งต่าง

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Add Anchor Point Tool ( = ) เพิ่มจุดแองเคอร์

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Delete Anchor Point Tool ( - ) ลบจุดแองเคอร์

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Convert Anchor Point Tool ( C ) ปรับเปลี่ยนเส้นโค้งให้เป็นมุม

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Text Tool ( T ) พิมพ์ตัวอักษร

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Line Tool ( N ) วาดเส้นตรง

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Rectangle Tool ( R ) วาดสี่เหลี่ยม

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Oval Tool ( O ) วาดวงกลม

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Rectangle Primitive Tool ( R ) วาดสี่เหลี่ยมแบบปรับแต่งรูปทรงได้

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Oval Primitive Tool ( O ) วาดวงกลมแบบปรับแต่งรูปทรงได้

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 PolyStar Tool วาดรูปหลายเหลี่ยม/รูปดาว

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Pencil Tool ( Y ) ดินสอวาดภาพ

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Brush Tool ( B ) แปรงระบายสี

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Ink Bottle Tool ( S ) ปรับแต่งเส้นขอบของวัตถุ

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Paint Bucket Tool ( K ) เทสีพื้น

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Eyedropper Tool ( I ) คัดลอกสีที่ต้องการ

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Eraser Tool ( E ) ยางลบ

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Hand Tool ( H ) จับ Stage เลื่อนไปยังที่ต้องการ

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Zoom Tool ( M,Z ) ซูมย่อ/ขยายหน้าจอ

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Stroke color ปรับแต่งสีของเส้นขอบ

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Fill color ปรับแต่งสีของพื้น

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Black and white เปลี่ยนสี Stroke Color กับ Fill Color เป็นสีขาว/ดำ

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 Swap colors สลับสีระหว่าง Stroke Color กับ Fill Color

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
 No color เปลี่ยนสี Stroke Color ให้ไม่มีสี

 

การสร้างไฟล์งาน

 

ในการเปิดโปรแกรมจะปรากฏหน้าจอ Welcome Screen เพื่อให้คลิกเลือกรูปแบบในการสร้างไฟล์งาน จากนั้นจึงสามารถปรับขนาดของสเตจได้ตามต้องการ

 

1. คลิกเลือก Flash File (ActionScript 2.0) จากส่วนของ Create New เพื่อสร้างไฟล์งานใหม่

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. กดปุ่ม ctrl+J จากนั้นจะปรากฏไดอะล็อกบ็อกซ์ Document Properties ขึ้นมา

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. พิมพ์กำหนดขนาดความกว้าง ความสูงของพื้นที่ทำงานลงในช่อง Dimensions

4. ปรับสีพื้นหลังที่ Background color ตามต้องการ

5. กำหนดอัตราการเล่นเฟรมต่อวินาทีที่ Frame rate ค่าปกติจะอยู่ที่ 12 fps

6. คลิกปุ่ม OK เพื่อยืนยันคำสั่ง จากนั้นพื้นที่สเตจจะมีขนาดเปลี่ยนแปลงไปตามค่าที่กำหนดไว้

7. ออกแบบผลงานได้ตามต้องการ

 

มุมมองจอภาพ

 

Stage เป็นพื้นที่หลักของการสร้างงาน ดังนั้นเครื่องมือชุดแรกที่ควรทราบ ก็คือเครื่องมือในกลุ่ม View ซึ่งจะใช้ในการควบคุม Stage เป็นหลัก เช่น การย่อ/ขยาย Stage การเลื่อน Stage เป็นต้น

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
Hand tool  เป็นเครื่องมือที่ใช้เลื่อนและปรับขนาดของ Stage ใช้วิธี Drag & Drop เพื่อเลื่อน Stage

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
Zoom tool  เป็นเครื่องมือปรับขนาดของ Stage

    • งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
      รูปแบบการย่อ  

       

    • งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท
      รูปแบบการขยาย  

 

การทดสอบผลงาน

 

ภายหลังจากการออกแบบภาพเคลื่อนไหวเรียบร้อยแล้ว เราสามารถตรวจสอบผลงานที่สร้างไว้ได้ ดังนี้

  1. สามารถดูการเคลื่อนไหวของออบเจ็กต์ที่อยู่ในแต่ละเฟรมได้โดยคลิกที่เมนู Control > Play หรือกดปุ่ม Enter ออบเจ็กต์บนสเตจก็จะเคลื่อนไหวตามที่ได้ออกแบบไว้

  2. หรือคลิกเมนู Control > Test Movie หรือกดปุ่ม Ctrl + Enter ผลงานที่สร้างไว้จะปรากฏขึ้นมาในลักษณะเป็นมูฟวี่

การบันทึกไฟล์

 

ภาพที่วาดที่สร้างเสร็จแล้ว หรือปรับแต่งแก้ไขแล้ว ควรบันทึกไฟล์เก็บไว้ทุกครั้ง  การบันทึกไฟล์สามารถใช้คำสั่ง File > Save เพื่อบันทึกลงไฟล์เดิม หรือ File > Save As… เพื่อบันทึกเป็นไฟล์ใหม่ก็ได้ โดยไฟล์แฟลชจะมีนามสกุลคือ  ".fla"  และตอนเซฟไฟล์นั้น เราสามารถเลือกเซฟย้อนกลับไปได้อย่างน้อย 1 เวอร์ชั่น (cs3 คือเวอร์ชั่น 9 ฉะนั้นสามารถเซฟเป็นเวอร์ชั่น 8 ได้)

 

งาน flash แบบ offline มีกี่ประเภทอะไรบ้าง มี 3 ประเภท

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ข้อควรรู้ - เมื่อเปิดไฟล์แฟลชคนละเวอร์ชั่นกับตอนที่เซฟ เราสามารถนำแฟลชที่ถูกเซฟจากเวอร์ชั่นเก่ากว่า มาเปิดในโปรแกรมแฟลชเวอร์ชั่นใหม่กว่าได้ แต่เราไม่สามารถเอาไฟล์แฟลชที่ถูกเซฟจากเวอร์ชั่นที่ใหม่กว่าไปเปิดยังโปรแกรมแฟลชเวอร์ชั่นที่เก่ากว่าได้ (ฉะนั้นไฟล์ที่ถูกเซฟจาก cs3 จะไม่สามารถนำไปเปิดในแฟลชเวอร์ชั่น 8 ได้ ดังนั้นต้องเซฟให้ตรงกับเวอร์ชั่นที่จะนำไปเิปิด ไม่งั้นแฟลชจะเตือนว่าไม่สามารถเปิดได้)

 

แต่เนื่องจากไฟล์ .fla เป็นไฟล์ต้นฉบับ ไม่สามารถนำไปใช้งานได้ ก่อนนำไฟล์ภาพที่สร้างด้วย Flash ไปใช้งาน เราจะต้องทำการสร้างไฟล์ .swf ขึ้นมา ซึ่งจะเป็นไฟล์ที่ถูกนำไปใช้จริงทั้งงานออฟไลน์ (เปิดบนเครื่อง) และงานออนไลน์ (บนเว็บไซต์) 

โดยเราสามารถทำการสร้างได้ 3 วิธีคือ 
1) ทำการกดทดสอบโดยการกด <Ctrl+Enter> ซึงจะได้เฉพาะไฟล์ประเภท .swf เท่านั้น
2) เลือกเมนู File --> publish โดยจะได้ไฟล์ทั้งหมดตามที่เราเลือกเอาไว้
3) เลือกเมนู File --> export โดยจะได้ไฟล์ตามนามสกุลที่เราเลือก

 

 

<< Top >>

 

 

Chapter 1 | Chapter 2 | Chapter 3 | Chapter 4 | Chapter 5 | Chapter 6 | Chapter 7| Chapter 8 | Chapter 9 | Chapter 10