วันอังคาร, ธันวาคม 02, 2557

วิดีโอสอนใช้งานโปรแกรม Flash


สอนใช้งานโปรแกรม Flash


สอนใช้งานโปรแกรม Flash ตอนที่ 1






สอนใช้งานโปรแกรม Flash ตอนที่ 2







สอนใช้งานโปรแกรม Flash ตอนที่ 3







สอนใช้งานโปรแกรม Flash ตอนที่ 4



เทคนิคการวาดภาพและการทำ ANIMATION ด้วยโปรแกรม ADOBE FLASH


โปรแกรม Adobe Flash เป็นโปรแกรมที่ใช้สร้างสรรค์งานกราฟิก ที่ช่วยในการปรับแต่ง แก้ไข หรือออกแบบภาพ โดยทำได้ง่ายด้วยเทคนิค “ตัด เชื่อม ปรับเปลี่ยนรูปร่าง” โปรแกรม Adobe Flash มีการใช้งานโปรแกรม Adobe Flash เบื้องต้น ได้แก่ เทคนิคการวาดภาพกราฟิกส์และการ์ตูนด้วยการตัดเชื่อมปรับเปลี่ยนรูปร่าง, การสร้าง Graphic Symbol, การใช้เครื่องมือต่างๆของโปรแกรม และการสร้าง Animation ในโปรแกรม Adobe Flash ได้แก่ ภาพเคลื่อนไหวแบบ Motion Tween (แบบเคลื่อนที่), Shape Tween (แบบเปลี่ยนรูปทรง) และ Frame by Frame (แบบเฟรมต่อเฟรม)


การใช้งานโปรแกรม Adobe Flashเข้าที่โปรแกรม Adobe Flash จะปรากฏหน้าต่างของโปรแกรม


ภาพ หน้าต่างของโปรแกรม Adobe Flash



เครื่องมือโปรแกรม มีดังนี้

- แถบเครื่องมือหลัก (Main Toolbar) เป็นแถบเครื่องมือควบคุมการทำงานหลักของโปรแกรม

- แถบเครื่องมือ (Toolbox) กลุ่มเครื่องมือสร้างงานและจัดการวัตถุของโปรแกรม Flash

- Document Tab คือ ส่วนควบคุมเอกสาร

- Timeline เป็นส่วนสำคัญของโปรแกรม Flash ที่ทำหน้าต่างควบคุมการนำเสนอผลงาน

- Layer ส่วนควบคุมการสร้างชั้นงาน เพื่อให้ชิ้นงานแต่ละชิ้นมีอิสระ และสะดวกต่อการแก้ไข ปรับแต่ง

- Stage & Workspace เป็นพื้นที่ส่วนใหญ่ของหน้าต่างโปรแกรม มีลักษณะการทำงานคล้ายๆ กับเวทีการแสดง

- Panel หน้าต่างเล็กๆ ที่ทำหน้าที่แสดงคำสั่งควบคุมย่อยต่างๆ ของโปรแกรม

การวาดภาพด้วยเทคนิคตัดเชื่อมปรับเปลี่ยนรูปร่าง
ถ้าต้องการเปลี่ยนรูปทรงของภาพสามารถใช้เทคนิค Drag & Drop เพื่อทำให้รูปทรงต่างๆเป็นเป็นรูปทรงอิสระอื่นๆ ได้ตามต้องการ
โดยเริ่มต้นจากการวาดรูปทรงพื้นฐานที่ต้องการ โดยใช้เครื่องมือ Rectangle Tool
จากนั้นใช้เครื่องมือ Selection Tool แล้วนำเมาส์ไปชี้บริเวณเส้นขอบของรูปภาพ แล้วกดเมาส์ค้างไว้ แล้วลากเมาส์ตามรูปทรงที่ต้องการ
รูปจะบิดตัวตามทิศทางการลากเมาส์ ทำให้ได้รูปร่างตามที่ต้องการ
ถ้าต้องการให้เพิ่มความโค้ง สามารถทำได้โดยคลิกที่บริเวณเส้นขอบของรูปแล้วลากออกมา รูปจะหดตัวตามทิศทางการลากเมาส์ ทำให้ได้รูปร่างตามที่ต้องการ


ภาพ รูปร่างที่ใช้เทคนิคตัดเชื่อมปรับเปลี่ยนรูปร่าง


ภาพ ตัวอย่างรูปการ์ตูนที่ใช้เทคนิคตัดเชื่อมปรับเปลี่ยนรูปร่าง

