17 ม.ค. 54(คาบเรียนที่5)

อาจารย์ทำการแนะนำ เสียงประกอบ www.freesfx.co.uk
เวปนี้เราสารถมารถโหลดมาใช้ได้ และ นำเสียงของเราใส่ไปให้คนอื่นดาวน์โหลดได้

อาจารย์สอนวิธีการทำ Animation ใน PS/FL เป็นวิธีการทำในขั้นพื้นฐานเพื่อให้เข้าใจได้ง่ายขึ้นก่อนที่จะต้องศึกษาเองต่อไป และแนะนำการตัดต่อเสียง

- เพื่อนคนที่1ออกมาอภิธานศัพท์ Polygon / Bones ทั้ง2เป็นคำศัพท์เกี่ยวกับการสร้างตัวละครและดารเคลื่อนไหวของตัวละคร

-เพื่อนคนที่2ออกมาอภิธานศัพท์ Adobe Flash / Action Script

.........
ซอฟแวร์
ประเภท1. ไม่ต้องติดตั้ง สามารถใช้ได่เลย เช่นโปรแกรม pencil animation

รายงานอภิธานศัพท์

** Fream by Fream ** AND ** Tween **


 Frame by Frame...
การสร้างภาพเคลื่อนไหวแบบ  Frame by Frame  คือ การกำหนดการเปลี่ยนแปลงของออบเจ็กต์ที่แตกต่างกันในทุก ๆ คีย์เฟรม เหมาะสำหรับการสร้างภาพเคลื่อนไหวที่มีความซับซ้อนมากๆ แต่ก็มีข้อเสียเพราะภาพจะมีขนาดใหญ่กว่าการทำภาพเคลื่อนไหวแบบ Tween

ตัวอย่างการทำภาพเคลื่อนไหวแบบ  Frame by Frame
                1. สร้างไฟล์เอกสารใหม่ โดยคลิกเมนู File => New
                2. ให้ไปยืมให้ Libraly จากไฟล์อื่น
                พอเปิด Libraly ขึ้นมาให้ทำการลาก symbol จาก Libraly จาก Bitmap2 มาวางบนพื้นที่ว่าง

                                       จะได้ดังภาพ

                                      เสร็จแล้วมาคลิกขวาที่ เฟรม 2   แล้วเลือก Insert KeyFarme

                                      เสร็จแล้วให้ทำการลบภาพ ที่อยู่บนพื้นที่  Stage ออกไป

 แล้วนำภาพ ที่ Libraly ที่ชื่อ Bitmap 3 มาวาง แล้วให้ทำการ Insert Kiyfarme ที่เฟรมที่ 3  และลบภาพที่                                        Stage ออก แล้วนำภาพที่ Libraly ที่ชื่อ Bitmap 4 ทำแบบนี้ไปเรื่อย ๆ จนถึง เฟรมที่ 5

                                     เมื่อทำครบทั้ง 5 เฟรมเรียบร้อยแล้วแล้วให้คลิกเลือกที่ Onion Skin จะเกิดภาพราง ๆ ขึ้น

                                      แล้วลากภาพมาวางในจุดเดียวกันให้เรียบร้อย

                                     เสร็จแล้วให้ทำการรัน ดู โดยการคลิกเลือกที่ Control => Test Movie

                                      

ผลรันที่ได้

Tween...

การสร้างภาพเคลื่อนไหวแบบ Tween
            การสร้างภาพเคลื่อนไหวแบบ Tween เป็นการสร้างภาพเคลื่อนไหวจากเฟรมเบื้องต้นและเฟรมสุดท้าย ซึ่งโปรแกรมจะสร้างการเปลี่ยนแปลงระหว่างเฟรมให้โดยอัตโนมัติ นั่นคือ การสร้างภาพเคลื่อนไหวแบบ Tween จะมีการสร้างเฟรมเพียง 2 เฟรม คือเฟรมเบื้องต้นและเฟรมสุดท้าย ซึ่งคุณสมบัตินี้เองที่ทำให้ภาพเคลื่อนไหวแบบ Tween ซึ่งมีขนาดไฟล์ที่เล็กกว่าการสร้างภาพเคลื่อนไหวแบบ Frame-by-Frame

