อ้าวสวัสดีค่ะ สวัสดีล่ามทางไกลด้วยนะคะ ได้ยินไหมคะ ชัดแล้วนะ เดี๋ยวรอเช็กระบบแป๊บหนึ่งนะคะ โอเค ได้ค่ะ สวัสดีนะคะ นักศึกษานะคะ วันนี้ก็เป็นการเรียนเกี่ยวกับตัวมัลติมีเดียนะคะ แล้วก็จะมีทั้งหมด 3 เนื้อหานะคะ ก็จะเป็นอันแรกก็จะมาดูถึงเอกสารอธิบายนะคะ เกี่ยวกับตัวสื่อมัลติมีเดียที่เราจะนำมาใช้งานของเรานั่งเองนะคะ ว่ามันมีความหมายอย่างไรนะคะ มีประเภทแบบไหนบ้างแล้วก็สำหรับเนื้อหาที่ 2 นะคะ ก็จะเป็นรูปแบบของการอธิบายโปรแกรมนะคะ Adobe Animate นะคะ ซึ่งในสัปดาห์นี้เราก็จะปฏิบัติหรือว่าลงมือทำนะคะ เกี่ยวกับ workshop งานแรกของเรานั่นเอง ค่ะ สำหรับตัวเอกสารตัวแรกของเรานะคะ ก็จะเป็นตัวเราก็จะเห็นถึงความหมายนะคะ ว่ามัลติมีเดียคืออะไรบ้างนะคะ มัลติมีเดีย ก็คือการรวมกันนะคะ Multi แปลว่าหลากหลายนะคะ เกี่ยวกับพวกสื่อสารนะคะ ติดต่อสื่อสารนะคะ เมื่อรวมกันนะคะ มัลติมีเดียจึงหมายถึงการนำองค์ประกอบของสื่อชนิดต่าง ๆ มาผสมผสานเข้าด้วยกันนั่นเอง เดี๋ยวอาจารย์จะไปแบบเร็ว ๆ นะคะ เพราะวันนี้เรามีเนื้อหาค่อนข้างเยอะot ส่วนมากมัลติมีเดียของเราก็จะประกอบด้วย 4 ประการ มีพวกฮาร์ดแวร์ ซอฟต์แวร์ สื่อมัลติมีเดียแล้วก็การเชื่อมโยงสื่อสารนะคะ อันนี้จะเป็นพวกลักษณะของคุณสมบัติมัลติมีเดียต่าง ๆ นะคะ สื่อมัลติมีเดียแล้วก็องค์ประกอบเรามาดูองค์ประกอบของ Multimedia กันดีกว่านะคะ ก็จะมีลักษณะข้อความ ตัวอักษร ข้อความที่ได้จากการพิมพ์ ข้อความที่ได้จากการ Scanner นะคะ ข้อความ HyperText ที่เราน่าจะเคยใช้นะคะ พวกแค่ HTML นะคะ ถัดมาก็จะเป็นภาพนิ่ง ก็จะเป็นภาพนิ่งมี2 ประเภทก็จะเป็นแบบ Bitmap นะคะ ก็จะเป็นการเก็บข้อมูลแบบหรือเป็นจุดเด็ก ๆ อีกถัดมาก็จะเป็นภาพแบบ Vector นะคะ ก็จะเป็นส่วนประกอบของเส้นต่าง ๆ นะคะ เกี่ยวกับคุณสมบัติของสีของเส้นนั่นเองนะคะ แล้วก็มาประกอบกันเป็นรูปภาพขึ้นมา อันนี้น่าจะเป็นตัวอย่างระหว่าง Bitmap กับ Vector นั่นเอง แล้วก็จะเห็นถึงคุณสมบัติของตัวรูปภาพนะคะ ว่ามันจะมีรูปร่างหน้าตาที่แตกต่างกันนั่นเองนะคะ ถัดมา 3. ภาพเคลื่อนไหว ก็ทำให้รูปภาพนะคะ 2 มิตินะคะ สามารถมีการเคลื่อนไหวหรือว่า 3 มิติทำให้มีการเคลื่อนไหวมากยิ่งขึ้น อีกอันนี้ก็จะเป็นตัวอย่างนะคะ กรณีที่เราต้องการทำการเคลื่อนไหวของทุกคนนะคะ ในการเดินนั่นเอง ก็จะมีลักษณะการย่างก้าวของแต่ละขั้นตอนอีกนะคะ ถัดมาเสียง เสียงก็จะเป็นองค์ประกอบนะคะ ที่เก็บไว้นะคะ ในสัญญาณแบบดิจิตอลนะคะ ก็สามารถที่จะนำเป็นไปใช้งานในส่วนประกอบด้านอื่น ๆ ทำเป็นเสียงประกอบฉากหรือว่าเสียง Effect นะคะ ที่ให้ตัวองค์ประกอบของงานของเรานี่ สมบูรณ์ยิ่งขึ้นนั่นเองนะคะ เสียงก็จะมีประเภทต่าง ๆ นะคะ แบบ Audio นะคะ เราจะเป็นลักษณะ format wav.uav au นะคะ หรือ midi อันนี้เป็นพวกรูปแบบเสียงที่ใช้แทนเครื่องดนตรีนั้นเองอาอันนี้จะเป็นรูปภาพนะคะ ที่เป็นโปรแกรมการบันทึกเสียงของตัว Sound Recorder  ของเรานั่นเอง อันนี้จะเป็นองค์ประกอบต่าง ๆ ที่เป็นอุปกรณ์ในกรณีที่เราต้องการจะบันทึกเสียงนะคะ ว่าจะมีปุ่มควบคุมต่าง ๆ นะคะ เพื่อปรับคุณภาพเสียงกลาง เสียงทุ้ม เสียงแหลมต่าง ๆ นะคะ เพื่อผสมเสียงต่าง ๆ ให้มันเหมาะสมนะคะ ตามที่เราต้องการนะคะ ถัดมา Video นะคะ ก็ยังเป็นองค์ประกอบของมัลติมีเดียนะคะ วีดีโอก็จะเป็นลักษณะตอนที่นำภาพนิ่งแล้วก็ภาพเคลื่อนไหวนะคะ มาประกอบกันนั่นเอง รูปแบบของไฟล์วีดีโอนะคะ ที่ใช้บันทึกนะคะ ภาพและเสียงก็สามารถทำงานได้หลายรูปแบบนะคะ อย่างที่ 1 นะคะ ก็จะเป็น AVI นะคะ Audio Video Interleave  นะคะ ก็จะเป็นแบบ Format ของตัว Microsoft นั่งเองนะคะ อันที่ 2 ก็จะเป็น mpeg นะคะ ก็จะเป็นรูปแบบการบีบอัดให้มีขนาดที่เล็กลง แล้วก็ใช้งานได้ง่ายยิ่งขึ้นนั่นเอง อันที่ 3 เป็น Quick Time นะคะ อันนี้จะเป็นลักษณะของพัฒนาโดยบริษัทแอปเปิลนั่นเอง อันนี้ก็จะเป็นรูปองค์ประกอบตามมัลติมีเดียต่าง ๆ รูปแบบนะคะ ข้อความศิลป์ ภาพเคลื่อนไหวต่าง ๆ นะคะ อันนี้ขอข้ามไปนิดหนึ่งนะคะ เดี๋ยวให้นักศกลับไปศึกษาเกี่ยวกับตัวรายละเอียดของทฤษฎีเพิ่มเติมแล้วกันนะคะ ก็จะมีตามตัวเอกสารที่แนบตัวนี้ ของตัวมัลติมีเดียนะคะ เพราะว่าาเดี๋ยวเราจะไปดูเอกสารนะคะ หมายเลข 2 ของเรานะคะ เพื่อเราจะเริ่มทำการนะคะ อยู่ถึงรายละเอียดของตัวโปรแกรมสำหรับวันนี้ที่เราจะนำมาใช้งานกันนั่นเอง โอเคนะคะ สำหรับเอกสารตัวนี้อาจารย์ขอข้ามนะคะ เป็นสรุปย่อให้เท่านี้ก่อนแล้วก็ให้นักศึกษาไปศึกษาเพิ่มเติมนะคะ เนื้อหาอันที่ 2 นะคะ สำหรับครั้งนี้นะคะ เนื่องจากเราเรียนกับตัวสื่อมัลติมีเดียนะคะ แล้วนะคะ ก็จะมาพูดถึงตัวโปรแกรมที่เราจะถูกนำมาใช้นะคะ เป็นโปรแกรมที่ใช้เกี่ยวกับภาพเคลื่อนไหวนะคะ โปรแกรมนี้ก็จะใช้เป็นโปรแกรมของตระกูล Adobe ก็จะเป็นโปรแกรม Adobe Animated นะคะ คิดว่านักศึกษาน่าจะอาจจะเคยได้ยินพวกตระกูล Adobe อาจจะเป็นพวก Illustrator นะคะ ที่เราใช้ตกแต่งภาพPhotoshop ต่าง ๆ นะคะ ตัวนี้จะเป็นอีกโปรแกรมหนึ่ง ที่ถูกนำมาใช้งานเกี่ยวกับลักษณะเกี่ยวกับภาพเคลื่อนไหวนั่นเองนะคะ เดี๋ยวเราจะมาดูความหมายนะคะ ว่าตัวโปรแกรม Adobe ของเรานี่คืออะไร นะคะ ก็จะเป็นโปรแกรมสำหรับงานกราฟิก ภาพเคลื่อนไหว มัลติมีเดียบนเว็บนะคะ ซึ่งสามารถนำไปใช้งานได้หลากหลายรูปแบบซึ่งก็จะเรียกว่า "มูฟวี" นะคะ ตัว Animated นะคะ ที่เราถูกบันทึกเป็นไฟล์ออกมาก็จะมีลักษณะองค์ประกอบพวกภาพเคลื่อนไหวนะคะ ตัวอักษร โลโก้กราฟิก เสียงนะคะ พร้อมเอฟเฟกต์ หรือจะเป็นลักษณะทำเป็นเกมโปรแกรมโต้ตอบกับผู้ใช้นะคะ จนถึง from นะคะ ที่ใช้ในการกรอกข้อมูลหรือส่งข้อมูลไปยังเครื่องเซิร์ฟเวอร์เพื่อประมวลผลขั้นตอนการสร้างภาพเคลื่อนไหวหรือว่า Movie ของเราก็เริ่มจากเวลาเราจะสร้างชิ้นงานหรือว่าอะไรสัก 1 อย่าง เริ่มแรกต้องมีการวางโครงเรื่อง ถัดมาก็เรามีโครงเรื่องเรียบร้อยแล้ว ก็ต้องดูองค์ประกอบของชิ้นงานนั่นเอง แล้วก็มาเริ่มการสร้างชิ้นงาน สร้างเสร็จก็ต้องทำการทดสอบชิ้นงาน แล้วก็ทำการแปลงไฟล์นะคะ หรือว่าตัวชิ้นงาน เพื่อสำหรับการเผยแพร่นะคะ ให้ผู้อื่นได้เข้ามารับชมตัวงานของเรานะคะ คราวนี้เราจะสามารถใช้โปรแกรม Adobe Animated ได้อย่างไรนะคะ โปรแกรมนี้จะเหมาะกับอุปกรณ์คอมพิวเตอร์ที่เรามีอยู่หรือเปล่า แล้วต้องดูหรือว่าคำนึงถึงส่วนไหนบ้างนะคะ เริ่มแรกก็ต้องมาดูที่ความสามารถของเครื่องของเรานะคะ ว่ามีความเร็วสูงไหม หน่วยความจำของเราเพียงพอ Harddisk มีพื้นที่ว่างมากพอหรือเปล่านะคะ เราจะมาดูคุณสมบัติอย่างต่ำ ที่จะใช้ติดตั้งตัว Adobe Animate ของเรานะคะ ว่ามีคุณสมบัติอะไรบ้างนั่นเองนะคะ  กรณีใช้การติดตั้งในรูปแบบของ Windows ของเรานะคะ ก็จะมาดูเริ่มจากตัว CPU ของเรานะคะ อันนี้จะเป็นรูปแบบของตัว Intel 4 หรือ Intel 4 ของเรานะคะ ระบบปฏิบัติการ ก็เป็น windows 10 นะคะ แล้วก็ RAM ที่เราจะใช้นะคะ ก็ขั้นต่ำน่ะ 8 นะคะ แต่ว่าถ้าให้ดี ก็คือต้องเป็น 16 g นั่นเอง แล้วก็พื้นที่ว่างของตัวฮาร์ดดิสก์นะคะ ก็จะเป็นที่4 GB นั่นเองนะคะ แล้วก็ประสิทธิภาพหรือว่าหน้าจอนั่นเอง ความสามารถก็เต็มที่ 1024 x 900 นะคะ แล้วก็ GPU ของเรานะคะ ก็จะเป็นเวอร์ชัน 3.3 หรือสูงกว่าแล้วก็ต้องมีระบบเครือข่ายที่สามารถรองรับแล้วก็การใช้งานได้นั่นเองนะคะ อันนี้ก็จะเป็นรูปแบบของตัว Windows ของเรา ถัดมา ในตระกูลของตัว Mac OS ของเรานะคะ ก็ Processer จะเป็น 64 bit นะคะ Intel นะคะ แล้วก็ระบบปฏิบัติการก็จะเป็น iOS เวอร์ชั่น 11 RAM 8 GB เหมือนกันเหมือนกับตัว Windows ของเรานะคะ เราก็จะมี 8 GB เท่ากันนะคะ ตัวหน้าจอนะคะ แสดงผลของเราก็เท่ากันนะคะ ก็คือ 1024 นะคะ x 900 นะคะ ตัว CPU ก็จะเป็นเวอร์ชัน 3.3 อินเตอร์เน็ตนะคะ ก็จะเป็นลักษณะการเชื่อมต่อการใช้งาน แล้วก็โดย Software Quiในกรณีที่ใช้ในการเล่นหรือว่าไฟล์งานที่เราจะเผยแพร่นั่นเองนะคะ อันนี้ก็จะเป็น 2 ระบบปฏิบัติการที่นักวะเนี่ยค่อนข้างใช้กันอยู่แล้วก็บอกคุณสมบัติ ความต้องการขั้นต้นที่จะสามารถลงตัว Adobe Animated หรือว่าโปรแกรมที่จะใช้ในวันนี้นั่นเอง เราก็สามารถไปดูที่ตัวเครื่องคอมพิวเตอร์ของเราได้ว่ามีคุณสมบัติของตัวเครื่องนี่อยู่เท่าไรนั่นเองเดี๋ยวเราจะมาพูดเกริ่นนะคะ เกี่ยวกับการใช้งานตัว Adobe animate นะคะ จะเป็นตัวโปรแกรมนะคะ ที่เราจะใช้งานในวันนี้ ก็คือการทำภาพเคลื่อนไหว2 มิติ ซึ่งพี่พลอยเขาก็จะทำการติดตั้งตัวโปรแกรมให้เรียบร้อยแล้วนะคะ เขาจะอยู่ตรงหน้าจอนะ การใช้งานเดี๋ยวเราจะมาดูนะคะ เดี๋ยวจะอธิบายขั้นตอนคร่าว ๆ ก่อนนะคะ ก่อนที่เราจะมาลงมือปฏิบัติงานกันจริง เริ่มแรกก็เปิดตัว Animated ขึ้นมา เราก็เลือกโปรแกรมไฟล์แล้วก็มีอันนี้เดี๋ยวจะพูดไปคร่าว ๆ ก่อนนะคะ ว่ามีแบบไหนแล้วก็มาดูคุณสมบัติของตัวโปรแกรม ว่าเราใช้อย่างไรบ้าง มันก็จะมีหน้าต่างขึ้นมานะคะ ว่าเราจะใช้งานตัว Cueertic เราจะใช้งานแบบไหนหรือว่าจะทำเป็นแบบไหนนางเอกนะคะ ก็สามารถเลือกได้ ส่วนตัวงานในครั้งนี้ก็จะใช้เป็น Default ทั้งหมด ก็คือตามที่ตัวหน้าจอที่มันขึ้นมานี่ แล้วก็ไม่ต้องปรับค่าอีกนะคะ ซึ่งเขาจะมีการกำหนดค่าให้อยู่แล้วนะคะ แล้วก็เลือกเป็นตัวhd นะคะ ก็คือ 1280 กับ 720 นะคะ framrate ก็อยู่ที่ 30 framrate ก็คือลักษณะการชิ้นงานที่เราเฟรมราคาต่อการเล่นนั่นเองนะคะ เราก็ชอบของเรานะคะ เลือกเป็น Action scriopt 3.0 นะคะ ซึ่งตัว Script 3.0 เดี๋ยวก็อาจจะมีการพูดบ้างนะคะ ก็จะเป็นลักษณะการเขียนโค้ดในการที่ใช้กับตัวโปรแกรมของเราเอง เมื่อเข้าสู่ตัวโปรแกรม Adobe Animated เรียบร้อยแล้วก็จะมีองค์ประกอบเรื่องเดี๋ยวจะสรุปเป็นคร่าว ๆ นะคะ มันก็จะมีหน้าต่างขึ้นมานะคะ ประมาณนี้ แล้วก็จะมีพื้นสีขาว ๆ นะคะ เดี๋ยวเราจะมาดูองค์ประกอบนะคะ ว่าแต่ละส่วนนี่ เขาทำงานอะไรบ้างนะคะ เราจะได้เข้าใจแล้วก็มาใช้งานได้นั่นเองนะคะ เริ่มแรกนะคะ มาดูตรงเมนูบาร์ด้านบนตรงนี้ แล้วจะเหมือนลักษณะการใช้งานทั่วไปของเราก็จะมีพวก File Edit View insert   นะคะ ตัวนี้ก็จะเป็นแถบที่รวบรวมคำสั่งของการใช้งานนะคะ ทั้งหมดเลยสร้างตัวภาพเคลื่อนไหวหรือว่า Movie ของเรานั่นเองนะคะ กก็ประกอบด้วยหลายเมนู ซึ่งเมนูตัว Windows นะคะ ตัวนี้ก็คือสามารถกรณีที่เลือกเวลาที่เราใช้งานแล้ว พวก พวกเมนูบางเมนูหายไป แล้วก็สามารถดูได้ กรณีถ้ามันมีลูกศรติ๊กข้างหน้าที่เป็นสีฟ้านี่คือเราเรียกใช้งานอยู่นะคะ แล้วถ้ามันหายไปมันจะเป็นสีเทาแล้วก็สามารถที่จะมาคลิกเลือกตรงนี้แล้วก็ดึงตัวเอามาใช้งานได้เหมือนเดิมนั่นเองนะคะ ถักมา tiome line นะคะ ก็จะเป็นลักษณะของเส้นเวลาใช้กำหนดรายละเอียดการเคลื่อนไหว time line ที่ 1 2 3 4 5 นะคะ มีการเคลื่อนไหวแบบไหนนะคะ โดยองค์ประกอบที่จะเคลื่อนไหวก็จะเรียกว่าตัววัตถุ object นั่นเองการจัดวางแต่ละภาพนะคะ ก็จะเป็นภาพเคลื่อนไหวนะคะ วิธีการทำภาพเคลื่อนไหวสมัยก่อน ก็คือเหมือนกรณีที่เราเคยวาดรูปเหมือนในขอบหนังสือหรือว่าปลายหนังสือได้รูปซ้ำ ๆ กันและมีการปรับเปลี่ยนตัวองค์ประกอบต่าง ๆ grnjvมันเอามาต่อกัน แล้วก็จะเป็นภาพเคลื่อนไหว อันนี้จะเป็นลักษณะเดียวกันนะคะ ว่าถ้ามีการเคลื่อนไหวแต่ละช่วงเวลาที่แตกต่างกันนี่ มันก็จะทำให้ถูกของเรานะคะ หรือว่าตัวละครที่เราสร้างขึ้นเนี่ยมีการเคลื่อนไหวหรือว่าเปลี่ยนท่าทางไปมันอีก ซึ่งนะคะ การจัดวางต่อการคุณภาพในแต่ละช่วงเวลาก็จะเป็นภาพเคลื่อนไหวก็จะเรียกว่า Frame ที่ 1ตัวละครของเราทำแบบไหนเป็นที่ 2 รูปร่างอย่างไรนั่นเองตัวทำเคลของเราเนี่ยก็จะประกอบด้วย frame นะคะ ก็จะเป็นพวกภาพเสียงการเคลื่อนไหวอื่น ๆ นะคะ ตัวละครของเราเนี่ยจะทำอะไรบ้าง มันเองหรือว่าทำสร้างขึ้นมานะคะ มีการดึงข้อมูลต่าง ๆ คำสั่งนะคะ เมนูที่ใช้บ่อย ๆ ก็จะมีพวก file Edit Modify แล้วก็ตัว Windows นั่นเอง ถัดมา Layer นะคะ จะเป็นชั้นที่ทำงานนะคะ ลักษณะเหมือนกรณีถ้าการทำภาพเคลื่อนไหวของสมัยก่อน ก็คือการเอาแผ่นใสหรือนำกระดาษหลาย ๆ ชั้นนี่ มาวางซ้อนทับกันแล้วก็วาดรูปโดยให้ตัวละครของเรานี่ มีการเคลื่อนไหว หรือว่าเปลี่ยนท่าทางนะคะ ซ้อนกันหลาย ๆ ภาพขึ้นมา โดยนะคะ เมื่อเกิดภาพที่ซ้อนกันขึ้นมา แล้วก็มีการเปลี่ยนทิศทางเมื่อเรานำมาเสนอหรือว่าเล่นต่อกันเนี่ยเราจะทำให้เกิดภาพเคลื่อนไหวนะคะ 2 มิติขึ้นมา ตัว Layer นี่ก็จะแยกกันเป็นอิสระ Layer ที่ 1 ก็คือแผ่นที่ 1 นะคะ มีองค์ประกอบอะไรนะคะ ซึ่งตัว Layer เดี๋ยวเราก็จะมาพูดกันเวลาเราตัวใช้งานนะ ว่ามันจะมีลักษณะแบบไหนนะคะ สำหรับตัว timline กับ Frame ที่เราพูดไปนะคะ ก็จะทำงานเหมือนลักษณะในการดูภาพยนตร์นั่นเอง Frame ที่ทำงานแต่ละเส้นต่อเนื่องกันจนทำให้เกิดภาพเคลื่อนไหวแสดงผลที่รับ Frame ด้วยจะมีหัวอ่านนะคะ ตัวPlayhead ไปยังสีแดงที่คอยบอกตำแหน่งนะคะ ว่าอยู่ในเฟรมใดนั่นเองนะคะ กรณีที่เราสามารถเปิดสามารถใช้คำสั่งทำลายหรือกดคีย์ลัดเป็น Ctrl + Alt + Tคราวนี้ก็เวลาเราทำงานนะคะ เกี่ยวกับพวกตัวละคร ฉาก ต่าง ๆ นี่ เราต้องมีการกำหนดชื่อ layer เพื่อแสดงรายละเอียดเวลาที่ คนที่กลับมาแก้ไขงานของเราหรือว่าเราก็มาใช้งานหน่อยก็จะได้เข้าใจได้ว่า ตัว Layer ที่เราปรับหรือว่าแก้ไขไปนะนี่ ชื่อตรงไหนสามารถที่ปรับแต่งค่าก็จะได้ง่ายแล้วก็ถูกต้องกันเอง เช่น กรณีที่เรานำพื้นหลังเข้ามาสู่ตัวงานของเราแล้ว ชื่อที่จัดตั้งนะคะ เกี่ยวกับพื้นหลังก็จะตั้งเป็นตัวตามชื่อเลย เป็น Background นะคะ หรือว่า BG นั่นเองนะคะ เพื่อจะได้ง่ายกรณีที่เรากลับมาแก้ไข หรือว่าปรับเปลี่ยนตัวพื้นหลังของเรานั่นเองนะคะ ถัดมา แถบเครื่องมือนะคะ จะเป็นแถบที่รวบรวม คำสั่งที่ใช้งานในตัวโปรแกรม Adobe Animated ของเรานะคะ  เราก็สามารถที่จะคลิกที่ไอคอนตัวนั้นแล้วก็เลือกใช้ได้ทันทีนคะะ กรณีที่ตัวแท็บเครื่องมือของเราเกิดปิดไป เราก็สามารถเลือกคำสั่งตัว Windows แล้วก็ตัว Tools มันก็จะมีตัวแถบเครื่องมือนี้กลับขึ้นมา ทำให้เราที่สามารถที่จะคลิกใช้นะคะ ในลักษณะรูปแบบต่าง ๆ แต่จะเป็นการแก้ไขการวาดรูปการดูดสีฟัย่อขยายรูปภาพต่าง ๆ ก็สามารถทำได้ทั้งนั้นเลย Panels ก็จะเป็นหน้าต่างที่กำหนดการปรับแต่งวัตถุหัวตัวละครตัวชิ้นงานของเรานะคะ โดยก็จะแบ่งเป็นหมวดหมู่นะคะ เขาจะเป็นอะไรก็จะเป็น Panels Color ตามตัวเขาเลยนะคะ Color ก็จะเป็นลักษณะของสี สีของเราก็จะมีลักษณะเลือกใช้สีได้เลย หรือผสมสีได้ ซึ่งอาจารย์แต่ง ปรับแต่งสีให้กับรูปภาพ ตัวอักษร หรือว่าตัวละครนะคะ มันก็มี panel ของ Color ก็จะลักษณะของที่เราสามารถที่จะเลือกสีมาผสมกันส่วน Swatches ก็คือสีที่เลือกมาจากตัวโปรแกรม ก็คือเขากำหนดมาให้แล้วเราก็สามารถเลือกได้ว่าเราต้องการสีนี้นั่นเองนะคะ เหมือนกันกรณีที่ตัว Panels Color ของเรานี่ เกิดหายไปจากตัวโปรแกรมเราก็สามารถที่จะจากคำสั่ง Windows นะคะ แล้วก็มาเลือก Color กรณีต้องการ panel swatches ที่เป็นตัวเลือกที่ Windows แล้วก็เลือกตรงกันอีกนะคะ ก็สามารถที่จะดึงนะคะ ตัวครึ่งนึงพวกนี้ กลับมาใช้งานได้เช่นเดียวกันเองนะคะ Windows เนี่ยสามารถที่จะดึงแถบเครื่องมือต่าง ๆ ที่มันหายไปจากหน้าจอของเราเนี่ยให้กลับมาใช้งานได้นั่นเองนะคะ ถัดมา Panels Align นะคะ เป็นลักษณะเกี่ยวกับจัดเรียงวัตถุให้อยู่ในแนวเหมือนเวลาเราพิมพ์ตัวอักษรในเอกสาร Word เราต้องการให้ตัวอักษรของเราอยู่กึ่งกลางอยู่ข้างขวา ข้างซ้ายก็สามารถที่จะจัดเรียงได้เช่นเดียวกันกรณีนี้ก็เช่นเดียวกันนะคะ ตัว Align ก็สามารถที่จะตัววัตถุ หรือว่าตัวละครของเรานี่ อยู่กึ่งกลาง เรียงลำดับกันนะคะ ข้างขวาข้างซ้ายเหล่านี้ก็ใช้ได้เช่นเดียวกันนะคะ มันก็จะทำให้ตัววางของเรานี่ค่อนข้างใช้งานง่ายยิ่งขึ้นนะคะ จัดให้เป็นระเบียบมากยิ่งขึ้นนั่นเองนะคะ ถัดมา Panel Info ก็จะเป็นลักษณะพูดถึงรายละเอียดของวัตถุนั่นเอง ความกว้างความยาวความสูงของวัตถุอยู่ตำหนัก แกงอะไรเนื่องจากงานของเราเป็นรูปแบบ 2 มิติ ก็จะมีลักษณะของวัตถุอยู่ที่แกน x และแกน Y นั่นเองนะคะ ถัดมา Panels Transformers มันจะเป็นแนวที่ใช้ปรับขนาดบิดแล้วก็หมุนวัตถุได้ตามชื่อคือ Transform คือการเปลี่ยนปรับเปลี่ยนรูปร่างนั้นเองนะคะ การเลือกใช้ นะคะ การหมุนวัตถุคิวนะคะ มีวัตถุขึ้นต้นว่า 3D นะคะ จะเป็นลักษณะของตัววัตถุที่เป็นกรณี3 มิติ 3D Rotation ก็จะเป็นลักษณะการหมุนวัตถุ 3 มิติ 3D Center Point ก็เป็นการกำหนดจุดศูนย์กลางของวัตถุ 3 มิติเช่นเดียวกันนั่นเองนะคะ ปรับขนาด ขณะบิดหมุนวัตถุนั่นเอง ถัดมา Panel Library นะคะ ก็จะเป็น Pแนวที่องค์ประกอบนะคะ พวกทุกสิ่งอย่างที่ถูกนำเข้ามาสู่ตัวโปรแกรมของ Adobe animated ของเราไม่ว่าจะเป็นภาพ Movie Video ไฟล์เสียงนะคะ เราก็สามารถที่จะไปเก็บแล้วก็ดึงเรียกใช้งานกับมาได้เช่นเดียวกันนะคะ ถัดมา Panel Motion presets ก็จะเป็น Panel ที่เก็บการเคลื่อนไหวสำเร็จรูปนะคะ ช่วยให้เราสามารถใช้งานได้สะดวกมากยิ่งขึ้นนั่นเองนะคะ ถัดมานะคะ Panel   Action จะเป็น Panel   ที่ใช้สำหรับเขียน Script นั่นเองนะคะ เราสามารถที่จะใส่โปรแกรมนะคะ Script นี่ เข้าไปในตัวภาพเคลื่อนไหว 2D  3D ของเราได้นะคะ สามารถทำเป็นลักษณะการโต้ตอบนะคะ Interaction การทำงานระหว่าง ผู้ใช้นะคะ กับตัวโปรแกรมนั่นเอง แล้วก็ panel Property นะคะ ก็จะเป็นประเด็นที่แสดงคุณสมบัติต่าง ๆ ของวัตถุของเรานั่นเองนะคะ ตอนนี้ก็จะแสดงรายละเอียดเปลี่ยนไปตามกรณีที่เมาส์ของเราไปเลือกที่วัตถุชิ้นไหน อาจจะไปเรียกที่ตัวละครว่าจะมีคุณสมบัติอะไร หรือไปเรียกที่ปุ่มกดนะคะ มีคุณสมบัติที่แตกต่างกันไปหรือเป็นเลือกที่ทับหลังคุณสมบัติของแต่ละแต่ละองค์ประกอบที่ตัวเมาส์ไปคลิกเลือกนี่ ก็จะมีคุณสมบัติที่แตกต่างกันนั่นเอง ถัดมา พื้นที่ที่เราต้องสนใจมากที่สุดนะคะ ก็คือ Stage แล้วก็พื้นที่ทำงานนะคะ พื้นที่หน้าตาสีขาวที่เราเปิดโปรแกรมขึ้นมากลางหน้าจอนะคะ อันนี้ก็จะเรียกว่า Stageนะคะ ส่วนพื้นที่สีเทาที่ล้อมรอบนะคะ เรียกว่าพื้นที่ทำงาน ซึ่ง Stage ได้ก็เหมือนกับเวทีแล้วพื้นที่ทำงานก็จะเป็นหลังเวทีนะคะ ที่เราสามารถเอาอุปกรณ์ประกอบต่าง ๆ มาวางไว้ก็ได้แต่ว่าเรานำเสนอผลงานของเรานี่ พื้นที่ที่เป็นถึงที่ทำงานนี่ ก็จะไม่แสดงพวกองค์ประกอบต่าง ๆ มีออกมานั่นเองนะคะ อันนี้มีใครมีคำถามไหมเขา คร่าว ๆ เกี่ยวกับการใช้โปรแกรมนะคะ อันนี้พูดถึงองค์ประกอบของตัวโปรแกรม Adobe animate นะคะ ว่าเขามีองค์ประกอบอะไรบ้าง มีเมนูมี Panel นะคะ มีการปรับใช้อย่างไรนะคะ โอเค น่าจะไม่มีใครมีคำถามนะ โอเค คราวนี้เดี๋ยวเราจะมาเริ่ม ทำการใช้โปรแกรม Adobe Animated นะคะ ทุกเครื่องนะคะ ในห้องแล็บเรานะ ลงโปรแกรมเรียบร้อยแล้วนะคะ เดี๋ยวเราจะมาเริ่มใช้งานกัน มาที่หน้าจอ Desktop นะคะ ทุกคน ๆ เดี๋ยวเรามาทำพร้อมกันนะคะ ปฏิบัติ เข้ากับบัญชีตัวโปรแกรม Adobe Animated 2023 นะคะ โปรแกรมก็กำลังเปิดขึ้นมา ตัวนี้ก็จะเป็นหน้าจอสีดำขึ้นมานะคะ ได้เหมือนกันแล้วนะ ขอดูเดี๋ยวต้องทำพร้อมกันนะ เดี๋ยวไม่ทันเดี๋ยวจะงง โอเค เดี๋ยวอาจารย์ขอย่อนิดหนึ่งเดี๋ยวจะขอเปิดตัวงานให้ดูงานให้ดูก่อนว่าวันนี้เราจะทำประมาณไหน เราจะทำการทำภาพเคลื่อนไหวนะคะ ที่มีการเคลื่อนไหวแบบการเดินนะคะ หรือว่าการเปลี่ยนรูปทรงนะคะ ง่าย ๆ ลักษณะก็จะเป็น มีการเคลื่อนไหวของตัวละครนะคะ แล้วก็มีการเปลี่ยนรูปทรงของตัวละครเช่นเดียวกันนะคะ เริ่มแรกนะคะ ที่เราเห็นจากหน้าจอตรงนี้นะคะ เราก็จะมีเห็นว่ามันจะมีพื้นหลัง พื้นหลังก่อนใช่ไหมนะคะ ส่วนตัวละครที่เรานะคะ เนื่องจากเราเรียนเป็นแบบการใช้งานนะคะ เราก็จะใช้องค์ประกอบที่มีอยู่ในตัวเครื่องมือ ของตัวโปรแกรมของเรามาใช้งานเลย เริ่มแรกให้นักศึกษาหาพื้นหลังที่เราต้องการอยากได้เราอยากได้เป็นภาพวิวในเมือง ภาพวิวในป่า ภาพวิวในทะเลทรายนะคะ หรือในห้องหรือว่าอย่างไรก็แล้วแต่ให้เราทำการเข้า Google นะ แล้วก็ไปเลือกภาพพื้นหลังที่เราต้องการนะคะ background ก็ได้นะคะ เสือกเป็นอะไร ตึกก็จะเป็นพวก Building เป็นอาคาร หรือเลือกเป็นป่า เขาจะเป็น Forest หรือว่าพิมพ์ภาษาไทยก็ได้นะคะ เป็นป่า สนอะไรหรือแล้วแต่นะคะ เดี๋ยวรอให้ทุกคนหาไฟล์ก่อนนะคะ อย่างนี้น่าจะเป็นภาพพื้นหลังที่อาจารย์หามาก็จะเป็นรูปภาพอาคารตึกในเมือง สามารถเลือกแล้วก็ดาวน์โหลดเก็บไว้ในเครื่องนะคะ เดี๋ยเดี๋ยวรอแป๊บนึงนะ รอทุกคนนะคะ เลือกพื้นหลังที่ต้องการก่อน เดี๋ยวบอกไกด์ให้นะคะ ตัวพื้นหลังของเรานะคะ พวกตัวละครที่มีอยู่ในตัวโปรแกรม ก็จะมีลักษณะของรูปคนนะ เราก็ Free Sเอาว่าเราจะเอาขึ้นหลังประเภทไหนนะคะ พื้นหลังที่เราจะออกแบบอยู่ในห้องนอนไหม หรือว่าอยู่ข้างนอก หรือเป็นสวนสาธารณะนะคะ หรือว่าอยู่ในป่าหรือว่าอยู่บนท้องฟ้าเลยนี่ได้หมด สนามแล้วแต่นะคะ การออกแบบของเราว่าเราอยากออกแบบอย่างไรคิดว่าน่าจะเหมาะสมนะคะ ตัวตาม ตัวโครงร่างที่เราจะสร้างขึ้นน่ะ เหมือนเมื่อกี้เราพูดถึงขั้นตอนการสร้างตัว Multimedia ของเราไประนองแล้วก็ต้องมีโครงโครงสร้างของตัวงานของเรานะคะ ว่าเราจะสร้างมันเป็นรูปแบบไหนของเราอาจจะเป็นภาพที่อยู่ในป่านะคะ หรือว่าอยู่ในชุมชนเมืองหรือว่าเป็นนอกเมืองก็ได้นะคะ หรือจะเป็นในสี่แยกก็แล้วแต่ว่าเราจะจินตนาการแล้วก็ออกแบบตัวชิ้นงานของเราแบบไหนนั่นเองนะคะ เมื่อเราได้รูปภาพที่ต้องการแล้วก็ดาวน์โหลด เก็บไว้ที่เครื่องคอมพิวเตอร์ของเรา ตั้งชื่อที่สื่อตัวงานที่เราสามารถกลับไปเรียกดูรูปภาพตัวนี้มาใช้งานได้อีกนะคะ บอกอีกนิดหนึ่งนะ การเลือกรูปภาพนะคะ ก็ต้องมีขนาดที่ค่อนข้างรองรับกับตัวหน้าจอก็คือภาพที่มีขนาดใหญ่นิดหนึ่งนะคะ เอามาดูมันก็จะมีขนาดของรูปภาพเลือกที่ว่ามี Size ขนาดใหญ่นะคะ เพื่อมันจะได้เวลาเราขยายมันจะได้ภาพที่ค่อนข้างคมชัดนั่นเองนะคะ ใครยังไม่เสร็จบ้างเอ่ย เดี๋ยวรอเพื่อนนะ เรียบร้อยหมดแล้วใช่ไหมคะ โอคเ คราวนี้เดี๋ยวเราจะมาเริ่มนะคะ ใช้ตัวโปรแกรมของเรา เมื่อกี้เราเปิดเข้ามาราคาก็เป็นหน้านี้เสร็จแล้วมาที่ไฟล์มุมบนซ้ายด้านบนคลิก 1 ครั้งนะคะ ทันนะแล้วเลือก New จะมีหน้าต่างขึ้นมานะคะ ขึ้นเป็น New Document ตรงนี้นะคะ ตัวนี้เนื่องจากเราจะใช้เป็นรูปแบบการเคลื่อนไหว Animation นะคะ เราก็จะเลือกตามที่ตัวโปรแกรมนี่เขาเลือกมาให้เราอยู่แล้วก็จะเป็นcharacter Animation นะคะ ส่วนรูปแบบนะคะ เราจะทำเป็น hd หรือเป็น Standard นะคะ สมมติอาจารย์หรือเป็น hd ก็ได้ hd นะ เสร็จแล้วก็เลือกความกว้าง ความสูง ก็ตามนี้เลยนะคะ เราก็ Frame Rate ก็คือตัวFrame นะคะ ที่ทำงานของเราอยู่ที่ 30 คือเราไม่ต้องปรับค่า Action Script นะคะ แล้วก็เลือกเป็น Action Script 3.0 รูปแบบตัวโปรแกรมที่เลือกมาเลยแล้วกดคำว่า OK รอนิดหนึ่งนาะโอเค คราวนี้เราก็จะมีหน้า Scence ขึ้นมานะคะ เราจะเห็นด้านบนซ้ายมือนะคะ เขียนเขาว่า scence 1 รอเพื่อนนะ โอเคมาทีหลัง รอเพื่อน คราวนี้ เรามีตัว Stage หรือว่าตัวพื้นสีขาวตัวนี้ขึ้นมาเรียบร้อยแล้ว ตอนนี้เราอยากให้พื้นสีขาวของเรานี่ เปลี่ยนเป็นรูปภาพที่เราก็คือรูปภาพที่เราทำการดาวน์โหลดน่ะค่ะ ว่าเราต้องโหลดไว้ตรงไหนวิธีการนะคะ ก็คือสามารถทำได้หลายวิธี ก็คือสามารถที่จะลากรูปภาพที่เราดาวน์โหลดนี่ มาวางไว้ตรงพื้นที่สีขาวนี้ได้เลย หรือกรณีหนึ่งที่เราจะถามก็คือเราจะจำไว้ตรง Library เพราะในกรณีที่เก็บไว้ใน library  ก็คือเหมือนเป็นที่เก็บเราสามารถที่จะเรียกมาใช้งานได้ทุกเมื่อนะเอกวิธีการของเราก็คือยกควายนะคะ เราก็ Import file Import แล้วก็Import to Library นะคะ คลิก 1 ครั้ง เขาถามว่าเราจะเอารูปภาพมาจากที่ไหนเราก็ไปเลือกที่ที่เราทำการเก็บรูปภาพดาวน์โหลดตัวสภาพอากาศที่เราเลือกไว้เมื่อกี้ว่าเราเก็บไว้ที่ไหนนั่นเอง สมมติของอาจารย์ตัวนี้ เราก็กด Open ไป อาจารย์ขอเพิ่มอีกรูปนึง ปึ๊บ file Import Import to libraryเ ลือกรูปภาพ เมื่อเรากด Import to Library เสร็จนะคะ ทางฝั่งขวามือของเราจะมีคำว่า Library เรากด 1 ครั้ง เพื่อดูว่ารูปภาพที่เรา Import เอามานี่เข้ามาหรือยังนั่นเองนะคะ เมื่อเราได้รูปภาพเสร็จแล้วนะคะ แล้วก็มาตรง Libray ของเราแล้วก็มาเลือกรูปภาพที่เราต้องการนะคะ ลากมาไว้ตรงพื้นที่สีขาวของเราปึ๊บนะคะ อย่างที่บอกไปนะ พอดีเราต้องเลือกไฟล์ที่มีรูปภาพขนาดใหญ่นะ มันจะได้ปรับแล้วมันจะได้ดูความคมชัดแล้วก็สวยงาม ให้พอดีกับพื้นที่สีขาวของเรา ตรง Stage ของเรานั่นเอง มันจะมีกรอบสีอยู่นะ ค่อย ๆ ปรับ ก็ขยายเอาแต่ว่ามันก็น่าจะได้อยู่ถ้ามันรูปภาพตัวไหนที่มันเล็กก็สามารถที่จะขยายให้มันเต็มกับพื้นที่ Stage ของเรานะคะ อันนี้อาจจะพูดแบบคร่าว ๆ ไปเร็วไปหน่อยนะคะ คราวนี้เราเอารูปภาพมาเสร็จแล้วนะคะ คราวนี้เรามาดูเครื่องมือฝั่งซ้ายมือนะคะ ให้เราเลือกตรง Free Transformer นะคะ ตัวที่ 2 ที่มันมีรูปหัวลูกศร แล้วก็เป็นสี่เหลี่ยมนะคะ แล้วก็มี... นะคะ ให้เราเลือกตัวนั้นนะคะ เราก็สามารถที่จะเอาเมาส์ไปวางตรงมุมบนซ้าย มุมบนขวา หรือมุมล่างก็ได้ แล้วก็สามารถที่จะลากเมาส์ คลิกเมาส์ค้างแล้วก็ทำการขยายหรือย่อตัวรูปภาพให้เหมาะกับตัวพื้นที่สีขาวของเรานั่นเองนะคะ เดี๋ยวรอเพื่อนแป๊บหนึ่งนะคะ เมื่อเรามีพื้นหลังนะคะ วิธีการทุกครั้งเวลาที่เราทำงานไม่ว่ากับตัวอะไรก็ตามนะคะ วิธีการวิธีป้องกันไม่ให้ควายของเราเกิดนะคะ หาย ก็คือเราจะมาทำการตั้งชื่อนั่นเองนะคะ ตัวเอกสาร ก็เดี๋ยวเราจะมาตั้งชื่องานของเรานะคะ วิธีการนะคะ การตั้งชื่อก็จะมาอยู่ที่ file save เหมือนเรา Save งานเอกสารพวก PowerPoint ทั่วไปเลยนะคะ มันก็จะมี File Name ให้เรานะคะ ให้เรากำหนดชื่อของตัวไฟล์งานได้เลยนะคะ เราจะตั้งชื่อเป็นอะไรนะคะ ใส่เป็นรหัสนักศึกษาแล้วก็เขียนว่าเป็น Workshop ที่ 1 ก็ได้ค่ะ หรือว่างานที่ 1 Work shop 2 ที่ 1 ก็ได้Shop W shopee นะ เราก็ใส่เครื่องใหม่ 1 อย่าลืมใส่รหัสนักศึกษาด้านหน้าด้วยนะ ของอาจารย์เป็น xx workshop 1 นะคะ เสร็จแล้วก็กด save ค่ะ save ในตำแหน่งที่เราจำได้ด้วยนะ เมื่อกี้เราDefualt ก็น่าจะเป็นอยู่ที่ Documents สำหรับใครที่ไม่อยากเก็บที่ Document ก็สามารถเปลี่ยนตัว destination หรือว่าพี่ทำการเก็บไฟล์มันได้จะเอาไว้ตรงไหนที่ตรง Desktop ไปก่อนไปนะคะ สมมติอาจารย์ไว้ตรง Desktop แล้วกด save ไป เราจะเห็นมุมบนด้านซ้ายแต่ก่อนมันจะเป็นไฟล์นะคะ ที่ยังไม่ได้ตั้งชื่อนะ เปลี่ยนเป็น xx workshop 1 ก็คือตามชื่อที่เรานั่นเองนะคะ ชื่อไฟล์เพื่อเปลี่ยนตามนั้นเลยคราวนี้นะคะ จากตัวงานที่อาจารย์เปิดให้ดูเมื่อกี้มันจะมี Background  พื้นหลังแล้วก็จะมีตัวละครอยู่ 2 ตัวเนื่องจากตัว Animated ของเรานี่จะเป็นรูปแบบการเคลื่อนไหวนะคะ ซึ่งการเคลื่อนไหวของเรานี้ ก็จะมีหลากหลายรูปแบบนะคะ เริ่มจา  ก เดี๋ยวอาจารย์เขาพูดให้ฟังนะ เพราะว่าอาจจะไม่ได้เรียนตั้งแต่เริ่มต้น มันค่อนข้างเยอะนิดหนึ่ง การเคลื่อนไหวก็จะมีตั้งแต่ Frame by Frame ตัว Frame กับ Layer ใดจะอยู่ด้านล่างตรงนี้ด้านล่างคือล่างสุดนะ มันจะมีคำว่าระยะหนึ่งนะคะ ตัวระยะหนึ่งของเราก็คือตัวรูป Background  ที่เราเอามาวางเมื่อกี้ไหมคะ ของอาจารย์ก็จะเป็นรูปมีถนน แล้วก็มีเมืองนะคะ ตัวนี้มันจะเขียนว่า Layer 1 นะคะ ซึ่งกรณีสมมติอัตโนมัติเลื่อนตรงรูปภาพเนี่ยเราจะเห็นว่าbackground ของเราเนี่ยเลื่อนด้วยไหมคะ จากที่เรากำหนดนี่ มันก็เกินตามขอบเขตที่เราต้องการแล้ว เราอยากให้มันหรือว่าคงที่ไว้นะคะ วิธีการก็คือตรง Layer  นี่มันจะมีลักษณะที่เป็นรูปกุญแจเราจะกดลูกกุญแจตัวนี้หนึ่งครั้งเพื่อต้องการที่จะให้ตัวพื้นหลังของเราคงที่ ไม่มีการเคลื่อนไหว กด 1 ครั้ง ตัวลูกกุญแจก็จะมาปรากฏตรง layer ที่ 1 ของเรา หรือว่าตรง Layer พื้นหลังของเรานั่นเองนะคะ ตอนนี้เวลาเราลูกศรหรือเอาเมาส์มาคลิกตรงพื้นหลัง มันก็จะไม่เกิดการเคลื่อนที่ เราจะดูว่า เอ๊ะ ทำไมหน้าจอของเรานี่มันดูเอามาเพื่อนตรง Scroll bar ต่าง ๆ นี่ขึ้นลงเพื่อให้มันเห็นองค์ประกอบทั้งหมดของตัวหน้าจอวิธีการที่จะทำยังไงให้ตัวหน้าจอของเราเนี่ยพอดีกับรูปภาพ เวลาปรับแก้ไข หรือว่าทำงานนี่ มันจะได้สะดวกนะคะ เราสามารถปรับขนาดการนำเสนอหน้าจอของเราได้ โดยมาตรงที่มุมขวา ที่ตอนนี้มันมีเขียนว่าเป็น 100 เปอร์เซ็นต์นะคะ สามารถเลือกเป็น Fit in Window นะคะ  เพื่อให้ตัวหน้าจอนี่มันแสดงพอดีกับการทำงานของเราจะได้ไม่ต้องเพื่อนเหมาขึ้นลงเราจะเห็นว่ามันจะมีขอบสีดำนั่นคือขอบพื้นที่ Stage หรือว่าพื้นที่เราต้องการที่จะโชว์ตัวชิ้นงานของเราขึ้นมานี่ ก็ทำไม่ได้ก็ให้มันพอดีกับตัวโอเคนะคะ fit in Windows ของเรา คราวนี้อย่างที่บอกไป เวลาเอาตัวรูปภาพที่เป็นพื้นหลังเข้ามาในตัวโปรแกรมของเรานะคะ เราต้องตั้งให้สื่อกับตัวงานที่เราจะใช้นะคะ ให้เรามาเปลี่ยนชื่อตรง Layer 1 ด้านล่างซ้ายของเราจากที่เขียนว่า Layer 1 ให้ทำการดับเบิลคลิกนะคะ แล้วเปลี่ยนbackground หรือ BG นะคะ พิมพ์คำว่า BG นะคะ เพื่อสื่อให้เห็นว่ารูปภาพที่เรามาวางไว้นี่ เป็นพื้นหลังนะ พิมพ์ BG นะคะ เราก็คลิก 1 ครั้งนะคะ ตัวระยะหนึ่งของเราก็จะเปลี่ยนมาเป็น BG นะคะ เราจะได้จำได้เวลาเรากลับมาแก้ไขตรงงานตัวนี้นะ พื้นหลังเราอยู่หน้าตรงนี้นะตรง Layer  ตรงนี้นะคะ  เราต้องไปด้วยกัน ค่ะ โอเค  เราเปลี่ยนชื่อของ Layer เรียบร้อยนะคะ เป็น BG ถัดมา เดี๋ยวอาจารย์ขออธิบายเบื้องต้นเข้าคร่าว ๆ ก่อนนะ นะคะ ปกตินะคะ ถ้าเป็นรุ่นสมัยก่อน คือ เวลาเราวาดโมเดลหรือว่าตัวละครต่าง ๆ จะใช้การวาดภาพขึ้นมาเองนะคะ สำหรับตัวโปรแกรมรุ่นใหม่นี่ เขาก็จะมีตัวละครว่าโมเดลหรือวัตถุต่าง ๆ มาให้เรานะคะ ก็จะเป็นพวกปากกาดินสอยางลบอะไรต่าง ๆ สามารถดูดสีปรับเสียง สีหน้าไม่มีถัดมาคราวนี้จากงานที่เสนอให้ดูนะคะ เราจะมีตัวละครทั้งหมด 2 ตัวแรกเราจะนำตัวละครตัวที่ 1 เข้ามาใช้งานวิธีการก็คือเราจะมาตรง panel คำว่า Asset 1 ครั้ง นะคะ มาด้านขวามือนะคะ แล้วเมาส์คลิกตรงแอร์เสร็จครั้งนะครับ เราจะมีตัวละครให้เลือกให้เราเลือก 1 ตัวแล้วลากลงมาส่งหน้าจอของเรา สมมติอาจารย์อยากได้มาปั่นจักรยานตรงนี้ แล้วก็ปรับขนาดตามที่เราต้องการวางตัวโมเดลของเรา อาจารย์ไม่เอาตัวนี้ อาจารย์เปลี่ยนใจก่อน เดี๋ยวขออนุญาตเปลี่ยนก่อนนะคะ เดี๋ยวขอ Import File ก่อนแป๊บหนึ่ง สักครู่นะคะ แล้วตอนตัวละครที่มันเข้ากับตัวพื้นหลังกับตัวงานของเราค่ะ คิดว่ามัน เสร็จแล้วเลือกตัวละคร ที่ asset นะ โอเค สมมติเรากดที่ Play 1 ครั้ ง 1 ครั้ง เราจะเห็นว่าตัวละครของเราหรือเขาจะเคลื่อนไหวโดยเคลื่อนไหวอยู่กับที่ถูกไหม กดตรง Play ก็คือตรงรูปสามเหลี่ยมนะคะ ตรงนี้ เห็นไหมนะ   กด 1 ครั้งนี่ มันก็จะเคลื่อนไหวอยู่กับที่อยู่ คราวนี้นะคะ เดี๋ยวเราจะทำการเพิ่มให้ตัวละครของเรานี่เล่น หรือว่าแสดงให้มันนานยิ่งขึ้นนะคะ ตอนนี้นี่ ตัว Frame ของเราอยู่ที่ 48 ไหมคะ สมมติว่าถ้าต้องการมาเพิ่มให้ตัวละครของเรานี่ แสดงว่าทำงานเพิ่มมากขึ้นนะคะ ให้เราเอาเมาส์ไปคลิกอยู่ที่ 100 ตรง Layer ตัวละครล่าสุดที่เราวางนะ แล้วก็ไปที่ 100 แล้วกดนะคะ คำว่า "Insert Frame" คราวนี้ตัว Frame ของเราก็จะเพิ่มมากขึ้น เราจะสังเกตว่าตัว Background ของเรานี่มันหายไปเพราะว่าเราเห็นจาก Layer ด้านล่างนะคะ เพราะว่าเรายังไม่ได้เพิ่ม Frame ของตัว Backgroundเ ช่นเดียวกันนะ เราก็เอาเมาส์เลื่อนมาตรง layer background อันล่าง เหมือนกันนะคะ แล้วมาคิดตรงInsert Frame อีก 1 ครั้ง อันนี้มันก็จะมาเรียบร้อยแล้วก็จะมีตัว Frame ทั้งหมด 100 Frame นะคะ ทั้ง 2 Layer  ของ Background แล้วก็ตัวละครที่เราเลือกมานั่นเองนะคะ เดี๋ยวเรามี 100 Frame นะเพื่อให้ตัวละครของเรานี่สามารถที่จะแสดง หรือว่าเล่นให้มันเพิ่มมากขึ้นนั่นเองนะคะ คราวนี้จากตัวงานของเรานี่ ที่อาจารย์เปิดให้ดู มันจะมีการเคลื่อนไหวนะคะ เราก็มาอยู่ตรงกลางแล้วก็ค่อยเปลี่ยนรูปร่างมาเป็นอีก ใหม่นั่นเอง วิธีการ ก็คือเราจะมาที่ 100 ครึ่งหนึ่งก็คือ 50 ถูกไหมคะ เอามาที่เมาส์คลิกที่ Frame ที่ 50 Layer ที่เป็นตัวละครที่เราเรียกมานั่นเองนะคะ เสร็จแล้วคลิกที่ Insert keyframe 1 ครั้ง ทันนะ แล้วลากตัวละครของเรามาไว้ที่กึ่งกลาง ปึ๊บ ตรงนี้ กด ปึ๊บ เราจะเห็นว่าตรง 50 นี่ ตัวการ์ตูนของเรานี่ มันก็จะเคลื่อนที่อยู่ตรงกลาง ๆ นะ คราวนี้ จะทำอย่างไรให้ตั้งแต่เกมแรกของเรานี่ เพื่อนที่มายังเฟรมที่ 50 นางเอกถ้าเราเอาเมาส์ไปลองจาก 1 มาที่ 50 มันก็ย้ายมาเลย อันนี้เหมือนกันยังที่ Frame  50 เราเลื่อนตัวละครมาอยู่ที่ 50 แล้วนะฃ ทันไหม ทันไหม คราวนี้เราได้ตัวการ์ตูนเวลาเราเอาเมาส์ไปลองเล่นหรือว่าเอามาตรงตัวplay Header ตรงนี้นะ เราจะเห็นว่ามันกระโดดแค่ตรง Frame ที่ 1 แล้วก็มาที่ 50 วิธีการทำการให้ตัวการ์ตูนของเรานี่เคลื่อนไหวเดินหน้าไปด้วยก็คือมันจะมี 2 รูปแบบนะคะ คือเป็น Classic Tween กับ Motion Tween แต่เราจะใช้เป็น Classic Tween เพราะว่า Motion tนี้มันต้องมีขาดหรือว่าเส้นทางที่ไปวิธีการง่าย ๆ ก็คือเรามาคิดระหว่างเต็มที่1-50 ระวังนะ วางไว้ตรงไหนก็ได้นะคะ แล้วก็คลิกขวา1 ครั้ง จะมีตัวคำสั่งขึ้นมาเราเลือกตรงแรกบนสุด create classic tween ปึ๊บ คลิก 1 ครั้งลองกด 1 ครั้งเราจะเห็นว่าตุ๊กกะตุ่นตุ๊กตาของเรานี่ มันเริ่มเดินมาแล้วจนถึงครึ่งหนึ่งแล้วนะได้ไหมคะ  โอเคได้แล้วนะ Classic Tweens นี่เราจะเห็นว่าตัวก็จะเป็นการเคลื่อนไหวนะคะ เป็นแนวที่กำหนดไว้เรียบร้อยแล้วนะคะ ก็คือจะทำให้ตัวละครของเรนี่เคลื่อนไหวในตัว แล้วก็เดินหน้าไปด้วยนั่นเอง มันก็จะทำให้ตัวละครของเรานี่ เกิดความสมจริง สำหรับการเคลื่อนไหวสำหรับตัว workshop หรือว่างานตัวนี้ จะทำแค่การเคลื่อนไหว 2 แบบ รูปแบบที่ 1 เราทำไปแล้วเป็นการเคลื่อนไหวแบบ ก็คือการเคลื่อนไหวทั่วไปที่เดินหน้าไปข้างหน้านั่นเอง อันที่ 2 เราจะเห็นจากตัวงานที่อาจารย์เปิดให้ดู ก็คือเป็นการเคลื่อนไหวแล้วเกิดการเปลี่ยนรูปร่าง หรือว่าแปลงร่างนะคะ เดี๋ยวเราจะหมดเรื่องรูปแบบ Shape tween นั่นเอง ก็คือเดี๋ยวเรามาที่ Frame ที่ 50 ของเรานะคะ เสร็จแล้วคลิกขวาเพิ่ม insert keyframe หรือคลิกตรงนี้ก็ได้แล้วแต่สัญลักษณ์นะคะ แล้วเราก็จะมีตรงนี้ขึ้นมาแถวนี้จากตัวการ์ตูนหรือว่าตัวโมเดลที่เราเลือกเข้ามาน ี่มันจะมีการเคลื่อนไหวที่มาซ้อนเข้าไปอยู่ ซึ่งถ้าเรา ไม่ทันนะ เอาใหม่นะ เดี๋ยวนะ Ctrl + Z มาคลิกตรงที่ขวาที่ Frame 50 ใน layer กระดาษของเราโมเดลของเราเนาะพี่กอล์ฟเสร็จแล้วมาเลือก insert keyframeหรือ คลิกตรงนี้แล้วก็มาเลือกสัญลักษณ์อันแรกของเราที่เป็นขาว ๆ แล้วก็มีจุดสีดำเหมือนกันที่สุดมีกี่ Keyframe ใช้ใช้ได้เดียวกันนะคะ แล้วก็กด 1 ครั้ง OKวันนี้เราก็จะมีคีย์เฟรมเพิ่มมาอีก 1 อยู่ที่เสร็จแล้ว เนื่องจากตัวละครของเรานี่ มันมีรูปแบบการเคลื่อนไหวที่อยู่ข้างในตัวละครอีกครั้งหนึ่ง เราจะทำการปรับตัวให้ตัวละครของเราเป็น Bitmap ก่อน วิธีการของเรา ก็คือเดี๋ยวเราจะทำการเลือกตัวละครของเราให้เป็น Bitmap ก็คือคลิกขวาที่ตัวละครเพราะตอนนี้เราอยู่ที่ Frame 50 แล้วคลิกขวาคลิกที่ตัวละครก่อน โอเค คลิกที่ตัวละคร แล้วนะ เสร็จแล้วมาเลือกตรง Modify เสร็จแล้วเลือก Convert to bitmap ทันนะคะ ทันนะ เสร็จแล้วมา Modify ครั้งหนึ่ง แล้วเลือก Bitmap เลือกตรง test Bitmap อย่างนั้น เดี๋ยวเราค้างไว้ก่อนหน้านี้เหมือนกันไหม ใครที่ไม่ทันนะคะ สำหรับใครที่ไม่ทัน หรืออยากกลับไปทบทวนนี่ ในตัวเอกสารของอาจารย์ก็จะมีขั้นตอนที่เราทำทั้งหมดนี่ สามารถเปิดควบคู่ดูได้นะคะ ที่มันเป็นไฟล์ PDF ตามที่อาจารย์แนบไว้ให้นะคะ น่าจะเป็นขั้นตอนการสร้างงานตัวนี้ทั้งหมดเลย ได้เข้าไปทบทวนนะเข้าใจถึงขั้นตอนการทำงานอีกตอนนี้มันก็จะมีหน้าต่างขึ้นมาเป็น Test Bitmap ขึ้นมานะคะ ง่าย ๆ ของเรา เราจะไม่ปรับเปลี่ยนอะไรนะ เดี๋ยวมันจะมีการแก้ไขเยอะ แล้วก็ให้ตอบ OK ไป ของเรา เรามาดูเอกสารของเรานี่ เดี๋ยวจะเปิดให้ดูก็มีใช่ไหมคะ เราถึงข้อ 6 แล้วนะคะ อันนี้มันมีทั้งหมด 80 Frame นะคะ มันก็จะเป็น Frame ที่ 11 นะคะ แล้วก็ Bitap แล้วก็3 ตัวละครที่เป็นของเราจะเปลี่ยนเป็น Bitmap วันนี้เราจะไปดูข้อที่ 7 ของเราก็คือจะเปลี่ยนเฟรมก็คือเราจะเลือกตัวละครตัวหนึ่ง โดยการลากตัวละครออกไปนะคะ วิธีการ ก็คือเราไปที่เฟรม 100 แล้วจะเป็น 100 แล้วก็ทำการ insert keyframe นะคะ แล้วก็มาลบเฟรมที่ 100 ที่เป็นรูปตัวการ์ตูนตัวแรกนะคะ แล้วก็ค่อยเลือกนะคะ เนื่องจากเกมนี้มันก็ลบออกแล้วก็เลือกตัวละครที่ 2 ขึ้นมานะคะ โอเค ดูเอกสารพร้อมกันได้นะคะ  ตัวนี้นะ คลิกขวา เลือก I Insert Keyframe  นะคะ มาที่เฟรมที่ 100 ของเรานะคะ ตรงนี้นะคะ แล้วให้เราเลือกคลิกขวา insert keyframe ทันไหมนะคะ ไป layer ที่เป็นตัวละครของเรา คลิกขวา insert keyframe ขึ้นมา เสร็จแล้วให้เลือกตัวละครที่เราจะทำการแปลงตัวละครที่ 1 เป็นตัวเป็นตัวที่ 2 ในตัว ด้านขวามือของเราว่าจะเอาตัวไหนลงมาแต่นะคะ เมื่อเราคลิกขวา Insert Keyframe เราต้องลบไอ้ตัวละครตัวแรกลบทิ้งก่อน คลิกขวานะคะ หรือกด Delete นะคะ Deleteไปเลย เสร็จแล้วเลือกตัวละครตัวที่ 2 ของเราที่เราจะเลือกมา สมมติอาจารย์เรื่องเป็นนก ปึ๊บ คราวนี้เราได้ตัวละครตัวที่ 2 มาแล้วนะ ได้เหมือนกันหมดหรือยังเอ่ย ข้อสังเกตนะคะ ไอ้ตัวละครตัวที่ 2 ที่เราเอามานี่ ให้วางตรงขอบ ๆ นะ ก็เหมือนเวลาเราจะแปลงร่างแต่เขาเหมือนเดินมาสักถึงกลางแล้วทำการแปลงร่างจากตัวหนึ่งมาเป็นอีกตัวหนึ่งขยายที่สุดมันก็จะเป็นรูปตัวละครตัวที่ 2 ได้อยู่ตรงริมขอบตัวฉากด้านขวามือของเรานั่นเองนะคะ โอเคนะ มันจะได้วางโครงสร้างให้มันดูแบบสมจริงสมจังอะไรอย่างนี้ โอเค เราได้ตัวละครเรียบร้อยแล้วนะ คราวนี้นะคะ เนื่องจากเรามีทั้งหมดตอนนี้เรามี 3  layer แล้วจะเห็นว่า เราจะมี Layer  Background  Layer ย้ำนะคะ แล้วก็เป็นที่ดีก็คือตัวนกพิราบที่เราเลือกเข้ามาคราวนี้นะคะ เราจะทำการไม่ทำที่เป็น Layer ตัวละครที่เราเลือกมาเมื่อกี้แต่เราจะเอาตัวละครเก็บไว้อยู่ วิธีการให้เราคลิกขวาที่ตัวละครของเราก่อนนะคะ แล้วก็ Cut หรือ ก็ได้Copy ไว้นะคะ จะได้ไม่งงทำการลบนะคะ โดยการ copy ตัวละครแล้วก็มาที่ layer ของตัวละครที่ 2  แล้วก็มาวางไว้นะคะ ค่ะ พคลิกขวา Lobbyเอาไว้แล้วเนาะเสร็จแล้วลบเลยเอาตัวนี้ไปทิ้งนะคะ ที่เพิ่มมาเสร็จแล้วมาตรงเฟรมที่ 100 เมื่อกี้แล้วก็ไม่ว่างนกพิราบของเราไว้ตำแหน่งเดิมตรงนี้ โอเคนะ คราวนี้เดี๋ยวรอเพื่อนก่อนนะคะ ทันไหม เสร็จเรียบร้อยแล้ว ถูกไหมคะ เราก็วางตัวละครเรียบร้อยแล้ว คราวนี้เนื่องจากตอนกลางของตัวละครที่ 1 เราทำเป็น Bitmap เรียบร้อยแล้ว ตัวนี้เราก็จะทำเป็นแบบเช่นเดียวกัน ก็ให้เอาเมาส์ไปคลิกตรงที่ตัวละครตัวที่ 2 นะคะ เอาเมาส์ไปเลือกตัวละครตัวนี้ 2 ให้เป็นรูปสี่เหลี่ยมล้อมรอบเป็นเส้นสีเหลี่ยมล้อมอบเรียบร้อยเสร็จแล้วก็มาที่modify ไฟล์เสร็จแล้วก็Converse toBitmap เหมือนเดิมเลยนะคะ 1 ครั้ง เสร็จแล้วก็เรียก Bitmap ครั้งหนึ่งปิด teradw Bitmap มันก็จะขึ้นเป็นเหมือนเดิมนะคะ เราก็ทำเป็นค่า default ไปนะคะ หรือว่าต้องกด ok ลองเลื่อนดูสิมันเป็นยังไงคราวนี้เราจะทำอย่างไรให้ตัวละครที่ 1 นี่ แปลงร่างหรือว่ากลายร่างมาเป็นตัวละครที่ 2 นะคะ อย่างที่บอกไปเรามีการใช้ Classic Tweens  และอันที่ 2 ก็จะเป็นรูปแบบของการใช้ของ เชฟทวีปอเมริกา คือ การเปลี่ยนรูปร่างของตัวละครของเราเหมือนเดิมนะคะ คลิกกึ่งกลางระหว่าง Frame ที่ 51 กับ Frame ที่ 100 นะคะ เสร็จแล้วคลิกเลือกที่create Shape Tweenลองเอาไปเลือกดูซิจากน้องหมีของเราก็จะค่อย ๆ กลายร่างมาเป็นนกพิราบ ลองกด Play กด Play กดเล่นดูสินะคะ ก็จะเป็นหมีกระโดดอยู่แล้วก็กลายมาเป็นนกพิราบไหมคะ  ยังไม่ได้ตรงไหนไหมถามได้นะคะ เราก็จะมีตัวละครที่เคลื่อนไหวเดินไปข้างหน้าแล้วก็แปลงร่างได้ด้วยคราวนี้ โอเค เราก็จะได้ได้ไฟล์ อย่าลืม save ด้วยนะ เดี๋ยวเราจะทำการ Export นะคะ งานออกมา ใครยังไม่ได้ไหม ทุกคนไหม เดี๋ยวเราจะทำการ save ไฟล์นะคะ หรือว่า Exprorไฟล์ออกมาวิธีการของเราก็คือเราก็จะได้รูปแบบของ Classic Tweens  แล้วก็ Shape Tweens นะคะ ซึ่งเวลาเราช่างตัวชิ้นงานนี่ เราก็ต้องมีการออกแบบแล้วก็วางโครงงานโครงร่างของเรานั้นเองว่าจากตำแหน่งตัวโมเดลตัวที่ 1 ตัวคนเดียวที่ 2 จะมีการวางตำแหน่งมีการปรับเปลี่ยน หรือว่ามีการเดินเส้นทาง มีการเดินไปด้านหน้านะคะ หรือว่าเดินไปตามเส้นทางไหน ก็มีการเปลี่ยนรูปร่างอย่างไร จะเป็นอย่างไรนะ ถึงรู้เกี่ยวกับตัวการเคลื่อนไหวแล้วก็เดินไปด้านหน้าแล้วก็มีการเปลี่ยนแปลงรูปร่างนะคะ วิธีการของเราจะทำการ Save ตัวชิ้นงานของเรานะคะ วิธีการของเราก็สามารถเป็น Export ที่เป็นรูปของวิดีโอแล้วก็รูปแบบที่เป็น GIF นั่นเองนะคะ เราจะทำการ Export ตัวงานของเราเพื่อทำการส่งใน Googleวิธีการนะคะ ไปที่ไฟล์ Export อันแรกเราจะ Export เป็น Emirates1 ลังนะคะ มันก็จะมีหน้าต่างตรงนี้ขึ้นมานะคะ 100 มันโปรเซสแป๊บนึงนะคะ เสร็จแล้วกดเจ็บเนาะรอเราคิดชื่อที่เราหรือเป็นชื่อเดิมก็ได้มันก็จะเป็นชื่อรหัสนักศึกษาและตามด้วย Workshop 1 นะคะ ขึ้นมาเหมือนกันไหม หรืออยากเปลี่ยนชื่อหรือยังไม่ได้พิมพ์ชื่อเมื่อกี้ก็ใส่รหัสนักศึกษาแล้วก็ตามด้วย Workshop 1 นะคะ แต่ละหาเลือกตำแหน่งที่เราได้ของการเป็น Desktop นะ ก็แล้วแต่นะแต่ว่าเก็บไว้ไหนแล้วก็จำได้ แล้วก็จะได้เอางานไปส่งนะคะ ส่งของเรานะคะ แล้วกด save 1 ครั้งงานของเราก็มาแล้วกดดันสอบของเรา นี่มันจะเป็นตัวนี้ออกมา เป็น .GIF นะคะ อาจารย์ Save ไว้ Desktop นะคะ กลับมาต่อเดี๋ยว Save เป็นอีกหนึ่งงานนะคะ เสร็จแล้วมาตรง File แล้วก็เลือก ฑเหมือนเดิมนะคะ เอาเป็นวิดีโอ ediaเดี๋ยวลองดูก่อนนะคะ ว่าเครื่องมันได้หรือเปล่านะคะ เสร็จแล้วก็กด export เหมือนเดิม ไม่มี อะไร ตามชื่อที่เรากำหนด เรา save ไว้ไหนใน desktop หรือเปล่า อันนี้จะเป็น media โอเค มันจะเป็นตัวนี้ขึ้นมา ได้เหมือนกันไหมเอ่ย เสร็จแล้วเมื่อได้ทั้ง 2 ไฟล์ เสร็จแล้วก็จะเอางานทั้ง 2 ชิ้นนี่ ไป ส่งใน Google Classroom นะคะ ก็จะเป็นงานที่เสร็จเรียบร้อยภายในวันนี้นั่นเอง  ใครมีปัญหายกมือได้นะคะ เสร็จแล้วก็เข้า Google classroom นะคะ แล้วก็ทำงานทั้ง 2 ไฟล์ตัวนี้นะคะ ไปส่งนะคะ เป็นงานในรายวิชานะคะ  ใครติดปัญหาหรือว่ามีคำถามอะไรเพิ่มเติมวันนี้ไหมคะ โอเค ก็ส่งงานเรียบร้อยนะคะ สำหรับสัปดาห์นี้ก็ส่งงานนะคะ ก็จะเป็นงาน Workshop ของเราที่ทำเกี่ยวกับตัวเคลื่อนไหวที่ใช้ตัวเทคนิคของ Classic Tween แล้วก็ Shape Tween นั่นเองนะคะ คราวนี้ก็เรียบร้อยแล้ว ก็ขอบคุณทางล่ามทางไกลด้วยนะคะ ขอบคุณค่ะ [สิ้นสุดการถอดความ]