AS ตอนที 3:วิ่งยาวๆกับ enterFrame

[X Saint]

ความเดิมตอนที่แล้ว เรากดปุ่มนึง ตัว MC ของเราก็วิ่งไป กึ๊ก นึง ใช่มั๊ยครับ
ทำยังไงให้กดทีเดียวแล้วมันก็วิ่งปรู๊ดยาวๆ แล้วค่อยหยุด ให้มันดูเหมือนกดแล้วค่อยๆวิ่งไปเอง ไม่ใช่ต้องคอยกดถี่ๆอยู่

กลไกที่เราต้องการคือ การทำซ้ำ

เรารู้จัก .onRelease .onPress. onRollOver จากตอนก่อนๆ ที่ทำให้กับปุ่ม ซึ่งเราเรียกว่า eventHandler กันแล้ว... คราวนี้มารู้จักเพื่อนใหม่ .onEnterFrame ซึ่งจะช่วยให้เราทำซ้ำได้

หลักการทำงานของ onEnterFrame คือ ทำทุกๆครั้งของจังหวะเปลี่ยนเฟรม ... ตรงนี้อาจจะงงหน่อยนะคับ คือ ผมเรียกว่า จังหวะเปลี่ยนเฟรม... เพราะในความเป็นจริง เรามีเฟรมเดียว หรือเฟรมไม่เปลี่ยน มันก็จะเกิดการทำซ้ำๆ... แต่ที่เรียกว่าจังหวะเปลี่ยนเฟรม ... เพราะว่าตัว event นี้จะไปสัมพันธ์กับค่า frame rate ที่เราตั้งไว้... ปกติ flash จะให้ค่า = 12 frame per sec แปลว่า enterFrame จะทำงาน 12 ครั้ง ภายใน 1 วินาที... นั่นแปลว่าถ้าเราไปลด หรือ เพิ่มค่า fps ก็จะส่งผลต่อความเร็วของการทำคำสั่งภายใน enterFrame ด้วยคับ

เดิมเวลาเราต้องการ onRelease เราต้องเอาไปติดกับปุ่ม เป็น
butt.onRelease

ทีนี้เราต้องการใช้ onEnterFrame เราก็ต้องเอามันไปติดกับตัวอะไรสักอย่าง... โดยคุณสมบัติพื้นฐาน เราสามารถเอามันไปติดกับ MC ตัวใดๆ ก็ได้.. แต่ในที่นี้เราต้องการทำซ้ำเฉยๆ ไม่ได้ผูกพันกับ MC ใดๆ ง่ายที่สุดคือเอามันไปผูกติดกับ Timeline หลัก.... ซึ่ง เราเรียกว่า this จากการเขียน script ไว้ยัง Timeline หลัก... จึงได้รูปแบบของการใช้งานคือ

this.onEnterFrame = function() {
     คำสั่ง;
}

ดังนั้นถ้าเราทำแบบเดิม คือ บวกค่าให้ แกน x ของ MC ที่ชื่อว่า dot เราจะได้ script ดังนี้

this.onEnterFrame = function() {
   dot._x+=5;
   if(dot._x>300) {
      dot._x=0;
   }
}

ผลที่ได้
http://f0nt.com/forum/index.php?action=dlattach;topic=5925.0;id=9186

[X Saint]

แต่ว่าตัวอย่างข้างต้นไม่เกี่ยวกับปุ่ม ถ้าเราอยากให้มันกดปุ่มแล้ว dot วิ่งไประยะนึงแล้วหยุด จะทำยังไง
นั่นก็คือ เอาทั้ง onRelease กับ onEnterFrame มารวมกันซะ

คิดกันทีละขั้นนะคับ เริ่มจาก เราทำปุ่มก่อน ได้ โค้ด เป็น

butt.onRelease = function() {

}

ทุกครั้งที่กดปุ่มเราต้องการให้มันทำซ้ำ เราจึงใส่ onEnterFrame เข้าไปข้างใน

กลายเป็น

butt.onRelease = function() {
     dot.onEnterFrame = function() {
               dot._x +=5;
               if(dot._x>300) {
                    dot._x=0;
               }
     }
}

สังเกตดีๆนะคับ ผมไม่ใช้ this.onEnterFrame เพราะ enterFrame ถูกเรียกใช้จาก butt ทำให้ this ไม่ใช่ timeline หลักอีกต่อไป... ดังนั้นผมเลยเอาไปฝากไว้ที่ mc ที่ชื่อ dot แทน

โค้ดทำงานได้แล้วคับ!!!! แต่!!! แบบนี้เราจะได้การวิ่งไปตลอด คือ กดทีนึงมันก็วิ่งไปตลอดชีวิต...

แต่ที่เราอยากได้คือ กดทีนึงก็วิ่งไประยะนึงแล้วหยุด รอการกดใหม่จึงจะวิ่งต่อ... จึงต้องมีการกำหนดเงื่อนไข ว่าจะให้มันทำซ้ำกี่ครั้ง

ผมเลยกำหนดตัวแปรสำหรับนับ ชื่อ i ขึ้นมา
โดยกำหนดให้ทุกครั้งที่เรากดปุ่ม i จะเท่ากับ 0
แล้วกำหนดเงื่อนไขว่าต้องการให้มันทำซ้ำ 20 ครั้ง นั่นคือมันจะวิ่งด้วยความเร็ว 5 pixel แต่ว่าทำซ้ำ 20 ครั้ง... แปลว่า ทุกครั้งที่กด มันจะวิ่งไประยะทาง 20 * 5 = 100 pixel นั่นเอง

ทำให้เราได้โค้ดออกมาเป็น

