ตัวอย่างโครงงานเรื่อง บ้านทรงไทยแอนนิเมชั่น

ตัวอย่างโครงงานเรื่อง บ้านทรงไทยแอนนิเมชั่น

ความเป็นมาของโครงงาน

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

วัตถุประสงค์ของโครงงาน

- เพื่อปลูกฝังให้นักเรียนและนักศึกษา ร่วมกันอนุรักษ์วัฒนธรรมบ้านทรงไทย

- เพื่อสร้างนักคิด นักจินตนาการในเรื่องของออกแบบบ้านทรงไทยประยุกต์

- เพื่อความเพลิดเพลินสนุกสนาน

- เพื่อให้เกิดการพัฒนาเสริมสร้างทักษะ ไหวพริบ และการวางแผนในการตัดสินใจในการเล่นเกม

ขอบเขตของการดำเนินการ

- สามารถศึกษาค้นคว้าเรื่อง บ้านทรงไทยแอนนิเมชั่น

- สามารถให้ความบันเทิงและให้ความรู้แก่ผู้สนใจได

- สามารถนําไปใช้ในการพัฒนาการเรียนการสอนในปัจจุบันได้

เอกสารและงานวิจัยที่เกี่ยวข้อง

วิธีดำเนินการ

เมื่อเข้าสู่ตัวเกมส์จะด้วยวิธีการskipหรือไม่ก็ตาม ตัวเกมส์จะแสดงเมนูให้เลือกการเริ่มเล่นเกมส์ต้องเข้า menu start game แล้วเลือก ซึ่งสามารถเล่นได้เพียง 1 user เท่านั่น ผู้เล่นจะต้องสร้างบ้าน โดยเริ่มจากlevel1ไปจนถึง level12

ผลการดำเนินการ

มีจุดที่ผิดพลาดในการเคลื่อนไหวของการเล่นเกมส์และในส่วนของฉากไมมีจุดที่ผิดพลาด

เอกสารอ้างอิง

พัฒนพล ศรีนม ,สุธีร นวกุล. Adobe Photoshop CS2.กรุงเทพฯ: บริษัทซีเอด จํากดั, 2548

ดนัย มวงแก  ว. Macromedia Flash 8.0. นนทบุรี : ไอดีซี อินโฟ ดิสทริบิวเตอร เซ็นเตอร จํากัด,

2549

www.thaiPost.com

www.google.com

www.Pramool.com

ข้อเสนอแนะในการปรับปรุงโครงงาน

ควรมีความชัดเจนในการทำงาน

รายงานการเรียนรู้การใช้ซอฟต์แวร์สร้างสรรค์ผลงาน

ชื่อโครงงาน เด็กขี้สงสัยกับปัญหาโลกร้อน

กลุ่มที่ 2

ชื่อผู้ทำโครงงาน :

          1.วรวิช เธียรปรีชา                     เลขที่ 1  ม.5/12

          2.นางสาวฟารีดา นิตยไสว         เลขที่ 15 ม.5/12

          3.นางสาวณัฐวดี นาคทุ่งเตา       เลขที่ 26  ม.5/12

วิธีดำเนินการ

            1.กำหนดขอบเขตการศึกษาโดยเน้นไปที่การปลูกจิตสำนึกที่ดีในการช่วยแก้ปัญหาโลกร้อน

             2.วางพล็อตเรื่องสำหรับงาน Animation

             3.จัดทำเนื้อเรื่อง

             4.ศึกษาวิธีการใช้งานโปรแกรม Adobe flash

             5.ออกแบบตัวละครโดยใช้โปรแกรม Adobe flash

             6.สร้างและตัดต่อ Animation

             7.หา Sound Effect และพากย์เสียงประกอบ Animation 

              8.สร้าง Teaser ของผลงาน

              9.ตรวจสอบผลงาน

             10.นำเสนอผลงาน

ผลการดำเนินการ 
               ทำให้ออกแบบตัวละครได้ และวางเนื้อเรื่อง ได้ลองใช้เทคนิดการใช้โปรแกรม Adobe flashในการทำแอนิเมชั่นตามที่ได้ศึกษามา

แหล่งเรียนรู้
         1. เรียนรู้การใช้งานโปรแกรม Adobe flash CS3       

         2. ศึกษาเกี่ยวกับวิธีการแก้ปัญหาโลกร้อนจากแหล่งต่างๆ
               3. รวบรวมสถิติ งานิวจัยต่าง ๆ ที่เกี่ยวกับการใช้พลังงานทดแทน เพื่อสิ่งแวดล้อม
               4. ศึกษาแนวทางการแก้ไขปัญหาในการใช้ทรัพยากรให้เกิดประโยชน์สูงสุดจากเว็บไซต์ที่น่าเชื่อถือ เช่น สำนักงานนโยบายและแผนพลังงาน

