SlideShare ist ein Scribd-Unternehmen logo
1 von 18
ฝึ กหัดวาดภาพ

        เม่ ือรู้จักโปรแกรมและเคร่ ือ งมือ ต่า งๆ ของ Flash แลูว ก็จะเขูา ส่้
บทเรียนฝึ กหัด วาดภาพ ซ่ึงมี หลั ก ท่ีไ ม่ย ากอย่า งท่ีคิด ขอใหูนึ ก ถึง หลั ก
“เช่ ือม ตัด ปรับเปล่ียน” เท่านั ้นก็พอ

แผนท่ี
       การวาดแผนท่ีแสดงเสูนทาง โดยอาศัยหลักการเช่ ือมและตัด




       • สรูางไฟล์ Flash กำาหนดขนาดของ Stage ตามตูองการ
       • เลือกเคร่ ืองมือวาดกรอบส่ีเหล่ียม คลิกป่ ่มควบค่มขอบมน
         ใน Tool Options       กำา หนดความมนของขอบประมาณ 40
         – 50 หน่ วย




       • เลือกสีเสูนขอบ สีพ้ืน และขนาดของเสูนขอบจาก Properties
         Panel




       • วาดกรอบส่ีเหล่ียมหลายๆ กรอบใหูมีลักษณะ ดังนี้
• จากภาพจะพบว่าเป็ นการนำ า กรอบส่ีเหล่ียมหลายขนาดมาวาง
  ซูอนกันทับ ลักษณะนี้ คือการใชูเทคนิ ค “เช่ ือม” การท่ีจะทำาใหู
  มี ลั ก ษณะเป็ นเสู น ทางแผนท่ี จะตู อ งตั ด ส่ ว นบางส่ ว นของ
  กรอบส่ีเหล่ียมออกไป ดังนี้


                 ส่วนท่ีตูองตัด
                     ทิง ้



• การตัดส่วนดังกล่าวทิง เร่ิมจากการเลือกเคร่ ืองมือ Selection
                      ้

• นำ า เมาส์ไ ปคลิก ณ ส่ ว นท่ีตู อ งการตั ด จะพบว่ า ส่ ว นท่ีเ ลื อ กมี
  ลักษณะเป็ น “จ่ดเล็กๆ หลายจ่ด” ดังตัวอย่าง




                                                 ส่วนท่ีตูองการลบ
                                                   คลิกเพ่ ือลบทิง
                                                                 ้

• จากนั ้นกดป่ ่ม = เพ่ ือลบส่วนท่ีเลือก จะปรากฏผลดังนี้




• ทำาซำากับส่วนอ่ ืน ท่ีตูองการลบ โดยการใชูเคร่ ืองมือ Selection
       ้
  เลือกก่อนแลูวกดป่ ่ม = เพ่ ือลบทิง เพ่ ือใหูไดูผลดังนี้
                                    ้
หน้ าคนจากวงกลมและเส้นตรง




วาดวงกลม               วาดเสูนตรงผ่าน    เลือกเคร่ ืองมือ Selection
                       ส่วนบนของ         เล่ ือนเมาส์ไปชีท่ีเสูนตรง
                                                          ้
                       วงกลมใน           ใหูเมาส์มีร้ปร่างเป็ น กด
                       ลักษณะเฉี ยงดัง   ป่ ่มเมาส์คูางไวู แลูวดึงใหู
                       ภาพ               เสูนมีลกษณะโคูง
                                                  ั




คลิกเลือกเสูนท่ีอย่นอก เลือกสีผม แลูว
                   ้                     วาดตา จม้ก และปากดูวย
วงกลม กดป่ ่ม = เพ่ ือ เติมสี            เคร่ ืองมือวาดเสูน หรือ
ลบทิง
    ้                                    ดินสอ แลูวปรับใหูมความ
                                                             ี
                                         โคูงตามตูองการ

หน้ าคนจากหลายๆ วัตถุ
เด็กชายสวมหมวก




เด็กหญิง




คนสูงอายุ




ดวงอาทิตย์
รองเท้าสเก็ต




ถุงเท้าเด็ก
หมวก




ใบไม้




ต้นคริสมาตส์
ต้นไม้




ต้นไม้




ดอกไม้




ดินสอ
ตุุกตาหมี




ฮิปโป
ผลไม้การ์ตูน




สตอร์เบอร์ร่ี
สร้างงานตามตัวอย่าง




       ในการสรูางงานขึ้นมาหน่งเร่ ืองหรือหน่ ึงชินงานนั ้นจะตูองนำ าเร่ ือง
                                     ึ                   ้
ท่ีจ ะสรู า งมาวิ เ คราะห์ ก่ อ นว่ า ในงานนั ้ น มี ก ่ีตั ว ละคร หรื อ ก่ีชิ น งาน
                                                                               ้
ประกอบขึ้นมา เพ่ ือใหูการทำา งานเป็ นไปอย่างรวดเร็วขึ้น ตามตัวอย่างท่ี
แสดงนั ้น จะประกอบไปดูวย 5 ชินงานดูวยกัน ไดูแก่
                                       ้
           1. ปลา
           2. ปลาดาว
           3. ตูนไมู
           4. ภ้เขา
           5. ฉากหลัง (Background)
      การสรูางชินงานนั ้นควรท่ีจะสรูางงานชินงานท่ีเล็กไปหาชินงานท่ี
                  ้                        ้                  ้
