ใบความรู้ที่ 8.1
เรื่องการใช้มัลติมีเดีย
ในเว็บเพ็จ

การใช้มัลติมีเดีย
        ในช่วงแรกเว็บเพจสามารถแสดงได้เพียงข้อความและรูปภาพธรรมดา แต่ปัจจุบันได้มีการคิดค้นวิธีที่จะขยายความสามารถของเว็บเพจให้แสดงภาพเคลือนไหว และกราฟิกแอนิเมชั่น ต่างๆ ทั้ง 2 มิติ และ 3 มิติ ที่สามารถโต้ตอบกับผู้ใช้ได้ โดยมีเทคโนโลยีต่างๆ เช่น Java applet, Shockwave, Flash ซึ่งปัจจุบัน
เทคโนโลยีต่างๆนี้ได้กลายเป็นมาตรฐานของเว็บเพจ Macromedia Flash  เป็นซอฟต์แวร์ที่ช่วยในการสร้างสื่อมัลติมีเดีย กราฟิกสำหรับงานเว็บ ผลิตภัณฑ์ของบริษัท Macromedia เจ้าแห่งผลิตภัณฑ์ซอฟต์แวร์ด้านมัลติมีเดียเช่น Authoreware และผลิตภัณฑ์สำหรับงานเว็บ เช่น Dreamweaver ผลงานที่พัฒนาด้วย Flash มีทั้งสื่อภาพนิ่ง ภาพเคลื่อนไหว สื่อมัลติมีเดีย ตลอดจนสื่อที่มีระบบโต้ตอบกับผู้ใช้ (Interactive Multimedia) ซึ่งเป็นสื่อที่มีขนาดเล็ก โหลดผ่านเว็บเบราเซอร์ได้รวดเร็ว มีความคมชัดสูงแม้ว่าจะถูกขยายขนาด ทั้งนี้สามารถนำเสนอได้ทั้งบนเว็บ หรือผ่านโปรแกรม Flash Player หรือสร้างเป็นexe file เพื่อเรียกใช้งานได้ทันที นอกจากนี้ยังสามารถแปลงไฟล์ไปอยู่ในฟอร์แมตอื่นได้ด้วย เช่น Animation Gif, AVI, QuickTime Java เป็นภาษาคอมพิวเตอร์ที่ถูกพัฒนาโดยบริษัท Sun Microsystems ที่ทำให้ผู้สร้างเว็บสามารถเขียนโปรแกรมขนาดเล็กที่ทำงานร่วมกับเว็บเพจได้ เช่น Java Applet เป็นโปรแกรมที่สร้างมาจากภาษา java มีหน้าที่ทำงานหลายด้าน เช่น ใช้สร้างเกม หรือภาพเคลื่อนไหว
        Java Applet เป็นโปรแกรมเล็กๆ ที่ฝังอยู่ในเว็บเพจซึ่งจะถูก download มาพร้อมๆกัน แล้วมาประมวลผล, ทำงาน และแสดงผลอยู่ใน ตัว Browser ซึ่ง Browser ที่จะใช้งาน applet ได้ ก็จะต้องมี JVM อยู่ในตัว Browser Java applet สามารถที่จะสร้าง ส่วนประกอบที่ติดต่อกับ GUI ใน browser ขึ้นมาได้ Java Script เป็นโปรแกรมที่ทำงานเป็น Script เล็กๆ ใช้งานง่าย ทำงานโดย
ตัวโปรแกรมคำสั่ง อยู่ใน Source code ของเว็บเพจ ที่นำมาพัฒนาลูกเล่นต่างๆได้บนเว็บเพจ เช่น สร้างวันที่, การโต้ตอบระหว่างผู้ใช้ เป็นต้น
ไฟล์เสียง (Sound) 
        ไฟล์เสียงที่สามารถนำมาใช้ในเว็บเพจมีหลายชนิด ซึ่งแต่ละชนิดมีข้อดี ข้อเสียแตกต่างกัน อีกทั้งยังต้องการโปรแกรมเสริม (Plugin) ในการแสดงผลที่เพิ่มประสิทธิภาพการทำงานได้ด้วย
