คูมือการใชงานโปรแกรม Macromedia Director MX 2004
        และการประยุกตสรางสรรคผลงานมัลติมีเดีย
คํานํา

          การพัฒนาโปรแกรมคอมพิวเตอรชวยสอน หรือสื่อมัลติมีเดีย โปรแกรม Macromedia Director นับเปน
                                              
เครื่องมือสําคัญเครื่องมือหนึ่งที่ชวยสรางสรรคไดเปนอยางดี ดวยความสามารถเฉพาะดานตลอดทั้งความสามารถ
ดานโปรแกรมมิ่งดวยภาษา Lingo ทําใหสามารถพัฒนาระบบโตตอบกับผูเรียนไดอยางอิสระ ทั้งนี้ผูเขียนไดศึกษา
และจัดทําเอกสารประกอบดวยเนื้อหา ดังนี้
             1. ความรูเกี่ยวกับ Macromedia Director
             2. การใชงานโปรแกรมเริ่มตน
             3. การทํางานกับ Cast Window , Cast Member ลักษณะตางๆ
             4. การสรางสรรคงานกราฟกดวย Bitmap/Vector Paint
             5. การทํางานกับขอความ
             6. การสรางภาพเคลื่อนไหวแบบ Frame by Frame
             7. การสรางภาพเคลื่อนไหวแบบ Motion Tween
             8. การทํางานเกี่ยวกับเสียง
             9. การทํางานเกี่ยวกับสื่อวีดิทัศนดิจิทัล
             10. การสรางระบบโตตอบกับผูใชดวย Lingo Script
             11. ตัวอยางการประยุกตสรางสรรคผลงานดวย Macromedia Director
         ผูเขียนไดนําเสนอคูมือฉบับนี้ในลักษณะภาพประกอบเนื้อหา และวิธีปฏิบัตจริง เพื่อใหเปนเอกสารคูมือ
                                                                              ิ
ที่พรอมใชงาน และสื่อสารไดงาย อยางไรก็ตามหากมีขอผิดพลาดประการใด ผูเขียนขออภัยมา ณ ที่นี้


                                                                   บุญเลิศ อรุณพิบูลย
                                                                       12/1/2550
สารบัญ
เริ่มตนกับ Macromedia Director MX 2004 .................................................................................................................1
    การเขาสูโปรแกรม......................................................................................................................................................1
    Start Page ..............................................................................................................................................................1
    การปดโปรแกรม ........................................................................................................................................................1
หนาตางโปรแกรม...........................................................................................................................................................2
       Stage .................................................................................................................................................................3
       การเคลื่อนที่บน Stage ...........................................................................................................................................3
       การปรับมุมมองจอภาพ ...........................................................................................................................................3
       การปรับเปลี่ยนขนาดของ Stage...............................................................................................................................3
นําเขาไฟลรูปภาพ ...........................................................................................................................................................4
       แบบฝกปฏิบัติ .......................................................................................................................................................7
การวาดรูปดวย Paint......................................................................................................................................................8
    วาดสี่เหลี่ยม ..............................................................................................................................................................8
    การลบบางสวนของภาพ ............................................................................................................................................10
    การลบรูปทั้งหมด .....................................................................................................................................................10
    วาดวงกลม/วงรี ........................................................................................................................................................10
    วาดรูปหลายเหลี่ยม ...................................................................................................................................................11
    เครื่องมืออื่นๆ ..........................................................................................................................................................11
       แบบฝกปฏิบัติ .....................................................................................................................................................11
การปรับแตงรูปวาด .......................................................................................................................................................12
       ตัวอยางการใชเครื่องมือปรับแตงวัตถุ .......................................................................................................................12
       แบบฝกปฏิบัติ .....................................................................................................................................................13
วาดภาพ Vector ดวย Vector Paint ..............................................................................................................................14
    Vector & Bitmap.................................................................................................................................................14
       ภาพกราฟกแบบเวอรเตอร (Vector).......................................................................................................................14
       ภาพกราฟกแบบบิตแมป (Bitmap).........................................................................................................................14
    การใชงาน Vector Paint .........................................................................................................................................15
       ความหมายของจุดสี ..............................................................................................................................................16
ทํางานกับขอความ ........................................................................................................................................................19
    การสรางขอความดวย Paint Window........................................................................................................................19
    การสรางขอความดวย Text Window.........................................................................................................................19
ตัวอักษร 3 มิติ .............................................................................................................................................................20
การฝงฟอนต ................................................................................................................................................................22
Macromedia Director
1


                                       เริ่มตนกับ Macromedia Director MX 2004

           Macromedia Director MX โปรแกรมสรางสรรคผลงานมัลติมีเดียระดับมืออาชีพ ดังสโลแกนที่วา
Metaphor of a theather production หรือซอฟตแวรที่เปรียบเสมือนการผลิตผลงานระดับภาพยนตร (โรงละคร)
ดังนั้นดวยสโลแกนดังกลาว ทําใหโปรแกรมมีความโดดเดนหลากลักษณะทั้งการสรางสื่อมัลติมีเดีย การสรางสื่อ
ในรูปแบบ 3D การสรางสื่อระบบโตตอบ และการประยุกตใชสรางสื่อบทเรียนคอมพิวเตอรชวยสอน (CAI)

การเขาสูโปรแกรม
       การเขาสูโปรแกรม Macromedia Director MX มีลักษณะคลายคลึงกับการเรียกโปรแกรมใน
ระบบปฏิบัติการ Windows ทั่วไปโดยเลือกจาก Start, Program, Macromedia, Macromedia Director MX 2004 ซึ่ง
โปรแกรมจะแสดงจอภาพการทํางาน ดังนี้




Start Page
         จากจอภาพขางตนจะปรากฏสวนการทํางานที่เรียกวา Start Page ซึ่งมีตัวเลือกสําคัญในการสรางงาน
ใหม (Create New) หรือการเปดแฟมเอกสารเดิม (Open a Recent Item)
        กรณีที่ Start Page ถูกปดไปสามารถเรียกกลับคืนมาไดดวยคําสั่ง Window, Start Page

การปดโปรแกรม
  การปดโปรแกรมสามารถทําไดหลายวิธีทั้งการคลิกเมาสที่ปุมปดหนาตาง (Close box) หรือกดปุม
A$ หรือเลือกจากเมนูคําสั่ง File, Exit…
2


                                                                             หนาตางโปรแกรม

          เปดไฟลตัวอยางของโปรแกรมโดยเลือกเมนูคําสั่ง File, Open… หรือคลิกปุมเครื่องมือ Open
จากนั้นเลือกโฟลเดอรตัวอยาง ดังนี้




        เลือกไฟลตัวอยาง เชน parent scripts.dir จะปรากฏจอภาพตัวอยางและสวนประกอบตางๆ ที่สําคัญดังนี้
              Title Bar      Menu Bar      Toolbars    Score Window & Sprite       Panels or Inspector
  Tools Box




                 Controler         Stage                 Cast Window & Cast Member

          สวนประกอบตางๆ ควบคุมดวยเมนู Window และสามารถเคลื่อนยาย ยอ/ขยายขนาด ตลอดจน
ปรับเปลี่ยนการแสดงผลไดอิสระ
         วิธีลดในการจัดตําแหนงของสวนประกอบตางๆ
              ั                                         บนจอภาพใชคําสั่ง     Window,      Panel     Sets,
Default/Director 8
3

Stage
         Stage เปรียบเสมือนเวทีที่จะใหตัวละครหรือนักแสดง (วัตถุของ Director) มาแสดงหรือนําเสนอ ดังนั้น
การจัดวางวัตถุตางๆ จะตองจัดวางบน Stage ทั้งนี้ Stage แบงเปน Onstage canvas และ Offstage canvas




                                                                        Offstage canvas



                                                                        Onstage canvas




         การจัดวางวัตถุ สามารถจัดวางไดทั้งบน Onstage canvas และ Offstage canvas แตวตถุที่ปรากฏใน
                                                                                     ั
Onstage canvas เทานั้นที่จะปรากฏบนจอภาพเมื่อมีการนําเสนอผลงาน

การเคลื่อนที่บน Stage
      การเคลื่อนที่บน Stage จะตองเปลี่ยนเปนเครื่องมือ Hand       หรือขณะที่กําลังทํางานโหมดอื่นใหกด
ปุม S คางไว โหมดการทํางานจะเปน Hand อัตโนมัติ