ใหญ่ ดังนั ้นจากร้ปควรท่ีจะสรูาง ปลา , ปลาดาว, ตูนไมู, ภ้เขา, พ้ืนหลัง
ตามลำาดับ

การสร้างตัวปลา
        การท่ีจะสรูางตัวปลาใหูสามารถขยับไดูนั้นจะตูองแบ่งชินงานนั ้ น
                                                               ้
ออกเป็ นส่วนๆ คือส่วนท่ีตูองขยับไดูแก่อะไรบูาง ก็จะตูองแบ่งชินงานนั ้น
                                                             ้
ออก ในท่ีนี้จะใหู ตา ปาก และหาง ขยับ โดยจะใหูแสดงผลเหมือ นปลา
กำาลังว่าย
สร้างตาของปลา
       1. สรูาง Symbol ขึ้นมาดูวยการกดป่ ่ม F8 หรือไปท่ีเมน้ Insert,
          New Symbol ตั ง ช่ ือ ข อ ง Symbol เ ป็ น eye แ ลู ว เ ลื อ ก
                           ้
          ประเภทของ Symbol เป็ น Movie Clip เน่ อ งจากตูอ งการใหู
                                                   ื
ต า ส า ม า ร ถ ข ยั บ ไ ดู




2. ในนำ าเมาส์มาคลิกท่ี เคร่ ืองมือ Oval Tool ปรับ
   ค่ณสมบัติของเคร่ ืองมือไดูแก่ สีเสูน ลักษณะของเสูนใหู
   เสูนเป็ นสีดำา สีพ้ืนเป็ นสีขวา



3. วาดวงกลมท่ีเ ลเยอร์ท่ี1 (เปล่ียนช่ ือ เลเยอร์1 เป็ น Body-
   eye) แลูวใหูคลิก Lock ท่ีแม่ก่ญแจ        เพ่ ือล็อคการแสดง
   ผล ไม่ใหูมีการเปล่ียนแปลง




4. เพ่ิม เลเยอร์ ท ่ี 2 แลู ว เปล่ีย นช่ ือ เป็ น eye เพ่ ือ สรู า งเป็ น
   ด ว ง ต า โ ด ย กำา ห น ด สี เ สู น แ ล ะ สี พ ้ืน เ ป็ น สี ดำา




5. ตูองทำาใหูดวงตาสามารถขยับไดูหรือกระพริบตา
6. ใหู เ พ่ิม Key Frame ท่ีเ ลเยอร์ eye โดยใหู สั ง เกตท่ีแ ถบ
   Time Line ในช่องท่ี 2 จะไม่มีจ่ดสีดำาๆ ใหูคลิกขวาท่ีช่องนี้
   เลือกคำาสัง Insert Key Frame
               ่




7. คลิกท่ีเคร่ ืองมือ Free Transform แลูวไปคลิกท่ีร้ปตา
   ในเลเยอร์ eye ซ่ึงโปรแกรมจะแสดงผลใหูอย่้แลูว แต่จะไม่
แสดงเลเยอร์ Body-eye เน่ อ งจากไดูล็อ ค Layer นี้ แลูว
                                   ื




       8. ปรับร้ปใหูเล็กโดยใหูเพ่ิม Key Frame ท่ี Time Line ท่ีละ
          เฟรม ประมาณ 10 เฟรมโดยในแต่ละเฟรมก็ใหูลดร้ปลงท่ี
          ละนิ ด




       9. ใหูคลิกท่ีเลเยอร์ Body-eye ไปท่ีเฟรมท่ี 10 คลิกขวาเลือก
          Insert Frame เพ่ ือใหูร้ปใน เลเยอร์นี้ แสดงผลพรูอ มกับ
          เลเยอร์ eye




       10.ทดสอบการแสดงผลดูวยการกดป่ ่ม SE

สร้างปากของปลา
       1. สรูาง Symbol ขึ้นมาใหม่ตังช่ ือเป็ น Mount เลือกประเภท
                                   ้
          เป็ น Movie clip
       2. คลิกท่ีเคร่ ืองมือ Oval Tool   โดยใหูเสูนเป็ นสีดำา สีพ้ืน
          เป็ นสีขวา ส่วนขนาดของเสูนยังคงเป็ น 10
       3. วาดวงกลมหรือวงรีบน Stage




       4. ปรับร้ปวงกลมหรือวงรี ใหูเป็ นร้ปปากโดยใหูคลิกท่ีเคร่ ือง
          มือ Selection Tool     ในการปรับใหูนำาเคร่ ืองมือนี้มาชีท่ี
                                                                   ้
ร้ป แลูวสังเกตเคร่ ืองมือนี้จะเปล่ียนเป็ น เม่ ือแสดง
          เคร่ ืองนี้เม่ ือไหร่ก็สามารถท่ีจะปรับร้ปร่างของวงกลมหรือ
          วงรีท่ีไดูสรูางขึ้น




       5. ต่อไปตูองการใหูปากขยับไดู ก็ใหูคลิกท่ีแถบ Timeline
          ช่องท่ีสอง คลิกขวาเลือก Insert Key Frame
       6. เม่ ือไดูเพ่ิม Key Frame แลูวใหูคลิกท่ีเคร่ ืองมือ Free
          Transform




       7. ปรับขนาดใหูเล็กลง
       8. เพ่ิม Key Frame ในช่องท่ีสาม บน Time Line
       9. ปรับขนาดใหูเล็กลงกว่าในขันตอนท่ี 7
                                   ้
       10.ทำาอย่างนี้ประมาณ 5 เฟรม



       11.ทดสอบการแสดงผลดูวยการกดป่ ่ม SE