การสร้าง Graphic Symbol
เริ่มต้นการสร้าง Graphics Symbol โดยเลือกคำสั่ง Insert > New Symbol…
จะปรากฏหน้าต่าง จากนั้นตั้งชื่อ Symbol ในช่อง Name และเลือกประเภทของ Symbol ซึ่งมี 3 แบบดังนี้- Graphics Symbol (ภาพนิ่ง)- Button Symbol (ปุ่มสำหรับคลิกหรือกด)- Movie Clip Symbol (ภาพเคลื่อนไหว)จากนั้นคลิกที่ปุ่ม OK
สร้าง Symbol ตามที่ต้องการจนครบทุกภาพ แล้วลาก Symbol ที่ต้องการทำภาพเคลื่อนไหวเข้ามาใน Stage

การสร้างภาพเคลื่อนไหว (Animation)
ภาพเคลื่อนไหวแบบ Frame by Frame เป็นการวาดวัตถุที่ละเฟรมเรียงต่อไปเรื่อยๆ โดยวัตถุที่นำมาสร้างจะอยู่ในรูปแบบใดก็ได้


ภาพ ตัวอย่างภาพเคลื่อนไหวแบบ Frame by Frame
ภาพเคลื่อนไหวแบบ Motion Tween เป็นการสร้างภาพเคลื่อนไหวที่กำหนดเฉพาะจุดต้นและจุดสุดท้าย



ภาพ ตัวอย่างภาพเคลื่อนไหวแบบ Motion Tween
ภาพเคลื่อนไหวแบบ Shape Tween เป็นเทคนิคการแปลงภาพจากภาพหนึ่งเป็นอีกภาพหนึ่ง




ภาพ ตัวอย่างภาพเคลื่อนไหวแบบ Shape Tween


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

อ้างอิงจากเว็บ >> http://kannikabuuis.wordpress.com

หมวดเมนูต่างๆ เบื้องต้น




อธิบาย หมวดเมนูต่างๆ เบื้องต้น

เมื่อสร้างไฟล์มาแล้วเราจะเจอหน้าตาแต่ละส่วนดังต่อไปนี้ (ศึกษาการใช้งานโปรแกรมเบื้องต้นได้ที่ เริ่มต้นใช้งานโปรแกรม)


Flash CS3









โดยเราจะแบ่งเป็น 6 ส่วนหลักๆ ซึ่งแต่ละส่วนนั้นจะถูกแบ่งออกเป็น พาเนลต่างๆ ซึ่งสามารถทำการลาก เปลี่ยนตำแหน่งได้โดยอิสระ และสามารถจัดกลุ่มในรูปแบบ tab ได้อีกด้วย โดยแต่ละส่วนหลักในตอนเริ่มต้นจะประกอบไปด้วย

1. Menu ซึ่งจะประกอบด้วยเมนูต่างๆ




File - เป็นส่วนหลักของการควบคุมเอกสารงาน ไม่ว่าจะเป็นการสร้างไฟล์ใหม่ บันทึกไฟล์ และการพลับบริชหรือส่งข้อมูลออกไปในรูปแบบต่างๆ
Edit - เป็นส่วนของการแก้ไขต่างๆ ไม่ว่าจะเป็นการแก้ไขกระบวนการ, วัตถุ, เฟรม หรือไทม์ไลน์ต่างๆ
View - เป็นส่วนของการจัดการแสดงผล ไม่ว่าจะเป็นการซูม ย่อ ขยาย แสดงไม้บรรทัด เส้นกริด เส้นไกด์เพื่อแบ่งระยะ ตาม snap เพื่อจัดตำแหน่ง และอื่นๆ
Insert - เป็นการสร้างวัตถุ หรือ เอฟเฟกต์ต่างๆ รวมถึง ซีน เฟรม และ เลเยอร์ด้วย
Modify - เป็นการแก้ไขปรับปรุง เอกสาร วัตถุ เอฟเฟกต์ต่างๆ รวมถึงการจัดหมวดหมู่ และเปลี่ยนประิเภทของวัตถุ
Text - ควบคุมตัวอักษร ขนาด style รวมถึง การสะกดคำต่างๆ
Commands - ส่วนควบคุมคำสั่งการทำงาน และ โมชั่นต่างๆในรูปแบบของโค้ด หรือ xml
Control - ควบคุมในส่วนของการทดสอบการแสดงผลการเล่นตัวอย่างของ swf
Debug - ส่วนของการทดสอบข้อผิดพลาดการเขียน ActionScript เพื่อความสะดวกในการค้นหาข้อผิดพลาด
Window - ส่วนรวมรวบพาเนลของเครื่องมือหรือเมนูต่างๆทั้งหมด โดยเลือกให้แสดงผลหรือซ่อนได้ รวมถึงการจัดตำแหน่งพาเนลให้กลับสู่ตำแหน่งปกติ
Help - รวบรวมข้อมูลช่วยเหลือต่างๆ ทั้งภายในโปรแกรม และบนเว็บไซต์ รวมถึงแสดงรายละเอียดของโปรแกรม

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