การปรับมุมมองจอภาพ
         การปรับมุมมองจอภาพ ทําไดโดยเลือกเครื่องมือ Magnifying Glass แลวคลิกเมาสเพื่อขยายมุมมอง และ
การยอมุมมองใหกดปุม A คางไวกอนจึงคลิกเมาส
                                

การปรับเปลี่ยนขนาดของ Stage
        ขนาดของ Stage ควรกําหนดใหเหมาะสมกับสภาพการ
ใชโดยสามารถกําหนดไดดวยคําสั่ง Modify, Movie, Properties จะ
ปรากฏ Property Inspector เพื่อใหกําหนดคา Stage Size, Color ที่
เหมาะสมกับลักษณะงาน
4


                                                                             นําเขาไฟลรูปภาพ

         ฝกปฏิบัติการสรางชิ้นงานใหม โดยนําเขาไฟลรปภาพและศึกษาการทํางานเกี่ยวกับ Cast Member/Cast
                                                      ู
Window
         1. สรางไฟลใหมโดยเลือกคําสั่ง File, New, Movie หรือคลิกปุม New Movie
         2. เปด Cast Window ดวยคําสั่ง Window, Cast




         3. สรางกลุม Cast Member โดยคลิกที่ปุม Chooser Cast จากแถบควบคุมของ Cast Window จากนั้น
            เลือกคําสั่ง New Cast…




             คลิกปุมนี้

         4. ตั้งชื่อกลุม Cast Member แลวเลือกรายการเปน Internal เพื่อบันทึก Cast Member รวมกับไฟล
            Director Movie




         5. จะปรากฏ Tab ใหมใน Cast Member ดังนี้




         6. นําเขารูปภาพมาเก็บไวใน Cast Windows ไดโดยคลิกขวาบนที่วาง แลวเลือกคําสั่ง Import …
5

7. เลือกไดรฟ โฟลเดอร และเลือกไฟลที่ตองการนําเขา (สามารถเลือกไดหลายๆ ไฟล) แลวคลิกปุม
   Add ตอดวยปุม Import




8. โปรแกรมจะแสดงตัวเลือกการนําเขาภาพ ดังนี้




        • Color Depth คาความลึกของสี (ความคมชัดของภาพ) ในบางกรณีภาพจะมีคาความลึก
          ของสีมากกวาความลึกของจอภาพ จึงตองเลือกรูปแบบการนําเขาภาพที่เหมาะสม กรณีที่
          ยืนยันใชคาความลึกของภาพใหเลือกเปน Image แตถาตองการเลือกใหเหมาะสมกับ
          จอภาพใหเลือกเปน Stage (คานี้จะมีผลตอขนาดไฟลของ Director Movie)
        • Trim White Space เลือกเพื่อตัดเสนขอบสีขาวตรงขอบภาพ
        • Dither เลือกเพื่อใหสีของภาพมีการกระจาย
        • Same Settings for Remaining Images กรณีที่นําเขาภาพหลายๆ ภาพ ถาคลิกเลือกรายการ
          นี้จะทําใหทุกภาพใชคาที่กําหนดเหมือนกัน
6

9. โปรแกรมจะแสดง Cast Member ใน Cast Window ดังนี้




10. ทํางานกับ Cast Member
    • ลบ Cast Member ออกจาก Cast Window ใหกดปุม =
    • นํา Cast Member ไปวางบน Stage ใหลากแลวนําไปปลอยบน Stage
    • ลบ Cast Member ออกจาก Stage ใหเลือกปุมเครื่องมือ Arrow    แลวเลือก Cast Member ที่
      ตองการลบจากนั้นกดปุม =
11. Cast Member & Property Inspector




    Cast Member แตละชิ้นสามารถปรับแกไข หรือเปลี่ยนแปลงคุณลักษณะไดจาก Property Inspector
    ซึ่งเปดไดจากเมนู Window, Property Inspector
7

      12. สวนสําคัญของ Property Inspector ไดแก
          • Name (Cast Name) ในบัตรรายการ Member ควรกําหนดชื่อ Cast ใหเปนภาษาอังกฤษ
            หามเวนวรรค และจําไดงาย เพื่อสะดวกในการนําไปใชอางอิงกรณีที่มีการกํากับดวย Lingo
                                                               
            Script




          • Compression ในบัตรรายการ Bitmap เปนการเลือกรูปแบบการบีบอัดภาพ ควรเลือกเปน
            JPEG แลวกําหนดคา Quality ใหเหมาะสม (ประมาณ 60 – 80 กรณีสรางสื่อสําหรับเว็บไซต
            หรือ 100 สําหรับสื่อที่นําเสนอดวย CD/DVD)




แบบฝกปฏิบติ
          ั
      ฝกปฏิบัติสราง Cast member group และการควบคุม Cast Window
      ฝกปฏิบัติการนําเขาไฟลประเภทตางๆ เขาสู Cast member group
8


                                                                             การวาดรูปดวย Paint

        นอกจากการนําเขารูปภาพ ยังสามารถสรางภาพดวยฟงกชันวาดของ Paint ไดจากโปรแกรม Director
โดยคลิกเลือก Cast Member จาก Cast Window กอนแลวเปดฟงกชัน Paint ดวยคําสั่ง Window, Paint




วาดสี่เหลี่ยม
        การวาดวัตถุสี่เหลี่ยม ทําไดโดยคลิกเลือกเครื่องมือวาดสี่เหลี่ยม (Rectangular) ทั้งแบบมีสีพื้นและไมมีสี
พื้น         เลือกสีที่ตองการจาก Color Box         โดยกดปุมเมาสคางที่ชองสี จะปรากฏ Color Palettes ดังนี้




         โดยสีชองบนเรียกวา Forground Color ใหคลิกในชองสีที่ตองการ โดยปกติสีนี้จะแสดงเปนสีเสนขอบ
และสีชองลางเรียกวา Background Color มักจะแสดงเปนสีพื้น
9

         เลือกรูปแบบของลวดลายพื้นสี่เหลี่ยมจาก Pattern           โดยกดปุมเมาสคางไวแลวเลือกรูปแบบ
จาก Pattern Settings




        สามารถเลือกรูปแบบเพิ่มเติมไดโดยคลิกเลือกรายการ Pattern Settings…




        หรือเลือกรายการ Tile Settings…
10

          เลือกการไลเฉดสีจาก Gradient




          เลือกความหนาของเสนขอบจาก Other Line Width




           การวาดสี่เหลี่ยมเมื่อกําหนดคาสีและคุณสมบัติของสี่เหลี่ยมแลว ใหเลื่อนเมาสไปชี้ที่จุดเริ่มตนที่ตองการ
วาดสี่เหลี่ยม จากนั้นกดปุมเมาสคางไว ลากเมาสในแนวเฉียงใหไดขนาดที่ตองการ
          เทคนิคการวาด สามารถกดปุม S คางไวเพื่อวาดเปนรูปสี่เหลี่ยมจัตุรส
                                                                           ั

การลบบางสวนของภาพ
          การลบบางสวนของภาพ สามารถใชปุมเครื่องมือ Eraser              แลวลบเฉพาะตําแหนงที่ตองการ

การลบรูปทั้งหมด
         รูปที่วาดหากไมตองการ สามารถดับเบิลคลิกที่ปุมเครื่องมือ Marquee      โปรแกรมจะสราง Selection
เลือกรูปทั้งหมดอัตโนมัติ จากนั้นกดปุม = เพื่อลบ หรือใชเทคนิคดับเบิลคลิกที่ปุมเครื่องมือ Eraser

วาดวงกลม/วงรี
         การวาดวงกลมหรือวงรี จะใชเครื่องมือ Ellipse     ซึ่งมีหลักการเดียวกับการวาดสี่เหลี่ยม และมี
เทคนิคคือหากตองการวงกลมที่กลมจริงๆ ใหกดปุม S คางไวขณะลากเมาส
11


วาดรูปหลายเหลี่ยม
           การวาดรูปหลายเหลี่ยม จะใชเครื่องมือ Polygon     โดยการใชหลักการคลิกทีละจุด และดับเบิล
คลิกเมื่อตองการสิ้นสุดการวาด โปรแกรมจะตอเสนใหครบทุกจุดโดยอัตโนมัติ สามารถกดปุม S เพื่อใหได
เสนที่เรียบหรือทุกมุม 45 องศา

