1. LOGO
การสร้ าง Animation ด้ วยโปรแกรม Flash

2. เทคโนโลยีของโปรแกรม Flash
Flash เป็ นโปรแกรมที่มีประสิทธิภาพสูงสาหรั บงานสร้ างภาพกราฟิ ก
ภาพเคลื่อนไหว ตลอดจนมัลติมีเดียสาหรั บเว็บ โดยเราสามารถการสร้ าง
เนือหาลักษณะต่ างๆ ซึ่งพร้ อมจะนาเสนอบนอินเทอร์ เน็ตได้ ทันที ไม่ ว่าจะ
้
เป็ น
 Logo ที่เคลื่อนไหวได้
 Navigation ซึ่งเป็ นเมนูสาหรั บนาผู้ชมเข้ าไปยังหน้ าต่ างๆ ในเว็บ
 Multimedia ที่ประกอบด้ วยภาพเคลื่อนไหวอย่ างสมจริงของตัวอักษร และกราฟิ ก
พร้ อมเสียงประกอบเช่ น แบนเนอร์ โฆษณา
 Web Application ซึ่งต้ องมีการรับข้ อมูล และการกระทาของผู้ชม เพื่อนาไป
ประมวลและแสดงผลออกมาตามเงื่อนไขที่กาหนดไว้ รวมไปถึงเกมส์ ต่างๆ

3. รูปแบบของภาพในโปรแกรม Flash
Bitmap or Raster เป็ นภาพที่เกิดจากชินส่ วนเล็กๆ ของภาพมาเรี ยงต่ อกัน
้
มีการกาหนดขนาดในหน่ วย Pixel มีสีสันสมจริงเหมือนธรรมชาติ แต่ หาก
ขยายให้ ใหญ่ ขนจะเห็นรอยหยักภายในภาพ
ึ้
Vector เป็ นภาพที่เกิดจากการคานวณทางคณิตศาสตร์ ซึ่งหากขยายให้
ใหญ่ ขนจะไม่ มีรอยหยักในภาพ และมีขนาดเล็ก นิยมใช้ ในงานบน
ึ้
อินเทอร์ เน็ต

4. ประเภทของไฟล์ Flash
ไฟล์ เอกสาร (Flash document) มีส่วนต่ อท้ ายเป็ น .fla ไฟล์ นีเ้ ป็ นไฟล์ ท่ ีเรา
บันทึกในขันตอนการสร้ างชินงาน โดยจะจัดเก็บข้ อมูลต่ างๆ ซึ่งได้ จาก
้ ้
กระบวนการออกแบบ และพัฒนาทังหมดไว้ ตามสภาพเดิม และเรา
้
สามารถเปิ ดกลับขึนมาแก้ ไขชินงานได้
้ ้
ไฟล์ มูฟวี่ (Flash movie) มีส่วนต่ อท้ ายเป็ น .swf ไฟล์ นีเ้ ป็ นผลลัพธ์ สุดท้ าย
ซึ่งได้ จากการ Publish ไฟล์ เอกสารข้ างต้ น เพื่อนาไปเผยแพร่ และแสดง
ด้ วย Flash player โดยข้ อมูลต้ นฉบับจะถูกบีบอัด ปรั บลดคุณสมบัติ
เพื่อให้ มีขนาดเล็ก ดังนันจึงไม่ สามารถเปิ ดกลับขึนมาแก้ ไขชินงาน และใน
้ ้ ้
การเผยแพร่ ไฟล์ นีเ้ ราจึงไม่ ต้องกลัวว่ าข้ อมูลต้ นฉบับในไฟล์ เอกสารจะถูก
ผู้อ่ ืนก็อปปี ้ ไปใช้ ได้

5. ความต้ องการของระบบ
CPU Pentium III 800 MHz ขึนไป
้
OS Windows XP ขึนไป้
RAM 256 MB ขึนไป ้
Harddisk 700 MB ขึนไป
้
Monitor 16 bit, 1024x768 Pixels ขึนไป
้
Software Flash Player Plug-in

6. ส่ วนประกอบหน้ าจอ
แถบชื่อ (Title Bar) แถบเมนู (Menu Bar)
ไทม์ ไลน์
พาเนล
(Timeline)
(Panel)
กล่ องเครื่ องมือ สเตจ (Stage)
(Toolbox)
คุณสมบัติ (Properties) คอนโทรลเลอร์ (Controller)