หลักฐานประกอบ

ได้เริ่มทำงานด้วยการวาดรูปตัวประกอบอย่างคราวๆและนำมาทำต่อในโปรแกรม  Adobe flash CS3       

ฮาร์ดแวร์ที่ใช้ในการทำแอนนิเมชั่น

 ฮาร์ดแวร์ที่ใช้ในการทำแอนนิเมชั่น

1. ตัวเครื่อง (Case) ทำหน้าที่ในส่วนของการประมวลผลข้อมูลที่ได้รับมาจากอุปกรณ์นำเข้าต่างๆ ซึ่งภายในตัวเครื่องจะมีอุปกรณ์หลัก ได้แก่ แผงวงจรหลัก หม้อแปลงไฟฟ้า ซีพียู ฮาร์ดดิสก์ หน่วยความจำ การ์ดแสดงผล การ์ดเสียง เป็นต้น
 2. ดิสก์ไดร์ฟ (Disk drive) เป็นอุปกรณ์อ่าน-เขียนข้อมูลบนดิสก์เก็ต
3. ลำโพง (Speaker) เป็นส่วนที่ใช้แสดงผลที่เป็นเสียง
4. คีย์บอร์ด (Keyboard) อุปกรณ์รับข้อมูลจากการกดแป้นแล้วทำการเปลี่ยนเป็นรหัส เพื่อบอกให้คอมพิวเตอร์รู้ว่ามีการกดตัวอักษรอะไร แผงแป้นอักขระส่วนใหญ่เป็นไปตามมาตรฐานของเครื่องพิมพ์ดีด ซึ่งระบบรับรหัสตัวอักขระที่ใช้ในทางคอมพิวเตอร์เป็นรหัส 7 หรือ 8 บิต (Operator)
5. เมาส์ (Mouse) อุปกรณ์นำเข้าข้อมูลโดยการเลื่อนเมาส์เพื่อบังคับตัวชี้ไปยังตำแหน่งต่างๆ บนหน้าจอ เมาส์ที่นิยมใช้มีด้วยกัน 3 ประเภทได้แก่
        - แบบทางกล (Mechanical) ใช้ลูกกลิ้งกลม
        - แบบใช้แสง (Optical mouse)
        - แบบไร้สาย (Wireless Mouse) ที่มาของภาพ

6. แผ่นสัมผัส (Touch Pads) เป็นอุปกรณ์รับข้อมูลโดยการใช้นิ้วสัมผัสลงบนแผ่นสัมผัส น้ำหนักที่กดสงไปจะถูกเปลี่ยนเป็นสัญญาณไฟฟ้า มักเห็นอยู่ในเครื่องคอมพิวเตอร์โน้ตบุ๊ก
7. กล้องดิจิทัล (Digital Camera) เป็นอุปกรณ์รับข้อมูลเข้าสู่เครื่องคอมพิวเตอร์ ที่สามารถแปลงข้อมูลภาพเป็นสัญญาณดิจิทัล มีลักษณะการใช้งานเหมือนกล้องถ่ายภาพทั่วไป แต่ต่างกันตรงที่ไม่ต้องใช้ฟิล์มในการบันทึกข้อมูล ข้อมูลภาพที่ได้สามารถถ่ายลงสู่เครื่องคอมพิวเตอร์และสามารถเรียกดูได้ทันที หรือจะใช้โปรแกรมช่วยตกแต่งภาพให้ดูสวยงามขึ้นก็ได้
8. จอภาพ (Monitor) เป็นอุปกรณ์แสดงผลลัพธ์ที่เป็นภาพ ปัจจุบันแบ่งออกเป็น 2 ชนิด คือ จอภาพแบบ CRT (Cathode Ray Tube) และ จอภาพแบบ LCD (Liquid Crystal Display)         3. ลำโพง (Speaker) เป็นอุปกรณ์แสดงผลลัพธ์ที่อยู่ในรูปของเสียง สามารถเชื่อมต่อกับคอมพิวเตอร์ผ่านแผงวงจรเกี่ยวกับเสียง (Sound card) ซึ่งมีหน้าที่แปลงข้อมูลดิจิทัลไปเป็นเสียง 

ความหมายแอนิเมชัน (Animation)

ความหมายแอนิเมชัน (Animation)