เครื่องมืออืนๆ
            ่
         นอกจากเครื่องมือวาดพื้นฐาน ยังมีปมเครื่องมืออีกหลายชิ้นที่นาสนใจ ซึ่งมีวิธีการใชงานไมแตกตางกับ
                                           ุ
ที่ไดแนะนําไปแลว ดังนี้ไดแก
                            เครื่องมือวาดสวนโคง (Arc) และเสน (Line)

                            เครื่องมือพนสี (Air Brush) และแปรงทาสี (Brush)
                            เครื่องมือวาด (Pencil)

                            เครื่องมือตรวจคาสี (Eyedropper) และถังสี (Paint Bucket)

                            เครื่องมือเลื่อนจอภาพ (Hand) และเครื่องมือมุมมองจอภาพ (Magnifying Glass)
                            (กดปุม S คางไวเพื่อเลือกตัวเลือกเพิ่มเติม)
                            เครื่องมือปรับเปลี่ยนจุดศูนยกลางของวัตถุ (Registration Point) และยางลบ (Eraser)
                            เครื่องมือสราง Selection ลักษณะตางๆ (Lasso & Marquee)

แบบฝกปฏิบติ
          ั
         ฝกปฏิบัติวาดรูปและปรับแตงรูปทรง แลวหาเทคนิคการวาดที่ตนเองถนัด
12


                                                                         การปรับแตงรูปวาด

          รูปที่วาดไวหรือรูปที่นําเขามาไวใน Cast Window สามารถปรับแตงเชน หมุน บิด กลับดานไดดวย
เครื่องมือตางๆ ในแถบเครื่องมือ Effect


        โดยมีหลักการใชงาน ดังนี้
        1. สราง Selection ใหกับวัตถุที่ตองการปรับแตง
        2. คลิกปุมเครื่องมือที่ตองการ ดังนี้

                  การกลับดานของวัตถุ ใชปุมเครื่องมือ Flip

                  การหมุนวัตถุ ใชปุมเครื่องมือ Rotate


                  การบิดวัตถุ ใชปุมเครื่องมือ Skew/Wrap/Perspective                             โดย
                  Skew คือการบิด/เอียงภาพ, Wrap & Perspective คือการปรับเปลี่ยนรูปรางของภาพซึ่ง Wrap
                  มีอสระในการปรับเปลี่ยนมาก
                     ิ


                  การควบคุมเกี่ยวกับเสนขอบ ใชเครื่องมือ Smooth/Trace Edges
                  นอกจากนี้ยังสามารถใชเทคนิค Smooth ทําใหภาพมีความนุมนวลดวย


                  การควบคุมเกี่ยวกับสี ใชชุดเครื่องสือสี

ตัวอยางการใชเครื่องมือปรับแตงวัตถุ
        1.   นําเขารูปภาพดวยคําสั่ง Import
        2.   ดับเบิลคลิกที่รูปใน Cast Window เพื่อเขาสูโหมด Paint
        3.   ดับเบิลคลิกที่ปุมเครื่องมือ Marquee เพื่อสราง Selection รอบวัตถุ
        4.   เลื่อนเมาสไปที่รูป (ภายในเสน Selection) โปรแกรมจะแสดงขอความเตือนวาการปรับแตงรูปดวย
             คําสั่งตอไปนี้ จะเปนการเปลี่ยนแปลงภาพตนฉบับ อาจจะมีผลใหภาพตนฉบับเสียหายได และไม
             สามารถกูคืนได ใหคลิกปุม Continue เพื่อดําเนินการตอ
13




         5. จากนั้นดับเบิลคลิกที่ปุมเครื่องมือ Marquee เพื่อสราง Selection รอบวัตถุอีกครั้ง
         6. ปรากฏ Effect Toolbar สมมติตองการบิดภาพ ก็คลิกปุมเครื่องมือ Skew หรือ Wrap หรือ
            Perspective แลวคลิกที่มุมของ Selection เพื่อบิดภาพใหไดรูปทรงที่ตองการ




Filter จาก PhotoShop
         การปรับแตงรูปภาพตางๆ ใน Director MX ยังสามารถใช Filter ของ Adobe PhotoShop มาผสมผสาน
ได โดยคัดลอกโฟลเดอร C:Program FilesAdobeAdobe Photoshop CS2Plug-InsFilters ของ PhotoShop มาไว
ในโฟลเดอร C:Program FilesMacromediaDirector MX 2004ConfigurationXtras ของ Director MX จากใช
เลือกรูปภาพที่ตองการปรับแตง เลือกเมนูคําสั่ง Xtras, Filter Bitmap เลือก Filter ที่ตองการ แลวคลิกปุม Filter




         แตละ Filter จะมีคาควบคุมแตกตางกันออกไป ใหปรับแตงคาตามเหมาะสม แลวคลิกปุม OK
         หมายเหตุ จะตองปด DirectorMX แลวเปดใหม

แบบฝกปฏิบติ
          ั
         ฝกปฏิบัติปรับแตงรูปภาพใหไดลักษณะใหมๆ
14


                                                     วาดภาพ Vector ดวย Vector Paint

        นอกจากฟงกชัน Paint ซึ่งไดผลการทํางานเปน Bitmap แลวยังสามารถใชฟงกชัน Vector Paint เพื่อ
สรางสรรคภาพในโหมด Vector ไดดวย

Vector & Bitmap
          การสรางงานกราฟกดวยคอมพิวเตอร มีหลักการสรางภาพ 2 ลักษณะใหญๆ ไดแก ภาพกราฟกแบบ
เวอรเตอร และบิตแมป

         ภาพกราฟกแบบเวอรเตอร (Vector)
          เปนภาพที่สรางดวยสวนประกอบของเสนลักษณะตางๆ และคุณสมบัติเกี่ยวกับสีของเสนนั้นๆ ซึ่งสราง
จากการคํานวณทางคณิตศาสตร เชน ภาพของคน ก็จะถูกสรางดวยจุดของเสนหลายๆ จุด เปนลักษณะของโครง
ราง (Outline) และสีของคนก็เกิดจากสีของเสนโครงรางนั้นๆ กับพื้นที่ผิวภายในนั่นเอง เมื่อมีการแกไขภาพ ก็จะ
เปนการแกไขคุณสมบัติของเสน ทําใหภาพไมสูญเสียความละเอียด เมื่อมีการขยายภาพนั่นเอง
         ภาพแบบ Vector ที่หลายๆ ทานคุนเคยก็คือ ภาพ .wmf ซึ่งเปน clipart ของ Microsoft Office นั่นเอง
นอกจากนี้คุณจะสามารถพบภาพฟอรแมตนี้ไดกับภาพในโปรแกรม Adobe Illustrator หรือ Macromedia
Freehand จะสังเกตไดงายวาภาพลักษณะนี้ จะมีจุดจับ (Handle) ชวยใหการแกไข ยอขยายขนาด หมุนภาพ ทําได
งาย สะดวก และรวดเร็ว




         รูปแสดงความคมชัดของภาพ Vector

         ภาพกราฟกแบบบิตแมป (Bitmap)
         ภาพแบบ Bitmap หรืออาจจะเรียกวาภาพแบบราสเตอร (Raster) เปนภาพที่เกิดจากจุดสีที่เรียกวา pixels
ซึ่งประกอบกันเปนรูปรางบนพื้นที่ที่มีลักษณะเปนเสนตาราง (กริด) แตละพิกเซลจะมีคาของตําแหนง และคาสี
ของตัวเอง ภาพหนึ่งภาพ จะประกอบดวยพิกเซลหลายๆ พิกเซลผสมกัน แตเนื่องจากพิกเซลมีขนาดเล็กมาก จึง
เห็นภาพมีความละเอียดสวยงาม ไมเห็นลักษณะของกรอบสี่เหลี่ยม จึงเปนภาพที่เหมาะสมตอการแสดงภาพที่มี
เฉด และสีสันจํานวนมาก เชนภาพถาย หรือภาพวาด
15




          ภาพแบบ Bitmap เปนภาพที่ขึ้นอยูกับความละเอียด หรือความคมชัด (Resolution) ซึ่งก็คือ จํานวน
พิกเซลที่แนนอนในการแสดงภาพ ดังนั้นเมื่อมีการขยายภาพ จะเกิดปญหาคือ เห็นเปนกรอบสี่เหลี่ยมเล็กๆ
หลายๆ จุด ประกอบกัน เพราะกริดของภาพมีขนาดที่แนนอนนั่นเอง




        รูปแสดงจุดสีของภาพ Bitmap

