ใบความรู้ การแทรกสื่ อแบบมัลติมีเดียในเว็บไซต์ # ลักษณะของมัลติมีเดีย การใส่ ลูกเล่นให้กบั หน้าเว็บเพจ เป็ นสิ่ งที่ช่วยเพิ่มความน่าสนใจ เป็ นจุดดึงดูดและความตื่นตาตื่นใจให้กบั ผู ้ เข้าชมเว็บไซต์ การใช้มลั ติมีเดียต้องใช้เทคโนโลยีสาคัญ ได้แก่ Flash, Java, Java applet, Shockwave, Plug in และ ActiveX Control เป็ นต้น 1.Flash เป็ นไฟล์ภาพเคลื่อนไหวที่เกิดจากโปรแกรม Macromedia Flash ขนาดไฟล์ค่อนข้างเล็ก เพราะ เป็ นภาพแบบ Vector-Based ใช้ลายเส้นสร้างภาพ มีนามสกุลไฟล์แบบ .swf โดยผูใ้ ช้ตอ้ งติดตั้งโปรแกรม Flash Player กับเว็บเบราว์เซอร์ก่อนจึงจะใช้งานได้ โปรแกรม 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 เป็ นต้น 2.Shockwave เกิดจากการแปลงไฟล์จากโปรแกรม Macromedia Director และ Authorware เพื่อให้ไฟล์มี ขนาดเล็กลงเหมาะกับการแสดงบนเว็บเพจ โดยโปรแกรม Director เหมาะกับการสร้างเกม และงาน มัลติมีเดียพรี เซนเตชัน ส่ วนโปรแกรม Authorware เหมาะสาหรับสร้างงานมัลติมีเดียช่วยสอน หรื อ CAI (Computer Aids Instruction) 3.Java เป็ นภาษาคอมพิวเตอร์ที่ใช้เขียนโปรแกรมขนาดเล็กเพื่อทางานร่ วมกับเว็บเพจ 4.Java Script เป็ นคาสัง่ ภาษา Java ขนาดสั้นเหมาะสาหรับสร้างลูกเล่นให้เว็บเพจ เช่น สร้างฟอร์มติดต่อ กับผูใ้ ช้งาน นามาสร้าง เว็บเพจได้นอกเหนือจากภาษา HTML Java Applet เป็ นโปรแกรมขนาดเล็กสร้างเกม ที่สร้างด้วยภาษา Java ทาหน้าที่เฉพาะเจาะจง เช่น เกม ภาพเคลื่อนไหว เป็ นต้น
5.ActiveX เป็ นโปรแกรมขนาดเล็กซึ่งเรี ยกว่า "คอนโทรล (Control)" ทาหน้าที่เฉพาะตามที่เขียนใน โปรแกรมไว้ ถูกเรี ยกใช้โดย ดาวน์โหลดจากเว็บเซิร์ฟเวอร์มาทางานบนเครื่ องอัตโนมัติ เช่น การแสดงภาพ 3 มิติ การหมุนภาพแบบ 360 องศา 6.Plugin เป็ นโปรแกรมเสริ มที่ทางานร่ วมกับเว็บเบราว์เซอร์ คือโปรแกรมเสริ มที่ช่วยให้บราว์เซอร์ สามารถแสดงข้อมูลมัลติมีเดียประเภทอื่น ๆ ได้ เช่นไฟล์วีดีโอประเภท AVI, WMV, MOV หรื อ MP4 รวมถึงไฟล์เสี ยงในกลุ่ม MP3 หรื อ MIDI เป็ นต้น ไฟล์ต่าง ๆ เหล่านี้หากต้องการนาไปใช้บนเว็บเพจจะต้อง ใส่ ดว้ ยคาสัง่ Plugin โดยในโปรแกรม Dreamweaver ได้เตรี ยมไว้ให้เรี ยบร้อยแล้ว
# การเล่ นไฟล์ .SWF 1.คลิกเมาส์วางเคอร์เซอร์ตรงตาแหน่งที่ตอ้ งการ 2.คลิกที่เมนู Insert ให้เลือก Media แล้วเลือก SWF หรื อกดปุ่ ม Ctrl + Alt + F
3.จะปรากฏหน้าต่าง Select SWF ในช่อง Look inให้เลือกโฟลเดอร์ที่เก็บไฟล์ 4.คลิกเลือกไฟล์ที่ตอ้ งการ 5.คลิกที่ปุ่ม OK
6.ตั้งชื่อหัวเรื่ อง (ไม่ใส่ กไ็ ด้) แล้วกดปุ่ ม OK
7.ไฟล์ SWF จะแทรกในหน้าเว็บเพจ สามารถทดลองเล่นไฟล์ SWF โดยกดปุ่ ม Play
8.เมื่อเราคลิกที่ไฟล์ Flash ที่แทรกไปจะพบว่า Property inspector เปลี่ยนไป มีรายละเอียดดังนี้ o W (Width) กาหนดความกว้างที่ใช้แสดงผลของ flash o H (Height) กาหนดความสู งที่ใช้แสดงผลของ flash o File ช่องนี้จะแสดงค่าตาแหน่งที่เราบันทึกไฟล์ flash เอาไว้ไม่ตอ้ งแก้ไขอะไรทั้งสิ้ น o Src (Source) ให้เราระบุตาแหน่งที่เราเก็บไฟล์ตน้ ฉบับที่สามารถแก้ไขได้ .fla เอาไว้ o Loop เมื่อเลือกช่องนี้ไฟล์ Flash จะเล่นซ้ าไปซ้ ามา ถ้าเราไม่ได้เลือกจะแสดงเพียงครั้งเดียวแล้วหยุด ไป o Autoplay ถ้าเลือกช่องนี้ Flash จะแสดงผลเองอัตโนมัติเมื่อโหลดไฟล์เรี ยบร้อย ถ้าไม่เลือกการ แสดงผลจะขึ้นอยูก่ บั behavior (เช่น onMouseOver , onMouseDown) ที่เราได้กาหนดไว้ให้กบั ไฟล์ นั้น o V Space (Vertical Space) กาหนดระยะห่างระหว่างไฟล์ flash กับวัตถุอื่นในเว็บเพจในตาแหน่งบน และล่าง
o H Space (Horizontal Space) กาหนดระยะห่างระหว่างไฟล์ flash กับวัตถุอื่นในเว็บเพจในตาแหน่ง ซ้ายและขวา o Quality ตัวเลือกนี้จะทาให้เราสามารถจัดการกับ anti-aliasing คือการกาหนดคุณภาพของ flash โดย ถ้าเราเปิ ด anti-aliasing จะทาให้ flash แสดงผลได้ดี ภาพสวยขึ้น แต่ความเร็ วของการเล่นไฟล์ flash จะช้าลง สมมุติวา่ เราใส่ รู ปคนวิ่งลงไป เมื่อเปิ ด anti-aliasing จะทาให้รูปสวยขึ้น แต่คนจะวิ่งได้ชา้ ลง o Scale เราจะใช้คาสัง่ นี้เมื่อได้เปลี่ยนขนาดของ flash จากขนาดเดิมโดยไม่มีมาตราส่ วน คาสัง่ นี้จะ เป็ นการกาหนดการแสดงผลของ flash ในขนาดที่เรากาหนด Default (Show All) แสดงผลตามมาตราส่ วนปกติ และจะแสดงผลทั้งหมดของไฟล์ เช่น ถ้าเรา เปลี่ยนขนาดที่ ผิดมาตราส่ วนไป ตัวเลือกนี้จะปรับให้แสดงผลในมาตราส่ วนที่สามารถแสดงได้ เท่านั้น No Border แสดงผลให้โดยใช้มาตราส่ วนปกติ แต่จะไม่แสดงผลส่ วนที่เกินออกไป เช่น ถ้าเราปรับ มาตราส่ วนผิดไป ตัวเลือกนี้จะปรับมาตราส่ วนตามนั้น แต่ส่วนที่เกินออกไปขนาดที่เรากาหนด จะ ไม่แสดงผล Exact Fit จะปรับการแสดงผลให้เท่ากับขนาดที่เรากาหนด o Align จัดตาแหน่งของไฟล์ o Bg กาหนดพื้นหลังให้ไฟล์ o Play button กาหนดให้แสดงผลไฟล์ flash ใน Dreamweaver ถ้าเรากด play จะทาให้เห็นไฟล์ flash แสดงผลใน Dreamweaver แต่ถา้ เราต้องการแก้ไขต้องกด stop ก่อน o Parameters กาหนดค่าตัวแปรให้กบั flash
# การเล่ นไฟล์ .FLV 1.คลิกเมาส์วางเคอร์เซอร์ตรงตาแหน่งที่ตอ้ งการ 2.คลิกที่เมนู Insert ให้เลือก Media แล้วเลือก FLV
3.จะปรากฏหน้าต่าง Insert FLV ให้คลิกที่ปุ่ม Browse เพื่อเลือกไฟล์ FLV จากนั้นคลิกที่ปุ่ม OK
หน้าต่าง Insert FLV สามารถกาหนดค่าต่าง ๆ ดังนี้ o Video type : วิธีการแสดงวิดีโอ o Skin : รู ปแบบของแผงควบคุมการเล่นวิดีโอ o Width : ความกว้างของวิดีโอ o Height : ความสู งของวิดีโอ
o Constrain : คงสัดส่ วนของวิดีโอ เมื่อปรับความกว้างหรื อความสู ง o Auto play : กาหนดให้เล่นไฟล์ FLV ทันที o Auto rewind : กาหนดให้เล่นไฟล์ FLV ซ้ า 4.ไฟล์ FLV จะแทรกในหน้าเว็บเพจ ดังรู ป
# การใส่ เสี ยงเพลง การแทรกไฟล์เสี ยงในเว็บเพจ เช่น .MIDI , .WAV , .MP3 เป็ นต้น ซึ่งมีวิธีการดังนี้ 1.คลิกเลือกตาแหน่งที่จะแทรกไฟล์เสี ยง 2.คลิกที่เมนู Insert ให้เลือก Media แล้วเลือก Plugin
3.จะปรากฏหน้าต่าง Select File ให้เลือกโฟลเดอร์ที่เก็บไฟล์ 4.เลือกไฟล์ที่ตอ้ งการ 5.คลิกที่ปุ่ม OK
6.คลิกที่ปุ่ม Yes เพื่อบันทึกไฟล์เพลงในโฟลเดอร์จดั เก็บเว็บไซต์
7.จะปรากฏหน้าต่าง Copy File As ในช่อง Save in ให้เลือกที่จดั เก็บไฟล์ 8.ช่อง File name ตั้งชื่อไฟล์เสี ยง แล้วกดปุ่ ม Save
9.จะปรากฏไอคอนขึ้นมา
10.ส่ วน Property inspector มีรายละเอียดดังนี้ o W (Width) and H (Height) กาหนดความกว้าง และสู งของ ไฟล์ที่จะให้แสดงผล o Src (Source) ตาแหน่งที่เก็บไฟล์
o Align จัดตาแหน่งของไฟล์ o Class กาหนด Style Sheet ให้กบั ไฟล์น้ ี o Plg URL ใช้กาหนดเว็บไซต์สาหรับโหลดโปรแกรมสาหรับเปิ ดไฟล์ที่เราแทรก จะปรากฏเมื่อ เครื่ องผูใ้ ช้ไม่สามารถเปิ ดไฟล์ของเราได้ o Play button ใช้ทดลองเปิ ดไฟล์ o V Space (Vertical Space) กาหนดระยะห่างระหว่างไฟล์ flash กับวัตถุอื่นในเว็บเพจในตาแหน่งบน และล่าง o H Space (Horizontal Space) กาหนดระยะห่างระหว่างไฟล์ flash กับวัตถุอื่นในเว็บเพจในตาแหน่ง ซ้ายและขวา o Border กาหนดขอบให้กบั ไฟล์ o Parameters กาหนดค่าตัวแปรอื่น จะพูดถึงในบทอื่น 11.ถ้าต้องการซ่อนแถบควบคุมเสี ยง ให้คลิกที่ปุ่ม Parameter 12.ในส่ วน Parameter ให้พิมพ์ hidden และส่ วน Value ให้พิมพ์ true (ถ้าต้องการยกเลิกแถบควบคุมเสี ยง ให้ลบค่าออก)