อนุบาลงาน ActionSctipt

สนุกครับ+

สนุกครับ+

 

  น่ารักดีค่ะ +

[ว่าด้วยเรื่อง Drag & Depth คลิก แล้ว ลากมาวาง]

ต่อเลย เอาให้งงกันไปเลย

(ขอแย่งซีนคุณแมคส์ เรื่อง startDrag แล้วกันนะครับ ช้าไปต๋อยซะแล้ว)
แต่อันนี้ไม่ละเอียดครับ เอา startDrag แบบละเอียดมาก็ได้ครับ

ว่าด้วยเรื่อง Drag & Depth คลิก แล้ว ลากมาวาง

การที่จะทำ MC หรือ Btn "เกาะติด" เม้าส์ นั้น ใช้สคริปตัวนี้ครับง่ายๆ

startDrag(???) // ในวงเล็บคือ MC หรือ ปุ่ม ที่เราตองการให้เกาะติดเม้าส์ครับ

ตัวอย่างการเขียน และวิธีใช้ อย่างง่ายๆ
ผมไม่ได้เป็นโปรแกรมเม่อร์ไม่ได้เรียนมาทางนี้เลยอาศัยแบบมวยวัดครับเวลาคิด

ง่ายๆเลยก่อนอื่น "เราจะทำอะไร" นี่ล่ะครับ สมมุติว่า

ผมมี ก้อนสี่เหลี่ยมอยู่ ห้าก้อน อยากจะจับลาก วางใด้ตามใจนึก
ก็เริ่มคิดสคริปในหัวก่อน แล้วคิดเป็นภาษาไทยนี่ล่ะ

สคริปแรกเลยที่คิดออก

"เอาเม้าส์กดที่ก้อนสี่เหลี่ยม แล้วให้ ก้อนสี่เหลี่ยมนั้นเกาะติดเม้าส์"

เราก็เริ่มล่ะนะ

ทำก้อนสี่เหลี่ยมเหล่านั้นให้เป็น MC
(งานนี้ไม่มีติวเตอร์และภาพประกอบนะจ๊ะ ลองทำตามเลย)

ทีนี้ลงมือปั่นสคริปได้เลย ใส่สคริปที่ MC นะครับ
เอาสคริปภาษาไทยมาแปลเป็น actionScript

//เอาเม้าส์กดที่ก้อนสี่เหลี่ยม
//ดูตัวอย่างอันที่แล้วประกอบ "กด" คือ

on(press){    //เมื่อเอาเม้าส์มากดปุ่มหรือขอบเขตบนปุ่มนั้นๆ
                   //ให้ทำอะไรก็ว่าไป
}

เมื่อได้ "กด" มาแล้ว เราก็ ให้เกาะติดเม้าส์" ล่ะนะ

//เกาะติดคือ startDrag() เราก็จะได้สคริปว่า

on(press){    //เมื่อเอาเม้าส์มากดปุ่มหรือขอบเขตบนปุ่มนั้นๆ
       startDrag(this)            //ให้้เกาะติดเม้าส > this คือตัวเอง
                                       // แปลได้ว่า "ให้ตัวเองเกาะติดเม้าส์"
}

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

//ปล่อยคือ...
on(release){    //เมื่อเอาเม้าสกดแล้วปล่อยปุ่มหรือขอบเขตบนปุ่มนั้นๆ
       stopDrag()            //"ให้เลิกเกาะติด"
}

เอาล่ะ สำเร็จสคริปใน MC 1ตัว ออกมาได้แล้วว่า

on(press){    //เมื่อเอาเม้าส์มากดปุ่มนี้
      startDrag(this);           //ให้้เกาะติดเม้าส > this คือตัวเอง - แปลได้ว่า "ให้ตัวเองเกาะติดเม้าส์"                         
}
on(release){    //เมื่อปล่อยปุ่ม
       stopDrag();           //"ให้ตัวเองเลิกเกาะติด"
}

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

// เพิ่มเติม ตัวสคริปที่ยังไม่มีการเซ็ท depth

ถ้าลองทำตามจะพบปัญหาอย่างนึง ถ้ามี MC หลายๆตัว จะมีปัญหาเรื่องการทับซ้อนกันของ MC

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



อันนี้ตัวอย่างที่มีการเล่นกับ Depth ด้วย (ระดับชั้น คล้ายๆ layer น่ะแหล่ะ อยู่ล่างอยู่บน)
ที่ทำมาคือ "หยิบอันไหน อันนั้นอยู่บน" โดยที่มีการซ้อนทับสูงต่ำน่าเอ็นดู ไว้มาต่อคราวหน้าครับ

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

เริ่มยากแล้ว รอติดตามบทต่อไปครับ อันนั้นผมไม่รู้เลย+

