111
การใช้งานโปรแกรม FLASH เบื้องต ้น

การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

การใชงานโปรแกรม FLASH

เบองตน

Page 2: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

FLASH เปนโปรแกรมกราฟกอยางหนงทอยในกลมของ ADOBE

ซงจะแตกตางกบโปรแกรม Photoshop และ lllustrator ทใชในการตกแตงภาพกราฟฟก งานทไดจะเปนภาพนง สวง Flash จะเปนการน าภาพทแตงแลวหรอภาพเวกเตอรนนมาขยบหรอใหมนเคลอนไหว Flash จงเปนโปรเกรมทใชท า animation นนเอง

มาท าความรจกกบ Flash

Page 3: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

มาท าความรจกกบ Flash

Flash ท าอะไรไดบาง

Flash animation แอนนเมชนมอยหลายความหมายดวยกน สวนใหญเราจะนกถงการตนแอนนเมชนแบบ 2

มต ถาเปนภาพแบบ vactor เราจะเรยกวา flash animation นอกจากภาพวาด vactor แลว การน าเอาภาพนงมาเคลอนทกถอวาเปนการท าแอนนเมชนเหมอนกน

Page 4: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

มาท าความรจกกบ Flash

Flash game เกมทเราเขาไปเลนในเวปตางๆ จะเปนเกมทเลนไมยาก และไมมความซบซอนขอเกมมากนก

Page 5: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

มาท าความรจกกบ Flash

Multimedia มลตมเดยเปนการผสมผสานเอาสอตางๆเขาดวยกนทงภาพ เสยง ขอความ ภาพวดโอ ซงทเราเหนหรอคนเคยกนบอยๆ คอ presentation ไมวาจะเปนการ present เชงวชาการ เพอความบนเทงในงนส าคญตางๆ เชน งานวนเกด งานเลยง งานอ าลา

presentation งานแตงงาน

presentation เชงวชาการ

Page 6: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

หนาตาของโปรงเกรม flash หนาตาง welcome screen

หาไอคอนของ adobe flash professional เพอเรมตนเขาสโปรแกรม

A B C

A open a recent item

เปนการเปดไฟลทเราท าเมอครงลาสด หรออาจเปดจาก ค าสงค าวา open

B create new

เปนการเลอกสรางไฟลใหม โดยจะมรปแบบตางๆใหเลอกตามตองการ โดยจะแนะน าใหใช actionscript 2.0

C create from samples

เปนการเลอกรปแบบไฟลของงานใหเหมาะสมกบงานทตองการ เชน ถาเลอก banner กจะมรปแบบ banner

Page 7: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

สวนประกอบของหนา interface หลงจากผานหนา welcome screen เขามาแลวเราจะเจอกบหนาตาของโปรแกรม ซงมสวนประกอบดงน

menu bar

stage tools

time line

panels panel properties

menu bar เปนสวนทรวบรวมค าสงตางๆ โดยจะแบงเปนหมวดหม

time line

เปนสวนทใชก าหนดเวลาในการแสดงผลของงานแอนนเมชน

tools

เปนเครองมอตางๆทใชในการตกแตงชนงาน

panels

เปนสวนทชวยปรบแตงคาตางใหมประสทธภาพมากยงขน

panel properties

เปนสวนทชวยปรบแตงคาตางๆ ของชนงานไมวาจะเปนรปภาพ หรอแอนนเมชน ใหมเหมาะสมในการใชงานมากยงขน

stage

เปนพนททใชแสดงผลงาน

Page 8: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

สวนประกอบของหนา interface

works area

stage เปนพนททใชในการแสดงผลงานของเรา สขาวเปรยบเสมอนเวท และสเทาเปรยบเสมอนหลงเวท ซงถาตองการแสดงชนงานกคอยเอามาวางในสเตจ สวนจะออกมาในชวงเวลาไหนนน เราก าหนดดยการใชตว ทามไลน

works area หนาตางแสดงผลของ stage

stage

Page 9: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

สวนประกอบของหนา interface timeline Time line เปนตวก าหนดชวงเวลาไหนจะมอะไรเกดขน โดยจะแบงเปนเฟรมๆ เหมอนในแผนฟลมทเหนเปนชองๆ เมอเขาเครองฉาย โดนการหมนฟลมผานไปแตละชองดวยความเรว 24 ชองตอ 1 วนาท

layer play head

frame

layer

การท างานของ flash นนจะแบงออกเปนชนๆทเรยกวา layer เชน ฉากหลงกอยเลเยอรหนง และตวละครกจะอยอกเลเยอรหนง ซงจะไดงายตอการก าหนดการเคลอนไหวไดงาย

play head

เปนแถบสแดงทเหนอยในไทมไลน ใชในการบอกต าแหนงวาตอนนเลนมาถงเฟรมทเทาไหร เราสามารถเดรกเมาสเพอเลอนดในเฟรมทเราตองการได

frame

ความหมายเดยวกบฟมลทอยในภาพยนตในทนหนงชองกมหนงเฟรม มชนงานทเราสรางไวบนสเตจ

Page 10: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

สวนประกอบของหนา interface panels

หนาตางพาเนลจะเปนตวเสรมหรอตวชวยในการปรบแตงคาตางๆ เพอใหท างานไดอยางมประสทธภาพ

ซงมคณสมบตแตกตางกนเชน พาเนล properties

เปนพาเนลทใชในการแสดงรายละเอยดตางๆทเราเลอก พาเนลส และอกอนอกมากมายโดยเราสามารถเปดพาเนลพวกนไดท menu>window และเราสามรถกรฟ พาเนลทคลายกนไวดวยกนได เคลอนยายพาเพลไดตามลกษณะของพนทการใชงาน

panel properties

panel colors

การเลอก panel ทตองการ

Page 11: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

Tools

เปนแถบเครองมอทรวมเครองมอตางๆ ทใชในการสราง เลอก หรอปรบแตงแกไขชนงาน โดยจะแบงเปนกลมๆดงน

selection/transfrom กลมนจะเปนเครองมอทใชหยบจบหรอเลอกชนงาน สวน transfrom จะเปนเครองมอทแกไขชนงาน หรอปรบเปลยนรปทรง

กลมนจะเปนเครองมอทใชในการวาดชนงานขนมา ไมวาจะเปนเสน และรวมไปถงการวาดตวอกษรดวย

เปนเครองมอทใชเทสทงสพน และสเสนขอบ รวมไปถงการดดส และยางลบทเอาไวใชลบชนงาน

เปนเครองมอทใชในการปรบมมมองของภาพ ทงการซมของภาพและการเลอนของภาพ

เปนเครองมอทใชในการเลอกสทงสพนและสขอบ รวมถงการตงคาสรวมตน