butt.onRelease = function() {
   i=0;
   dot.onEnterFrame = function() {
      if(i<20) {
         dot._x +=5;
         if(dot._x>300) {
            dot._x=0;
         }
         i++;
      }
   }
}

ยังไม่จบครับ... เนื่องจากว่า onEnterFrame ยังคงทำงานต่อไป ถึงแม้ว่า dot จะไม่ขยับแล้วก็ตาม... นั่นเพราะ onEnterFrame ถูกเรียกมาแล้ว มันก็ยังคงทำงานต่อไปตลอดชีวิต... เพื่อความเป็นระเบียบเรียบร้อย เมื่อเราหยุดแล้ว... จึงควรทำให้ enterFrame หยุดทำงานด้วย โดยการ delete มันซะ เมื่อ i>20 จึงได้โค้ดใหม่เป็น

butt.onRelease = function() {
   i=0;
   dot.onEnterFrame = function() {
      if(i<20) {
         dot._x +=5;
         if(dot._x>300) {
            dot._x=0;
         }
         i++;
      } else {
         delete dot.onEnterFrame;
      }
   }
}

ปล. รู้ได้ไงว่า enterFrame ยังทำงานอยู่ ในเมื่อ dot มันก็ไม่ขยับแล้วนี่คะ ?
.... ยังจำ trace จาก ตอนที่ 1 ได้มั๊ยครับ... ลองใส่มันดูภายใน onEnterFrame ด้านนอก if(i<20) นะ ... แล้วจะเห็นว่า แม้ว่า dot จะหยุดวิ่งไปแล้ว... แต่ trace ก็ยังคงทำงานอยู่ตลอดเวลา

จากโค้ดข้างต้น ทำให้ได้ผลดังนี้

http://f0nt.com/forum/index.php?action=dlattach;topic=5925.0;id=9187

[X Saint]

คราวนี้ลองมาดูอะไรสนุกๆ กัน

จากเดิม เราให้
x = x + 5;

ความจริงดูเผินๆ ก็คือ เราบวกค่าให้กับ x ทีละ 5 ใช่ป่ะคับ

แต่ถ้าใครเคยเรียน math มา จะรู้ว่า x = x + 5 เป็นสมการเส้นตรง
ทำให้มันวิ่งเป็นเส้นตรงยังไงหล่ะ

ถ้าสมมุติเรารู้ว่าสมการ sin เป็นสมการรูปคลื่น ดังนั้น ลองเอาสมการ sin มาใช้กับโค้ดเดิมดูซิ๊
สมการ sin รูปแบบพื้นฐาน อยู่ในรูป

y = sin x

เอามาแปลงให้เหมาะสมกับการแสดงผลใน flash เป็น

dot._y =  50*Math.sin(dot._x/10)+50;

ดังนั้นเราจะได้โค้ดเป็น

this.onEnterFrame = function() {
   dot._y =  50*Math.sin(dot._x/10)+50;
   dot._x +=3;
   if(dot._x>300) {
      dot._x=0;
   }
}

ก็จะได้ผลดังนี้

http://f0nt.com/forum/index.php?action=dlattach;topic=5925.0;id=9188

มาลองเล่นสมการรูปอื่นๆบ้าง - สมการ ดาวกระจาย

http://f0nt.com/forum/index.php?action=dlattach;topic=5925.0;id=9189

ปล. ตัวอย่าง ดาวกระจายข้างต้น.. ผมใช้เทคนิคสร้าง MC ซ้ำด้วย ซึ่งไม่เกี่ยวกับที่จะทำเท่าไหร่ จึงขอละไว้ก่อนนะครับ.. เพียงแต่สมการนี้มันเคลื่นไหวแล้วมองยากว่าเป็นรูปอะไร เลยทำให้มันเป็นหางไว้จะได้ดูง่ายขึ้น

[♥ ชายเต่า ♥]

กรี๊ดๆ 

สุดยอด...

[แอ๊ะ]

เข้ามานั่งเรียนแต่เช้า 

สุดยอดมาก

[✌]

โว้วๆๆๆๆ

[หนูหรั่ง]

เทพมากเลยครับ 

[saa3]

ตรีโกณ

[X Saint]

การบ้าน

มี 2 ข้อนะคับ ข้อแรกก่อน... ข้อสองค่อยตามมา

1) ทำเหมือนตอนที่ 2 ครับ แต่ทำให้มันขยับ วิ่งๆ ได้เก๋ขึ้น โดยอาศัยประโยชน์จาก onEnterFrame ...

[♥ ชายเต่า ♥]

เดี๋ยวมั่วมาส่งครับ 

[X Saint]

เดี๋ยวมั่วมาส่งครับ 

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

ใช้แค่ช่วงแรก กับ ช่วงที่ 2 นะคับ... ช่วงที่ 3 ขำๆ

[icez]

ส่งงานค้าบ รวบยอดเลยแล้วกัน

http://f0nt.com/forum/index.php?action=dlattach;topic=5925.0;id=9198

[X Saint]

^
^

ทีแรกนึกว่ารูดำๆ เป็นประตู เดินเข้าไปได้ อุตส่าห์บังคับให้มาที่รูดำ...

แต่มันไม่เห็นมีอะไรเกิดขึ้นเลย

แล้วจะมีรูไปทำไม 

[✌]

ใช่

[♥ ชายเต่า ♥]

โอ้ว... มันส์...

http://f0nt.com/forum/index.php?action=dlattach;topic=5925.0;id=9199

แค่วางจุดหมุนไว้ที่ปีกครับ ไม่ต้องใช้สติปัญญาอะไรเลย 

นอกจาก _rotation