 tamcomed50 Download
โปรแกรม Flash CS6 เบื้องต้น โปรแกรม Flash CS6 เบื้องต้น Like this book? You can publish your book online for free in a few minutes!Create your own flipbook View Text Version Likes : 0 Category : All Report
โปรแกรม Flash CS6 เบื้องต้น แฟลชมีเครื่องมืออำนวยความสะดวกในการสร้างภาพเคลื่อนไหวและงานมัลติมีเดียได้เป็นอย่างดี และมีภาษาโปรแกรมสำหรับใช้ควบคุมการทำงานของชิ้นงาน นอกจากนี้งานที่สร้างโดย Flash จะได้ไฟล์ชิ้นงานที่มีขนาดเล็กทำให้สามารถนำมาเผยแพร่บนอินเทอร์เน็ต เพราะโหลดมาแสดงผลได้อย่างรวดเร็ว แฟลช จึงเป็นอีกทางเลือกสำหรับการนำเสนอข้อมูลบนเว็บที่ได้มีการนำภาพเคลื่อนไหวและมัลติมีเดียมาใช้อย่างแพร่หลายเพื่อดึงดูดความสนใจของผู้ชมซึ่งในอดีตการทำเช่นนี้ต้องอาศัยเทคนิคการเขียนโปรแกรมบนเว็บที่ยุ่งยากและซับซ้อนแถมไฟล์ผลงานที่สร้างยังมีขนาดใหญ่อีกด้วย ทำให้หน้าเว็บนั้นโหลดช้ามากจนผู้ใช้อาจไม่สามารถทนรอได้ โปรแกรม Flash คืออะไร ? โปรแกรม Flash เป็นซอฟต์แวร์ที่ช่วยในการสร้างสื่อมัลติมีเดีย, ภาพเคลื่อนไหว (Animation), ภาพกราฟิกที่มีความคมชัด เนื่องจากเป็นกราฟิกแบบเว็คเตอร์(Vector), สามารถเล่นเสียงและวีดิโอ แบบสเตริโอได้, สามารถสร้างงานให้โต้ตอบกับผู้ใช้(Interactive Multimedia) มีฟังก์ชั่นสำหรับการเขียนโปรแกรม (Action Script) และยังทำงานในลักษณะ CGI โดยเชื่อมต่อกับการเขียนโปรแกรมภาษาอื่นๆ ได้มากมาย เช่น ภาษา PHP, JSP, ASP, ASP.NET, C/C++, C#, C#.NET, VB, VB.NET, JAVAและอื่นๆ โดยเฉพาะข้อดีของโปรแกรม Flash คือ ความสามารถในการบีบอัดไฟล์ให้มีขนาดเล็ก มีผลทำให้แสดงผลได้อย่างรวดเร็ว นอกจากนั้นยังแปลงไฟล์ไปอยู่ในฟอร์แมตอื่น ได้หลากหลาย เช่น avi, mov, gif, wav, emf,eps, ai, dxf, bmp, jpg, gif, png เป็นต้น โปรแกรม Flash เริ่มมีชื่อเสียงประมาณปี พ.ศ. 2539 จนถึง ปัจจุบันได้ถูกนำมาใช้งานอย่างแพร่หลาย โดยเฉพาะเทคโนโลยีเว็บ ทำให้การนำเสนอทำได้อย่างน่าสนใจ นอกจากนั้น โปรแกรม Flash ยังสามารถสร้างแอพพลิเคชั่น (Application) เพื่อใช้ทำงานต่างๆ รองรับการใช้งานกับอุปกรณ์ที่ เชื่อมต่อกับระบบเครือข่ายอินเตอร์เน็ต และทำงานได้กับหลายๆ แฟลตฟอร์ม (Platform) ขั้นท่ี 4 คลกิ เฟรมที่ 20 แล้วกดปมุ่ Delete ลบวตั ถเุ ดิมออกตอนนีบ้ นไทม์ไลน์จะมแี ถบเสน้ ประสเี ขียว ขน้ั ที่ 5 วาดรูปท่ตี ้องการใหเ้ ปล่ยี นลงไปในเฟรมที่ 20 ขั้นท่ี 6 กดปุ่ม Ctrl+Enter เพื่อทดสอบการเปล่ยี นแปลงจะเหน็ ภาพค่อยๆเปล่ียนจากรูปหนึ่งเปน็ อกี รูปหน่ึง captainpemjeak Download
คู่มือออนไลน์การติดตั้ง1โปรแกรม adobe flash cs6 คู่มือออนไลน์การติดตั้ง1โปรแกรม adobe flash cs6 Like this book? You can publish your book online for free in a few minutes!Create your own flipbook View Text Version Likes : 0 Category : All Report
คู่มือออนไลน์การติดตั้ง1โปรแกรม adobe flash cs6 สารบัญ บทที่ 1 ท�ำความร้จู ักกราฟิกและแอนเิ มชัน 1 บทที่ 3 สรา้ งช้นิ งานจากเครอ่ื งมือของ ท�ำความรู้จกั ส ี 2 โปรแกรม Flash CS6 43 การจดั องค์ประกอบภาพ 3 ลักษณะการวาดและการก�ำหนดส ี 44 ความแตกตา่ งระหวา่ งภาพกราฟกิ 2 - 3 มติ ิ 3 การก�ำหนดสพี ืน้ และสีเส้นก่อนการวาด 45 รปู แบบกราฟิกที่ใช้งานบน Flash 4 สร้างเส้นตรงด้วยเคร่อื งมอื Line Tool 46 การสรา้ งภาพเคลือ่ นไหว สรา้ งเสน้ อิสระดว้ ยเคร่อื งมือ Pencil 48 (Animation Basic) 5 สร้างรปู ทรงเรขาคณิต 49 ขั้นตอนการสร้างแอนเิ มชัน 6 สร้างรปู ทรงวงกลมหรอื วงรีด้วย Oval สรุปท้ายบท 8 และ Oval Primitive 52 แบบทดสอบและกิจกรรมการฝึกทกั ษะ 9 สรา้ งรูปทรงอิสระดว้ ยเครอ่ื งมอื ใบงานท่ี 1.1 12 Pen Tool 54 ใบงานที่ 1.2 13 การปรบั แตง่ รปู ทรง 55 การระบายสีภาพ 57 การลบสพี ้ืนหรือเส้น 60 บทท่ี 2 เริ่มตน้ รู้จกั กับเทคโนโลยขี อง Adobe การเตมิ ลวดลายใหร้ ปู ภาพ 62 Flash CS6 14 Adobe Flash คอื อะไร 15 สรุปทา้ ยบท 64 แบบทดสอบและกจิ กรรมการฝึกทักษะ 65 ประเภทของไฟล์ Flash 16 ใบงานท่ี 3.1 67 หนา้ โปรแกรม Flash 16 ส่วนประกอบของโปรแกรม Flash 17 ใบงานที่ 3.2 69 การเปดิ โปรแกรม Flash 20 บทที่ 4 การสรา้ งและเพิ่มกลเม็ดใหต้ ัวอกั ษร การปดิ โปรแกรม Flash 23 การบันทึกไฟล์เอกสาร 23 Flash CS6 71 การจดั องค์ประกอบของหนา้ จอ 24 การสร้างขอ้ ความ 72 การจัดการฟอนต์ในมฟู วด่ี ้วย การก�ำหนดคณุ สมบัติของเอกสาร 25 Embedded Font 76 การปรบั ขนาดการมองภาพ 26 เคร่อื งมอื ชว่ ยกะระยะและจัดวาง การสรา้ งขอ้ ความไดนามิกและอนิ พุต 78 ปรับแต่งขอ้ ความดว้ ยเคร่อื งมอื 82 ออบเจ็กต ์ 28 การใส่ลงิ ค์ใหก้ บั ข้อความ 86 รูปแบบกราฟกิ ทใ่ี ชง้ านบน Flash 29 สรปุ ท้ายบท 37 การแก้วรรณยุกตล์ อย 87 สรปุ ท้ายบท 88 แบบทดสอบและกิจกรรมการฝึกทักษะ 38 แบบทดสอบและกจิ กรรมการฝกึ ทักษะ 89 ใบงานท่ี 2.1 40 ใบงานท่ี 2.2 40 ใบงานที่ 4.1 91 ใบงานที่ 4.2 93 บทท่ี 5 เตมิ แต่งแต้มสภี าพดว้ ยสีสนั ให ้ บทท่ี 7 ให้ Layer ชว่ ยจดั การภาพทซี่ บั ซอ้ น 154 97 เลเยอร์ (Layer) สวยงาม 98 การใชง้ านเลเยอร์ 155 155 ความรพู้ ื้นฐานเก่ยี วกับส ี 100 เทคนิคการใชเ้ ลเยอรม์ าสค์ การเลอื กสีเสน้ และสีพนื้ การเลอื กใช้สจี ากพาเนล (Layer Mask) 160 102 ก�ำหนดทิศทางการเคลอ่ื นทด่ี ว้ ย Color Swatches 103 ไกด์เลเยอร์ (Guide Layer) 165 การเลือกใชส้ เี กรเดียนท ์ การก�ำหนดความโปร่งใสของสี (Alpha) 108 สรุปทา้ ยบท 168 109 แบบทดสอบและกจิ กรรมการฝกึ ทักษะ 169 การก�ำหนดสีดว้ ยภาพบติ แมป ใบงานที่ 7.1 171 การเปลี่ยนสีและคณุ สมบตั ขิ องเสน้ ด้วยเคร่ืองมือ Ink Bottle Tool 113 ใบงานที่ 7.2 176 การเตมิ สพี ้ืนดว้ ยเครอ่ื งมือ Paint Bucket Tool 114 บทท่ี 8 การสรา้ งผลงาน Animation ดว้ ย การดูดสภี าพอน่ื มาใช้ดว้ ย เครอ่ื งมือ Eyedropper Tool 115 โปรแกรม Adobe Flash CS6 182 การเลอื กสใี หเ้ หมาะสมตามตอ้ งการ 115 สรุปทา้ ยบท 116 แนวคิดพืน้ ฐานส�ำหรับการสรา้ ง 183 แบบทดสอบและกิจกรรมการฝึกทกั ษะ 117 233 ใบงานที่ 5.1 119 ภาพเคลอื่ นไหว 234 ใบงานที่ 5.2 121 สร้างการเคล่อื นไหวดว้ ยตวั เอง การสรา้ งภาพเคล่ือนไหวแบบแยกเฟรม (Cell Animation/Frame by Frame) การเคลือ่ นไหวแบบย้ายต�ำแหนง่ ด้วย Motion Tween 237 บทท่ี 6 รจู้ ักกบั Timeline และ Frame 123 การเคลอ่ื นไหวแบบย้ายต�ำแหน่งด้วย รู้จักกบั Timeline 124 Shape Tween 240 รจู้ กั กับเลเยอร์ (Layer) 125 การปรบั แตง่ ออบเจก็ ตใ์ หเ้ คลอ่ื นไหว เฟรม (Frame) 125 แบบ 3 มิต ิ 241 ซนี (Scene) 142 การเคลือ่ นไหวดว้ ยการสร้าง สรุปทา้ ยบท 146 Bone & Bind Tool 243 แบบทดสอบและกจิ กรรมการฝกึ ทกั ษะ 147 สรุปทา้ ยบท 245 ใบงานที่ 6.1 150 แบบทดสอบและกจิ กรรมการฝกึ ทกั ษะ 246 ใบงานที่ 6.2 152 ใบงานท่ี 8.1 248 ใบงานที่ 8.2 252 บทที่ 9 การเพิม่ เสียงประกอบในช้ินงาน บทที่ 11 การจดั ทำ� โครงงานยอ่ ยและการสรา้ ง เพอ่ื ความเพลดิ เพลนิ 256 Flash Animation 2 มติ แิ ละ 3 มติ ิ 313 258 การสร้างปุ่ม 314 การอมิ พอรต์ เสียง 317 การใส่เสยี งประกอบตลอดการแสดง 259 การท�ำแอนเิ มชนั สนุ ัขกะพริบตา การปรบั แต่งเสียง 265 การสรา้ งหนา้ เว็บลิงค์ 321 267 การสรา้ งไฟล์แอนิเมชนั 3 มิติ วธิ ีบีบอัดและปรับคุณภาพขอ้ มูล 325 แนวทางในการใสเ่ สยี งไปกบั มฟู วข่ี อง Flash 269 การสร้างภาพแบบ 3 มิติ 329 269 สรปุ ท้ายบท 344 สรปุ ทา้ ยบท แบบทดสอบและกิจกรรมการฝึกทกั ษะ 270 แบบทดสอบและกิจกรรมการฝกึ ทกั ษะ 345 272 ใบงานท่ี 11.1 348 ใบงานที่ 9.1 274 ใบงานท่ี 11.2 364 ใบงานท่ี 9.2 บทท่ี 10 การนำ� เสนอผลงานให้แพร่หลาย 277 ค�ำถามเพื่อการทบทวน 374 380 การพับลิชเอกสาร Flash 278 คำ� ศัพท ์ 389 เอ็กซพ์ อรต์ ไฟลส์ �ำหรับน�ำไปใชใ้ น ส่ืออื่น ๆ 292 สรุปท้ายบท 309 บรรณานกุ รม แบบทดสอบและกจิ กรรมการฝกึ ทักษะ 310 ใบงานที่ 10.1 312 ใบงานที่ 10.2 312 Adobe Flash CS6 1บทที่ ทำ� ความรูจ้ ักกราฟกิ และ แอนิเมชนั จุดประสงค์เชงิ พฤติกรรม (Behavioral Objectives) หลังจากศึกษาจบบทเรยี นนีแ้ ล้ว นักศึกษาจะมคี วามสามารถดังน้ี 1. บอกนยิ ามของแม่สีและวงจรสีได้ 2. ระบุคณุ ลกั ษณะของสโี ทนร้อนและสีโทนเย็นได้ 3. จดั องคป์ ระกอบภาพได้ 4. เปรยี บเทยี บความแตกต่างระหว่างภาพกราฟกิ 2 มติ ิและ 3 มิตไิ ด้ 5. จ�ำ แนกรูปแบบกราฟกิ ทใ่ี ช้งานบน Flash ได้ 6. สรา้ งภาพเคล่อื นไหวได้ 7. บอกขน้ั ตอนการสร้างแอนเิ มชนั ได้ Adobe2Flash CS6 บทท่ี 1 ท�ำ ความรจู้ กั กราฟกิ และแอนิเมชนั 1บทท่ี ทำ�ความร้จู กั กราฟิก และแอนเิ มชนั การนำ�เสนองานในปัจจุบัน มีการนำ�เสนอท้ังในส่วนของภาพเคลื่อนไหวและเสียง ซ่ึงโปรแกรม Flash กถ็ อื เปน็ โปรแกรมทใ่ี ชท้ �ำ งานในดา้ นกราฟกิ ดว้ ย ไมว่ า่ จะเปน็ ตวั อกั ษร รปู ภาพ สตี า่ ง ๆ โดย Flash สามารถวาดภาพ ลงสี และท�ำ การบนั ทกึ เป็นไฟลภ์ าพชนิดตา่ ง ๆ ได้ ท�ำ ความรจู้ ักสี แม่สี คือ สีท่ีน�ำมาผสมกันแล้วท�ำให้เกิดสีใหม่ที่มีลักษณะแตกต่างไปจากสีเดิม โดยแม่สี ได้แก่ แดง เหลอื ง น�้ำเงนิ 1. สีของแสง คือ ความแตกต่างส้ันยาวของคลน่ื แสงท่เี รามองเหน็ 2. สขี องสาร คอื สที เ่ี รามองเหน็ บนวตั ถตุ า่ ง ๆ เกดิ จากการดดู ซมึ และสะทอ้ นความยาวคลน่ื แสง วงจรสี คือ การวางเน้ือสีโดยเรียงตามการผสมสีของสารที่เรามองเห็น โดยแบ่งสีเป็น 2 กลุ่ม ตามอุณหภมู ิของสคี อื สโี ทนร้อน และสโี ทนเยน็ 1. สโี ทนรอ้ น ใหค้ วามรสู้ กึ มพี ลงั อบอนุ่ สนกุ สนาน และดงึ ดดู ความสนใจไดด้ ี ประกอบดว้ ย สสี ม้ เหลอื ง สสี ม้ สสี ้มแดง สแี ดง และสีม่วงแดง 2. สโี ทนเยน็ จะใหค้ วามรสู้ กึ สงบ เยอื กเยน็ ลกึ ลบั มรี ะดบั ประกอบดว้ ย สเี ขยี วเหลอื ง สเี ขยี ว สเี ขยี วนำ้� เงนิ สนี ำ�้ เงนิ และสมี ว่ งนำ้� เงนิ สโี ทนรอ้ น สโี ทนเยน็ การสรา้ งภาพเคล่อื นไหวเบ้อื งต้น Adobe Flas3h CS6 การจดั องคป์ ระกอบภาพ ในการจัดองค์ประกอบของภาพน้นั เราต้องหาจุดเด่นของช้นิ งาน โดยการจับประเด็นความหมาย ของงานและท�ำ ใหผ้ ชู้ มเขา้ ใจความหมายทเ่ี ราตง้ั ใจออกแบบไว้ 1. วางจดุ สนใจในงานอาจจะใหก้ �ำ หนดตวั เลขล�ำ ดบั ความส�ำ คญั ลงไปในชน้ิ งาน 2. สรา้ งความแตกตา่ งในงานในลกั ษณะนค้ี วรระวงั ไมใ่ หอ้ งคป์ ระกอบมคี วามแตกตา่ งมากจนเกนิ ไป จนท�ำ ใหช้ น้ิ งานดแู ตกแยกไมเ่ ปน็ ชน้ิ งานเดยี วกนั 3. วางแยกองค์ประกอบให้โดดเด่น การวางองค์ประกอบให้โดดเด่น ให้แยกออกมาห่างจาก องคป์ ระกอบอน่ื ๆ เปน็ วธิ ที ท่ี �ำ ใหผ้ ชู้ มสงั เกตเหน็ ไดง้ า่ ย ความแตกตา่ งระหวา่ งภาพกราฟกิ 2 - 3 มติ ิ กราฟิกแบบ 2 มิติ เป็นภาพท่ีคุ้นเคยและพบเห็นโดยท่ัวไป เช่น ภาพถา่ ย ภาพวาด ภาพลายเสน้ สญั ลกั ษณต์ า่ ง ๆ กราฟิกแบบ 3 มิติ เป็นภาพกราฟิกท่ีใช้โปรแกรมสร้างภาพ 3 มิติ โดยเฉพาะ เช่น โปรแกรม Maya จะคุ้นเคยกับภาพยนตร์หรือการ์ตูน แอนิเมชัน 3 มิติ Adobe4Flash CS6 บทที่ 1 ท�ำ ความรูจ้ ักกราฟิกและแอนิเมชนั รปู แบบกราฟกิ ท่ใี ชง้ านบน Flash การสร้างภาพกราฟิกมี 2 วิธี วธิ ีแรก คือ การใชเ้ ครอ่ื งมือใน Flash สรา้ งขึ้นมา และวธิ ที ่ี 2 คือ การนำ�เข้าจากภายนอก เช่น ภาพถ่ายหรือภาพที่วาดมาจากโปรแกรมกราฟิกต่าง ๆ โดยแบ่งออกเป็น 2 ประเภท ดังนี้ ภาพบิตแมปหรือราสเตอร์ (Bitmap or Raster Picture) เป็นภาพที่เกิดจากจุดสี ซึ่งประกอบกนั เปน็ รูปรา่ ง ซ่งึ ความละเอยี ดของจดุ สเี หล่านีจ้ ะมกี ารก�ำ หนดขนาดในหนว่ ยพิกเซล (Pixel) ภาพชนิดนสี้ ามารถแสดงรายละเอยี ดได้ใกลเ้ คยี งภาพจรงิ ซงึ่ จะมีความละเอยี ดสงู นามสกุลที่ใช้เก็บแฟ้มภาพกราฟิกแบบ Raster มีหลายนามสกุล เช่น .BMP, .DIB, .JPG, .JPEG, .JPE, .GIF, .TIFF, .TIF, .PCX, .MSP, .PCD, .FPX, .IMG, .MAC, .MSP และ .TGA เป็นต้น ซ่ึงลกั ษณะของแฟ้มภาพจะแตกต่างกันไป นามสกลุ ทีใ่ ช้เกบ็ ลักษณะงาน .JPG, .JPEG, .JPE ใชส้ �ำหรับรูปภาพท่ัวไป และงานท่มี คี วามจ�ำกดั ด้านพ้นื ท่ีหน่วยความจ�ำไฟล์ กราฟิกมาตรฐานท่ีท�ำงานบนอนิ เทอร์เน็ต .GIF .TIFF, .TIF เหมาะส�ำหรบั งานด้านนิตยสาร เพราะมีความละเอียดของภาพสงู .BMP, .DIB ไฟล์มาตรฐานของระบบปฏิบัติการวินโดว์ .PCX เปน็ ไฟล์ดัง้ เดิมของโปรแกรมแกไ้ ขภาพแบบบติ แมป ไมม่ โี มเดลเกรยส์ เกล ภาพเวคเตอร์ (Vector Picture) จะเป็นภาพที่เกิดจากลายเส้น ภาพชนิดนี้สามารถปรับหรือ ย่อขนาดได้ตามต้องการ โดยไม่มีผลต่อความละเอียดของภาพ จึงเหมาะสำ�หรับการสร้างงานกราฟิก ท่ีต้องการความสวยงามมาก ๆ นามสกลุ ที่ใชเ้ กบ็ แฟม้ ภาพกราฟกิ แบบ Vector มหี ลายนามสกุล เช่น .EPS, .WMF, .CDR, .AI, .CGM, .DRW, .PLT, .DXF, .PIC และ .PGL เปน็ ตน้ นามสกุลที่ใชเ้ กบ็ ลกั ษณะงาน .AI ใชส้ �ำหรับงานที่ตอ้ งการความละเอยี ดของภาพมาก เชน่ การสร้างการ์ตนู .EPS การสร้างโลโก้การค้า ส�ำนกั งาน เปน็ ตน้ .WMF ไฟล์มาตรฐานของโปรแกรม Microsoft Office การสร้างภาพเคลอ่ื นไหวเบ้อื งต้น Adobe Flas5h CS6 เวคเตอร์ (Vector) ราสเตอร์ (Raster) ออบเจก็ ตส์ รา้ งขนึ้ มาจากสูตรทางคณติ ศาสตร์ ออบเจ็กต์สร้างจากช่องสีเ่ หล่ียมเลก็ ๆ ท่ีเรยี กวา่ “พิกเซล” เหมาะส�ำหรับการสร้างตัวอกั ษรหรืองานทเี่ ปน็ เหมาะส�ำหรับงานท่ตี อ้ งการความละเอียดของสี เชน่ โลโกส้ ินคา้ และสามารถแสดงบนเว็บไซตไ์ ด้ รปู ถ่าย รวดเรว็ ผลงานทส่ี ร้างขึ้นจะมไี ฟลข์ นาดเล็ก ผลงานทส่ี รา้ งข้นึ จะมีไฟลข์ นาดใหญ่ เม่ือท�ำการขยายขนาดจะไม่ท�ำให้คุณภาพของ เม่ือท�ำการขยายขนาดจะท�ำให้งานที่ได้มีคุณภาพ งานลดลง ลดลง การสร้างภาพแอนิเมชันน้ันทำ�ได้อยู่ 2 วิธี คือการสร้างภาพเคล่ือนไหวแบบเฟรมต่อเฟรม โดย เราจะต้องระบุการเคล่ือนไหวของภาพไปทุกเฟรม และการสร้างภาพเคลื่อนไหวแบบทวีน ในแบบนี้เรา สามารถก�ำ หนดเฉพาะบางเฟรมท่ีสำ�คัญ ๆ ได้ แลว้ โปรแกรมจะสรา้ งเฟรมเพิ่มเตมิ ให้เองโดยอัตโนมตั ิ เอฟเฟ็กต์การเคลื่อนไหวสามารถทำ�ได้หลายแบบด้วยกัน ไม่ว่าจะเป็นการเคลื่อนท่ีไปตาม ทศิ ทางตา่ ง ๆ หรอื การเปลย่ี นแปลงรปู รา่ ง เชน่ เพม่ิ – ลดขนาด หมนุ เปลย่ี นสี รวมไปถงึ การแปรเปลย่ี น ไปเปน็ รปู รา่ งแบบอน่ื ๆ ซง่ึ การเคลอ่ื นไหวนน้ั อาจเกดิ ขน้ึ เอฟเฟก็ ตเ์ ดยี ว หรอื หลายเอฟเฟก็ ตพ์ รอ้ ม ๆ กนั ก็ได้ การสรา้ งภาพเคลอ่ื นไหว (Animation Basic) ภาพเคลื่อนไหว คือ ลำ�ดับของภาพสมจริงหรือภาพโครงร่างท่ีแสดงอย่างต่อเน่ืองกัน อยา่ งรวดเรว็ อาจจะมกี ารใสล่ กู เล่นหรอื เอฟเฟ็กตใ์ หก้ ารเคล่อื นไหวดูน่าสนใจยง่ิ ขึ้น สายตาของมนษุ ยเ์ ราน้นั สามารถพจิ ารณาภาพทป่ี รากฏอยเู่ บือ้ งหนา้ เพอื่ ท่ีจะแยกออกว่าแตล่ ะภาพ ที่กำ�ลังแสดงอยู่น้ันมีลักษณะท่ีแตกต่างกันอย่างไร และจุดไหนบ้างที่แตกต่างกันนั้น จะต้องใช้เวลา ในการตั้งหลกั อย่ทู ี่ประมาณ 10 ภาพ ในเวลา 1 วินาที หากวา่ มจี ำ�นวนภาพที่มากกวา่ นมี้ าแสดงให้เหน็ ผ่านสายตาในเวลา 1 วินาที ก็จะไม่สามารถแยกแยะในรายละเอียดได้ ซึ่งหากมองเห็นเป็นภาพท่ีมีการ ขยับอยู่ตลอดเวลาและมีความเร็วในการขยับท่ีเร็วมากก็จะสังเกตเห็นภาพในลักษณะท่ีมัว จนไม่สามารถ สังเกตเห็นข้อแตกต่างของแต่ละภาพได้ แต่ข้อแตกต่างท่ีเห็นนั้นก็คือ ภาพขยับจากช้า ๆ ไปจนเร็วทำ�ให้ เกิดภาพทมี่ วั ขึ้นน่นั เอง Adobe6Flash CS6 บทที่ 1 ทำ�ความร้จู ักกราฟิกและแอนิเมชนั สำ�หรับการปรับให้มีการแสดงภาพท่ีมีจุดแตกต่างกันเล็กน้อยอย่างต่อเน่ืองเพียงช่ัวพริบตาเดียว ก็จะเห็นว่าภาพนิ่งมีการเคล่ือนไหวหรือขยับอยู่อย่างต่อเน่ืองได้ เป็นหลักการที่มีผู้ประดิษฐ์ฟิล์ม ภาพยนตร์ขึ้นมาแล้วใช้แสงส่องผ่านลำ�ดับฟิล์มเหล่านั้นหลาย ๆ เฟรมต่อเน่ืองกันอย่างรวดเร็วพอที่ สายตามนษุ ยจ์ ะไม่สามารถแยกแยะออกว่าเป็นภาพน่งิ ได้ ทำ�ให้เกิดการเคล่อื นไหวขน้ึ เปน็ เร่อื งราว ในท่นี ้ี จะเปรยี บเทียบระหวา่ งฟิล์มภาพยนตร์และโปรแกรม Adobe Flash CS6 ได้ดังน้ี 1. ฟลิ ม์ 1 ช่องเปรียบได้กบั เฟรมแตล่ ะเฟรมใน Adobe Flash CS6 2. ความกวา้ ง ความยาวของชอ่ งฟลิ ์ม ก็จะเปรยี บไดก้ ับขนาดความกวา้ งของ Stage นน่ั เอง 3. ความเรว็ ของการหมนุ ของมว้ นฟลิ ม์ จะเทยี บไดก้ บั ความเรว็ ของหวั อา่ นทเ่ี ฟรม ยง่ิ มคี า่ มาก ๆ การแสดงภาพเคล่อื นไหวก็จะนมุ่ นวล สมจรงิ มากยิ่งขน้ึ 4. แฟลชมูฟวี่ (Flash Movie) ท่ีเกิดจากเฟรมหลาย ๆ เฟรมและเลเยอร์หลายเลเยอร์ ประกอบเข้าด้วยกันและทำ�งานสัมพันธ์กัน สามารถเทียบได้กับภาพยนตร์ 1 เรื่อง หรือ 1 ตอน จะเกิด ม้วนฟิลม์ ท้ังหมดท่ฉี ายไปยังจอภาพตงั้ แต่ต้นเรอ่ื งจนจบ 5. แฟลชมูฟว่ีก็มีความสามารถแสดงได้ท้ังภาพและเสียงพร้อม ๆ กันเหมือนกับภาพยนตร์ที่มี ท้ังภาพและเสียงไดเ้ หมือนกัน ขน้ั ตอนการสรา้ งแอนเิ มชนั การสร้างแอนิเมชันแต่ละตัวนั้นอาจมีความซับซ้อนมากน้อยไม่เท่ากันข้ึนอยู่กับรายละเอียดของ ช้นิ งานนน้ั ๆ โดยองคป์ ระกอบแตล่ ะขน้ั ตอนมีดงั น้ี ขัน้ ตอนที่ 1 การวางโครงเร่ือง การวางโครงเรื่องเป็นการวางแผนว่าจะทำ�แอนิเมชันไปในแนวทางไหน มีรายละเอียดอย่างไร และวตั ถปุ ระสงคข์ องแอนิเมชันเปน็ อยา่ งไร แล้วรวบรวมเขียนไว้ครา่ ว ๆ ซ่ึงเรยี กวา่ “Storyboard” คือ การสร้างภาพให้เห็นลำ�ดับขั้นตอนตามเน้ือเรื่องท่ีต้องการ สำ�หรับ “Storyboard” อาจมีท้ังภาพ เสียง ขอ้ ความ ซง่ึ จะตอ้ งมกี ารจดั เตรยี มขน้ึ มากอ่ นทจ่ี ะไปจดั ท�ำ แอนเิ มชนั โดยวาดภาพลงกระดาษหรอื น�ำ ภาพ มาวางแทนการวาดโดยแสดงรายละเอียดให้เป็นภาพครา่ ว ๆ การสรา้ งภาพเคล่อื นไหวเบื้องตน้ Adobe Flas7h CS6 เสยี ง................................................................................................................................. รายละเอยี ด..................................................................................................................... ...................................................................................................................................... ...................................................................................................................................... ข้นั ตอนที่ 2 การจดั เตรยี มองคป์ ระกอบของงาน (Pre - Production) เป็นข้ันตอนท่ีสำ�คัญก่อนเร่ิมงาน ได้แก่ การเตรียมข้อมูลต่าง ๆ เช่น รูปภาพที่นำ�มาใช้เป็น องคป์ ระกอบในงาน โดยเราสามารถวาดไดจ้ าก Flash โดยตรง หรอื ภาพจากการวาดดว้ ยโปรแกรมอน่ื ๆ หรือภาพถ่าย และไฟล์เสยี งหรอื ไฟล์วิดีโอท่มี าใช้ประกอบ ข้นั ตอนที่ 3 การสร้างช้ินงาน (Production) เป็นการนำ�ไฟล์ภาพและเสียงท่ีเราได้เตรียมไว้มาทำ�แอนิเมชันประกอบเป็นช้ินงานตามที่เราได้ ทำ�การออกแบบไว้ Adobe8Flash CS6 บทท่ี 1 ท�ำ ความรจู้ ักกราฟกิ และแอนิเมชัน ข้ันตอนท่ี 4 การแปลงชิน้ งาน (Post - Production) เป็นข้ันตอน Publish เป็นชิ้นงานแอนิเมชันท่ีเราได้ทำ�การสร้างเสร็จแล้ว มาเป็นไฟล์เพ่ือไปใช้ ในรูปแบบที่ตอ้ งการ โดยชน้ิ งาน Flash จะอย่ใู นรูปแบบนามสกุล .swf สรปุ ทา้ ยบท กราฟิกและแอนิเมชันเป็นความรู้เบ้ืองต้นก่อนการใช้งานโปรแกรม Flash โดยเน้ือหากราฟิก เบ้ืองต้นแบง่ ออกเปน็ เรื่องสี ซ่ึงสีแบง่ ออกเป็นสีโทนร้อนและสีโทนเยน็ ชนดิ ภาพ 2 มติ ิ 3 มิติ และไฟลภ์ าพ ซ่ึงแบ่งออกเป็นภาพบิตแมปหรือราสเตอร์และภาพเวคเตอร์ และในส่วนของเน้ือหา ภาพเคล่ือนไหว แอนิเมชัน ซึ่งคือลำ�ดับของภาพสมจริงหรือภาพโครงร่างท่ีแสดงอย่างต่อเน่ืองกันอย่างรวดเร็ว อาจจะมี การใส่ลกู เลน่ หรือเอฟเฟ็กต์ใหก้ ารเคลื่อนไหวดนู า่ สนใจยิ่งขน้ึ โดยวธิ กี ารสรา้ งภาพแอนเิ มชนั แบง่ ออกเปน็ 4 ขน้ั ตอน ขน้ั ตอนท่ี 1 การวางโครงเรอ่ื ง ขน้ั ตอนท่ี 2 การจัดเตรียมองค์ประกอบของงาน (Pre - Production) ข้ันตอนที่ 3 การสร้างชิ้นงาน (Production) และข้ันตอนท่ี 4 การแปลงชนิ้ งาน (Post - Production) การสร้างภาพเคล่อื นไหวเบอื้ งตน้ Adobe Flas9h CS6 แบบทดสอบและกจิ กรรมการฝกึ ทักษะ บทที่ 1 ทำ� ความรู้จักกราฟกิ และแอนเิ มชัน ตอนที่ 1 : อธบิ าย (หมายถึง การใหร้ ายละเอยี ดเพม่ิ เติม ขยายความ ถ้ามีตวั อยา่ งใหย้ กตวั อย่าง ประกอบ) 1. แม่สีคืออะไร และมสี ีอะไรบา้ ง 2. วงจรสคี ืออะไร และสามารถแบง่ ตามอุณหภมู ขิ องสีได้ก่กี ลมุ่ อะไรบ้าง จงอธิบาย 3. การจัดองคป์ ระกอบของภาพนน้ั เราต้องค�ำนงึ ถึงอะไรบา้ ง จงอธบิ าย 4. กราฟิกแบบ 2 มติ ิ คืออะไร 5. กราฟกิ แบบ 3 มติ ิ คอื อะไร 6. การสรา้ งภาพกราฟกิ ในโปรแกรมแฟลชสามารถท�ำไดก้ ว่ี ิธี อะไรบ้าง 7. ภาพบิตแมปหรือราสเตอร์ (Bitmap or Raster) คอื อะไร 8. ภาพเวคเตอร์ (Vector Picture) คืออะไร 9. การสร้างภาพแอนเิ มชันนนั้ ท�ำได้ก่วี ธิ ี อะไรบ้าง จงอธบิ าย 10. ภาพเคล่อื นไหวคืออะไร จงอธบิ าย ตอนที่ 2 : จงเลอื กคำ� ตอบทถ่ี กู ตอ้ งท่ีสดุ เพียงข้อเดยี ว 1. แมส่ ีคือข้อใด ก. สที ี่น�ำมาผสมกันแลว้ ท�ำให้เกดิ สใี หมท่ ี่มีลกั ษณะแตกต่างไปจากสเี ดมิ ข. สีทน่ี �ำมาผสมกนั แลว้ ท�ำให้เกิดสเี ดิมทมี่ ลี กั ษณะไมแ่ ตกตา่ งไปจากสีเดิม ค. สที นี่ �ำมาผสมกนั แล้วท�ำให้เกดิ ขาวท่มี ลี กั ษณะแตกตา่ งไปจากสีเดมิ ง. สีทน่ี �ำมาผสมกนั แล้วท�ำให้เกิดด�ำที่มลี ักษณะแตกตา่ งไปจากสเี ดิม 2. ข้อใดคอื แมส่ ที ถ่ี กู ต้อง ก. ด�ำ ขาว แดง ข. แดง เหลือง น้ำ� เงิน ค. ม่วง เขยี ว สม้ ง. ด�ำ ขาว เทา Adobe1F0lash CS6 บทท่ี 1 ท�ำ ความรจู้ กั กราฟิกและแอนเิ มชัน 3. ข้อใดคือสีที่เรามองเห็นบนวัตถตุ า่ ง ๆ ทเ่ี กดิ จากการดูดซมึ และสะท้อนความยาวคลื่นแสง ก. สโี ทนเย็น ข. สีของแสง ค. สขี องสาร ง. สีโทนร้อน 4. วงจรสแี บง่ เปน็ ก่ีกล่มุ ตามอณุ หภูมขิ องสี ก. 5 กล่มุ ข. 4 กลุม่ ค. 3 กลุม่ ง. 2 กล่มุ 5. ข้อใดจดั อยู่ในสีโทนร้อน ก. สีเขียว ข. สสี ้ม ค. สีนำ้� เงนิ ง. สเี ขียวเหลือง 6. สีม่วงน�้ำเงินให้ความรสู้ ึกในขอ้ ใด ก. ใหค้ วามรูส้ ึกสงบ เยอื กเย็น ข. ให้ความรูส้ กึ มีพลงั ค. ใหค้ วามร้สู ึกอบอนุ่ ง. ให้ความร้สู ึกสนุกสนาน 7. ภาพทเี่ กดิ จากชน้ิ สว่ นเลก็ ๆ ของภาพมาเรยี งต่อกัน ซึ่งความละเอียดของชิน้ สว่ นเหลา่ นีจ้ ะมกี าร ก�ำหนดขนาดในหนว่ ยพิกเซล (Pixel) คอื ข้อใด ก. ภาพบติ แมปหรือราสเตอร ์ ข. ภาพเวคเตอร์ ค. ภาพ 2 มติ ิ ง. ภาพ 3 มิติ 8. ภาพกราฟิกแบบ Raster มหี ลายนามสกุลข้อใดไม่ใช่ ก. .JPG ข. .GIF ค. .TIFF ง. .AI 9. ถา้ เราตอ้ งการปรบั ภาพโดยไม่มีผลต่อความละเอยี ดของภาพ เพือ่ ให้ไดง้ านกราฟิกทีส่ วยงามเราตอ้ ง ใช้รูปภาพชนดิ ใด ก. ภาพบิตแมปหรอื ราสเตอร์ ข. ภาพเวคเตอร์ ค. ภาพ 2 มติ ิ ง. ภาพ 3 มติ ิ 10. ไฟลภ์ าพนามสกลุ ใดที่เหมาะส�ำหรับงานทีต่ ้องการความละเอียดของภาพมาก เช่น การสร้างการต์ ูน ก. .JPEG ข. .GIF ค. .AI ง. .BMP การสร้างภาพเคลอื่ นไหวเบ้ืองต้น Adobe Fla1s1h CS6 ตอนท่ี 3 : อธิบายคำ� ศัพท์ (หมายถงึ การใหร้ ายละเอยี ดเพ่มิ เตมิ ขยายความ ถา้ มีตวั อย่างให้ยก ตัวอยา่ งประกอบ) 1. แม่สี 2. วงจรสี 3. Bitmap or Raster 4. Vector Picture 5. Animation Basic 6. Flash Movie 7. Storyboard 8. Production 9. Pre - Production 10. Post - Production Adobe12Flash CS6 บทที่ 1 ทำ�ความรู้จักกราฟกิ และอนเิ มชน่ั ใบงานท่ี 1.1 เนื้อหาในบทเรียนบทที่ 1 จะมีเนื้อหาที่เก่ียวข้องกับวงจรสี ให้นักศึกษาค้นหารูปภาพที่สื่อถึง การให้สโี ทนรอ้ นและสีโทนเย็น มาอย่างละ 1 รูป พรอ้ มแสดงความคดิ เห็นวา่ รปู ทีน่ กั ศึกษาค้นหามานัน้ ใหค้ วามร้สู ึกอยา่ งไรบา้ งตามความคดิ เหน็ ของนักศกึ ษาเอง สโี ทนรอ้ น ……………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………… สโี ทนเยน็ ……………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………… การสร้างภาพเคลื่อนไหวเบอ้ื งตน้ Adobe Fla1s3h CS6 ใบงานท่ี 1.2 ภาพท่ี 1 ภาพท่ี 2 จากภาพตวั อยา่ งทก่ี �ำ หนด ใหน้ กั ศกึ ษาเลอื กภาพตวั อยา่ งทช่ี อบ พรอ้ มแสดงความคดิ เหน็ ถงึ การจดั องคป์ ระกอบของภาพ และการเลอื กใชส้ ขี องภาพนน้ั วา่ เปน็ อยา่ งไร ……………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………… Adobe Flash CS6 2บทท่ี เริ่มต้นรู้จักกับเทคโนโลยีของ Adobe Flash CS6 จดุ ประสงค์เชิงพฤติกรรม (Behavioral Objectives) หลงั จากศึกษาจบบทเรยี นนี้แล้ว นักศกึ ษาจะมคี วามสามารถดงั นี้ 1. สรปุ ประวตั แิ ละการพฒั นาของ Adobe Flash CS6 ได้ 2. ระบคุ วามสามารถของโปรแกรม Adobe Flash CS6 ได้ 3. บอกประเภทของไฟล์ Flash ได้ 4. ระบชุ อ่ื หน้าตา่ งของหน้าโปรแกรม Flash ได้ 5. อธิบายสว่ นประกอบของโปรแกรม Flash ได้ 6. ปฏบิ ัตกิ ารเปิด - ปดิ โปรแกรม Flash ได้ 7. บนั ทกึ ไฟลเ์ อกสารได้ 8. จัดองคป์ ระกอบของหน้าจอได้ 9. ปรบั ขนาดสเตจและเปลีย่ นสพี ื้นสเตจได้ 10. ปฏบิ ัตกิ ารปรับขนาดการมองภาพได้ 11. จ�ำ แนกรูปแบบกราฟิกท่ใี ชง้ านบน Flash ได้ 12. ปฏิบัตกิ ารสรา้ งซิมโบลทัง้ 3 ชนิดได้ 13. ปฏิบตั ิการเรียกใชง้ านและปรบั แต่งอนิ สแตนซไ์ ด้ การสร้างภาพเคลอ่ื นไหวเบอื้ งตน้บทท่ี เร่ิมต้นรจู้ ักกับเทคโนโลยีของAdobe Fla1s5h CS6 2 CS6Adobe Flash โปรแกรม Adobe Flash เป็นโปรแกรมสำ�หรับสร้างสรรค์งานกราฟิก ภาพเคล่ือนไหว เช่น ตวั อกั ษร ภาพ เสยี ง และยงั สามารถท�ำ เกมหรอื เวบ็ ไซต์ทีม่ ีลูกเล่นแอนิเมชนั สวยงามได้ด้วย Adobe Flash คอื อะไร อะโดบี แฟลช (Adobe Flash) (ในชอ่ื เดมิ Shockwave Flash และ Macromedia Flash) เป็น โปรแกรมที่ใช้ในการเขียนสื่อมัลติมีเดียท่ีเอาไว้ใช้สร้างเนื้อหาเกี่ยวกับแอนิเมชัน ซึ่งตัว Flash Player พัฒนาและเผยแพร่โดยอะโดบซี สิ เตม็ ส์ (เรม่ิ ตน้ พฒั นาโดยบรษิ ทั ฟวิ เจอรแ์ วร์ ตอนหลังเปล่ยี นเป็นแมโคร มเี ดยี ซง่ึ ภายหลงั ถกู ควบรวมกจิ การเขา้ กบั อะโดบ)ี ซง่ึ เปน็ โปรแกรมที่ทำ�ให้เว็บบราวเซอร์สามารถแสดง ตัวเองได้ ซ่ึงมีความสามารถในการรองรบั ภาพแบบเวคเตอรแ์ ละภาพแบบราสเตอร์ และมีภาษาสคริปต์ ที่เอาไว้ใช้เขียนโดยเฉพาะเรียกว่า แอ็กชันสคริปต์ (ActionScript) และยังสามารถเล่นเสียงและวิดีโอ แบบสเตรโิ อได้ แตใ่ นความหมายจรงิ ๆ แลว้ แฟลช คอื โปรแกรมแบบ Integrated Development Environment (IDE) เป็นโปรแกรมประยุกต์ซอฟต์แวร์ ซ่งึ อำ�นวยความสะดวกใหแ้ กผ่ เู้ ขียนโปรแกรมคอมพวิ เตอรใ์ นการ พฒั นาซอฟตแ์ วร์ และ Flash Player คอื Virtual Machine ทใ่ี ชใ้ นการท�ำ งานของไฟลแ์ ฟลช ซง่ึ ในภาษาพดู เราจะเรียกทั้งสองคำ�น้ีในความหมายเดียวกัน “Flash” ยังสามารถหมายถึง โปรแกรมเคร่ืองมือต่าง ๆ ตัวแสดงไฟลห์ รือไฟล์โปรแกรมแฟลชเริม่ มชี ่ือเสียงประมาณปี ค.ศ. 1996 หลงั จากนัน้ เทคโนโลยีแฟลช ได้กลายมาเป็นท่ีนิยมในการเสนอแอนิเมชันและปฏิสัมพันธ์ (Interactive) ในเว็บเพจ และในโปรแกรม หลาย ๆ โปรแกรม ระบบและเครอื่ งมือตา่ ง ๆ ทีม่ คี วามสามารถในการแสดงแฟลชได้ และแฟลชยังเป็นที่ นิยมในการใชส้ รา้ งคอมพิวเตอรแ์ อนเิ มชนั โฆษณา ออกแบบส่วนต่าง ๆ ของเว็บเพจ ใสว่ ดิ โี อบนเว็บ เกม แบบทดสอบ และอน่ื ๆ อีกมากมาย Adobe1F6lash CS6 บทท่ี 2 เริ่มตน้ รู้จักกบั เทคโนโลยีของ Adobe Flash CS6 ความสามารถของโปรแกรม Adobe Flash โปรแกรม Adobe Flash เปน็ โปรแกรมทใ่ี ชง้ านกราฟกิ ทง้ั ในรปู แบบ 2 มติ ิ และ 3 มติ ิ รวมถงึ การใชต้ กแตง่ เวบ็ ไซด์ นอกจากนย้ี งั พบชน้ิ งาน Flash ในลกั ษณะ เกมส์ สอ่ื โฆษณา หรอื อนิ เตอรเ์ ฟสตา่ งๆ ที่ ต้องการให้มีการโต้ตอบกับผู้ใช้ ทั้งนี้จะเห็นได้ว่าความสามารถในการสร้างชิ้นงานของโปรแกรม Adobe Flash น้นั มีความหลากหลายโดยอาจแบ่งการสร้างช้นิ งานตามความสามารถไดด้ ังน้ี การสรา้ งชน้ิ งาน Interactive ชน้ิ งาน Interactive คอื การสรา้ งชน้ิ งานทม่ี สี ว่ นตอบสนองกบั ผใู้ ช้ เชน่ ผใู้ ชส้ ามารถคลกิ เลอื กเมนู ตา่ ง ๆ น�ำ ไปประยกุ ตเ์ ปน็ สอ่ื การสอน (e-Learning) หนา้ จอควบคมุ การท�ำ งานตา่ งๆ สอ่ื โฆษณา (Banner) เวบ็ ไซต์ การต์ นู แอนเิ มชนั ตา่ งๆ เปน็ ตน้ การสรา้ งชน้ิ งาน Animation นับเป็นอีกจุดเด่นของการทำ�งานในโปรแกรม Adobe Flash คือการสร้าง Animation หรือ ภาพเคลอ่ื นไหว ซง่ึ โปรแกรม Adobe Flash มเี ครอ่ื งมอื อ�ำ นวยความสะดวก ท�ำ ให้ Adobe Flash สามารถ สรา้ งผลงาน Animation ไดง้ า่ ย และประยกุ ตใ์ ชไ้ ดห้ ลากหลายวตั ถปุ ระสงค์ การสรา้ งเวบ็ ไซต์ (Website) โปรแกรม Adobe Flash สามารถสรา้ งเวบ็ ไซตไ์ ดส้ วยงาม และสรา้ งลกู เลน่ ตา่ งๆ ไดง้ า่ ย แตม่ ี ข้อจำ�กัดบางประการคือ เว็บไซต์ท่สี ร้างด้วยโปรแกรม Adobe Flash อาจแก้ไขข้อมุลู ได้ยาก และขนาด ของไฟลเ์ วบ็ ไซตค์ อ่ นขา้ งใหญ่ การสรา้ งเกมส์ (Game) โปรแกรม Adobe Flash มีเครื่องมือช่วยสร้างองค์ประกอบต่างๆ ให้เกมส์มีความสวยงาม มีเครื่องมอื สำ�หรับสรา้ งค�ำ สงั่ ควบคุมการเล่นเกมส์ อกี ทงั้ ไฟล์เกมส์ท่สี ร้างออกมามขี นาดเลก็ นอกจากนี้ ยงั รองรบั หลายแพตฟรอม ทง้ั ใน PC Website และ Mobile ท�ำ ใหร้ องรบั ความตอ้ งการของนกั พฒั นาเกมส์ รวมถึงผู้เลน่ ได้เปน็ อย่างดี การสร้างภาพเคลือ่ นไหวเบ้ืองตน้ Adobe Fla1s7h CS6 ประเภทของไฟล์ Flash Flash Document มฟี อร์แมตเปน็ .fla เปน็ ไฟลท์ ี่ได้จากการบนั ทกึ ในขั้นตอนการสร้างชนิ้ งาน โดยไฟลจ์ ะจดั เกบ็ ขอ้ มลู ตา่ ง ๆ ไมว่ า่ จะเปน็ รปู ภาพ ไฟลเ์ สยี ง และอน่ื ๆ ทไ่ี ดท้ �ำ การสรา้ งขน้ึ มาจะบนั ทกึ กนั อยใู่ นไฟล์น้ี Flash Movie มฟี อรแ์ มตเปน็ .swf ไฟลน์ เ้ี ปน็ ผลลพั ธส์ ดุ ทา้ ย ซง่ึ จะไดจ้ ากการพบั ลชิ (Publish) ไฟล์เอกสารข้างต้น เพ่อื นำ�ไปเผยแพร่และแสดงด้วยโปรแกรม Flash Player นอกจากนี้ก็อาจมีไฟล์อ่ืน ๆ ที่เก่ียวข้องอีก โดยขึ้นอยู่กับเน้ือหาของช้ินงานและวิธีการพับลิช รวมไปถึงรปู แบบของการสร้าง เช่น ไฟล์ .flv ซึง่ เป็นไฟลว์ ดิ โี อ (Flash Video) ที่ไดจ้ ากการอิมพอรต์ เขา้ มาใชง้ าน ไฟล์ as เปน็ ไฟลท์ ่ีเกบ็ ซอร์สโค้ดของโปรแกรม ActionScript ไฟล์ .exe จะได้ผลเหมอื นกบั ไฟล์ .swf แตไ่ มต่ อ้ งใชโ้ ปรแกรม Flash Player ในการแสดงผล หรอื ไฟล์ .html ซ่งึ เป็นเว็บเพจทใี่ ช้แสดงมฟู ว่ี เปน็ ตน้ หนา้ โปรแกรม Flash 3 1 2 เมอ่ื ไดท้ �ำ การเปดิ โปรแกรม Flash จะไดพ้ บกบั หนา้ ตา่ งดงั รปู ทกุ ครง้ั ทไ่ี ดใ้ ชง้ านโปรแกรม โดยแบง่ เปน็ ดงั น้ี 1. Create from Template เลือกไฟล์สร้างงานใหม่จะเป็นการเลือกรูปแบบไฟล์งานสำ�เร็จรูป ใหเ้ หมาะสมกบั การท�ำ งาน Adobe1F8lash CS6 บทที่ 2 เรม่ิ ต้นรจู้ ักกับเทคโนโลยขี อง Adobe Flash CS6 2. Open a Recent Item เลือกไฟลจ์ ากทเ่ี ราไดเ้ คยท�ำ งานไว้ โดยเลอื กท่ี Open เพอ่ื ไปยงั ไฟล์ ทีเ่ คยทำ�งานไว้ 3. Create New เลอื กสรา้ งไฟลใ์ หม่ โดยเลอื กชนดิ ไฟลใ์ นรปู แบบตา่ ง ๆ เชน่ ActionScript 3.0 ที่ใชส้ ำ�หรับการท�ำ งานในรปู แบบของค�ำ สัง่ ActionScript 3.0 เป็นต้น สว่ นประกอบของโปรแกรม Flash 1. Menu Bar 2. Stage 3. Properties 4. Timeline 5. Tool Box ประกอบดว้ ย 1. Menu Bar (เมนบู าร)์ เปน็ สว่ นส�ำ หรบั แสดงรายการค�ำ สง่ั ตา่ งๆ ของโปรแกรม 2. Stage (สเตจ) เปน็ สว่ นทเ่ี ราก�ำ หนดขอบเขตขนาดของการท�ำ งาน เปน็ พน้ื ทส่ี ว่ นทใ่ี ชใ้ นการวาง วตั ถตุ า่ ง ๆ หรอื อาจจะเรยี กวา่ “เวท”ี เมอ่ื มกี ารน�ำ เสนอผลงานจะแสดงเฉพาะวตั ถบุ น Stage นเ้ี ทา่ นน้ั 3. Properties (พร็อพเพอร์ต้)ี เป็นส่วนกำ�หนดคุณสมบัติให้กับวัตถุต่างๆ ท่เี ราใช้งาน ท้งั การ ก�ำ หนดคา่ ตา่ ง ๆ หรอื การปรบั ปรงุ เปลย่ี นแปลงแกไ้ ขวตั ถไุ หนกน็ �ำ เมาสไ์ ปคลกิ ทว่ี ตั ถนุ น้ั กอ่ น 4. Timeline (ไทมไ์ ลน)์ มไี วส้ �ำ หรบั ควบคมุ การท�ำ งานและก�ำ หนดการน�ำ เสนอผลงาน ตลอดจน การเคลอ่ื นไหวตา่ ง ๆ การสรา้ งภาพเคล่อื นไหวเบอื้ งต้น Adobe Fla1s9h CS6 5. Toolbox (ทลู บอ๊ กซ)์ เปน็ กลมุ่ ของเครอ่ื งมอื ในการสรา้ งงานและจดั การวตั ถตุ า่ ง ๆ ซง่ึ ประกอบ ดว้ ยปมุ่ เครอ่ื งมอื ยอ่ ยตา่ ง ๆ ทใ่ี ชใ้ นการสรา้ งงาน กล่องเครอื่ งมอื (Toolbox) กล่องเครื่องมอื จะรวบรวมเคร่ืองมอื ตา่ ง ๆ ไมว่ ่าจะเป็นการสร้าง การแก้ไขปรบั แตง่ โดยแบ่งเปน็ กลมุ่ ๆ ดงั นี้ - กลุม่ เคร่ืองมือ Tools 1. Selection เลอื กออบเจก็ ต์ 2. Subselection ปรบั แตง่ รปู ทรงออบเจก็ ต์ 3. Free Transform ปรบั แตง่ รปู ทรงออบเจก็ ต์ 4. 3D Rotation ปรบั แตง่ รปู ทรงออบเจก็ ตแ์ บบ 3 มติ ิ 12 3 45 5. Lasso เลอื กออบเจก็ ตห์ รอื พน้ื ทบ่ี างสว่ นของออบเจก็ ต์ 123 456 - กลมุ่ เครอ่ื งมอื Edit 1. Pen วาดรปู ทรง เสน้ ตรง เสน้ โคง้ 7 2. Text พมิ พข์ อ้ ความ 1 2 34 3. Line วาดเสน้ ตรง 4. Rectangle วาดสเ่ี หลย่ี ม 5. Pencil Tool วาดรปู ทรง เสน้ ตรง เสน้ โคง้ 6. Brush ระบายสี 7. Deco เตมิ ลวดลายใหก้ บั ออบเจก็ ต ์ 5 6 78 - กลมุ่ เครอ่ื งมอื Colors 1. Bone สรา้ งข้อต่อการเคล่อื นไหวให้กบั ออบเจ็กต์ 2. Paint Bucket เตมิ สพี ้ืนให้กับออบเจก็ ต์ 3. Eyedropper กอ๊ ปป้ีสจี ากออบเจก็ ต์อืน่ 4. Eraser ลบเส้นหรือสพี ้ืนของออบเจก็ ต์ 5. Stroke Color เลือกสเี ส้น 6. Fill Color เลอื กสีพ้นื 7. Black and White เลอื กเส้นเป็นสีดำ�และพนื้ เปน็ สขี าว 8. Swap Colors สลบั สีเสน้ กับสีพ้นื Adobe2F0lash CS6 บทท่ี 2 เริ่มตน้ รู้จักกับเทคโนโลยีของ Adobe Flash CS6 12 - กลมุ่ เครือ่ งมอื View 1. Hand เลือ่ นดูสว่ นตา่ ง ๆ ของภาพ 2. Zoom ย่อ/ขยายมมุ มองภาพบนสเตจ 3 3. สเตจ (Stage) เป็นพื้นที่สีขาวตรงกลางหน้าจอที่ใช้สำ�หรับจัดวางวัตถุต่าง ๆ ท่ีต้องการให้ แสดง 4 4. ไทม์ไลน์ (Timeline) ใช้สำ�หรับในการทำ�งานสร้างภาพเคล่ือนไหว ประกอบด้วยเลเยอร์ (Layer) และเฟรม (Frame) การสร้างภาพเคลื่อนไหวเบอื้ งต้น Adobe Fla2s1h CS6 การเปดิ โปรแกรม Flash 1 1. คลิก Start > All Program > Adobe Master Collection CS6 จากนั้นเลือกท่ี Adobe Flash Professional CS6 2 Adobe2F2lash CS6 บทท่ี 2 เริ่มตน้ รจู้ ักกบั เทคโนโลยขี อง Adobe Flash CS6 2. Create New เป็นการสรา้ งไฟล์ใหม่แบบต่าง ๆ ดังน้ี ชนิด ความหมาย ฟอร์แมต Flash File สร้างไฟล์เอกสารโดยเลือกเขยี นภาษา ActionScript เวอรช์ น่ั 3.0 FLA (ActionScript 3.0) Flash File สรา้ งไฟลเ์ อกสารโดยเลอื กเขียนภาษา ActionScript เวอร์ชน่ั 2.0 FLA (ActionScript 2.0) AIR สรา้ งไฟลเ์ อกสารในรปู แบบ Adobe AIR ทใ่ี ชง้ านข้ามระบบได้ FLA AIR for Android สรา้ งไฟลเ์ อกสารเพ่ือสรา้ งมฟู วีส่ ำ�หรบั อปุ กรณร์ ะบบปฏบิ ตั ิการ FLA Android AIR for ios สรา้ งไฟลเ์ อกสารเพอ่ื สร้างมูฟว่ีสำ�หรับอปุ กรณร์ ะบบปฏิบตั กิ าร FLA ios Flash Lite 4 สร้างไฟลเ์ อกสารเพ่ือสร้างมฟู วี่สำ�หรบั อุปกรณม์ ือถอื FLA ActionScript File สร้างไฟล์ส�ำ หรับเขียน ActionScript โดยเฉพาะ AS Flash JavaScript File สรา้ งไฟลส์ �ำ หรบั เขยี น JavaScript เพอ่ื ท�ำ งานรว่ มกบั มฟู ว่ี JSFL Flash Project สรา้ งไฟล์โปรเจ็กต์เพ่อื การท�ำ งานแบบกลมุ่ JSFL ActionScript 3.0 สร้างไฟล์ Class ภาษา ActionScript เวอร์ชั่น 3.0 AS Class ActionScript 3.0 สรา้ งไฟล์ Interface ภาษา ActionScript เวอรช์ ่ัน 3.0 AS Interface การเปิดไฟลท์ ีบ่ ันทกึ ไว้ 1. เลือก File > Open แล้วทำ�การเลอื กไฟล์ท่ไี ดท้ ำ�การบันทกึ ไว้ การสรา้ งภาพเคลื่อนไหวเบือ้ งตน้ Adobe Fla2s3h CS6 1 2 2. เมอ่ื ทำ�การเลือกไฟลจ์ ะไดป้ รากฏดงั รปู ตัวอย่าง Adobe2F4lash CS6 บทที่ 2 เริม่ ตน้ รู้จักกบั เทคโนโลยขี อง Adobe Flash CS6 การปดิ โปรแกรม Flash 1. การปดิ โปรแกรมให้คลิกที่ File > Exit หรอื 2. คลกิ ท่ีปุ่ม X ท่ีมมุ ขวาบนของโปรแกรม 2 1 การบนั ทกึ ไฟลเ์ อกสาร 1 2 1. คลกิ ท่ี File แล้วเลือก Save 2. เลอื กโฟลเดอร์ทีจ่ ดั เกบ็ ไฟล์ ตงั้ ชอ่ื ไฟล์ แลว้ กดป่มุ Save การสรา้ งภาพเคล่ือนไหวเบ้อื งตน้ Adobe Fla2s5h CS6 การจดั องคป์ ระกอบของหนา้ จอ การจัดองค์ประกอบของหน้าจอจะช่วยให้ใช้งานโปรแกรมได้สะดวกมากข้ึน เพราะสามารถจัด องค์ประกอบหน้าจอให้เหมาะสมกับความต้องการใช้งาน ตัวอย่างพาเนลที่ Flash ได้มีมาให้ เช่น Animator, Classic, Debug เป็นต้น การปรับขนาดพาเนล การปรบั ขนาดพาเนลให้กวา้ งหรือสูง ท�ำ ได้โดยการเลอ่ื นเมาสไ์ ปท่ีขอบ บรเิ วณน้นั แลว้ คลกิ ลาก การแยกพาเนล คลิกลากแท็บชือ่ พาเนลที่ต้องการแยก แลว้ น�ำ มาวางบนสเตจ Adobe2F6lash CS6 บทที่ 2 เรมิ่ ต้นรจู้ ักกบั เทคโนโลยีของ Adobe Flash CS6 การยดึ พาเนล คลิกท่ีพาเนล แลว้ ลากแทบ็ เข้าไปวางในแผงพาเนล การบันทกึ องคป์ ระกอบของหนา้ จอ เม่ือจัดองค์ประกอบของหน้าจอตามความต้องการแล้ว เรา สามารถบันทึกองค์ประกอบหน้าจอนั้น เพ่ือนำ�มาใช้งานในคร้ังต่อไปได้ โดยมีขน้ั ตอนดังน้ี 1. คลิกท่ี Essentials แลว้ เลอื ก New Workpace.. 1 2 2. ต้ังชือ่ องคป์ ระกอบหน้าจอ การก�ำ หนดคณุ สมบตั ขิ องเอกสาร การกำ�หนดคุณสมบัติของเอกสารเป็นการกำ�หนดคุณสมบัติให้ตรงกับการใช้งาน ไม่ว่าจะเป็น ขนาดพ้ืนทแ่ี สดงผล สีพน้ื อัตราความเร็วในการแสดงผล การสรา้ งภาพเคลื่อนไหวเบือ้ งต้น Adobe Fla2s7h CS6 การปรบั ขนาดสเตจและเปลย่ี นสีพื้นสเตจ 1 3 2 4 1. คลกิ ที่ Modify แล้วเลอื กท่ี Document 2. ตง้ั ค่าขนาดสเตจตามต้องการ ดงั นี้ - Printer ใหข้ นาดใหญท่ ส่ี ุดเท่าที่จะพมิ พไ์ ด้ - Content เท่ากับเน้อื หา - Default เทา่ กับขนาดเรมิ่ ต้นเดมิ คอื 500 x 400 px 3. คลกิ ท่สี ีและเลือกสีตามตอ้ งการเพื่อทำ�การเปลยี่ นสีพืน้ ทีส่ เตจ 4. คลิกที่ตัวเลขแล้วป้อนค่าลงไป โดยจะคิดเปน็ จ�ำ นวนเฟรมต่อวินาที การปรบั ขนาดการมองภาพ เพ่ือความสะดวกอาจปรับมุมมองภาพโดยการย่อหรือขยาย เพ่ือให้เห็นภาพและองค์ประกอบภาพ ไดช้ ัดเจน ดงั นี้ Adobe2F8lash CS6 บทท่ี 2 เร่ิมตน้ รจู้ ักกับเทคโนโลยขี อง Adobe Flash CS6 การย่อหรอื ขยายดว้ ยเครอ่ื งมือ Zoom 1. เลือกที่เครื่องมอื Zoom 2. เลือกออปชันของเครื่องมือ โดยเลือก 1 Enlarge เพ่อื ขยายมมุ มองภาพ หรือ Reduce เพอื่ ยอ่ มุมมองภาพ หมายเหตุ : เราสามารถปรับมุมมองแบบ กำ�หนดเปอร์เซน็ ตไ์ ด้ดังภาพ 2 การเล่อื นดูสว่ นตา่ ง ๆ เราสามารถเล่ือนกรอบหน้าต่างเพื่อมองชิ้นงานได้ในตำ�แหน่งท่ีต้องการ โดยสามารถใช้เครื่องมือ ตามรูป ดังน้ี 32 1 1. ใชเ้ ครอื่ งมอื Hand Tool เลอื่ นสเตจ 2. คลกิ ลากเพื่อเลื่อนมมุ มองในแนวนอน 3. คลกิ ลากเพ่อื เลื่อนมุมมองในแนวต้งั การสร้างภาพเคลอื่ นไหวเบ้อื งต้น Adobe Fla2s9h CS6 เครอ่ื งมอื ชว่ ยกะระยะและจดั วางออบเจก็ ต์ อุปกรณท์ ใี่ ชใ้ นการช่วยจัดวางออบเจก็ ตไ์ ด้แมน่ ย�ำ ตรงต�ำ แหนง่ ทเ่ี ราตอ้ งการ มีดงั น้ี ไม้บรรทัด (Ruler) 1. เลอื กท่ี View แลว้ คลิกที่ Rulers ไว้ช่วยในการกะระยะและจดั วางออบเจ็กต์ 2. ลากเส้นไกด์จากดา้ นบนและด้านขา้ ง เพือ่ กะระยะของออบเจก็ ต์ 2 1 หมายเหตุ : การล็อกเส้นไกด์ทำ�ได้โดย คลิกคำ�ส่ัง View แล้วเลือกที่ Guides และเลือก Lock Guides และใชค้ �ำ ส่งั เดยี วกันน้ีในการยกเลิกการลอ็ ก การลบเส้นไกดท์ �ำ ได้โดย คลิกทคี่ �ำ สั่ง View แล้วเลอื กท่ี Guides และเลอื ก Clear Guides การโชว์เส้นกริด (Grid) เส้นกริด คอื ตารางท่ีช่วยในการจัดวางออบเจก็ ต์ จะปรากฏขณะสร้างช้ินงานเทา่ นนั้ 1. เลือกทเ่ี มนู View 2. คลกิ ท่ี Grid แล้วเลอื ก Show Grid Adobe3F0lash CS6 บทท่ี 2 เริ่มตน้ รจู้ กั กับเทคโนโลยีของ Adobe Flash CS6 1 2 รปู แบบกราฟกิ ทใ่ี ชง้ านบน Flash การสร้างภาพกราฟิกมี 2 วิธี วิธีแรกคือ การใช้เคร่ืองมือใน Flash สร้างข้ึนมา และวิธีท่ี 2 คือ การนำ�เขา้ จากภายนอก เชน่ ภาพถา่ ยหรอื ภาพที่วาดมาจากโปรแกรมกราฟิกต่าง ๆ โดยแบ่งออกเปน็ 2 ประเภท ดงั น้ี ซีนและมฟู ว่ี - ซีน (Scene) เปรียบเสมือนเรื่องราวของฉากละครแต่ละฉาก ภายในซีนจะประกอบด้วย ออบเจ็กต์ต่าง ๆ มากมายหลากหลายชนิดท่ีได้สร้างข้ึนมา และโดยปกติโปรแกรมจะทำ�การสร้างซีน ขน้ึ มาให้ 1 ซีน แตเ่ ราก็สามารถท�ำ การเพม่ิ จำ�นวนซนี ขึน้ มาใช้งานไดอ้ ีกตามความตอ้ งการ - มูฟว่ี (Movie) เปรียบเสมือนเร่ืองราวโดยรวมท้ังหมดของละคร ซ่ึงมูฟว่ีเกิดจากการนำ� ซนี ฉากท้ังหมดมาท�ำ การประกอบเช่อื มโยงเขา้ ด้วยกันเปน็ เรือ่ งราวท่ีต้องการขึน้ มา การสรา้ งภาพเคล่อื นไหวเบ้อื งตน้ Adobe Fla3s1h CS6 ซิมโบลและอนิ สแตนซ ์ ซมิ โบล (Symbol) คือการนำ�วตั ถทุ ่ีเปน็ กราฟกิ ปุ่ม หรอื มูฟวี่ เปน็ ตน้ แบบในครัง้ แรก เพ่อื น�ำ ไป ใชเ้ ป็นสว่ นประกอบในชิน้ งาน ทกุ ซมิ โบลที่สรา้ งจะถกู เกบ็ ไวใ้ นไลบรารี แบ่งออกเป็น 3 ชนิด ได้แก่ - มูฟว่ีคลิป (Movie Clip) เป็นซิมโบลสำ�หรับสร้างภาพเคล่ือนไหว ภาพเคลื่อนไหวน้ีจะเล่น อย่างเป็นอสิ ระจากไทม์ไลนข์ องมฟู ว่ีหลัก ตวั อยา่ งการสร้างมฟู วคี่ ลปิ 1. วาดภาพวงกลมท่ีเปน็ เวคเตอรธ์ รรมดา 1 2 2. เลอื ก Selection Tool 3. ลากเมาส์ท่ีรูปวงกลม แล้วคลิกขวา 3 เลอื ก Convert to Symbol Adobe3F2lash CS6 บทที่ 2 เริ่มต้นรูจ้ ักกบั เทคโนโลยีของ Adobe Flash CS6 4. ทำ�การต้งั ชอื่ ทชี่ ่อง Name และเลือกชนิด Type เปน็ Movie Clip 4 5. เท่านี้กไ็ ด้วงกลมท่เี ปน็ มูฟวค่ี ลปิ 5 - ปุ่ม (Button) ซิมโบลส�ำ หรบั สร้างปุ่มท่ใี ชต้ อบสนองต่อการกระท�ำ ของเมาส์ เชน่ การกดปมุ่ เพ่ือไปสั่งให้มฟู วี่คลปิ ท�ำ งาน เป็นตน้ ตัวอยา่ งการสรา้ งปมุ่ 1. วาดภาพวงกลมที่เปน็ เวคเตอรธ์ รรมดา 1 การสร้างภาพเคล่อื นไหวเบ้ืองตน้ Adobe Fla3s3h CS6 2. เลือก Selection Tool 2 3. ลากเมาส์ที่รูปวงกลม แล้วคลิกขวาเลือก Convert to Symbol 3 4. ทำ�การตั้งช่ือที่ช่อง Name และเลือกชนดิ Type เป็น Button 4 5. ดับเบิล้ คลิกทีว่ งกลม จะเหน็ วา่ ท่ี Layer จะมีเฟรมภายในวงกลม โดย Up หมายถงึ จะอยู่เฟรมนเ้ี มือ่ เราทำ�การนำ�เมาส์ออกจากวงกลม Over หมายถงึ จะอยู่เฟรมน้เี มอื่ เราทำ�การนำ�เมาส์ไปทัดทว่ี งกลม Down หมายถึง จะอย่เู ฟรมนีเ้ มื่อเราท�ำ การกดหรือคลิกทว่ี งกลม Hit หมายถึง พื้นท่ีท่ีเราใช้ในการกดหรือคลิก (อาจจะมีพ้ืนที่ใหญ่หรือเล็กกว่ารูปวงกลม กไ็ ด)้ Adobe3F4lash CS6 บทท่ี 2 เร่มิ ตน้ รจู้ กั กับเทคโนโลยีของ Adobe Flash CS6 5 6. คลิกขวา เลือก Insert Keyframe จนครบทกุ เฟรม 6 7. ท�ำ การเปลย่ี นสีวงกลมในแต่ละเฟรม 7 การสร้างภาพเคล่อื นไหวเบ้ืองตน้ Adobe Fla3s5h CS6 - กราฟิก (Graphic) ซิมโบลสำ�หรับออบเจ็กต์ ซ่ึงอาจนำ�ไปเป็นส่วนประกอบของการสร้าง ภาพเคลอื่ นไหวของมูฟวีค่ ลปิ ปมุ่ หรือมฟู วีห่ ลักได้ ตวั อยา่ งการสรา้ งกราฟิก 1 1. วาดภาพวงกลมที่เป็นเวคเตอรธ์ รรมดา 2. เลอื ก Selection Tool 2 3. ลากเมาส์ท่ีรูปวงกลม แล้วคลิกขวา เลอื ก Convert to Symbol 3 Adobe3F6lash CS6 บทที่ 2 เร่ิมตน้ รจู้ กั กับเทคโนโลยขี อง Adobe Flash CS6 4 4. ทำ�การต้ังช่ือที่ช่อง Name และ เลอื กชนิด Type เปน็ Graphic 5. เท่าน้กี ็ได้วงกลมท่ีเป็นกราฟิก 5 โดย Symbol ทั้ง 3 แบบ สามารถแสดงได้ด้วยลักษณะ Icon 1 ที่อยู่ในไลบรารี่ ดังนี้ 2 1. เป็นมูฟวีค่ ลิป ช่ือ name 2. เปน็ ปุม่ ช่อื Symbol 1 3 3. เป็นกราฟิก ชอ่ื Symbol 2 การสร้างภาพเคล่อื นไหวเบือ้ งตน้ Adobe Fla3s7h CS6 อนิ สแตนซ์ (Instance) คอื ส�ำ เนาของซมิ โบลทถ่ี กู ดงึ มาใชง้ านบนสเตจ อนิ สแตนซแ์ ตล่ ะตวั สามารถ ปรบั แตง่ คณุ สมบตั ิได้อยา่ งอสิ ระ โดยไมม่ ผี ลต่อซิมโบลหรอื อินสแตนซ์อืน่ เช่น ขนาด สี ความโปร่งใส แต่ ในทางตรงกันข้าม หากซิมโบลต้นแบบถูกแก้ไขคุณสมบัติเมื่อใด จะมีผลทำ�ให้อินสแตนซ์ทุกตัว เปลีย่ นแปลงไปดว้ ย ตัวอยา่ งการวางอนิ สแตนซ์ 1. เปิดไฟล์ตวั อย่างที่เราได้ทำ�การสร้างมฟู วคี่ ลปิ รปู วงกลมไวก้ ่อนหนา้ 1 2. ทำ�การลากมฟู ว่คี ลิปวงกลมมาวางท่สี เตจจ�ำ นวน 3 รปู (มฟู วี่คลิปทว่ี างอยสู่ เตจท้งั 3 รูปนนั้ ก็ คือ อินสแตนซ์หรือส�ำ เนาของซมิ โบล) 2 Adobe3F8lash CS6 บทที่ 2 เริม่ ต้นรจู้ กั กับเทคโนโลยีของ Adobe Flash CS6 3. ทำ�การย่อขนาดมูฟวคี่ ลปิ ตรงกลาง 3 4 4. จะสังเกตได้ว่าเมื่อทำ�การย่อขนาดมูฟว่ีคลิปตรงกลางให้เล็กลงแล้ว แต่มูฟว่ีคลิปท้ังซ้ายและ ขวาก็ยังมีขนาดเทา่ เดมิ สรปุ ทา้ ยบท โปรแกรม Adobe Flash CS6 เป็นโปรแกรมกราฟกิ ทใ่ี ช้ท�ำ งานไดท้ ั้งภาพนิง่ และภาพเคล่อื นไหว แอนิเมชัน ตลอดไปจนถึง เว็บไซต์ เกมส์ และสื่อการเรียนการสอน แสดงผลโดยการใช้ Flash Player เปน็ ตัว Runtime ในการแสดงผล เพ่อื ใหผ้ ใู้ ช้ได้ใช้งานในรูปแบบตา่ ง ๆ และนามสกลุ ไฟล์สำ�หรบั ช้นิ งาน คือนามสกุล .fla และนามสกุลของไฟล์ที่ใช้แสดงผลลัพธ์คือนามสกุล .swf โดยการใช้เคร่ืองมือต่าง ๆ และการใช้งานเบ้อื งตน้ มคี วามจ�ำ เปน็ ตอ้ งศึกษา เรยี นรูอ้ ย่างละเอยี ดเพื่อเป็นพ้ืนฐานในการท�ำ งานตอ่ ไป การสรา้ งภาพเคล่อื นไหวเบ้ืองตน้ Adobe Fla3s9h CS6 แบบทดสอบและกิจกรรมการฝึกทกั ษะ บทท่ี 2 เรม่ิ ตน้ รจู้ ักกบั เทคโนโลยขี อง Adobe Flash CS6 ตอนท่ี 1 : อธิบาย (หมายถึง การใหร้ ายละเอยี ดเพ่มิ เติม ขยายความ ถ้ามีตัวอย่างใหย้ กตวั อย่าง ประกอบ) 1. ประเภทของไฟล์ Flash มอี ะไรบา้ ง จงอธิบาย 2. สเตจ (Stage) คืออะไร 3. ไทมไ์ ลน์ (Timeline) คอื อะไร 4. การเปิดไฟลท์ ่บี นั ทึกไว้มขี น้ั ตอนอยา่ งไร 5. การปรับขนาดพาเนลสามารถท�ำ ไดอ้ ยา่ งไร จงอธิบาย 6. การบนั ทึกองคป์ ระกอบของหนา้ จอมีขนั้ ตอนอยา่ งไร 7. การเรียกใชไ้ ม้บรรทดั (Ruler) มีวธิ ีการและข้ันตอนอย่างไร 8. การลอ็ กเสน้ ไกดส์ ามารถท�ำ ไดอ้ ย่างไร 9. ซนี (Scene) คอื อะไร 10. มฟู ว่ี (Movie) คืออะไร ตอนที่ 2 : จงเลือกคำ�ตอบท่ีถกู ต้องทีส่ ุดเพยี งข้อเดียว 1. ภาษาสครปิ ตท์ เ่ี อาไว้ใชเ้ ขยี นโดยเฉพาะในโปรแกรม Adobe Flash คือขอ้ ใด ก. ActionScript ข. Flash Player ค. HTML5 ง. JavaScript 2. ไฟลเ์ อกสาร (Flash Document) มีฟอร์แมตคือขอ้ ใด ก. .swf ข. .fla ค. .flv ง. .exe 3. ถา้ ต้องการสร้างงานใหม่โดยเลือกใช้รปู แบบไฟลง์ านส�ำ เร็จรูปต้องเลือกคำ�สั่งขอ้ ใด ก. Getting Started ข. Create New ค. Open a Recent Item ง. Create from Template Adobe4F0lash CS6 บทท่ี 2 เริ่มต้นรจู้ กั กบั เทคโนโลยขี อง Adobe Flash CS6 4. ถา้ ต้องการใช้งาน Text ต้องเลอื กใชก้ ลุ่มเครอื่ งมอื กลุ่มใด ก. View ข. Colors ค. Tools ง. Edit 5. เครือ่ งมอื Bone มหี นา้ ท่ีอะไร ก. สรา้ งขอ้ ต่อการเคล่ือนไหวให้กบั ออบเจ็กต์ ข. ก๊อปปีส้ ีจากออบเจก็ ต์อื่น ค. ระบายสี ง. เติมลวดลายใหก้ ับออบเจ็กต์ 6. ขอ้ ใดใชส้ �ำ หรบั ในการทำ�งานสร้างภาพเคลอื่ นไหว ก. Stage ข. Timeline ค. Edit Bar ง. Panel 7. ถา้ ตอ้ งการเลอื กพื้นท่ีบางสว่ นของออบเจก็ ต์ต้องใช้เครอื่ งมอื ในขอ้ ใด ก. Free Transform ข. Subselection ค. Lasso ง. Selection 8. เครือ่ งมือใดไม่จัดอยู่ในกลุ่มเครอื่ งมอื Colors ก. Fill Color ข. Eraser ค. Brush ง. Paint Bucket 9. ถา้ เราตอ้ งการสร้างไฟล์สำ�หรบั เขียน ActionScript โดยเฉพาะตอ้ งเลอื กใชง้ านคำ�สั่งใด ก. Flash File (ActionScript 3.0) ข. Flash Project ค. Flash JavaScript File ง. ActionScript File 10. มูฟว่ี (Movie) เกิดจากการนำ�อะไรมาประกอบกนั ก. Scene ข. Symbol ค. Movie Clip ง. Button ตอนท่ี 3 : อธบิ ายค�ำ ศัพท์ (หมายถึง การใหร้ ายละเอียดเพมิ่ เติม ขยายความ ถา้ มตี วั อยา่ งให้ยก ตวั อย่างประกอบ) 1. Flash Document 6. Ruler 2. Flash Movie 7. Movie 3. Stage 8. Symbol 4. ActionScript 9. Graphic 5. Grid 10. Instance การสร้างภาพเคลอ่ื นไหวเบอื้ งต้น Adobe Fla4s1h CS6 ใบงานที่ 2.1 ใหน้ กั ศกึ ษาทดลองใช้งานกล่องเคร่ืองมอื (Toolbox) ในโปรแกรม Adobe Flash CS6 โดยให้ เลือกใช้งาน 1 กลุ่มเคร่ืองมือที่นักศึกษาสนใจแล้วทดลองใช้งาน พร้อมบันทึกผลการใช้งานว่าแต่ละ เคร่ืองมือในกลมุ่ นั้นไดผ้ ลลพั ธ์อย่างไร โดยบันทกึ เปน็ รปู ภาพประกอบดว้ ย ใบงานที่ 2.2 ผลลัพธจ์ ากการสรา้ งปมุ่ ภาพที่ 2 เมื่อวางเมาสไ์ วบ้ นป่มุ ภาพท่ี 1 เมือ่ วางเมาสไ์ ว้นอกป่มุ ภาพท่ี 3 เมอ่ื คลกิ เมาสท์ ป่ี มุ่ Adobe4F2lash CS6 บทที่ 2 เรมิ่ ต้นร้จู ักกบั เทคโนโลยีของ Adobe Flash CS6 โดยทำ�ตามขั้นตอนดังตอ่ ไปนี้ 1. สรา้ งรูปวาดข้ึนมา 1 รูป ดงั ตวั อย่าง 1 2 2. เลอื กเครอื่ งมอื Selection Tool 3. ใชเ้ ครอ่ื งมือ Selection Tool ลากครอบรูป ที่สรา้ งท้งั หมด 3 4. คลิกขวาที่รูปวาดที่เลือกไว้ เลือก คำ�สั่ง Convert to Symbol 4 5. ต้ังชื่อ Symbol ท่ีช่อง Name และเลือก Type เป็นแบบ Button แล้วกด ปุ่ม OK 5 การสร้างภาพเคลือ่ นไหวเบือ้ งตน้ Adobe Fla4s3h CS6 6. ดบั เบลิ้ คลกิ ท่ีรปู วาด จะเหน็ ว่าท่ี Layer จะมีเฟรม Up / Over / Down / Hit (หน้าท่ขี อง Button และเฟรมไดอ้ ธิบายไวใ้ นบทเรียนบทท่ี 2) 6 7. ทำ�การ Insert Keyframe จนครบทุกเฟรม โดยคลิกขวาที่เฟรมนั้น แล้วเลือก Insert Keyframe 7 8. ทำ�การเปล่ยี นสรี ปู วาดในแตล่ ะเฟรมใหแ้ ตกตา่ งกัน 8 9. จากนน้ั ทดลองดผู ลลพั ธ์ท่ไี ด้ โดยกดปมุ่ Ctrl + Enter จะไดผ้ ลลัพธ์ดังรูปด้านบน 10. ทำ�การบนั ทกึ ไฟล์เอกสารตามขนั้ ตอนในบทเรียนบทท่ี 2 |
Adobe flash professional cs6 เพ ม สคร ป
ลิขสิทธิ์ © 2024 ihoctot Inc.