เปนค าสงเพมเตมของเครองมอตางๆ ทเราเลอกซงจะเปลยนไปตามเครองมอทเราเลอก

Page 12: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

การก าหนดขนาดของชนงาน

title ก าหนดชอใหกบชนงาน

dimensions เปนการก าหนดขนาดของชนงาน

match printer ก าหนดให stage มขนาด ใหญทสดเทาทจะพมพได

contents ก าหนด stage ใหเทากบ ขอความของของผใชงาน

default ปรบขนาดใหมคามาตรฐาน คอ 550 x 400 พกเซล

background color เพอก าหนดสให stage

frame rate ก าหนดอตราเรวในการแสดงภาพเคลอนไหว มาตรฐานคอ 12

fps

หรอเปลยนท panel properties กได

Page 13: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

drawing object

การวาดชนงานเอง

Page 14: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

รจกกบชนงานทวาดขนเองเบองตน

แบบทมทงเสนขอบและไมมเสนขอบ การตดรปทรงชนงาน

การวางทบกนแลวลากออก ใช selection ลากเพอเลอกต าแหนง แลวลากชนงาน

การเคลอนยาย ถามเสนของจะตองดบเบลคลกเพอเลอกสของเสนและสพน แลวเดรกเมาสเพอยายชนงาน แตถาคลดแคครงเดยวจะแยกสขอบและสพน

Page 15: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

ชนงานแบบ drawing object

วาดเสนจากปากกาดวยเสน pen tool

1. คลกท พาเนล tool เพอเลอก pen แลวปรบแตงเสนของปากกาไดท properties

2. คลกจดเรมตน 3. คลกทจดตอไปคางไว แลวลากเมาสดดใหเสน 5. คลกทจดดดเพอตดแขน 6. คลกจดตอไปแลวแดรกเมาส ดดเสนทตองการไปเรอยๆ 7. ท าตอไปจนวนกลบมาทเดม

Page 16: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

ชนงานแบบ drawing object

วาดรปสเหลยมดวย oval tool

1. คลกท พาเนล tool เพอเลอก แลวปรบแตงเสนขอบและสพนไดท properties

ก าหนดความหนาของเสนและก าหนดคาของสได 2. กดป ม shift เพอท าใหรปสเหลยมจะเปนรปวงกลม 3. จะไดรปวงกลม properties

Page 17: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

ชนงานแบบ drawing object

เปนเครองมอทใชวาดเสนตรง

เปนเครองมอทใชวาดเสนงานแบบอสระ

เหมอนดนสอ แตใชสของสพนแทน

option ของ brush

ขนาดของ ของ brush

ลกษณะ ของ brush

รปแบบในการระบายส ของ brush

Page 18: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

bitmap object

ชนงานทเปนรปภาพ

Page 19: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

รจกกบภาพทน ามาใชงานเบองตน

ภาพแบบvector แบบvector เปนภาพทเกดขนจากการเขยนขนดวยโปรแกรม ไมวาจะเปน photoshop หรอวา illustartor ภาพนนจะเกดจากการค านวณ ฉนนเวลาเราขยายภาพจะไมแตก

ภาพทเกยวกบงานกราฟฟกสวนใหญจะมอยสองแบบคอ raster และ vector

ชนงานรปภาพทเรามาใชใน flash นนจะเรยกวา bitmap obj ซงจะเปนภาพแบบ raster สวนภาพทน าเขามาเปนแบบ vector จะเรยกวา drawing obj

ภาพแบบ raster เปนภาพทเกดจากการเรยงของเมดส pixel สวนใหญจะไดมาจากภาพถาย หรออาจจะเปนภาพทโหลดมาจากเวปตางๆ ซงถาภาพมความละเอยดนอยเวลาขยายกจะท าใหแตกได

Page 20: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

รจกกบภาพทน ามาใชงานเบองตน

การน าภาพมาวางบนสเตจ import to stage

การน าภาพมาใชงานทนทสวนใหญจะโหลดมาใชทละไมมาก ภาพทไดจะเทาก าของจรงอาจจะตองปรบขนาดเอา 1.คลก menu>import>import to stage

2. เลกรปทตองการแลว open

3. รปภาพจะมาอยบนสเตจ

ถงแมค าสงนจะไดรปมาอยบนสเตจ แตไฟลรปกยงอยใน library

Page 21: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

รจกกบภาพทน ามาใชงานเบองตน

การน าภาพมาวางบนสเตจ import to Library

การน าภาพมาใชงานจะถกเกบไวท พาเนลของ Library กอนเวลาจะใชคอยลากมาจากพาเนลอกท 1.คลก menu>import>import to Library

2. เลกรปทตองการแลว open

3. รปภาพจะมาอยบนสเตจ

Page 22: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

text object

ชนงานตวอกษร

Page 23: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

การพมพตวอกษร

เลอก text tool เพอพมพตวกษร การปรบแตงตวอกษรโดยการเลอกท panel properties

ในการแกไขตวอกษรเฉพาะตวนนเราสามารถเลอก selection tool แลวแดรกเมาสเพอเลอกตวอกษรจากนนคอยเปลยนขนาด ส ไดตามตองการ

Page 24: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

การพมพตวอกษร

ในการพมตวอกษรนนจะไดตวอกษรทเปนชดเดยวกน แตถาอยากใหเปนอสระตอกนโดยใชค าสง break apart โดยคลกทตวอกษร แลวคลกซายเพอเลอกค าสงจากนนตวอกษรกจะแยกกนเปนอสระ

A B

C D

Page 25: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

การใส filterใหตวอกษร

เปนการเพมลกษณะพเศษของตวอกษร เชน ส เงา ของตวอกษรเปนตน โดยการเลอกทตวอกษรแลวไปท พาเนล properties ในสวนของ filter คลด ป ม add filter เลอก drop shadow ซงในหนาของ filter นนมอยดวยกน 7 แบบ

A B

drop shadow จะเปนการใสสและเงา สามารถเลอกส การตกกระทบ ทศทางได

blur ท าใหตวอกษรฟงหรอเบลอ ท าใหมองดไมชด

glow ใสแสงใหกบตวอกษร สามารถเลอกสและปรมาณของแสงเองได

bevel ท าใหตวอกษรนนดมสและเงา

gradient glow เปนการใสแสงใหตวอกษรแบบใสแฉดส ในขณะท glow ใสไดแคสเดยว

Gradient bevel เปนการใสเฉดสในสวนของแสงและเงาท าใหตวอกษรดมมตมากขน

adjust color เปนการปรบแตงสของตวอกษร

Page 26: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

Color

ตกแตงสใหกบชนงาน

Page 27: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

เลอกสไดจากตรงไหนบาง