รูปแบบของไฟล์เสียง
        1.   midi หรือ.mid (Musicical Instrument Digital Interface)เป็นรูปแบบสำหรับเพลงบรรเลง สามารถเรียกใช้ได้ในเว็บบราวเซอร์ส่วนใหญ่ โดยไม่ต้องติดตั้งโปรแกรมเสริม (Plugin) โดยทั่วไปเป็นไฟล์ที่มีคุณภาพดี แต่จะขึ้นอยู่กับการ์ดเสียงว่ามีคุณภาพในการแปลงเสียงเพียงไร
        2 .  Wav (Waveform Extension) เป็นไฟล์ที่มีคุณภาพเสียงดี สามารถเรียกใช้ได้ในเว็บบราวเซอร์ส่วนใหญ่ โดยไม่ต้องติดตั้งโปรแกรมเสริม (Plugin) แต่ไฟล์มีขนาดใหญ่
        3.   aif (Audio Interchange File Format, หรือ AIFF) เป็นไฟล์รูปแบบคล้ายไฟล์ชนิด Wav มีคุณภาพเสียงดี สามารถเรียกใช้ได้ในเว็บบราวเซอร์ส่วนใหญ่ ไม่ต้องติดตั้งโปรแกรมเสริม แต่ไฟล์มีขนาดใหญ่
        4.   Mp3 (Motion Picture Expert Group Audio หรือ MPEG-Audio Layer-3)
เป็นรูปแบบไฟล์ถูกบีบอัดให้มีขนาดเล็กลง โดยยังคงคุณภาพเสียงดี แต่ต้องติดตั้งโปรแกรมเสริม (Plugin) เช่น Quicktime , Windows Media Player หรือ Real Player ในการแสดงผล ใช้เทคโนโลยี Streaming ในการทะยอยแสดงผล โดยไม่ต้องรอให้อ่านไฟล์เสียงจนหมดเสียก่อน
        5.   re , .ram , .rpm หรือ Real Audio เป็นรูปแบบไฟล์ถูกบีบอัดให้มีขนาดเล็กลงมากกว่า MP3 แต่คุณภาพเสียงยังด้อยกว่า MP3 เล็กน้อย ต้องติดตั้งโปรแกรมเสริม (Plungin) เช่น Real Player ในการแสดงผล และใช้เทคโนโลยี Streaming เช่นเดียวกันกับ MP3 แตกต่างกัน
ไฟล์ภาพยนตร์
        นับเป็นสื่ออีกรูปหนึ่งที่นิยมใช้กับเทคโนโลยีมัลติมีเดีย เนื่องจากสามารถแสดงผลได้ทั้งภาพเคลื่อนไหว และเสียงไปพร้อมๆกัน ทำให้เกิดความน่าสนใจในการนำเสนอ ทั้งนี้มีหัวข้อที่เกี่ยวข้อง ดังนี้
รูปแบบของไฟล์ภาพยนตร์
        1.   AVI (Audio/Video Interleave) เป็นฟอร์แมตที่พัฒนาโดยบริษัทไมโครซอฟต์ เรียกว่าideo for Windows มีนามสกุลเป็น .avi ปัจจุบันมีโปรแกรมแสดงผลติดตั้งมาพร้อมกับชุด Microsoft Windows คือ Windows Media Player
        2.   MPEG - Moving Pictures Experts Group รูปแบบของไฟล์ที่มีการบีบอัดไฟล์ เพื่อให้มีขนาดเล็กลง โดยใช้เทคนิคการบีบข้อมูลแบบ Inter Frame หมายถึง การนำความแตกต่างของข้อมูลในแต่ละภาพมาบีบ และเก็บ โดยสามารถบีบข้อมูลได้ถึง 200 : 1 หรือเหลือข้อมูลเพียง 100 kb/sec โดยคุณภาพยังดีอยู่ มีการพัฒนาอย่างต่อเนื่อง โดย MPEG-1 มีนามสกุล คือ .mpg
        3.   Quick Time เป็นฟอร์แมตที่พัฒนาโดยบริษัท Apple นิยมใช้นำเสนอข้อมูลไฟล์ผ่านอินเทอร์เน็ต มีนามสกุลเป็น .mov