ดูเพิ่มเติม : การใช้เครื่องมือพื้นฐานต่างๆ
3. Timeline ส่วนนี้จะเป็นส่วนของการควบคุมการจัดวาง และแสดงผลของวัตถุ เป็นส่วนหลักๆในการควบคุมวัตถุบน Stage และเกี่ยวข้องกับการสร้างอนิเมชั่นและการเขียน ActionScript ส่วนหนึ่ง


4. Stage ซึ่งจะเป็นส่วนพื้นที่สำหรับการวางวัตถุต่างๆ ไม่ว่าจะเป็น เส้น ตัวอักษร ภาพ และอื่นๆ ซึ่งจะเป็นส่วนของการแสดงผลที่จะถูกนำไปแสดงในไฟล์ swf นั่นเอง


5. Properties ส่วนของพาเนล properties และ อื่นๆ ซึ่งพาเนล properties จะมีความสำคัญในการควบคุมคุณสมบัติต่างๆ และจะเปลี่ยนการแสดงผลไปตามเครื่องมือหรือวัตถุที่เลือกอยู่ ณ ขณะนั้น เพื่อไว้สำหรับปรับค่าเครื่องมือที่ใช้ หรือคุณสมบัติของวัตถุที่ถูกเลือกนั่นเอง





6. Library ส่วนทางด้านขวา นั้นเป็นส่วนของการแสดงพาเนลอื่นๆโดยทั่วไป โดยสามารถนำพาเนลใดๆมาจัดวางไว้ก็ได้ แต่พานเลที่สำคัญก็คือพาเนล library ซึ่งเป็นส่วนสำัคัญในการเก็บรวบรวมวัตถุต่างๆ ทั้งหมดที่จะถูกใช้งานเอาไว้ รวมถึงวัตถุที่ไม่ถูกใช้งานอีกด้วย

พาเนลที่สำคัญอย่างนึงสำหรับโปรแกรมแฟลชที่ขาดไม่ได้ นั่นก็คือพาเนล library




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




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

อ้างอิงจากเว็บ >> http://www.flashinw.com/forum/index.php?topic=10.0 

เริ่มต้นใช้งานโปรแกรม flash


    สำหรับเวอร์ชั่นเบื้องต้นที่เราจะเริ่มใช้งาน flash ในที่นี้ก็คือเวอร์ชั่น flash cs3 ซึ่งเป็นเวอร์ชั่นที่ผมยังคงใช้งานได้ดีอยู่แม้เวอร์ชั่น flash cs4 จะออกมาแล้วก็ตาม (แนะนำให้หาหนังสือ flash พื้นฐานการใช้งานโปรแกรมอ่านเพิ่มเติมสำหรับคนที่ยังไม่เคยใช้โปรแกรม flash เพราะผมคงไม่สามารถอธิบายทุกเมนูหมดได้ในช่วงเริ่มต้น เพราะจะทำให้เริ่มในส่วนของการเขียน actionscript ได้ช้าครับ)


สิ่งที่จะได้เรียนรู้ในบทเรียนนี้

1. การเริ่มต้นสร้างไฟล์แฟลช
2. รู้จักไฟล์ประเภทต่างๆ
3. รู้จักนามสกุลที่ถูกนำไปใช้
4. วิธีสร้างไฟล์ที่จะนำไปใช้
5. การนำไฟล์ swf ไปใช้งาน

โดยหน้าตาเริ่มต้นเมื่อเปิดโปรแกรม จะเป็นดังต่อไปนี้



โดยเริ่มต้นเราสามารถทำการสร้างไฟล์ flash ได้ 3 วิธีคือ

1. การสร้างผ่านเมนู File แล้วจึงเลือก ผ่านเมนู New



เมื่อทำการกดปุ่ม New จะมีให้เลือกสร้างไฟล์ จาก 2 หมวดดังต่อไปนี้

ทำการสร้างเอกสารประเภทต่างๆ