การเลอกสพน fill color สขอบ stroke color จะเลอกไดหลายต าแหนงเชน

toolbar

panel color panel swatches

panel properties

Page 28: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

รปแบบของสพนและเสนขอบ

solid color

bitmap fill

Alpha color Alpha color

Page 29: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

รปแบบของสพนและเสนขอบ

Alpha color

Alpha color Alpha color

Linear gradient

Redail

gradient

Page 30: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

รปแบบของสพนและเสนขอบ

Alpha color Alpha color

Linear gradient และ radial gradient มกใชควบคกบเครองมอ gradient transfrom tool เปนเครองมอทใชยอ ขยาย และ หมนการไลฌฉดฉนนเอง ซงมจดปรบทแตกตางกน

Page 31: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

edit & transform

แกไขรปราง เปลยนแปลงรปทรง

Page 32: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

เมนเกยวกบ transform

Free transform Distort Envelope

Scale Rotate and skew

Page 33: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

เมนเกยวกบ transform

rotate 90 cw rotate 90 ccw

flip vertical flip horizontal

Page 34: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

กรเปลยนรปทรงชนงาน

เปลยนรปทรงจากดานและมม

เราสามารถใชเครองมอ selection tool ในการดงดานและมมของชนงานใหเปลยนแปลงเปนรปทรงอนได

ใช selection tool ในการดงมม ใช selection tool ในการดงดาน

Page 35: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

กรเปลยนรปทรงชนงาน

การเปลยนรปทรงจากนดตด

เราสามารถใชเครองมอ sub selection tool ในการเพมจดตดของดานเพอเพมมมไดอกดวย

เราสามารถใชเครองมอ selection tool ในการเปลยนรปทรงตวอกษรไดโดนการเปลยนตวอกษรใหเปน drawing object โดยเลอกทตวอกษรใหเปนFree trnsform จากนนกด Ctrl+ B 2 ครง

จากนนเลอกค าสง modify>combination object>Union

Page 36: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

manage object

การจดการกบชนงาน

Page 37: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

การยาย การกอปป และรวมกลมชนงาน การยายมทงแบบทะตว และกยายแบบกลม โดยการใชเครองมอ selection tool แตถาเคลอนทเปนกลมเราท าไดโดยการเดกเมาทชนงาน แลวลากมาเปนกลม

ยายทละชนงาน ยายทละชนยายทละกลม

ใชselection tool แดรกเมาสเพอชนงานทกชนทตองการรวมกน

กดป ม Cril+G เพอรวมชนงานเขาดวยกนแลวยาย

Page 38: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

การ copy

การกอปปมอย 2 วธ โดยการกด Ctrl+C แลวคอย Ctrl+V

วธท สอง คอการคลกชนงานพรอมกบกดป ม Ctrl แลวแดรกเมาส

Page 39: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

การเรยงล าดบชนงาน การจดเรยงอยสองแบบคอ เรยงเปนแถวเพอความเปนระเบยบ และการเรยนลดบหนาหลง เพราะเวลาเราวาดมนตองเรยนล าดบหนาหลงเราสามารถท าได

การจดชนงานกอนหลงดวย Arrange

การจดชนงานกอนหลงดวย Arrange ท าไดสองวธคอ การใช Ctrl+ลกศรลง เพอใหชนงานอยขางหลง และการใชค าสงจาก menu bar Modify>Arrange>Arrange ..........ค าสงทตองการ

Page 40: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

Bring to Front ชนงานทถกเลอกจะขนมาอยบนสดทนท โดยไมตองเลอนทละขน Bring Forward ชนงานทถกเลอกจะเลอนขนมา1ขน

Bring backward ชนงานทถกเลอกจะเลอนลงมา1ขน Bring to back ชนงานทถกเลอกจะเลอนลงมาอยลางสดทนท โดยไม

ตองเลอนทละขน

Lock คลกค าสงนเพอลอกต าแหนงของชนงาน เพอไมใหขยบหรอเคลอนยายได

Page 41: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

การเรยงล าดบชนงาน การจดชนงานกอนหลงดวย Align

การจดชนงานกอนหลงดวย Align ท าไดคอ Align panel และ menu bar

Modify>Align>....

Align panel จดเรยงชนงานแบบแถวชด

เปนการเวนระยะหางของชนงานใหเทากน

ขยายขนาดของชนงานใหเทากน มทงดานกวาง และดานยาว

เวนชองไฟของชนงานใหเทากน ซงมทงดานขาง บน ลาง

ใหชนงานมขนาดเทากย stage

Page 42: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

ชนงานทใชท าแอนนเมชน symbol & Instance

อนสเตนกบซมโบล เปนออฟเจคหรอชนงานทเราใชในการสรางแอนนเมชน ไดมาจากการวาดขนเอง รปภาพ หรอตวอกษร ซมโบลกบอนสแตนซจะเหมอนกนทกอยาง จะตางกนตรงทซมโบลเปนชนงานจรง สวนอสแตนซจะอยใน library

แตถาเมอไดทเราเขามาแกไขชนงานอนสแตนซ ซมโบลทกชนงานจะถกแกตาปดวย

menu Modify>convert to symbol คลกขวา แลวเลอก convert to symbol

Page 43: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

Symbol & Structure

ซมโบลและ โครงสรางของชนงาน

Page 44: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

ประเทของซมโบล

ซมโบลมอย 3 แบบคอ ซมโบลกราฟก (Graphic) เปนชนงานทถกแปลงขนมาจากการวากรป หรอการเขยนตวอกษร เพอทจะน ามาใชงานในมฟวคลป

ซมโบลปม (button) กคอชนงานปมนเอง ใชในการเชอมโยงขอมลตาง หรอใชในการควบคมมฟวคลป และยงสามรถตอบสนองกบเมาอกดวย ซมโบลมฟวคลป (movie clip) เปนซมโบลทตางจากกราฟกคอมนสามารภเคลอนไหวไดดวยตนเองได เพรามนม timeline เปนของตวเอง

panel convert to symbol

Page 45: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

แปลงชนงานเปนซมโบลแบบกราฟก ชนงานในรปแบบตางๆ กอนทเราจะเอามาท าแอนนเมชน เราตองแปลงเปนกราฟกกอนเพองายตอการใชงาน ในการเลอกชนงานเราตองท าใหเปน drawing object กอน โดยการเลอกชนงานทเราเขยนมาทงหมดเลอกโดย selection tool แลว group

การสรางมอยสองวธคอการเอาชนมามา convert หรอจะสรางขนมาใหมกได

การเอาชนงานมาสรางเปน กราฟก insert>new symbol

กราฟกทไดจะอยใน library เสมอ

Page 46: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

แปลงชนงานใหเปนป ม

