7 การ Scroll ใน Textbox      
4 เรื่อง/ภาพ เว็บมาสเตอร์   

       การทำ Scroll นั้นทำได้หลายวิธี ซึ่งแต่ละวิธีนั้นก็ยาก-ง่ายต่างกันไป ในวันนี้ ผมจะแนะนำถึงการทำ Scroll แบบง่ายๆให้คุณๆได้ลองทำกัน และที่สำคัญวิธีที่ผมเสนอนี้ สามารถใช้ได้ทั้ง Flash 4 และ Flash5 ครับ เพียงแต่วิธีการทำนั้นอาจจะแตกต่างกันบ้าง แต่หลักการโดยรวมนั้นเหมือนกันครับ

การ Scroll
  Textbox ที่มีหลายบรรทัด จะมีโครงสร้างดังรูป ในบรรทัดที่ 1-4 คือบรรทัดที่ผู้ใช้มองเห็น ส่วนบรรทัดที่ 5-9 ผู้ใช้จะมองไม่เห็น Textbox ที่เราใช้ๆกันอยู่นั้นจะมี Properties อยู่ 2 ตัวคือ scroll กับ maxscroll



  - Scroll Property
  เป็นตัวกำหนดบรรทัดบนสุดว่าจะให้เป็นบรรทัดที่เท่าไร สำหรับ Property อันนี้สามารถอ่านและเขียนได้ คือสามารถอ่านได้ว่าตอนนี้ บรรทัดบนสุดเป็นบรรทัดที่เท่าไร และกำหนดได้ว่าจะให้บรรทัดใดไปอยู่บนสุด รูปแบบคำสั่งมีดังนี้

variable.scroll = row

    โดย variable ก็คือตัวแปรที่รับข้อมูลไปแสดงผล เป็นชื่อตัวแปรตัวเดียวกันกับในช่อง variable ของ Textbox และ row เป็นค่าตัวเลขบรรทัดที่ต้องการให้อยู่บรรทัดบนสุดของ Textbox ซึ่งโดยปกติ ค่า scroll จะมีค่าเท่ากับ 1 นั้นหมายความว่า บรรทัดบนสุดของ textbox จะเป็นบรรทัดที่ 1 ถ้าคุณต้องการให้บรรทัดที่ 5 มาเป็นบรรทัดบนสุด ก็ให้สั่งว่า

variable.scroll = 5

  - MaxScroll Property
  เป็น Property แบบอ่านได้อย่างเดียว Property ตัวนี้จะส่งค่าสูงสุดที่สามารถ Scroll ได้ ไม่ใช่จำนวนบรรทัดทั้งหมด สมมุติว่าคุณมี Textbox 1 ตัว มีขนาดแสดงผล 5 บรรทัด แต่มีข้อมูลอยู่ภายใน 9 บรรทัด ค่า MaxScroll ก็จะเป็น 5 เนื่องจากว่าบรรทัดต่อๆไปนั้น(คือบรรทัดที่ 6-9) สามารถมองเห็นได้อยู่แล้ว ไม่จำเป็นต้องไป Scroll มันอีก รูปแบบคำสั่งมีดังนี้

variable.maxscroll

  โดย variable ก็คือตัวแปรที่รับข้อมูลไปแสดงผล เป็นชื่อตัวแปรตัวเดียวกันกับในช่อง variable ของ Textbox คุณสามารถนำคำสั่งนี้ไปใช้ร่วมกับคำสั่งอื่นๆได้เช่นคำสั่ง set variable แบบนี้

mx = variable.maxscroll
  หมายความว่าให้นำค่า maxscroll จาก variable.maxscroll ไปเก็บไว้ที่ตัวแปร mx

สร้างอุปกรณ์ต่างๆไว้ให้พร้อม
  1.สร้าง Textbox ขึ้นมา 1 ตัว โดยใช้เครื่องมือ Text Tool กำหนดชื่อตัวแปรที่จะมารับข้อความไปแสดงผลเป็น txtScroll ถ้าเป็น Flash4 ให้คลิ๊กขวาที่ Textbox เลือก Properties แล้วใส่ชื่อลงในช่อง Variable แต่ถ้าเป็น Flash5 ให้ไปที่พาเนล Text Options แล้วก็ใส่ชื่อลงในช่อง Variable เหมือนกันครับ



  2.สร้างปุ่มสำหรับ Scroll ขึ้นมา 2 ปุ่ม ปุ่มนึงจะเป็นปุ่มสำหรับ Scroll ขึ้น ส่วนอีกปุ่มหนึ่งจะเป็นปุ่มสำหรับ Scroll ลง หลังจากที่คุณสร้างเสร็จแล้ว ต่อไปก็เป็นการเปลี่ยนรูปให้เป็น Symbol โดยการใช้เครื่องมือ Arrow เลือกรูปปุ่มที่เราวาด เลือกปุ่มสำหรับ Scroll ขึ้นนะครับ แล้วก็กด F8 ในช่อง Name ให้ใส่ชื่อของ Symbol เป็น btnUp แล้วเลือก Behavior เป็น Button เสร็จแล้วกด OK ต่อไปก็ให้ใช้เครื่องมือ Arrow เลือกปุ่มสำหรับ Scroll ลง แล้วทำตามขั้นตอนเดิม เพียงแต่เปลี่ยนชื่อที่ใส่ลงในช่อง Name จาก btnUp ไปเป็น btnDown เท่านั้นเองครับ
 


