[tutorial]มาลองPseudo3Dกันดีกว่าง่ายกว่าที่คิ

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

โดยหลักการทำงานของตัว Pseudo นี้ก็คือการ attach เอา MovieClip ออกมาวางซ้อนกันหลายๆชั้นจนได้เป็นภาพที่ดูเสมือน 3D ขึ้นมา โดยแต่ละชั้นจะแสดงภาพแตกต่างกันไป(ให้นึกถึงหลักการเดียวกับการทำ CT scan (เขียนยังงี้หรือเปล่า) ที่แสกนสมองคนให้เห็นเป็นภาพตัดขวางน่ะครับ) วิธีนี้ฝรั่งเขาทำมานานแล้วครับ คาดว่าจะตั้งแต่ Flash6 เลยมั้งหรือไม่ก็ flash5 แต่ผมเพิ่งค้นพบ q>_<p

ไม่ต้องพูดพร่ำทำเพลงกันมาดูตัวอย่างกันก่อนดีกว่า

<a href="http://www.codeartschool.com/test/KaPseu3D/sample3.swf" target="_blank">http://www.codeartschool.com/test/KaPseu3D/sample3.swf</a>

ดูแล้วเป็นยังไงครับ ดูเนียนเหมือน 3D จริงๆด้วย ทั้งที่จริงๆแล้วมีโค๊ดไม่ถึง 40 บรรทัดเลยครับ ทีนี้ลองมาดูตัวอย่างง่ายๆของผมนะครับ เริ่มจาก template ที่ผมสร้างขึ้นเป็น Movie Clip มีการ animate ตามนี้

<a href="http://www.codeartschool.com/test/KaPseu3D/sample1_template.swf" target="_blank">http://www.codeartschool.com/test/KaPseu3D/sample1_template.swf</a>

ก็จะดูธรรมดาๆ ไม่มีอะไรแต่พอสั่งให้มัน attach ออกมาเรียงซ้อนกันเป็น step แล้วสั่งให้หมุนทุกอันพร้อมกัน สิ่งที่เราได้ก็คือ

<a href="http://www.codeartschool.com/test/KaPseu3D/sample1.swf" target="_blank">http://www.codeartschool.com/test/KaPseu3D/sample1.swf</a>

ทีนี้น่าจะพอเห็นภาพบ้างแล้วนะครับ มาลองดูตัวอย่างอีกอันนึง จาก Template แบบนี้

<a href="http://www.codeartschool.com/test/KaPseu3D/sample2_template.swf" target="_blank">http://www.codeartschool.com/test/KaPseu3D/sample2_template.swf</a>

เราก็จะได้แบบนี้

<a href="http://www.codeartschool.com/test/KaPseu3D/sample2.swf" target="_blank">http://www.codeartschool.com/test/KaPseu3D/sample2.swf</a>

เป็นยังไงครับ ง่ายไหมครับ หรือว่าอ่านแล้วงงตั้งแต่บรรทัดแรกหว่า - -"
วิธีนี้เป็นวิธีการทำ 3D แบบหลอกๆ ซึ่งอย่างที่บอกว่าหลอกๆ ดังนั้นหลักการพวก Z-Order อะไรพวกนี้ไม่มีแน่นอน การทำงานก็คงต้องนำไปประยุกค์ต่อไปว่าจะทำอย่างไรให้มันทำอะไรได้มากกว่านี้ แต่ถ้าใครต้องการแสดงโมเดลหมุนเฉยๆแบบนี้ก็ใช้ได้แล้ว ไม่ต้องใช้พวก Class 3D ต่างๆก็ได้ครับ เขียนโค๊ดไม่เยอะ แต่ฝึกการใช้จินตนาการหน่อย

ปล.ใครลองเอาไปทำได้อะไรสวยๆแล้วก็เอามาแบ่งกันดูมั่งนะครับ เอามาโพสลงกระทู้นี้เป็นหมวด Pseudo 3D กันเลยก็ได้ครับ ผมอยากเห็น

[มังกร]

แล้วมันทำยังไงกันอ่ะ 

แล้วมันทำยังไงกันอ่ะ 

สร้าง mc มาแล้ว attachMovie ออกมาเรียงซ้อนๆกันน่ะครับ ตามรูปประกอบ

[มังกร]

 

โหลดแฟลชไม่ขึ้นครับ

มันจะคล้ายๆ แบบนี้รึเปล่า http://www.u6isap.com

โหลดแฟลชไม่ขึ้นครับ

มันจะคล้ายๆ แบบนี้รึเปล่า http://www.u6isap.com

เอ..โหลดไม่ขึ้นซักอันเลยเหรอ แปลกจังแฮะ...แล้วเว็บที่ให้มาเข้าไปลแ้วมันเป็น undercondtruction หรือว่าจะหมายถึงตัวหนังสือที่เลื่อนตามเมาส์ตัวนั้น ถ้าใช่ก็หลักการน่าจะใกล้ๆกันนะ

ทำ Sample Code ไว้ให้ไปลองนะครับ โหลดไปแล้วเปิด แก้ Movie Clip ใน Library ที่ชื่อ mcBuilding ได้เลยครับ แล้วกด Ctrl+Enter ทดสอบดู
http://www.codeartschool.com/test/KaPseu3D/sample1.rar

ลองทำ update มาให้ดูถ้าสนใจก็โหลด file ข้างบนไปลองทำได้เลยนะครับ
<a href="http://codeartschool.com/test/KaPseu3D/sample4.swf" target="_blank">http://codeartschool.com/test/KaPseu3D/sample4.swf</a>

โอ้ว ขอบคุณครับ เดี๋ยวลองดูครับ