หน้าแรก
  • user warning: Table 'cache_filter' is marked as crashed and should be repaired query: SELECT data, created, headers, expire, serialized FROM cache_filter WHERE cid = '3:57a9460c4b9f48ffd51fff5b81ae798e' in /home/tgv/htdocs/includes/cache.inc on line 27.
  • user warning: Table 'cache_filter' is marked as crashed and should be repaired query: UPDATE cache_filter SET data = '<!--paging_filter--><p>\n<span style=\"color: #800000\"><span style=\"color: #000000\"><strong> </strong></span></span><span style=\"background-color: #999999\"><span style=\"color: #800000\"><span style=\"color: #000000\"><strong>เทคนิคก<span class=\"style1\">าร Mask และสร้างการเคลื่อนไหวให้กับ Mask Layer</span></strong></span></span><br />\n</span>     เทคนิคการทำ Mask คือการบังส่วนที่ไม่ต้องการให้เห็นไว้ และโชว์เฉพาะส่วนที่ต้องการ ลักษณะเดียวกับการส่องไฟ<br />\nไปที่วัตถุ ในความมืด ซึ่งจะเห็นวัตถุเฉพาะบริเวณที่ไฟส่องเท่านั้น ลองศึกษาขั้นตอนการทำงานดังต่อไปนี้ครับ\n</p>\n<p>\n     ขั้นที่ 1 เขียนวัตถุ หรือนำภาพที่ต้องการที่ เฟรมแรก ของ Layer 1(ภาพที่ 1)\n</p>\n<p>\n                                            <img height=\"196\" width=\"250\" src=\"/files/u21018/picture1.gif\" border=\"0\" /><br />\n<span class=\"green0\">                                                                          ภาพที่ 1 </span>\n</p>\n<p>\n        ขั้นที่ 2 เพิ่ม Layer โดยคลิกสัญลักษณ์หมายเลข 1 ภาพที่ 2 แล้วเขียนรูปทรงส่วนที่จะไม่บัง (ส่วนที่เป็นไฟส่อง) ตามตัวอย่างเป็นรูปทรงวงกลม โดยเขียนที่ Layer 2 (หมายเลข 2 ภาพที่ 2)\n</p>\n<p align=\"center\">\n<img height=\"276\" width=\"190\" src=\"/files/u21018/picture2.gif\" border=\"0\" /><br />\n<span class=\"green0\">ภาพที่ 2 </span>\n</p>\n<p>\n       ขั้นที่ 3 ทำ Mask โดยคลิกขวาที่ Layer รูปทรงในช่องของ Layer (หมายเลข 3 ภาพที่ 3)<br />\n(หมายเลข 4 ภาพที่ 3) และจะเกิด Mask ( ภาพที่ 4 )\n</p>\n<p align=\"center\">\n <img height=\"285\" width=\"200\" src=\"/files/u21018/picture3.gif\" border=\"0\" /> <br />\n<span class=\"green0\">ภาพที่ 3 </span>\n</p>\n<p align=\"center\">\n<img height=\"218\" width=\"180\" src=\"/files/u21018/picture4.gif\" border=\"0\" /><br />\n<span class=\"green0\"><br />\nภาพที่ 4 </span></p>\n<p>\n</p>\n<p><span class=\"green0\"></span></p>\n<p align=\"left\" class=\"bgyellow\">\n<span style=\"color: #800000\"><strong>สร้างการเคลื่อนไหวให้กับ Mask Layer</strong></span>\n</p>\n<p align=\"left\">\n       ขั้นที่ 1 ปลดล็อก Layer รูปทรง (ตามตัวอย่างคือรูปวงกลม) โดยคลิกที่สัญลักษณ์รูปกุญแจ ( หมายเลข 5 ภาพที่ 5 )\n</p>\n<p align=\"center\">\n<img height=\"255\" width=\"190\" src=\"/files/u21018/picture5.gif\" border=\"0\" /><br />\n<span class=\"green0\"><br />\nภาพที่ 5 </span></p>\n<p>\n</p>\n<p><span class=\"green0\"></span></p>\n<p align=\"left\">\n         ขั้นที่ 2 สร้าง Motion ที่ Layer วงกลม โดยคลิกขวาเฟรมแรก และคลิก Create Motion Tween ( หมายเลข 6 ภาพที่ 6 )\n</p>\n<p>                                                  <img height=\"168\" width=\"250\" src=\"/files/u21018/picture6.gif\" border=\"0\" /><br />\n<span class=\"green0\">                                                                             ภาพที่ 6 </span></p>\n<p><span class=\"green0\"></span></p>\n<p>\n        ขั้นที่ 3 กำหนดระยะห่าง แล้วสร้างคีย์เฟรม ตามตัวอย่างกำหนดระยะห่าง 40 เฟรม โดยกด F6 ที่ Layer ล่างก่อน (หมายเลข 7 ภาพที่ 7) และ กด F6 ที่ Layer วงกลม ให้ยาวเท่ากัน (หมายเลข 8 ภาพที่ 7)\n</p>\n<p>                                       <img height=\"128\" width=\"300\" src=\"/files/u21018/picture7.gif\" border=\"0\" /><br />\n<span class=\"green0\"><br />\n                                                                       ภาพที่ 7 </span></p>\n<p>             ขั้นที่ 4 จับรูปทรง (รูปวงกลม) เลื่อนไปตำแหน่งอื่น หรือขยายรูปให้มีขนาดใหญ่ขึ้นตามต้องการ (หมายเลข 9 ภาพที่ 8)</p>\n<p><span class=\"green0\"></span></p>\n<div style=\"text-align: center\">\n<img height=\"281\" width=\"400\" src=\"/files/u21018/picture8.gif\" border=\"0\" /> \n</div>\n<p>                                                                         ภาพที่ 8 <br />\n           <br />\n      ขั้นที่ 5 ล็อก Layer รูปวงกลมตามเดิม (หมายเลข 10 ภาพที่ 9 ) </p>\n<p>                                                                <img height=\"127\" width=\"102\" src=\"/files/u21018/picture9.gif\" border=\"0\" /></p>\n<p><strong>                                 เมื่อกด Ctrl+Enter สังให้เล่นหัวอ่าน(Playhead) จะได้ผลลัพธ์ ดังนี้</strong> </p>\n<p>                                              <img height=\"75\" width=\"160\" src=\"/files/u21018/ex29.gif\" border=\"0\" style=\"width: 264px; height: 113px\" /> </p>\n<p>           </p>\n<p>                                                                                                                                <a href=\"/node/45996?page=0%2C0\"><strong>&lt;&lt; กลับหน้าหลัก</strong><br />\n</a></p>\n', created = 1715657468, expire = 1715743868, headers = '', serialized = 0 WHERE cid = '3:57a9460c4b9f48ffd51fff5b81ae798e' in /home/tgv/htdocs/includes/cache.inc on line 112.

