อนุบาลงาน ActionSctipt

[ว่ากันด้วยเรื่อง การทำซ้ำ หรือ]

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

ว่ากันด้วยเรื่อง การทำซ้ำ หรือ duplicateMovieClip()

duplicate   [VT] จำลอง, See also: ทำซ้ำ, ถ่ายสำเนา, Syn. reproduce, copy counterfeit
duplicate   [VT] เพิ่มเป็น 2 เท่า, See also: ทำเป็น 2 เท่า, Syn. redouble, repeat, reproduce, double, Ant. halve
duplicate   [N] สำเนา, See also: สิ่งที่เหมือนกัน, Syn. copy, replica, photocopy, Ant. original
duplicate   [ADJ] เหมือนกัน, Syn. identical, like, same, Ant. different; opposed

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

ตัวอย่างการเขียน

duplicateMovieClip(mc,"newname",depth);

mc คือmc ต้นแบบที่เราจะทำซ้ำ
"newname" คือ ชื่อของ mc ที่สร้างใหม่
depth คือลำดับชั้นความลึก (ยังจำกันได้ไหมจ๊ะ)

ตัวอย่างเช่น

duplicateMovieClip(_mc,"mc_1",this.getNextHighestDepth());

ก็คือ เราจะทำซ้ำไอ้เจ้า _mc โดยใส่ชื่อใหม่ให้มันว่า "mc_1" และเซ็ทลำดับชั้นมันโดย this.getNextHighestDepth()
ไอ้ตัวหลังนี่หมายถึงว่า เซ็ทลำดับชั้นให้สูงกว่าตัวต้นแบบ

*** ส่วนมากถ้า duplicate เมื่อไรจะใช้ getNextHighestDepth() เป็นตัวจัดลำดับชั้น  ( มั่วเอาจาก Help  )

จำอันนี้ได้ไหมครับ ตัวแรนด้อมดวงดาว
ผมก็ใช้ duplicateMovieClip() นี่แหล่ะครับช่วยจัดการ

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

อันบนนั้นมีการใช้ลูปเข้าช่วยให้ทำซ้ำทีละมากๆ เดี๋ยวบทหน้าเราจะมา ลูป กัน 

คราวนี้เราจะมา "คลิกแล้ว ทำซ้ำ mc หนึ่งครั้ง และแรนด้อมขนาด"

โดยเราจะคลิกเม้าส์ที่งาน แล้วทำซ้ำ mc ตรงตำแหน่งกดเม้าส์ แรนด้อมขนาด mc ที่สร้างมาใหม่

- สร้าง mc ดาวเล็กๆ หนึ่งดวง
- ตั้งชื่อว่า _mc

ก็

_root.onMouseDown=function(){      //เมื่อมีการกดเม้าส์ จะรันฟังก์ชั่นนี้
duplicateMovieClip(_mc,"mc_1",this.getNextHighestDepth());  //ทำซ้ำ _mc โดยชื่อใหม่คือ "mc_1" จัดลำดับชั้นให้สูงกว่า
mc_1._x = _xmouse;                   // ให้อยู่ตำแหน่งเดียวกับเม้าส์
mc_1._y = _ymouse;                   // ให้อยู่ตำแหน่งเดียวกับเม้าส์
rnd = random(90)+10;               //สุ่มค่าขึ้นมาระหว่าง 10 - 100
mc_1._xscale = rnd;                  //เซ็ทขนาดสเกลให้เท่ากับค่าที่สุ่มขึ้นมา
mc_1._yscale = rnd;                 //เซ็ทขนาดสเกลให้เท่ากับค่าที่สุ่มขึ้นมา (ที่ใช้ค่าเดียวกันเพราะ สเกลจะได้ไม่เพี้ยนครับ)
};

ลองได้เลยครับ

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

จะพบว่า มันสร้างแล้วววววววว  ....  แต่พอเราจะสร้างอีก      มันดันลบอันที่สร้างออกมาเมื่อกี้ไปซะงั้น 

