7 Flash Counter      
4 เรื่อง/ภาพ เว็บมาสเตอร์   

       ก่อนอื่นต้องขอโทษทุกๆท่านด้วยนะครับที่บทความนี้ออกล่าช้า เนื่องจากว่าเคาท์เตอร์ตัวก่อนนั้นมีขนาดใหญ่(ประมาณ 5K) ผมจึงทำการปรับปรุงจนมีขนาดไม่ถึง 3K (ถ้าคุณไม่ทำเคาท์เตอร์ให้หวือหวาเกินไป) ผมคิดว่าคุณคงทำเคาท์เตอร์แบบนี้ได้อย่างไม่ยากเย็นนัก เพราะว่าถ้าคุณทำเคาท์เตอร์หลักที่ 1 ได้แล้ว หลักต่อๆไปก็ไม่ใช่เรื่องยาก
หลักการทำงานของ Flash Counter
  เคาท์เตอร์ตัวนี้จะทำการอ่านข้อมูลจากไฟล์ data.dat ซึ่งจะมีข้อมูลดังนี้ a=1&b=2&c=3&d=4&e=5&f=6 เราจะใช้ตัวแปรเหล่านี้ในการเก็บข้อมูลของเคาท์เตอร์ดังนี้

   - ตัวแปร a สำหรับเก็บตัวเลขในหลักหน่วย
   - ตัวแปร b สำหรับเก็บตัวเลขในหลักสิบ
   - ตัวแปร c สำหรับเก็บตัวเลขในหลักร้อย
   - ตัวแปร d สำหรับเก็บตัวเลขใน หลักพัน
   - ตัวแปร e สำหรับเก็บตัวเลขในหลักหมื่น
   - ตัวแปร f สำหรับเก็บตัวเลขในหลักแสน

  แล้วนำค่าที่อยู่ในตัวแปรนั้นๆมาบวกสิบ เพื่อสั่งให้ Movie clip ที่ชื่อ Number ทำการกระโดด (ใช้คำสั่ง Goto) ไปยังเฟรม ตัวแปร+10 โดยเราจะสร้างตัวเลข 1 ถึง 10 ไว้ในเฟรมที่ 10 ถึง 19 สมมุติว่าถ้าตัวแปร a = 5 นำค่าของ a ไปบวกกับ 10 จะได้ a+10 = 15 ดังนั้นคำสั่ง Goto ก็จะเป็น Go to and Stop (15) หมายความว่าให้ Movie clip ที่ชื่อ Number ทำการกระโดดไปยังเฟรมที่ 15 ซึ่งเฟรมนี้เราจะใส่เลข 5 เอาไว้ จึงทำให้แสดงผลเป็นเลข 5 ออกมา แล้วก็สั่งให้ CGI ทำการเพิ่มค่าตัวเลขจากไฟล์ data.dat อีก 1 แล้วเซฟเอาไว้เพื่อให้ Flash มาอ่านข้อมูลในไฟล์นี้อีกครั้ง


เริ่มสร้างกันเลย
  1. เปิด Movie ขึ้นมา กำหนดขนาดเป็น 102x32 ใช้เครื่องมือ Rectangle วาดกรอบและพื้นหลังของเคาท์เตอร์ใน Layer 1 แล้วทำการล๊อกเลเยอร์นี้ไว้

  2. สร้าง Layer 2 ขึ้นมาพิมพ์ข้อความว่า Loading ลงไปตรงกลางของเคาท์เตอร์ เสร็จแล้วให้ดับเบิ้ลคลิ๊กที่เฟรมที่ 1 ใน Layer2 เลือกแท็ป Action คลิ๊กที่ปุ่มบวก เลือก Load/Unload Movie กำหนดเป็น Load Variablas into Location ในช่อง Action และในช่อง URL ให้ใส่เป็น data.dat ซึ่งเป็นไฟล์ที่เก็บข้อมูลเคาท์เตอร์ไว้ ส่วนช่อง Location ให้เลือก Target แล้วไม่ต้องใส่ข้อความใดๆลงไปในนั้น แล้วกด OK

  3. แล้วคลิ๊กที่เฟรมที่ 2 ของ Layer 2 แล้วกด Shift ค้างไว้ ไปคลิ๊กที่เฟรมที่ 7 ของ Layer 1 กด F5 เพื่อใส่เฟรมลงไป คลิ๊กที่เฟรมที่ 6 ใน Layer 2 กด F6 แล้วดับเบิ้ลคลิ๊กที่เฟรมนี้เพื่อเปิดหน้าต่าง Frame Properties เลือกแท็ป Action คลิ๊กที่ปุ่มบวก เลือกคำสั่ง If ในช่อง Condition ใส่ลงไปว่า a&b&c&d&e&f ne "" แล้วคลิ๊กที่ปุ่ม Add Else/Else If Clause เพื่อใส่คำสั่ง Else คลิ๊กที่ปุ่มบวก เลือก Goto ในช่อง Number ให้ใส่เป็น 7 แล้วไปคลิ๊กที่คำสั่ง Else คลิ๊กที่ปุ่มบวก เลือก Goto ในช่อง Number ให้ใส่เป็น 2 อ้อ อย่าลืมคลิ๊กที่ตัวเลือก Go to and Play ด้วยนะครับ เสร็จแล้วกด OK


