อนุบาลงานแฟลช

บทต่อไป กำลังจะตามมาฮะ รอน้องเต่าคลอดก่อน   


เปล่าหรอก สำหรับผม  ที่จริงรอ หลังวันพฤหัส นะจ้ะเด็กๆ   

จ้ะ   

ขอปักหมึกไว้เลยนะครับ

รอด้วยคน..

[มังกร]

เกดทำยัง ส่งเดะๆๆๆๆๆ

[มังกร]

อยากเล่นอีกอ้ะ

อ่ะส่งก็ได้ อันนี้ทำใหม่ ตอนแรกที่ทำวาดเป็นรูปหมีด้วย แต่ไม่ได้เซฟไว้ 


<a href="http://img2.f0nt.com/flash/84ef32d384481e224afddea8fcb9c96d.swf" target="_blank">http://img2.f0nt.com/flash/84ef32d384481e224afddea8fcb9c96d.swf</a>






ไปดูของเก่ามีที่ฝึกทำเยอะเลยแต่ลืมวิธีทำไปซะได้ รอเรียนต่อค่ะ 

["Mask คือการเจาะรู"]

มาแล้วครับ
Masking

Masking เป็นเทคนิคที่หากินได้มากมายมหาศาลในโปรแกรมนี้ครับ
ใช้หลอกตา ใช้ปิดบัง ใ้ช้ทำเทคนิคพลิกแพลงไร้กระบวนท่า
ไร้กระบวนท่า ก็เป็นกระท่าประการหนึ่ง...
อย่าไรก็ตาม ... ก่อนจะพลิกแพลงวรยุทธ์ก็จะต้องฝึกหลักการพื้นฐานเสียก่อน

Basic Masking
ในการทำสิ่งนี้ควรทราบคำศัพท์พื้นฐานดังนี้

Stage = พื้นที่สีขาวใช้แสดงผล หรืออาจะเรียกว่า เวทีแสดงงาน เมื่อ preview เราจะมองเห็นแต่บริเวณ stage เท่านั้น
Layer = ชั้นของการทำงาน เปรียบเป็นแผ่นใส ที่มองทะลุลงไปได้หมด ทุกแผ่นเป็นอิสระจากกัน
Mask = การที่แผ่นใสกลายเป็นกระดาษทึบ และเจาะรูลงไปมองเห็น layer ด้านล่าง

"Mask คือการเจาะรู"

Let's go
<a href="http://img2.f0nt.com/flash/807e2f14aa49229a98eaf96d5777032d.swf" target="_blank">http://img2.f0nt.com/flash/807e2f14aa49229a98eaf96d5777032d.swf</a>
เราจะมาทำ mask อย่างง่ายกันก่อน เพื่อเป็นพื้นฐานในการเล่นที่สนุกสนานต่อไป
จากภาพเราจะเห็นสาวแว่นหน้าเนียนคนหนึ่ง กรอบแว่นเหล็ก ตาสีน้ำตาล ขาว สวย น่ารัก ...
หลบอยู่ข้างหลัง โดยมี layer ที่เราเจาะรูเอาไว้ วิ่งผ่าน
ไอ้ layer นี้วิ่งผ่านไปตรงไหน เราก็มองเห็นตรงนั้นของเธอ 



๑. Import รูปมารูปหนึ่ง (ที่จริงไม่จำเป็นต้องรูปภาพนะ วาดแมวขึ้นใน flash เลยก็ได้)
๒. สร้าง layer ใหม่ขึ้นมาหนึ่งอัน โดยคลิกที่รูปกระดาษพับมุม (อยู่บน timeline)
จะมี layer ใหม่เพิ่มขึ้นมาด้านบน (พึงระลึกว่าการจัดเรียง layer มีผลต่อการแสดงผล ดังนั้นมันต้องอยู่ข้างบน)