สาเหตุคือ อะไรครับ ........ 

มาฝึกวิเคราะห์สคริปกันครับ
(ฝึกบ่อยๆครับ มองให้ละเอียดจนเป็นนิสัย แล้วเราจะเจอปัญหาเอง และแก้ปัญหาได้เองครับ)

อ่านตามช้าๆ แล้วคิดตามครับ

เพราะเราสั่งให้สร้างจากต้นแบบคือ _mc และชื่อใหม่คือ "mc_1" เมื่อสร้าง mc_1 มาแล้ว
ถ้าจะสั่งให้มันสร้างใหม่อีก มันคงไม่สร้างนิ เพราะบน stage นั้นมี mc_1 อยู่แล้วไงครับ

อ้าวววว  แล้วทำไมมันถึง ลบตัวเก่า แล้วสร้างตัวใหม่ล่ะ เห็นอยู่ว่ามันสร้างใหม่ 

  มันสร้างแค่คลิกเดียวคลิกแรกล่ะครับ คลิกต่อไปมันจะไม่สร้าง แต่จะเอาอันที่สร้างเมื่อกี้มาแป๊ะตรงตำแหน่งเม้าส์ครับ
เพราะมันจะรันผ่านสคริป duplicate ไปเจอกับ สคริปตัวที่สั่งงาน mc_1._x = mc_1._y =   ......บลา บลา บลา
มันก็เลยเปลี่ยนตำแหน่งตามเม้าส์ และแรนด้อมสเกลด้วยไงล่ะครับ

พอเข้าใจนะครับ 

แล้วเราจะแก้ปัญหาอย่างไรล่ะ

อย่างน้อย ต้องไม่ให้ชื่อซ้ำกันล่ะ อืมมมมม อันนี้แหล่ะ สำคัญเลย

โดยวิธีง่ายๆ คือ  สร้างตัวแปรขึ้นมาตัวนึงเอาใว้ต่อท้ายชื่อ ชื่อจะได้ไม่ซ้ำกันแน่นอนไงล่ะ

- หลักการคือ ให้ตัวแปรนี้เป็นตัวเลข เริ่มจากศูนย์ก็ได้ง่ายๆ
แล้วเมื่อมีการคลิกเม้าส์เพื่อ duplicate ก็ให้เอาตัวแปรนี้ไปต่อท้ายชื่อ mc ที่สร้างใหม่ ก็จะได้ mc0
แล้วบรรทัดสุดท้ายของสคริปก่อนจบ ก็บวกตัวแปรขึ้นไป 1 ค่า ตัวแปรตัวนี้ก็จะเป็น 1
- พอรอบที่สอง  mc ที่สร้างใหม่ ตัวแปรที่บวกค่าแล้วมาต่อ ก็จะใด้ชื่อว่า mc1 อ๊ะ.....เห็นไหม ไม่ซ้ำกันแล้วครับ
- รอบต่อไปก็ mc2 mc3 mc4 mc5 ไม่ซ้ำแล้วคร้าบบบบบ 

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

i = 1
trace("mc_"+i) // output  mc_1

เอาล่ะสาธยายมาซะนานนนนนนน จนเมาตัวหนังสือกันไปหลายตลบ

เราจะมาแก้สคริปอันตะกี้กันครับ

- ให้เพิ่มตัวแปรเข้าไปตั้งไว้เริ่มที่ 1 ก็ได้
- เอามาต่อท้ายชื่อ
- สั่งค่าต่างๆ
- บวกตัวแปรเพิ่มขึ้น 1

ก็จะได้สคริปประมาณนี้ครับ