ลักษณะเฟรมของการสร้างภาพเคลื่อนไหวแบบ Tween
            การสร้างภาพเคลื่อนไหวในลักษณะต่าง ๆ จะปรากกฎรูปแบบและสีบนส่วนของเฟรมบนจอภาพ Timeline ในลักษณะที่แตกต่างกัน ดังนี้


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

  

เป็นการสร้างภาพเคลื่อนไหว ที่มีการเคลื่อนกำหนดการเคลื่อนที่ หมุน ย่อ หรือขยายให้กับออบเจ็กต์, Instance,group หรือ Text black ก็ได้ นอกจากนี้ยังสามารถแก้ไขคุณสมบัติของออบเจ็กต์ในแต่ละช่วงได้อีกด้วย
การสร้างภาพเคลื่อนไหวแบบ Motion Tween เป็นรูปแบบการสร้างภาพเคลื่อนไหวทีใช้มากที่สุดและโปรแกรมจะกำหนดรูปแบบชนิดนี้เป็นค่าเริ่มต้นของการสร้างภาพเคลื่อนไหวทุกครั้ง  โดยโปรแกรมจะสร้างภาพเคลื่อนไหวและเส้นทางการเคลื่อนที่ให้เองโดยอัตโนมัติ

ตัวอย่างการทำภาพเคลื่อนไหวแบบ  Motion Tween

1. สร้างไฟล์เอกสารใหม่ โดยคลิกเมนู  File => New
2. ให้ไป Save รูปภาพที่ต้องการเก็บไว้ใน Library จากนั้นให้ทำการลาก Symbol จาก Library มาวางบนพื้นที่ว่าง

                          จะได้ดังภาพ

                         เสร็จแล้วมาคลิกขวาที่ เฟรม  แล้วเลือก Insert KeyFarme

                          เสร็จแล้วทำการย้ายภาพไปยังอีกจุดหนึ่งที่ต้องการ

                           จะได้ดังภาพ

                           คลิกขวาระหว่างเฟรม แล้วเลือก Create Motion Tween

                           เสร็จแล้วให้ทำการรัน ดู โดยการ  กด Ctrl + Enter 

                         


 ผลรันที่ได้



Shape Tween


  
เป็นการสร้างภาพเคลื่อนไหวที่มีการเปลี่ยนแปลงรูปทรงของออบเจ็กต์ จากรูปทรงหนึ่งไปเป็นอีกรูปหนึ่งโดยสามารถกำหนด ทิศทาง ตำแหน่ง ขนาด และสีของการเปลี่ยนแปลงได้ตามต้องการ
               
ออบเจ็กต์ที่สามารถนำมาสร้างการเคลื่อนไหวแบบ Shape Tween ได้ตามรูปทรงธรรมดา เช่น รูปทรงที่ผู้ใช้วาดขึ้นเอง นั่นคือ จะไม่สามารถใช้ Instance, Text Block หรือกลุ่มออบเจ็กต์ในการสร้างได้ แต่ถ้าผู้ใช้ต้องการนำออบเจ็กต์ดังกล่าวมาใช้สร้างการเคลื่อนไหวแบบ Shape Tween จะต้องเปลี่ยนให้กลายเป็นรูปทรงธรรมดาก่อน โดยใช้คำสั่ง Break apart
ตัวอย่าง
                            เลือกเครื่องมือ Rectangle Tool นำมาวาดที่พื้นที่ Stageดังรูป

                           เลือก เฟรมที่ 20 แล้วทำการ Insert KeyFarme

                            ทำการตัดภาพสี่เหลี่ยมสีแดง ที่ Stage ออกไป

                             แล้วเลือกเครื่องมือ Brush Tool วาดรูปตัวอักษร

                             เลือกเหตุการณ์ ที่ Panal Properties เป็นแบบ Shape Tween

                             สังเกตดูที่เฟรมจะมี animation แบบ Shape Tween เกิดขึ้น

                            ทำการรันโปรแกรมที่สร้างขึ้น โดยการคลิก Control => Test Movie

                               