๓. วาดรูปสีเหลี่ยม หรือวงกลม หรืออะไรก็ตามแต่ (แล้วแต่ว่าเราจะเจาะรูเป็นรูปอะไร) สีของมันไม่มีความหมาย เพราะเดี๋ยวมันจะหายไป
๔. คลิกขวาที่ layer ด้านบน (ที่พึ่งจะวาดรูปสี่เหลี่ยมลงไป) การคลิกให้คลิกบริเวณสีเทาของชื่อ layer (คลิกขวาที่ชื่อเลยก็ได้)
๕. เลือก Mask จะเห็นความเปลี่ยนแปลงดังต่อไปนี้




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

สังเกตที่ layer สัญลักษณ์ข้างหน้าจะเปลี่ยนไป
เลเยอร์ด้านบนเปรียบเสมือนกระดาษเจาะรู มองละทุลงมา



เอาล่ะ ตอนนี้เราไม่สามารถแก้ไขอะไรได้เลย อ๊าาาา
อย่าพึ่งตกใจ... เนื่องจากเมื่อเรา mask layer แล้ว
layer ดังกล่าวพร้อมทั้งลูกๆ ของมันจะโดย Lock ไปโดยปริยาย
การ lock ก็คือการป้องกันการแก้ไขนี่แหละ ถ้าเราจะแก้ไขมันก็

๖. ปลดล็อคซะ (ปลด log แล้วก็จะกลายเป็น expo)
โดยการคลิกที่แม่กุญแจตรง layer ที่เราจะแก้ไข

ตอนนี้เราก็จัดการกับเจ้ากล่องแดงได้ตามสบาย จะบิด หมุน ขยาย หด ฯลฯ ก็ตามใจ



๗. ทำ motion tween ให้กับกล่องแดง ย้ายมันลงมาด้านล่าง
*** การทำ motion tween โดยพี่จักรี  http://www.f0nt.com/forum/index.php/topic,11366.msg727459.html#msg727459

๘ .แล้วอย่าลืม  Insert frame ที่เลเยอร์ด้านล่าง
เพื่อให้สาวแว่นของเราปรากฎอยู่ตลอดเวลาที่กล่องแดงวิ่งผ่าน
ถ้า motion tween กล่องไป 50 frame ก็ Insert frame สาวแว่นไปที่ frame ที่ 50 ให้เท่ากันครับ



๙ .ตอนนี้ก็เสร็จเรียบร้อยแล้ว preview ได้เลย
แต่ถ้าไม่อยากให้มันรกตา แดงแป๊ดอย่างนี้ ก็ lock กลับเข้าไปเหมือนเดิม เป็นอันเสร็จครับ 


ภ้าตรงไหนไม่เคลียร์แจ้งเลยครับ จะได้ทำให้ชัดเจน
เพราะเดี๋ยวจะทำแบบพลิกแพลงขึ้นเรื่อยๆ ตามมาครับ

พลิกแพลง

จากหลักการเบื้องต้น เราสามารถทำแบบนี้ก็ได้

<a href="http://img2.f0nt.com/flash/ff877b2cac970738074ded3d79616d66.swf" target="_blank">http://img2.f0nt.com/flash/ff877b2cac970738074ded3d79616d66.swf</a>

โดยทำ motion tween ให้กับกล่องแดงต่อไปเรื่อยๆ
*** เพิ่มเติม motion tweening โดยเต่า http://www.f0nt.com/forum/index.php/topic,11366.msg728402.html#msg728402

แบบนี้
<a href="http://img2.f0nt.com/flash/4654103f016b825141cc25a8851120df.swf" target="_blank">http://img2.f0nt.com/flash/4654103f016b825141cc25a8851120df.swf</a>
ครับถ้าคลิกขวา mask layer ก็จะได้ตามแบบอันแรก

ส่งงานค่ะ   


<a href="http://img2.f0nt.com/flash/c361e7807fb7c8556eaa035f931003db.swf" target="_blank">http://img2.f0nt.com/flash/c361e7807fb7c8556eaa035f931003db.swf</a>

ต่อไปจะเรียก พื้นที่ทำงาน ว่า stage บ้าง 
ส่งด้วย   

