หน้า: [1]
  พิมพ์  
ผู้เขียน หัวข้อ: ข้อแตกต่างของแต่ละ symbol และการใช้งานอย่างถูกต้อง  (อ่าน 9194 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
bubbleball
Administrator
Full Member
*****
ออฟไลน์ ออฟไลน์

กระทู้: 186



เว็บไซต์
« เมื่อ: ธันวาคม 08, 2009, 01:35:56 PM »

หัวข้อที่ควรศึกษาก่อน
- รู้จัก shape, symbol และ instance
- การสร้างอนิเมชั่น ตอนที่ 1
- การสร้างอนิเมชั่น ตอนที่ 2
- รู้จักมิติของ flash เบื้องต้น ตอนที่ 2

   หัวข้อนี้เราจะศึกษาการใช้งาน symbol กันอีกรอบแบบละเอียด หลังจากที่ได้ลองศึกษาไปแล้วบ้างเล็กน้อย



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

1. Button
  
     ก่อนอื่นเราจะทำการศึกษา symbol button กันก่อน เนื่องจากว่า button นั้นมีการทำงานที่แตกต่างกับ symbol ทั้ง 2 ตัว  โดย button นั้นเรานิยมใช้ในการทำปุ่มโดยทั่วๆไป และจะมีรูปแบบไทม์ไลน์แบ่งเฟรมพร้อมกับชื่อเฟรมให้มา 4 ช่องคือ



โดยสถานะทั้ง 4 ช่องมีความหมายดังนี้
1.  Up เป็นช่องซึ่งแสดงภาพปุ่มในสถานะปกติ
2.  Over เป็นช่องซึ่งแสดงภาพปุ่มเมื่อมีการเอาเมาส์ไปวางเหนือปุ่ม
3.  Down เป้นช่องซึ่งแสดงภาพปุ่มเมื่อมีการคลิกเมาส์ลงบนปุ่ม
4.  Hit  เป็นช่องซึ่งใช้กำหนดขอบเขตในการ interactive กับเมาส์

การใช้งาน Button

1. สามารถควบคุมด้วย ActionScript ได้
2. กรณีที่ 3 ช่องแรกว่างเปล่า และวาดช่องนี้เอาไว้ จะหมายถึงปุ่มใสที่มองไม่เห็นแต่สามารถ interactive กับเมาส์ได้  ซึ่งส่วนใหญ่จะใช้เพื่อไปวางทับภาพอื่นๆที่ต้องการทำปุ่มและไม่มีอนิเมชั่นในการเปลี่ยนภาพเมื่อเอาเมาส์ไปวางเหนือปุ่ม (roll over)
3. ถึงแม้ว่าเราจะไม่ได้ใส่ ActionScript ให้กับปุ่มว่าจะทำงานอะไรต่อไปเมื่อนำเมาส์ไปวางหรือคลิกก็ตาม  ปุ่มจะทำงานโดยเปลี่ยนสถานะตัวมันเองโดยอัตโนมัติเมื่อนำเมาส์ไป interactive กับมัน
4. กรณีที่เราต้องการให้ปุ่มแสดงอนิเมชั่นเมื่อนำเมาส์ไปวาง หรือคลิกค้างไว้  เราสามารถที่จะนำ symbol Movie clip หรือ Graphic ที่มีการเล่นทวีนอนิเมชั่นข้างในไปวาง ณ เฟรม Over หรือ Down ได้  แต่ลักษณะการเล่นอนิเมชั่นแบบนี้จะเป็นการหยุดแบบ "ฉับพลัน" เนื่องจากว่าเป็นการเปลี่ยนเฟรมโดยทันทีนั่นเอง
5. สามารถสร้างเลเยอร์เพื่อจัดลำดับการซ้อนของวัตถุได้ตามปกติ
6. กรณีที่ต้องการใช้ปุ่มหน้าตาเดียวกันหมดทุกสถานะ เราสามารถ วาดวัตถุลงในช่อง Up แล้ว Insert Frame ที่เฟรม Hit ได้เลย โดยไม่ต้อง Insert Keyframe แต่ละเฟรมที่เหลือ
7. เราสามารถ Insert Frame เพิ่ม หรือสั่ง Create Tween ได้แต่ไม่มีประโยชน์อันใดสำหรับปุ่ม
8. ข้อควรระวังกรณีทำปุ่มด้วยตัวหนังสือแล้วไม่กำหนดพื้นที่ hit ซึ่งจะทำให้พื้นที่ในการตอบสนองไม่ชัดเจน แล้วจะทำให้เมาส์กระพริบเวลาขยับไปมาบนตัวหนังสือ เนื่องจากพื้นที่ hit จะถูกกำหนดให้เท่ากับรูปร่างของตัวหนังสือ

ตัวอย่างปุ่มแบบปกติ และ ตัวอย่างปุ่มที่มีการใส่ symbol Movie Clip ลงในช่อง Over

<a href="http://www.flashinw.com/images/tutorial/general/symbolcompare/button.swf" target="_blank">http://www.flashinw.com/images/tutorial/general/symbolcompare/button.swf</a>

โหลดตัวอย่าง


2. Movie clip และ Graphic
      
        สำหรับ Movie clip และ Graphic นั้นจะมีลักษณะการใช้งานที่ใกล้เคียงกันอย่างนึงคือ สามารถสร้างอนิเมชั่นภายในตัวมันเองได้เหมือนกัน เนื่องจากว่าทั้งคู่มี timeline ลักษณะเดียวกันกับ timeline หลัก แต่ในความเหมือนนั้นก็มีข้อแตกต่างของมันอยู่เช่นกัน
      
        จุดที่แตกต่างกันในการเล่นอนิเมชั่นของ Movie clip กับ Graphic ก็คือ Movie clip นั้นสามารถเล่นอนิเมชั่นภายในตัวมันเอง โดยไม่สนใจ timeline ของ stage ที่วาง Movie clip ตัวนั้นอยู่ พูดง่ายๆก็คือ ถ้าเราวาง Movie clip ไว้บน stage หลัก เราก็จะพิจารณา timeline หลัก ซึ่งคำว่าไม่สนใจในที่นี้ จะหมายถึงการไม่สนใจจำนวนเฟรมหรือตำแหน่งของ play head จะเล่นอยู่ที่เฟรมใดๆ ซึ่งไม่ว่า timeline หลักนั้นจะมีจำนวนเฟรมเท่าใดก็ตาม หรือเล่นอยู่ ณ ตำแหน่งเฟรมไหน ก็ไม่เป็นปัญหาต่อการเล่นอนิเมชั่นของ Movie clip แม้แต่น้อย  ซึ่งนี่คือข้อดีของมูฟวี่คลิป  สรุปก็คือมันทำงานเป็นอิสระในตัวมันเอง
      
        แต่สำหรับ Graphic นั้นจะแตกต่างกันออกไปก็คือ มันจะสามารถเล่นได้โดยอิงเฟรมของ timeline ของ stage ที่มันวางอยู่  ถ้า Graphic นั้นถูกวางอยู่บน stage หลัก ซึ่ง timeline หลักอาจจะมีจำนวนเฟรมเท่ากับ 10 เฟรม   ถึงแม้ว่าจะมีการทวีนภายใน Graphic อยู่เป็นจำนวน 20 เฟรมก็ตาม แต่มันจะสามารถเล่นได้ถึงแค่ 10 เฟรมเท่านั้น นอกจากนี้มันจะเล่นพร้อมกับ play head ของ timeline หลักอีกด้วย  นั่นก็คือ ให้นับตั้งแต่ เฟรมแรกที่ Graphic ตัวนั้นถูกวางอยู่ แล้วมีการขยับเฟรมไปจำนวนเท่าไร  Grahpic ก็จะขยับเฟรมไปจำนวนเท่านั้น  ซึ่งถ้าจะมองให้ถูก  จะมองว่า Graphic นี้ใช้ timeline ร่วมกับ timeline ของ stage ที่วางตัวมันเองอยู่ก็ว่าได้ เพียงแต่ว่าถูกจับแยกมาใส่ symbol เอาไว้ เพื่อให้สามารถเคลื่อนย้ายไปทั้งก้อน โดยที่รูปแบบการทวีนยังคงเหมือนเดิมนั่นเอง (ไม่ต้องปรับตำแหน่งที่หัวเฟรมและท้ายเฟรม)

ด้านล่างนี้ คือตัวอย่างของ flash ซึ่งเป็นการเล่น timeline หลักทั้งหมด 5 เฟรม โดยวางตัวเลขบอกเอาไว้ว่าอยู่เฟรมไหน และมีการเล่นเฟรมทุกๆ 1 วินาที (1 fps) โดยจะมีการวาง Movie clip 10 เฟรม และ Graphic 10 เฟรมเอาไว้  เพื่อแสดงให้เห็นว่าการเล่นเฟรมของ Movie clip กับ Graphic อิงกับ timeline หลักอย่างไร

<a href="http://www.flashinw.com/images/tutorial/general/symbolcompare/movieclip_graphic.swf" target="_blank">http://www.flashinw.com/images/tutorial/general/symbolcompare/movieclip_graphic.swf</a>

โหลดตัวอย่าง

การใช้ Movie clip และ Graphic
1. Movie clip สามารถควบคุมด้วย ActionScript ได้ แต่ Graphic ไม่สามารถทำได้  รวมถึง symbol ที่อยู่ภายใต้ Graphic นั้นทั้งหมดก็ไม่สามารถควบคุมได้เช่นกัน
2. สำหรับการสร้างอนิเมชั่นด้วย flash แล้ว export ออกมาเป็น video นั้น เราจำเป็นต้องสร้างอนิเมชั่นไว้บน timeline หลัก ทั้งหมด เนื่องจากจะมีการเรนเดอร์เฟรมแต่ละเฟรมออกไปสร้างภาพแล้วประกอบออกมาเป็นวิดีโอ ซึ่งกระบวนการนี้ โปรแกรมจะไม่สนใจการทำงานของ Movie clip ที่วางอยู่แม้แต่น้อย (ไม่เล่น)  แต่สำหรับ Graphic นั้นไม่มีปัญหา เนื่องจากจะเล่นไปพร้อมกับ timeline หลักอยู่แล้ว ฉะนั้นบางครั้งที่เราต้องการสร้างอนิเมชั่นบางอย่างที่ต้องอาศัยการซ้อน symbol เพื่อเล่นสองอนิเมชั่นพร้อมๆกัน และสามารถนำ symbol นั้นไปใช้ ซ้ำได้ด้วย การซ้อน symbol ด้วย Graphic อย่างเดียว จะสามารถทำได้ เนื่องจาก timeline ของ symbol แต่ละระดับนั้นจะเล่นพร้อมกันทั้งหมด

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

3. กรณี symbol ที่ถูกทวีน ซึ่งมีการวาง shape หรือ image ไว้ข้างใน จะนิยมใช้ Graphic มาทวีนซะมากกว่า แต่การใช้ Movie clip ก็ไม่ผิดอะไร เพียงแต่ว่าถ้าไม่ได้ต้องการควบคุม symbol ตัวนั้นด้วย ActionScript  ก็อาจจะไม่จำเป็นมากนัก ทั้งนี้ขึ้นอยู่กับความถนัดของแต่ละคน ไม่มีข้อกำหนดที่ตายตัว แต่อาจจะเกี่ยวข้องกับขนาดไฟล์ที่มากขึ้น เนื่องจาก Movie clip จะมีส่วนที่ต้องทำงานร่วมกับ ActionScript อยู่ด้วย
4. กรณีเขียน ActionScript สามารถใช้ Movie clip แทน Button ได้
------------------------------------------------------------------

ข้อแตกต่างระหว่าง การเปลี่ยน type ของ symbol ที่อยู่บน stage จากพาเนล properties และการเปลี่ยน type ของ symbol จาก library

      บางครั้งเราอาจจะรับงานที่มีคนทำอนิเมชั่นมาให้แล้ว แต่เมื่อเรานำมาดูแล้วปรากฏว่า ประเภทของ symbol นั้นไม่ถูกต้อง เช่นอาจจะใช้ Graphic มา แต่เราอาจจะต้องมีการควบคุมด้วย ActionScript ด้วย ฉะนั้นเราจึงจำเป็นต้องเปลี่ยนประเภทของ symbol เสียก่อน ซึ่งเราสามารถที่จะเปลี่ยนประเภทของ symbol ได้ 2 จุด คือ
1. คลิกที่ symbol แล้วเปลี่ยนตรงพาเนล properties



2. จาก library โดยคลิกเมาส์ขวาแล้วปรับ type เสียใหม่



      ซึ่งการเปลี่ยนจาก 2 วิธีนี้จะมีจุดแตกต่างกันคือ  วิธีแรก การเปลี่ยน type ของ symbol ที่ถูกวางอยู่นั้น จะเป็นการเปลี่ยนคุณสมบัติของ symbol แบบ "ภายนอก" ซึ่งจะเป็นการเปลี่ยนให้สามารถทำงานตามที่ type นั้นสามารถทำได้ แต่สำหรับการเปลี่ยนด้วยวิธีที่ 2 จะเป็นการเปลี่ยนคุณสมบัติแบบ "ภายใน" หรือการเปลี่ยนโครงสร้างภายใน

ยกตัวอย่างเช่น
1. ถ้าเราสร้าง Button ขึ้นมา โดย type ใน library เป็น Button แต่ type ที่ถูกกำหนดบน stage เป็น Movie clip หรือ Graphic   จะมีผลทำให้ คุณสมบัติภายนอกของ Button เปลี่ยนไป นั่นก็คือ ข้างในยังคงมี timeline 4 ช่องเหมือนปุ่มตามปกติ แต่จะไม่สามารถรับอีเวนต์เหมือนปุ่มทั่วๆไปได้ เนื่องจากมันสูญเสียคุณสมบัติของปุ่มภายนอกไปแล้ว
2. ถ้าเราสร้าง Movie clip ขึ้นมา โดยมีเฟรมข้างใน 4 เฟรมเหมือนปุ่มทั่วๆไป และมีการเขียน ActionScript ให้หยุดที่เฟรมแรกเอาไว้  เมื่อเราทำการเปลี่ยน type Movie clip ไปเป็น Button จากพาเนล properties จะทำให้ Movie clip ตัวนี้มีคุณสมบัติภายนอกเป็นปุ่มไปในทันที และจะตอบสนองต่อเมาส์ได้ เหมือนปุ่มทั่วๆไป ถึงแม้ภายใจนะยังเป็นเฟรมแบบ Movie clip ก็ตาม  และถ้าเราเปลี่ยน type จากในไลบราลี่เป็น Button ก็จะทำให้คุณสมบัติภายในถูกเปลี่ยนให้อยู่ในรูปแบบของ Button ด้วย
3. ถ้าเราสร้าง Graphic ขึ้นมา ซึ่งตามปกติจะทราบดีว่าไม่สามารถควบคุมด้วย ActionScript ได้  ถึงแม้ว่ามีการเปลี่ยน type จากไลบราลี่ไปเป็น Movie clip แล้วก็ตาม แต่ก็เป็นเพียงการเปลี่ยนคุณสมบัติภายในเท่านั้น ฉะนั้น รูปแบบเฟรมภายในก็ยังคงเหมือนเดิม เนื่องจาก Movie clip และ Graphic มีโครงสร้างภายในเหมือนกันอยู่แล้ว  แต่ถ้าเราเปลี่ยน type จากพาเนล properties ให้กลายเป็น Movie clip ขึ้นมา ถึงแม้ว่าใน library จะเป็น Graphic ก็ตาม  symbol ตัวนี้จะมีคุณสมบัติภายนอกกลายเป็น Movie clip และสามารถควบคุมด้วย ActionScript ได้ทันที จากภายนอก หรือแม้แต่ในตัวมันเอง

สรุป

         สำหรับหัวข้อนี้ เราได้เรียนรู้เกี่ยวกับ symbol แบบละเอียด เป็นที่เรียบร้อยแล้ว ซึ่ง ถือว่าเป็นพื้นฐานที่จะเป็นประโยชน์สำหรับการเขียน ActionScript ต่อไป  บางสิ่งบางอย่าง อาจจะยังไม่สามารถเข้าใจได้ชัดเจนมากนักในทีแรก ซึ่งอาจจะต้องอาศัยการทดลองลงมือทำ และประสปการณ์ที่มากขึ้น เป็นส่วนประกอบ
« แก้ไขครั้งสุดท้าย: ธันวาคม 09, 2009, 03:46:33 AM โดย bubbleball » บันทึกการเข้า

ผมอาจไม่ค่อยได้เข้ามาดูบอร์ด ถ้าติดปัญหาประการใดไปถามบน facebook นะครับ จะไม่อัพเดทที่เว็บนี้จนกว่าจะย้ายไป tutorial.in.th ในอนาคต
FB : www.facebook.com/bubbleball
msn : bubbleball@outlook.com
หน้า: [1]
  พิมพ์  
 
กระโดดไป: