unit1

บทท่ี 1 มารูจกั กบั เทคโนโลยี Adobe Flash CS5Flash คอื อะไร 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

2. Presentation, CD Interactiveเม่ืองาน Flash สามารถตอบโตกับผูใชงานได การสรางงานแบบ Presentation ก็ไมเปนปญหาสาํ หรับ flash อีกทั้งยังมีประโยชนในเร่อื งความยืดหยุนของการเขียนโปรแกรม จึงเปดโอกาสใหสรางงาน Interactive แบบจินตนาการกวางไกล โดยไมยึดติดอยูในโครงรางตายตัวเหมือนกับPowerPoint อกี ตอไป 3. Applicationในขั้นสูง การเขียนโปรแกรมชวยใหสามารถสราง Application เฉพาะทางข้ึนเอง เอาไวใชสวนตัวหรอื ใชกันเองในบรษิ ทังาน Flash ทัง้ Online และ Offline 1. Full Animation, Cartoon, E-Card, Music Videoไมวาจะเปนการสราง Cartoon บนเว็บไซตหรือการทํา Music Video รวมถึง Animation ท่ีสงไปตามอีเมล ในลักษณะ Electronic-Cards งานประเภทเหลานี้จะใชโปรแกรม Flash เปนตัวเลือกแรกๆ ดว ยเหตทุ ก่ี ลาวขางตน 2. Gamesการพฒั นาในสว นของการเขยี นโปรแกรมในชวงหลงั ๆ ทําให Flash สามารถสรา งเกมท่ีมีประสิทธภิ าพมากข้ึนเรื่อยๆ ถึงแมวาอาจจะยังไมใชเกมท่ีขายไดอยางจริงจัง แตมันสามารถไดซ่ึง flash ทําใหการสรางเกมไมใชเ รือ่ งยากจนเกินไปเก่ยี วกับทางผูผ ลติ และเวอรชัน่ ของโปรแกรม Flash ขา วใหญใ นแวดวง Web Designer, Graphic Designer หรือ Animator ในชวงท่ผี านมา คงหนีไมพนการที่บริษัทยักษใหญทางดาน Graphic Editor Software อยาง Adobe ที่เปนเจาของSoftware ประจําเครื่องของ Graphic Designer อยาง Photoshop และ Illustrator ไดซื้อ บริษัทMacromedia เจาของ Software ที่เปนมือฉมังทางดานเว็บไซตและเปนผูผลิต Flash เวอรชั่นใหมออกมาพรอมกับหลายๆ โปรแกรมภายใต Series ที่ช่ือ CS5 เพ่ือแสดงถึงความเปนอันหนึ่งอันเดยี วกันของ Adobe นัน่ เองAdobe Flash CS5 หรือ Flash เวอรช่ัน 11 น้ันไดถูกพัฒนาข้ึนโดยอาศัยเทคโนโลยีทางดานGraphic ของ Adobe อยางมากมาย ทําใหการสราง Graphic ใน flash น้ันสะดวกสบายกวาเวอรช ั่นกอ นอีกทั้งยังรองรับเทคโนโลยีที่กําลังมาแรงอยางการใช VDO และการสราง Application สําหรับ