<a href="http://img2.f0nt.com/flash/a6cd9d47a45a0455811f5831274109e6.swf" target="_blank">http://img2.f0nt.com/flash/a6cd9d47a45a0455811f5831274109e6.swf</a>

 

[สร้าง Layer ขึ้นมา 3 อันImport ภาพมาวางใน layer ล่างสุด และ layer กลาง ทั้งสอง layer มีภาพเดียวกันวางซ้อนกันสนิทพอดีและจะวาดดาวขึ้นมาใน layer บนสุด]

ส่งงานรวดเร็วทันใจ 

พลิกแพลง ๒

<a href="http://img2.f0nt.com/flash/922abbdf2260e0b602b9ead3263d3837.swf" target="_blank">http://img2.f0nt.com/flash/922abbdf2260e0b602b9ead3263d3837.swf</a>
ผมเอาเทคนิคที่กล่าวๆ มามารวมกันนะครับ
ในรายละเอียดจะไม่พูดถึง แต่จะอธิบายขั้นตอนครับ

ในการเริ่มต้นแบบง่ายที่สุด
สร้าง Layer ขึ้นมา 3 อัน
Import ภาพมาวางใน layer ล่างสุด และ layer กลาง ทั้งสอง layer มีภาพเดียวกันวางซ้อนกันสนิทพอดี
และจะวาดดาวขึ้นมาใน layer บนสุด



๑.ในการสร้างรูปภาพจำพวกสามเหลี่ยม สี่เหลี่ยม
เรายังสามารถสร้างรูปเรขาคณิตอบบสำเร็จรูปแบบอื่นๆ ได้โดย
ใช้เครื่องมือตัวนี้ครับ polyStar ใช้สร้างพวกรูปทรง 3 เหลี่ยมขึ้นไป
และทำดาวแฉกๆ ได้ด้วย



พอเลือก polystar แล้วก็คลิก Option ครับ
จะมี หน้าต่างเด้งขึ้นมา
เลือก Style เป็น star ถ้าอยากให้เป็นแฉกๆ
Number of sides จำนวนด้าน ถ้าเป็นดาวก็ จำนวนแฉก
Star point size ขนาดของแฉก ตั้งแต่ 0.0 - 1.0 ค่ามากแฉกจะอ้วนและสั้น



ผมวาดดาว 15 แฉกขนาดใหญ่ขึ้นมา แล้วทำ motion tween ให้วิ่งไปวิ่งมา
แบบ Basic mask ข้างบน และทำให้มันหมุนๆ ตามวิธี tween ในหน้าสอง ***http://www.f0nt.com/forum/index.php/topic,11366.msg728402.html#msg728402

จากนั้น Mask



หลังจาก mask แล้ว สอง layer ข้างบนจะถูกล็อค เราก็มาจัดการกับรูปข้างล่าง
คลิกขวาแล้วเลือก Convert to Symbol ตรงนี้เพื่อให้รูปกลายเป็นวัตถุที่มีคุณสมบัติโปร่งแสงได้



ตั้งชื่อว่าอะไรก็ได้นะ
เป็น Graphic หรือ Movie clip ก็ได้
กด OK โลด



คลิกที่รูปภาพทีนึง ให้มั่นใจว่าเลือกมันอยู่
ถ้ามันเป็น symbol แล้วขอบมันจะเป็นสีฟ้าครับ

ที่ Properties เลือก Color เป็น Alpha เพื่อปรับความโปร่งใส
เท่าไหร่ก็ได้ตามความพอใจครับ

เท่านี้ก็เสร็จ

---------------------

หลักการไม่มีอะไรเลยครับ แค่เอาภาพมาซ้อนไว้ข้างหลังเท่านั้นเอง
พอจุดที่เรา mask ไว้วิ่งผ่านไปก็ดูเหมือนมันมีสีสดขึ้นมา
จริงๆ แล้วมันคนละภาพ คนละ layer กัลล์

แปะ แปะ แปะ 

เยี่ยมมากเดี๋ยวทำมาส่งค่า