Studiโอ๊ะ!

ต้องนี่ก่อนเลย แม้จะเลยมานิดหน่อยแล้วก้ขอพูดอีกทีละกันฮะ

Happy New Year 2009!!! Huyahhhhh.... สวัสดีปีใหม่นะครับพี่น้องงงง (เสียงพากย์ด้วยน้าแอ๊ดนะฮะ)

(´ω｀pq|*A HAPPY NEW YEAR*|pq´ω｀)

ฮ่าๆๆ Entry นี้เกิดขึ้นเนื่องด้วยเทศกาลปีใหม่นี่แหละครับ คืนวันที่ 31 ธันวาคม กระผมได้ทำการค้นหาทั่ว google เป็นจำนวน 2-3 หน้าด้วยกัน เพื่อหา ecard สวยๆ จะส่งในเทศกาลนี้ แต่จนแล้วจนรอดก็หาที่ถูกใจไม่ได้ซะที พอเจอที่น่าสนใจก้ต้องสมัครสมาชิกอะไรอีก โอ่ยย ขัดใจเป็นที่สุดครับ ในที่สุดเวลาราวๆ 22.00 ก็ตัดใจ ทำเองซะดีกว่าแฮะ.....

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

อารมณ์ตอนนั้นคงเหมือนไมเคิล จอร์แดนที่ตัดสินใจกลับมาเล่นบาสอีกครั้งมั้งครับ ฮ่าๆๆ เพราะว่าอะไรๆ ก้ดูจะห่างหายไป มันยังพอจำได้คร่าวๆ ว่า เอ้ย ต้องทำแบบนี้ๆ นะ แต่รายละเอียดมันกลับจำไม่ได้ซะงั้นอะ ก็เลยต้องมารื้อฟื้นกันใหม่ซะนานพอสมควร

เกริ่นมาซะยาว เข้าเรื่องเลยดีกว่า ฮ่าๆๆ วันนี้กระผมนำ script ที่น่าสนใจมานำเสนอครับ จากการมั่วในคืนนั้น ผมก้ได้ ecard ออกมาสมใจ เลยมาขอบันทึกไว้ซักนิดว่ามันยังไงนะฮะ ที่เอามาแปะวันนี้คือ...

Snow effect

นี่เลยครับการทำหิมะตกบนฉากของเรา เอ่ออ script นี้คิดว่าคงใช้ได้ทั่วไปนะครับเพราะว่าผมใช้ Flash v.8 ในการทำ ค่อนข้างเก่ามากทีเดียว เหะๆ

มาเริ่มกันเลยดีกว่าครับ

1. ขั้นแรกเลย สร้าง new flash document นะครับ จัดการกำหนดขนาดและสีพื้นหลังครับ ขนาดนั้นเท่าไรก้ได้นะฮะ เอาตามถนัด ส่วนสีพื้นนั้นก้แล้วแต่อีกเช่นกัน แต่ในเมื่อเราจะสร้างหิมะซึ่งมีสีขาวกันผมจะใช้สีพื้นหลังที่มันเข้มนะครับ หรือจะเปลี่ยนสีหิมะก้ได้แล้วแต่ศรัทธาครับ

เอ้ออ อีกเรื่องคือ Frame rate นะครับ set ไว้สูงนิดนึงเพื่อให้ animation ของเราดูนิ่มนวลขึ้นนะครับ

2. สร้างหิมะกันโลด เราจะทำกันง่ายๆ นะครับ เอาหิมะกลมๆ พอ หรือใครอยากจะให้มันเป็นเกร็ดก็แล้วแต่ศรัทธาเช่นกันครับ ใช้ circle tool สร้างกลมๆ สีขาวขึ้นมา เราไม่เอาขอบนะครับ ถ้ามีก็ลบขอบทิ้ง จากนั้นทำการคลิกขวา convert ให้มันเป็น movie clip (ใครจะสร้าง movie clip ก่อนแล้วค่อยสร้างกลมๆ ข้างในก้ได้นะครับ) แล้วก้ตั้ง property name ให้ movie clip นี้นะครับ ชื่อว่า snow

