อนุบาลงาน ActionSctipt

[กระทู้นี้ ไอ้คนเริ่มต้น(ฉันเอง) มันไม่ค่อยว่างมาสอนแล้วนะครับ และไม่ค่อยได้ทำ flash แล้วครับหากใครต้องการร่วมแบ่งปันความรู้ หรือมีเวลาว่างพอ ก็สานต่อได้เลยครับ]

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

เดี๋ยวว่างๆโอกาสหน้า จะมารื้อฟื้นตัวเอง ด้วยการสอนของตัวเอง อีกครั้งครับ (ตอนนี้เข้าหม้อหมดแล้ว)
ถึงตรงนั้น คงมีเรื่องปัญหาแปลกๆ ปัญหาหยุมหยิมที่ได้เจอจากการทำงานจริงๆ มาแบ่งปันเพื่อนๆครับ

ขอร่วมด้วยนะครับ พอมีความรู้นิดหน่อย

ถ้าอยากเริ่มควบคุมงานให้ได้ดั่งใจ ด้วยคำสั่งง่ายๆ แบบพื้นๆ
เช่น ให้มันหยุด และ กดซ้ำแล้วเล่นใหม่ (ง่ายไปไหมเนี่ย หรือชอบยากๆ))

เอางานเก่าที่ทำไว้มาต่อได้เลย

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

คลิกขวาเฟรมสุดท้าย หรือเฟรมที่ต้องการให้มันหยุด ในที่นี้ผมเลือกเฟรมท้าย  
แล้วเลือก " convert to blank keyframes " << ทำไมต้องคอนเวอร์ท ขอผ่านไปก่อนนะครับ




ต่อมา
โดยที่เรายังเลือกเฟรมนั้นอยู่ (ต้องเลือกไว้นะ อย่าคลิกที่อื่น)
กด F9 จะมี action script panel ขึ้นมา ไม่ต้องตกใจ ไม่น่ากลัวอย่างที่คิด
พิมพ์ลงไปว่า     stop()    มีวงเล็บปิดท้ายด้วยนะ // บ่งบอกว่า เมื่อมาถึงเฟรมนี้แล้ว ให้  "หยุด"





ต่อไป เราจะทำปุ่มจ๊ะ เอาไว้กด ให้มันเล่น
ปิด action script panel อันนั้นไปก่อน
แล้วสร้างเลเยอร์ใหม่ เอาไว้บนสุดเลย แล้ววาดสี่เหลี่ยมขึ้นมาอันนึง เล็กๆ
กด F8 เพื่อสร้างสร้างไอ้สี่เหลี่ยมอันนั้น ให้เป็นปุ่ม
จะมีกล่อง convert to symbol โผล่ออกมา ไม่ต้องรีบงง
เลือก button ไปเลย แล้วโอเค (ต่อไปจะต้องปวดหัวกะไอ้ symbol อีกหลายขนาน)



ตอนนี้ สี่เหลี่ยมนั้น กลายร่างเป็นปุ่มกดไปแล้ว ต่อไป เราจะสั่งมันล่ะ
คลิกเลือกที่ปุ่มนั้น กด F9 เปิด action script panel ขึ้นมา ไม่ต้องตกใจ ไม่น่ากลัวอย่างที่คิด
พิมพ์ลงไปว่า

on(release){        //อธิบายได้ว่า เมื่อกดแล้วปล่อยปุ่มนี้
   play()              //ให้ "เล่น"
}




---------------------------------------
กด Ctrl+Enter
ลองดูผลงานครับ

อ่ะตัวอย่าง
<a href="http://img2.f0nt.com/flash/920e3a01fd457cb48502ae8e37c1ddbf.swf" target="_blank">http://img2.f0nt.com/flash/920e3a01fd457cb48502ae8e37c1ddbf.swf</a>

ลองประยุกต์ใช้ดูนะครับ มีประโยชน์และสำคัญมากๆครับ
แนบไฟลตัวอย่างมาด้วย โหลดไปมั่วต่อได้เลย