7. รูปทรง เส้ น และพื้นรูป (Shape, Stroke และ Fill)
เมื่ อเราวาดรู ปด้ วยเครื่ องมือต่ างๆ ของโปรแกรม Flash สิ่งที่เกิดขึน้
เรี ยกว่ า รู ปทรง (Shape) ซึ่งมีองค์ ประกอบ 2 ส่ วน คือ เส้ น (stroke) และ
พืนรู ป (fill) ที่สามารถแยกเป็ นอิสระออกจากกันได้
้
 เส้ น (stroke) หมายถึง ส่ วนที่เป็ นลายเส้ นรู ปทรงที่เป็ นลายเส้ น จะประกอบด้ วย
เส้ นเพียงอย่ างเดียว
 พืนรูป (fill) หมายถึง ส่ วนที่เป็ นพืนที่ภายในของรู ปทรง 2 มิติ หรือพืนที่ท่ ล้อมด้ วย
้ ้ ้ ี
เส้ น

8. การสร้ างชิ้นงาน
Line Tool เป็ นเครื่ องมือที่ใช้ ในการวาดเส้ นตรง โดยเราสามารถกาหนดสี
ความหนา และลวดลายเส้ นได้ ใน property inspector
1. คลิกเลือก Line Tool
จากทูลบ็อกซ์
2. กาหนดคุณ สมบัตของเส้ นบน
ิ
property inspector
ตามต้ องการ
3. คลิกลากเมาส์ บนสเตจ
ตามระยะและทิศทางที่ต้องการ

9. การสร้ างชิ้นงาน
วิธีใช้ เครื่ องมือเลือกสีในทูลบ็อกซ์ และ property inspector คือ Stroke
Color และ Fill Color Stroke Color ใช้ สาหรั บกาหนดสีเส้ น ส่ วน Fill Color
ใช้ กาหนดสีพนของรู ปทรง
ื้
นอกจากสีแล้ ว เส้ นยังมีคุณสมบัตอ่ ืนที่เรากาหนดได้ คือ ความหนา และ
ิ
ลวดลาย ซึ่งตัวเลือกจะปรากฎบน Property inspector เมื่อเราเลือก
เครื่ องมือวาดรู ปที่เกี่ยวกับเส้ น หรื อเมื่อเราเลือกรู ปที่วาดไว้ แล้ ว

10. การสร้ างชิ้นงาน
Pencil Tool เป็ นเครื่ องมือที่ใช้ วาดลายเส้ น และรู ปทรงแบบอิสระ
เหมือนกับที่เราใช้ ดนสอวาด รู ปลงบนกระดาษ ขันตอนมีดังนี ้
ิ ้
1. คลิกเลือก Pencil Tool จากทูลบ็อกซ์
2. กาหนดคุณ สมบัตของเส้ นบน
ิ
property inspector ตามต้ องการ
3. หากต้ องการปรับแต่ งคุณสมบัตกคลิกปุ่ ม
ิ ็
Pencil Mode แล้ วเลือก option ที่ต้องการ
4. คลิกลากเมาส์ ไปเรื่อยๆ ให้ เป็ นลวดลายที่ต้องการ
เมื่อปล่ อยเมาส์ กถือว่ าเป็ นอันสินสุดการวาด
็ ้

11. การเปลี่ยนขนาดและการหมุนชิ้นงาน
เราสามารถแปลงชินงานที่อยู่ในรู ปของกราฟิ ก
้
ข้ อความ group หรื อ Instance ได้ ด้วยเครื่ องมือ
แปลงรู ป ที่อยู่ในทูลบ็อกซ์ หรื อเลือกคาสั่ง Modify
> Transform จากเมนูบาร์ จะปรากฏเส้ นกรอบ
ขอบเขต และจุดควบคุมการเปลี่ยนแปลง ที่มุม
และด้ านทังสี่ ซึ่งจะใช้ เป็ นเครื่ องมือในการแปลง
้
รู ปต่ อไปนี ้ โดยอาจทาได้ ทังการแปลงรู ปอย่ าง
้
อิสระ หมุน ปิ ด เอียง ย่ อ และขยาย

12. การรวมกลุ่มและแยกชิ้นงาน
วิธีการรวมกลุ่มชินงานทาได้ โดยเลือกชินงาน จากนันเลือกคาสั่ง Modify
้ ้ ้
> Group หรื อกดคีย์ Ctrl+G ลักษณะการไฮไลท์ จะเปลี่ยนเป็ นกรอบสีฟา ้
และเมื่อต้ องการแยกกลุ่มก็ทาได้ โดยคาสั่ง Modify > Ungroup หรื อกด
คีย์ Ctrl+Shift+G

