ความรู้พื้นฐานเกี่ยวกับโปรแกรม Adobe ...

11

Click here to load reader

Transcript of ความรู้พื้นฐานเกี่ยวกับโปรแกรม Adobe ...

Page 1: ความรู้พื้นฐานเกี่ยวกับโปรแกรม  Adobe  FlashCS5

วชาการสรางภาพเคลอนไหว ง30245 โรงเรยนแนงมดวทยา หนา 1  

Flash คออะไร โปรแกรม Flash เปนโปรแกรมททางานในดานมลตมเดยในดานแอนนเมชนตางๆ ทงเวบแอนนเมชน การตนแอนนเมชน งานแบนเนอรภาพเคลอนไหวหรองานมลตมเดยแบบอนเตอรแอคทฟทโตตอบกบผใชงาน งาน Flash นนแบงเปน 2 ประเภทใหญ คอ งาน Online และงาน Offline ซงมงานประเภทตางๆ ดงตอไปน

Flash แบบ Online 1. Web Banner งานปายโฆษณาบนเวบไซตพฒนามาจาก Gif Animation ทโหลดชา และคณภาพตาในสมยกอน มาเปน Animation ของ Flash ทเคลอนไหวตอเนองมขนาดเลกและยงม Graphic ทสวยงาม 2. Web Animation สวนประกอบของเวบไซตทเคยใชเปนภาพนง สามารถสอสาร และดงดดความสนใจไดมากขนดวย Flash 3. Web Introduction ถา 1 ภาพแทนคาพด 1000 คา ภาพเคลอนไหวยอมพดไดมากขนอกหลายเทาตว การใชภาพเคลอนไหวอธบายบคลก ตวตนของเวบไซตเปนอกอยางท Flash ทาไดดและไดรบความนยมอยางสง 4. Flash Website ถาไมใชเวบไซตจะไมเพยงแคตกแตงประดบประดาดวย Flash เทานน มนสามารถใชทาเวบไซตทงกระบวนการไดดวย ไมจากดแคเพยง Animation และเนอหาอยางเดยว หากยงการเชอมโยงกบฐานขอมล และการสราง Application ทมรปแบบเฉพาะตวอกดวย

Flash แบบ Offline 1. Product Introduction งานเปดตวสนคา งาน Event งานคอนเสรต งานแตงงาน ทจะตองมการนาเสนอความนาสนใจของสนคา หรอกจกรรมตางๆ การท า Animation อธบายวธการใช หรอแนะนากจกรรมลกคาดวยโปรแกรม Flash กเปนทางเลอกใหมทกาลงมาแรง ดวยวธการทสะดวก และประหยดคาใชจายกวางานดาน VDO

ใบความรท 1 เรอง ความรพนฐานเกยวกบโปรแกรม Adobe Flash CS5

วชาการสรางภาพเคลอนไหว ชน ม.6 เวลา 2 ชวโมง ครผสอน ครจรฐชญา ปาแปง

Page 2: ความรู้พื้นฐานเกี่ยวกับโปรแกรม  Adobe  FlashCS5

วชาการสรางภาพเคลอนไหว ง30245 โรงเรยนแนงมดวทยา หนา 2  

2. Presentation, CD Interactive เมองาน Flash สามารถตอบโตกบผใชงานได การสรางงานแบบ Presentation กไมเปนปญหาสาหรบ flash อกทงยงมประโยชนในเรองความยดหยนของการเขยนโปรแกรม จงเปดโอกาสใหสรางงาน Interactive แบบจนตนาการกวางไกล โดยไมยดตดอยในโครงรางตายตวเหมอนกบ PowerPoint อกตอไป 3. Application ในขนสง การเขยนโปรแกรมชวยใหสามารถสราง Application เฉพาะทางขนเอง เอาไวใชสวนตว หรอใชกนเองในบรษท

Flash ทาอะไรไดบาง โปรแกรม Flash เปนโปรแกรมยอดนยมสาหรบการสรางผลงานไดหลายประเภท ไมวาจะเปนการตนแอนเมชน, เกม, สอโฆษณาบนเวบไซต หรออนเตอรเฟสแผนซดทมการตอบโตกบผใช โดยในหวขอนเราจะมาทาความรจกกบความสามารถของโปรแกรม Flash ไวเปนแนวทางเพอนาไปพฒนาชนงานตอไป 1. ความสามารถในการสรางชนงาน Interactive ชนงาน Interactive คอ ชนงานทม

การตอบสนองกบผใช เชน ผใชสามารถคลกเลอกเมนตางๆ ได ซงสวนใหญงานประเภท Interactive

ทสรางดวยโปรแกรม Flash นนจะนาไปใชเปนสอการสอน (E-Learning) หรอหนาจอควบคมการ

ทางานของแผน CD เปนตน

2. ความสามารถในการสรางชนงาน Animation การสราง Animation หรอภาพ

การตนเคลอนไหวนน ถอเปนหวใจหลกของการทางานในโปรแกรม Flash เนองจากมเครองอานวย

ความสะดวกมากมาย จงทาใหโปรแกรม Flash สรางผลงาน Animation ไดงายกวาโปรแกรมอน