หากเราตองการเอาป มมาไวใชงานเราสามารถสราป มนมาเองไดโดยการ convert ชนงานใหเปนป มอกเชนกน

up เปนสถานะปกต over เปนสถานะเมาโดนป ม down เปนสถานะคลกเมาไปทป ม hint เปนการก าหนดพนทการท างานของป ม เมอเมาเขามาไกลพนทจะเปลยนเปนลกศรเปนรปมอแสดงวาสวนนคอป ม

Page 47: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

การสราซมโบลแบบมฟวคลป ส าหรบมฟวคลปจะเปนการสรางแอนนเมชนไวในซมโบว เราจะสามารถสรางแอนนเมนแบบ frame by frame หรอ motion

tween กได

convert to symbol>movie clip

frame by frame

Page 48: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

ลองแตงสซมโบลดวย color effect color effect สามารถปรบแตงสใหกบซมโบลได ทงกราฟกและมฟวคลป โดยอยในสวนของ panel properties อยดวยกน สแบบ

brightness เพมความสวาง Tint เปนการยมสโดยการเลอกเฉดส

Alpha เปนการปรบคาความโปรงแสง

Advance เปนการยปรบเฉดสและความสวาง โปรงแสงในคราวเดยวกน

Page 49: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

ลองใสเทคนคพเศษใหกบซมโบล Filter การใส filter กเหมอนการใสฟวเตอรใหกบชนงาน โดบเขาทหนาตางของ panel filter แลวคลก add filter ไดเลย

ใชค าสง Drop shadow ใชค าสง Adjust color

Page 50: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

Basic of Animation

หลกการเคลอนไหว เบองตน

Page 51: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

ภาพขยบไดอยางไร

การท าใหภาพหรอชนงานขยบไดทเรยกวา flash movie นน จะตองอาศยการท างานหลกอย 2 สวน ดวยกนคอ timeline ซงเปนตวการก าหนดเวลา และ stage เปนตวแสดงภาพหรอชนงาน ซงจะท างานสมพนทไดนนบน timeline จะใหแสดงอะไรบน stage

พนทแสดงถาพ stage

เปนพนททใชแสดงภาพหรอชนงานทจะท าใหเกดการเคลอนไหว ถาเปรยบหลกการของภาพยนต พนทสเตจจะเปรยบเสมอนภาพหนงภาพในหนงเฟรมของฟมลนนเอง และเมอเฟรมหลายเฟรมๆ มาเรยงกนเพอแสดงภาพในเวลาทเหมาะสมกจะท าใหเกดภาพเคลอนไหว ซงการทภาพจะเคลอนไหวไดยยจะตองอาศน timeline

พนท stage

Page 52: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

ตวก ำหนดเวลำ Timeline

Timeline จะเปนตวก าหนดวาชวงเวลาไหนจะมอะไรเกดขนบนพนท stage โดย Timeline จะแบงเปนชองๆเหมอนแผนฟลม ซงเชองโยงกบพนท stage นนเอง

พนทแสดงถาพ stage

ส าหรบการดภาพเคลอนไหวใน timeline นน เมอเราสงใหเลน โดยกดปม enter แถบเสนสแดงจะท าการเคลอนทแลววงไปตาเฟรมทเราก าหนดไว ใหเราเหนภาพทกเฟรมตอๆกนจนเปนภาพเคลอนไหว

layer

time line

frame

Page 53: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

รปแบบของเฟรม (Frame )

เรามารจกเฟรมใน timeline กนบางซงจะมทงสและจดซงจะบอกวาเปนเฟรมชนดไหน

เฟรมทมชนงาน (Keyframe )

เปนเฟรมทมชนงานอยในนน ซงจะมจดทด าทเฟรม ถาคเฟรมมรการเปลยนแปลงของชนงานจะทใหเกดการเคลอนไหว เราจะเพมคเฟรมดสนการกดป ม F6

เฟรมปกต (Frame )

เปนเฟรมทอยตอจากคเฟรม ชนงานจะเปมอนกนกบคเฟรม ไมมการเปลยนแปลงหรอไมมการเคลอนไหวนนเอง

เฟรมเปลาๆ (blank frame )

เปนเฟรมททไมมชนงานอยเลย ใชในกรณทไมอยากแสดงชนงานใหเหนในชวงเวลานน อาจจะรอสกพกเพอรใหเหน

Page 54: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

ลองท ำภำพเคลอนไหวแบบ Frame by Frame

เราจะลองท าภาพทเคลอนไหวแบบ Frame by Frame โดยจะสรางตวอกษรใหเปนสองค า โดยแบงเปนสองเลเยอร ซงจะท าใหมนกระพรบได มวธการท าดงน

1 คลกเครองมอ text tool เพอเขยนขอความ 2 คลกขาวเพอท าการแยกตวอกษร ใชค าสง blake aprat

3 จากนนนคลกขวาอกครงเพอแบงเลเยอรใหเทากบตวอกษร โดยใชค าสงของ distribute to layers

4 จะไดจ านวเลเยอรตามตวอกษร จากนนนเพมเฟรมของแตละเลอย โดนการคลกขาวแลวเพง เฟรมท frame 10

5 เลอนเฟรมเพอใหตวอกษรโชวตาม timeline ตาความเหมาะสม

1 คลกเครองมอ text tool เพอเขยนขอความ 2 คลกขาวเพอท าการแยกตวอกษร ใชค าสง blake aprat

Page 55: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

3 จากนนนคลกขวาอกครงเพอแบงเลเยอรใหเทากบตวอกษร โดยใชค าสงของ distribute to layers

4 จะไดจ านวเลเยอรตามตวอกษร จากนนนเพมเฟรมของแตละเลอย โดนการคลกขาวแลวเพง เฟรมท frame 10

Page 56: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

5 เลอนเฟรมเพอใหตวอกษรโชวตาม timeline ตามความเหมาะสม

Page 57: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

เพมเตมเกยวกบ Frame by Frame หลกการท างานของ frame by frame นนคอการเปลยนรปลกษณของชนงานทกคเฟรมทมชนงาน จงจะมการเปลยนแปลง ซงจะดใหลกษณะชนงานนนขยบไดเอง ถาตองการใหลกษณะชนงานนนคางอยนานกท าไดคอการเพมเฟรมใหมากๆ หรอนอยตามตองการ

ภาพตอภาพ frame by frame ท าใหการตนมลกษณะเหมอนการพด

Page 58: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

เมอเราวาดการตนเสรจแลวนน ใหวาดสงทขยบไวคนละเลเยอรเพอท าการเปลยนลกษณะของชนงาน เชน ตา ปาก เปนตน

1 วาดหนาตวละคร และแยกเลเยอร ตา ปากไวคนละเลเยอรกบใบหนา ตงชอ เลเยอรใหเรยบรอย

