• ครูพักลักจำ
  • ranking : สมาชิกทั่วไป
  • email : protocom888@hotmail.com
  • วันที่สร้าง : 2008-09-20
  • จำนวนเรื่อง : 26
  • จำนวนผู้ชม : 602025
  • จำนวนผู้โหวต : 120
  • ส่ง msg :
  • โหวต 120 คน
<< ตุลาคม 2008 >>
อา พฤ
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

[ Add to my favorite ] [ X ]


วันอังคาร ที่ 7 ตุลาคม 2551
Posted by ครูพักลักจำ , ผู้อ่าน : 41870 , 13:55:13 น.  
หมวด : วิทยาศาสตร์/ไอที

พิมพ์หน้านี้
โหวต 0 คน

เทคนิคนี้มาตามคำเรียกร้องของแฟนๆนะขอรับ ที่จะให้ช่วยแนะนำการทำภาพเคลื่อนไหว(Animation) เพื่อนำมาตกแต่งเวปครับซึ่งภาพเคลื่อนไหวเหล่านี้ได้รับความนิยมอย่างมากในการตกแต่งเวปไซต์ครับ เพราะว่ามันเคลื่อนไหวนั่นเองมันจึงสะดุดตาและทำให้ผู้ที่ชมเวปไซต์ต้องหยุดดูซักนิดว่ามันคืออะไร นิยมมากในการทำ Bannerโฆษณา เป็นเพราะว่ามันมีขนาดข้อมูลน้อยมากทำให้ผู้ชมเวปไซต์โหลดได้เร็วไม่ต้องรอนานเหมือน Streaming ประเภท Flash หรือ Shockwave ครับ ก่อนเข้าเรื่องวิธีทำ ผมอยากทำความเข้าใจแบบไม่เน้นวิชาการนะครับเพราะคิดว่าผู้อ่านสามารถหาอ่านได้ทั่วไป แต่ผมจะอธิบายแบบง่ายๆพร้อมยกตัวอย่างหน้าเวปไซต์หลักของ OKnation นะครับ ถ้าเราเห็นรูปเคลื่อนไหวแล้วเราคลิกขวาที่รูป แล้วมีคำว่า Save Picture As... แสดงว่าภาพเคลื่อนไหวนั้นเป็นภาพครับ(นามสกุล.gif) เราสามารถเซฟลงเครื่องเราได้ครับ และแม้ว่าเราจะเปิดจากเครื่องเรามันก็จะยังเคลื่อนไหวอยู่ครับ ดังรูปประกอบคำอธิบาย

ทีนี้มาดูภาพอีกแบบหนึ่งครับซึ่งตอนนี้กำลังได้รับความนิยมอย่างมาก นั่นคือภาพประเภท Streaming ครับ เทคโนโลยีนี้เติบโตมาพร้อมกับความเร็วในการส่งข้อมูลทางอินเตอร์เนตความเร็วสูง และมีขนาดท่อข้อมูล(Bandwidth) ขนาดใหญ่ประเภทที่เขาโฆษณากันว่าท่อกี่เมกๆ(Mbps) นั่นล่ะครับ ข้อมูลประเภทนี้ถ้าเนตไม่เร็วไม่แรงแทบจะดูไม่ได้เลย เพราะจะโหลดข้อมูลนานมาก บางทีดูและกระตุกเป็นช่วงๆ ข้อมูลแบบนี้ได้รับความนิยมสูงมากขึ้นเรื่อยๆ เช่น ฟังเพลงออนไลน์ ดูหนังออนไลน์ เวปไซต์ที่บุกเบิกและเป็นที่นิยมสูงสุด ก็คือ YouTube ไงครับ เริ่มเข้าใจกันแล้วใช่ไหมครับ ดังรูปประกอบ

ทีนี้เรามาดูข้อดีข้อเสียกันเพราะจำเป็นมากที่ ถ้าหากว่าเราจะแต่งเวปไซต์เรา เราก็ควรเอาภาพเคลื่อนไหวแบบไหนไปลง
1.ภาพ.gif ไฟล์ ขนาดจะเล็กมาก ผู้อ่านโหลดไว เนตเต่าก็โหลดได้ไม่กระตุก เข้าถึงลูกค้าแทบจะ 100% แล้วข้อเสียล่ะ มีครับ ข้อเสียคือ ภาพมันจะไม่สวยครับ เพราะตัวของมันสามารถแสดงสีได้แค่ 256สี ถ้าเป็นภาพถ่ายคุณภาพสูง มันจะถูกทอนสีลงเหลือแค่ 256 สีครับจึงทำให้บางทีรูปที่ได้อาจไม่ชัดเท่าต้นฉบับครับ  และภาพเคลื่อนไหวมันจะกระโดดจากภาพหนึ่งไปอีกภาพหนึ่งค่อนข้างแข็งแบบรู้สึกได้