i=1    //ให้เพิ่มตัวแปรเข้าไปตั้งไว้เริ่มที่ 1
_root.onMouseDown = function() {   
duplicateMovieClip(_mc,"mc_"+i,this.getNextHighestDepth()); //เอามาต่อท้ายชื่อ
   _root["mc_"+i]._x = _xmouse; // เรียกชื่อให้ถูกว่าตัวไหนเป็นตัวไหน
   _root["mc_"+i]._y = _ymouse; //
   v = random(90)+10;
   _root["mc_"+i]._xscale = v; //
   _root["mc_"+i]._yscale = v;  //
   i++;   // บวกตัวแปรเพิ่มขึ้น 1 เพื่อให้รอบต่อไปจะได้ไม่ซ้ำกับรอบนี้ครับ
};

เอาล่ะทดสอบสคริปครับ

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

 

มาดูตรงนี้นิดนึงครับ

_root["mc_"+i] ไม่ขออธิบายว่าทำไมต้องเขียนรูปแบบให้จำยากแบบนี้นะครับ  ( มันเขียนมาแบบนี้ครับ  )

สมมุติ i = 1 // _root["mc_"+i]  ก็คือ    _root.mc_1
สมมุติ i = 250 // _root["mc_"+i]  ก็็คือ   _root.mc_250

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


เรื่องต่อไปเรื่อง ลูป 

ขอบคุณครับ ได้ประโยชน์สุดๆ เลยพี่น้องงงงง +

++++++++++++++  ว้อยยยยยยยยยยย อาร์กซ์ๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆ   ขอบคุณมากพี่ๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆ

เออ    อันนี้ของแถม จากการแรนด้อมคราวนู้น 

เคยสั่งแรนด้อมสีครั้งนึง ยุ่งยากพอสมควร เลยสร้างฟังก์ชั่นไว้ใช้เองแบบนี้

function randomColor(mc:MovieClip) {
   var my_color:Color = new Color(mc);
   r = random(256);
   g = random(256);
   b = random(256);
   rr = r.toString(16);
   gg = g.toString(16);
   bb = b.toString( 16);
   RGBcolor = "0x"+rr+gg+bb;
   my_color.setRGB(RGBcolor);
   delete my_color;
}

จะเห็นว่า  นั่นมันอะไรวะน่ะยุ่บยั่บเลย
จนเมื่อเร็วๆนี้(จริงๆ) เพิ่งมารู้ว่ามันสามารถแรนดอมค่าสีแบบง่ายโคตรๆๆๆๆๆๆ

random(0xffffff);  // แค่นี้จริงๆ 

  เฮ้ยยย ไปมุดหัวที่ไหนมาวะนั่น

จากสคริปยาวเหยียด เหลือสั้นจู๋เลย

function randomColor(mc:MovieClip) {
   var my_color:Color = new Color(mc);
   my_color.setRGB(random(0xffffff));
   delete my_color;
}

วิธีใช้ก็

randomColor( mc ที่ต้องการ );

 

อันล่างทำไมต้อง delete my_color; ด้วยครับ

[มังกร]

ถ้าไม่ลบจะกินแรม มั้งครับ เพราะไม่ยอมคืนค่าแล้วดันสร้างใหม่เรื่อยๆ

ถ้าไม่ลบจะกินแรม มั้งครับ เพราะไม่ยอมคืนค่าแล้วดันสร้างใหม่เรื่อยๆ

พอ var ปั๊ป มันก็จะจองหน่วยความจำทันทีครับ ก็ถ้าใช้เสร็จ แล้วถ้าไม่ใช้ต่อก็ลบเลยครับ
เพราะยังไงเรียกฟังชั่นมันก็สร้างใหม่อยู่แล้ว

แล้วเวลาตอนเราเอาไปใช้นี่
แต่ลบ my_color ไปแล้ว
หรือตูเข้าใจกระบวนการของมันผิด


ตัดหน้าพอดี ขอบคุณครับ

แอร๊ อันล่าสุดสวยจังเลยค่าาาา
ชอบมากกกกกกกกกกกก

สนุกจังเลย

[Loop Loop Loop]

Loop Loop Loop 