ทำการสร้างไฟล์จากเทมเพลตที่ได้จัดเตรียมไว้แล้ว




สำหรับอีก 2 วิธีคือ
2. การสร้างโดยกดปุ่ม Shortcuts คือ <Ctrl+N>
3. สร้างผ่านหน้าต่าง ด้านล่าง ซึ่งจะขึ้นเมื่อเปิดโปรแกรม flash




โดยวิธีที่ 3 นี้จะแบ่งออกเป็น 3 ส่วนคือ
Open Recent Item - แสดงไฟล์ล่าสุดที่ได้ทำการแก้ไข
Create New - สร้างเอกสารไฟล์ประเภทต่างๆ
Create from Template - สร้างไฟล์แฟลช จากเทมเพลตที่โปรแกรมได้เตรียมไว้ให้แล้ว

ซึ่งจะเห็นว่า สามารถเลือกสร้างไฟล์ได้เช่นเดียวกับวิธีที่ 1 แต่ถ้าเราติ๊กตรงช่อง Don't show again หน้าต่างนี้ก็จะไม่ถูกแสดงอีกเมื่อเปิดโปรแกรมในครั้งถัดไป

คำอธิบายของเอกสารต่างๆ



Flash File (ActionScript 3.0) - เริ่มต้นสร้างไฟล์แฟลชโดยใช้ actionscript เวอร์ชั่น 3.0
Flash File (AtcionScript 2.0) - เริ่มต้นสร้างไฟล์แฟลชโดยใช้ actionscript เวอร์ชั่น 2.0
Flash File (Mobile) - เริ่มต้นสร้างไฟล์แฟลชโดยใช้งานสำหรับ มือถือ (flash lite)
ActionScript File - ทำการสร้างไฟล์สำหรับเขียน actionscript ทั้ง 2.0 และ 3.0
ActionScript Communication File - ทำการสร้างไฟล์ actionscript สำหรับใช้บนเซิรฟ์เวอร์
Flash JavaScript File - ทำการสร้างไฟล์ JSFL (เหมาะสำหรับการเขียนคำสั่งเพื่อทำงานแบบอัตโนมัติเพื่อใช้งานซ้ำๆในการจัดการต่างๆ)
Flash Project - ทำการสร้างไฟล์โปรเจกต์ ซึ่งรวบรวมรายชื่อไฟล์ทั้งหมดของโปรเจกต์นั้นๆ

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

-----------------------------------
ทดลองสร้างไฟล์ flash
เมื่อเรารู้วิธีสร้างไฟล์แฟลช แล้วให้เราทดลองทำการสร้างไฟล์แฟลชดูจากวิธีใดวิธีหนึ่ง โดยทดลองกด <Ctrl+N> แล้วเลือกเอกสารประเภท Flash File (ActionScript 2.0) จะได้หน้าตาดังตัวอย่าง



ซึ่งเราจะอธิบายองค์ประกอบต่างๆในหัวข้อถัดไป แต่ตอนนี้เราจะลองทำการเซฟไฟล์แฟลช และทำการสร้างไฟล์แฟลชที่ถูกนำไปใช้จริงกันก่อน โดยทำการเซฟไฟล์แฟลชที่เพิ่งถูกสร้างขึ้น โดยเเลือกเมนู File-->Save หรือกด <Ctrl+S> เพื่อทำการเซฟเอกสาร โดยในที่นี้เซฟไฟล์ชื่อว่า testCreateFla



โดยไฟล์แฟลชจะมีนามสกุลคือ ".fla" และตอนเซฟไฟล์นั้น เราสามารถเลือกเซฟย้อนกลับไปได้อย่างน้อย 1 เวอร์ชั่น (cs3 คือเวอร์ชั่น 9 ฉะนั้นสามารถเซฟเป็นเวอร์ชั่น 8 ได้)

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

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

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


1. การสร้างไฟล์ swf ด้วยการกดทดสอบโดยการกด <Ctrl+Enter>
โดยวิธีแรกนั้น เมื่อทำการกดปุ่ม <Ctrl+Enter> จะได้ผลลัพธ์ดังต่อไปนี้





เนื่องจากเราไม่ได้ทำการวาดหรือวางอะไรลงไป จึงเห็นผลลัพธ์เป็นเพียงพื้นที่สีขาวเท่านั้น และเมื่อเราลองดูในโฟลเดอร์ที่เราได้ทำการบันทึกไฟล์ testCreateFla.fla เอาไว้ จะเห็นว่า ไฟล์ testCreateFla.swf ได้ถูกสร้างขึ้นที่เดียวกัน