จริงๆ มันมีรายละเอียดสำคัญๆ แทรกอยู่หลายจุดแต่ยังไม่อธิบาย เอาแค่พื้นๆง่ายก่อนนะครับ
เดี๋ยวอธิบายภาษาต่างดาวเยอะๆ พาลจะเลิกกันซะ คนทำก็งง คนสอนก็บ๊องไปตามๆกัน

ขอบคุณค่า ....เดี๋ยวพรุ่งนี้ถ้าไม่ขี้เกียจจะมาส่งการบ้านค่ะ (ติดงานเก่าด้วย ฮ่าๆ)

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

ตูไม่เก่ง as แต่พอจะใช้งานมันอยู่บ้าง
ขอแทรกเป็นทิปน้ำจิ้มเล็กๆ ละกันครับ


เวลาเราจะพิมพ์ Actionscript อะไรไปในช่อง
เราสามารถใช้ปุ่มลัดเพื่อความรวดเร็ว ไม่ต้องมานั่งสะกดเอาได้
โดยการจิ้มไปในกรอบ as นั้นแล้วพิมพ์ [ESC] ตามด้วยปุ่มที่น่าจะเป็นปุ่มลัด (ไม่ใช่กดพร้อมกันนะ แต่ใช้พิมพ์ตามกัน)
ลองเดาดูครับว่าพิมพ์ว่าอะไรแล้วจะได้อะไร (จริงๆ ก็มีบอกไว้ในปุ่มเครื่องหมายบวก)

เช่น
- ESC > S > T จะได้คำว่า stop()
- ESC > O > N จะได้ชุดคำสั่ง on อะไรก็ว่าไป ซึ่งเดี๋ยวเราจะมาพูดกันต่อจากนี้แหละ โดยจักรี

  ขอบคุณมากค่ะ เกดลดาจะตั้งใจเรียน

ขอบคุณมากครับ ผมยังไม่รู้เลยนะ   เเต่เดี๋ยวลองดู 

ที่เคยอ่านของพี่ Xsaint มา ลืมหมดแล้วแหละ 

[มังกร]

  เยี่ยมครับ อยากเขียน AS ได้ ต้องระดับอนุบาลก่อน


  ตูยังได้แค่ stop กับ Play

ช่วยต่อของอาจารย์ทอปทีสิ
ผมอุส่าห์ไปลงเรียน

Action Script จริงๆจู๋ในทำนองนี้ ก็เคยมีอยู่บ้าง และดีด้วย   เห็น มีเป็นพื้นฐาน ของ as  โดย พี่X Saint  น่าจะใช่
      พอดี เนื่องจาก ในจู๋ อนุบาลงานแฟลชที่เน้น สอนพื้นฐานทางด้าน กราฟิก แอนิเมชั่น มากกว่า เป็นการเริ่มต้น
 แต่พอดีเห็นพี่ ej_sing  มาใส่สคริปแบบง่ายๆให้ เพื่อใช้ร่วมกับแอนิเมท  และน่าจะดีถ้า ปนๆพื้นฐานของ as
ลงในพื้นฐานของแอนิมท เพื่อง่ายแก่การนำไปประยุคต์ใช้ต่อไป   แล้วเห็นมีพี่ๆหลายท่าน
ต้องการให้จู๋นี้ต่อยอดจากจุ๋ของ พี่ X Saint ซึ่ง น่าจะ ลำบากซักนิด เพราะรู้สึก ว่า จุ๋นั้นจะ
สอนเลยขั้นพื้นฐานมาซํกหน่อยแล้ว ซึ่งถ้าให้มาต่อยอดในจู๋นี้ เดี๋ยวมันจะไม่อนุบาลอย่างชื่อจู๋ซะ ^^   
แต่เราช่วยกันได้  โดยการมาแป๊ะพื้นฐานของ as แบบง่ายๆ  ลงในจู๋ ให้ ลุงมาป้ามี ที่มีความสนใจ 
ก็สามารถทำได้ และไม่ท้อไปซะก่อน 

จากโพสต์แรกของพี่ ej-sing  ที่สอน เรื่อง การ  กดปุ่ม (on(release)) แล้ว เล่น (play();)  กับ การหยุด(stop();)   
ผมก็จะมา  ขออธิบายกลับไปอีก 1 สเต๊ป  คือการ ทำปุ่ม Button     