13. การรวมกลุ่มและแยกชิ้นงาน
วิธีแก้ ไขชินงานภายในกลุ่ม ทาได้ โดยคลิกเลือก group แล้ ว สั่ง Edit > Edit
้
Selected หรื อดับเบิลคลิกที่ group ด้ วย Arrow tool สิ่งอื่นๆ ที่ไม่ ได้ อยู่ใน
กลุ่มจะมีสีจางลง แสดงว่ าไม่ สามารถแก้ ไขได้
การวางซ้ อนชินงาน (Stacking) ในแต่ ละเลเยอร์ ชินงานจะมีการเรี ยงซ้ อนกัน
้ ้
ตามลาดับ โดยชินงานที่เกิดขึนหลังสุดจะอยู่เหนือชินงานที่เกิดขึนก่ อน หาก
้ ้ ้ ้
ต้ องการเปลี่ยนตาแหน่ งสามารถทาได้ ดังนี ้
 Modify > Arrange >Bring to Front เพื่อเลื่อนชินงานขึนมาชันบนสุด
้ ้ ้
 Modify > Arrange > Bring Forward เพื่อเลื่อนชินงานขึนมา 1 ชัน
้ ้ ้
 Modify > Arrange > Bring Backward เพื่อเลื่อนชินงานลงไปอีก 1 ชัน
้ ้
 Modify > Arrange > Send to Back เพื่อเลื่อนชินงานลงไปชันล่ างสุด
้ ้

14. การเลือกและตกแต่ งชิ้นงาน
การเลือกชินงานด้ วย Arrow Tool
้
1. คลิกบริเวณของเส้ น สีพน หรือข้ อความที่ต้องการเลือก ถ้ าต้ องการเลือกบริเวณอื่น
ื้
เพิ่มเติมให้ กดคีย์ Shift ขณะเลือกส่ วนของอื่นต่ อไป
2. ดับเบิลคลิกที่เส้ น เพื่อเลือกเส้ นทังหมดที่เชื่อมต่ อกัน
้
3. ดับเบิลคลิกที่สีพน เพื่อเลือกทังเส้ นขอบ และสี
ื้ ้
4. ลากเมาส์ ล้อมรอบบริเวณที่ต้องการเลือก ถ้ ากรอบที่ลากนันไม่ ครอบคลุมทุกส่ วน
้
เส้ นขอบและสีพนบางส่ วนจะถูกเลือก
ื้

15. การเลือกและตกแต่ งชิ้นงาน
การเลือกชินงานด้ วย Lasso Tool
้
1. เลือก Lasso Tool หรือ Polygon Mode
2. คลิกลากเมาส์ ไปรอบๆ เมื่อปล่ อยเมาส์ พนที่ด้านในจะถูกเลือก โดยถ้ าจุดที่ปล่ อย
ื้
อยู่ห่างจากจุดเริ่มต้ นโปรแกรมจะปิ ดพืนให้ เองด้ วยเส้ นตรงจากจุดสุดท้ ายไปยัง
้
จุดเริ่มต้ น

16. การเติมสีชิ้นงาน
เครื่ องมือเลือกสีในทูลบ็อกซ์ ประกอบด้ วย
Stroke Color เป็ นเครื่ องมือสาหรั บ
เลือกสีเพื่อใช้ กับเส้ นและ Fill Color เป็ นเครื่ องมือสาหรั บเลือกสีพน
ื้
ในตารางสีนีมีสี 2 ประเภท คือ
้
 สีเรียบ (soid) หมายถึง สีท่ เป็ นเนือเดียวกันโดยตลอด
ี ้
 สีเกรเดียนท์ (gradient) หมายถึง สีท่ มีการไล่ ระดับ มีนาหนักอ่ อนแก่ หรือมีความ
ี ้
เปลี่ยนแปลงของสี เช่ น
 แบบเส้ นตรง (linear) เป็ นแนวเส้ นตรง
 แบบวงกลม (radial) หมายถึง สีไล่ ระดับ
จากจุดศูนย์ กลางออกไปเป็ นรั ศมีของวงกลม

17. การเติมสีชิ้นงาน
วิธีเลือกสีอ่ ืนอยู่นอกตาราง
สีท่ ีเห็นทังหมดในตารางตามปกติเราเลือกใช้ ได้ ทันที แต่ หากต้ องการสีอ่ ืน
้
เพื่อเพิ่มเติมนอกเหนือจากนี ้ ก็คลิกปุ่ ม Color Picker เพื่อเปิ ด
ไดอะล็อกบ็อกซ์ Color ซึ่งเป็ นมาตรฐานสาหรั บใช้ ในการเลือกสีของระบบ
Windows ขึนมา ้