Page 3: ความรู้พื้นฐานเกี่ยวกับโปรแกรม  Adobe  FlashCS5

วชาการสรางภาพเคลอนไหว ง30245 โรงเรยนแนงมดวทยา หนา 3  

ซงเราสามารถพบเหนงานแอนเมชนไดทวไป ไมวาจะเปนสอโฆษณา (Banner) บนเวบไซต

หรอการตนแอนเมชนตางๆ

3. ความสามารถในการสรางเวบไซต (Website)

งานประเภทเวบไซตกเปนการสรางชนงานอกรปแบบหนงทใชโปรแกรม Flash สรางผลงาน

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

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

ไฟลเวบไซตจะมขนาดคอนขางใหญ ดงนน หากตองการสรางเวบไซตควรพจารณาถงรปแบบของ

เวบไซตกอนวาเหมาระสมทจะสรางดวยโปรแกรม Flash หรอไม

Page 4: ความรู้พื้นฐานเกี่ยวกับโปรแกรม  Adobe  FlashCS5

วชาการสรางภาพเคลอนไหว ง30245 โรงเรยนแนงมดวทยา หนา 4  

4. ความสามารถในการสรางเกม (Game) ปจจบนไดมเกมทสรางจากโปรแกรม Flash

ออกมาอยางแพรหลายตามเวบไซตตางๆ เนองจากโปรแกรม Flash มเครองมอชวยสราง

องคประกอบตางๆ ของเกมใหสวยงาม, มเครองมอสาหรบใสคาสงควบคมการเลนเกม อกทงไฟลเกม

ทสรางออกมามขนาดเลก ทาใหอพโหลดขนสเวบไซตไดอยางรวดเรว

เตรยมตวอยางไรสาหรบการสรางแอนเมชน

สาหรบการเตรยมตวในการทางานโปรแกรม Flash CS5 นน จะตองเรมจากวางโครงราง

เรองราวแอนเมชน หลงจากนนกจะสรางตวละครใหเหมาะสมกบเรองราว สรางฉากแลวนา

ทกอยางมาประกอบกนใหเปนชนงาน 

วางโครงรางสาหรบสรางงานแอนเมชน (Storyboard)

การวางโครงราง (Storyboard) คอการคดเนอเรองขนมา และวาดออกมาเปนภาพตงแตตน

จนจบอยางคราวๆ ซงกเหมอนกบการวางแผนการท างานในเบองตน เพอใหผลงานทออกมาเปน

ระบบและรวดเรว

Page 5: ความรู้พื้นฐานเกี่ยวกับโปรแกรม  Adobe  FlashCS5

วชาการสรางภาพเคลอนไหว ง30245 โรงเรยนแนงมดวทยา หนา 5  

สรางตวละครสาหรบงานแอนเมชน

เมอเราสรางผลงานแอนเมชนขนมาสกชนหนง สงทจาเปนจะตองทากคอ การสรางตวละคร

เพอเปนตวดาเนนเรองราว โดยตองคดเนอเรองขนมากอน วาเราตองการทจะสรางเรองราวอะไร

ขนมา และคนหาเอกลกษณของตวละครนนๆ เพอใหตวละครมความโดดเดนและนาสนใจ แตสาหรบ

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

ใชงานในโปรแกรม Flash กได  

   1. วาดโครงรางของตวละครดวยดนสอ จากนนนาไปสแกน

2. ใชเครองมอทมในโปรแกรม Flash ปรบตางภาพตวละคร

3. ลงส และเกบรายละเอยดใหกบตวละคร

Flash CS5 มอะไรใหม

ในโปรแกรม Flash CS5 แตกตางจากโปรแกรม Flash เวอรชนกอนหนาหลายสวนตงแต

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

หนาตาของโปรแกรมทเปลยนไป (User Interface)

สาหรบโปรแกรม Flash CS5 เวอรชนลาสด หนาตาของโปรแกรมไดเปลยนไปจากเดม

เปลยนตาแหนงการวางแถบเครองมอตางๆ ทง Timline, Scene และ Panel ตางๆ ทาใหผทใชงาน

นนสามารถทางานไดสะดวกสบายยงขน 

Page 6: ความรู้พื้นฐานเกี่ยวกับโปรแกรม  Adobe  FlashCS5

วชาการสรางภาพเคลอนไหว ง30245 โรงเรยนแนงมดวทยา หนา 6  

เครองมอใหมทเพมขนมา

เมอเปดโปรแกรม Flash CS5 เราจะเหนวาเครองมอใหมๆ เพมขนมาหลายชน โดยแบง

ออกเปน 5 หมวดหลกๆ ดงตอไปน 

เครองมอสาหรบปรบแตงภาพ 3 มต

เครองมอ (3D Rotation Tool) และเครองมอ (3D Translation Tool)

เปนเครองมอทสามารถปรบตางภาพ หมน บด ใหออกมาเปนรปแบบ 3 มต ซงเปนความสามารถททา

ใหเราสรางงานแอนเมชนทดเปนมตมากยงขน 

เครองมอสาหรบสรางหวแปรงทาส

