รู้จักโปรแกรม Flash

รจู้ ักกับเทคโนโลยีของ Adobe Flash CS5 Professional Flash คืออะไร หากกล่าวกันถึงโปรแกรม Flash ในปัจจุบัน ในแวดวงของนักพัฒนาเว็บไซต์ นักออกแบบ Multimedia หรือเหล่าคนทา Animation คงไม่มีใครไม่รู้จักเจ้าโปรแกรมน้ีเป็นแน่ ในฐานะท่ีเป็นเคร่ืองมือ สร้าง Animation ที่ทรงคุณภาพ และสามารถสร้างงานท่ตี อบโต้กับผู้ใช้ได้อย่างยอดเยี่ยม อีกทั้งยังเป็นท่รี ู้จัก ในฝั่งของผู้ชมในฐานะ Animation ต่ืนตาตื่นใจที่ทาให้การท่องเว็บไซต์ หรือการนั่งชม Presentation ไม่ใช่ ภาพน่งิ ๆ งาน 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 ทีม่ ีรูปแบบเฉพาะตวั อีกดว้ ย

2 งาน Flash แบบ Offline 1. Product Introduction งานเปิดตัวสินค้า งาน Event งานคอนเสิร์ต งานแต่งงาน ที่จะต้องมีการนาเสนอความน่าสนใจ ของสินค้า หรือกิจกรรมต่างๆ การทา Animation อธิบายวิธีการใช้ หรือแนะนากิจกรรมลูกค้า ด้วยโปรแกรม Flash ก็เป็นทางเลือกใหม่ที่กาลังมาแรง ด้วยวิธีการที่สะดวก และประหยัด ค่าใชจ้ ่ายกว่างานด้าน VDO 2. Presentation, CD Interactive เมื่องาน Flash สามารถตอบโต้กับผู้ใช้งานได้ การสร้างงานแบบ Presentation ก็ไม่เป็นปัญหา สาหรับ flash อีกท้ังยังมีประโยชน์ในเรื่องความยืดหยุ่นของการเขียนโปรแกรม จึงเปิดโอกาส ให้สร้างงาน Interactive แบบจินตนาการกว้างไกล โดยไม่ยึดติดอยู่ในโครงร่างตายตัว เหมือนกับ PowerPoint อกี ตอ่ ไป 3. Application ในขั้นสูง การเขียนโปรแกรมช่วยให้สามารถสร้าง Application เฉพาะทางขึ้นเอง เอาไว้ใช้ ส่วนตวั หรอื ใชก้ ันเองในบรษิ ัท ท้ังนย้ี ังมีงานที่สามารถใชไ้ ด้ทงั้ Online และ Offline ได้อีกดว้ ย 1. Full Animation, Cartoon, E-Card, Music Video ไม่ว่าจะเป็นการสร้าง Cartoon บนเวบ็ ไซต์หรือการทา Music Video รวมถึง Animation ที่ส่งไปตาม อีเมล์ ในลักษณะ Electronic-Cards งานประเภทเหล่าน้ีจะใช้โปรแกรม Flash เป็นตัวเลือกแรกๆ ด้วยเหตทุ ่ีกล่าวข้างต้น 2. Games การพัฒนาในส่วนของการเขียนโปรแกรมในช่วงหลังๆ ทาให้ Flash สามารถสร้างเกมท่ีมี ประสิทธิภาพมากขึ้นเรื่อยๆ ถึงแม้ว่าอาจจะยังไม่ใช้เกมท่ีขายได้อย่างจริงจัง แต่มันสามารถได้ซึ่ง flash ทาใหก้ ารสร้างเกมไมใ่ ชเ่ ร่ืองยากจนเกินไป

3 เกย่ี วกบั ทางผผู้ ลิตและเวอรช์ ั่นของโปรแกรม 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 เป็นตน้

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

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

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

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