การสร้างภาพเคลื่อนไหวโดยโปรแกรม flash

เมื่อ จันทร์, 23/11/2009 - 15:03 | แก้ไขล่าสุด พุธ, 22/09/2010 - 11:05| โดย sp2520

 เทคนิคการ Mask และสร้างการเคลื่อนไหวให้กับ Mask Layer
     เทคนิคการทำ Mask คือการบังส่วนที่ไม่ต้องการให้เห็นไว้ และโชว์เฉพาะส่วนที่ต้องการ ลักษณะเดียวกับการส่องไฟ
ไปที่วัตถุ ในความมืด ซึ่งจะเห็นวัตถุเฉพาะบริเวณที่ไฟส่องเท่านั้น ลองศึกษาขั้นตอนการทำงานดังต่อไปนี้ครับ

     ขั้นที่ 1 เขียนวัตถุ หรือนำภาพที่ต้องการที่ เฟรมแรก ของ Layer 1(ภาพที่ 1)

                                            
                                                                          ภาพที่ 1

        ขั้นที่ 2 เพิ่ม Layer โดยคลิกสัญลักษณ์หมายเลข 1 ภาพที่ 2 แล้วเขียนรูปทรงส่วนที่จะไม่บัง (ส่วนที่เป็นไฟส่อง) ตามตัวอย่างเป็นรูปทรงวงกลม โดยเขียนที่ Layer 2 (หมายเลข 2 ภาพที่ 2)


ภาพที่ 2

       ขั้นที่ 3 ทำ Mask โดยคลิกขวาที่ Layer รูปทรงในช่องของ Layer (หมายเลข 3 ภาพที่ 3)
(หมายเลข 4 ภาพที่ 3) และจะเกิด Mask ( ภาพที่ 4 )

  
ภาพที่ 3



ภาพที่ 4

สร้างการเคลื่อนไหวให้กับ Mask Layer

       ขั้นที่ 1 ปลดล็อก Layer รูปทรง (ตามตัวอย่างคือรูปวงกลม) โดยคลิกที่สัญลักษณ์รูปกุญแจ ( หมายเลข 5 ภาพที่ 5 )