+ 5  เลยครับ   

อันหลังนี่ผมก็ไม่รุ้เหมือนกั ครับ  เอ๊ะ !!  หรือว่ารู้   อ๋อแต่รู้แค่นิดเดียว 

สนุกดีค่ะ รออ่านต่อ สูงต่ำน่าเอ็นดู + อีก

+ 5  เลยครับ   

อันหลังนี่ผมก็ไม่รุ้เหมือนกั ครับ  เอ๊ะ !!  หรือว่ารู้   อ๋อแต่รู้แค่นิดเดียว 

หง่ะ  ผมก็รู้นิดเดียว ออกแนวสคริปถึก
ถ้าให้พวกปั้นเหน่งหรือพวกฮาร์ดคอร์แฟลชเซียนๆสคริปสั้นจุ๊ดจู่เลย

เดี๋ยวคราวหน้าลงสคริปให้ดูด้วย แล้วจะรู้ว่า ถึกเถื่อนสุดๆ 

โอ้ เพิ่งเรียนไปเมื่อเทอมที่แล้ว

กลับมาฟื้นฟูความจำกันอีกรอบ

ขอบคุณมากๆเลยค่ะ 

[Drag&Depth ตอนที่ 2]

ต่อ...

เรื่อง Drag&Depth ตอนที่ 2

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

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

==========================================

ว่าด้วยเรื่อง Depth  ( มีสาระนิดหน่อย อ่านไว้ๆ เดานิดหน่อยตามความรู้ที่มี )

เมื่อเราสร้างอะไรก็แล้วแต่บน stage ระบบจะมีการจัดระดับความลึกของ Object ชิ้นนั้นๆ
ถ้าเดาไม่ผิด ชิ้นแรกที่สร้าง จะอยู่ลึกสุดใจ เป็นค่าเริ่มต้นที่ -16383 

ก็คิดง่ายๆ ไอ้ชิ้นที่สร้างอันแรกอ่ะ อยู่ใต้ดินลึกลงไป 16383 ชั้น
อันที่สอง (สร้างอะไรก็แล้วแต่) อยู่สูงขึ้นมาหนึ่งชั้น คือ อยู่ใต้ดินลึกลงไป 16382 ชั้น

เพื่อไม่ให้มันทับกันเองหากอยู่เลเยอร์เดียวกันน่ะ และอีกหลายๆเหตุผล

ตามนั้น เอาง่ายๆ อธิบายแค่นี้พอนะครับ (มากกว่านี้ หรือเพิ่มเติม เชิญได้เลยครับ ยินดีๆ)

=========================================

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

อันที่แล้วเราสร้าง ก้อนสี่เหลี่ยมมา แล้วทำเป็น MC  5 ชิ้น
ลำดับชั้นก็เลยต่างกัน 5 ขั้น (โดยประมาณ...เดา)
//ตรงนี้ไม่แน่นอนนะ เกิดเราสร้างอะไรๆไปก่อนหน้านี้ แล้วลบออก มันก็จะรันไปเรื่อยๆ

=================================================

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

???.swapDepths(ค่าที่ต้องการ)                 //   ??? ในวงเล็บแรกคือ MC หรือ ปุ่ม หรือ TextField ใดๆที่ต้องการสั่งงาน
                                                     //ค่าที่ต้องการ คือ ลำดับชั้นที่ต้องการ และสามารถใช้วิธีเปรียบกับลำดับชั้นตัวอื่นได้ด้วย แต่เราจะไม่พูดถึงครับ(เพราะ...ตูไม่เคยใช้น่ะ)

ตัวอย่างง่ายๆ

mc.swapDepths(20);         // คือ สั่งให้ mc ไปอยู่ชั้นที่ 20 เลย  ง่ายเนอะ

=======================================================

สคริปที่แล้ว เราได้ออกมาว่า

on(press){    //เมื่อเอาเม้าส์มากดปุ่มนี้
      startDrag(this);           //ให้้เกาะติดเม้าส > this คือตัวเอง - แปลได้ว่า "ให้ตัวเองเกาะติดเม้าส์"                         
}
on(release){    //เมื่อปล่อยปุ่ม
       stopDrag();           //"ให้ตัวเองเลิกเกาะติด"
}

นี่คือสคริปที่ใส่ใน mc ทั้งห้าตัวนั่นนะ
ทีนั้เราต้องการบังคับให้ มัน "หยิบปั๊ป อยู่บน"

นึกสคริปเป็นภาษาไทยได้ว่า "กดปั๊ป สั่งให้ mc ตัวที่กด ไปอยู่ชั้นสูงกว่า mc อื่นๆ"