3. ทีนี้หิมะเราก้พร้อมจะตกแล้วนะครับ วะฮ่าฮ่า เรามาเขียน script ควบคุมการตกของหิมะกันดีกว่า ก่อนอื่นเราต้องมาคิดก่อนครับว่า หิมะเราจะตกยังไงดี หลังจากคิดซักพักกระผมสรุปได้ดังนี้

1. หิมะต้องมีขนาดแตกต่างกันไป
2. ต้องตกลงมาทั่วๆ ฉาก
3. ตกลงมาด้วยความเร็วไม่เท่ากัน
4. ตกลงมาตรงๆ คงแปลกๆ งั้นให้มันโค้งๆ ละกันเนาะ
5. อืมมม ให้มันจางหายไปขณะตกลงมาใกล้พื้นก้คงจะงามดีเหมือนกัน

จริงๆ แล้ว ตอนทำก็ไม่ได้ออกมาพร้อมกันหมดนี่นะฮะ แต่ค่อยๆ มาทีละอัน เหะๆ ก้ค่อยๆ เพิ่ม effect ไปเรื่อยๆ แต่ขอสรุปสั้นๆ แบบนี้ละกันครับ

จากนั้นก็มาเริ่มกันด้วยการตั้งตัวแปรเริ่มต้นดีกว่าครับ จาก requirement ด้านบน เรามาสร้างตัวแปรเริ่มต้นกันก่อน คลิกที่ตัวหิมะแล้วเปิดหน้าต่าง action ขึ้นมาครับ หรือกด F9 ก็ได้ ตัวแปรเริ่มต้นเราจะใส่ไว้ใน onClipEvent(load) นะครับ

1. ขนาดหิมะ
   • ขนาดหิมะกำหนดด้วย property this._xscale และ this._yscale นะครับ (this แสดงถึง object snow) เราจะ random เอานะครับ ดังนี้
   • this._xscale = this._yscale = 60 + Math.random() * 100;
   • xscale กับ yscale รับค่าเป็น percentage นะครับ ในที่นี้จริงๆ ก็คือ random 60-160% นั่นเอง (เราคงไม่ต้องการ 0% นะ)
2. ความเร็วในการตก
   • random อีกเช่นกันครับ เอาซัก 2-3 pixel ต่อครั้งกำลังดี
   • fall = 1 + Math.random() * 2;
3. จุดกำเนิดของหิมะ
   • random ให้มันอยู่นอก Stage นิดนึงจะได้ดูเหมือนตกลงมาจากข้างบนครับ
   • this._x = -10 + Math.random() * Stage.width;
   • this._y = -10 + Math.random() * Stage.height;
4. อัตราความโค้งของหิมะ (ในที่นี้เราใช้สมการ cos ในการสร้างเส้นทางการตกนะครับด้วย amplitude เท่ากัน)
   • random เลขออกมาระหว่าง 1 - Pi
   • curve = Math.random() * Math.PI;
   • และทำการ initiate ค่าขององศาครับ rad = 0;

เอาละ ครบแล้ว เราได้ทำการสร้าง characteristics ของหิมะแต่ละลูกเสร็จแล้วนะครับ สรุป script นิดนึง เหะๆ

onClipEvent (load) {
 fall = 1+Math.random()*2;
 curve = Math.random()*Math.PI;
 rad = 0; 
 this._xscale = this._yscale = 60+Math.random()*100;
 this._x = -10 + Math.random()*Stage.width;
 this._y = -10 + Math.random()*Stage.height;
}

ทีนี้ก็มาทำช่วง action กัน ใน onClipEvent(enterFrame)