การแทรก Java apple
t
        Java Applet เป็นโปรแกรมเล็กๆ ที่ฝังอยู่ในเว็บเพจซึ่งจะถูก download มาพร้อม ๆ กันแล้วมาประมวลผล, ทำงาน และแสดงผลอยู่ใน ตัว Browser ซึ่ง Browser ที่จะใช้งาน applet ได้               ก็จะต้องมี JVM อยู่ในตัว Browser Java applet สามารถที่จะสร้าง ส่วนประกอบที่ติดต่อกับ GUI ใน browser ขึ้นมาได้ 
ขั้นตอนการแทรก Java Applet
        1.   คลิกเมาส์ลงในตำแหน่งที่ต้องการแทรก Java Applet
        2.   คลิกเมนู Insert > Media > Applet หรือคลิก  เลือกปุ่ม เลือก Applet
        3.   เลือกไฟล์ที่ต้องการ แล้วคลิก ปุ่ม 


              ภาพที่ 8.1 การแทรก Applet
 

              ภาพที่ 8.2 การแทรก Java Applet
        4.   จะพบสัญลักษณ์ ดังภาพ
 

              ภาพที่ 8.3 สัญลักษณ์ Java Applet

 

              ภาพที่ 8.4 ขยายขนาด Java Applet
        5.   ทดสอบการแสดงผลโดยกด ปุ่ม F12 เพื่อแสดงผลบนเว็บบราวเซอร์ ดังภาพ

         ภาพที่ 8.5 ผลลัพธ์ Java Applet

การแทรกไฟล์ด้วย Plugin

        ปลั๊กอิน (Plugin) เป็นโปรแกรมเสริมเพื่อให้บราวเซอร์สามารถแสดงข้อมูลประเภทต่าง ๆ ซึ่งปกติแล้วไม่สามารถแสดงได้ ปลั๊กอินส่วนใหญ่จะทำหน้าที่เล่นไฟล์มัลติมีเดีย เช่น เสียงภาพเคลื่อนไหว และวิดีโอ ตัวอย่างปลั๊กอินที่รู้จักกันดีเช่น Windows Media Player, Quick Time และ RealPlayer
ขั้นตอนการแทรกปลั๊กอิน
        1.   วางเคอร์เซอร์ลงบนเว็บเพจ ตรงตำแหน่งที่จะแทรกมัลติมีเดีย
        2.   คลิกลูกศรท้ายปุ่ม  แล้วเลือกคำสั่ง Plugin หรือเลือกคำสั่ง Insert > Media > Plugin

         ภาพที่ 8.6 คำสั่ง Plugin
        3.   จะปรากฏหน้าต่าง Select File ให้เลือกไฟล์มัลติมีเดียที่จะแทรกมัลติมีเดียขึ้นมา
        4.   คลิกปุ่ม  OK จะได้ปลั๊กอินบนเว็บเพจ

         ภาพที่ 8.7 หน้าต่าง Select File
        จะได้ปลั๊กอินที่ต้องการบนหน้าเว็บเพจ ดังภาพ

         ภาพที่ 8.8 ปลั๊กอินที่ต้องการ
        5.   คลิกลากเพื่อปรับขนาดของปลั๊กอินตามความต้องการและความเหมาะสม
        6.   คลิกปุ่ม  เพื่อทดสอบและคลิกปุ่ม  เพื่อหยุดการทดสอบ จากนั้น ทดสอบการแสดงผล ด้วยการกดปุ่ม F12
 

              ภาพที่ 8.9 ทดสอบการแสดงผล