2. การสร้างไฟล์ swf และอื่นๆด้วยการเลือกเมนู publish
สำหรับวิธีนี้เราสามารถเลือกสร้างไฟล์นามสกุลอื่นๆ นอกจาก swf ได้ โดยจะมี 3 เมนูดังต่อไปนี้



Publish Settings... - เลือกนามสกุลไฟล์ที่ต้องการสร้างเมื่อกด publish รวมถึงเซตค่าต่างๆ
Publish Preview - เลือกดูผลลัพธ์แต่ละประเภท โดยจะเลือกดูได้เฉพาะที่เลือกไว้ในเมนู Publish Setting เท่านั้น
Publish - ทำการสร้างไฟล์นามสกุลต่างๆทั้งหมด ตามที่ได้เลือกไว้ใน Publish Setting

ทดลองเลือกเมนู Publish Setting จะขึ้นให้เลือกเซตค่าต่างๆ




ซึ่งเมนู tab แรกจะเป็นการเซตนามสกุลของไฟล์ที่จะถูกสร้างขึ้น ประกอบด้วย
Flash (.swf) - ไฟล์แฟลช
HTML (.html) - ไฟล์ html ที่จะถูกฝังโค้ดแฟลชให้โดยอัตโนมัติ
Gif Image (.gif) - ไฟล์ภาพประเภท gif
JPEG Image (.jpg) - ไฟล์ภาพประเภท jpg
PNG Image (.png) - ไฟล์ภาพประเภท png
Window Projector (.exe) - ไฟล์โปรเจกเตอร์นามสกุล exe
Macintosh Projector - ไฟล์โปรเจกเตอร์เครื่อง Macintosh นามสกุล app
QuickTime with Flash Track (.mov) - ไฟล์วิดีโอนามสกุล mov เปิดด้วย QuickTime Player

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

ข้อควรรู้- มักมีคำถามๆอยู่บ่อยๆว่า จะนำแฟลชไปเปิดเครื่องที่ีไม่มี flash player ได้อย่างไร ถ้าเครื่องนั้นไม่ได้ลง flash player ให้กับบราวเซอร์(ปกติ flash player จะถูกลงในบราวเซอร์อย่างเช่น ie, firefox หรือ safari โดยสามารถโหลดได้ที่เว็บ adobe หรือลงโปรแกรม flash) ซึ่งปกติถ้าเราลงแฟลชที่เครื่องคอมนั้นๆ โปรแกรมจะลง flash stand alone player ให้ซึ่งสามารถใช้เปิดไฟล์นามสกุล swf ได้เลย แต่ถ้าไม่มีทั้งสองเงื่อนไข เราสามารถเลือก publish ไฟล์เป็นนามสกุล .exe สำหรับเครื่อง pc หรือ .app สำหรับเครื่อง mac ซึ่งจะสามารถเปิดได้เลยโดยไม่ต้องมี flash player หรือ flash stand alone player

สำหรับ tab ที่ 2 นั้น