script ใน event นี้จะทำงานทุกๆ ครั้งที่ object นี้แสดงบน frame นะครับ นั่นคือกำหนดด้วย Frame rate นั่นเอง ของผมก็จะทำงาน 25 ครั้งต่อวินาที เอาไว้ควบคุมการเคลื่อนที่ของหิมะครับ มาดู script กัน

1. การตกของหิมะ
   • ก็แค่ + ค่าของแกน y ด้วยตัวแปลความเร็วของเราครับ
   • this._y += fall;
2. ค่าความโค้ง
   • เราได้ทำการ random ค่าตัวนี้ออกมาแล้ว ทีนี้เพื่อให้มันโค้งสวยงาม เราจะหั่นค่านี้ออกอีกครับ เพราะว่า script นี้ทำงาน 25 ครั้งต่อวินาที มันจะโค้งเร็วไปถ้าเราไม่หั่นครับ จะดูไม่สวยงาม
   • rad += (curve/100);
   • จากนั้นก็ทำการเปลี่ยนค่าแกน x
   • this._x += Math.cos(rad);
3. การจาง
   • ยิ่งตกใกล้พื้นมากเท่าไรก็จางลงเท่านั้น อันนี้ก็ง่ายครับ นำความสูงของ stage มาคิดอัตราส่วนไปเลย เพื่อนำมาเป็น % ของค่า alpha
   • this._alpha = -1 * ( this._y / Stage.height )*100 + 105;
4. reuse ของหิมะ
   • เมื่อหิมะแต่ละอันนั้น หลุดออกนอก frame ไป เราจะทำการ reuse มันทันทีครับ หรือก็คือพอหิมะหลุดออกจากการมองเห็นแล้ว เราจะตั้งค่าให้มันตกลงมาใหม่นั่นเอง

สรุป script ส่วนนี้เลยละกันครับ

onClipEvent (enterFrame) {
 this._y += fall; 
 rad += (curve/100);
 this._x += Math.cos(rad);
 this._alpha = -1 * ( this._y / Stage.height )*100 + 105;
 if (this._y>=Stage.height) {
  this._y = -5;
 }
 if ((this._x>=Stage.width) || (this._x<=0)) {
  this._x = -10+Math.random()*Stage.width;
  this._y = -5;
 }
}

เอาละครับ พอเราตั้ง characteristics และ action ให้กับหิมะของเราเสร็จแล้ว ก็มาถึงขั้นสุดท้ายแล้วครับ นั่นก็คือการ populate หิมะของเราลงบน Stage นั่นเอง

ทำการเลือกที่ frame แรกของ timeline นะครับ แล้วเปิดหน้าต่าง action ใส่ script นี้เข้าไปโลด

for (k=0; k<80; k++) {
 duplicateMovieClip(this.snow, "snow"+k, k);
}

script นี้ก็แค่ทำการ duplicate object snow ที่เราสร้างไว้บน Stage ครับ ในที่นี้ผมจัดไป 80 ลูก พองาม เพิ่มลดกันได้ตามศรัทธาเช่นเดิมครับ ทีนี้ก็มายลโฉมหิมะเรากันซะหน่อยยยย เย้!

เรียบร้อยครับ พอดูได้ละนะ เหะๆ เอาไป custom กันได้ตามใจชอบครับ ไม่ว่าจะรูปร่างของหิมะ การเคลื่อนที่ อาจจะเพิ่มการหมุนเข้าไป หรือเปลี่ยนสี โอ้ มากมายครับ 

ฟองน้ำผุดขึ้นมาจากด้านล่าง.... โอ้ มั่วได้โล่ ฮ่าๆๆ

ทิ้งท้ายด้วย quote of the day

"Imagination is more important than knowledge"

สวัสดี(ปีใหม่)ครับ.......

edit @ 3 Jan 2009 19:43:07 by โอ๊ะ

edit @ 3 Jan 2009 19:45:22 by โอ๊ะ