7.3 การสร้างภาพเคลื่อนไหว (Animation) การวาดภาพด้วยโปรแกรมแฟลต (flash) การวาดภาพจากโปรแกรมแฟลตเป็นการวาดภาพแบบเวกเตอร์(Vector) ซึ่งวิธีการสังเกตเมื่อมีการขยายภาพแล้ว ภาพจะไม่แตกเช่นเดียวกับโปรแกรมแบบ อิลลัสเตรเตอร์ (illustrator) หรือ คุณภาพของภาพจะยังคงคุณลักษณะเช่นเดียวกับภาพต้นฉบับ ภาพอีกประเภทหนึ่งเรียกว่าภาพแบบบิตแมป(Bitmap i mages) หรือภาพแบบราสเตอร์ (Raster Image) ตัวอย่างเช่น
ภาพที่ถ่ายจากกล้องถ่ายภาพดิจิตอลแล้วนำภาพเข้าสู่โปรแกรมโฟโต้ชอป (Adobe Photoshop) แล้วทำการขยายภาพไปเรื่อยๆ สุดท้ายภาพจะแตกเป็นเม็ดสีเรียงติดกัน ภาพประเภทนี้จะจำกัดคุณภาพของภาพตามกล้องถ่ายรูปแบบดิจิตอลโดยมีการกำหนดเป็นจำนวนของพิกเซล (pixels) การวาดภาพในโปรแกรมแฟลตสามารถวาดได้หลายรูปทรง ไม่ได้จำกัดแต่เฉพาะรูปทรงที่เป็นเรขาคณิตเท่านั้น สามารถใส่สี แสง และเงาได้สวยงาม ลักษณะของจอภาพ ส่วนประกอบของโปรแกรม ประกอบด้วย กล่องเครื่องมือ (Tool Box) และแถบคำสั่ง (Menu bar) การทำงานกับโปรแกรมแฟลต ผู้ใช้งานจำเป็นต้องรู้จักกล่องเครื่องมือ ซึ่งทำหน้าที่เก็บอุปกรณ์ต่างๆที่จำเป็นสำหรับการทำงานกับโปรแกรมแฟลต ซึ่งกล่องเครื่องมือแสดงดังภาพด้านล่าง กล่องเครื่องมือประกอบด้วย 5 กลุ่มคือ - การวาดและการตกแต่งภาพ (Drawing and painting) ประกอบด้วย 3D Rotation tool (w) - มุมมอง (View) ประกอบด้วย Hand tool (H) - สี (Color) ประกอบด้วย Stroke color - เพิ่มเติม (Option) ขึ้นอยู่กับเครื่องมือที่ทำการเลือกใช้ การสร้างภาพและข้อความ การสเก็ตภาพ (sketch) เพื่อใช้สร้างภาพร่าง โดยทั่วไปจะใช้อุปกรณ์เช่น เมาส์ปากกา หรือใช้วิธีการวาดภาพบนกระดาษก่อนแล้วทำการสแกนภาพเข้าสู่เครื่องคอมพิวเตอร์ หรือวาดภาพบนกระดาษก่อนแล้วทำการถ่ายภาพจากกล้องดิจิตอลที่ติดมากับเครื่องโทรศัพท์มือถือ หรือถ่ายภาพจากกล้องดิจิตอลที่มีอยู่ จากนั้นทำการนำเข้าภาพเข้าสู่โปรแกรมแฟลตเพื่อสร้างเป็นภาพต้นแบบบนชั้นที่ 1เพื่อแสดงความต้องการของผู้ออกแบบว่ามีความต้องการภาพเป็นรูปแบบไหน จากนั้นอาจจะทำการสร้างเส้นโดยอาศัยภาพต้นแบบเพื่อตัดขอบให้สมบูรณ์อีกครั้งหนึ่งบนชั้นที่ 2 โดยเครื่องมือที่ใช้ในการวาดเส้นเพื่อตัดขอบประกอบด้วย 3 ชนิดคือ ดินสอ (Pencil tool) การวาดภาพโดยใช้เครื่องมือแบบวัตถุ (object tool) การลงสี (Paint tool) ซิมโบล (Symbol) และ อินสแตนซ์ (Instance) ซิมโบลคือ สัญลักษณ์ที่โปรแกรมแฟลตกำหนดขึ้นเพื่อใช้สำหรับสร้างวัตถุและการควบคุมวัตถุในการสร้างภาพเคลื่อนไหว โดยวัตถุที่ทำการสร้างขึ้นจะถูกจัดเก็บในส่วนของห้องสมุดของโปรแกรม ซิมโบลของโปรแกรมแฟลตมี 3 ชนิดประกอบด้วย กราฟิก (Graphic) สำหรับสร้างวัตถุทางด้านการวาดภาพกราฟิก จากตัวอย่างบนภาพจะมองเห็นว่า รูปกระต่ายเป็นซิมโบลแบบหนังสั้น เมื่อรูปกระต่ายถูกนำมาวางบนเวที รูปกระต่ายที่วางอยู่บนเวทีจะเป็นอินสแตนซ์ของหนังสั้น โดยผู้ใช้สามารถกำหนดชื่อของอินสแตนซ์ (Instance Name) ทางด้านซ้ายมือได้ โดยอินสแตนซ์จะมีการทำงานเหมือนกับซิมโบลทุกอย่าง แบบที่ 2 การเคลื่อนไหวโดยการย่อขยายขนาดของวัตถุ ทำเช่นเดียวกับการทำภาพเคลื่อนไหวโดยการย้ายตำแหน่งของตัวละคร และทำการเพิ่มฟังก์ชันโดยการขยายขนาดของตัวละคร หรือเพิ่มขนาดของตัวละคร (Free transform tool) แบบที่ 3 การเคลื่อนไหวโดยใช้ตัวอักษร เป็นการสร้างภาพเคลื่อนไหวโดยอาศัยเครื่องมือข้อความ (Text tool) การสร้างภาพเคลื่อนไหวแบบ Motion tween เป็นการสร้างภาพเคลื่อนไหวโดยการวางวัตถุบนฉากแรก ซึ่งวัตถุที่นำมาวางเป็นรูปผู้หญิง เพื่อทำให้ภาพเคลื่อนไหวคลิกขวาบนฉากที่ 1 เลือก Create motion tween ในฉากสุดท้ายต้องการให้ตัวละครกลับหัว ไปที่ฉากสุดท้าย Insert key frame แล้วทำการเลือกเครื่องมือ Free transform การสร้างภาพเคลื่อนไหวแบบ Shape tween เป็นการสร้างภาพเคลื่อนไหวโดยการวาดวัตถุบนฉากแรกโดยใช้สี่เหลี่ยม (Rectangle tool) การเคลื่อนไหวแบบสามมิติ (3D tween) เป็นการสร้างภาพเคลื่อนไหวโดยการวาดวัตถุบนฉากแรกโดยใช้วงกลม (Oval tool) สอดคล้องกับฉากสุดท้าย การสร้างภาพเคลื่อนไหวแบบ Mark Layer เมื่อทำการกด Lock ทั้งสองชั้นบนเส้นเวลาจะปรากฏแต่เฉพาะรูปที่อยู่ภายในวงรีเท่านั้น การสร้างการเคลื่อนไหวแบบกำหนดเส้นทางนำทางเอง (Guide motion tween) ทำการการสร้างรูปวงกลมบนฉากที่ 1 แล้วทำการเลือกฉากที่ 1 ทำการสร้างการเคลื่อนไหว Create classic motion และกำหนดฉากที่ 60 เป็นฉากสุดท้าย โดยการ Insert key Frame จากนั้นทำการเพิ่มชั้นของชิ้นงานเพิ่มอีกหนึ่งชั้นเป็นแบบกำหนดเส้นนำทางเอง (Add guide motion tween) แล้วทำการลากเส้นตามที่ผู้ออกแบบต้องการดังตัวอย่าง และกำหนดให้ฉากที่ 60 เป็นฉากสุดท้าย โดยการ Insert key Frame เช่นเดียวกับชั้นแรก จุดที่สำคัญ ให้กลับไปที่ฉากที่ 1 และฉากสุดท้ายของชั้นที่ทำการวาดรูปวงกลมไว้ แล้วทำการเลือนตำแหน่งกึ่งกลางของวงกลมให้ตรงกับเส้น ถ้ากึ่งกลางของรูปวงกลมไม่ตรงกับเส้น รูปวงกลมจะไม่เคลื่อนที่ตามเส้นที่กำหนดไว้ เสียง (Sound) การกำหนดไฟล์เสียให้กับภาพเคลื่อนไหว โดยการกำหนดไฟล์เสียงในโปรแกรมแฟลตจะแบ่งเป็น 5 ชนิดของไฟล์เสียง (Sync:) คือ Event, Start, Stop และ Stream
การนำเสนอชิ้นงาน (Scene) การนำเสนอชิ้นงานหลังจากที่ได้ทำชิ้นงานเสร็จแล้ว ไม่ว่าจะเป็นชิ้นงานที่เป็นแบบ หนังสั้น ภาพกราฟิก หรือปุ่ม ที่เก็บอยู่ในห้องสมุดของโปรแกรม วิธีการนำเสนอชิ้นงานจะต้องมีการลากชิ้นงานที่เก็บอยู่ในห้องสมุดมาวางไว้บนเวทีของหน้าต่างที่เรียนว่า Scene โดยงานที่ต้องการที่จะนำเสนอนั้นจะต้องมีขนาดเท่ากับหน้าต่างของ Scene เสมอ โดยถ้านำเสนอชิ้นงานที่มีขนาดใหญ่ก็สามารถขยายขนาดของ Scene ได้ จากตัวอย่างต้องการนำผลงานที่สร้างเป็นซิมโบลได้ทำการสร้าง Motion tween จากห้องสมุดมานำเสนอ จะต้องนำผลงานที่ได้มาวางไว้บน Scene ดังภาพ จากนั้นกด Ctrl + Enter เพื่อทำการแสดงผลงาน การเขียนคำสั่ง (Action Script) การเขียนคำสั่งเพื่อทำการควบคุมการทำงานของวัตถุในโปรแกรมแฟลต แสดงได้ดังนี้ คำสั่งหยุด (stop) คือ การเขียนคำสั่งเพื่อต้องการให้วัตถุหยุดการเคลื่อนไหว วิธีการเขียนคำสั่ง stop(); การเขียนคำสั่งจะนิยมทำการเขียนในชั้นของคำสั่ง (script) ทุกครั้งที่เขียนคำสั่งจะปิดท้ายด้วย “ ; ” เสมอ โดยคำสั่งนี้มักจะเขียนที่ฉากแรกและฉากสุดท้ายของภาพเคลื่อนไหว เพื่อทำให้ภาพเคลื่อนไหวหยุดการเคลื่อนไหวที่ฉากแรกและหยุดการเคลื่อนไหวเมื่อถึงฉากสุดท้าย วิธีการเขียนคำสั่งจะไปที่ฉากที่ต้องการเขียนคำสั่ง จากนั้นคลิกขวาเพื่อเลือกเมนู Action เพื่อใส่คำสั่งลงไป หลังจากนั้นจะปรากฏหน้าต่างของคำสั่งขึ้น สามารถพิมพ์คำสั่ง “Stop();” คำสั่ง gotoAndPlay(#Frame) และ gotoAndStop(#Frame) เป็นคำสั่งที่ใช้สำหรับบอกให้ไปหาฉากเคลื่อนไหวตามที่รุบุหมายเลขฉาก (#Frame) และทำการเล่น (Play) หรือทำการหยุด (Stop) gotoAndStop(2); หมายถึงไปที่ฉากที่ 2 แล้วให้ทำการหยุดเล่นภาพเคลื่อนไหวตั้งแต่ฉากที่ 2 gotoAndPlay(2);หมายถึงไปที่ฉากที่ 2 แล้วให้ทำการเล่นภาพเคลื่อนไหวตั้งแต่ฉากที่ 2 คำสั่งควบคุมการทำงานของเมาส์ (Mouse) เมื่อมีการกดปุ่ม (Button) กำหนดให้มีวัตถุเป็นปุ่มกำหนดชื่อ( Instance Name)ว่า playButton การควบคุมปุ่มเมื่อผู้ใช้กด CLICK สามารถเขียนเป็นคำสั่งได้ดังนี้ playButton.addActionListener(MouseEvent.CLICK, playMovie); function playMovie(myEvent:MouseEvent): void { //เพิ่มคำสั่ง } คำสั่งควบคุมการทำงานของแป้นพิมพ์ (key board) เมื่อมีการกดปุ่ม (Button) กำหนดให้มีวัตถุเป็นปุ่มกำหนดชื่อ( Instance Name)ว่า playButton การควบคุมปุ่มเมื่อผู้ใช้กดแป้นพิมพ์ สามารถเขียนเป็นคำสั่งได้ดังนี้ playButton.addActionListener(KeyboardEvent.DOWN, playMovie); function playMovie(myEvent:MouseEvent): void { //เพิ่มคำสั่ง } การเขียนคำสั่งกล่องข้อความ (Text box) การเขียนคำสั่งเมื่อผู้ใช้ป้อนข้อมูลเข้าสู้กล่องข้อความสามารถทำได้ กำหนดให้กล่องข้อความมีชื่อ(Instance Name) ว่า MyName การนำค่าเข้าสู่กล่องข้อความสามารถเขียนเป็นคำสั่งได้ดังนี้ MyName. Text = “ข้อความที่ต้องการนำไปใส่ในกล่องข้อความ”; ถ้าต้องการนำข้อความออกจากกล่องข้อความไปใช้ต่อสามารถเขียนคำสั่งได้ดังนี้ Trace(myName.text); |