ตอนนี้เราจำไม่ได้หรอกว่าอันไหนสร้างก่อนหลัง อันไหนอยู่ลำดับที่เท่าไร
เราจะเพิ่มสคริปแบบไหนดีครับ?
ขอวิธีคิดครับ เอาสคริปแนวคิดแบบภาษาไทยนะครับ เดี๋ยวมาเฉลยยย

ขอบคุณมากครับพี่ 

เมื่อคืน บอกบวกไป 5 แต่เพิ่งบวกไป 3 เอง งั้น  เดี๋ยวบวกไปเรื่อยๆจนกว่าจะเบื่อละกัน 

ถ้าจะทำให้เวลาแด๊กเมาส์ออกนอกจากพื้นที่ที่กำหนด แล้วให้มันเด่งกลับคืน แบบนี้ พี่คิดว่า จะทำแบบไหนดีอะครับ 

มีหลายวิธีนะ แต่ที่คิดออกแบบง่ายๆเลยคือ

"เมื่อตำแหน่ง mc นั้นๆ มากกว่าหรือเลย ตำแหน่งที่เรากำหนด"
"ให้ mc นั้นๆ กลับมาอยู่ที่เดิม"

ใช้เอนเตอร์เฟรม เป็นตัวจับ หรือใช้ hitTest ก็ได้ง่ายดีไม่หน่วง

สมมุติว่าเรากำหนดขอบเขตโดย stage

สัก 300 X 300

เราก็ สร้างฟังชั่น ง่ายๆ ขึ้นมา 2 อัน

function drag(mc:MovieClip) {           // ฟังก์ชั่น drag(mc:MovieClip)ในวงเล็บคือ mcที่เราส่งเข้าไปให้มันทำงาน
   startDrag(mc);                        // อันนี้คือ "เอา mc ที่ส่งมา เกาะติดเม้าส์"
   mc.onEnterFrame = function() {   // จับการทำงานของ mc ตลอดเวลาขณะที่ยังลากอยู่
   if(mc._x>300 or mc._y>300){      // ถ้าตำแหน่ง mc  เกินขอบเขตที่กำหนด   
                stopDrag();                        //ให้ หลุดจากเม้าส์
      mc._x = ตำแหน่งที่เด้งกลับคืน;  //และ mc วิ่งกลับไปตำแหน่งที่ต้องการ
      delete mc.onEnterFrame; //ลบการทำงานนี้ทิ้ง กันหน่วงเครื่อง
   }
}
}



function stop_drag(mc:MovieClip) {// ฟังชั่นปล่อยเม้าส์แล้วหลุด
   mc.stopDrag();
delete mc.onEnterFrame; //ลบการตรวจจับขอบเขต หากปล่อยเม้าส์โดยไม่ออกนอกกรอบ
}

ง่ายจริงๆด้วยครับ    แต่ เอนเทอร์เฟรมนี่มันไม่หน่วงใช่มั้ยครับ

ถ้าไม่มี อันอื่นๆใช้อยู่
ในไฟลนึง มีโผ่ลมาสัก เอนเตอร์เฟรมนึง ก็ไม่หน่วงครับ
แต่นี่มัน เอนเตอร์เฟรมชั่วคราว ใช้แล้วลบ จึงไม่เป็นปัญหา

อันบนนั้นถ้า ลากๆอยู่แล้วเลยขอบเขตมันเด้งเลย

แต่ถ้าจะปล่อยก่อนแล้วค่อยเช็คขอบเขต
เราก็เอาส่วนที่เช็คมาไว้ที่ฟังชั่น stop_drag() เอา

function drag(mc:MovieClip) {           // ฟังก์ชั่น drag(mc:MovieClip)ในวงเล็บคือ mcที่เราส่งเข้าไปให้มันทำงาน
   startDrag(mc);                        // อันนี้คือ "เอา mc ที่ส่งมา เกาะติดเม้าส์"
}



function stop_drag(mc:MovieClip) {// ฟังชั่นปล่อยเม้าส์แล้วหลุด
   mc.stopDrag();
   if(mc._x>300 or mc._y>300){      // ถ้าตำแหน่ง mc  เกินขอบเขตที่กำหนด           
      mc._x = ตำแหน่งที่เด้งกลับคืน;  //และ mc วิ่งกลับไปตำแหน่งที่ต้องการ
   }
}

จะสั้นกว่า และไม่ต้องใช้ เอนเตอร์เฟรม เพราะไม่ต้องตรวจจับตลอดเวลา
ตรวจตอนปล่อยเท่านั้น

ตอนปล่อยถ้าจะให้เด้งสวยงามก็ใช้ LMC เข้ามาช่วยเลย

  เฮ้ยย นี่ อนุบาลงาน actionscript นะ