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

2 เรื่อง รู้จกั กบั เทคโนโลยขี อง 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

3 ถา้ ไม่ใชเ้ วบ็ ไซตจ์ ะไม่เพียงแค่ตกแต่งประดบั ประดาดว้ ย Flash เทา่ น้นั มนั สามารถใชท้ าเวบ็ ไซตท์ ้งั กระบวนการได้ดว้ ย ไม่จากัดแค่เพียง Animation และเน้ือหาอย่างเดียว หากยงั การเช่ือมโยงกับ ฐานขอ้ มูล และการสร้าง Application ท่ีมีรูปแบบเฉพาะตวั อีกดว้ ย งาน 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

4 การพัฒนาในส่วนของการเขียนโปรแกรมในช่วงหลังๆ ทาให้ 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 เป็ นตน้

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

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

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

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

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

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

11 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 ก็จะทาการเปิ ดหนา้ ต่างโปรแกรมข้ึนมาจะปรากฏหนา้ จอดงั รูป

12 คลกิ เลอื กรูปแบบเริ่มต้นการทางาน คลกิ เลอื กสว่ นของการแนะนาโปรแกรม คลกิ เพื่อดาวน์โหลดโปรแกรมหรือ ดขู ้อมลู จากเวบ็ Adobe

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

14