วาดกรอบเคาท์เตอร์



พิมพ์ตัวอักษร Loading ลงไป


ใส่เฟรมลงไปจนถึงเฟรมที่ 7 และใส่คีย์เฟรมในเฟรมที่ 2



   4. คลิ๊กที่เฟรมที่ 7 กด F7 เพื่อใส่ Blank Keyframe แล้วใช้เครื่องมือ Text tool พิมพ์ตัวเลข 0 ลงไปในเฟรมที่ 7 เราจะใช้ตัวเลขนี้เป็นตัวเลขสำหรับแสดงผล เสร็จแล้วกด F8 เพื่อทำเลข 0 นี้ให้เป็น Symbol ที่ช่อง Name ในหน้าต่าง Symbol Properties ให้ใส่เป็น number และในช่อง Behavior ให้กำหนดเป็น Movie Clip แล้วกด OK

  5. คลิ๊กขวาที่เลข 0 (ที่เพิ่งเปลี่ยนไปเป็น Symbol) เลือก Edit หลังจากนั้นก็ให้ดับเบิ้ลคลิ๊กที่เฟรมที่ 1 เพื่อเปิดหน้าต่าง Frame Properties เลือกแท็ป Action คลิ๊กที่ปุ่มบวก เลือก Load/Unload Movie กำหนดเป็น Load Variablas into Location ในช่อง Action และในช่อง URL ให้ใส่เป็น data.dat ซึ่งเป็นไฟล์ที่เก็บข้อมูลเคาท์เตอร์ไว้ ส่วนช่อง Location ให้เลือก Target แล้วไม่ต้องใส่ข้อความใดๆลงไปในนั้น หลังจากนั้นก็ให้ใส่คำสั่ง Play จากปุ่มบวก แล้วกด OK



ใส่คำสั่งตามนี้
  6. คลิ๊กที่เฟรมที่ 6 กด F6 แล้วดับเบิ้ลคลิ๊กที่เฟรมที่ 6 ในหน้าต่าง Frame Properties ให้เลือกแท็ป Action คลิ๊กที่ปุ่มบวก เลือก if ในช่อง Condition ให้ใส่ลงไปว่า a&b&c&d&e&f ne "" แล้วคลิ๊กที่ปุ่ม Add Else/Else If Clause เพื่อใส่คำสั่ง Else คลิ๊กที่ปุ่มบวก เลือก Stop แล้วไปคลิ๊กที่คำสั่ง Else คลิ๊กที่ปุ่มบวก เลือก Goto ในช่อง Number ให้ใส่เป็น 2 หลังจากนั้นก็ไปคลิ๊กที่ตัวเลือก Go to and Play เสร็จแล้วกด OK

  7. ตอนนี้เรายังอยู่ในส่วนแก้ไข Symbol อยู่นะครับ ให้ไปคลิ๊กเฟรมที่ 10 แล้วกด F6 ต่อไปก็ให้คลิ๊กที่เฟรมที่ 11 กด F6 แล้วเปลี่ยนตัวเลขที่อยู่ในเฟรมที่ 11 ให้เป็นเลข 1 ต่อไปก็คลิ๊กที่เฟรมที่ 12 กด F6 เปลี่ยนตัวเลขในนั้นให้เป็นเลข 2 คลิ๊กที่เฟรมที่ 13 กด F6 แล้วเปลี่ยนตัวเลขในนั้นให้เป็นเลข 3 ทำอย่างนี้ไปเรื่อยๆจนถึงเฟรมที่ 19 ซึ่งในเฟรมที่ 19 นี้จะมีตัวเลขที่อยู่ในเฟรมนี้เป็นเลข 9 หลังจากนั้นก็ให้ใส่คำสั่ง Stop ตั้งแต่เฟรมที่ 10 ถึง 19 เสร็จแล้วกลับไปยัง Scene 1