2.ภาพแบบ Streaming ซึ่งมีโปรแกรมมากมายในการสร้าง มักมีนามสกุลประเภท *.flv, *.swf , *.wma และอีกมากมายครับ ภาพพวกนี้ได้ทั้งรูปและเสียงเหมือนดูภาพยนต์ ดึงดูดความสนใจกลุ่มเป้าหมายได้มาก แต่ข้อเสียคือ จะสูญเสียลูกค้ากลุ่มเนตเต่าไปครับ เพราะพอเปิดเวปปุ๊บ กว่าจะโหลดเสร็จนานมากๆๆ บางทีเครื่องค้างไปเลย ส่งผลให้บางคนพาลกดปิดไปเลย ข้าพเจ้าก็เป็นหนึ่งในนั้น

ได้เวลาเข้าเรื่องซักทีนะครับ ที่ผมจะแนะนำคือทำแบบ .gif นะครับ ถามว่าภาพเคลื่อนไหว นามสกุล .jpg, .bmp ได้ไหม ตอบว่าไม่ได้ครับ วันหลังผมจะเอาคุณสมบัติ ไฟล์นามสกุลต่างๆแบบตัวเต็มมาลงให้นะครับ ตอนนี้ทราบแต่ว่า มันเป็นความสามารถพิเศษเฉพาะไฟล์นามสกุล *.gif เท่านั้นครับที่สามารถทำภาพเคลื่อนไหวได้ครับ  มาลงมือทำกันเลยครับ

1.ผมจะนำโลโก้ของ OKnation มาเป็นแบบอย่างนะครับ เพราะเป็นผู้มีพระคุณให้พื้นที่แก่ผมในการทำ Blog จึงอยากช่วยโปรโมตครับ ผมจะทำ Layer แยกคำแต่ละอักษร  ออกจากกันเพื่อจะสร้างภาพเคลื่อนไหวให้มีอัษรค่อยๆโผล่มาทีละชุดครับ แล้วคลิกเรียกโปรแกรมทำภาพเคลื่อนไหวของPhotoshop ตรง Tool Box ล่างสุดที่เขียนว่า Edit in Image Ready(คงแปลว่าเรามาใช้เครื่องมือนี้เมื่อรูปเราพร้อมแล้วนั่นเองครับ)

2.โปรแกรมจะเปลี่ยนไปทำใน Image Ready จะมีหน้าต่าง animation ขึ้นมา ถ้าไม่ขึ้นมาให้เลือก Windows > animation ดังรูปครับ

3.ผมปิดตาไว้ทุกรูปเปิดตาแต่เพียง Layer Background ภาพนี้จะไปโผล่ในเฟรมแรกของ Animation ครับ ทีนี้ผมต้องการภาพเหตุการณ์ที่จะเกิดขึ้นในเฟรมที่ 2 ก็ให้เราคลิกเลือกตรงมุมขวาของหน้าต่าง เลือก New Frame ก็จะมีเฟรมที่ 2 ขึ้นมาให้ ดังรูปครับ

4.ที่เฟรม 2 ผมจะเปิดดวงตาที่ Layer 1 เพื่อให้เกิด เอฟเฟค อักษร O ดังรูปครับ

5.ถัดมาผมจะเพิ่มเฟรมที่ 3 ด้วยวิธีเดียวกันและเปิดตาทีละLayer จนหมด Layer สุดท้ายที่ผมต้องการ

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

7.ถ้าคนที่ไม่ต้องการแต่งเอฟเฟค ที่จุดนี้ถือว่าเสร็จแล้วครับ สามารถนำไปใช้ได้เลยโดยลองกดปุ่ม Play เพื่อดูภาพที่เราจะได้ครับ แต่ทีนี้ผมจะแนะให้ลึกไปหน่อยนึงครับ เพื่อแนะวิธีการเพิ่มเฟรมย่อยเพื่อให้การเปลี่ยนเฟรมดูนุ่มนวลขึ้น ใกล้ๆปุ่ม Play เราจะเห็นรูปห่วงโซ่จางๆชื่อ Tween... ดังรูปครับ