โทรศัพทมอื ถอื เปนอยา งดีอีกดว ย ซ่งึ ความสามารถตางๆ เหลา นจี้ ะไดกลา วถึงในบทตอๆ ไปFlash ใชท ําอะไรไดบาง โปรแกรม Flash เปนโปรแกรมยอดนิยมสําหรับการสรางผลงานไดหลายประเภท ไมวาจะเปนการต ูนแอนเิ มชัน, เกม, สอ่ื โฆษณาบนเว็บไซต หรืออินเตอรเฟสแผน ซีดีทม่ี กี ารตอบโตก ับผใู ช โดยในหัวขอน้ีเราจะมาทําความรูจักกับความสามารถของโปรแกรม Flash ไวเปนแนวทางเพื่อนําไปพัฒนาชน้ิ งานตอไปความสามารถในการสรางชน้ิ งาน Interactiveช้ินงาน Interactive คอื ช้ินงานทีม่ ีการตอบสนองกับผูใช เชน ผูใชส ามารถคลิกเลือกเมนตู างๆ ได ซ่ึงสวนใหญงานประเภท Interactive ท่ีสรางดวยโปรแกรม Flash น้ันจะนําไปใชเปนส่ือการสอน(E-Learning) หรือหนาจอควบคุมการทาํ งานของแผน CD เปนตนความสามารถในการสรา งชนิ้ งาน Animation ความสามารถในการสรางชิ้นงาน Animationการสราง Animation หรือภาพการตูนเคลื่อนไหวนั้น ถือเปนหัวใจหลักของการทํางานในโปรแกรมFlash เนื่องจากมีเครื่องอํานวยความสะดวกมากมาย จึงทําใหโปรแกรม Flash สรางผลงานAnimation ไดงายกวาโปรแกรมอ่ืน ซึ่งเราสามารถพบเห็นงานแอนิเมชันไดทั่วไป ไมวาจะเปนส่ือโฆษณา (Banner) บนเวบ็ ไซต หรอื การตูนแอนิเมชันตางๆ

ความสามารถในการสรางเวบ็ ไซต (Website) งานประเภทเว็บไซต ก็เปนการสรางช้ินงานอีกรปู แบบหน่ึงทใี่ ชโ ปรแกรม Flash สรา งผลงานได เน่ืองจากโปรแกรม Flash สามารถสรางเว็บไซตไดสวยงาม และสรางลูกเลนตางๆ ไดงา ยกวาการใชโ ปรแกรมอืน่ แตมขี อเสียคือ เว็บไซตทสี่ รางดวยโปรแกรม Flash แกไขขอมูลไดยาก และขนาดของไฟลเว็บไซตจะมีขนาดคอนขางใหญ ดังนั้น หากตองการสรางเว็บไซตควรพิจารณาถึงรูปแบบของเว็บไซตก อนวาเหมาระสมทจี่ ะสรา งดวยโปรแกรม Flash หรือไม

ความสามารถในการสรางเกม (Game) ปจจุบันไดมีเกมที่สรางจากโปรแกรม Flash ออกมาอยางแพรหลายตามเว็บไซตตางๆเน่ืองจากโปรแกรม Flash มีเครื่องมือชวยสรางองคประกอบตางๆ ของเกมใหสวยงาม, มีเครื่องมือสําหรับใสคําส่ังควบคุมการเลนเกม อีกทั้งไฟลเกมที่สรางออกมามีขนาดเล็ก ทําใหอัพโหลดข้ึนสูเวบ็ ไซตไดอยา งรวดเร็วเตรียมตวั อยา งไร สําหรบั การสรา งแอนเิ มชนั สําหรับการเตรียมตัวในการทํางานโปรแกรม Flash CS5 นั้น จะตองเร่ิมจากวางโครงรางเรื่องราวแอนิเมชนั หลังจากน้ันก็จะสรางตัวละครใหเหมาะสมกับเรื่องราว สรางฉากแลวน าทุกอยางมาประกอบกนั ใหเ ปนชน้ิ งานวางโครงรางสาํ หรบั สรางงานแอนเิ มชัน (Storyboard) การวางโครงราง (Storyboard) คือการคิดเน้ือเร่ืองขน้ึ มา และวาดออกมาเปนภาพตง่ั แตตนจนจบอยางคราวๆ ซึ่งก็เหมือนกับการวางแผนการทํางานในเบ้ืองตน เพื่อใหผลงานที่ออกมาเปนระบบและรวดเร็ว