ลูป เป็นการทำซ้ำ ........ ครับ แค่นั้น 

ไม่ยืดเยื้อแล้ว ... มาเลยมาลูปกัน

พิมพ์นิยมสุดๆเลยก็ต้อง

for ( i  =  1 ; i < 12 ; i++ ) {     //เอาแบบง่ายๆนะครับ ไม่ต้องกลักการมาก
    
trace("hello F0NT")   //หรือจะทำอะไรก็ว่าไป
}

ชุดแรกคือ i  =  1 จะกำหนดค่าเริ่มต้นของลูป เราใช้วิธีกำหนดจากข้างนอกก็ได้

ถัดมาชุดสองคือ i < 12 เป็นส่วนกำหนดเงื่อนไข ว่าต้องการอะไร ในที่นี้เราต้องการให้ i ที่เป็นค่าเริ่มต้น รันไปจนมีค่าน้อยกว่า 12 ก็คือ 11

ถัดมาที่สามคือ i++ เป็นการเพิ่มค่าหรือลดค่าไปเรื่อยๆ ในที่นี้ให้บวก i ให้เพิ่มค่ารอบละ 1 เราจะบวกครั้งละเท่าไรก็ได้ครับ ก็ลดรอบกันไปตามค่าครับ

เออ งงไหม ผมยังงงเลยถ้าอธิบายแค่นี้ แล้วมันจะลูปยังไง(วะ) งง

จากตัวอย่างบน ก็คือ เราจะสั่งมันให้
เฮ้ย เริ่มจากหนึ่งนะ ( i  =  1)   แล้วบวกเพิ่มครั้งละหนึ่ง ( i++ ) ไปจนกว่าจะถึง 11 ( i < 12 )
ในแต่ละรอบมันก็จะทำงานคำสั่งที่เราใส่ไว้ในปีกกา

1 รอบ ทำ 1 ครั้ง
2 รอบ ทำ 2 ครั้ง
.
.
11 รอบ ทำ 11 ครั้ง  (มันก็จะเจอเงื่อนไขว่า i < 12 เฮ้ย ไม่เกิน 12 นะ มันก็จะหยุด)

และจบคำสั่ง ออกจากลูป  ตัวอย่างบนนั่น ก็จะ output hello F0NT ออกมา 11 ครั้ง

อาจจะดูสลับกัน แต่ประมาณนั้นครับ

่การทำงานนั้นรวดเร็วมาก คือจะทำรวดเดียวเลยครับ เสี้ยววินาทีเท่านั้น แม้ว่าจะลูปเป็นพันรอบก็ตาม พรึ่บเดียว


และเราต้องจำกัดขอบเขตมันไว้ด้วยครับ ไอ้ตัวนี้ดื้อพอสมควร เช่น

เฮ้ย ทำ i จาก 1 ให้ เกิน 12 นะ เพิ่มค่ารอบละหนึ่ง

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

เออ จริงของมัน  โทษมันก็ไม่ได้ เพราะเราสั่งเองให้มันเกินนี่หว่า เกินเท่าไหนก็ไม่บอกมัน มันก็ซื่อทำแม่มไปเรื่อย

แฮงค์ครับ คำตอบสุดท้าย 

เอาล่ะ ขู่ไปพอสมควร มาดูตัวอย่างง่ายๆ อีกแบบ
กรณีนี้เราสั่งค่าเริ่มต้นจากด้านนอกเลย

i=1
for (i ; i<=12; i++) {
                                 
}

หากไม่ได้ประกาศก่อนด้านนอกควรใช้รูปแบบนี้ จำรูปแบบให้ดีครับ

for (var i:Number  =  1 ;  i < 12  ;  i++ ) { 
   
trace("hello F0NT")
}

จะเห็นว่าเราประกาศตัวแปรไปพร้อมกันเลยครับ จะใด้จองหน่วยความจำสำหรับลูปนี้เลยไงครับ (ประมาณนั้น)

