หน้า: [1] 2 3
 
ผู้เขียน หัวข้อ: AS ตอนที่ 4:ลดรูป ย่อโค้ด  (อ่าน 15733 ครั้ง)
0 สมาชิก และ 1 ขาจร กำลังดูหัวข้อนี้
ก่อนอื่นมาเฉลยครับ... ทิ้งไว้นานมาก  ง่ะ
โดยครึ่งหลังของการเฉลยจะเป็นเนื้อหาของตอนใหม่นี้ด้วย

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

แอบอ้าง
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 บรรทัดไป ทั้งๆที่ลักษณะโค้ดซ้ำๆกัน
« แก้ไขครั้งสุดท้าย: 26 พ.ค. 2006, 13:14 น. โดย X Saint » บันทึกการเข้า
ดังนั้นเราจึงมาย่อรูป โดยใช้ประโยชน์จากฟังก์ชั่นครับ

แยกส่วน 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]
« แก้ไขครั้งสุดท้าย: 27 พ.ค. 2006, 00:46 น. โดย X Saint » บันทึกการเข้า
จริงๆแล้วยังไม่เสร็จ เพราะเรายังมีแค่ ปุ่มเดียว กรอบเดียว... จะยกตัวอย่างให้ทำเป็นแบบ 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);   
}

เหมือนจะยาว แต่ความจริงไม่ยาวเลย เพราะมีแต่ส่วนกำหนดค่าตัวแปรที่เปลืองบรรทัดอยู่เท่านั้นเอง
« แก้ไขครั้งสุดท้าย: 26 พ.ค. 2006, 13:13 น. โดย X Saint » บันทึกการเข้า
ออกมาเป็นแบบนี้

<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
« แก้ไขครั้งสุดท้าย: 26 พ.ค. 2006, 13:15 น. โดย X Saint » บันทึกการเข้า
 ไอ้มืดหมี

อ่านแล้วไฟดับเลย
บันทึกการเข้า

Today you , Tomorrow me.
อ๊ะเพิ่งเห็น กำลังทำตามอยู่เลยครับ
บันทึกการเข้า

นักเขียนการ์ตูนรายปี
ไอ้มืดหมี

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

 (เหงื่อแตกพลั่ก)
บันทึกการเข้า
อ่านแล้วไฟลุกโชนครับ

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

        AH_LuGDeK, AH_LuGDeK_R
สายไปซะแล้วครับ
ผมลืมบทแรกๆไปหมดแล้ว  ฮือๆ~

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

50 levels avaliable, 22 secrets levels avaliable :P
อ่านแล้ว ไฟไหม้เลยครับ
ไหม้จนหมดเลย
ฮือๆ~
บันทึกการเข้า
ซวยแล้ว ดาวมันขึ้นอันนี้ก่อน


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

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

แว๊ป...
บันทึกการเข้า

เอามั่ง
ทำใจได้แล้วจะอ่านนะคะ
แปีบนึง ฮือๆ~
บันทึกการเข้า
มายก้อด พยายามทำตามยังยากเลย ครึ่งนึงแล้วครับ
บันทึกการเข้า

นักเขียนการ์ตูนรายปี
หน้า: [1] 2 3
 
 
Powered by MySQL Powered by PHP Powered by SMF 1.1.21 | SMF © 2006-2007, Simple Machines | Thai language by ThaiSMF Valid XHTML 1.0! Valid CSS!