2 Insert frame เลเยอรทไมตองการใหขยบ อยาลมใชตวลอกเลเยอรทไมตองการดวย และเรมวาดตา โดยการ Insert key frame ทเฟรมท 6 และคลก ป ม onion skin เพอดต าแหนงของตาทเฟรมกอนหนาได

Page 59: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

3 วาดปากโดยเลอกทเลเยอรของปากและท าการ Insert key frame แลววาดปากใหม

4 ใชค าสง Insert frame เพอเพมจ านวนเฟรมในเฟรมท 10 ในเลเยอรของตา แลวท าการ copy frame จากเฟรมท 1 แลว paste ในเฟรมท 6 จากนนน เพมจ านวณเฟรมโดยใชค าสง Insert frame อกครง

Page 60: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

5 ในเลเยอรของปากนนน จะสงเกตวาเวลาเราพดจะมการขยบของปากหลายรปแบบดงนนเราควรจะวาดสกสแบบเปนอยางต า โดยการท าคลายกบการวาดตา โดย Insert key frame แลววาดปาก จากนนน ใชค าสง Insert frame เพอเพมเฟรมในเฟรมท 15 ท ายางนไปเรอยๆจนกวาจะครบ

Page 61: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

เคลอนยายชนงาน Motion tween Classic Tween

เปนการท าใหชนงานนนเคลอนไหว จากจดหนงไปยงอกจดหนง โดยใชค าสง motion

ในการท าใหชนงานเคลอนไหวนนจะใสค าสง motion tween ลงในเฟรมทอยระหวางคยเฟรม สองเฟรม โปรงเกรมจะสรางเฟรมทอยระหวางเฟรมนนแบบอตโนมต ท าใหทกเฟรมนนปรากฎภาพขนการเคลอนไหวจะดละเอยด เมอใหค าสงแลวเฟรมจะเปนสฟา

Page 62: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

เราสามารถท าใหชนงานเคลอนทไดโดยการสราง key frame จากจดเรมตนไปยงต าแหนงทเราตองการจะใหไปได โดยใชค าสง Insert key frame การเคลอนทในค าสงนจะเปนการเคลอนทในแนวตรงเทานน และถาอยากจะเพมเวลาในการเคลอนทไดโดยการเพมจ านวนเฟรม การแสดงผลจะเหนเฉพาะทอยบนสเตจ แตถาเราไมอยากใหเหนกเพยงแตลากชนงานออกนอกสเตจเทานน

1 เรมตนเลยเราสรางเลเยอรขนมาสองเลเยอร คอ พนหลง และ ตวละคร โดยใหตวละครอยนอก stage

2 แดรกเมาลากทงสองเลเยอรในเฟรมท 50 แลวเลอก insert keyframe

Page 63: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

3 จากนนนคลกเลอกคเฟรมท 50 เพอเลอกต าแหนงของตวละครทเราตองการเคลอนท

4 จากนนนใชเมาเลอกทเฟรมระหวางคเฟรมสองอนในเลเยอรของตวละคร แลวเลอกค าสง Create classic tween ดผลงานโดยกดป ม Ctrl+enter

Page 64: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

เปลยนรปทรงดวย Shape tween

จะคลายกบโมชนทวน ตากแตงกนทเปนการท าใหชนงานเคลนไหวดวยการเปลยนรปทรงจากรปหนงไปอกรปหนงดวยค าสง shape tween ลงใรเฟรมทมคยเฟรมทมรปทรงแตกตางกนทงสองเฟรม โปรเกรมจะสรางภาพทตางกนของสองเฟรมนขนมาเอง เมอเราใหค าสงแลวเฟรมจะเปนสเขยว

Page 65: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

1 ขนตอนแรกสราเลเยอรขนมา 2 เลเยอรใสพนหลง และอกอนเปนตนไม

2 สรางเฟรมของเลเยอรพนหลงใหถงเฟรมท 60 แลวจากนนน เพมเฟรมท 10 ในเลเยอรของตนไม และ insert

keyframe ท 11แลวเพมเฟรมถงเฟรมท 20 ดงภาพ ในชดค าสงหลงเราจะท าเปน create shape

tween

Page 66: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

3 จากนนนเราสราง insert keyframe ในเฟรมถดไปเพอเอา รปตนออนมาใส เพมเฟรมถงเฟรมท 30 เพอใหตนออนแสดงไปสกพกแลวคอยเปลยนรปเปนตนโต

4 เลอก insert keyframe ในเฟรมท 31และเพมเฟรมไปจนถงเฟรมท 40 ค าสงนเราจะใชในการเปลยน shape นนเอง

Page 67: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

5 insert keyframe ในเฟรมท 41 แลวน ารปตนโตมาวาง และเพมเฟรมไปจนถงเฟรมท 60

6 ใชค าสง create shape tween ระหวางเฟรมท 10 - 20 และ เฟรมท 30 - 40 และแสดงโดย ctrl+enter

Page 68: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

เพมเตมเกยวกบ Shape tween

หลกการการเคลอนไหวของ shape tween คอ การเปลยนแปลงรปทรงของชนงานหนงไปยงอกชนงานหนง ซงต าแหนงของชนงานจะอยทเดมหรอไมกได โดยจะใชค าสง create shape tween ลงในเฟรมทอยระหวาคเฟรมทงสองเฟรมทมรแบบแตกตางกน ซงชนงานนนนจะตองเปน shape ถาไมเปนใหกด Ctrl + B เพอเปลยนเปน shape กอน

Page 69: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

Technique of Animation

ท าภาพเคลอนไหว ดวยเทคนคใหม

Page 70: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

เทคนคในกำรท ำแอนนเมชน

เคลอนทตามเสนทก าหนดดวย Motion tween แทน Motion Guide

เปนการเคลอนทของชนงานใหเคลอนทไปตามเสนทเราลากเอาไว ซงถาเปนเวอรชนเกา จะตองใชค าสง Motion

guide โดยตองสรางเสนขนมาแลวน าชนงานไปวางเสนไกดในเฟรมแรกและเฟรมสดทาย เลอกค าสง Motion tween

เพอใหชนงานเลอนตามเสนไกด แตตอนนนเราสามารถใชค าสง motion tween ไดเพยงอยางเดยว

เคลอนทใหเหนเฉพาะบางสวน Mask tween

mask คอการแสดงภาพใหเหนสวนทเราตองการเทานน สวนทเราไมตองการจะถกบงเอาไว mask tween จงเปนการแสดงภาพเฉพาะสวนทเคลอนทได อาจใชวธนในการน าเสนอผลงงาน จะท าใหดนาสนใจมากขน

Page 71: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