การใชงาน Vector Paint
        1. เลือกเมนูคําสั่ง Window, Vector Shapes
16

      2. หลักการวาดและการใชเครื่องมือใชหลักการเดียวกับ Paint แตมีความอิสระในการปรับแตงเพราะ
         ภาพ Vector จะมี Node ใหปรับแตงได




          รูปแสดงภาพตนฉบับ พรอม Node ลักษณะตางๆ




          รูปแสดงภาพที่ปรับแตงดวยเทคนิคการยาย หมุน Node

ความหมายของจุดสี
          •   จุดสีเขียว        ตําแหนงเริ่มตน
          •   จุดสีแดง          ตําแหนงสุดทาย
          •   จุดสีน้ําเงิน     ตําแหนงที่ใชประกอบการสรางวัตถุ
          •   จุดทึบ            ตําแหนงที่ไมไดถูกเลือก
          •   จุดโปรง          ตําแหนงที่ถูกเลือก ซึ่งจะปรากฏ Control Handle เปนแขนงออกมา 2 เสน

Vector Properties
      การปรับแตงภาพ Vector สามารถทําไดโดยเลือกคาควบคุมจาก Vector Properties
17

ตัวอยางการวาดภาพดวย Pen Tool
ดวงจันทร




ปลา




นก
18

ฝามือ/ฝาเทา




ตระกราผลไม
19


                                                                             ทํางานกับขอความ

        สื่อทุกชนิดยอมหนีไมพนขอมูลพื้นฐานที่จําเปนคือ ขอความ ดังนั้นเครื่องสรางขอความจึงตองติดมา
พรอมกับโปรแกรม สําหรับ Director มีวิธีการสรางขอความ 2 วิธี ไดแก
             • การสรางขอความดวยปุมเครื่องมือ Text Tool ของ Paint Window
             • การสรางขอความดวยคําสั่ง Text Window

การสรางขอความดวย Paint Window
         1. เปดใชงาน Paint Window
         2. เลือกปุมเครื่องมือ Text Tool
         3. เลื่อนเมาสนําไปคลิก ณ ตําแหนงที่ตองการพิมพขอความ จะปรากฏกรอบพิมพขอความ ซึ่ง
            หลักการพิมพก็ใชหลักการพิมพขอความทั่วไป

         4. การปรับเปลี่ยนแบบอักษร (Font) หรือลักษณะขอความทําไดโดยคลิกปุมขวาของเมาสที่กรอบ
            ขอความ แลวเลือกคําสั่งที่ตองการ




การสรางขอความดวย Text Window
          เครื่องมือ Text Tools ของ Paint Window เหมาะสําหรับการสรางขอความที่ไมยาวมากนัก แตถา
ตองการขอความลักษณะพารากราฟ จําเปนตองเลือกใช Text Window โดยเลือกเมนูคําสั่ง Insert, Media Element,
Text ซึ่งจะปรากฏจอภาพการทํางานดังนี้




         การทํางาน Text Window มีลักษณะเดียวกับการใชงาน Microsoft Word
         หมายเหตุ: ฟอนตที่ใชไดกับ Text Window จะเปนฟอนตตระกูล UPC หรือ JS, DS (ฟอนตเกา) เทานั้น
20


                                                                             ตัวอักษร 3 มิติ

       โปรแกรมมีฟงกชันแปลงตัวอักษรปกติเปนตัวอักษร 3 มิติไดโดยพิมพขอความที่ตองการ (ควรเลือก
ฟอนตและลักษณะใหหนา/ใหญ)




        จากนั้นเลือกรายการ Display ของ Text Properties เปน 3D Mode




        ปรับแตงลักษณะตัวอักษรไดจาก 3D Extruder Properties




            • Camera pos                   ตําแหนงที่แสดงรูปแบบ 3 มิติ
            • Rotation                     ทิศทางการหมุนในการแสดงผล
            • Face                         พื้นผิวหนาในการแสดงผล
21

• Smoothness      ความนุมนวล
• Tunnel Depth    คามิติชวงลึก
• Beval Amount    คามุม
• Bevel Edge      รูปแบบขอบมุม
• Light           ทิศทางแสง
• Directional     สีของขอความ
• Ambient         สีมิติ
• Background      สีพื้นหลัง
• Shader Textu…   รูปแบบพื้นผิว
• Diffuse         สีรอบขอความ
• Specular        สีที่ใชในการตกกระทบ
• Reflectivity    คาการตกกระทบของสี
22


                                                                                    การฝงฟอนต

            เนื่องจากฟอนตที่ใชไดกับ Text Window เปนฟอนตตระกูล JS, DS ซึ่งไมใชฟอนตมาตรฐานของ
คอมพิวเตอร หรือบางครั้งผูสรางสรรคผลงานอาจจะเลือกใชฟอนตอื่นๆ ที่ไมมีในเครื่องคอมพิวเตอรปกติ ซึ่ง
อาจจะเกิดปญหาในการเรียกชมกับคอมพิวเตอรอื่นได จึงควรฝงฟอนตดังกลาวรวมไปกับผลงาน โดยเลือกเมนู
คําสั่ง Insert, Media Element, Font… ปรากฏ Font Cast Member ดังนี้




         เลือกฟอนตที่ตองการฝงที่รายการ Original Font เลือกลักษณะที่ตองการใช เชน ตัวหนา ตัวเอียงและ
ขนาดที่ตองการในรายการ Bitmap
         เลือกรูปแบบการฝงทุกอักขระ (Entire Set) หรือเฉพาะอักขระที่ใชจริง (Partial Set) จากรายการ
Characters
         หมายเหตุ: การฝงฟอนตรวมกับไฟลผลงาน จะทําใหไฟลผลงานมีขนาดโตขึ้น

More Related Content

PDF
Microsoft Producer for PowerPoint
PDF
PDF
PDF
XS Japan 2008 App Data Japanese
PDF
XS Japan 2008 Ganeti Japanese
PDF
T2@java-ja#toyama
PDF
PDF
Cybozu Inc 10th anniversary event - developing section.
Microsoft Producer for PowerPoint
XS Japan 2008 App Data Japanese
XS Japan 2008 Ganeti Japanese
T2@java-ja#toyama
Cybozu Inc 10th anniversary event - developing section.

What's hot (20)

PDF
JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009
PPTX
5 13 Internet
PDF
Blognone Yearbook2008.Pdf
PDF
Cloud for Enterprise IT (Japanese)
PDF
Mashup and new paradigm - マッシュアップ技術とインターネットの新しい潮流
PDF
EJB3 ABC
PPT
すまべん関東#1「WindowsMobileでMortscriptを活用しよう!」
PDF
仕事で使うRuby
PDF
【13-B-3】 企業システムをマッシュアップ型に変えるには
PDF
35010558 1
PDF
Top Ten SE Concepts V11.1 Jp
PDF
Locotab imarket 20201214_ver3
PDF
もっと仕事で使うRuby
PDF
[12_B_6] PHP/MySQL を用いた大規模向けパッケージソフトウェア開発
PDF
20世紀Ruby
PDF
T2 webframework
PDF
PDF
【13-D-4】 アナタのアプリ性能改善の秘訣、オラクルが教えます!
PDF
T2 Hacks
PDF
Groovy Now And Future
JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009
5 13 Internet
Blognone Yearbook2008.Pdf
Cloud for Enterprise IT (Japanese)
Mashup and new paradigm - マッシュアップ技術とインターネットの新しい潮流
EJB3 ABC
すまべん関東#1「WindowsMobileでMortscriptを活用しよう!」
仕事で使うRuby
【13-B-3】 企業システムをマッシュアップ型に変えるには
35010558 1
Top Ten SE Concepts V11.1 Jp
Locotab imarket 20201214_ver3
もっと仕事で使うRuby
[12_B_6] PHP/MySQL を用いた大規模向けパッケージソフトウェア開発
20世紀Ruby
T2 webframework
【13-D-4】 アナタのアプリ性能改善の秘訣、オラクルが教えます!
T2 Hacks
Groovy Now And Future
Ad

Viewers also liked (20)