ผลรันที่ได้
( ขอขอบคุณ ความรู้นี้จาก http://www.wt.ac.th/~panumas/Workshop/workshop.html )


**ถึงแม้จะเป็นเพียงความรู้ขั้นพื้นฐาน แต่ความรู้นี้เป็นประโยชน์อย่างมากในการเริ่มต้นทำ Animation**  (-/\-) ..ขอบคุณอีกครั้ง

20 ธ.ค. 54(คาบเรียนที่3)

อาจารย์แนะนำวิธีการจัดแต่งบล๊อค โดยมีแทมเพลตของจารย์เป็นต้นแบบให้
เวลาทำงานหน้าเว็บ Resalution 72
...........
ขั้นตอนการทำ Animation Gif Banner
ขั้นตอนการดำเนินงาน 3 ส.
1. สืบค้น หา/โจทย์? แบนเนอร์สำหรับเว็บบล๊อคของเรา
1.1 สร้างบล๊อค มีขั้นตอน....ต้องดำเนินการอย่างำรบ้าง ต้องมีส่วนประกอบอย่างอื่นอะไรบ้าง
1.2 เตรียม....ภาพ ข้อความ
1.3 เสียง
1. 4ผลพิเศษ fx
1.5 นำเสนอ
= Storyboard =

คลิปสอนการทำ Banner และ วิธีอัพภาพ .glf ลงบล๊อค

คลิปนี้สอนการทำภาพ glf เป็นวิธีทำพื้นฐาน ถ้าจะนำไปทำตามก็สามารถทำกันได้ง่ายๆ คลิปที่สอนนี้ทำในโปรแกรม Photoshop CS5 ค่ะ
.........
(คลิปนี้ไม่มีเสียงนะคะ มีแต่ภาพค่ะ ขออภัยมา ณ ที่นี้ด้วยค่ะ)

วิธีทำ
1.ต้องทำรูปที่ต้องการจะทำเป็น Banner ของเราให้เสร็จเรียบร้อย
  
 - ทริคที่1 การทำภาพให้ขยับได้คือ เราต้อง Copy layer ไว้เยอะๆ หรือเท่าที่เราต้องการ (ดังเช่นตัวอย่างที่ยักคิ้วได้)
   
- ทริคที่2 การทำ Banner หรืองานอื่นๆก็ตาม เราควรทำงานเป็น Layer แยกไว้เป็นสัดส่วน ไม่ควนให้อยู่ใน Layer เดียวกัน มิฉะนั้นจะทำให้ทำงานยาก




2.เมื่อรูปภาพ Banner อันสวยงามของเราเสร็จเรียบร้อยแล้ว ต่อไปเราจะมาทำให้ภาพขยับได้กัน

- ไปที่ Window จะอยู่ด้านบนหน้าของโปรแกรม Photoshop CS5 ค่ะ คลิกเลือกเลย!!


- เลือก Animation คลิกอีกทีค่ะ


3.เมื่อเข้าสู่โหมด Animation เราจะเห็นแถบ Animation(Timeline)


- ปรากฏแถบ Timeline , Layer ที่เราสร้างไว้ตอนที่ทำรูปภาพ Banner (Layer ข้างซ้ายและข้างขวา จะเหมือนกันทุกอย่าง)


- แถบสีเขียวที่ปรากฏแต่ละช่อง คือการกำหนดเวลาของรูปภาพแต่รูปภาพที่อยากให้ปรากฏ สามารถเลือได้ตามใจเลย


- เมื่อกำหนดเวลาเรียบร้อยเราจะมาคลิกที่ Convert to fream animation (ช่องสี่เหลี่ยมเล็กๆที่มีสี่เหลี่ยมอยู่ในนั้น3อัน ข้างๆ Layer ที่อยู่ด้านขวามือของเรา) 


- เราจะมาเลือกการรอบของ Baner ว่าจะให้เล่นที่รอบ ...ให้นำเม้าท์ไปที่ Selects looping options (ช่องซ้ายสุดของหน้าจอและอยู่ด้านล่างสุด) 


4.Animation เสร็จแล้ว


- ไปที่ File จะอยู่ด้านบนหน้าของโปรแกรม Photoshop CS5 ค่ะ คลิกเลือกเลย!!


- ไปที่ Save for Web & Devices เปลี่ยนไฟล์ภาพเป็น GIF และ Save งาน พร้อมใส่ชื่อให้งานด้วย

คำเตือน : อย่าลืม Save งานทุกระยะ เผื่อไฟบ้านท่านดับ

..................................................

วิธี นำภาพเข้า บล๊อค

1. ไปบล๊อคของเราที่จะทำการอัพภาพ ต่อมาเลือกการออกแบบ ที่มุมบนขวาของจอหน้าบล๊อคเรา

- เลือกรูปแบบ และเลือก ช่องเพิ่ม Gadget ที่ต้องการ เมื่อกดแล้ว มันจะปรากฏอีกหน้าต่างนึงขึ้นมา

- เลือกรูปภาพ.....แต่เรายังไม่สามารถอัพภาพได้ ถ้าอัพเลยภาพจะไม่ขยับอย่างที่ต้องเป็น (ดังนั้นเราจะต้องไปฝากรูปภาพไว้ที่ www.imgur.com <สมัครสมาชิกให้เรียบร้อยนะคะ ไม่เสียค่าใช้จ่ายค่ะ>

- เมื่อเข้าสู่หน้า webแล้ว เลือกที่ช่อง Computer และอัพรูปทันที

- รูปภาพโหลดเรียบร้อย ให้เราคลิกขวาที่รูปภาพ เลือกCopy URL ของรูปภาพ

2. ใกล้เสร็จแล้วนะ

- นำ URL ที่ได้ มาใส่ในหน้าที่เราเปิดตอนจะใส่รูปในบล๊อคอันล่าสุด 

- คลิกเลือก ช่อง (จากเว็บ ให้วาง URL ของภาพด้านล่าง)

- เสร็จแล้วก็ใส่ URL รอโหลด.................

- บันทึกภาพเมื่อเรียบร้อย

3. เสร็จแล้วจ่ะ ไปดูบล๊อคของเรากัน ^v^

................................................................................

มาดู คลิปทำ Baner และวิธีอัพภาพกันดีกว่า (เผื่อจะเข้าใจกันมากขึ้น)

ลองทำกันดูแล้วมาสนุกด้วยกันนะคะ สวัสดีค่ะ  >.<

นักศึกษาวิชา Animation Design วันอังคาร(เช้า)

ภาพยืนยันตัวตนของนักศึกษา ARTI 3322 อังคาร(เช้า)
........ ถ่ายภาพในวันแรก ที่เริ่มการเรียนการสอน

13 ธ.ค. 54 (คาบเรียนที่ 2)

เรียนรู้การใช้ http://www.screencast-o-matic.com/ เว็ปนี้เป็นเว็ปใช้บันทึกหน้าจอคอมพิวเตอร์ของเรา สามารถใช้ในการเรียนรู้และการทำงานได้ เป็นอีก1 ทางเลือกที่สะดวกในการช่วยจดจำ และเป็นเว็ปที่สามารถแบ่งบันความรู้แก่ผู้อื่นได้ด้วย

           และสอบ เราได้ 11 คะแนนเต็ม30

ตัวอย่าง Animation

• animated short film

Hold The Line

ถ้าต้องการดูเพิ่มเติม สามารถไปที่ http://www.aniboom.com
                           


                                                                                                              Tir Nan Og 

     
directed by Fursy Teyssier
                             


      คลิป Animation ที่นำลงบล๊อคนั้น เป็น animation shot film ส่วนมาก Animation แบบนี้จะไม่มีบทพูดคุย แต่จะดำเนินเรื่องจากท่าทางของตัวละครที่สื่ออารมณ์ออกมา ด้วยระยะเวลาอันสั้นจะทำให้คนดูนั้นไม่เข้าใจเนื้อเรื่อง ฉะนั้นต้องวางเนื้อเรื่องให้ดีเพื่อให้เข้าใจได้ง่ายขึ้น



*** วิธีเริ่มการทำ การ์ตูนแฟลชอนิเมชั่น (Flash Animation) เบื้องต้นนะจ๊ะ ***


หลักการทำอนิเมชั่น  คือ 
1.การนำรูปที่ขยับทีละนิดมาต่อๆกัน ให้ได้การกระทำ ในลักษณะแบบนี้พี่ขอเรียกว่า อนิเมชันแบบ เฟรมบายเฟรม (frame by frame)
2.ลักษณะ การเลื่อนวัตถุจากที่หนึ่งไปอีกที่หนึ่ง แบบนี้ พี่เรียกว่า การขยับแบบ MotionTween
3.การเปลี่ยนรูปร่างวัตถุจากวัตถุรูปร่างหนึ่งไปยังอีกรูปร่างหนึ่ง พี่ขอเรียกว่า TweenShape นะจ๊ะ


http://www.jaid-project.com/webboard/index.php?topic=202.0

เป็นวิธีทำง่ายๆ ที่ทำกันได้ทั่วไป .. ลองทำกันดูนะจ๊ะ