AS ตอนที่ 4:ลดรูป ย่อโค้ด

[boxA.tWidth=60; boxA.tHeight=120; boxA.tX=120; boxA.tY=50;]

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

เริ่มจากโครงสร้างเดิมในหน้าแรกที่เหมือนจะเข้าใจ และทำได้ทุกคนนะคับ

butt.onRelease = function() {
   box.onEnterFrame = function() {
      if(ตรวจสอบเงื่อนไขในการเคลื่อนที่เสร็จ) {
              เพิ่ม/ลบ ค่าตำแหน่ง (ความกว้าง สูง)
      } else {
         delete box.onEnterFrame;
      }
   }
}

ของเดิมเราใช้ i นับ ว่าทำกี่รอบ ทำครบแล้วจึงหยุด
แต่คราวนี้เรามีเงื่อนไขใหม่ คือ มันเดินไปถึงตำแหน่งที่กำหนด (เปลี่ยนขนาดไปถึงขนาดที่กำหนด) แล้วจึงหยุด

ดังนั้น

จึงขอเพิ่มส่วนกำหนดเป้าหมายเข้าไป ก่อนที่จะเริ่ม onEnterFrame นะคับ.. โดยในที่นี้เราจะมี 4 คุณสมบัติ หรือ properties เสมอ เพราะเราจะเปลี่ยนทั้ง x, y, width และ height ซึ่งจะรวมไปถึงในส่วน เพิ่ม/ลบ ตำแหน่งด้วย ก็จะส่งผลให้มี 4 ค่า 4 บรรทัดไปด้วย

ก็จะได้โค้ดออกมาประมาณนี้

butt1.onRelease = function() {
   boxA.tWidth=60;
   boxA.tHeight=120;
   boxA.tX=120;
   boxA.tY=50;
   boxA.onEnterFrame = function() {
      if(ตรวจสอบเงื่อนไขในการเคลื่อนที่เสร็จ) {
              this._width+=condW;
              this._height+=condH;
              this._x+=condX;
              this._y+=condY;
      } else {
              delete box.onEnterFrame;
      }
   }
}

ตอนนี้ติดอยู่ 2 ส่วน คือ ส่วนเงื่อนไข และ พวก cond ทั้ง 4 ตัว ที่จะเป็นตัวกำหนดว่าจะมีการเปลี่ยนแปลงทีละกี่ pixel

มาดูส่วน cond ทั้ง 4 ตัวก่อน

จากเดิมที่เราทำปุ่มขวา เราใช้ + ปุ่มซ้ายเราใช้ -
กรณีนี้กรอบเราอาจจะวิ่งไปซ้าย หรือ ขวาก็ได้ แล้วแต่ค่าเป้าหมายที่กำหนด เทียบกับตำแหน่งปัจจุบันที่มันอยู่.... ถูกมั๊ยครับ ?
ทำยังไงถึงจะรู้ว่าตำแหน่งปัจจุบัน เลื่อนไปตำแหน่งปลายทาง จะเป็น + หรือ -

ลองใช้ if ดูครับ

if(this._x>this.tX) { return -1;}
else if(this._x<this.tX) { return 1;}
else { return 0;}

แต่ว่าเรามี 4 ค่า ก็ต้องเปรียบเทียบทั้ง 4 ค่าสิ... มันจะทำให้ โค้ดเฉพาะส่วนนี้กลายเป็น 4 x 3 บรรทัดไป ทั้งๆที่ลักษณะโค้ดซ้ำๆกัน

[this._width+=10*compr(this._width, this.tWidth); this._height+=10*compr(this._height, this.tHeight); this._x+=5*compr(this._x, this.tX); this._y+=5*compr(this._y, this.tY);]

ดังนั้นเราจึงมาย่อรูป โดยใช้ประโยชน์จากฟังก์ชั่นครับ

แยกส่วน 3 บรรทัดที่แล้ว เป็นฟังก์ชั่น ชื่อ compr

function compr(org, des) {
    if(org>des) { return -1;}
    else if(org<des) { return 1;}
    else { return 0;}
}

สังเกตว่าผมเปลี่ยน this._x เป็น org และ this.tX เป็น des... เพราะเมื่อเรากำหนดฟังก์ชั่นแล้ว เราต้องกำหนดตัวแปรเพื่อมาเป็นตัวกลางส่งถ่าย
ตัวแปรทั้ง 4 ตัว เลยสามารถผ่านเข้ามาทาง org และ des เพื่อใช้งานในสูตรเดียวกันได้

ดังนั้นเราจะได้โค้ดส่วนเดิมเป็น

butt1.onRelease = function() {
   ส่วนกำหนดค่าเหมือนข้างบน
   boxA.onEnterFrame = function() {
      if(ตรวจสอบเงื่อนไขในการเคลื่อนที่เสร็จ) {
              this._width+=10*compr(this._width, this.tWidth);
              this._height+=10*compr(this._height, this.tHeight);
              this._x+=5*compr(this._x, this.tX);
              this._y+=5*compr(this._y, this.tY);
      } else {
              delete box.onEnterFrame;
      }
   }
}

เหลือที่เดียวแล้ว เงื่อนไขที่จะให้มันเลิกทำซ้ำ ก็คือ .... เมื่อค่าทั้ง 4 ไปถึงเป้าหมายแล้ว
เราจึงใช้การเปรียบเทียบแบบ "หรือ" ซึ่งใช้สัญลักษณ์ || แทน

function compr(org, des) {
    if(org>des) { return -1;}
    else if(org<des) { return 1;}
    else { return 0;}
}