PPT
Ami Macromedia Director
DOCX
Sistema de Autor
PPTX
Tutorial adobe audition 3.0
PPTX
Sistemas de autor
PPSX
Adobe director yupanqui - b2
PPT
Macromedia director
PDF
แนะนำโปรแกรม Macromedia authorware 7.0
PPTX
Flash - Adobe Director - ActionScript
PPTX
Software libre y propietario
PPS
Presentación carpeta momentos
DOCX
Manual de calidad (1)
PDF
Diseño photoshop cs6 v participante
PPTX
Adobe Audition 3.0
PPTX
Star uml
PDF
Capítulo 6 El Manual de la Calidad
PDF
Ejemplo Manual de Calidad
DOCX
PDF
manual de calidad ejemplo
DOC
Ejercicios resueltos adobe photoshop
PDF
Photoshop CS6: Ejercicios
Ami Macromedia Director
Sistema de Autor
Tutorial adobe audition 3.0
Sistemas de autor
Adobe director yupanqui - b2
Macromedia director
แนะนำโปรแกรม Macromedia authorware 7.0
Flash - Adobe Director - ActionScript
Software libre y propietario
Presentación carpeta momentos
Manual de calidad (1)
Diseño photoshop cs6 v participante
Adobe Audition 3.0
Star uml
Capítulo 6 El Manual de la Calidad
Ejemplo Manual de Calidad
manual de calidad ejemplo
Ejercicios resueltos adobe photoshop
Photoshop CS6: Ejercicios
Ad

More from Boonlert Aroonpiboon (20)

PDF
PDF
Scival for Research Performance
PDF
20190726 icde-session-chularat-nstda-4
PDF
20190409 social-media-backup
PDF
20190220 open-library
PDF
20190220 digital-archives
PDF
OER KKU Library
PDF
Museum digital-code
PDF
OER MOOC - Success Story
PDF
LAM Code of conduct
PDF
RLPD - OER MOOC
PDF
New Technology for Information Services
PDF
New Technology for Information Services
PDF
digital law for GLAM
PDF
20180919 digital-collections
PDF
Field-Weighted Citation Impact (FWCI)
PDF
20180828 digital-archives
PDF
Local Wisdom Information : How to
PDF
201403 etda-library-settup
PDF
201403 etda-library
Scival for Research Performance
20190726 icde-session-chularat-nstda-4
20190409 social-media-backup
20190220 open-library
20190220 digital-archives
OER KKU Library
Museum digital-code
OER MOOC - Success Story
LAM Code of conduct
RLPD - OER MOOC
New Technology for Information Services
New Technology for Information Services
digital law for GLAM
20180919 digital-collections
Field-Weighted Citation Impact (FWCI)
20180828 digital-archives
Local Wisdom Information : How to
201403 etda-library-settup
201403 etda-library

Recently uploaded (8)

PDF
Cold positive punishment of the student سزادانی ئەرێنی ساردی قوتابی.pdf
PDF
15 AUG 2025 PS 15 AUG 2025 PS 15 AUG 2025 PS
PDF
Materi seni rupa untuk sekolah dasar materi tentang seni rupa
PDF
levelling full chapter with examples and questions
PDF
فورمولر عمومی مضمون فزیک برای همه انجنیران
PDF
5.PDFsxcc c fvfvfv fvfvwCCDSDcvvcrdcfrwcwecwdcfwe
PPTX
Madison dsfnsd dslsf sada;sdmas;ds;dls.pptx
PPTX
Presentation on chemistry class 11 and class 12
Cold positive punishment of the student سزادانی ئەرێنی ساردی قوتابی.pdf
15 AUG 2025 PS 15 AUG 2025 PS 15 AUG 2025 PS
Materi seni rupa untuk sekolah dasar materi tentang seni rupa
levelling full chapter with examples and questions
فورمولر عمومی مضمون فزیک برای همه انجنیران
5.PDFsxcc c fvfvfv fvfvwCCDSDcvvcrdcfrwcwecwdcfwe
Madison dsfnsd dslsf sada;sdmas;ds;dls.pptx
Presentation on chemistry class 11 and class 12