แอนิเมชัน (Animation) หมายถึง กระบวนการที่เฟรมแต่ละเฟรมของภาพยนตร์ ถูกผลิตขึ้นต่างหากจาก กันทีละเฟรม แล้วนำมาร้อยเรียงเข้าด้วยกัน โดยการฉายต่อเนื่องกัน ไม่ว่าจากวิธีการ ใช้คอมพิวเตอร์กราฟิก ถ่ายภาพรูปวาด หรือ หรือรูปถ่ายแต่ละขณะของหุ่นจำลองที่ค่อย ๆ ขยับเมื่อนำภาพดังกล่าวมาฉาย ด้วยความเร็ว ตั้งแต่ 16 เฟรมต่อวินาที ขึ้นไป เราจะเห็นเหมือนว่าภาพดังกล่าวเคลื่อนไหวได้ต่อเนื่องกัน ทั้งนี้เนื่องจาก การเห็นภาพติดตาในทาง คอมพิวเตอร์ การจัดเก็บภาพแบบอนิเมชันที่ใช้กันอย่างแพร่หลายในอินเทอร์เน็ต ได้แก่เก็บในรูปแบบ GIF MNG SVG และ แฟลช

คำว่า แอนิเมชั่น (animation) รวมทั้งคำว่า animate และ animator มากจากรากศัพท์ละติน “animare” ซึ่งมีความมหมายว่า
ทำให้มีชีวิต ภาพยนตร์แอนิเมชั่นจึงหมายถึงการสร้างสรรค์ลายเส้นและรูปทรงที่ไม่มีชีวิต ให้เคลื่อนไหวเกิดมีชีวิตขึ้นมาได้
(Paul Wells , 1998 : 10 )

แอนิเมชั่น (Animation) หมายถึง “การสร้างภาพเคลื่อนไหว” ด้วยการนำภาพนิ่งมาเรียงลำดับกัน  และแสดงผลอย่างต่อเนื่อง
ทำ ให้ดวงตาเห็นภาพที่มีการเคลื่อนไหวในลักษณะภาพติดตา (Persistence of Vision) เมื่อตามนุษย์มองเห็นภาพที่ฉา่ย อย่างต่อเนื่อง เรตินาระรักษาภาพนี้ไว้ในระยะสั้นๆ ประมาณ 1/3 วินาที หากมีภาพอื่นแทรกเข้ามาในระยะเวลาดังกล่าว
สมองของมนุษย์จะเชื่อมโยงภาพทั้งสองเข้าด้วยกันทำให้เห็นเป็นภาพเคลื่อนไหวที่มีความต่อเนื่องกัน  แม้ว่าแอนิเมชั่นจะใช้หลักการเดียว
กับวิดิโอ   แต่แอนิเมชั่นสามารถนำไปประยุกต์ใช้กับงานต่างๆได้มากมาย  เช่นงานภาพยนตร์  งานโทรทัศน์  งานพัฒนาเกมส์  งานสถาปัตย์
งานก่อสร้าง งานด้านวิทยาศาสตร์  หรืองานพัฒนาเว็บไซต์  เป็นต้น (ทวีศักดิ์  กาญจนสุวรรณ : 2552 : 222 )

                       แอนิเมชัน (อังกฤษ: animation) หมายถึง การสร้างภาพเคลื่อนไหวโดยการฉายภาพนิ่งหลายๆ ภาพต่อเนื่องกันด้วยความเร็วสูง

การใช้คอมพิวเตอร์กราฟิกส์ในการคำนวณสร้างภาพจะเรียกการสร้างภาพเคลื่อนไหวด้วยคอมพิวเตอร์หรือ คอมพิวเตอร์แอนิเมชัน หากใช้เทคนิคการถ่ายภาพหรือวาดรูป หรือ หรือรูปถ่ายแต่ละขณะของหุ่นจำลองที่ค่อย ๆ ขยับ จะเรียกว่า ภาพเคลื่อนไหวแบบการเคลื่อนที่หยุด หรือ สตอปโมชัน (stop motion) โดยหลักการแล้ว ไม่ว่าจะสร้างภาพ หรือเฟรมด้วยวิธีใดก็ตาม เมื่อนำภาพดังกล่าวมาฉายต่อกันด้วยความเร็ว ตั้งแต่ 16 เฟรมต่อวินาทีขึ้นไป เราจะเห็นเหมือนว่า ภาพดังกล่าวเคลื่อนไหวได้ต่อเนื่องกัน ทั้งนี้เนื่องจากการเห็นภาพติดตา