สร้างหางปลา
       1. สรูาง Symbol ขึ้นมาใหม่ตังช่ ือเป็ น tail เลือกประเภทเป็ น
                                   ้
          Movie clip
       2. คลิกท่ีเคร่ ืองมือ Rectangle โดยใหูเสูนเป็ นสีดำา สีพ้ืน
          เป็ นสีเทา ส่วนขนาดของเสูน 4
       3. วาดส่ีเหล่ียมบน Stage




       4. คลิกท่ีเคร่ ืองมือ Selection Tool ปรับร้ปใหูมีลักษณะ
          เหมือนหาง
5. คลิกท่ีเคร่ ืองมือ Line Tool วาดเสูนลงบนหางปลา




        6. ต่อไปตูองการใหูหางขยับไดู ก็ใหูคลิกท่ีแถบ Timeline
           ช่องท่ีสอง คลิกขวาเลือก Insert Key Frame
        7. เม่ ือไดูเพ่ิม Key Frame แลูวใหูคลิกท่ีเคร่ ืองมือ Free
           Transform




        8. ปรับขนาดใหูเล็กลง ตามร้ปตัวอย่าง
        9. เพ่ิม Key Frame ในช่องท่ีสาม บน Time Line
        10.ปรับขนาดใหูเล็กลงกว่าในขันตอนท่ี 7
                                    ้
        11.ทำาอย่างนี้ประมาณ 6 เฟรม




        12.ทดสอบการแสดงผลดูวยการกดป่ ่ม SE


สร้างตัวปลา
        1. สรูาง Symbol ขึ้นมาใหม่ตังช่ ือเป็ น body เลือกประเภท
                                    ้
           เป็ น Movie clip
        2. คลิกท่ีเคร่ ืองมือ Oval Tool       โดยใหูเสูนเป็ นสีดำา สีพ้ืน
           เป็ นสีเท่า ส่วนขนาดของเสูน 4
        3. วาดวงรีบน Stage
4. คลิกท่ีเคร่ ืองมือ Selection Tool ปรับร้ปใหูมีลักษณะ
         เหมือนตัว
      5. คลิกเคร่ ืองมือ line tool วาดเสูนตรงตัดตัวปลา




      6. วาดคลีบปลา คลิกท่ีเคร่ ืองมือ line tool




ประกอบตัวปลา
      1. สรูาง Symbol ขึ้นมาใหม่ตังช่ ือเป็ น fish เลือกประเภทเป็ น
                                  ้
         Movie clip
      2. นำ าร้ปท่ีไดูสรูางขึ้นมาเขูามาใน stage ตามลำาดับดังนี้ โดย
         นำ าเขูามา 1 ร้ปต่อ 1 เลเยอร์




      3. ทดสอบโดยการกับไปท่ี Scene ลาก Symbol ใน Library
         ช่ ือ fish ท่ีไดูตังไวู มาไวูใน Stage แลูวกด CE
                            ้
สร้างปลาดาว
     1. สรูาง Symbol ขึ้นมาใหม่ตังช่ ือเป็ น dow เลือกประเภท
                                 ้
        เป็ น Movie clip
     2. คลิกท่ีเคร่ ืองมือ Polystar Tool         ไปท่ี Properties
        ของเคร่ ืองมือชินนี้
                          ้




     3. เลือก Option…
                                   Style          เลือกเป็ น Star
                                   Number of Sides กำาหนดแฉกของ
                                   ร้ป
                                   Star Point size       ปลายม่มมีความ
                                   หนาเท่าไหร่
     4. เม่ ือกำาหนดไดูแลูว คลิก OK
     5. กำาหนดสีตามท่ีตูองการ จาก Properties Panel
     6. ลงมือวาดร้ปวาดบน Stage




     7. ใส่ตา , จม้ก, ปาก เพ่ ือใหูด้มีชีวิตขึ้นมาดูวยเคร่ ืองมือ
        Brush Tools




     8. เม่ ือสรูางเสร็จแลูวใหูยูายร้ปมาอย่ท่ีตำาแหน่ ง 0, 0 ท่ี
                                           ้
        Properties Panel
9. ขันต่อไปตูองทำาใหูร้ปดาวสามารถขยับไดู ด้เหมือนมีชีวิต
              ้
         10.ใหู Insert Keyframe ท่ี Frame ท่ี 2



         11.ปรับร้ปดูวยเคร่ ืองมือ Selection Tools




         12.ทำาซำาท่ี Frame ท่ี 3, 4, 5 ต่อไปเร่ ือยๆ ถูาอยากใหูขยับ
                 ้
            มากก็เพ่ิม Frame ไปอีก



         13.ทดลองการแสดงผลดูวย SE

ต้นไม้
         1. สรูาง Symbol ขึ้นมาใหม่ตังช่ ือเป็ น Tree เลือกประเภท
                                     ้
            เป็ น Movie clip
         2. คลิกท่ีเคร่ ืองมือ Oval Tools ไปท่ี Properties ของเคร่ ือง
            มือชินนี้
                 ้
         3. เปล่ียนช่ ือ layer ท่ี Timeline ใหูมีช่ือว่า flowerpot
         4. ลักษณะของเสูนเป็ นแบบไม่มีเสูน สีพ้ืนมีสีเป็ นสีเขียว ปรับ
            ร้ปดูวยเคร่ ืองมือ Selection Tools ใหูมร้ปตามท่ีตูองการ
                                                   ี




         5. เม่ ือวาดเสร็จแลูวใหูคลิก lock ท่ีใตูรปก่ญแจของ Layer
                                                  ้
            flowerpot