ใส่คำสั่งเพื่อตรวจสอบว่าโหลดตัวแปรเสร็จหรือยัง(ใน Scene1)



เปลี่ยนตัวเลขในเฟรมที่ 10 - 19 แล้วใส่คำสั่ง Stop ลงไป
  8. ดับเบิ้ลคลิ๊กที่เลข 0 (ที่เป็น Symbol) ในหน้าต่าง Instance Properties ให้กำหนด Instance name (ชื่อ)ของ Symbol ตัวนี้เป็น 1 ซึ่งเราจะใช้ Symbol ตัวนี้เป็นตัวแสดงผลในหลักที่ 1 แล้วกด OK ลาก Symbol ที่ชื่อ 1 ไปไว้ทางด้านขวา กด Ctrl+L เพื่อเปิดหน้าต่าง Library แล้วคลิ๊กที่ Symbol ที่ชื่อ number ลาก Symbol ตัวนี้จากหน้าต่าง Library ลงมาไว้ยังเฟรมที่ 7 ดับเบิ้ลคลิ๊กที่ Symbol ที่เราเพิ่งจะลากลงมา เปลี่ยนชื่อในช่อง Instance name ให้เป็น 2 เพื่อให้ Symbol ตัวนี้ทำหน้าที่เป็นตัวแสดงผลในหลักที่ 2 แล้วทำอย่างนี้ไปเรื่อยๆจนถึงหลักที่ 6 ซึ่ง Symbol ในหลักที่ 6 นี้จะมีชื่อเป็น 6


ใส่ชื่อให้กับ Movie Clip (Symbol นั่นแหละ)


ลากรูปจากหน้าต่าง Library มาใช้
  9. หลังจากที่คุณได้เปลี่ยน instance name เรียบร้อยแล้ว ให้คุณจัดวาง Symbol ทั้งหมดให้เหมาะสม โดยที่ Symbol ที่ชื่อ 1 จะอยู่ทางด้านขวา แล้วจัดวาง Symbol ตัวอื่นๆต่อไปทางซ้าย เสร็จแล้วดับเบิ้ลคลิ๊กที่เฟรมที่ 7 ในหน้าต่าง Frame Properties เลือกแท็ป Action แล้วใส่คำสั่งตามนี้ลงไป (เลือกจากปุ่มบวก)

Begin Tell Target ("/1")
  Go to and Stop (/:a+10)
  Stop
End Tell Target
Begin Tell Target ("/2")
  Go to and Stop (/:b+10)
  Stop
End Tell Target
Begin Tell Target ("/3")
  Go to and Stop (/:c+10)
  Stop
End Tell Target
Begin Tell Target ("/4")
  Go to and Stop (/:d+10)
  Stop
End Tell Target
Begin Tell Target ("/5")
  Go to and Stop (/:e+10)
  Stop
End Tell Target
Begin Tell Target ("/6")
  Go to and Stop (/:f+10)
  Stop
End Tell Target
Load Variables ("cgi-bin/fcount.pl", "")


จัดตัวเลขให้ดี



ใส่คำสั่งลงไป (ก๊อบจากไฟล์ตัวอย่างจะง่ายกว่า)


  เห็น /:a+10 ไหมครับ นั่นคือเราจะให้ Flash คำนวณค่า ตัวแปร+10 ซะก่อนแล้วจึงเอาคำตอบที่ได้ไปใส่เป็นตัวเลขเฟรม ส่วนคำสั่ง Tell target นั้นเป็นคำสั่งสำหรับควบคุม Symbol ที่เป็น Movie Clip โดยเฉพาะ Movie clip ที่คุณจะควบคุมได้นั้นจะต้องใส่ชื่อลงในช่อง instance name ที่หน้าต่าง instance Properties หรือพูดง่ายๆว่าต้องใส่ชื่อให้มันก่อน เราจึงจะสามารถควบคุมมันได้นั่นเอง ส่วนบรรทัดสุดท้ายเป็นการสั่งให้ cgi ทำงานเพราะว่าถ้าจะโหลดตัวแปรจาก cgi ก็ต้องสั่งให้ cgi ทำงานก่อนจึงจะโหลดตัวแปรได้ใช่ไหมครับ อันนี้เป็นการประยุกต์ใช้คำสั่ง Load Variables มาใช้ในกรณีที่ต้องการสั่งให้ cgi ทำงานครับ(อาจจะเอาไปใช้ในการเรียก cgi ตามเว็บที่ให้บริการแบนเนอร์ก็ได้ อิอิ) หลังจากที่ทำเสร็จแล้วก็ลอง Preview ดูเลยครับ