18. การสร้ างและปรั บแต่ งตัวอักษร
ข้ อความในโปรแกรม Flash แบ่ งออกเป็ น 3 ประเภท ได้ แก่
1. ข้ อความคงที่ (Static Text) หมายถึงข้ อความแบบปกติ ที่ไม่ มีการเปลี่ยนแปลง
2. ข้ อความไดนามิก (Dynamic Text)
คือข้ อความที่มีการเปลี่ยนแปลงเกิดขึนเรื่อยๆ
้
ตามข้ อมูลที่รับมากจากเซิร์ฟเวอร์
3. ข้ อความอินพุท (Input Text) คือ ฟิ ลด์
ข้ อความที่ใช้ รับข้ อมูลผ่ านแบบฟอร์ ม

19. การสร้ างและปรั บแต่ งตัวอักษร
กาหนดค่ าต่ างๆ ของตัวอักษร เมื่อข้ อความถูกเลือกอยู่คุณสามารถใช้ กรอบ
Properties ในการเปลี่ยนแปลงคุณสมบัตของตัวอักษรได้ เช่ น
ิ
 เลือกชื่อตัวอักษรจากรายการ
 คลิกที่ปมสามเหลี่ยมทางขวาของช่ องขนาดตัวอักษร แล้ วเลื่อนค่ าขนาดตัวอักษร
ุ่
 คลิกเลือกตัวหนาที่ปม Bold หรือตัวเอียงที่ปม Italic
ุ่ ุ่
 เปลี่ยนสีข้อความด้ วยการเลือกสี
 คลิกเลื่อนค่ าระยะห่ างระหว่ างตัวอักษรจากช่ อง Character Spacing

20. การสร้ างและปรั บแต่ งตัวอักษร
การแยกส่ วนข้ อความ (Breaking text apart)
คุณสามารถแยกส่ วนข้ อความเพื่อแยกอักษรแต่ ละตัวในกรอบเฉพาะ
หลังจากนัน ก็อาจแยกตัวอักษรแต่ ละตัวไว้ ในแต่ ละเลเยอร์ เพื่อที่จะ
้
ดัดแปลงตัวอักษรแต่ ละตัวได้ อย่ างอิสระต่ อไป ซึ่งมีขันตอนดังนี ้
้
1. คลิกเลือก Arrow Tool แล้ วคลิกที่กรอบข้ อความ
2. เลือกคาสั่ง Modify > Break Apart เพื่อแยกตัวอักษรแต่ ละตัวให้ อยู่ในแต่ ละกรอบ
ข้ อความ โดยตัวอักษรนันยังคงอยู่ในตาแหน่ งเดิม
้
3. เลือกคา สั่ง Modify > Break Apart อีกครังหนึ่งเพื่อเปลี่ยนตัวอักษรให้ เป็ นรูปทรง
้
บนสเตจ จากนันก็จะสามารถแก้ ไขตัวอักษรในลักษณะเดียวกันกับรู ปทรง
้

21. Symbol และ Instance
ซิมโบล (Symbol) คือ กราฟิ ก ปุ่ ม หรื อมูฟวี่คลิปที่เราสร้ างขึนมาเป็ น
้
ต้ นแบบ ในครั งแรก จากนันก็จะสามารถนาไปใช้ ได้ อย่ างไม่ จากัดตลอด
้ ้
ในมูฟวี่เดียวกัน และมูฟวี่อ่ ืนๆ ซิมโบลหนึ่งๆ อาจรวมถึงอาร์ ตเวิร์คที่นา
เข้ ามาจากโปรแกรมอื่น ทุกซิมโบลที่สร้ างขึนจะเป็ นส่ วนหนึ่งในไลบรารี
้
ของไฟล์ ปัจจุบัน
อินสแตนซ์ (Instance) คือ สาเนาของซิมโบลที่มีอยู่บนสเตจหรื อซ้ อนอยู่
ภายในซิมโบลอื่น อินสแตนซ์ อาจมีสี ขนาดและหน้ าที่ แตกต่ างจากซิ
มโบลที่เป็ นต้ นฉบับได้ การแก้ ไขซิมโบลจะมีผลให้ เกิดความเปลี่ยนแปลง
กับอินสแตนซ์ ทังหมดที่สาเนาไปจากซิมโบล
้

22. การสร้ าง Symbol
การสร้ างซิมโบลสามารถทาได้ 2 วิธี คือการแปลงจากส่ วนประกอบที่เลือกไว้
หรื อสร้ างซิมโบลเปล่ าขึนมาใหม่ แล้ วใส่ เนือหาเข้ าไป
้ ้
วิธีแปลงส่ วนประกอบที่เลือกไว้ ให้ เป็ นซิมโบล
1. เลือกส่ วนประกอบ ที่อยู่บนสเตจ อาจเป็ นสิ่งเดียว หรื อหลายสิ่งก็ได้
2. ทาตามวิธีการใดวิธีการหนึ่งต่ อไปนี ้
 เลือกคาสั่ง Insert > Convert to Symbol หรื อกดคีย์ F8
 ลากสิ่งที่เลือกไว้ เข้ าไปในพาเนลไลบรารี
 คลิกขวา แล้ วเลือก Convert to