6. เพ่ิม layer ท่ี 2 ตังช่ ือว่า tree โดยใชูเคร่ ืองมือ oval tools
                       ้
   สีเขียวเหมือนเดิม แลูววาดตูนไมูขึ้นมา




7. ไปท่ี Layer ของ flowerpot จากนั ้นเพ่ิม Frame ป่ าวใหู
   กับ layer นี้ ในท่ีนี้ใหูเพ่ิมท่ี Frame ท่ี 5 ดูวยการคลิกขวา
   ท่ี Frame ท่ี 5 ของ layer นี้ จากนั ้นคลิกขวาเลือก Insert
   Frame
8. ไปท่ี Layer ของ tree (ใหูสังเกตว่าจะตูองไม่มีร้ปแม่ก่ญแจ
   ขึ้นมาถูามีขอใหูคลิกท่ีแม่ก่ญแจเพ่ ือทำาใหูร้ปแม่ก่ญแจหาย
   ไปถึงจะสามารถทำางานท่ี layer นี้ไดู
9. คลิกขวาท่ี Frame ท่ี 2 ของ layer tree เลือก Insert
   Keyframe

Weitere ähnliche Inhalte

Ähnlich wie Flash Workshop Fish

คู่มือประกอบการสร้าง E book
คู่มือประกอบการสร้าง E bookคู่มือประกอบการสร้าง E book
คู่มือประกอบการสร้าง E bookBeebe Benjamast
 
สอน Flash
สอน Flashสอน Flash
สอน FlashPor Oraya
 
คู่มือประกอบการสร้าง E book
คู่มือประกอบการสร้าง E bookคู่มือประกอบการสร้าง E book
คู่มือประกอบการสร้าง E bookBeebe Benjamast
 
คู่มือประกอบการสร้าง E book
คู่มือประกอบการสร้าง E bookคู่มือประกอบการสร้าง E book
คู่มือประกอบการสร้าง E bookBeebe Benjamast
 
คู่มือประกอบการสร้าง E book
คู่มือประกอบการสร้าง E bookคู่มือประกอบการสร้าง E book
คู่มือประกอบการสร้าง E bookBeebe Benjamast
 
ตัวอย่างแผนการสอนด้วย OSS & Freeware
ตัวอย่างแผนการสอนด้วย OSS & Freewareตัวอย่างแผนการสอนด้วย OSS & Freeware
ตัวอย่างแผนการสอนด้วย OSS & FreewareBoonlert Aroonpiboon
 
การสร้างแบรนเนอร์อย่างง่าย
การสร้างแบรนเนอร์อย่างง่ายการสร้างแบรนเนอร์อย่างง่าย
การสร้างแบรนเนอร์อย่างง่ายsa_jaimun
 
Lesson 3 การทำงานของเต่าโลโก
Lesson 3 การทำงานของเต่าโลโกLesson 3 การทำงานของเต่าโลโก
Lesson 3 การทำงานของเต่าโลโกErrorrrrr
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์Suthida23
 
คู่มือการใช้โปรแกรม ActivInspire บน Active Board
คู่มือการใช้โปรแกรม ActivInspire บน Active Boardคู่มือการใช้โปรแกรม ActivInspire บน Active Board
คู่มือการใช้โปรแกรม ActivInspire บน Active Boardmansuang1978
 
Dc282 interaction
Dc282 interactionDc282 interaction
Dc282 interactionajpeerawich
 

Ähnlich wie Flash Workshop Fish (20)

20070204 flipalbum6
20070204 flipalbum620070204 flipalbum6
20070204 flipalbum6
 
20070204 flipalbum6
20070204 flipalbum620070204 flipalbum6
20070204 flipalbum6
 
How to use WORD
How to use WORDHow to use WORD
How to use WORD
 
Lesson5
Lesson5Lesson5
Lesson5
 
คู่มือประกอบการสร้าง E book
คู่มือประกอบการสร้าง E bookคู่มือประกอบการสร้าง E book
คู่มือประกอบการสร้าง E book
 
สอน Flash
สอน Flashสอน Flash
สอน Flash
 
คู่มือประกอบการสร้าง E book
คู่มือประกอบการสร้าง E bookคู่มือประกอบการสร้าง E book
คู่มือประกอบการสร้าง E book
 
คู่มือประกอบการสร้าง E book
คู่มือประกอบการสร้าง E bookคู่มือประกอบการสร้าง E book
คู่มือประกอบการสร้าง E book
 
คู่มือประกอบการสร้าง E book
คู่มือประกอบการสร้าง E bookคู่มือประกอบการสร้าง E book
คู่มือประกอบการสร้าง E book
 
flash jigsaw
flash jigsawflash jigsaw
flash jigsaw
 
ตัวอย่างแผนการสอนด้วย OSS & Freeware
ตัวอย่างแผนการสอนด้วย OSS & Freewareตัวอย่างแผนการสอนด้วย OSS & Freeware
ตัวอย่างแผนการสอนด้วย OSS & Freeware
 
การสร้างแบรนเนอร์อย่างง่าย
การสร้างแบรนเนอร์อย่างง่ายการสร้างแบรนเนอร์อย่างง่าย
การสร้างแบรนเนอร์อย่างง่าย
 
Lesson 3 การทำงานของเต่าโลโก
Lesson 3 การทำงานของเต่าโลโกLesson 3 การทำงานของเต่าโลโก
Lesson 3 การทำงานของเต่าโลโก
 
Lesson5
Lesson5Lesson5
Lesson5
 
animation-gif-by-firework
animation-gif-by-fireworkanimation-gif-by-firework
animation-gif-by-firework
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
 
คู่มือการใช้โปรแกรม ActivInspire บน Active Board
คู่มือการใช้โปรแกรม ActivInspire บน Active Boardคู่มือการใช้โปรแกรม ActivInspire บน Active Board
คู่มือการใช้โปรแกรม ActivInspire บน Active Board
 
Lesson3
Lesson3Lesson3
Lesson3
 
Photoshop
PhotoshopPhotoshop
Photoshop
 
Dc282 interaction
Dc282 interactionDc282 interaction
Dc282 interaction
 

Mehr von Invest Ment

20190501 ratchakitcha-136-57-page-8-41
20190501 ratchakitcha-136-57-page-8-4120190501 ratchakitcha-136-57-page-8-41
20190501 ratchakitcha-136-57-page-8-41Invest Ment
 
20160122 ratchakitcha-12
20160122 ratchakitcha-1220160122 ratchakitcha-12
20160122 ratchakitcha-12Invest Ment
 
20150208 reference
20150208 reference20150208 reference
20150208 referenceInvest Ment
 
20110219 zotero-writer
20110219 zotero-writer20110219 zotero-writer
20110219 zotero-writerInvest Ment
 
20141105 stks-training
20141105 stks-training20141105 stks-training
20141105 stks-trainingInvest Ment
 
20141015 mail-merge-libreoffice
20141015 mail-merge-libreoffice20141015 mail-merge-libreoffice
20141015 mail-merge-libreofficeInvest Ment
 
20130814 library-buu
20130814 library-buu20130814 library-buu
20130814 library-buuInvest Ment
 
Flood nstda-bt-22112554
Flood nstda-bt-22112554Flood nstda-bt-22112554
Flood nstda-bt-22112554Invest Ment
 
20110722 national site license
20110722 national site license20110722 national site license
20110722 national site licenseInvest Ment
 
Swe20100820 ct present
Swe20100820 ct presentSwe20100820 ct present
Swe20100820 ct presentInvest Ment
 
20100820 citationthailand stks
20100820 citationthailand stks20100820 citationthailand stks
20100820 citationthailand stksInvest Ment
 
20090911 Q Cop Iqa
20090911 Q Cop Iqa20090911 Q Cop Iqa
20090911 Q Cop IqaInvest Ment
 
2009 11 11 Pm Kwtc Report52
2009 11 11 Pm Kwtc Report522009 11 11 Pm Kwtc Report52
2009 11 11 Pm Kwtc Report52Invest Ment
 
20070505 Cd Offline
20070505 Cd Offline20070505 Cd Offline
20070505 Cd OfflineInvest Ment
 
Setec 002b Softwarearchitecture Poster R1
Setec 002b Softwarearchitecture Poster R1Setec 002b Softwarearchitecture Poster R1
Setec 002b Softwarearchitecture Poster R1Invest Ment
 

Mehr von Invest Ment (20)

20190501 ratchakitcha-136-57-page-8-41
20190501 ratchakitcha-136-57-page-8-4120190501 ratchakitcha-136-57-page-8-41
20190501 ratchakitcha-136-57-page-8-41
 
20160122 ratchakitcha-12
20160122 ratchakitcha-1220160122 ratchakitcha-12
20160122 ratchakitcha-12
 
20150208 reference
20150208 reference20150208 reference
20150208 reference
 
20110219 zotero-writer
20110219 zotero-writer20110219 zotero-writer
20110219 zotero-writer
 
20141105 stks-training
20141105 stks-training20141105 stks-training
20141105 stks-training
 
20141015 mail-merge-libreoffice
20141015 mail-merge-libreoffice20141015 mail-merge-libreoffice
20141015 mail-merge-libreoffice
 
20130814 library-buu
20130814 library-buu20130814 library-buu
20130814 library-buu
 
Flood nstda-bt-22112554
Flood nstda-bt-22112554Flood nstda-bt-22112554
Flood nstda-bt-22112554
 
Nstda 55 final
Nstda 55 finalNstda 55 final
Nstda 55 final
 
20110722 national site license
20110722 national site license20110722 national site license
20110722 national site license
 
Swe20100820 ct present
Swe20100820 ct presentSwe20100820 ct present
Swe20100820 ct present
 
20100820 citationthailand stks
20100820 citationthailand stks20100820 citationthailand stks
20100820 citationthailand stks
 
20090911 Q Cop Iqa
20090911 Q Cop Iqa20090911 Q Cop Iqa
20090911 Q Cop Iqa
 
2009 11 11 Pm Kwtc Report52
2009 11 11 Pm Kwtc Report522009 11 11 Pm Kwtc Report52
2009 11 11 Pm Kwtc Report52
 
20070505 Cd Offline
20070505 Cd Offline20070505 Cd Offline
20070505 Cd Offline
 
botany
botanybotany
botany
 
botany
botanybotany
botany
 
oss
ossoss
oss
 
oss
ossoss
oss
 
Setec 002b Softwarearchitecture Poster R1
Setec 002b Softwarearchitecture Poster R1Setec 002b Softwarearchitecture Poster R1
Setec 002b Softwarearchitecture Poster R1
 

Flash Workshop Fish

  • 1. ฝึ กหัดวาดภาพ เม่ ือรู้จักโปรแกรมและเคร่ ือ งมือ ต่า งๆ ของ Flash แลูว ก็จะเขูา ส่้ บทเรียนฝึ กหัด วาดภาพ ซ่ึงมี หลั ก ท่ีไ ม่ย ากอย่า งท่ีคิด ขอใหูนึ ก ถึง หลั ก “เช่ ือม ตัด ปรับเปล่ียน” เท่านั ้นก็พอ แผนท่ี การวาดแผนท่ีแสดงเสูนทาง โดยอาศัยหลักการเช่ ือมและตัด • สรูางไฟล์ Flash กำาหนดขนาดของ Stage ตามตูองการ • เลือกเคร่ ืองมือวาดกรอบส่ีเหล่ียม คลิกป่ ่มควบค่มขอบมน ใน Tool Options กำา หนดความมนของขอบประมาณ 40 – 50 หน่ วย • เลือกสีเสูนขอบ สีพ้ืน และขนาดของเสูนขอบจาก Properties Panel • วาดกรอบส่ีเหล่ียมหลายๆ กรอบใหูมีลักษณะ ดังนี้
  • 2. • จากภาพจะพบว่าเป็ นการนำ า กรอบส่ีเหล่ียมหลายขนาดมาวาง ซูอนกันทับ ลักษณะนี้ คือการใชูเทคนิ ค “เช่ ือม” การท่ีจะทำาใหู มี ลั ก ษณะเป็ นเสู น ทางแผนท่ี จะตู อ งตั ด ส่ ว นบางส่ ว นของ กรอบส่ีเหล่ียมออกไป ดังนี้ ส่วนท่ีตูองตัด ทิง ้ • การตัดส่วนดังกล่าวทิง เร่ิมจากการเลือกเคร่ ืองมือ Selection ้ • นำ า เมาส์ไ ปคลิก ณ ส่ ว นท่ีตู อ งการตั ด จะพบว่ า ส่ ว นท่ีเ ลื อ กมี ลักษณะเป็ น “จ่ดเล็กๆ หลายจ่ด” ดังตัวอย่าง ส่วนท่ีตูองการลบ คลิกเพ่ ือลบทิง ้ • จากนั ้นกดป่ ่ม = เพ่ ือลบส่วนท่ีเลือก จะปรากฏผลดังนี้ • ทำาซำากับส่วนอ่ ืน ท่ีตูองการลบ โดยการใชูเคร่ ืองมือ Selection ้ เลือกก่อนแลูวกดป่ ่ม = เพ่ ือลบทิง เพ่ ือใหูไดูผลดังนี้ ้
  • 3. หน้ าคนจากวงกลมและเส้นตรง วาดวงกลม วาดเสูนตรงผ่าน เลือกเคร่ ืองมือ Selection ส่วนบนของ เล่ ือนเมาส์ไปชีท่ีเสูนตรง ้ วงกลมใน ใหูเมาส์มีร้ปร่างเป็ น กด ลักษณะเฉี ยงดัง ป่ ่มเมาส์คูางไวู แลูวดึงใหู ภาพ เสูนมีลกษณะโคูง ั คลิกเลือกเสูนท่ีอย่นอก เลือกสีผม แลูว ้ วาดตา จม้ก และปากดูวย วงกลม กดป่ ่ม = เพ่ ือ เติมสี เคร่ ืองมือวาดเสูน หรือ ลบทิง ้ ดินสอ แลูวปรับใหูมความ ี โคูงตามตูองการ หน้ าคนจากหลายๆ วัตถุ
  • 10. สร้างงานตามตัวอย่าง ในการสรูางงานขึ้นมาหน่งเร่ ืองหรือหน่ ึงชินงานนั ้นจะตูองนำ าเร่ ือง ึ ้ ท่ีจ ะสรู า งมาวิ เ คราะห์ ก่ อ นว่ า ในงานนั ้ น มี ก ่ีตั ว ละคร หรื อ ก่ีชิ น งาน ้ ประกอบขึ้นมา เพ่ ือใหูการทำา งานเป็ นไปอย่างรวดเร็วขึ้น ตามตัวอย่างท่ี แสดงนั ้น จะประกอบไปดูวย 5 ชินงานดูวยกัน ไดูแก่ ้ 1. ปลา 2. ปลาดาว 3. ตูนไมู 4. ภ้เขา 5. ฉากหลัง (Background) การสรูางชินงานนั ้นควรท่ีจะสรูางงานชินงานท่ีเล็กไปหาชินงานท่ี ้ ้ ้ ใหญ่ ดังนั ้นจากร้ปควรท่ีจะสรูาง ปลา , ปลาดาว, ตูนไมู, ภ้เขา, พ้ืนหลัง ตามลำาดับ การสร้างตัวปลา การท่ีจะสรูางตัวปลาใหูสามารถขยับไดูนั้นจะตูองแบ่งชินงานนั ้ น ้ ออกเป็ นส่วนๆ คือส่วนท่ีตูองขยับไดูแก่อะไรบูาง ก็จะตูองแบ่งชินงานนั ้น ้ ออก ในท่ีนี้จะใหู ตา ปาก และหาง ขยับ โดยจะใหูแสดงผลเหมือ นปลา กำาลังว่าย สร้างตาของปลา 1. สรูาง Symbol ขึ้นมาดูวยการกดป่ ่ม F8 หรือไปท่ีเมน้ Insert, New Symbol ตั ง ช่ ือ ข อ ง Symbol เ ป็ น eye แ ลู ว เ ลื อ ก ้ ประเภทของ Symbol เป็ น Movie Clip เน่ อ งจากตูอ งการใหู ื
  • 11. ต า ส า ม า ร ถ ข ยั บ ไ ดู 2. ในนำ าเมาส์มาคลิกท่ี เคร่ ืองมือ Oval Tool ปรับ ค่ณสมบัติของเคร่ ืองมือไดูแก่ สีเสูน ลักษณะของเสูนใหู เสูนเป็ นสีดำา สีพ้ืนเป็ นสีขวา 3. วาดวงกลมท่ีเ ลเยอร์ท่ี1 (เปล่ียนช่ ือ เลเยอร์1 เป็ น Body- eye) แลูวใหูคลิก Lock ท่ีแม่ก่ญแจ เพ่ ือล็อคการแสดง ผล ไม่ใหูมีการเปล่ียนแปลง 4. เพ่ิม เลเยอร์ ท ่ี 2 แลู ว เปล่ีย นช่ ือ เป็ น eye เพ่ ือ สรู า งเป็ น ด ว ง ต า โ ด ย กำา ห น ด สี เ สู น แ ล ะ สี พ ้ืน เ ป็ น สี ดำา 5. ตูองทำาใหูดวงตาสามารถขยับไดูหรือกระพริบตา 6. ใหู เ พ่ิม Key Frame ท่ีเ ลเยอร์ eye โดยใหู สั ง เกตท่ีแ ถบ Time Line ในช่องท่ี 2 จะไม่มีจ่ดสีดำาๆ ใหูคลิกขวาท่ีช่องนี้ เลือกคำาสัง Insert Key Frame ่ 7. คลิกท่ีเคร่ ืองมือ Free Transform แลูวไปคลิกท่ีร้ปตา ในเลเยอร์ eye ซ่ึงโปรแกรมจะแสดงผลใหูอย่้แลูว แต่จะไม่
  • 12. แสดงเลเยอร์ Body-eye เน่ อ งจากไดูล็อ ค Layer นี้ แลูว ื 8. ปรับร้ปใหูเล็กโดยใหูเพ่ิม Key Frame ท่ี Time Line ท่ีละ เฟรม ประมาณ 10 เฟรมโดยในแต่ละเฟรมก็ใหูลดร้ปลงท่ี ละนิ ด 9. ใหูคลิกท่ีเลเยอร์ Body-eye ไปท่ีเฟรมท่ี 10 คลิกขวาเลือก Insert Frame เพ่ ือใหูร้ปใน เลเยอร์นี้ แสดงผลพรูอ มกับ เลเยอร์ eye 10.ทดสอบการแสดงผลดูวยการกดป่ ่ม SE สร้างปากของปลา 1. สรูาง Symbol ขึ้นมาใหม่ตังช่ ือเป็ น Mount เลือกประเภท ้ เป็ น Movie clip 2. คลิกท่ีเคร่ ืองมือ Oval Tool โดยใหูเสูนเป็ นสีดำา สีพ้ืน เป็ นสีขวา ส่วนขนาดของเสูนยังคงเป็ น 10 3. วาดวงกลมหรือวงรีบน Stage 4. ปรับร้ปวงกลมหรือวงรี ใหูเป็ นร้ปปากโดยใหูคลิกท่ีเคร่ ือง มือ Selection Tool ในการปรับใหูนำาเคร่ ืองมือนี้มาชีท่ี ้
  • 13. ร้ป แลูวสังเกตเคร่ ืองมือนี้จะเปล่ียนเป็ น เม่ ือแสดง เคร่ ืองนี้เม่ ือไหร่ก็สามารถท่ีจะปรับร้ปร่างของวงกลมหรือ วงรีท่ีไดูสรูางขึ้น 5. ต่อไปตูองการใหูปากขยับไดู ก็ใหูคลิกท่ีแถบ Timeline ช่องท่ีสอง คลิกขวาเลือก Insert Key Frame 6. เม่ ือไดูเพ่ิม Key Frame แลูวใหูคลิกท่ีเคร่ ืองมือ Free Transform 7. ปรับขนาดใหูเล็กลง 8. เพ่ิม Key Frame ในช่องท่ีสาม บน Time Line 9. ปรับขนาดใหูเล็กลงกว่าในขันตอนท่ี 7 ้ 10.ทำาอย่างนี้ประมาณ 5 เฟรม 11.ทดสอบการแสดงผลดูวยการกดป่ ่ม SE สร้างหางปลา 1. สรูาง Symbol ขึ้นมาใหม่ตังช่ ือเป็ น tail เลือกประเภทเป็ น ้ Movie clip 2. คลิกท่ีเคร่ ืองมือ Rectangle โดยใหูเสูนเป็ นสีดำา สีพ้ืน เป็ นสีเทา ส่วนขนาดของเสูน 4 3. วาดส่ีเหล่ียมบน Stage 4. คลิกท่ีเคร่ ืองมือ Selection Tool ปรับร้ปใหูมีลักษณะ เหมือนหาง
  • 14. 5. คลิกท่ีเคร่ ืองมือ Line Tool วาดเสูนลงบนหางปลา 6. ต่อไปตูองการใหูหางขยับไดู ก็ใหูคลิกท่ีแถบ Timeline ช่องท่ีสอง คลิกขวาเลือก Insert Key Frame 7. เม่ ือไดูเพ่ิม Key Frame แลูวใหูคลิกท่ีเคร่ ืองมือ Free Transform 8. ปรับขนาดใหูเล็กลง ตามร้ปตัวอย่าง 9. เพ่ิม Key Frame ในช่องท่ีสาม บน Time Line 10.ปรับขนาดใหูเล็กลงกว่าในขันตอนท่ี 7 ้ 11.ทำาอย่างนี้ประมาณ 6 เฟรม 12.ทดสอบการแสดงผลดูวยการกดป่ ่ม SE สร้างตัวปลา 1. สรูาง Symbol ขึ้นมาใหม่ตังช่ ือเป็ น body เลือกประเภท ้ เป็ น Movie clip 2. คลิกท่ีเคร่ ืองมือ Oval Tool โดยใหูเสูนเป็ นสีดำา สีพ้ืน เป็ นสีเท่า ส่วนขนาดของเสูน 4 3. วาดวงรีบน Stage
  • 15. 4. คลิกท่ีเคร่ ืองมือ Selection Tool ปรับร้ปใหูมีลักษณะ เหมือนตัว 5. คลิกเคร่ ืองมือ line tool วาดเสูนตรงตัดตัวปลา 6. วาดคลีบปลา คลิกท่ีเคร่ ืองมือ line tool ประกอบตัวปลา 1. สรูาง Symbol ขึ้นมาใหม่ตังช่ ือเป็ น fish เลือกประเภทเป็ น ้ Movie clip 2. นำ าร้ปท่ีไดูสรูางขึ้นมาเขูามาใน stage ตามลำาดับดังนี้ โดย นำ าเขูามา 1 ร้ปต่อ 1 เลเยอร์ 3. ทดสอบโดยการกับไปท่ี Scene ลาก Symbol ใน Library ช่ ือ fish ท่ีไดูตังไวู มาไวูใน Stage แลูวกด CE ้
  • 16. สร้างปลาดาว 1. สรูาง Symbol ขึ้นมาใหม่ตังช่ ือเป็ น dow เลือกประเภท ้ เป็ น Movie clip 2. คลิกท่ีเคร่ ืองมือ Polystar Tool ไปท่ี Properties ของเคร่ ืองมือชินนี้ ้ 3. เลือก Option… Style เลือกเป็ น Star Number of Sides กำาหนดแฉกของ ร้ป Star Point size ปลายม่มมีความ หนาเท่าไหร่ 4. เม่ ือกำาหนดไดูแลูว คลิก OK 5. กำาหนดสีตามท่ีตูองการ จาก Properties Panel 6. ลงมือวาดร้ปวาดบน Stage 7. ใส่ตา , จม้ก, ปาก เพ่ ือใหูด้มีชีวิตขึ้นมาดูวยเคร่ ืองมือ Brush Tools 8. เม่ ือสรูางเสร็จแลูวใหูยูายร้ปมาอย่ท่ีตำาแหน่ ง 0, 0 ท่ี ้ Properties Panel
  • 17. 9. ขันต่อไปตูองทำาใหูร้ปดาวสามารถขยับไดู ด้เหมือนมีชีวิต ้ 10.ใหู Insert Keyframe ท่ี Frame ท่ี 2 11.ปรับร้ปดูวยเคร่ ืองมือ Selection Tools 12.ทำาซำาท่ี Frame ท่ี 3, 4, 5 ต่อไปเร่ ือยๆ ถูาอยากใหูขยับ ้ มากก็เพ่ิม Frame ไปอีก 13.ทดลองการแสดงผลดูวย SE ต้นไม้ 1. สรูาง Symbol ขึ้นมาใหม่ตังช่ ือเป็ น Tree เลือกประเภท ้ เป็ น Movie clip 2. คลิกท่ีเคร่ ืองมือ Oval Tools ไปท่ี Properties ของเคร่ ือง มือชินนี้ ้ 3. เปล่ียนช่ ือ layer ท่ี Timeline ใหูมีช่ือว่า flowerpot 4. ลักษณะของเสูนเป็ นแบบไม่มีเสูน สีพ้ืนมีสีเป็ นสีเขียว ปรับ ร้ปดูวยเคร่ ืองมือ Selection Tools ใหูมร้ปตามท่ีตูองการ ี 5. เม่ ือวาดเสร็จแลูวใหูคลิก lock ท่ีใตูรปก่ญแจของ Layer ้ flowerpot
  • 18. 6. เพ่ิม layer ท่ี 2 ตังช่ ือว่า tree โดยใชูเคร่ ืองมือ oval tools ้ สีเขียวเหมือนเดิม แลูววาดตูนไมูขึ้นมา 7. ไปท่ี Layer ของ flowerpot จากนั ้นเพ่ิม Frame ป่ าวใหู กับ layer นี้ ในท่ีนี้ใหูเพ่ิมท่ี Frame ท่ี 5 ดูวยการคลิกขวา ท่ี Frame ท่ี 5 ของ layer นี้ จากนั ้นคลิกขวาเลือก Insert Frame 8. ไปท่ี Layer ของ tree (ใหูสังเกตว่าจะตูองไม่มีร้ปแม่ก่ญแจ ขึ้นมาถูามีขอใหูคลิกท่ีแม่ก่ญแจเพ่ ือทำาใหูร้ปแม่ก่ญแจหาย ไปถึงจะสามารถทำางานท่ี layer นี้ไดู 9. คลิกขวาท่ี Frame ท่ี 2 ของ layer tree เลือก Insert Keyframe