http://www.f0nt.com/forum/index.php/topic,11366.120.html

พอได้ปุ่มหนึ่งปุ่ม ผมจะมาพูดเรื่องการใส่ สคริป gotoAndPlay();  และ gotoAndStop();   
คือการสั่งให้มันไปที่ไหน เมื่อคลิกปุ่ม เมื่อได้ปุ่มจากติวเตอร์อันแรกมาแล้ว   
ลอง สร้างเลเยอร์ 2 มาดูกัน    แล้วคลิกขวาที่เฟรมที่10ของเลเยอร์2เลือก Insert Keyframe หรือกด F6 ก็ได้



ยังอยู่ที่ เฟรมที่10ของเลเยอร์ 2  แล้วไปเลือกที่กล่องเครื่องมือ ใช้เครื่องมือวาดรูปสี่เหลี่ยม หรืออะไรก็ได้ลงบน stage




ที่นี้ ลองใช้ สคริป  stop(); ที่เฟรมที่ 10  หมายความว่าถ้าเล่นมาถึงเฟรมนี้ให้หยุด   
ใส่โดยการ คลิกขวาที่เฟรมที่10เลเยอร์ที่2 เลือก action panel หรือกด F9 แล้วพิมพ์ โค้ด  ว่า    stop(); ลงไป  แล้วปิด panel ซะ





จากนั้นกลับมาที่เฟรมที่1ของเลเยอร์1    ลอง preview  ดูตอนนี้ มันจะเล่นแล้วไปหยุดที่เฟรมที่ 10   
ดังนั้น สั่งมันหยุด ตั้งแต่เฟรมแรกเลย  โดยใส่โค้ด stop(); เหมือนเดิม โดยคลิกที่เฟรม1เลเยอร์1 กด  F9 หรือคลิกขวา
เลือก action แล้วใส่ โค้ด stop(); เหมือน ตอนทำกับ เฟรมที่ 10




ขั้นตอนต่อไป เราจะสั่งให้เมื่อกดปุ่ม จากเฟรม1 ให้ไปที่เฟรมที่10 โดย คลิกขวา ที่ ปุ่ม(ไอ้รูปสี่เหลี่ยมสีดำนั่นแหละ )
 เลือก action panel หรือกด F9 ก็ได้ง่ายดี    ลองมาสั่งให้เมื่อกดปุ่มให้มันไปเฟรมที่ 10 ดู     
เมื่อกดปุ่ม ใช้ คำสั่งว่า  on(release)   ให้ไป เฟรมที่ 10  ใช้ คำสั่งว่า gotoAndPlay(10);   
เขียนรวมกันดังนี้

 on(release){           
          gotoAndPlay(10);
                       }





*คำสั่ง gotoAndPlay();  จะแตกต่างกับคำสั่ง gotoAndStop(); อยู่นิดเดียวคือ ถ้าสั่ง gotoAndPlay(); 
ไปที่เฟรม 10 แล้วถ้าบนไทม์ไลน์ ไม่มีคำสั่ง stop();   มันก็จะเล่นต่อไปเฟรมที่ 11  12  13
 หรือถ้าไม่มีแอนิเมทในเฟรมถัดไปแล้วมันจะวนมาเล่น ที่เฟรมที่1   แต่ถ้าเป็น gotoAndStop();
 มันจะไปถึงแล้วหยุดเลย

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




ลองทำปุ่ม เพื่อ back กลับไป fram 1   








เปลี่ยนจากสั่งให้มันไปเฟรม 10 เป็นสั่งให้มันไปเฟรม 1

  on(release){           
          gotoAndPlay(1);
                       }






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

 

[gotoAndPlay();]

*คำสั่ง gotoAndPlay();  จะแตกต่างกับคำสั่ง gotoAndStop(); อยู่นิดเดียวคือ ถ้าสั่ง gotoAndPlay();
ไปที่เฟรม 10 แล้วถ้าบนไทม์ไลน์ ไม่มีคำสั่ง stop();   มันก็จะเล่นต่อไปเฟรมที่ 11  12  13
 หรือถ้าไม่มีแอนิเมทในเฟรมถัดไปแล้วมันจะวนมาเล่น ที่เฟรมที่1   แต่ถ้าเป็น gotoAndStop();
 มันจะไปถึงแล้วหยุดเลย