Symbol จากเมนูท่ ปรากฏขึน
ี ้

23. การสร้ าง Symbol
วิธีสร้ างซิมโบลขึนมาใหม่
้
1. เลือกทาตามวิธีการใดวิธีการหนึ่งต่ อไปนี ้
 เลือกคาสั่ง Insert > New Symbol
 คลิกปุ่ ม New Symbol
 เลือก New Symbol จากออฟชั่นเมนูท่ มุมขวาบนของพาเนลไลบรารี
ี
2. ในกรอบ Create New Symbol ให้ ใส่ ช่ ือ และเลือกพฤติกรรมในช่ อง Behavior
3. คลิกปุ่ ม OK ในขันนี ้ โปรแกรมจะเพิ่มซิมโบลเข้ าไปในไลบรารี พร้ อมกับเปลี่ยน
้
เข้ าสู่การทางานในโหมดแก้ ไขซิมโบล ซึ่งสังเกตได้ จากชื่อของซิมโบล

24. การสร้ าง Symbol
ไลบรารี (Library) คือ ส่ วนที่โปรแกรมใช้ จัดเก็บซิมโบลที่เราสร้ างขึน
้
ภายในมูฟวี่หรื อนาเข้ ามาจากมูฟวี่ รวมทังใช้ เก็บรู ปภาพบิทแมพ ไฟล์
้
เสียง และไฟล์ วดีโอ ที่เรานาเข้ ามาจากภายนอก
ิ
การสร้ างอินสแตนซ์
1. เปิ ดพาเนลไลบรารี
2. เลือกซิมโบลที่ต้องการใช้
3. ลากซิมโบลไปวางบนสเตจ โดยอาจ
คลิกที่ภาพตัวอย่ างหรือที่ช่ ือของซิมโบลก็ได้

25. Timeline, Layer และ Frame
ไทม์ ไลน์ (Timeline) เป็ นเครื่ องมือที่ใช้ ในการสร้ างภาพเคลื่อนไหว โดย
ประกอบด้ วย 2 ส่ วนหลักคือ เลเยอร์ (Layer) และเฟรม (Frame) เลเยอร์
นันเปรี ยบเสมือนเป็ นแผ่ นใส ที่เราใช้ จัดวางวัตถุยังคงมีความเป็ นอิสระต่ อ
้
กัน ส่ วนเฟรมเป็ นการแบ่ งภาพเคลื่อนไหวออกเป็ นขันตอนย่ อยๆ
้
เหมือนกับเป็ นภาพนิ่งหรื อฟิ ล์ มภาพยนตร์ แต่ ละภาพ ซึ่งเมื่อนาหลายๆ
เฟรมมาแสดงอย่ างต่ อเนื่อง จะทาให้ เห็นเป็ นภาพเคลื่อนไหวที่สมบูรณ์

26. Timeline, Layer และ Frame
เลเยอร์ (Layer) เปรี ยบเสมือนแผ่ นใสที่เรี ยงซ้ อนๆ กันอยู่เมื่อเราวาดรู ป
หรื อวางออบเจ็คตกไปบนแผ่ นใสแต่ ละแผ่ นหากรู ปอยู่ตรงตาแหน่ ง
เดียวกันเราจะมองเห็นเฉพาะรู ปที่ซ้อนอยู่ด้านบน ยกเว้ นบริเวณที่แผ่ นใส่
ด้ านบนไม่ มีรูปจึงจะสามารถมองผ่ านลงไปเห็นรู ปที่อยู่ข้างล่ างได้
ทุกครั งที่เปิ ดไฟล์ มูฟวี่ใหม่ Flash จะสร้ างเลเยอร์
้
แรกมาให้ ในชื่อว่ า Layer 1 ซึ่งเราสามารถเปลี่ยน
แปลงชื่อนีได้ ภายหลัง นอกจากนันเรายังสามารถ
้ ้
เพิ่ม ลบ เปลี่ยนซ่ อน ล็อคไม่ ให้ ถูกแก้ ไขได้ เพื่อ
ช่ วยในการวาด และปรั บแต่ งรู ปทรง และสร้ างเลเยอร์ หน้ ากาก เพื่อช่ วย
สร้ างเอฟเฟ็ คพิเศษได้