กำหนดคุณสมบัติของปลั๊กอิน 
        สามารถกำหนดได้โดยคลิกที่วัตถุปลั๊กอินแล้วปรับเปลี่ยน ตามต้องการ ดังภาพ
 

              ภาพที่ 8.10 กำหนดคุณสมบัติของปลั๊กอิน 
เครื่องมือในการควบคุมเสียง เป็นการควบคุมเสียงมีรายละเอียดดังภาพ

 

              ภาพที่ 8.11 เครื่องมือในการควบคุมเสียง

การแทรกไฟล์ด้วย ActiveX

        Active X Controlเป็นโปรแกรมที่ถูกสร้างขึ้นเพื่อแสดงมัลติมีเดียหรือเพื่อรันแอพพลิเคชั่นที่งานบนเว็บเพจ ซึ่งในการแสดงมัลติมีเดียนั้น Active X Control จะทำหน้าที่คล้ายปลั๊กอินแต่มีข้อดีกว่าตรงที่เราสามารถกำหนดโปรแกรมที่จะใช้แสดงแน่นอนเช่น Windows Media Player

ขั้นตอนในการแทรก Active X Control
        1.   วางเคอร์เซอร์ลงบนเว็บเพจ ตรงตำแหน่งที่จะแทรกมัลติมีเดีย
        2.   คลิกลูกศรท้ายปุ่ม แล้วเลือก Active X หรือคลิกที่คำสั่ง Insert > Media > Active X
 

              ภาพที่ 8.12 การแทรก Active X Control
        หลังการแทรก ActiveX ลงบนหน้าเว็บเพจ ผลลัพธ์ที่ได้มานั้นจะยังไม่สามารถเปิดฟังหรือชมภาพได้ จนกว่าจะกำหนดคุณสมบัติต่าง ๆ และพารามิเตอร์ที่จำเป็นเสียก่อน
 

      
              ภาพที่ 8.13 ผลการแทรก Active X Control
        จากภาพเป็นการลากขยาย ActiveX ให้ใหญ่ขึ้นเพื่อให้แสดงผลในโปรแกรมบราวเซอร์ชัดเจนมากขึ้น\การกำหนดคุณสมบัติของ ActiveX Control

 

              ภาพที่ 8.14 การกำหนดคุณสมบัติของ ActiveX Control
ค่าจำเป็นที่ต้องกำหนด
        W/H ความกว้างและความสูงของ ActiveX Control 
        Class ID กำหนดโปรแกรมที่ใช้เล่นมัลติมีเดีย เช่น RealPlayer , Windows Media Player เป็นต้นค่าอื่น ๆ ที่จะกำหนดหรือไม่ก็ได้
         Embed ให้ใช้แท็ก ร่วมด้วย แท็กนี้ใช้สำหรับเรียกปลั๊กอินมาทำงานแทน Active X Control ในกรณีที่ผู้ชมให้บราวเซอร์อื่นที่ไม่สนับสนุน ActiveX Control เช่น Netscape
        Src ระบุไฟล์มัลติมีเดีย สำหรับใช้ร่วมกับแท็ก เท่านั้น
        Align เลือกวิธีการจัดตำแหน่ง ActiveX Control บนเว็บเพจ
        V space ระยะระหว่าง ActiveX Control กับเนื้อหาอื่นตามแนวตั้ง
        H space ระยะระหว่าง ActiveX Control กับเนื้อหาอื่นตามแนวนอน
Base ระบุ URL สำหรับดาวน์โหลดโปรแกรม ActiveX Control ในกรณีเครื่องยังไม่ได้
ติดตั้งโปรแกรมนี้
        ID ระบุชื่อ ID ของออบเจ็ค
        Data ระบุไฟล์ข้อมูลของ ActiveX Control
        Alt img เลือกไฟล์ภาพกราฟิกใช้แสดงแทนในกรณีที่บราวเซอร์ไม่สนับสนุนแท็ก 
        3.   ถ้าเราต้องการแสดงผลให้คลิกปุ่ม  และหยุดการแสดงผล
คลิกปุ่ม 
        4.   แสดงผลผ่านโปรแกรมเว็บบราวเซอร์ กดแป้น F12 จะได้ตามตัวอย่าง 