butt1.onRelease = function() {
   ส่วนกำหนดค่า เหมือนข้างบน
   boxA.onEnterFrame = function() {
      if(this._width!=this.tWidth||this._height!=this.tHeight||this._x!=this.tX||this._y!=this.tY) {
              ส่วนเพิ่ม/ลดค่า เหมือนข้างบน
      } else {
              delete box.onEnterFrame;
      }
   }
}

เสร็จแล้ว ยัตต้า !









Option:
เราสามารถใช้ if เปรียบเทียบได้แบบตัวอย่างข้างบน
แต่เราสามารถเอาสมการคณิตศาสตร์ ม.ปลาย มาเทียบได้เพียงสมการเดียว จะมีรูปที่ไว้สร้างรูปแบบนี้ (เรียกว่าไรไม่รู้ ผมลืม)

x-y/|x-y|

รูปแบบนี้จะทำให้เราได้ค่าออกมาเป็น 1 หรือ -1 เท่านั้น... เราก็จะรู้ว่า อันไหนมากกว่า หรือน้อยกว่ากัน แล้วเอาค่านั้นไปคูณกับความเร็ว หรือจำนวน pixel ที่ต้องการให้มันเลื่อนไป

ดังนั้นเฉพาะค่า x เราจะได้โค้ดออกมาในรูป (10 คือจำนวน pixel ที่ต้องการให้มันเลื่อนทีละ...)

parseInt((this._tX-this._x)/Math.abs(this._tX-this._x));

[/color]

[function moveBox(bx) {]

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

ซึ่งความจริงเราก็เอาของเดิมมา copy paste แล้วก็เพิ่มเข้าไป ส่วน boxA ก็จะมี boxB เพิ่มมาอีก 4 บรรทัด แล้วทั้ง butt1 ก็จะเพิ่มมาอีกทั้งชุดอีก 1 อัน
ถ้ามี 4 ปุ่ม โค้ดก็จะยาวเฟื้อยเลย... ทั้งๆที่มันซ้ำๆกัน... ดังนั้นมาย่อดีกว่า

ส่วนที่จะซ้ำจริงๆคือเฉพาะส่วน onEnterFrame แต่ส่วนที่กำหนดค่าเป้าหมาย 4 บรรทัดนั้นเราย่อไม่ได้ เพราะมันไม่ซ้ำ (ถึงแม้จะดูหน้าตาคล้ายกันก็จริง)
ดังนั้นเราจะแยกส่วน onEnterFrame ทั้งยวงออกไปเป็นฟังก์ชั่นต่างหาก

function moveBox(bx) {
   bx.onEnterFrame = function() {
      if(this._width!=this.tWidth||this._height!=this.tHeight||this._x!=this.tX||this._y!=this.tY) {
              ส่วนเพิ่ม/ลดค่า เหมือนข้างบน
      } else {
              delete bx.onEnterFrame;
      }
   }
}

ส่วนที่อยู่ในปุ่มก็จะเหลือ

butt1.onRelease = function() {
   boxA.tWidth=60;
   boxA.tHeight=120;
   boxA.tX=120;
   boxA.tY=50;
   boxB.tWidth=60;
   boxB.tHeight=60;
   boxB.tX=50;
   boxB.tY=50;
   moveBox(boxA);
   moveBox(boxB);
}

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

function compr(org, des) {
    if(org>des) { return -1;}
    else if(org<des) { return 1;}
    else { return 0;}
}

function moveBox(bx) {
   bx.onEnterFrame = function() {
      if(this._width!=this.tWidth||this._height!=this.tHeight||this._x!=this.tX||this._y!=this.tY) {
              this._width+=10*compr(this._width, this.tWidth);
              this._height+=10*compr(this._height, this.tHeight);
              this._x+=5*compr(this._x, this.tX);
              this._y+=5*compr(this._y, this.tY);
      } else {
              delete bx.onEnterFrame;
      }
   };
}

butt1.onRelease = function() {
   กำหนดค่า
   moveBox(boxA);
   moveBox(boxB);
}

butt2.onRelease = function() {
   กำหนดค่า
   moveBox(boxA);
   moveBox(boxB);   
}

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

ออกมาเป็นแบบนี้

<a href="http://f0nt.com/forum/index.php?action=dlattach;topic=6169.0;id=9510" target="_blank">http://f0nt.com/forum/index.php?action=dlattach;topic=6169.0;id=9510</a>


ดาวน์โหลดไฟล์ FLA

 

อ่านแล้วไฟดับเลย

อ๊ะเพิ่งเห็น กำลังทำตามอยู่เลยครับ

อ่านแล้วไฟดับเลย

 

[มังกร]

อ่านแล้วไฟลุกโชนครับ

ขอก๊อปไว้ก่อน ว่างแล้วจะอ่านครับ
ขอบคุณครับ

สายไปซะแล้วครับ
ผมลืมบทแรกๆไปหมดแล้ว 

ไม่เป็นไร เดี๋ยวนั่งอ่านใหม่แต่ต้น 

[มังกร]

อ่านแล้ว ไฟไหม้เลยครับ
ไหม้จนหมดเลย

ซวยแล้ว ดาวมันขึ้นอันนี้ก่อน


เดี๋ยวไปอ่านตอน 2-3 แล้วจะกลับมาอ่านใหม่ครับ
ท่าทางน่าระทึกใจมาก

ท่าทางน่าระทึกใจมาก

แฮ่ๆ... 

แว๊ป...

ทำใจได้แล้วจะอ่านนะคะ
แปีบนึง

มายก้อด พยายามทำตามยังยากเลย ครึ่งนึงแล้วครับ