for (var i:Number = 1; i<12; i++) {
   trace(i);
}
อันนี้คือ

จะเห็นว่าเราเอา i ออกมาดูค่าก็จะเห็นการทำงานครับว่ามันทำงานกี้รอบ
ทีนี้เราลองเปลี่ยนตัวบวกมั่ง เพิ่มแบบกระโดด บวกทีละ 2 เลย ผลจะเป็นยังไง

for (var i:Number = 1; i<12; i += 2) {
   trace(i);
}

ยังไม่เข้าใจใช่ไหมครับว่าทำไมเป็นแบบนั้น
งั้นดูอันนี้

n = 1;
for (var i:Number = 1; i<12; i += 2) {
   trace("i รอบที่  "+n+" = "+i);
n++
}

ผมทำตัวตรวจรอบ แล้ว output ออกมาดู ...ชัดเจนครับ เราบวกทีละ สอง เพราะมันถึงเงื่อนไขเร็วขึ้น รอบมันก็ลดลงไงครับ 

ไม่งงนะครับ  ถ้าไม่งงก็....

อนุบาลการบ้าน 

ให้ output สูตรคูณแม่ 2 มาแบบงามๆ 1 ชุด โดยใช้ for() กับ trace() และตัวแปร 3 ตัว สคริปทั้งหมดเขียนที่เฟรม 1

ใบ้ให้ว่า ตัวแปรทั้งหมดเป็น : Number . มีการคูณจริงๆในแต่ละรอบ . คูณแล้วส่งค่าไปไว้อีกตัวแปรนึง

ส่งแค่สคริปอย่างเดียวก็ได้ ** ไม่ต้องอายครับ เพราะแต่ละคนย่อมมีสูตรการคิดไม่เหมือนกันครับ
และมีมากมายหลายวิธีเลยครับ

อันนี้สคริปผม 5 บรรทัดครับ   

ตัวอย่าง output



จะรอจนกว่าจะมีคนส่ง ถึงจะขึ้นติวเตอร์ต่อไป 

ขอบคุณมากครับจานน้าแอ๊ด ++


ส่งครับ

var n:Number = 2;
for (var i:Number = 1; i<=12; i++) {
   trace(n+" × "+i+" = "+(n*i));
}

สี่บรรทัด
ไม่รู้ถูกเปล่าแต่ผลมันก็ออกมาเป็นสูตรคูณเว้ยครับ

มาถึงบทนี้แล้วเริ่มจะถึงจุดที่สมองจะรับไม่ได้แล้วครับ
เลยต้องรีบส่งก่อน



//แก้ๆ เห็นว่าต้องใช้ตัวแปรสามตัว
เพิ่มอีกบรรทัดครับ

var n:Number = 2;
for (var i:Number = 1; i<=12; i++) {
   x = n*i;
   trace(n+" × "+i+" = "+x);
}

 


(สรุปแล้วเราบ้ากันอยู่สองสามคนใช่ไหมเนี่ย  จักรีอีกคน)


สองสคริปของแอนนนนน อันไหนคิดยากกว่ากัน อันไหนคิดนานกว่า

ฝากวิเคราะห์สคริปสักหน่อยครับ จะได้รู้ว่า เฮ้ย ตูทำเอง ไม่ได้ลอกใคร และเข้าใจอย่างลึกซึ้ง 

.
.
.
.
ยังคิดไม่ออกเรื่องต่อไปเอาอะไรดี ที่เหมาะกับอนุบาล 
รีเควสได้นะ 

อยากเรียนเกี่ยวกับ gravity ครับ 

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

ปัญหาที่เจอในอันแรกคือตอนแรกไม่ได้ใส่ไอ้ :Number ไป
แล้วตอนเขียนเหมือนมันจะเข้าใจผิดอะไรสักอย่าง เลยเติมลงไปก็หายดีละ
เท่านี้แหละครับ


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