เทคนคกำรเคลอนทตำมเสนกก ำหนดดวย Motion tween

1 สรางเลเยอรขนมาสองเลเยอร จากนนน อนแรกเปน map อนทสอง navigator เพมเฟรมไปจนถง เฟรมท 50

แลวเลเยอร nevigatorใหใชค าสง Insert keyfram

2 จากนนนน า navigator มาวางตรงจดเรมตน และเลอกคลกขวาเฟรมท 5 เลอกค าสง Moton tween

จากนนนคลกทเฟรมท 10 จากนนนใชเครอง selection tool เลอกเนวแกเตอรมายงต าแหนงทสอง

Page 72: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

3. คลกเฟรมท 15 แลวใช selection tool เลอนเนวแกเตอรไปอกต าแหนงท าแบบนจนครบทางโคงทเราตองการ

4 ท panel properties คลกเครองหมายถกทหนา Orient to path จากนนนกดป มแสดงผลงานดไดเลย ถาเราไมเอาเครองหมายถกออกชนงานจะหมนตามเสนของไกด แตถาเราอยากใหชนงานหมนกเลอกค าสงของ rotate ได

Page 73: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

เทคนคการเคลอนทใหเหนเฉพาะทบางสวน Mask tween

1 สรางเลเยอรสองเลอร อนแรกคอ เลเยอร body สงนทสองเปน x ray สรางรปสเหลยมใหวางบนเลเยอรใหมตงชอเปน mask แลวเปลยนชนงานใหเปนซมโบลกราฟฟก ตงชอ mark แลวกดปม ok

ray สรางรปสเหลยมใหวางบนเลเยอรใหมตงชอเปน mask

Page 74: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

2 คลกเฟรมสดทายของเลเยอร mask แลว insert keyframe จากนนนลากสเหลยมใหลงมาตรงลางสดของรป

3 คลกเฟรมตรงกลางของเลเยอร mask แลว คลกขาวขากนนนเลอกค าสง create classic tween

แลวดบเบลคลกทเลเยอร mark คลกเลอก type เปน mask แลวกดป ม ok

Page 75: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

4 ดบเบลคลกทเลเยอร x ray เลอก type เปน masked แลวกดป ม ok จากนนนเลอกดผลงงาน

Page 76: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

เพมเตมเกยวกบ mask

mask tween คอการเคลอนทของมารค จะเปนการเคลอนทใหเหนเฉพาะบางสวน ซงจะมอยสองสวนคอ mask และ masked โดยท mask เปนกรก าหนดรปทรงทตองการใหเหนในสวนของ masked

สวนทไมถก mask จะเหนเปนเลเยอรลางสด

เลเยอร mask เลเยอร masked เลเยอร bg

Page 77: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

ลองใสกระดกใหกบชนงำนเคลอนไหว Bone

1 สรางเลเยอร จากนนนวาดชนงานทมขอตอของชนงานขนมาแตละชนจะตองเปนซมโบวกราฟกกอน จากนนนใชเครองมอ bone ลากจากแกนกลางแลวลากมายงต าแหนงระยางของชนงาน ท าแบบนเรอยๆๆจนครบ

เครองมอของ bone tool จะรองรบกบ action script 3.0 หารเราใช 2.0 สามารถเปลยนไดโดยเลอกท publish ซงอยพาเนลของ properties ของ document

Page 78: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

2 จะเหนวาชนงานขางลางขนมาอยขางบนใหใช arrange down หรอใช Ctrl+ลกศรลงเพอสลบชนงานไปอยดานลาง จากนนนจะเหนเลเยอรใหขนมาคอ เลเยอรของ Armature

3 คลกเฟรมเลอนต าแหนงของแขนและขาโดยการกดป ม shiftตามทตองการ จากนนนคลกทเฟรมท 5 แลว insert

keyframe

Page 79: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

4 ท าตามขนตอนเดมคอจดทาตามตองการ คลกทเฟรมท 10 แลว Insert keyframe ท าจนครบจากนนนกกดเพอดมฟวคลฟไดเลย

Page 80: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

Sound

ใสเสยงลงไปในชนงาน

Page 81: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

เสยงทน ำมำใชในงำน Flash

เสยงทน ามาใชในงานนนน จะตองรกอนวาเสยงมกประเภท เสยงทมาใชในเฟรชม 2 ประเภทคอ

sound loop เปนเสยงดนตทเลนเปนเพลงวนไปซ าๆ ไปเรอยๆ ท าใหเกดอารมรวมระหวางงานกบผชม เสยงประเภทนจะใสไวบนไทมไลน โดจจะเลนเมอเพลเฮทวงมาถง

sound effect เปนเสยงประกอบของป ม เปนเสยงสนๆ เพอใหมเสยงทเวลาเอาเมาสไปางทป ม ท าใหเรารวาเราไดคลกทป มแลว

สวนไฟลของเสยงนน ถาใชเปนระบบของ windows นนจะเปนสกลไฟล .wav และ .mp3 หรอถาใช macintosh จะใชสกลของ .mp3 .aiff

sound loop sound effect

Page 82: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

กำรใสเสยงในเฟรม Sound loop

การใสเสยงนนใสงายเหมอนเราเอารปเขามาในสเตจเลยไมเหมอนการใสเสยงในป ม

1 น ามฟวทเราตองการจะใสเสยงเปดขนมา คลก Files>Import>Import to library... คลกเลอกไฟลทเราตองการ แลวเลอก open

Page 83: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

2 คลกเลเยอรของเสยง ใส keyframe แลวเลอกเฟรมแรก

3 เลอกทพาเนล properties ท sound เลอก name เปนชอเสยงทเราเลอก ท sync เลอกเปน loop จากนนนเสยงจะถกใสเขาไปในเฟรมโดยอตโนมต เราไมเลอกเสยงทพาเนลแตมาเลอกโดยหาท พาเนลของ library ลากเขามาในสเตจเลยกไดเชนกน

Page 84: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

กำรใสเสยงในเฟรม Sound Efect

1 น าไฟลป มทเราตองการจะใสเสยงเปดขนมา คลก Files>Import>Import to library...

คลกเลอกไฟลทเราตองการ แลวเลอก open

Page 85: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

2 คลกเครองมอ selection tool แลวดบเบลคลดทป ม เลอกสถานะ Over

3 เลอกทพาเนล properties ท sound เลอก name เปนชอเสยงทเราเลอก ท sync เลอกเปน loop จากนนนเสยงจะถกใสเขาไปในเฟรมโดยอตโนมต เราไมเลอกเสยงทพาเนลแตมาเลอกโดยหาท พาเนลของ library ลากเขามาในสเตจเลยกไดเชนกน

Page 86: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

เพมเตมเกยวกบ Sync ของเสยงในป ม