ภาพที่ 5

         ขั้นที่ 2 สร้าง Motion ที่ Layer วงกลม โดยคลิกขวาเฟรมแรก และคลิก Create Motion Tween ( หมายเลข 6 ภาพที่ 6 )

                                                  
                                                                             ภาพที่ 6

        ขั้นที่ 3 กำหนดระยะห่าง แล้วสร้างคีย์เฟรม ตามตัวอย่างกำหนดระยะห่าง 40 เฟรม โดยกด F6 ที่ Layer ล่างก่อน (หมายเลข 7 ภาพที่ 7) และ กด F6 ที่ Layer วงกลม ให้ยาวเท่ากัน (หมายเลข 8 ภาพที่ 7)

                                       

                                                                       ภาพที่ 7 

             ขั้นที่ 4 จับรูปทรง (รูปวงกลม) เลื่อนไปตำแหน่งอื่น หรือขยายรูปให้มีขนาดใหญ่ขึ้นตามต้องการ (หมายเลข 9 ภาพที่ 8)

 

                                                                         ภาพที่ 8 
           
      ขั้นที่ 5 ล็อก Layer รูปวงกลมตามเดิม (หมายเลข 10 ภาพที่ 9 ) 

                                                                

                                 เมื่อกด Ctrl+Enter สังให้เล่นหัวอ่าน(Playhead) จะได้ผลลัพธ์ ดังนี้ 

                                               

           

                                                                                                                                << กลับหน้าหลัก

สร้างโดย: 
สถาพร เป็งปัน
แหล่งอ้างอิง: 
http://www.hellomyweb.com,http://school.phutti.net/flash/chap1/topic1/index.html,http://www.fhappy.com/training.asp,http://it.northbkk.ac.th/elearning/FlashMX/courseflashmx.htm,http://www.kruprawit.com/caiFlash/FlashAnt.swf,http://www.webthaidd.com/flash/webthaidd_article_772_1.html
ล็อกอิน เพื่อแสดงความคิดเห็น |  อ่าน 192101 ครั้ง |  Tags: ช่วงชั้น 2 (ป.4-6), ช่วงชั้น 3 (ม.1-3), ช่วงชั้น 4 (ม.4-6), การงานอาชีพ เทคโนโลยี, เนื้อหาแนะนำ

มหาวิทยาลัยศรีปทุม ผู้ใหญ่ใจดี
 

Thaigoodview

 ช่วยด้วยครับ
นักเรียนที่สร้างบล็อก กรุณาอย่า
คัดลอกข้อมูลจากเว็บอื่นทั้งหมด
ควรนำมาจากหลายๆ เว็บ แล้ววิเคราะห์ สังเคราะห์ และเขียนขึ้นใหม่
หากคัดลอกทั้งหมด จะถูกดำเนินคดี
ตามกฎหมายจากเจ้าของลิขสิทธิ์
มีโทษทั้งจำคุกและปรับในอัตราสูง

ช่วยกันนะครับ 
ไทยกู๊ดวิวจะได้อยู่นานๆ 
ไม่ถูกปิดเสียก่อน
ขอขอบคุณในความร่วมมือครับ

อ่านรายละเอียด

ด่วน...... ขณะนี้
พระราชบัญญัติลิขสิทธิ์ (ฉบับที่ 2) พ.ศ. 2558 
มีผลบังคับใช้แล้ว 
ขอให้นักเรียนและคุณครูที่ใช้งาน
เว็บ thaigoodview ในการส่งการบ้าน
ระมัดระวังการละเมิดลิขสิทธิ์ด้วย
อ่านรายละเอียดที่นี่ครับ

 

สมาชิกที่ออนไลน์

ขณะนี้มี สมาชิก 0 คน และ ผู้เยี่ยมชม 479 คน กำลังออนไลน์

Creative Commons License

Copyright © 2000-2024 thaigoodview.com | ออกแบบและพัฒนาระบบโดย ไทยกู๊ดวิวดอทคอม
สงวนสิทธิ์ภายใต้สัญญาอนุญาต Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
ท่านสามารถนำเนื้อหาไปใช้ แสดง ดัดแปลง เผยแพร่ โดยต้องอ้างอิงที่มา ห้ามใช้เพื่อการค้า และต้องใช้สัญญาอนุญาตชนิดเดียวกันนี้ไปกับงานดัดแปลงต่อยอดที่เผยเผยแพร่ต่อ