27. Timeline, Layer และ Frame
คีย์เฟรม (keyframe) คือ เฟรมที่เราใช้ กาหนดการเปลี่ยนแปลงเนือหา
้
ของมูฟวี่ แต่ ละขันตอน ในการสร้ างภาพเคลื่อนไหวแบบเฟรมต่ อเฟรม
้
ทุกๆ เฟรมจะเป็ นคีย์เฟรม ซึ่งเราต้ องกาหนดรายละเอียดการเคลื่อนไหว
ของตัวละครทุกๆ จังหวะลงไป แต่ ในการสร้ างภาพเคลื่อนไหวแบบทวีน
เราจะสร้ างคีย์เฟรมเฉพาะจังหวะที่เป็ นจุดสาคัญและใส่ เนือหาลงไป ส่ วน
้
เฟรมระหว่ างกลางซึ่งแสดงการเคลื่อนไหวในขันตอนย่ อยๆ โปรแกรม
้
Flash จะสร้ างให้ โดยอัตโนมัติ

28. Timeline, Layer และ Frame
ช่ องเฟรมแต่ ละช่ องบนไทม์ ไลน์ จะมีลักษณะแตกต่ างกัน เพื่อบอกถึง
ประเภทหรื อเนือหาของเฟรมนัน
้ ้
 Motion Tween แสดงด้ วยจุดดาที่คีย์เฟรมส่ วนเฟรมระหว่ างนันจะแสดง
้
ลูกศรสีดาบนพืนสีม่วง
้
 Shape Tween แสดงด้ วยจุดดาที่คีย์เฟรมส่ วนเฟรมระหว่ างนันจะแสดง
้
ลูกศรสีดาบนพืนสีเขียว
้
 เส้ นประ แสดงถึงภาพเคลื่อนไหวที่ไม่ สมบูรณ์
 คีย์เฟรมเดี่ยว แสดงด้ วยจุดสีดา เฟรมสีเทาอ่ อนหลังจากคีย์เฟรม
ประกอบด้ วยเนือหาที่ไม่ เปลี่ยนแปลง กรอบสี่เหลี่ยมใสแสดงตาแหน่ ง
้
สุดท้ ายของ เฟรม
 ตัวอักษร a ขนาดเล็ก แสดงถึงเฟรมที่มีการกาหนดแอ็คชั่นไว้ ในพาแนล
Action

29. การจัดการภาพเคลื่อนไหวด้ วย Movie และ Scene
คุณสามารถสร้ างภาพเคลื่อนไหวใน Flash ด้ วยการเปลี่ยนเนือหาในเฟรมที่
้
ต่ อเนื่องกัน คุณสามารถทาให้ ออบเจ็คเคลื่อนที่ผ่านสเตจ เพิ่มหรื อลดขนาด
หมุน เปลี่ยนสีค่อยๆ ปรากฏขึน หรื อเปลี่ยนแปลงรู ปร่ าง การเปลี่ยนแปลงที่
้
เกิดขึนเอง อาจเป็ นไปอย่ างอิสระ หรื อเกิดขึนพร้ อมๆ กัน การเปลี่ยนแปลงอื่นก็
้ ้
ได้
ใน Flash มีวิธีการสร้ างภาพเคลื่อนไหวได้ 2 แบบได้ แก่ แบบทวีน (tween
animation) และแบบเฟรมต่ อเฟรม (frame-by-frame animation) ในการ
เคลื่อนไหวแบบทวีนนันคุณเพียงแต่ สร้ างเฟรมเริ่มต้ น และเฟรมสุดท้ ายแล้ วให้
้
โปรแกรมจัดการสร้ างเฟรมระหว่ างกลางขึนเองพร้ อมกับความสามารถในการ
้
เปลี่ยนแปลงลักษณะต่ างๆของออบเจ็คอย่ างค่ อยเป็ นค่ อยไป จากเฟรมแรก
จนถึงเฟรมสุดท้ าย เพื่อให้ เกิดลักษณะการเคลื่อนไหว

30. การสร้ างภาพเคลื่อนไหวแบบ Frame by Frame
1. คลิกที่ช่ ือเลเยอร์ เพื่อเลือกเลเยอร์ ท่ ีต้องการพร้ อมกับเลือกเฟรมที่จะให้
เป็ นจุดเริ่มต้ นของการเคลื่อนไหว
2. ถ้ าเฟรมนันไม่ ใช่ คีย์เฟรม ให้ เลือกคาสั่ง Insert > Keyframe ก่ อน
้
3. สร้ างชินงานสาหรั บเฟรมแรก โดยคุณสามารถใช้ เครื่ องมือวาด Paste
้
กราฟิ กจาก Clipboard หรื ออิมพอร์ ทไฟล์ เข้ ามา
4. คลิกเฟรมถัดไปทางด้ านขวา แล้ วเลือก คาสั่ง Insert > Keyframe เพื่อสร้ าง
คีย์เฟรมใหม่ ท่ ีมีเนือหาเหมือนกับคีย์เฟรมที่ผ่านมา
้
5. ดัดแปลงเนือหาภายในเฟรมบนสเตจ เพื่อสร้ างเนือหาที่แตกต่ างไป
้ ้
เล็กน้ อยในการเคลื่อนไหว
6. ทาซาขันตอนที่ 4 และ 5 เพื่อสร้ างการเคลื่อนไหวจนครบ
้ ้