ขยายความสคริป อย่างง่ายๆ คิดแบบภาษาไทย (ผมใช้วิธีนี้เวลาคิดง่ายดีนะ) 

------------------------------------------------------

gotoAndPlay(); ก็คือ ไปที่(เฟรม)แล้ว "เล่น"

ตัวอย่าง

    gotoAndPlay(10); ก็คือ ไปที่เฟรมสิบ แล้ว "เล่น"
   
หรือ

    gotoAndPlay("kygel"); ก็คือ ไปที่เฟรมชื่อ "kygel" แล้ว "เล่น"

และ

    gotoAndStop(10); ก็คือ ไปที่เฟรมสิบ แล้ว "หยุด"
   
หรือ

    gotoAndStop("kygel"); ก็คือ ไปที่เฟรมชื่อ "kygel" แล้ว "หยุด"

้------------------------------------------------------


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

เราสามารถตั้งชื่อเฟรมได้
แต่ ตั้งทำไม(วะ)มันเมื่อย ขี้เกียจพิมพ์ เสียเวลา บลา บลา บลา .....

มาอ่านกันว่าทำไม

แนะนำให้ตั้งชื่อเฟรมสำหรับมูวี่ยาวๆที่มีการใช้สคริป gotoAndPlay() หรือ gotoAndStop(); เยอะๆ

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

ทีนี้พอไปเลื่อนเฟรมต่างๆ เสร็จแล้วเนี่ย

มาดูอีกที ตายห่ะ !!! สคริปเพี๊ยน หยุด กับ เล่น ไม่ตรงที่เดิม เพราะเลื่อนเฟรม เลขเฟรมนั้นๆก็เปลี่ยนไป
แล้วสคริป gotoAndStop(); gotoAndPlay(); ที่ใส่เลขเฟรมไว้ ก็ต้องแก้หมดเลยดิ่ ฮ๊าาาาางงงงงงง

สมมุติว่า ก่อนแก้เราเขียนเป็น

gotoAndStop(15); ก็คือ ไปที่เฟรมสิบห้า แล้ว "หยุด"

สมมุติพอเราเลื่อนเฟรมแล้ว เฟรมที่ต้องการให้ไปหยุด ไม่ใช้ เฟรม 15 แล้ว
เพราะเราเลื่อนออกไปอีก 10 เฟรม ก็คือ เฟรมที่ 25 เราต้องไปแก้สคริปอีกให้เป็น
gotoAndStop(25); ใช่ไหมจ๊ะ ทีนี้ก็แก้กันอ้วกครับ ถ้างานอนิเมทเยอะๆ ยาวๆ และมีสคริปด้วยก็ บ้าไปเลย


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

สมมุติว่า ก่อนแก้เราเขียนเป็น

gotoAndStop("kygel"); ก็คือ ไปที่เฟรมชื่อ "kygel" แล้ว "หยุด"

สมมุติพอเราแก้ เลื่อนเฟรมแล้ว เฟรมที่ต้องการให้ไปหยุด มันก็ยังชื่อ "kygel" เหมือนเดิม
เพราะเราเลื่อนออกไปอีก 10 เฟรม 100 เฟรม มันก็ยังชื่อ "kygel" น่ะแหล่ะ

อย่างนี้เราเรียกได้ว่า ไดนามิคเล็กๆ ครับ อิอิ

การทำงานต้องให้มัน ดิ้นได้ แก้ง่ายๆ คิดเยอะๆ 
อย่า สเตติก ครับมันเหนื่อยเกิน สเตติก มีไว้สำหรับถึกๆครับ 


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

ใครจะทำตัวอย่างการตั้งชื่อเฟรม ต่อได้เลยครับ

เข้ามาบวกให้น้าแอ๊ดครับ

เดี๋ยวจะเผยผิวใหม่ แล้วเลิกเรียกผมว่า น้าแอ๊ด ได้ม๊าาาายยยยยยยย 

[มังกร]

http://www.thaiflashdev.com/home/index.php?topic=188.0


  .....