8 เครื่องมอื สาหรับสรา้ งโครงกระดูก เครื่องมอื สาหรับสร้างโครงกระดูก (Bone Tool) และเคร่ืองมอื (Bind Tool) เป็น เครื่องมือท่ีสามารถเชื่อมต่อโครงกระดกู เพ่ือใสเ่ ขา้ ไปบนการ์ตูน ทาให้การต์ ูนมีการเคลือ่ นไหวท่ีเป็นอสิ ระ มากยิ่งขน้ึ โดยขน้ั ตอนการใช้งานของเคร่ืองมือ (Bone Tool) พาแนล Motion Editor พาแนล Motion Editor เป็นลกู เล่นใหมข่ อง Flash CS5 เพราะจะทาให้เราสามารถปรับแตง่ รายละเอยี ดของการเคล่ือนไหวไดล้ ะเอยี ดขึ้น คาสงั่ Motion Tween รูปแบบใหม่ สาหรบั คาสง่ั Motion Tween ในโปรแกรม Flash เปน็ เวอรช์ นั ล่าสุดนี้จะตา่ งออกไปจากเดิม ไมว่ า่ จะเป็นการใชง้ านในลกั ษณะทีต่ า่ งกนั แล้ว เราจะพบว่ามีลูกเลน่ ใหม่ๆ ทีเ่ สริมขึน้ มาอีกมากมาย

9 สรา้ งงานมัลตมิ เี ดยี ด้วยกราฟกิ รูปแบบของไฟล์รูปภาพกราฟิกที่ใชใ้ นการตกแต่งนัน้ มีหลากหลายรูปแบบแล้วแต่จะใช้เกณฑไ์ หน มาแบ่ง ในท่ีนี้จะแบ่งรูปภาพตามระบบของโปรแกรมกราฟิก โดยเฉพาะในโปรแกรม 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

10 3. คลกิ 1 ครง้ั ท่ี Adobe Flash CS5 กจ็ ะทาการเปดิ หนา้ ตา่ งโปรแกรมข้ึนมาจะปรากฏหน้าจอดงั รูป

11 คลิกเลือกรปู แบบเรม่ิ ตน้ การทางาน คลกิ เลือกสว่ นของการแนะนาโปรแกรม คลิกเพอื่ ดาวนโ์ หลดโปรแกรมหรอื ดขู อ้ มลู จากเวบ็ Adobe คลกิ เลือกในชอ่ งน้ี หากไมต่ ้องการให้แสดงหนา้ จอ Welcome Screen อกี ในครง้ั ตอ่ ไป รปู แบบการทางาน ในขั้นตอนนี้ การเรยี นใชง้ านโปรแกรม จะพบหนา้ จอ Welcome Screen สาหรบั เลือกรูปแบบ เริม่ ต้นการทางานดงั นี้ Open a Recent Item เป็นการเปดิ ไฟลเ์ กา่ ท่สี รา้ งไว้แล้ว โดยคลิกเลอื กรายช่อื ทแ่ี สดง (เรียงจากการ บนั ทกึ ไฟลค์ รง้ั หลังสุดเปน็ ต้นไป สูงสดุ 8 ไฟล์) หรอื คลิก Open เพอ่ื เปดิ ไฟลอ์ ื่น

12 Create New สรา้ งไฟล์ใหม่ โดยคลกิ เลอื กรปู แบบของไฟล์ทตี่ อ้ งการสรา้ ง เช่น เลอื ก Flash File (ActionScript 3.0) เพอ่ื สรา้ งไฟล์มฟู วีใ่ หม่ทมี่ ีโหมดการเขยี น ActionScript เป็นเวอรช์ ั่น 3 เปน็ ต้น สาหรบั เนื้อหาในเลม่ นจ้ี ะแนะนาใหใ้ ช้ ActionScript 2.0 เปน็ หลัก Create From Template สรา้ งไฟล์ใหม่จากรปู แบบเทมดเพลตที่โปรแกรมมีให้โดยคลิกเลือกหมวด ของเทมเพลตท่ีตอ้ งการก่อนแล้วคลกิ เลอื กไฟล์อีกทีหน่ึง ให้คลกิ เลอื กหวั ขอ้ Flash File (ActionScript 2.0) จะพบกบั หนา้ จอดังรูป