ส าหรบการใสเสยงของป ม sync เปนตวส าคญ จะตองเลอกใชใหเหมาะสมกยสถานะของป ม สวนสถานะทควรใชมรดงน

สถำนะ over กบ sync แบบ start เนองจากเปนสถานะทเมอวางเมาแลวท าใหเกดเสยง จงเลอก sync ใหเปน start เพอใหเลนเสยงไปเรอยๆๆ และเลอกเปน Loop ใหเสยงไมมหยด เพราะเราอาจวาเมาไวนานกได

สถำนะ down กบ sync แบบ Event เนองจากเปนสถานะทเมอคลกเมาแลวท าใหเกดเสยง จงเลอก sync

ใหเปน Event และเลอกเปน Repeat ใหเสยงเลนซอนทยกนไดตามทเราคลดรวๆนนเองเพอใหเลนเสยงสนๆไมใหวนอกดวย

สถานะ Up กบ sync แบบ stop เนองจากเปนสถานะทเมายงไมไดโดนปม ดงนนจงไมมเสยงไมมการเลนเสยง จงเลอกเสยงเดยวกบ Over แลวเลอก Sync เปน Stop เพอทจะหยดเลนเสยงขณะท Over ไวกอน และถาหากไม stop

ในสถานะนจะเลนเสยงทงๆทเราไมไดโดยปม

กำรหำเสยงไดท www.flashkit.com ใหเลอกท sound FX

Page 87: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

เทคนคเพมเตมเกยวกบเสยง ใสเอฟเฟกตใหกบเสยง เปนการเลอกรปแบบในการเลนของเสยง ซงมอยหลากหลายดวยกน โดยจะแบงเปน 3 กลมหลกๆคอ

เลอกชองทำงของเสยง channal เปนการเลอกชองทางในการใหเสยงออกวาจะใหออกในชองทางไหน จะออกทางล าโพงซายหรอขวา หรอทงสองขางกได กำรไลควำมดงของเสยง Fade

เปนการเลอกรปแบบในการไลความดงของเสยง จากทไมมเสยงเปนคอยๆดงขนเรอยๆ มทงดงจากล าโพงซายไปยงขวา หรอคอยๆดง ปรบแตงเสยงดวยตนเอง codtom

เปนการใชเอฟเฟกตทเราปรบแตงขน โดยการตองปรบแตงกอนดวย edit sound envelop

Page 88: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

ปรบแตงเสงดวยตนเอง

Edit sound evelope เปนค าสงทใชในการปรบแตงเสยงอยางละเอยด สามารถลดความเพมความดงของเสยงของล าโพงทงซายและขวา โดยจะมชองเสยงและคลนเสยงไวใหแสดงเหน เราสามาถทจะลากเสนเสยงเพอปรบแตงได

Page 89: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

ควบคมกำรเลนของเสยง

เราสามารถควบคมเสยงไดวาเราจะเลนเสยง หยดเสยง หรอปดเสยงชวงไหนกได โดยจะใชป มในการควบคมเสยง แลวจะตองใส actionscript ลงในป ม เพอเปนตวความคมการท างานของเสยง

1 คลกป ม newlayer แลวคลกทเฟรมแรกใสเสยงเขาไปและเลอก sync เปน steam เพมเฟรมสกทายขแงเสยงจากนนน คลกทเฟรมแรก กดป ม F9 เพอใส action

script ดบเบลคลก stop แลวปดหนาตาง action script

Page 90: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

2 คลกทป ม play แลวกด ป ม F9 เพอใส action script พมค าวา 1on (release) {

2ดบเบลคลดท play

3} แลวปดหนาตาง action script

Page 91: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

3 คลกทป ม pause แลวกด ป ม F9 เพอใส action script พมค าวา 1on (release) {

2ดบเบลคลดท stop

3} แลวปดหนาตาง action script

Page 92: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

4 คลกทป ม stop แลวกด ป ม F9 เพอใส action script พมค าวา 1on (release) {

2ดบเบลคลดท go to and stop ในวงเลปใหใสเลข 1

3} แลวปดหนาตาง action script

Page 93: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

5 คลกทเฟรมสดทาย insert keyframe แลวกด ป ม F9 เพอใส action

script คลดท go to and stop ในชองของ frame ใหใสคาเปน 1 แลวปดหนาตาง action script แลวกดทดสอบการควบคมเสยงด

Page 94: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

เพมเตมเกยวกบกำรควบคมเสยง เรามาดวาทเราใส action script ไปนนป มไหนใชงานอยางไร

ป ม play เราใส action script ค าสง play เพอคลกป มนแลวเพลงจะเรมเลนนนเอง

ป ม pause เราใส action script ค าสง stop เพอคลกป มนแลวเพลงจะหยดในเฟรมนน แลวรอเรากดป ม play อกครง

ป ม stop เมอเราใสค าสง go to and stop เมอคลกป มนแลวเพลงจะหยดแตเมอดแพล เพลงจะเรมใหมนนเอง

เฟรมสดทำย เราใชค าสงเดยวกบป ม stop ค าสงจงตลานกนคอเมอเพลงจบมนจะกลบไปเลนทเฟรมแรก สวน เฟรมแรก นนเราใส action script คอ stop เพอเวลาเราเรมเลนมฟวคลปแลวเพลงจะไมเลนเองโดยอตโนมต

Page 95: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

Video

เพมความสนใจ ดวยวดโอ

Page 96: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

รจกกบไฟลวดโอ

น ำไฟลวดโอมำใช Import Video

เราสามารถจะเลอกวดโอแบบ Load external video with playback component โดยวดโอทเราน าเขามานนจะถกแปบงเปนไฟล flash video เวลาทเราเลน flash movie มนจะเรยกไฟล flash

video ขนมาแสดงผล ซงจะเปนไฟลทเลก สวนแบบทเปน Embed FLV in FEF and play in timeline จะเปนการฝงไฟลวดโอเขาไปในไฟลเฟรช วดโอจะถกเลนในtimeline จะเหมาะกบวดโอทเปนคลปสนๆ หรอไฟลคลปวดโอทไมมเสยง

เราสามารถน าไฟลวดโอเขามาใชงานในเฟรชไดไมวาจะเปนคลปวดโอทถายขนเอง หรอไฟลวดโอทโหลดมาจาก youtube การน าวดโอเขามนจะตองตดตงโปรเกรม Quicktime หรอ Direct X กอน

ไฟลวดโอทรองรบ คอ .avi .mpeg .wmv .dv .flv .mp4 .mov

Page 97: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

น ำไฟลดโอเขำมำใชแบบ Embed FLV in SWF ไมตองแปลงไฟล กำรน ำวดโอแบบนจะเปนกำรฝงไฟลวดโอลงไปกบไฟล flash ดวย