ปัญหาที่เกิดขึ้นกับเคาท์เตอร์ตัวนี้
  1. เรียกใช้ตัวแปรข้าม Movie ไม่ได้ บางคนอาจจะสงสัยว่าทำไมต้องใส่คำสั่ง Load Variables into Location หลายอันด้วย เหตุที่เป็นเช่นนี้อาจจะเป็นเพราะว่า Flash ไม่สามารถส่งตัวแปรข้าม Movie ได้เช่น เมื่อเราโหลดตัวแปร a=5 เข้ามาใน Scene1 แล้ว เราจะไม่สามารถเรียกใช้ตัวแปรนี้จาก Movie clip อื่นๆได้เลย ผมลองหลายครั้ง หลายวิธีแล้วก็ยังส่งตัวแปรข้าม Movie ไม่ได้เลย

  2. โหลดตัวแปรจาก CGI โดยตรงไม่ได้ จริงๆแล้วคำสั่ง Load Variables into Location นั้นสามารถโหลดตัวแปรจาก CGI ได้ทันที แต่ผมไม่สามารถใช้วิธีนี้ได้เนื่องจาก Flash ไม่โหลดตัวแปรขึ้นมาให้ (คุณสามารถไปศึกษาจากตัวอย่างที่อยู่ในโฟลเดอร์ C:\Program Files\Macromedia\Flash 4\Sample Pages\Chat Sample ตัวอย่างที่อยู่ในโฟลเดอร์นี้จะเป็นโปรแกรมสำหรับ Chat โดยใช้ ASP ร่วมกับ FLASH)

  3. ตัวเลขขึ้นซ้ำกันเมื่อโหลด Flash Counter พร้อมกัน ปัญหานี้เป็นผลพวงมาจากข้อ 2 ครับ เนื่องจากว่า Flash ไปนำข้อมูลมาจากเท็กซ์ไฟล์ธรรมดา ไม่ได้นำมาจากผลการทำงานของ CGI โดยตรง จึงทำให้เกิดตัวเลขซ้ำๆกันเมื่อโหลด Flash Counter พร้อมๆกัน แต่ผมรับรองว่าตัวเลขเคาท์เตอร์ที่ CGI เก็บเอาไว้ถูกต้องแน่นอนครับ

  4. โหลดครั้งแรกทำไม่จึงไม่ขึ้นตัวเลข อ๊ะๆ ไม่ต้องตกใจครับ เนื่องจากว่าในไฟล์ data.dat ยังไม่มีข้อมูลใดๆอยู่ในนั้นเลย เพียงแค่คุณโหลดเป็นครั้งที่สอง ตัวเลขก็จะขึ้นเองครับ ปัญหานี้ก็เป็นผลพวงที่มาจากข้อ 2 อีกแล้วครับ

ปล.ปัญหาที่พบในเคาท์เตอร์เวอร์ชั่น 1 นี้ ได้ถูกแก้ไขเป็นที่เรียบร้อยแล้ว คุณสามารถอ่านได้ที่บทความ Flash Counter II ครับ

      การสร้าง Flash counter นั้นค่อนข้างยุ่งยากสักหน่อย หลักง่ายๆก็คือสร้างเคาท์เตอร์หลักแรกให้สำเร็จเสียก่อน ถ้าหลักแรกทำได้หลักต่อๆไปก็ทำได้ง่ายเนื่องจากว่าแค่แก้ตัวแปรที่จะรับข้อมูลมาเท่านั้นเอง โค้ด CGI ที่ทดสอบในครั้งนี้ผม ZIP รวมกับตัวอย่าง Flash counter ไว้แล้ว คุณสามารถดาวน์โหลดได้จากหัวข้อดาวน์โหลดครับ สำหรับปัญหาที่ผมพบใน Flash Counter นี้ ถ้าท่านใดสามารถแก้ไขได้ กรุณาส่งเมล์มาบอกเลยครับ จะขอบคุณมากๆเลยครับ และถ้าใครสร้างเคาท์เตอร์แบบสวยๆได้แล้วละก็อย่าลืมส่งมาโชว์บ้างนะครับ
  Download : fcount.zip (6.44kb)