Macromedia Director

  • 1. คูมือการใชงานโปรแกรม Macromedia Director MX 2004 และการประยุกตสรางสรรคผลงานมัลติมีเดีย
  • 2. คํานํา การพัฒนาโปรแกรมคอมพิวเตอรชวยสอน หรือสื่อมัลติมีเดีย โปรแกรม Macromedia Director นับเปน  เครื่องมือสําคัญเครื่องมือหนึ่งที่ชวยสรางสรรคไดเปนอยางดี ดวยความสามารถเฉพาะดานตลอดทั้งความสามารถ ดานโปรแกรมมิ่งดวยภาษา Lingo ทําใหสามารถพัฒนาระบบโตตอบกับผูเรียนไดอยางอิสระ ทั้งนี้ผูเขียนไดศึกษา และจัดทําเอกสารประกอบดวยเนื้อหา ดังนี้ 1. ความรูเกี่ยวกับ Macromedia Director 2. การใชงานโปรแกรมเริ่มตน 3. การทํางานกับ Cast Window , Cast Member ลักษณะตางๆ 4. การสรางสรรคงานกราฟกดวย Bitmap/Vector Paint 5. การทํางานกับขอความ 6. การสรางภาพเคลื่อนไหวแบบ Frame by Frame 7. การสรางภาพเคลื่อนไหวแบบ Motion Tween 8. การทํางานเกี่ยวกับเสียง 9. การทํางานเกี่ยวกับสื่อวีดิทัศนดิจิทัล 10. การสรางระบบโตตอบกับผูใชดวย Lingo Script 11. ตัวอยางการประยุกตสรางสรรคผลงานดวย Macromedia Director ผูเขียนไดนําเสนอคูมือฉบับนี้ในลักษณะภาพประกอบเนื้อหา และวิธีปฏิบัตจริง เพื่อใหเปนเอกสารคูมือ ิ ที่พรอมใชงาน และสื่อสารไดงาย อยางไรก็ตามหากมีขอผิดพลาดประการใด ผูเขียนขออภัยมา ณ ที่นี้ บุญเลิศ อรุณพิบูลย 12/1/2550
  • 3. สารบัญ เริ่มตนกับ Macromedia Director MX 2004 .................................................................................................................1 การเขาสูโปรแกรม......................................................................................................................................................1 Start Page ..............................................................................................................................................................1 การปดโปรแกรม ........................................................................................................................................................1 หนาตางโปรแกรม...........................................................................................................................................................2 Stage .................................................................................................................................................................3 การเคลื่อนที่บน Stage ...........................................................................................................................................3 การปรับมุมมองจอภาพ ...........................................................................................................................................3 การปรับเปลี่ยนขนาดของ Stage...............................................................................................................................3 นําเขาไฟลรูปภาพ ...........................................................................................................................................................4 แบบฝกปฏิบัติ .......................................................................................................................................................7 การวาดรูปดวย Paint......................................................................................................................................................8 วาดสี่เหลี่ยม ..............................................................................................................................................................8 การลบบางสวนของภาพ ............................................................................................................................................10 การลบรูปทั้งหมด .....................................................................................................................................................10 วาดวงกลม/วงรี ........................................................................................................................................................10 วาดรูปหลายเหลี่ยม ...................................................................................................................................................11 เครื่องมืออื่นๆ ..........................................................................................................................................................11 แบบฝกปฏิบัติ .....................................................................................................................................................11 การปรับแตงรูปวาด .......................................................................................................................................................12 ตัวอยางการใชเครื่องมือปรับแตงวัตถุ .......................................................................................................................12 แบบฝกปฏิบัติ .....................................................................................................................................................13 วาดภาพ Vector ดวย Vector Paint ..............................................................................................................................14 Vector & Bitmap.................................................................................................................................................14 ภาพกราฟกแบบเวอรเตอร (Vector).......................................................................................................................14 ภาพกราฟกแบบบิตแมป (Bitmap).........................................................................................................................14 การใชงาน Vector Paint .........................................................................................................................................15 ความหมายของจุดสี ..............................................................................................................................................16 ทํางานกับขอความ ........................................................................................................................................................19 การสรางขอความดวย Paint Window........................................................................................................................19 การสรางขอความดวย Text Window.........................................................................................................................19 ตัวอักษร 3 มิติ .............................................................................................................................................................20 การฝงฟอนต ................................................................................................................................................................22
  • 5. 1 เริ่มตนกับ Macromedia Director MX 2004 Macromedia Director MX โปรแกรมสรางสรรคผลงานมัลติมีเดียระดับมืออาชีพ ดังสโลแกนที่วา Metaphor of a theather production หรือซอฟตแวรที่เปรียบเสมือนการผลิตผลงานระดับภาพยนตร (โรงละคร) ดังนั้นดวยสโลแกนดังกลาว ทําใหโปรแกรมมีความโดดเดนหลากลักษณะทั้งการสรางสื่อมัลติมีเดีย การสรางสื่อ ในรูปแบบ 3D การสรางสื่อระบบโตตอบ และการประยุกตใชสรางสื่อบทเรียนคอมพิวเตอรชวยสอน (CAI) การเขาสูโปรแกรม การเขาสูโปรแกรม Macromedia Director MX มีลักษณะคลายคลึงกับการเรียกโปรแกรมใน ระบบปฏิบัติการ Windows ทั่วไปโดยเลือกจาก Start, Program, Macromedia, Macromedia Director MX 2004 ซึ่ง โปรแกรมจะแสดงจอภาพการทํางาน ดังนี้ Start Page จากจอภาพขางตนจะปรากฏสวนการทํางานที่เรียกวา Start Page ซึ่งมีตัวเลือกสําคัญในการสรางงาน ใหม (Create New) หรือการเปดแฟมเอกสารเดิม (Open a Recent Item) กรณีที่ Start Page ถูกปดไปสามารถเรียกกลับคืนมาไดดวยคําสั่ง Window, Start Page การปดโปรแกรม การปดโปรแกรมสามารถทําไดหลายวิธีทั้งการคลิกเมาสที่ปุมปดหนาตาง (Close box) หรือกดปุม A$ หรือเลือกจากเมนูคําสั่ง File, Exit…
  • 6. 2 หนาตางโปรแกรม เปดไฟลตัวอยางของโปรแกรมโดยเลือกเมนูคําสั่ง File, Open… หรือคลิกปุมเครื่องมือ Open จากนั้นเลือกโฟลเดอรตัวอยาง ดังนี้ เลือกไฟลตัวอยาง เชน parent scripts.dir จะปรากฏจอภาพตัวอยางและสวนประกอบตางๆ ที่สําคัญดังนี้ Title Bar Menu Bar Toolbars Score Window & Sprite Panels or Inspector Tools Box Controler Stage Cast Window & Cast Member สวนประกอบตางๆ ควบคุมดวยเมนู Window และสามารถเคลื่อนยาย ยอ/ขยายขนาด ตลอดจน ปรับเปลี่ยนการแสดงผลไดอิสระ วิธีลดในการจัดตําแหนงของสวนประกอบตางๆ ั บนจอภาพใชคําสั่ง Window, Panel Sets, Default/Director 8
  • 7. 3 Stage Stage เปรียบเสมือนเวทีที่จะใหตัวละครหรือนักแสดง (วัตถุของ Director) มาแสดงหรือนําเสนอ ดังนั้น การจัดวางวัตถุตางๆ จะตองจัดวางบน Stage ทั้งนี้ Stage แบงเปน Onstage canvas และ Offstage canvas Offstage canvas Onstage canvas การจัดวางวัตถุ สามารถจัดวางไดทั้งบน Onstage canvas และ Offstage canvas แตวตถุที่ปรากฏใน ั Onstage canvas เทานั้นที่จะปรากฏบนจอภาพเมื่อมีการนําเสนอผลงาน การเคลื่อนที่บน Stage การเคลื่อนที่บน Stage จะตองเปลี่ยนเปนเครื่องมือ Hand หรือขณะที่กําลังทํางานโหมดอื่นใหกด ปุม S คางไว โหมดการทํางานจะเปน Hand อัตโนมัติ การปรับมุมมองจอภาพ การปรับมุมมองจอภาพ ทําไดโดยเลือกเครื่องมือ Magnifying Glass แลวคลิกเมาสเพื่อขยายมุมมอง และ การยอมุมมองใหกดปุม A คางไวกอนจึงคลิกเมาส  การปรับเปลี่ยนขนาดของ Stage ขนาดของ Stage ควรกําหนดใหเหมาะสมกับสภาพการ ใชโดยสามารถกําหนดไดดวยคําสั่ง Modify, Movie, Properties จะ ปรากฏ Property Inspector เพื่อใหกําหนดคา Stage Size, Color ที่ เหมาะสมกับลักษณะงาน
  • 8. 4 นําเขาไฟลรูปภาพ ฝกปฏิบัติการสรางชิ้นงานใหม โดยนําเขาไฟลรปภาพและศึกษาการทํางานเกี่ยวกับ Cast Member/Cast ู Window 1. สรางไฟลใหมโดยเลือกคําสั่ง File, New, Movie หรือคลิกปุม New Movie 2. เปด Cast Window ดวยคําสั่ง Window, Cast 3. สรางกลุม Cast Member โดยคลิกที่ปุม Chooser Cast จากแถบควบคุมของ Cast Window จากนั้น เลือกคําสั่ง New Cast… คลิกปุมนี้ 4. ตั้งชื่อกลุม Cast Member แลวเลือกรายการเปน Internal เพื่อบันทึก Cast Member รวมกับไฟล Director Movie 5. จะปรากฏ Tab ใหมใน Cast Member ดังนี้ 6. นําเขารูปภาพมาเก็บไวใน Cast Windows ไดโดยคลิกขวาบนที่วาง แลวเลือกคําสั่ง Import …
  • 9. 5 7. เลือกไดรฟ โฟลเดอร และเลือกไฟลที่ตองการนําเขา (สามารถเลือกไดหลายๆ ไฟล) แลวคลิกปุม Add ตอดวยปุม Import 8. โปรแกรมจะแสดงตัวเลือกการนําเขาภาพ ดังนี้ • Color Depth คาความลึกของสี (ความคมชัดของภาพ) ในบางกรณีภาพจะมีคาความลึก ของสีมากกวาความลึกของจอภาพ จึงตองเลือกรูปแบบการนําเขาภาพที่เหมาะสม กรณีที่ ยืนยันใชคาความลึกของภาพใหเลือกเปน Image แตถาตองการเลือกใหเหมาะสมกับ จอภาพใหเลือกเปน Stage (คานี้จะมีผลตอขนาดไฟลของ Director Movie) • Trim White Space เลือกเพื่อตัดเสนขอบสีขาวตรงขอบภาพ • Dither เลือกเพื่อใหสีของภาพมีการกระจาย • Same Settings for Remaining Images กรณีที่นําเขาภาพหลายๆ ภาพ ถาคลิกเลือกรายการ นี้จะทําใหทุกภาพใชคาที่กําหนดเหมือนกัน
  • 10. 6 9. โปรแกรมจะแสดง Cast Member ใน Cast Window ดังนี้ 10. ทํางานกับ Cast Member • ลบ Cast Member ออกจาก Cast Window ใหกดปุม = • นํา Cast Member ไปวางบน Stage ใหลากแลวนําไปปลอยบน Stage • ลบ Cast Member ออกจาก Stage ใหเลือกปุมเครื่องมือ Arrow แลวเลือก Cast Member ที่ ตองการลบจากนั้นกดปุม = 11. Cast Member & Property Inspector Cast Member แตละชิ้นสามารถปรับแกไข หรือเปลี่ยนแปลงคุณลักษณะไดจาก Property Inspector ซึ่งเปดไดจากเมนู Window, Property Inspector
  • 11. 7 12. สวนสําคัญของ Property Inspector ไดแก • Name (Cast Name) ในบัตรรายการ Member ควรกําหนดชื่อ Cast ใหเปนภาษาอังกฤษ หามเวนวรรค และจําไดงาย เพื่อสะดวกในการนําไปใชอางอิงกรณีที่มีการกํากับดวย Lingo  Script • Compression ในบัตรรายการ Bitmap เปนการเลือกรูปแบบการบีบอัดภาพ ควรเลือกเปน JPEG แลวกําหนดคา Quality ใหเหมาะสม (ประมาณ 60 – 80 กรณีสรางสื่อสําหรับเว็บไซต หรือ 100 สําหรับสื่อที่นําเสนอดวย CD/DVD) แบบฝกปฏิบติ ั ฝกปฏิบัติสราง Cast member group และการควบคุม Cast Window ฝกปฏิบัติการนําเขาไฟลประเภทตางๆ เขาสู Cast member group
  • 12. 8 การวาดรูปดวย Paint นอกจากการนําเขารูปภาพ ยังสามารถสรางภาพดวยฟงกชันวาดของ Paint ไดจากโปรแกรม Director โดยคลิกเลือก Cast Member จาก Cast Window กอนแลวเปดฟงกชัน Paint ดวยคําสั่ง Window, Paint วาดสี่เหลี่ยม การวาดวัตถุสี่เหลี่ยม ทําไดโดยคลิกเลือกเครื่องมือวาดสี่เหลี่ยม (Rectangular) ทั้งแบบมีสีพื้นและไมมีสี พื้น เลือกสีที่ตองการจาก Color Box โดยกดปุมเมาสคางที่ชองสี จะปรากฏ Color Palettes ดังนี้ โดยสีชองบนเรียกวา Forground Color ใหคลิกในชองสีที่ตองการ โดยปกติสีนี้จะแสดงเปนสีเสนขอบ และสีชองลางเรียกวา Background Color มักจะแสดงเปนสีพื้น
  • 13. 9 เลือกรูปแบบของลวดลายพื้นสี่เหลี่ยมจาก Pattern โดยกดปุมเมาสคางไวแลวเลือกรูปแบบ จาก Pattern Settings สามารถเลือกรูปแบบเพิ่มเติมไดโดยคลิกเลือกรายการ Pattern Settings… หรือเลือกรายการ Tile Settings…
  • 14. 10 เลือกการไลเฉดสีจาก Gradient เลือกความหนาของเสนขอบจาก Other Line Width การวาดสี่เหลี่ยมเมื่อกําหนดคาสีและคุณสมบัติของสี่เหลี่ยมแลว ใหเลื่อนเมาสไปชี้ที่จุดเริ่มตนที่ตองการ วาดสี่เหลี่ยม จากนั้นกดปุมเมาสคางไว ลากเมาสในแนวเฉียงใหไดขนาดที่ตองการ เทคนิคการวาด สามารถกดปุม S คางไวเพื่อวาดเปนรูปสี่เหลี่ยมจัตุรส ั การลบบางสวนของภาพ การลบบางสวนของภาพ สามารถใชปุมเครื่องมือ Eraser แลวลบเฉพาะตําแหนงที่ตองการ การลบรูปทั้งหมด รูปที่วาดหากไมตองการ สามารถดับเบิลคลิกที่ปุมเครื่องมือ Marquee โปรแกรมจะสราง Selection เลือกรูปทั้งหมดอัตโนมัติ จากนั้นกดปุม = เพื่อลบ หรือใชเทคนิคดับเบิลคลิกที่ปุมเครื่องมือ Eraser วาดวงกลม/วงรี การวาดวงกลมหรือวงรี จะใชเครื่องมือ Ellipse ซึ่งมีหลักการเดียวกับการวาดสี่เหลี่ยม และมี เทคนิคคือหากตองการวงกลมที่กลมจริงๆ ใหกดปุม S คางไวขณะลากเมาส
  • 15. 11 วาดรูปหลายเหลี่ยม การวาดรูปหลายเหลี่ยม จะใชเครื่องมือ Polygon โดยการใชหลักการคลิกทีละจุด และดับเบิล คลิกเมื่อตองการสิ้นสุดการวาด โปรแกรมจะตอเสนใหครบทุกจุดโดยอัตโนมัติ สามารถกดปุม S เพื่อใหได เสนที่เรียบหรือทุกมุม 45 องศา เครื่องมืออืนๆ ่ นอกจากเครื่องมือวาดพื้นฐาน ยังมีปมเครื่องมืออีกหลายชิ้นที่นาสนใจ ซึ่งมีวิธีการใชงานไมแตกตางกับ ุ ที่ไดแนะนําไปแลว ดังนี้ไดแก เครื่องมือวาดสวนโคง (Arc) และเสน (Line) เครื่องมือพนสี (Air Brush) และแปรงทาสี (Brush) เครื่องมือวาด (Pencil) เครื่องมือตรวจคาสี (Eyedropper) และถังสี (Paint Bucket) เครื่องมือเลื่อนจอภาพ (Hand) และเครื่องมือมุมมองจอภาพ (Magnifying Glass) (กดปุม S คางไวเพื่อเลือกตัวเลือกเพิ่มเติม) เครื่องมือปรับเปลี่ยนจุดศูนยกลางของวัตถุ (Registration Point) และยางลบ (Eraser) เครื่องมือสราง Selection ลักษณะตางๆ (Lasso & Marquee) แบบฝกปฏิบติ ั ฝกปฏิบัติวาดรูปและปรับแตงรูปทรง แลวหาเทคนิคการวาดที่ตนเองถนัด
  • 16. 12 การปรับแตงรูปวาด รูปที่วาดไวหรือรูปที่นําเขามาไวใน Cast Window สามารถปรับแตงเชน หมุน บิด กลับดานไดดวย เครื่องมือตางๆ ในแถบเครื่องมือ Effect โดยมีหลักการใชงาน ดังนี้ 1. สราง Selection ใหกับวัตถุที่ตองการปรับแตง 2. คลิกปุมเครื่องมือที่ตองการ ดังนี้ การกลับดานของวัตถุ ใชปุมเครื่องมือ Flip การหมุนวัตถุ ใชปุมเครื่องมือ Rotate การบิดวัตถุ ใชปุมเครื่องมือ Skew/Wrap/Perspective โดย Skew คือการบิด/เอียงภาพ, Wrap & Perspective คือการปรับเปลี่ยนรูปรางของภาพซึ่ง Wrap มีอสระในการปรับเปลี่ยนมาก ิ การควบคุมเกี่ยวกับเสนขอบ ใชเครื่องมือ Smooth/Trace Edges นอกจากนี้ยังสามารถใชเทคนิค Smooth ทําใหภาพมีความนุมนวลดวย การควบคุมเกี่ยวกับสี ใชชุดเครื่องสือสี ตัวอยางการใชเครื่องมือปรับแตงวัตถุ 1. นําเขารูปภาพดวยคําสั่ง Import 2. ดับเบิลคลิกที่รูปใน Cast Window เพื่อเขาสูโหมด Paint 3. ดับเบิลคลิกที่ปุมเครื่องมือ Marquee เพื่อสราง Selection รอบวัตถุ 4. เลื่อนเมาสไปที่รูป (ภายในเสน Selection) โปรแกรมจะแสดงขอความเตือนวาการปรับแตงรูปดวย คําสั่งตอไปนี้ จะเปนการเปลี่ยนแปลงภาพตนฉบับ อาจจะมีผลใหภาพตนฉบับเสียหายได และไม สามารถกูคืนได ใหคลิกปุม Continue เพื่อดําเนินการตอ
  • 17. 13 5. จากนั้นดับเบิลคลิกที่ปุมเครื่องมือ Marquee เพื่อสราง Selection รอบวัตถุอีกครั้ง 6. ปรากฏ Effect Toolbar สมมติตองการบิดภาพ ก็คลิกปุมเครื่องมือ Skew หรือ Wrap หรือ Perspective แลวคลิกที่มุมของ Selection เพื่อบิดภาพใหไดรูปทรงที่ตองการ Filter จาก PhotoShop การปรับแตงรูปภาพตางๆ ใน Director MX ยังสามารถใช Filter ของ Adobe PhotoShop มาผสมผสาน ได โดยคัดลอกโฟลเดอร C:Program FilesAdobeAdobe Photoshop CS2Plug-InsFilters ของ PhotoShop มาไว ในโฟลเดอร C:Program FilesMacromediaDirector MX 2004ConfigurationXtras ของ Director MX จากใช เลือกรูปภาพที่ตองการปรับแตง เลือกเมนูคําสั่ง Xtras, Filter Bitmap เลือก Filter ที่ตองการ แลวคลิกปุม Filter แตละ Filter จะมีคาควบคุมแตกตางกันออกไป ใหปรับแตงคาตามเหมาะสม แลวคลิกปุม OK หมายเหตุ จะตองปด DirectorMX แลวเปดใหม แบบฝกปฏิบติ ั ฝกปฏิบัติปรับแตงรูปภาพใหไดลักษณะใหมๆ
  • 18. 14 วาดภาพ Vector ดวย Vector Paint นอกจากฟงกชัน Paint ซึ่งไดผลการทํางานเปน Bitmap แลวยังสามารถใชฟงกชัน Vector Paint เพื่อ สรางสรรคภาพในโหมด Vector ไดดวย Vector & Bitmap การสรางงานกราฟกดวยคอมพิวเตอร มีหลักการสรางภาพ 2 ลักษณะใหญๆ ไดแก ภาพกราฟกแบบ เวอรเตอร และบิตแมป ภาพกราฟกแบบเวอรเตอร (Vector) เปนภาพที่สรางดวยสวนประกอบของเสนลักษณะตางๆ และคุณสมบัติเกี่ยวกับสีของเสนนั้นๆ ซึ่งสราง จากการคํานวณทางคณิตศาสตร เชน ภาพของคน ก็จะถูกสรางดวยจุดของเสนหลายๆ จุด เปนลักษณะของโครง ราง (Outline) และสีของคนก็เกิดจากสีของเสนโครงรางนั้นๆ กับพื้นที่ผิวภายในนั่นเอง เมื่อมีการแกไขภาพ ก็จะ เปนการแกไขคุณสมบัติของเสน ทําใหภาพไมสูญเสียความละเอียด เมื่อมีการขยายภาพนั่นเอง ภาพแบบ Vector ที่หลายๆ ทานคุนเคยก็คือ ภาพ .wmf ซึ่งเปน clipart ของ Microsoft Office นั่นเอง นอกจากนี้คุณจะสามารถพบภาพฟอรแมตนี้ไดกับภาพในโปรแกรม Adobe Illustrator หรือ Macromedia Freehand จะสังเกตไดงายวาภาพลักษณะนี้ จะมีจุดจับ (Handle) ชวยใหการแกไข ยอขยายขนาด หมุนภาพ ทําได งาย สะดวก และรวดเร็ว รูปแสดงความคมชัดของภาพ Vector ภาพกราฟกแบบบิตแมป (Bitmap) ภาพแบบ Bitmap หรืออาจจะเรียกวาภาพแบบราสเตอร (Raster) เปนภาพที่เกิดจากจุดสีที่เรียกวา pixels ซึ่งประกอบกันเปนรูปรางบนพื้นที่ที่มีลักษณะเปนเสนตาราง (กริด) แตละพิกเซลจะมีคาของตําแหนง และคาสี ของตัวเอง ภาพหนึ่งภาพ จะประกอบดวยพิกเซลหลายๆ พิกเซลผสมกัน แตเนื่องจากพิกเซลมีขนาดเล็กมาก จึง เห็นภาพมีความละเอียดสวยงาม ไมเห็นลักษณะของกรอบสี่เหลี่ยม จึงเปนภาพที่เหมาะสมตอการแสดงภาพที่มี เฉด และสีสันจํานวนมาก เชนภาพถาย หรือภาพวาด
  • 19. 15 ภาพแบบ Bitmap เปนภาพที่ขึ้นอยูกับความละเอียด หรือความคมชัด (Resolution) ซึ่งก็คือ จํานวน พิกเซลที่แนนอนในการแสดงภาพ ดังนั้นเมื่อมีการขยายภาพ จะเกิดปญหาคือ เห็นเปนกรอบสี่เหลี่ยมเล็กๆ หลายๆ จุด ประกอบกัน เพราะกริดของภาพมีขนาดที่แนนอนนั่นเอง รูปแสดงจุดสีของภาพ Bitmap การใชงาน Vector Paint 1. เลือกเมนูคําสั่ง Window, Vector Shapes
  • 20. 16 2. หลักการวาดและการใชเครื่องมือใชหลักการเดียวกับ Paint แตมีความอิสระในการปรับแตงเพราะ ภาพ Vector จะมี Node ใหปรับแตงได รูปแสดงภาพตนฉบับ พรอม Node ลักษณะตางๆ รูปแสดงภาพที่ปรับแตงดวยเทคนิคการยาย หมุน Node ความหมายของจุดสี • จุดสีเขียว ตําแหนงเริ่มตน • จุดสีแดง ตําแหนงสุดทาย • จุดสีน้ําเงิน ตําแหนงที่ใชประกอบการสรางวัตถุ • จุดทึบ ตําแหนงที่ไมไดถูกเลือก • จุดโปรง ตําแหนงที่ถูกเลือก ซึ่งจะปรากฏ Control Handle เปนแขนงออกมา 2 เสน Vector Properties การปรับแตงภาพ Vector สามารถทําไดโดยเลือกคาควบคุมจาก Vector Properties
  • 23. 19 ทํางานกับขอความ สื่อทุกชนิดยอมหนีไมพนขอมูลพื้นฐานที่จําเปนคือ ขอความ ดังนั้นเครื่องสรางขอความจึงตองติดมา พรอมกับโปรแกรม สําหรับ Director มีวิธีการสรางขอความ 2 วิธี ไดแก • การสรางขอความดวยปุมเครื่องมือ Text Tool ของ Paint Window • การสรางขอความดวยคําสั่ง Text Window การสรางขอความดวย Paint Window 1. เปดใชงาน Paint Window 2. เลือกปุมเครื่องมือ Text Tool 3. เลื่อนเมาสนําไปคลิก ณ ตําแหนงที่ตองการพิมพขอความ จะปรากฏกรอบพิมพขอความ ซึ่ง หลักการพิมพก็ใชหลักการพิมพขอความทั่วไป 4. การปรับเปลี่ยนแบบอักษร (Font) หรือลักษณะขอความทําไดโดยคลิกปุมขวาของเมาสที่กรอบ ขอความ แลวเลือกคําสั่งที่ตองการ การสรางขอความดวย Text Window เครื่องมือ Text Tools ของ Paint Window เหมาะสําหรับการสรางขอความที่ไมยาวมากนัก แตถา ตองการขอความลักษณะพารากราฟ จําเปนตองเลือกใช Text Window โดยเลือกเมนูคําสั่ง Insert, Media Element, Text ซึ่งจะปรากฏจอภาพการทํางานดังนี้ การทํางาน Text Window มีลักษณะเดียวกับการใชงาน Microsoft Word หมายเหตุ: ฟอนตที่ใชไดกับ Text Window จะเปนฟอนตตระกูล UPC หรือ JS, DS (ฟอนตเกา) เทานั้น
  • 24. 20 ตัวอักษร 3 มิติ โปรแกรมมีฟงกชันแปลงตัวอักษรปกติเปนตัวอักษร 3 มิติไดโดยพิมพขอความที่ตองการ (ควรเลือก ฟอนตและลักษณะใหหนา/ใหญ) จากนั้นเลือกรายการ Display ของ Text Properties เปน 3D Mode ปรับแตงลักษณะตัวอักษรไดจาก 3D Extruder Properties • Camera pos ตําแหนงที่แสดงรูปแบบ 3 มิติ • Rotation ทิศทางการหมุนในการแสดงผล • Face พื้นผิวหนาในการแสดงผล
  • 25. 21 • Smoothness ความนุมนวล • Tunnel Depth คามิติชวงลึก • Beval Amount คามุม • Bevel Edge รูปแบบขอบมุม • Light ทิศทางแสง • Directional สีของขอความ • Ambient สีมิติ • Background สีพื้นหลัง • Shader Textu… รูปแบบพื้นผิว • Diffuse สีรอบขอความ • Specular สีที่ใชในการตกกระทบ • Reflectivity คาการตกกระทบของสี
  • 26. 22 การฝงฟอนต เนื่องจากฟอนตที่ใชไดกับ Text Window เปนฟอนตตระกูล JS, DS ซึ่งไมใชฟอนตมาตรฐานของ คอมพิวเตอร หรือบางครั้งผูสรางสรรคผลงานอาจจะเลือกใชฟอนตอื่นๆ ที่ไมมีในเครื่องคอมพิวเตอรปกติ ซึ่ง อาจจะเกิดปญหาในการเรียกชมกับคอมพิวเตอรอื่นได จึงควรฝงฟอนตดังกลาวรวมไปกับผลงาน โดยเลือกเมนู คําสั่ง Insert, Media Element, Font… ปรากฏ Font Cast Member ดังนี้ เลือกฟอนตที่ตองการฝงที่รายการ Original Font เลือกลักษณะที่ตองการใช เชน ตัวหนา ตัวเอียงและ ขนาดที่ตองการในรายการ Bitmap เลือกรูปแบบการฝงทุกอักขระ (Entire Set) หรือเฉพาะอักขระที่ใชจริง (Partial Set) จากรายการ Characters หมายเหตุ: การฝงฟอนตรวมกับไฟลผลงาน จะทําใหไฟลผลงานมีขนาดโตขึ้น