ใส่สคริป
  สำหรับสคริปนั้น ทั้ง Flash4 และ Flash5 จะใช้เหมือนกันทุกประการ ถ้าหากคุณมีข้อสงสัย ให้ไปเปิดตัวอย่างที่ผมให้ดาวน์โหลดนะครับ

สำหรับ Flash4
  1.ดับเบิ้ลคลิ๊กที่รูปปุ่มที่เอาไว้ Scroll ลง จะมีหน้าต่าง Instance Properties ขึ้นมา ให้เลือกแท็ป Action คลิ๊กที่ปุ่มบวก เลือกคำสั่ง Set Variable ในช่อง Variable ให้ใส่ลงไปว่า txtScroll.scroll และในช่อง Value ให้ใส่ลงไปว่า txtScroll.scroll + 1 แล้วไปคลิ๊กที่ปุ่ม abc ข้างๆ เลือก Expression เสร็จแล้วกด OK


  2. ดับเบิ้ลคลิ๊กที่รูปปุ่มที่เอาไว้ Scroll ขึ้น จะมีหน้าต่าง Instance Properties ขึ้นมา ให้เลือกแท็ป Action คลิ๊กที่ปุ่มบวก เลือกคำสั่ง Set Variable ในช่อง Variable ให้ใส่ลงไปว่า txtScroll.scroll และในช่อง Value ให้ใส่ลงไปว่า txtScroll.scroll - 1 แล้วไปคลิ๊กที่ปุ่ม abc ข้างๆ เลือก Expression เสร็จแล้วกด OK

สำหรับ Flash5
  1.คลิ๊กขวาที่รูปปุ่มสำหรับ Scroll ลง เลือก Actions จะมีพาเนล Object Actions ขึ้นมา คลิ๊กที่ปุ่มบวก เลือก Actions -> Set Variable ในช่อง Variable ให้ใส่ลงไปว่า txtScroll.scroll และในช่อง Value ให้ใส่ txtScroll.scroll +1 แล้วไปใส่เครื่องหมายถูกที่หน้าข้อความ Expression เสร็จแล้วกด OK



  2.คลิ๊กขวาที่รูปปุ่มสำหรับ Scroll ขึ้น เลือก Actions จะมีพาเนล Object Actions ขึ้นมา คลิ๊กที่ปุ่มบวก เลือก Actions -> Set Variable ในช่อง Variable ให้ใส่ลงไปว่า txtScroll.scroll และในช่อง Value ให้ใส่ txtScroll.scroll - 1 แล้วไปใส่เครื่องหมายถูกที่หน้าข้อความ Expression เสร็จแล้วกด OK

    ข้อสังเกตุก็คือ คุณจะไม่สามารถสั่ง Scroll Textbox ได้จากที่อื่นๆได้เลย ไม่ว่าจะเป็นเฟรมหรือ Moive clip คุณจะต้องสั่งจากปุ่มอย่างเดียว ก็คือสคริปที่สั่ง Scroll นั้นจะต้องอยู่ที่ปุ่มเท่านั้น บางท่านที่ใช้ Flash5 อาจจะใช้เหตุการณ์ Mouse Down ของ Movie clip มาสั่งให้ Scroll ถ้าคุณกำลังคิดที่จะทำอย่างนี้ ผมขอบอกไว้เลยว่าทำไม่ได้ ผมลองมาแล้วครับ ทั้ง Flash4 และ Flash5 เลย ถ้าคุณอยากลอง ก็ให้นำคำสั่ง Set Variable ที่สั่งให้ Scroll ไปไว้ในเฟรมแรกเลยก็ได้ แล้วก็ดูผลที่เกิดขึ้นครับ
  Download : scroll.zip (19kb)