8.ให้คลิกที่เฟรมแรกแล้วคลิก Tween และเซตค่าดังรูปนะครับ (Frame to Add หมายถึงจำนวนเฟรมที่ถูกแทรกโดยโปรแกรมเพื่อให้ดูนุ่มนวลขึ้นในการ เปลี่ยนเฟรม ค่ายิ่งมากยิ่งนุ่มนวลมากเหมือนภาพยนต์ครับ ทำอย่างนี้กับทุกๆเฟรมนะครับ

9.ทดลองเล่นโดยกดปุ่ม Play จนพอใจแล้วค่อยเซฟออกมาเพื่อนำไปใช้งานด้วยคำสั่ง File > Save Optimize As... เท่านั้นครับ แล้วตั้งชื่อให้มันดังรูปครับ เราก็ได้ภาพที่พร้อมจะใช้งานแล้วครับ การนำไปใช้ก็เหมือนการอัพรูปแบบ .jpg ทั่วไปครับ เพียงแต่ภาพของเรามันเคลื่อนไหวได้ สนุกไหมล่ะครับ ลองดูนะครับ



ผลงานที่ได้ครับ




อ่านความคิดเห็น

ความคิดเห็นที่ 11
เกินเหตุ วันที่ : 07/01/2011 เวลา : 07.52 น.

(0)

มาช้าไปสองปี...แต่ก็ขอบคุณครับ
ความคิดเห็นที่ 10
ย่าดา วันที่ : 09/01/2009 เวลา : 03.15 น.
http://oknation.nationtv.tv/blog/dada
วิญญานอิสระโบยบิ http://www.oknation.net/blog/freesoultofly

(0)
มาอ่านไว้ก่อน ขอบคุณค่ะ
ความคิดเห็นที่ 9
เมธา วันที่ : 15/10/2008 เวลา : 13.09 น.
http://oknation.nationtv.tv/blog/talkwithMetha

(0)
ขอบคุณมากครับ
ความคิดเห็นที่ 8
Anocha-Library วันที่ : 09/10/2008 เวลา : 16.44 น.
http://oknation.nationtv.tv/blog/anocha-library

(0)
ดีใจจังมาลงให้แล้ว เคยทำได้แต่ลืมค่ะ เมื่อวันก่อนลองทำแต่มันไม่เคลื่อนไหว สงสัยจะผิดพลาดตอน save ค่ะ
ความคิดเห็นที่ 7
thitimedia วันที่ : 09/10/2008 เวลา : 16.22 น.
http://oknation.nationtv.tv/blog/thitiporn
ด้วยความจริงใจ ฐิติพร ก้อนแก้ว http://www.thitimedia.com

(0)

ยอดมาก โหวต 1 ครับ
ความคิดเห็นที่ 6
spyone วันที่ : 08/10/2008 เวลา : 13.13 น.
http://oknation.nationtv.tv/blog/spyone
  โลกหมุนด้วยความรัก

(0)
ขอบคุณค่ะ
ความคิดเห็นที่ 5
รวงข้าวล้อลม วันที่ : 07/10/2008 เวลา : 18.55 น.
http://oknation.nationtv.tv/blog/roungkaw
กัลยาณมิตร    เป็นสิ่งหาง่ายเสมอ   แค่รู้จักคำว่า....ให้....และคำว่า...รับ 

(0)
ค่ะน่าสนใจค่ะ ว่างๆจะลองเล่นบ้าง
ความคิดเห็นที่ 4
คนโทใส่น้ำ วันที่ : 07/10/2008 เวลา : 17.11 น.
http://oknation.nationtv.tv/blog/konto
It's not where you start. It's where you finish.

(0)
แจ่มอีกแล้ว
ความคิดเห็นที่ 3
สิงห์มือซ้าย วันที่ : 07/10/2008 เวลา : 14.19 น.
http://oknation.nationtv.tv/blog/SingMeuSai
ร้านพร สิงห์มือซ้ายwww.facebook.com/lefthandshop 

(0)
ขอบคุณค่ะ แล้วจะลองหัดทำดูค่ะ
ความคิดเห็นที่ 2
Supawan วันที่ : 07/10/2008 เวลา : 14.15 น.
http://oknation.nationtv.tv/blog/supawan

(0)
ขอบคุณค่ะ ....
ความคิดเห็นที่ 1
พิราบดำ วันที่ : 07/10/2008 เวลา : 14.07 น.
http://oknation.nationtv.tv/blog/pat-1
เมืองมะขามหวาน  

(0)
แจวมาก ครับ
แสดงความคิดเห็น


ถึง บล็อกเกอร์ ทุกท่าน โปรดอ่าน
   ด้วยทาง บริษัท จีเอ็มเอ็ม แกรมมี่ จำกัด (มหาชน) ได้ติดต่อขอความร่วมมือ มายังเว็บไซต์และเว็บบล็อกต่าง ๆ รวมไปถึงเว็บบล็อก OKnation ห้ามให้มีการเผยแพร่ผลงานอันมีลิขสิทธิ์ ของบริษัท จีเอ็มเอ็ม แกรมมี่ฯ บนเว็บ blog โดยกำหนดขอบเขตของสิ่งที่ห้ามทำ และสามารถทำได้ ดังนี้
ห้ามทำ
- การใส่ผลงานเพลงต้นฉบับให้ฟัง ทั้งแบบควบคุมเพลงได้ หรือซ่อนเป็นพื้นหลัง และทั้งที่อยู่ใน server ของคุณเอง หรือ copy code คนอื่นมาใช้
- การเผยแพร่ file ให้ download ทั้งที่อยู่ใน server ของคุณเอง หรือฝากไว้ server คนอื่น
สามารถทำได้
- เผยแพร่เนื้อเพลง ต้องระบุชื่อเพลงและชื่อผู้ร้องให้ชัดเจน
- การใส่เพลงที่ร้องไว้เอง ต้องระบุชื่อผู้ร้องต้นฉบับให้ชัดเจน
จึงเรียนมาเพื่อโปรดปฎิบัติตาม มิเช่นนั้นทางบริษัท จีเอ็มเอ็ม แกรมมี่ฯ จะให้ฝ่ายดูแลลิขสิทธิ์ ดำเนินการเอาผิดกับท่านตามกฎหมายละเมิดลิขสิทธิ์
OKNATION



กฎกติกาการเขียนเรื่องและแสดงความคิดเห็น
1 การเขียน หรือแสดงความคิดเห็นใด ๆ ต้องไม่หมิ่นเหม่ หรือกระทบต่อสถาบันชาติ ศาสนา และพระมหากษัตริย์ หรือกระทบต่อความมั่นคงของชาติ
2. ไม่ใช้ถ้อยคำหยาบคาย ดูหมิ่น ส่อเสียด ให้ร้ายผู้อื่นในทางเสียหาย หรือสร้างความแตกแยกในสังคม กับทั้งไม่มีภาพ วิดีโอคลิป หรือถ้อยคำลามก อนาจาร
3. ความขัดแย้งส่วนตัวที่เกิดจากการเขียนเรื่อง แสดงความคิดเห็น หรือในกล่องรับส่งข้อความ (หลังไมค์) ต้องไม่นำมาโพสหรือขยายความต่อในบล็อก และการโพสเรื่องส่วนตัว และการแสดงความคิดเห็น ต้องใช้ภาษาที่สุภาพเท่านั้น
4. พิจารณาเนื้อหาที่จะโพสก่อนเผยแพร่ให้รอบคอบ ว่าจะไม่เป็นการละเมิดกฎหมายใดใด และปิดคอมเมนต์หากจำเป็นโดยเฉพาะเรื่องที่มีเนื้อหาพาดพิงสถาบัน
5.การนำเรื่อง ภาพ หรือคลิปวิดีโอ ที่มิใช่ของตนเองมาลงในบล็อก ควรอ้างอิงแหล่งที่มา และ หลีกเลี่ยงการเผยแพร่สิ่งที่ละเมิดลิขสิทธิ์ ไม่ว่าจะเป็นรูปแบบหรือวิธีการใดก็ตาม 6. เนื้อหาและความคิดเห็นในบล็อก ไม่เกี่ยวข้องกับทีมงานผู้ดำเนินการจัดทำเว็บไซต์ โดยถือเป็นความรับผิดชอบทางกฎหมายเป็นการส่วนตัวของสมาชิก
คลิ้กอ่านเงื่อนไขทั้งหมดที่นี่"
OKnation ขอสงวนสิทธิ์ในการปิดบล็อก ลบเนื้อหาและความคิดเห็น ที่ขัดต่อความดังกล่าวข้างต้น โดยไม่ต้องชี้แจงเหตุผลใดๆ ต่อเจ้าของบล็อกและเจ้าของความคิดเห็นนั้นๆ
   

กลับไปหน้าที่แล้ว กลับด้านบน