31. การสร้ างภาพเคลื่อนไหวแบบ Frame by Frame
7. ทดสอบการเคลื่อนไหวโดยกดคีย์ Enter หรื อเลือก Control > Play แล้ วคลิก
ปุ่ ม Play บน Controller

32. การสร้ างภาพเคลื่อนไหวแบบ Motion Tween
1. คลิกที่ช่ ือเลเยอร์ เพื่อเลือกเลเยอร์ ท่ ีต้องการพร้ อมกับเลือกคีย์เฟรมเปล่ า
ในตาแหน่ งที่จะให้ เป็ นจุดเริ่มต้ นของการเคลื่อนไหว ถ้ าเป็ นการเปิ ดไฟล์
ขึนมาใหม่ โปรแกรมจะสร้ างเลเยอร์ พร้ อมกับคีย์เฟรมเปล่ าที่เฟรมแรก
้
ให้ อยู่แล้ ว
2. สร้ างเนือหาในเฟรมแรกด้ วยการ
้
 สร้ างกราฟิ กออบเจ็คด้ วยเครื่องมือ Pen,Oval,Pencil หรือ Brush แล้ วแปลงให้ เป็ น
ซิมโบล
 สร้ างอินสแตนซ์ กรุ๊ ป หรือข้ อความบนสเตจ
 ลากอินสแตนซ์ ของซิมโบลจากพาเนล Library

33. การสร้ างภาพเคลื่อนไหวแบบ Motion Tween
3. สร้ างคีย์เฟรมที่ 2 ในตาแหน่ งที่ต้องการให้ การเคลื่อนไหวจบ
4. เปลี่ยนแปลงคุณสมบัตของอินสแตนซ์ กรุ๊ ปและข้ อความในคีย์เฟรมที่ 2
ิ
ด้ วยการ
 ย้ ายตาแหน่ ง
 เปลี่ยนขนาด หมุน หรือบิด
 เปลี่ยนสี (เฉพาะกับอินสแตนซ์ และข้ อความ)

34. การสร้ างภาพเคลื่อนไหวแบบ Motion Tween
5. คลิกที่เฟรมใดๆ ระหว่ างคีย์เฟรมทังสอง
้
6. ในกรอบ Properties เลือกการ Tween แบบMotion ถ้ ามีการเปลี่ยนแปลง
ขนาดให้ เลือกออปชั่น Scale ด้ วย
7. ทดสอบการเคลื่อนไหวโดยกดคีย์ Enter หรื อเลือก Control > Play แล้ วคลิก
ปุ่ ม Play บน Controller

35. การสร้ าง Mask Layer
1. เลือกหรื อสร้ างเลเยอร์ ท่ ีประกอบด้ วยออบเจ็คซึ่งจะปรากฏภายใต้ ส่ งปิ ดบัง
ิ
2. ขณะที่เลือกเลเยอร์ อยู่ให้ ส่ ัง Insert > Layer เพื่อสร้ างเลเยอร์ ใหม่ เหนือเล
เยอร์ ท่ ีผ่านมา
3. วางรู ปทรงที่มีสีพืน ข้ อความ หรื ออินสแตนซ์ ของกราฟิ กซิมโบล บน mask
้
layer ในชัน mask layer โปรแกรมจะไม่ สนใจภาพ สี ความโปร่ งใส สี หรื อ
้
สไตล์ ของเส้ น บริเวณที่เป็ นสีพนจะเปลี่ยนเป็ นโปร่ งใส ขณะที่บริเวณที่ไม่ มี
ื้
สีจะเปลี่ยนเป็ นทึบ
4. คลิกขวาที่ช่ ือของ mask layer บนไทม์ ไลน์ แล้ วเลือก Mask จากเมนูท่ ี
ปรากฏเลเยอร์ นีจะถูกแปลงเป็ น mask layer ซึ่งแสดงด้ วยไอคอนสา รั บ
้
mask layer เลเยอร์ ท่ ีอยู่ใต้ ลงมา 1 ชันจะถูกลิงค์ กับเลเยอร์ นี ้
้