สรา งตัวละครสําหรับงานแอนิเมชัน เมื่อเราสรางผลงานแอนิเมชันขึ้นมาสักชิ้นหน่ึง ส่ิงท่ีจําเปนจะตองทําก็คือ การสรางตัวละครเพื่อเปนตัวดําเนินเร่ืองราว โดยตองคิดเนื้อเรื่องข้ึนมากอน วาเราตองการท่ีจะสรางเรื่องราวอะไรขึ้นมา และคนหาเอกลักษณของตวั ละครนน้ั ๆ เพื่อใหตัวละครมีความโดดเดนและนา สนใจ แตสําหรับผูที่ไมมีทักษะทางดานการวาดรปู อาจขอใหเพ่ือน หรือคนรจู ักวาดรูปใหนํามาสแกน แลวปรับแตงเพื่อใชง านในโปรแกรม Flash กไ็ ด 1. วาดโครงรางของตวั ละครดว ยดนิ สอ จากนนั้ นําไปสแกน 2. ใชเ ครื่องมือท่ีมีในโปรแกรม Flash ปรบั ตา งภาพตวั ละคร 3. ลงสี และเก็บรายละเอียดใหก บั ตวั ละครFlash CS5 มีอะไรใหม ในโปรแกรม Flash CS5 แตกตางจากโปรแกรม Flash เวอรชันกอนหนาหลายสวนต้ังแตหนา จอโปรแกรม และเครื่องมอื ใหมๆ ที่เพ่ิมข้นึ มา ซงึ่ จะมอี ะไรบางน้ันเราจะไดเรยี นรูกันในสวนนี้หนาตาของโปรแกรมท่เี ปลีย่ นไป (User Interface) สําหรับโปรแกรม Flash CS5 เวอรชันลาสุด หนาตาของโปรแกรมไดเปลี่ยนไปจากเดิมเปล่ียนตําแหนงการวางแถบเคร่ืองมือตางๆ ทั้ง Timline, Scene และ Panel ตางๆ ทําใหผูที่ใชงานนั้นสามารถทํางานไดสะดวกสบายย่ิงข้นึ

เครือ่ งมือใหมท่ีเพิม่ ขึน้ มา เมื่อเปดโปรแกรม Flash CS5 เราจะเห็นวาเคร่ืองมือใหมๆ เพิ่มข้ึนมาหลายช้ิน โดยแบงออกเปน 5 หมวดหลักๆ ดังตอ ไปน้ีเคร่อื งมอื สําหรับปรบั แตงภาพ 3 มิติเ ค ร่ื อ ง มื อ (3D Rotation Tool) และเครื่องมือ (3D Translation Tool) เปนเครอ่ื งมอื ที่สามารถปรับตา งภาพ หมนุ บดิ ใหออกมาเปน รูปแบบ 3 มิติ ซ่งึ เปนความสามารถทท่ี ําใหเราสรา งงานแอนิเมชันที่ดเู ปน มิตมิ ากยิ่งขน้ึเครื่องมือสาํ หรบั สรา งหัวแปรงทาสี เครื่องมือ (Deco Tool) เปนเครื่องมือสําหรับสรางวัตถุท่ีมีลักษณะคลายๆ กับเครื่องมือแปรงทาสี (Brush) แตเราสามารถสรางหัวแปรงใหม โดยเปลี่ยน Symbol ใหกลายเปนหัวแปรงได

เคร่ืองมอื สําหรบั สรางโครงกระดกู เครอื่ งมอื สําหรบั สรา งโครงกระดกู (Bone Tool) และเครอ่ื งมอื (Bind Tool)เปนเคร่ืองมือที่สามารถเช่ือมตอโครงกระดูกเพื่อใสเขาไปบนการตูน ทําใหการตูนมีการเคลื่อนไหวท่ีเปนอิสระมากย่ิงขึน้ โดยขั้นตอนการใชง านของเคร่อื งมอื (Bone Tool)พาแนล Motion Editor พาแนล Motion Editor เปนลูกเลนใหมของ Flash CS5 เพราะจะทําใหเราสามารถปรบั แตงรายละเอียดของการเคล่อื นไหวไดละเอียดขึ้น