การแทรกไฟล์ Flash

        Flash เป็นมัลติมีเดียประเภทหนึ่งที่นิยมนำมาแทรกไว้บนเว็บเพจเพื่อให้เกิดความน่าสนใจ เพราะมีลักษณะเป็นสื่อประสมที่สามารถแสดงได้ทั้งภาพนิ่ง ภาพเคลื่อนไหว เสียง และวิดีโอ นอกจากนี้ยังสามารถสร้างเอฟเฟ็คต์ให้โต้ตอบกับผู้ชมทำให้เกิดปฏิสัมพันธ์ระหว่างเว็บเพจกับผู้ชมได้เป็นอย่างดีการนำไฟล์ Flash เข้ามาประกอบในเว็บเพจมีหลายรูปแบบ เช่น ทำเป็นโลโก้ ปุ่มเมนู ป้ายโฆษณา และเกมส์ ซึ่งการสร้างสื่อนี้ต้องใช้โปรแกรม Macromedia Flash อย่างไรก็ตามในโปรแกรม Dreamweaver ก็สามารถสร้างไฟล์ Flash หรือที่เรียกว่า มูฟวี่แฟลช แบบง่ายเพื่อประกอบเว็บเพจได้ ซึ่งได้แก่ Flash Button และ Flash Text
การสร้าง Flash Button
        Flash Button หรือปุ่มแฟลช เป็นปุ่มสำหรับใช้สร้างลิงค์บนเว็บเพจ ซึ่งโปรแกรม Dreamweaver ช่วยอำนวยความสะดวกให้ในกรณีที่เราไม่มีภาพปุ่ม สำหรับการออกแบบเว็บเพจ ปุ่มแฟลชจะมีรูปแบบต่าง ๆ ให้เลือกและสามารถกำหนดข้อความ (ภาษาอังกฤษ) กำกับปุ่มได้อีกด้วย
        1.   วางเคอร์เซอร์ลงบนเว็บเพจ ตรงตำแหน่งที่จะสร้าง Flash Botton
        2.   คลิกลูกศรท้ายปุ่ม  แล้วเลือกคำสั่ง Flash Botton จะปรากฏหน้าต่าง Insert Flash Botton ขึ้นมา
        3.   เลือกรูปแบบของปุ่มจากช่อง Style โดยจะแสดงภาพตัวอย่างในช่อง Sample

              ภาพที่ 8.15 รูปแบบของปุ่มจากช่อง Style
        4.   กำหนดคุณสมบัติดังนี้
             Botton Text ใส่ข้อความสำหรับแสดงบนปุ่มใช้ได้เฉพาะตัวอักษรภาษาอังกฤษและตัวเลข
             Font ฟอนต์ของข้อความบนปุ่ม
             Size ขนาดตัวอักษร
             Link เว็บเพจ หรือตำแหน่งปลายทางของลิงค์
             Target เฟรมเป้าหมายของลิงค์
             Bg color สีพื้นหลังที่แสดงผ่านส่วนโปร่งใสของปุ่ม ถ้ามี
             Save as ตั้งชื่อไฟล์มูปวี่ .swf เพื่อบันทึกเก็บไว้ในเว็บไซต์
        5.   คลิกเลือกปุ่ม 
        6.   จะได้ Flash Botton บนเว็บเพจ ซึ่งสามารถทดลองแสดงผลได้โดยคลิกปุ่ม 
        7.   คลิกปุ่ม เพื่อเลิกทดสอบ
 

              ภาพที่ 8.16 Flash Botton บนเว็บเพจ
        กำหนดคุณสมบัติของ Flash Botton

              ภาพที่ 8.17 คุณสมบัติของ Flash Botton