36. การสร้ าง Mask Layer
การเพิ่มชันเลเยอร์ ของเนือหาภายใต้ ชัน mask layer ให้ เลือกทาดังนี ้
้ ้ ้
 ลากเลเยอร์ นันไปไว้ ใต้ ชัน mask layer
้ ้
 สร้ างเลเยอร์ ใหม่ ภายใต้ ชัน mask layer
้
 เลือก Modify > Layer แล้ วเลือก Masked ในกรอบ Layer Properties
ส่ วนการยกเลิกการลิงค์ ของเลเยอร์ จาก mask layer ก็ทาได้ โดยลาก
เลเยอร์ นันไปอยู่เหนือชัน mask layer หรื อเลือก Normal ในกรอบ Layer
้ ้
Properties

37. การสร้ าง Mask Layer

38. การสร้ าง Guide Layer
1. สร้ างภาพเคลื่อนไหวแบบ motion tween ตามขันตอนที่ผ่านมา ถ้ ามีการ
้
เลือก Orient to path เพื่อยึดเส้ นฐานขององค์ ประกอบเข้ ากับ motion path
และถ้ าเลือกSnap จุด registration ของออบเจ็คจะยึดติดกับเส้ นทางด้ วย
2. เลือกเลเยอร์ ท่ ีประกอบด้ วยภาพเคลื่อนไหวแล้ วเลือก Insert > Motion
Guide หรื อคลิกทีปุ่ม Add Motion Guide ที่ด้านล่ างของกรอบไทม์ ไลน์
โปรแกรมจะสร้ างเลเยอร์ ใหม่ อยู่เหนือเลเยอร์ ท่ เลือกไว้
ี

39. การสร้ าง Guide Layer
3. ใช้ เครื่ องมือ Pen, Pencil Circle, Rectangle หรื อ Brush tool วาดเส้ นทาง
ตามต้ องการ
4. คลิกที่เฟรม 1 ของเลเยอร์ 1 แล้ วลากจุดศูนย์ กลางของรู ปไปวางตรง
จุดเริ่มต้ นของเส้ นจากนันคลิกที่เฟรม 10 แล้ วลากจุดศูนย์ กลางของรู ปไป
้
วางตรงจุดสินสุดของเส้ น
้

40. การสร้ าง Guide Layer
5. ถ้ าต้ องการซ่ อนเส้ นการเคลื่อนไหวไม่ ให้ มองเห็น ให้ คลิกที่คอลัมน์ รูป
ดวงตาบนเลเยอร์ motion guide

41. การควบคุมการทางานด้ วย Action Script
ActionScript เป็ นภาษาที่ใช้ ในการเขียนโปรแกรมที่ Flash ได้ นามาใช้ เพิ่ม
ความสามารถของมูฟวี่ในการโต้ ตอบกับผู้ชมภาษานีลักษณะเป็ น Object-
้
oriented เช่ นเดียวกับ JavaScript ที่ผ้ ูสร้ างเว็บใช้ เพื่อเพิ่มคุณสมบัติ
อินเตอร์ แอคทีฟให้ กับเว็บเพจ
วิธีสร้ างและแก้ ไขคาสั่ง ActionScript จะทาโดยใช้ พาเนล Actions
ซึ่งเราสามารถเปิ ดขึนมาได้ โดย
้
เลือกคาสั่ง Window >
Actions จะปรากฏพาเนล
ซึ่งมีส่วนประกอบดังภาพ

42. การนาเสนอผลงานบนเว็บ
การ Publish เอกสาร Flash
Flash movie ที่แสดงผลใน Flash Player
กราฟิ กประเภท GIF,JPEG,PNG
QuickTime ซึ่งสามารถแสดงได้ โดยไม่ ต้องใช้ Flash Player
เอกสาร Html ที่ช่วยในการแสดงผลมูฟวี่หรื อกราฟิ กในบราวเซอร์
ไฟล์ Projector สา หรั บระบบ Windows และ Macintosh รวมถึง QuickTime
วิดีโอจาก Flash Movie
อื่ นๆ

43. การนาเสนอผลงานบนเว็บ
การ Export มูฟวี่ออกมาใช้ งานในรู ปแบบต่ างๆ สามารถทาได้ ดังนี ้
1. เลือกคาสั่ง File > Export Movie
2. จะปรากฏหน้ าจอดังรู ปข้ างล่ าง
3. เลือกที่อยู่ท่ ีต้องการ Save ข้ อมูล
ลงในเครื่ องเพื่อใช้ งาน
4. ในช่ อง Save as type ให้ เลือก
Type ที่ต้องการ ซึ่งโดยปกติต้อง
เลือก .swf หรื อตามความ
เหมาะสม จากนันคลิกที่ปุ่ม Save
้

44. Thank You 