1 คลก Files>Import>Import Video... คลก Browse เพอเลอกไฟลวดโอ คลกเลอกไฟลวดโอ FLV แลวคลดป ม Open

Page 98: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

2 คลกเลอก Embed FLV in SWF and play in timeline แลวคลกป ม next >> next>>finish

1 2

3 4

Page 99: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

3 ภาพดโอจะอยบนพนทสเตจ คลกเครองมอ free transform tool ปรบขนาดวดโอใหเหมาะสม แลวเพมเฟรมใหเทากบไฟลวดโอ กด Ctrl+ Enter

Page 100: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

น ำไฟลดโอเขำมำใชแบบ Load external video ไมตองแปลงไฟล เปนการน าเอาไฟลวดโอลงในงานทเราท าเอาไวดซงเปนการน าเอาไฟลวดโอเขามาแบบ load external video with

playback component

1 คลก Files>Import>Import Video... คลก Browse เพอเลอกไฟลวดโอ คลกเลอกไฟลวดโอ FLV แลวคลดป ม Open

Page 101: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

2 คลกเลอก load external video with playback แลวคลกป ม next >> next>>finish

1 2

3 4

Page 102: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

3 ภาพดโอจะอยบนพนทสเตจ คลกเครองมอ free transform tool ปรบขนาดวดโอใหเหมาะสม แลวเพมเฟรมใหเทากบไฟลวดโอ กด Ctrl+ Enter

ลองหาไฟล FLV จาก youtube มาใช

หากตองการน าไฟล youtube มาใชงานท าไดโดยการใชเวปทใหบรการดาวโหลดไฟลฟร เชน www.keepvid.com www.savetube.com โดยการ copy url ลงมาวางชอง vid แลวเลอกไฟลทเปน .FLV เวปพวกนใชกบ google crome ไมไดนะจะ

Page 103: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

ลองน ำไฟลวดโอเขำมำใชงำน คราว นเราจะลองใสไฟลวดโอลงไปในงานทเราท าไวด แตจะเปนการแปลงไฟลวดโอกอน

1 คลกไฟลทตองการจะใสวดโอกอน เลอก File>Import >import vedio คลกป ม Launch Adobe Media Encoder >cancle

Page 104: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

2.โปรเกรม Adobe Media Encoder จะเปดขนมาอกสวนหนง คลกป ม add

Source เพอเลอกไฟลทจะแปลง เลอกต าแหนงทจะแปลงไฟลทแปลงเสรจแลว คลกป ม strat Queue เพอเรมแปลงไฟล โปรเกรมจะแปลงไฟลจนเสรจแลวปดหนาตาง จากนนนก import video เหมอนเดม

Page 105: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

Publish & Export

น าผลงานทสรางไปใช

Page 106: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

กำรน ำงำนออกไปใช

เมอสรางไฟลเสรจแลว ไฟลทไดจะเปน Flash document (.fla) ซงถาเราน าผลงงานออกไปใชนนจะตองแปลงผลงงานใหเปนรปแบบตางๆกอน เพอความเหมาะสมในหารใชงานโดยมอยดวยกน สองวธคอ การ Publish และการ Export

Publish

คอ การแปลไฟลงานเอกสาร fla ใหเปนไฟล Flash Movie (.swf) แตจดเดนของมนคอสามารถแปลงไฟลไดหลายรปแบบ

Page 107: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

Export เปนการน าเอกสารไปใชไดหลายรปแบบแตจะท าไดทละไฟล ซงจะมอย 2 แบบ export image และ video

แบบภาพนง (Export Image)

เราสามารถเลกไฟลทจะเอกพอสไดหลายนามสกล ไมวาจะเปน .jpec .gif .png

แบบวดโอ Export video

การ export แบบนจะไดภาพวดโอ เชน .avi .mov .gif ไฟลเสยง .wav

และ export ทงมฟวแตจะออกมาเปนภาพนงทเยงกนตงแตเฟรมแรกจนถงเฟรมสดทาย โดยสามารถเลอกไดวาจะเปน sequence แบบไหน

Page 108: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

ลองน ำงำนออกไปใชแบบ Publish

การแปลงไฟลทวไปกจะแปลงจาก fla เปน swf โดยสวนใหญเราจะใชการกดคบอรด คอ clrt+enter แตส าหรบการแปลงไฟลรปแบบอนคอ

เลอกไฟลทเราจะแปลงจากนนน เลอกประเภทของไฟลทจะแปลง คลกเลอกรายละเอยดของไฟล ก าหนดรายละเอยดตางๆ คลกป ม publish > ok

Page 109: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

Flash (.swf) เปนไฟลมฟวของ flash นนเอง สามารถก าหนดรายละเอยดตางๆได

Html (.html) เปนไฟลทสามารถน าไปใชกบ อนเทอเนต การก าหนดตางๆจะเกยวกบการแสดงผลบนบราวเซอรดวย

Gif (.gif) เปนไฟลทใชภาพนง ฟรอภาพเคลอนไหวทเรยกวา gif image นยมใชในเวป หรอท าเปน Emotion ใชเลนใน msn

JPEG(.jpeg) จะเปนไฟลภาพนง การบบอกภาพจะมความแจกจางกนไป โดยไฟล jpeg จะนยมใชภาพทมความละเอยดของสมากๆๆ เชน ภาพทมการไลส หรอวา ภาพถาย

Windows projector(.exe) จะเปนมฟวคลปทจะแสดงผลงานทางหนาจอโปรเจกเตอรระบบชองวนโดวส

Macintosh projector (.app) จะเปนมฟวคลปทจะแสดงผลในระบบปฎบตการของ mac

Page 110: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

ลำงเอำไปใชแบบ Export Image การแปลงไฟลเปนภาพนงโดยเราตองเลอนเพลเฮดไปอยต าแหนงเฟรมทเราตองการกอน แลวจง export ออกมา

1 เปดไฟลทจะ export ออกมา เลอนเพลยเฮดไปทเฟรมทเราตองการ คลก File

>Export >Export Image ตงชอและนามสกลทเราจะ export

Page 111: การใช้งานโปรแกรม FLASH เบื้องต้น · 2015-07-04 · ในการตกแต่งภาพกราฟฟิก งานที่ได้จะเป็นภาพนิ่ง

รปแบบภำพวดโอ Export video

เปนการแปลงไฟลมาในรปแบบของมฟว ไฟลเสยง และยงเปนภาพนงทสามารถน าไปท าใหมนเคลอนไหวไดอกดวย

เปดไฟลทตองการ คลกเลอก File > Export > Export Movie ตงชอไฟลและนามสกลทเราจะเซฟ