จะสามารถปรับค่าได้คือ
Version ปรับเวอร์ชั่นของ Flash Player ที่จะเล่น ซึ่งบางครั้งเมื่อมีการนำงานที่เซฟจากเวอร์ชั่นเก่ามา ก็จะถูกกำหนดเป็น Flash Player เวอร์ชั่นเก่าที่ใช้ในการเล่น ซึ่งสามารถปรับได้จากช่องนี้ หากต้องการใช้ ActionScript ที่เพิ่มมาใน flash player เวอร์ชั่นใหม่ๆ
Load order จะเป็นลำดับในการคอมไพล์ไฟล์ swf รวมถึง action script โดยจะไล่ลำดับจากระดับล่างขึ้นมาระดับบน หรือจากระดับบนลงไปด้านล่าง (ลำดับในที่นี้มีทั้งลำดับการจัดเรียงของเลเยอร์ และการซ้อนกันของระดับไทม์ไลน์)
ActionScript version เป็นการตั้งค่าเวอร์ชั่นของ ActionScript ที่จะใช้ในการเขียนโปรแกรม โดยจะมีตั้งแต่เวอร์ชั่น 1-3 โดยส่วนใหญ่จะใช้ 2 หรือ 3 เป็นหลัก
Options :
- Generate size report สร้างรายงานรายการขนาดของข้อมูลในแฟลช โดยสร้างรายงานออกมาเป็นไฟล์
- Protect from import ป้องกันผู้อื่นจากการอิมพอรต์ไฟล์ swf และแปลงมันกลับไปเป็นเอกสาร FLA โดยจะให้คุณสามารถใช้รหัสในการปกป้องไฟล์ swf ของคุณได้
- Omit trace actions ยกเลิการแสดงค่าผ่านคำสั่ง trace ในไฟล์ swf โดยเมื่อเลือกคำสั่งนี้ จะทำให้ไม่มีผลลัพธ์จากคำสั่ง trace แสดงผ่านทางหน้าต่าง output
- Permit debugging ยืนยันการใช้งาน debugger (ไว้ตรวจสอบข้อผิดพลาด) และยอมให้ตรวจสอบข้อผิดพลาดระยะไกล (remote) ไฟล์ swf ได้ ซึ่ง คุณสามารถใช้รหัสในการปกป้องไฟล์ swf ของคุณได้
- Compress movie ทำการบีบอัพขนาด swf เพื่อลดขนาดของไฟล์และจำนวนครั้งในการดาวน์โหลด ซึ่งจะมีประโยนช์เมื่อไฟล์ข้อความ หรือไฟล์ ActionScript (สามารถใช้งานได้ในเวอร์ชั่น 6 หรือเวอร์ชั่นสูงกว่าเท่านั้น)
- Optimize for Flas Player 6 r65 ถ้าคุณเลือก Flash Player เป็น เวอร์ชั่น 6 จะสามารถเลือกตัวเลือกนี้ได้ ซึ่งจะช่วยเพิ่มประสิทธิภาพในการทำงานของ action script มากขึ้น
- Export hidden layers ทำการ export เลเยอร์ที่ถูกซ่อนในเอกสาร Flash ทั้งหมด ถ้าไม่เลือกตัวนี้ เลเยอร์ที่ถูกปิดดวงตาซ่อนไว้ จะไม่ถูก export ออกไปด้วย
- Export SWC ทำการ export ไฟล์ .swc ซึ่งถูกใช้สำหรับสร้างคอมโพเนนต์, ไฟล์ .swc จะบรรจุคลิปซึ่งถูกคอมไพล์แล้ว, ไฟล์คลาส ActionSCript สำหรับคอมโพเนนต์ และไฟล์อื่นๆซึ่งใช้กับคอมโพเนนต์