ในทางคอมพิวเตอร์ การจัดเก็บภาพแบบแอนิเมชันที่ใช้กันอย่างแพร่หลายในอินเทอร์เน็ต มีหลายรูปแบบไฟล์เช่น GIF APNG MNG SVG แฟลช และไฟล์สำหรับเก็บวีดิทัศน์ประเภทอื่นๆ
สรุปความหมายของแอนิเมชั่นคือ การสร้างสรรค์ลายเส้นรูปทรงต่างๆให้เกิดการเคลื่อนไหวตามความคิดหรือจินตนาการ

ปิยกุล  เลาวัณย์ศิริ (2532 : 931-932) ได้สรุปหลักการและคุณสมบติของภาพยนตร์แอนิเมชั่นเอาไว้ดังนี้
1. สามารถใช้จินตนาการได้อย่างไม่มีขอบเขต
2. สามารถอธิบายเรื่องที่ซับซ้อนและเข้าใจยากให้ง่ายขึ้น
3. ใช้อธิบายหรือแสดงความคิดเห็นที่เป็นนามธรรมให้เป็นรูปธรรมได้
4. ใช้อธิบายหรือเน้นส่วนสำคัญให้ชัดเจนและกระจ่างขึ้นได้

  ขอบคุณที่มา 

สอน Flash animation คนเดิน

สอนสร้างแอนิเมชั่นด้วย Flash พื้นฐาน

การทำ animation ต่างๆ

การทำ animation ต่างๆ

ในการทำ animation ต่างๆ เช่น การ์ตูน แน่นอนว่าจะต้องแบ่งเป็นตอนๆ หรือ ฉาก ใน flash ก็เช่นกัน เมื่อ animation ของเรามีความยาว หรือซับซ้อนมาก ก็แบ่งออกเป็นฉากๆได้ โดยใ้ช้ Sceneเพราะว่าใน flash player นั้นจะทำการเล่นเมื่อมีเฟรมไม่เกิน 16,000 เฟรม ถ้ามากกว่านี้ก็จะไม่เล่น และถ้า animation ของเรามีความยาวมากกว่า 16,000 เฟรมล่ะ จะทำยังไง Scene เป็นตัวเลือกหนึ่งในนั้น บทความนี้จะทดสอบเกี่ยวกับการใช้ Scene ครับ
1. สร้างเอกสารใหม่ขึ้นมา ขนาดใดก็ได้ (ในรูปขนาด 400x300)

2. ใช้เครื่องมือ text tool  พิมลงไปใน stage ว่า Scene 1 ดังรูป

3. สร้าง layer ใหม่ขึ้นมาอีก 1 เลเยอร์ โดยคลิกที่  แล้วใช้เครื่องมือ Oval Tool  วาดรูปวงกลมลงไปทางด้านซ้ายของ stage ดังรูป


4. คลิกขวาที่ keyframe ที่เฟรมแรก ของ layer 2 แล้วเลือก creation motion tween ดังรูป

5. คลิกขวาที่เฟรมที่ 20 แล้วเลือก Insert Keyframe ดังรูป


6. ลากวงกลมไปไว้ทางขวาดังรูป

7. คลิกขวาที่เฟรมที่ 20 ของ layer 1 แล้วเลือก Insert Frame ดังรูป



8. ตอนนี้เราก็จะได้ animation อย่างง่าย อยู่ที่ Scene แรกแล้วนะครับ สังเกตุได้จากตัวอย่างในรูปครับ

9. ไปที่เมนู Insert > Scene เพื่อสร้าง Scene ใหม่ขึ้นมา จะพบกับ stage ที่ว่างเปล่า นั่นก็คือ Scene 2 นั่นเอง


10. ใน Scene 2 นั้นให้สร้าง animation ขึ้นมาใหม่ ตั้งแต่ข้อ 2 - 7 โดยเปลี่ยนจาก คำว่า Scene 1 เป็น Scene 2 และเปลี่ยนสีของวงกลมจากสีฟ้าเป็นสีอื่นครับ ดังรูป

11. กด Ctrl + Enter เพื่อทดสอบดูครับ

12. จะเห็นว่า เมื่อ animation ของ Scene 1 จบ จะต่อด้วย Scene 2 ทันที
13. เราสามารถสลับเปลี่ยน Scene ที่ต้องการแก้ไขได้โดยดูจากตัวอย่างครับ

14. เราสามารถเรียกหน้าต่าง Scene มาใช้งาน เพื่อความสะดวกในการสับเปลี่ยน Scene โดยไปที่ Window > Other Panels > Scene หรือกด Shift+F2




ขอบคุณที่มา