คําส่ัง Motion Tween รปู แบบใหม สําหรับคําสั่ง Motion Tween ในโปรแกรม Flash เปนเวอรชันลาสุดน้ีจะตางออกไปจากเดิม ไมวาจะเปนการใชงานในลักษณะท่ีตางกันแลว เราจะพบวามีลูกเลนใหมๆ ท่ีเสริมข้ึนมาอีกมากมายสรางงานมลั ติมีเดียดว ยกราฟก รูปแบบของไฟลรปู ภาพกราฟกที่ใชใ นการตกแตงนั้นมีหลากหลายรปู แบบแลวแตจะใชเกณฑไหนมาแบง ในที่น้ีจะแบงรูปภาพตามระบบของโปรแกรมกราฟก โดยเฉพาะในโปรแกรม Flash นั้นแบงออกเปน 2 อยาง เม่ือพิจารณาจากรูปเดียวกันแตรูปแบบตางกันเม่ือขยายภาพจะมีรายละเอียดดังน้ีภาพบิตแมป หรือราสเตอร (Bitmap or Raster) เปนภาพท่ีเกิดจากชิ้นสวนเล็ก ๆ ของภาพมาเรียงตอกัน ซ่ึงความละเอียดของช้ินสวนเหลานี้จะเล็กขนาดไหน มีการกําหนดคาความละเอียดของหนาจอ ภาพแบบนี้จะเปนภาพที่มีความละเอียดของสีสันมาก แตเมื่อขยายภาพใหใหญข้ึนก็จะเห็นรอยตอของภาพคลายข้ันบันไดเหมือนกับรูปถายที่

เราไปขยายจากขนาด 4x6 น้ิว ไปเปน 8x10 นิ้ว ก็จะเห็นแกนของรูปภาพขยายขึ้นอยางชัดเจนรูปแบบทพี่ บอยูบอย ๆ คือ ไฟลท ี่มีนามสกุล *.BMP น่นั เองภาพเวคเตอร (Vector Picture) จะเปนภาพท่ีเกิดจากลายเสน แทนท่ีจะเปนช้ินสวนภาพ ดังน้ันเมื่อทําการขยายภาพใหใหญขึ้นโอกาสที่แกนของภาพจะหยาบมีนอย ทําใหขอบของรูปภาพแทบจะไมเห็นเปนขั้นบันไดเลย จึงเหมาะสําหรับการสรางงานกราฟกท่ีตองการความสวยงามมาก ๆหรือการสรางตัวอักษร หรือภาพเคล่ือนไหวในเว็บไซตอยางที่เห็นกันท่ัวไป สําหรับโปรแกรม Flash แลวสวนใหญจะทํางานกับภาพแบบเวคเตอรเปน สว นใหญโดยเรียกช่อื วา ซมิ โบล(Symbol)การเปด โปรแกรม Adobe Flash CS5 1. คลิกเมาสท ่ปี มุ Start บนแถบงานจะเกดิ ปอ ปอพั เมนขู องโปรแกรม 2. นําเมาสเลือกคําสั่ง All Programs เลื่อนเมาสไปที่ Adobe Master Collection CS5>Adobe Flash CS5 Professional 3. คลิก 1 ครั้งที่ Adobe Flash CS5 ก็จะทําการเปดหนาตางโปรแกรมข้ึนมาจะปรากฏหนาจอดงั รปู



รปู แบบการทาํ งานในขั้นตอนน้ี การเรียนใชงานโปรแกรม จะพบหนาจอ Welcome Screen สําหรับเลือกรูปแบบเร่ิมตนการท างานดังนี้ Open a Recent Item เปนการเปดไฟลเกาท่ีสรางไวแลว โดยคลิกเลือกรายชื่อท่ีแสดง(เรียงจากการบนั ทึกไฟลค ร้งั หลังสดุ เปนตน ไป สูงสุด 8 ไฟล) หรอื คลิก Open เพ่อื เปดไฟลอ ่นื Create New สรา งไฟลใหม โดยคลกิ เลือกรปู แบบของไฟลท ่ีตอ งการสราง เชน เลือก FlashFile (ActionScript 3.0) เพ่ือสรางไฟลมฟู วี่ใหมที่มีโหมดการเขียน ActionScript เปนเวอรช่นั 3 เปนตน สาํ หรับเนอื้ หาในเลมนจ้ี ะแนะนาํ ใหใ ช ActionScript 2.0 เปนหลกั Create From Template สรางไฟลใหมจากรูปแบบเทมดเพลตท่ีโปรแกรมมีใหโดยคลิกเลือกหมวดของเทมเพลตทีต่ อ งการกอ นแลวคลกิ เลือกไฟลอ ีกทหี น่งึใหค ลิกเลือกหัวขอ Flash File (ActionScript 2.0) จะพบกบั หนา จอดงั รูป