Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc

The Scale Content option in advanced settings is now directly accessible from PI. When stage is resized with this option selected, content resizes in the same proportion as the stage.

PI and Document Settings dialog box contain a Link option to increase the stage dimensions proportionately. By default, the height and width properties of the stage are unlinked. If you click the Link button and enable linking, as you modify the values of either height or width properties, the value of the other property is changed proportionately.

If you select the Scale Content option, the stage dimensions are automatically linked and disabled. This is because content scaling makes sense if stage dimensions are modified proportionately.

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

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

 

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

 

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

 

 

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

 

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

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  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 แล้วคลิ้กเลือกเครื่องมือได้ตามต้องการ

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Selection Tool ( V ) คำสั่ง Selection การเลือกวัตถุ

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Subselection Tool ( A ) คำสั่ง Selection การเลือกวัตถุ

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Free Transform Tool ( Q ) ยืด หด ย่อ หรือขยายขนาดของวัตถุ

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Gradient Transform Tool ( F ) ปรับแต่งการไล่โทนสีแบบ Linear และ Radial

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Lasso Tool ( L ) คำสั่ง Selection การเลือกวัตถุ

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Pen Tool ( P ) วาดเส้นและส่วนโค้งต่าง

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Add Anchor Point Tool ( = ) เพิ่มจุดแองเคอร์

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Delete Anchor Point Tool ( - ) ลบจุดแองเคอร์

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Convert Anchor Point Tool ( C ) ปรับเปลี่ยนเส้นโค้งให้เป็นมุม

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Text Tool ( T ) พิมพ์ตัวอักษร

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Line Tool ( N ) วาดเส้นตรง

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Rectangle Tool ( R ) วาดสี่เหลี่ยม

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Oval Tool ( O ) วาดวงกลม

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Rectangle Primitive Tool ( R ) วาดสี่เหลี่ยมแบบปรับแต่งรูปทรงได้

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Oval Primitive Tool ( O ) วาดวงกลมแบบปรับแต่งรูปทรงได้

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 PolyStar Tool วาดรูปหลายเหลี่ยม/รูปดาว

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Pencil Tool ( Y ) ดินสอวาดภาพ

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Brush Tool ( B ) แปรงระบายสี

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Ink Bottle Tool ( S ) ปรับแต่งเส้นขอบของวัตถุ

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Paint Bucket Tool ( K ) เทสีพื้น

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Eyedropper Tool ( I ) คัดลอกสีที่ต้องการ

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Eraser Tool ( E ) ยางลบ

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Hand Tool ( H ) จับ Stage เลื่อนไปยังที่ต้องการ

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Zoom Tool ( M,Z ) ซูมย่อ/ขยายหน้าจอ

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Stroke color ปรับแต่งสีของเส้นขอบ

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Fill color ปรับแต่งสีของพื้น

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Black and white เปลี่ยนสี Stroke Color กับ Fill Color เป็นสีขาว/ดำ

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 Swap colors สลับสีระหว่าง Stroke Color กับ Fill Color

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
 No color เปลี่ยนสี Stroke Color ให้ไม่มีสี

 

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

 

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

 

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

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

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

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

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

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

 

มุมมองจอภาพ

 

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

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
Hand tool  เป็นเครื่องมือที่ใช้เลื่อนและปรับขนาดของ Stage ใช้วิธี Drag & Drop เพื่อเลื่อน Stage

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
Zoom tool  เป็นเครื่องมือปรับขนาดของ Stage

    • Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
      รูปแบบการย่อ  

       

    • Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc
      รูปแบบการขยาย  

 

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

 

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

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

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

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

 

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

 

Stage เป็นส่วนประกอบใดในหน้าต่างโปรแกรม animate cc

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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