เครองมอ (Deco Tool) เปนเครองมอส าหรบสรางวตถทมลกษณะคลายๆ กบ

เครองมอแปรงทาส (Brush) แตเราสามารถสรางหวแปรงใหม โดยเปลยน Symbol ใหกลายเปนหว

แปรงได

Page 7: ความรู้พื้นฐานเกี่ยวกับโปรแกรม  Adobe  FlashCS5

วชาการสรางภาพเคลอนไหว ง30245 โรงเรยนแนงมดวทยา หนา 7  

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

พาแนล Motion Editor

พาแนล Motion Editor เปนลกเลนใหมของ Flash CS5 เพราะจะทาใหเราสามารถ

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

Page 8: ความรู้พื้นฐานเกี่ยวกับโปรแกรม  Adobe  FlashCS5

วชาการสรางภาพเคลอนไหว ง30245 โรงเรยนแนงมดวทยา หนา 8  

คาสง Motion Tween รปแบบใหม

สาหรบคาสง Motion Tween ในโปรแกรม Flash เปนเวอรชนลาสดนจะตางออกไปจาก

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

มากมาย

สรางงานมลตมเดยดวยกราฟก

รปแบบของไฟลรปภาพกราฟกทใชในการตกแตงนนมหลากหลายรปแบบแลวแตจะใชเกณฑ

ไหนมาแบง ในทนจะแบงรปภาพตามระบบของโปรแกรมกราฟก โดยเฉพาะในโปรแกรม Flash นน

แบงออกเปน 2 อยาง เมอพจารณาจากรปเดยวกนแตรปแบบตางกนเมอขยายภาพจะมรายละเอยด

ดงน 

ภาพบตแมป หรอราสเตอร (Bitmap or Raster)

เปนภาพทเกดจากชนสวนเลกๆ ของภาพมาเรยงตอกน ซงความละเอยดของชนสวนเหลาน

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

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

เราไปขยายจากขนาด 4x6 นว ไปเปน 8x10 นว กจะเหนแกนของรปภาพขยายขนอยางชดเจน

รปแบบทพบอยบอยๆ คอ ไฟลทมนามสกล *.BMP นนเอง 

ภาพเวคเตอร (Vector Picture)

จะเปนภาพทเกดจากลายเสน แทนทจะเปนชนสวนภาพ ดงนนเมอทาการขยายภาพใหใหญ

ขนโอกาสทแกนของภาพจะหยาบมนอย ทาใหขอบของรปภาพแทบจะไมเหนเปนขนบนไดเลย จง

เหมาะสาหรบการสรางงานกราฟกทตองการความสวยงามมากๆหรอการสรางตวอกษร หรอ

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

ภาพแบบเวคเตอรเปนสวนใหญโดยเรยกชอวา ซมโบล (Symbol)

Page 9: ความรู้พื้นฐานเกี่ยวกับโปรแกรม  Adobe  FlashCS5

วชาการสรางภาพเคลอนไหว ง30245 โรงเรยนแนงมดวทยา หนา 9  

การเปดโปรแกรม Adobe Flash CS5 ขนมาใช

1. คลกเมาสทปม Start บนแถบงานจะเกดปอปอพเมนของโปรแกรม

2. นาเมาสเลอกคาสง All Programs เลอนเมาสไปท Adobe Master Collection CS5>

Adobe Flash CS5 Professional 

3. คลก 1 ครงท Adobe Flash CS5 กจะทาการเปดหนาตางโปรแกรมขนมาจะปรากฏหนาจอดงรป

Page 10: ความรู้พื้นฐานเกี่ยวกับโปรแกรม  Adobe  FlashCS5

วชาการสรางภาพเคลอนไหว ง30245 โรงเรยนแนงมดวทยา หนา 10  

รปแบบการทางาน

ในขนตอนน การเรยนใชงานโปรแกรม จะพบหนาจอ Welcome Screen สาหรบเลอก

รปแบบเรมตนการทางานดงน

Open a Recent Item เปนการเปดไฟลเกาทสรางไวแลว โดยคลกเลอกรายชอทแสดง

(เรยงจากการบนทกไฟลครงหลงสดเปนตนไป สงสด 8 ไฟล) หรอคลก Open เพอเปดไฟลอน

Page 11: ความรู้พื้นฐานเกี่ยวกับโปรแกรม  Adobe  FlashCS5

วชาการสรางภาพเคลอนไหว ง30245 โรงเรยนแนงมดวทยา หนา 11  

Create New สรางไฟลใหม โดยคลกเลอกรปแบบของไฟลทตองการสราง เชน เลอก

Flash File (Action Script 3.0) เพอสรางไฟลมฟวใหมทมโหมดการเขยน Action Script

เปนเวอรชน 3 เปนตน สาหรบเนอหาในวชานจะแนะนาใหใช Action Script 2.0 เปนหลก

Create From Template สรางไฟลใหมจากรปแบบเทมดเพลตทโปรแกรมมใหโดย

คลกเลอกหมวดของเทมเพลตทตองการกอนแลวคลกเลอกไฟลอกทหนง

ใหคลกเลอกหวขอ Flash File (Action Script 2.0) จะพบกบหนาจอดงรป