Password : ช่องกรอกรหัสผ่าน เมื่อเลือก Option ที่สามารถกรอกรหัสผ่านได้
Script time limit : เวลาที่ flash จะใช้ในการทำงาน action script ก่อนจะหยุดทำงานกรณีพบปัญหาอย่างเช่นสคริปต์ทำงานไม่จบ
JPEG quality : คุณภาพของไฟล์ภาพ JPEG
Audio stream : ปรับค่าเสียงประเภท stream
Audio event : ปรับค่าเสียงประเภท event
- Override sound settings ทำการยกเลิกการเซตค่า สำหรับเสียงซึ่งถูกเลือกในส่วนของเสียงในหน้าต่าง Property inspector, หากต้องการทำให้ไฟล์ swf มีขนาดเล็กลงให้เลือกตัวเลือกนี้
Note : ถ้า Override Sound Settings ไม่ถูกเลือก แฟลชจะแสกนเสียงประเภทสตรีททั้งหมดในเอกสาร (รวมถึงเสียงในวิดีโอที่ถูกอิมพอรต์เข้ามาด้วย และจะทำการพลับบริชเสียงประเภทสตรีมทั้งหมด
ที่ระดับสูง ซึ่งจะทำให้ขนาดไฟล์ใหญ่ขึ้น ถ้าเสียงประเภทสตรีมเสียงหนึ่งหรือมากกว่านั้น มีปริมาณการตั้งค่าให้ export ที่ระดับสูง
- Export device sounds สำหรับการส่งออกเสียงที่เหมาะสมสำหรับอุปกรณ์อย่างเช่นอุปกรณ์มือถือ แทนที่จะใช้เสียงเริ่มต้นจากในไลบราลี่ ให้ติ๊กเลือก Export Device Sound แทน
Local playback security : ทำการเลือกรูปแบบความปลอดภัยให้กับไฟล์ swf โดยตัวเลือก Local Access Only จะทำให้ swf นั้นสามารถกระทำได้กับเอกสารและทรัพยากรต่างๆที่อยู่บนระบบ local เท่านั้น (ไม่ได้เชื่อมกับเนตเวิรก์)
แต่ถ้าเลือก Access Network Only จะทำให้ไฟล์ swf สามารถทำงานร่วมกับไฟล์หรือทรัพยากรอื่นๆบนระบบเนตเวิรก์ได้

สำหรับ tab ที่ 3 จะเป็นการปรับค่าเกี่ยวกับ html ต่างๆ (กรณีเลือก publish html ด้วย โดยจะแปะ swf ไปให้เลย)



Template : เป็นการเลือกว่า flash นี้ใช้กับเทมเพลตประเภทไหนบ้าง เช่นมือถือ, การใช้งานแบบ full screen, การใช้งานกับคำสั่ง fscommand โดยปกติจะเลือก Flash Only เป็นหลัก แล้วจึงไปแก้ไขใน html อีกทีหนึ่ง
Dimension : เป็นการปรับโหมดการแสดงผลของ swf โดยเลือกให้แสดงผลเท่ากับขนาด Stage ที่สร้างงาน หรือ pixel ที่ำกำหนด หรือหน่วยเป็น percent
Playback : เป็นการเลือกรูปแบบการเล่นของไฟล์ swf โดยมี 4 ตัวเลือกคือ
- Paused at start เป็นการหยุดการเ่ล่นอนิเมชั่นเอาไว้ในตอนเริ่มต้น ถ้าไม่เลือก swf จะเริ่มเล่นไปตามปกติ
- Display menu จะเป็นการแสดงหรือไม่แสดงเมนู เมื่อคลิกเมาส์ขวาบน swf
- Loop เป็นการกำหนดอนิเมชั่นว่าจะวนกลับมาเล่นใหม่เมื่อจบเฟรมสุดท้ายหรือไม่
- Device font เป็นการกำหนดว่าจะใช้ฟอนต์ทั่วไปหรือไม่
Quality : เป็นการกำหนดคุณภาพที่จะแสดงผล
Window Mode : เป็นการแสดงผลของ swf โดยสามารถเลือก transparent เพื่อให้แฟลชใสมองไม่เห็นพื้นหลังได้
HTML alignment : เป็นการปรับตำแหน่ง ซ้าย ขวา บน ล่าง
Scale : เป็นรูปแบบสัดส่วนของ swf โดยเป็นแบบแสดงทั้งหมด, ไม่สนใจขนาดขอบกรอบ, ขนาดฟิตตามกรอบที่วาง swf และสุดท้่าย No scale เป็นการให้วัตถุต่างๆใน swf มีขนาดคงที่ไม่ยืดย่อ ตามขนาดของ swf ที่ถูกปรับขนาด
Flash alignment : เป็นการปรับพิกัดในแนว นอน และ แนวตั้งของ swf เมื่อมีการอาจโดนครอปขนาดเมื่อกรอบมีขนาดลดลงหรือใหญ่ขึ้น
Show warning messages : แสดงคำเตือนเมื่อมีข้อบกพร่อง อย่างเช่นการอ้างอิงของโค้ดไปยังรูปที่ไม่มีอยู่

สำหรับการสร้างไฟล์ swf และอื่นๆ วิธีที่ 2 มีเพียงเท่านี้ สำหรับวิธีถัดไปคือ

3. การสร้างไฟล์ swf และอื่นๆด้วยการเลือกเมนู Export

นอกจาก 2 วิธีที่กล่าวมาแล้ว เรายังสามารถเลือก export ข้อมูลออกไปในรูปแบบต่างๆได้อีก โดยสามารถ export เป็น movie สำหรับภาพขยับ หรือ ไฟล์ image สำหรับภาพนิ่งได้




การเลือกสร้างไฟล์ประเภท movie



ซึ่งจะเป็นทั้งวิดีโอ และภาพขยับเช่น gif animate รวมถึงภาพชนิด sequence ซึ่งจะถูกส่งออกไปจาก flash แบบ ทีละเฟรม

และเราสามารถ export ภาพต่างๆ ได้ดังนี้




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

------------------------------------------------------

Tips

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

วันจันทร์, ธันวาคม 01, 2557

การใช้เครื่องมือพื้นฐานต่างๆ (Tools)


     สำหรับหัวข้อนี้เราจะเรียนรู้เครื่องมือทั้งหมดว่าใช้ทำอะไรบ้าง โดยจะอธิบายพอสังเขป เนื่องจากว่าบางเครื่องมือนั้น อาจจะต้องมีการอ้างอิงกับพาเนลอื่นๆ อย่างเ่ช่นการปรับสีชนิด gradient เป็นต้น ซึ่งการใช้งานจริงนั้นจะได้เรียนรู้มากขึ้นในขั้นตอนของการทำ work shop หรือเมื่อพาเนลที่เกี่ยวข้องถูกอธิบายเสียก่อน

   หน้าตาของเครื่องมือแต่ละตัวแบบปรับขนาดแถบ tools แล้ว (กดลูกศร << หรือ >> เพื่อย่อหรือขยาย)




สำหรับบางเมนูที่มีลูกศรดำล่างขวา แปลว่าถ้าคลิกเมาส์ค้างไว้ จะขึ้นเครื่องมืออื่นๆในกลุ่มนั้นๆขึ้นมาอีก

คำอธิบายเครื่องมือต่างๆโดยย่อ

 1. หมวดเลือกวัตถุ (Selection)

  Selection เป็นเครื่องมือหลักในการเลือกเมนูและวัตถุต่างๆ รวมถึงการลากวาง เคลื่อนย้ายวัตถุบน Stage และแปลี่ยนแปลงรูปร่างและวัตถุต่างๆอีกด้วย


  Subselection เป็นเครื่องมือสำหรับการเลือกเมนูและวัตถุต่างๆ ได้เช่นกัน แต่การเลือกวัตถุนั้น จะแสดงเส้นจุด point ต่างๆของวัตถุนั้นๆที่สามารถปรับแต่งได้


  Free Transform ใช้ในการเปลี่ยนแปลงขนาดของวัตถุ รวมถึงการหมุน 



  Gradient Transform ใช้ในการหมุนสีที่เป็นเกรเดียนท์ และยืดย่อขยายได้
  Lasso ใช้สำหรับลากพื้นที่ครอบบริเวณที่ต้องการเลือกโดยเฉพาะได้



หมวดวาดภาพ (Drawing)



  Pen ใช้สำหรับวาดเส้นโค้งดัดต่างๆแบบต่อเนื่องหรือปรับเส้นโดยมีเส้นพาธแสดงสำหรับปรับความโค้ง


  Add Anchor Point ใช้สำหรับเพิ่มจุดเชื่อมโยงระหว่างเส้นเพื่อดัดรูปทรงได้มากขึ้น


  Delete Anchor Point ใช้สำหรับลบจุดเชื่อมโยงระหว่างเส้น


  Convert Anchor Point


  Text สำหรับพิมพ์ตัวอักษรประเภทต่างๆ
  Line สำหรับวาดเส้นตรง
  Rectangle สำหรับวาดรูปสี่เหลี่ยม


  Oval สำหรับวาดวงกลม


  Rectangle Primitive วาดสี่เหลี่ยมโดยแสดงจุด anchor สำหรับปรับรูปทรง


  Oval Primitive วาดวงกลมโดยแสดงจุด anchor สำหรับปรับรูปทรง


  PolyStar วาดรูปทรงโพลีกอน และดาว


  Pencil สำหรับใช้ลากเส้นวาดตามเมาส์ สามารถปรับขนาดเส้นและลักษณะเส้นได้


  Brush สำหรับใช้ลากเส้นวาดตามเมาส์โดยมีขนาดใหญ่กว่า Pencil และสามารถปรับขนาดหัวได้




หมวดจัดแต่งวัตถุ (Modify)



  Ink Bottle ใช้สำหรับเติม (เปลี่ยน) สีเส้น (stroke)
  Paint Bucket ใช้สำหรับเติมสีของรูปร่างที่วาด (fill)


  Eye Dropper ใช้สำหรับดูดสีของรูปร่างที่เลือกไปเทสีใส่รูปร่างอื่นๆ


  Eraser ยางลบ สำหรับลบรูปร่างที่วาดต่างๆ โดยสามารถเลือกลบเฉพาะอย่างเช่นเส้น หรือตัวเนื้อรูปร่าง




หมวดมุมมอง (View)



  Hand ใช้สำหรับจับเลื่อนสเตจ


  Zoom ใช้สำหรับซูมย่อหรือขยายสเตจ



หมวดควบคุมสี (Color)



  Stroke เปลี่ยนสีเส้นรอบรูปร่างที่วาด


  Fill เปลี่ยนสีส่วนเนื้อของรูปร่างที่วาด



  Black and white ปรับสี Stroke ให้กลายเป็นสีดำ และสี Fill ให้เป็นสีขาว


  Swap colors สลับสีระหว่าง Stroke กับ Fill

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



อ้างอิงจากเว็บ >> http://www.flashinw.com/forum/index.php?topic=22.0