Flash
Show
และประยุกต์ใช้งาน พร้อมๆ กับแนวทางการวาดภาพจากคู่มือฉบับนี้ จะลืมคำว่า “วาดยาก” ไปเลย เนื่องจาก Flash เป็นซอฟต์แวร์สร้างสรรค์งานกราฟิกในฟอร์แมต Vector ที่ภาพกราฟิกทุกภาพประกอบจากเส้นโครงร่างที่ทำให้การปรับแต่ง แก้ไข หรือ Macromedia Flash CS3 เป็นผลิตภัณฑ์ล่าสุดจากค่าย Macromedia ที่พัฒนามาเพื่อสนับสนุนการสร้างงานกราฟิก ทั้งภาพนิ่ง และภาพเคลื่อนไหว สำหรับการนำเสนอผ่านเครือข่ายอินเทอร์เน็ต Flash มีฟังก์ชันช่วยอำนวยความสะดวก ในการสร้างผลงานหลากหลายรูปแบบตลอดจนชุดคำสั่งโปรแกรมมิ่งที่เรียกว่า Flash Action Script ที่เพิ่มประสิทธิภาพในการทำงาน และสามารถคอมไพล์ (Compile) เป็นโปรแกรมใช้งาน (Application Program) เช่น การทำเป็น e-Cardเพื่อแนบไปพร้อมกับ e-Mail ในโอกาสต่างๆ การเรียกใช้โปรแกรม Flash
จอภาพการทำงานของ Flash เมื่อคลิกเลือกการสร้างผลงานใหม่ของ Flash จากรายการ Create New Flash File จะ ปรากฏส่วนประกอบจอภาพการทำงานดังนี้ แถบเครื่องมือหลัก (Main Toolbar)แถบเครื่องมือควบคุมการทำงานหลักของโปรแกรม เช่น การสร้างไฟล์ใหม่, การเปิดไฟล์, แถบเครื่องมือ (Toolbox) Document Tab Timeline &
Layer Layer ส่วนควบคุมการสร้างชั้นวัตถุ เพื่อให้การควบคุมวัตถุแต่ละชิ้น มีอิสระ และสะดวก Stage & Workspaceจากรูปตัวอย่างนี้ เมื่อสั่งนำเสนอผลงาน แสดงว่าจะกำหนดให้เรือยังไม่ต้องแสดงผลทันที Panel ควบคุม Panel ทำงานกับไฟล์ Flashโปรแกรม Flash สามารถสร้างผลงานได้ทั้งภาพนิ่ง ที่เรียกว่า
(Still Image) และ Adobe Illustrator = .ai ภาพเคลื่อนไหว หรือ Flash Movie สามารถบันทึกในฟอร์แมตที่พร้อมใช้งาน ได้ดังนี้ Flash Movie = .swf สร้างไฟล์ใหม่ เปิดไฟล์ การคืนสู่สภาพเดิม (Revert) บันทึกไฟล์ การบันทึกเป็นภาพนิ่งใช้งานเนื่องจากไฟล์ .fla เป็นไฟล์ต้นฉบับ ไม่สามารถนำไปใช้งานได้ ก่อนนำไฟล์ภาพที่สร้าง รายการเลือกของ GIF Format ได้แก่ • Dimension กำหนดขนาดของภาพ • Transparent เลือกเพื่อกำหนดให้ภาพมีลักษณะของพื้นแบบโปร่งใส การบันทึกในฟอร์แมต JPEGการบันทึกภาพวาดในฟอร์แมต JPEG ทำได้โดยเลือกคำสั่ง File, Export, Export Image… • Dimension กำหนดขนาดของภาพ การบันทึกเป็นภาพเคลื่อนไหว เลือกฟอร์แมตที่ต้องการใช้งาน ทำงานกับ StageStage เป็นชื่อเรียกพื้นที่สร้างภาพกราฟิกของ
Flash นับเป็นพื้นที่สำคัญในการสร้างสรรค์ ขนาดของ Stage • กำหนดค่าความกว้าง ความสูงของ Stage (หน่วยปกติจะเป็น pixel) จากรายการ Dimensions: การกำหนดขนาดและคุณสมบัติอื่นๆ
ของ Stage ยังสามารถเลือกได้จาก Properties Panel ข้อแนะนำการกำหนดขนาดของ Stage ดังนั้นขนาดของ Stage ควรกำหนดให้มีความกว้าง ความสูงสัมพันธ์กับเลย์เอาท์ของหน้าเว็บ Ruler, Grid, GuidesRuler, Grid, Guides เครื่องมือช่วยกำหนดขอบเขต
และวางตำแหน่งการสร้างกราฟิกบน Guide มีลักษณะเป็นเส้นตรงที่ผู้ใช้สามารถกำหนดตำแหน่ง เพื่อช่วยในการกะระยะต่างๆ คำสั่งที่เกี่ยวข้องกับแถบไม้บรรทัด, Grids และไกด์ คือคำสั่ง Snap to… ซึ่งมีหลายคำสั่ง • Snap to Grids ช่วยให้การวาด/สร้างวัตถุ,
การย่อขยาย หรือย้ายตำแหน่งอิง การใช้เครื่องมือของ Flashการสร้างภาพกราฟิกต่างๆ สามารถใช้เครื่องมือกราฟิกจากชุดเครื่องมือ Toolbox โดยมี
Tools Modifier Tool modidier ของเครื่องมือ Tool modidier ของเครื่องมือ มุมมองจอภาพStage เป็นพื้นที่หลักของการสร้างงาน ดังนั้นเครื่องมือชุดแรกที่ควรทราบ ก็คือเครื่องมือใน ทำงานกับสี (Color) วัตถุใน Flash จะประกอบด้วยส่วนประกอบอย่างน้อยๆ 2 ส่วน ได้แก่ พื้นของวัตถุ รายละเอียดเกี่ยวกับส่วนควบคุมสีใน Toolbox
รายการเลือก No Color จะแสดงผลเมื่อคลิกเลือกวาดสี่เหลี่ยม หรือวาดวงกลม ดังนั้น เพิ่มสีการเพิ่มรายการสี สามารถทำได้โดยคลิกที่เครื่องมือเลือกสี (จะเป็นFill หรือ Stroke) ก็ได้
2 ปรากฏจอภาพผสมสีใหม่ 3 คลิกในช่อง Custom colors การเลือกสีให้กับกราฟิกต่างๆ ที่วาดด้วยเครื่องมือของ Flash นอกจากจะใช้ส่วนควบคุมสีที่ แผงควบคุมสี (Color Panel)Color Panel เป็นการเพิ่มประสิทธิภาพของการทำงานเกี่ยวกับสี โดยเฉพาะในส่วนที่เป็น • Color มีส่วนเพิ่มเติมการใช้สีมากกว่าปกติ เช่น การทำสีแบบไล่โทนลักษณะต่างๆ, การเลือกรายการจาก
Color มีรายการที่น่าสนใจ คือ Fill Type ซึ่งจะช่วยให้ผู้ใช้สามารถ ชุดสีแบบไล่โทน• คลิกเลือกรายการ Fill Type เป็น Linear (ไล่โทนในแนวระนาบ) หรือ Radial (ไล่โทน ในแนวรัศมี) • นำเมาส์ไปคลิกใต้ Gradient definition bar จะปรากฏ Gradient Pointer กำหนด จำนวน Gradient Pointer ตามต้องการ •
ถ้าต้องการลบ Gradient Pointer ให้นำเมาส์ไปชี้ ณ Gradient Pointer ที่ต้องการลบ แล้ว • กำหนดสีให้กับ Gradient Pointer โดยคลิกที่ Gradient Pointer ชิ้นที่ต้องการ จากนั้น • สามารถเลื่อนปรับตำแหน่งของ Gradient Pointer โดยใช้หลัก Drag & Drop • คลิกปุ่ม Color Mixer Option Menu แล้วเลือกคำสั่ง Add Swatch เพื่อเพิ่มสีที่กำหนด ความโปร่งใสของสีวัตถุ (Alpha) รูปวงกลมไม่ได้กำหนดค่าความโปร่งใส ก็จะซ้อนทับสี่เหลี่ยมแบบไม่เห็นภาพด้านหลัง เครื่องมือวาดภาพสี่เหลี่ยม,
วงกลม, วงรี • กำหนดสีพื้น, สีเส้นขอบ และลักษณะของเส้นขอบจาก Properties – กำหนดลักษณะของเส้นขอบวงรี วงกลมได้โดยคลิกปุ่ม Custom… แล้ว • นำเมาส์มาคลิก ณ ตำแหน่งที่ต้องการวาดรูป กดปุ่มเมาส์ค้างไว้ แล้วลากเมาส์ เมื่อได้ ลบวัตถุด้วย Eraser Tool วัตถุต่างๆ ที่วาดไว้แล้ว สามารถลบได้ 3 วิธี คือ •
ลบวัตถุชิ้นที่ต้องการ โดย
การเลือกวัตถุ (Selection)วัตถุในความหมายนี้ ก็คือ รูปทรง รูปภาพ ภาพกราฟิกที่วาด หรือนำเข้ามาใช้งานใน Flash Selection Tool สำหรับเลือกวัตถุในสภาวะปกติ Subselection Tool สำหรับการเลือกวัตถุในโหมดจุดเชื่อม
Lasso Tool สำหรับการเลือกวัตถุที่มีรูปทรงอิสระ หรือกำหนดขอบเขตการ สิ่งสำคัญที่สุดในการเลือกวัตถุใน Flash
ก็คือ อย่าลืมว่าวัตถุทุกชิ้นเกิดจาก “จุด” หลายๆ จุด
รูปด้านบนนี้ แสดง “จุด” อันเกิดจากการเลือกบางส่วนของวงกลม การเลือกวัตถุ หรือกลุ่มวัตถุด้วย Selection Tool• คลิกเลือกเครื่องมือ Selection Tool – เลือกวัตถุทั้งชิ้น
การเลือกวัตถุโดยการลากคลุมพื้นที่ – เลือกวัตถุหลายๆ ชิ้น ยกเลิกการเลือกวัตถุ ซ่อนการเลือกวัตถุ การยกเลิกคำสั่ง (Undo) ปรับแต่ง แก้ไขวัตถุ เปลี่ยนรูปทรงกราฟิกจาก Flash เกิดจากการรวมกันของ “จุด” ทำให้การปรับแต่ง เปลี่ยนรูปทรงกระทำ การเปลี่ยนรูปทรงของวัตถุ
มีหลักการดังนี้ ตัวอย่างการวาดจรวดแบบง่าย
1. วาดสี่เหลี่ยมผืนผ้า 2. เลือกเครื่องมือ Move เลื่อนไปชี้ที่มุมบนขวา
3.
เลื่อนไปชี้ที่ขอบซ้าย แล้วดึงเข้า การย้ายวัตถุ การย่อ/ขยาย และปรับรูปทรงของวัตถุ• เลือกวัตถุ • นำเมาส์ไปชี้ที่มุม หรือขอบวัตถุ แล้ว Drag & Drop เพื่อปรับขนาด หรือรูปทรงตามต้องการ
• คลิกเลือกจากเมนูคำสั่ง Modify, Transform,… ซึ่งมีคำสั่งให้เลือกทั้งคำสั่งหมุนวัตถุ, การจัดเรียงวัตถุ (Alignment) 1. วาดวัตถุให้อยู่นอก Stage 2. เลือกวัตถุด้วยเครื่องมือ Move 3. เปิด Align Panel 4. คลิก ต่อด้วย และ การคัดลอกลักษณะเส้นขอบวัตถุการคัดลอกลักษณะเส้นขอบวัตถุ จะช่วยให้การปรับแต่งแก้ไขวัตถุมากกว่า 1 ชิ้นทำได้ ต้องการให้วงกลม และสี่เหลี่ยมเส้นขอบดำ
มีเส้นขอบเดียวกับสี่เหลี่ยมชิ้นที่สอง ที่มีเส้น กลุ่มวัตถุ (Group)
การแยกชิ้นส่วนของวัตถุ การปรับแต่งแก้ไขวัตถุที่เป็น Groupวัตถุที่อยู่ในสภาวะ
Group สามารถย่อ/ขยาย หมุนได้อิสระ แต่จะไม่สามารถปรับแต่งแก้ไข
เมื่อปรับแต่งแก้ไขวัตถุเรียบร้อยแล้ว ให้คลิกที่ Scene 1 เพื่อกลับสู่โหมดการทำงานปกติด้วยทุกครั้ง การหัดวาดภาพ เมื่อรู้จักโปรแกรมและเครื่องมือต่างๆ ของ Flash แล้ว ก็จะเข้าสู่บทเรียนฝึกหัดวาดภาพ ซึ่ง แผนที่ การวาดแผนที่แสดงเส้นทาง โดยอาศัยหลักการเชื่อมและตัด • วาดเส้น ให้มีลักษณะ ดังนี้
– จากนั้นกดปุ่ม Del เพื่อลบส่วนที่เลือก จะปรากฏผลดังนี้
หน้าคนจากวงกลมและเส้นตรง
วาดวงกลม วาดเส้นตรงผ่าน เลือกเครื่องมือ
Selection เลื่อนเมาส์
คลิกเลือกเส้นที่อยู่นอกวงกลม เลือกสีผม แล้วเติมสี วาดตา
จมูก และปากด้วยเครื่องมือ หน้าคนจากหลายๆ วัตถุ เด็กชายสวมหมวก เด็กหญิง คนสูงอายุ ดวงอาทิตย์ รองเท้าสเก็ต ถุงเท้าเด็ก ใบไม้ หมวก ต้นคริสมาตส์ ต้นไม้ ดอกไม้ ดินสอ ตุ๊กตาหมี ฮิปโป ผลไม้การ์ตูน สตอร์เบอร์รี่ Symbol และ Instanceการสร้าง Movie ด้วย Flash
จำเป็นต้องเกี่ยวข้องกับ Symbol และ Instance ดังนั้นการศึกษา ภาพโหมด
Shape/Dot โหมด Group โหมด Instance/Symbol ตรวจสอบ Symbol สำหรับไฟล์
แปลงวัตถุเป็น Symbol การสร้าง Symbolนอกจากการแปลงวัตถุให้เป็น Symbol ด้วยวิธีการดังข้างต้น ยังสามารถเข้าสู่โหมดการ • รายละเอียดการสร้าง Movie Clip และ Button Symbol จะกล่าวในหัวข้อถัดไป Symbol และ Instance การเรียกใช้ Symbol เรียกใช้ Symbol
สำเร็จรูปของโปรแกรม เรียกใช้ Symbol จากไฟล์อื่น แก้ไข Symbol • แก้ไข Symbol เหมือนกับการแก้ไขวัตถุปกติทั่วไป แก้ไข InstanceInstance เปรียบเสมือนวัตถุชิ้นหนึ่ง ซึ่งสามารถใช้คำสั่งจัดการวัตถุ มาดำเนินการ วิธีที่ 1 * Brightness ความสว่าง เฟรมและ Timeline การสร้างภาพยนต์ หรือภาพเคลื่อนไหวใด ก็คือการสร้างอิริยาบถของภาพให้มีการ Timeline เฟรม Playheadตำแหน่งของเฟรมปัจจุบันที่จะปรากฏบน Stage เฟรม และคีย์เฟรม (Frame & Keyframe) ควบคุมเฟรม ลบเฟรม Movie File Movie คือ ภาพนิ่งหรือภาพเคลื่อนไหวที่สร้างด้วย Flash โดยมีลักษณะการสร้าง 3 รูปแบบ คือ • Movie แบบ Frame by frame เป็น Movie ที่มีการเปลี่ยนแปลงของวัตถุตลอดเวลา Motion Tween การสร้าง Movie แบบ Motion Tween เป็น Movie ที่สร้างได้ง่าย รวดเร็ว โดยยึดหลักสร้าง หลักการสร้าง
Movie แบบ Motion Tween ตัวอย่าง Motion Tween – ดินสอสร้าง Motion Tween เป็นรูปดินสอเคลื่อนที่จากตำแหน่งหนึ่ง ไปอีกตำแหน่งหนึ่ง มี 4 ขั้นตอน ดังนี้ • วาดสี่เหลี่ยมรูปทรงแท่งยาว กำหนดลักษณะเส้นขอบตามความหมาะสม • เลือกเครื่องมือ Paint Bucket เติมสีลงในรูปสี่เหลี่ยม • ใช้เครื่องมือวาดเส้น ตี เส้นตรงตัดรูปสี่เหลี่ยม 2 ตำแหน่ง เพื่อแปลงสภาพเป็น • เลือกเครื่องมือ Selection ปรับปลายด้านหนึ่งสี่เหลี่ยม ให้เป็นสามเหลี่ยม ดังรูป • ลบเส้นตรงส่วนที่คั่นปลายดินสอกับตัวดินสอออก โดย ใช้เครื่องมือ Selection คลิก • ดัดแปลงปลายดินสออีกด้าน ให้เป็นยางลบ ดังตัวอย่าง • แปลงรูปดินสอที่วาดเรียบร้อย แล้ว เป็น Symbol แบบ Graphics โดยใช้เครื่องมือ ขั้นที่สอง กำหนดจุดเริ่มต้นของ Movie
อัตโนมัติ สามารถใช้หลักการ Drag & Drop ย้ายตำแหน่ง Keyframe จากเฟรม 1 ไปเฟรม 5 ได้ • ใช้เครื่องมือ Selection และ Free Transform ย้าย/ ปรับเปลี่ยนรูปทรงของดินสอ ให้เหมาะสม ขั้นที่สาม กำหนดตำแหน่งปลายทาง • คลิกเมาส์เลือกเฟรมปลายทาง เช่นเฟรม 50 แล้วคลิกปุ่มขวา ของเมาส์ เลือกคำสั่ง Insert Keyframe • ใช้เครื่องมือ Selection ย้าย ตำแหน่งดินสอไปตำแหน่งใหม่ ขั้นที่ 4 ใส่ Motion Tween ที่เฟรมต้นทาง • คลิกเมาส์ในเฟรมต้นทางของ Motion จากตัวอย่างคือเฟรมที่ 5 • คลิกปุ่มขวาของเมาส์ แล้วเลือก คำสั่ง Create Motion Tween Shape TweenShape Tween เป็น Movie อีกลักษณะที่ใช้เทคนิคการเปลี่ยนรูปร่างของวัตถุ เช่น จากวัตถุ หลักการสร้าง Movie แบบ Shape Tween ตัวอย่าง Shape Tween – Magic Flower ฝึกปฏิบัติการสร้าง Movie – Magic Flowerโดยการใช้วัตถุวงกลม และหลายเหลี่ยม แบบ • กำหนดจุด Marker 3 จุด จุดที่ 1 และจุดที่ 3 กำหนดเป็นสีส้ม จุด ที่ 2 กำหนดเป็นสีขาว • กำหนดเฟรมสุดท้ายของ Movie เช่น เลือกเฟรม 50 ให้คลิกปุ่ม ขวาของเมาส์ในเฟรม 50 แล้ว • ลบรูปวงกลมในเฟรม 50 ออกไป ตัวอย่าง Shape Tween – การขีดเส้นด้วยดินสอนำ Motion Tween รูปดินสอเคลื่อนที่จากตัวอย่างก่อนหน้า มาใส่ Shape Tween เป็นการ • สร้างเลเยอร์ใหม่ โดยคลิกที่ ปุ่ม Insert Layer ใน Timeline • เลือกเฟรมปลายทาง ให้อยู่ ตำแหน่งเดียวกับเลเยอร์ดินสอ (เช่นเฟรม 50) คลิกปุ่มขวาของ • ลากจุด Handle ด้านขวาให้ยาวเท่ากับปลายทางของดินสอ • เปลี่ยนค่า Tween จาก Properties เป็น Shape ตัวอักษร/ข้อความเมื่อทราบถึงการสร้างกราฟิก และการจัดการกราฟิกที่ใช้ใน Flash แล้ว ส่วนประกอบอีก สร้างข้อความ • คลิกเลือกเครื่องมือ Text Tool • นำเมาส์ไปคลิก ณ ตำแหน่งที่ต้องการพิมพ์งาน ปรากฏกรอบพิมพ์งาน – ถ้ากดปุ่มเมาส์ค้างไว้ แล้วลากขยายขนาดของกรอบข้อความ จะเป็นการพิมพ์งาน • พิมพ์งานที่ต้องการ สามารถยกเลิกโดยนำเมาส์ไปคลิก ณ ที่ว่างๆ บน Stage ตัวอย่างการจัดข้อมูลให้มีระยะห่างระหว่างตัวอักษร 4 หน่วย โดยคลิกที่ ปรับเปลี่ยนกรอบข้อความ • เปลี่ยนจาก กรอบบรรทัดเดียว เป็นหลายบรรทัด ให้นำเมาส์ไปชี้ที่วงกลม มุมบนขวา ปรับเปลี่ยนรูปร่างตัวอักษร ก่อนที่จะปรับเปลี่ยนรูปร่างของตัวอักษร ซึ่งสามารถกระทำได้รายตัวอักษร จะต้องแยก • สามารถปรับแต่งรูปร่างได้อิสระ โดยอาศัย Arrow Tool ทำงานกับเลเยอร์ (Layer)เลเยอร์ (Layer) หมายถึงชั้นของชิ้นงาน เนื่องจากการวาดภาพใดๆ ก็ตามหากรวมอยู่ใน เปลี่ยนชื่อเลเยอร์ เปลี่ยนลำดับของเลเยอร์
ไฟล์เสียง (Sound) การสร้างสื่อด้วย Flash นอกจากมีจุดเด่นเกี่ยวกับภาพเคลื่อนไหวรูปแบบต่างๆ ยังสามารถ ฟอร์แมตไฟล์เสียง ทำงานกับไฟล์เสียง ควบคุมไฟล์เสียงฟอร์แมต WAVการทำงานและควบคุมไฟล์เสียงฟอร์แมต WAV มี 3 ขั้นตอนหลัก คือ การนำเข้าไฟล์เสียง การนำเข้าไฟล์เสียง การทำงานกับไฟล์เสียง การควบคุมเสียงใน Movie ควบคุมเพลง MP3การนำเสนอและควบคุมเพลง MP3 ด้วย Flash สามารถใช้ Media Playback ซึ่งเป็นหนึ่งใน
• คลิกเลือก MediaPlayback บน Stage เปิด ควบคุม VDOการนำเสนอ VDO และควบคุม VDO ด้วย Flash ก็มีหลักการคล้ายๆ กับการนำเสนอ/ Audio Video Interleaved =
.avi สำหรับฟอร์แมตไฟล์ VDO ที่สามารถนำเข้าเมื่อติดตั้ง DirectX 7.0 ขึ้นไป ได้แก่ Audio Video Interleaved = .avi VDO แบบ Embedded
• เปิด Action Panel โดยกดปุ่ม F9 gotoAndStop(1); กรอบ VDOเทคนิคที่น่าสนใจของ Flash ก็คือ Masking ซึ่งเป็นการซ่อนบางส่วนของวัตถุ (Object) ด้วย
ตัดต่อ VDO ก่อนที่จะนำไฟล์ VDO เข้ามาใช้งานใน Flash Movie บางครั้งอาจจะจำเป็นต้องตัดต่อ
ถ้าคลิกเลือกรายการ Combine list of clips into a single library item after import จะเป็น |