การสร้าง Flash Text
        Flash Text เป็นข้อความที่อยู่ในรูปมูฟวี่ ของ Flash ซึ่งมีข้อดีกว่าข้อความทั่วไปคือเราสามารถเลือกใช้ฟอนต์แปลก ๆ ได้ โดยผู้ชมจะเห็นเหมือนกันบนเครื่องของเรา จึงเหมาะจะใช้เป็นข้อความหัวเรื่องต่าง ๆ หรือใช้เป็นลิงค์ก็ได้เช่นกัน
        1.   วางเคอร์เซอร์ลงบนเว็บเพจ ตรงตำแหน่งที่จะสร้าง Flash Text
        2.   คลิกลูกศรท้ายปุ่ม  แล้วเลือกคำสั่ง Flash Text จะปรากฏหน้าต่าง Insert Flash Text ขึ้นมา

             ภาพที่ 8.18 คำสั่ง Flash Text
 

              ภาพที่ 8.19 หน้าต่าง Insert Flash Text
        3.   กำหนดรูปแบบตัวอักษรดังนี้
             Font / Size ฟอนต์ของข้อความ และขนาดของตัวอักษร
             Color สีของข้อความในสถานะปกติ
             Rollover Color สีของข้อความเมื่อเลื่อนเมาส์ไปชี้
        4.   กำหนดคุณสมบัติดังนี้
             Link เว็บเพจ หรือตำแหน่งปลายทางของลิงค์
             Target เฟรมเป้าหมายของลิงค์
             Bg Color สีพื้นหลังของข้อความ
             Save As ตั้งชื่อไฟล์มูฟวี่ .swf เพื่อบันทึกเก็บไว้ในเว็บไซต์
        5.   คลิกปุ่ม 
          6.     จะได้ Flash Text บนเว็บเพจ ซึ่งสามารถทดลองแสดงผลได้โดยคลิกปุ่ม 
        7.   คลิกปุ่ม เพื่อเลิกทดสอบ 
             
              ภาพที่ 8.20 การทดสอบ 

                   ภาพที่ 8.21 สถานะเมื่อเลื่อนเมาส์ไปชี้
การแทรกไฟล์ Flash Movie ลงบนเว็บเพจ
        ในกรณีที่คุณเตรียมไฟล์มูฟวี่แฟลช ไฟล์ .swf ด้วยตัวเอง ซึ่งอาจจะเป็นไฟล์ที่สร้างขึ้นมาโดยใช้โปรแกรม Macromedia Flash หรือดาวน์โหลดมาจากแหล่งต่าง ๆ ก็สมารถนำเข้ามาแทรกใน     เว็บเพจได้โดยวิธีการ ดังต่อไปนี้
        1.   วางเคอร์เซอร์ลงบนเว็บเพจ ตรงตำแหน่งที่จะแทรก Flash Movie
        2.   คลิกที่ปุ่ม หรือเลือกคำสั่ง Insert > Media > Flash จะปรากฏหน้าต่าง Select File 

              ภาพที่ 8.22 แทรก Flash Movie


              ภาพที่ 8.23 เลือก Flash Movie
        3.   เลือกไฟล์ Flash ที่ต้องการนำมาแทรกลงในหน้าเว็บเพจ
        4.   คลิกปุ่ม 
        5.   จะได้ Flash Movie บนเว็บเพจ เป็นกรอบสีเทาและมีสัญลักษณ์ Flash อยู่ตรงกลาง 
ซึ่ง สามารถทดลองแสดงผลได้โดยคลิกปุ่ม  และหยุดแสดงผลโดย
สามารถคลิกที่ปุ่ม  บน Properties

              ภาพที่ 8.24 ผลลัพธ์ Flash Movie
กำหนดคุณสมบัติของ Flash Movie
        หลังจากแทรก Flash Movie ลงบนเว็บเพจแล้วเราสามารถกำหนดค่าการแสดงผลของมูฟวี่ได้จาก Properties Inspector เช่นเดียวกับการกำหนดคุณสมบัติของออบเจ็ค Flash ประเภทอื่น ๆที่กล่าวมาแล้วข้างต้น ดังภาพ

 

              ภาพที่ 8.25 กำหนดค่า Flash Movie  

  เข้าสู่บทเรียนต่อไปคลิก