วิธีการสกรอล์(หมุนลูกกลิ้ง)เมาส์แล้วทำให้ข้อมูลใน Flash เลื่อนโดยที่ไม่เลื่อนหน้าจอ Web by

28
Feb
0

วันนี้จะมาสอนวิธีการสกรอล์(หมุนลูกกลิ้ง)เมาส์แล้วทำให้ข้อมูลใน Flash เลื่อนโดยที่ไม่เลื่อนหน้าจอ Web ไปด้วยครับ แบ่งเป็นสองส่วนหลักๆละกัน เริ่มที่ส่วนแรกก่อนการสกรอล์เมาส์แล้วทำให้ข้อมูลของเราเลื่อน

scroll1

Scroll ตัวอย่าง

โค้ดส่วนที่เป็น mxml หรือแท็กของ Flex

//ส่วนของขอบเขตการแสดงผลของ List ของเรา เราทำการใส่ MouseEvent mouseWheel เข้าไปเพื่อรับ Event การกลิ้งเมาส์ ซึ่งจะเรียกใช้ฟังก์ชั่นในย่อหน้าถัดไป
//List ที่อยู่ด้านใน

//ส่วนนี้เป็น ScrollBar ธรรมดาๆของเราที่มี viewport เป็น Group ก่อนหน้า

ต่อไปเป็นโค้ดในส่วนของ as3 ที่จะถูกเรียกฟังก์ชั่น wheelRoom

private function wheelRoom(event:MouseEvent):void{
scrollerRoom.value -= (event.delta>0 ? 20 : -20);
//จากด้านบนค่า event.delta จะมีค่าตามขนาดที่เรากลิ้งเมาส์ กลิ้งลงเป็น ค่า+ กลิ้งขึ้นเป็นค่า- เราจึงนำค่าดังกล่าวมากลับบวกลบแล้วไปตั้งค่า value ของ ScrollBar ของเราซึ่งจะมีผลให้ข้อมูลของเราเลื่อนตามไปด้วย ซึ่งเรากำหนดให้เลื่อนได้ใกล้ไกลตามใจชอบจากตัวอย่างจะใช้ 20 และ -20
}

เท่านี้ถ้าเราสกรอล์ที่ข้อมูลของเรา ข้อมูลก็จะเลื่อนตามแล้วล่ะครับ

โดนเลื่อนลงมาด้วย

โดนเลื่อนลงมาด้วย

ทีนี้ปัญหาถัดมาคือเวลาเราสกรอล์หน้า Web จะถูกเลื่อนขึ้นลงตามด้วยเพราะ Html มีการรับค่า Scroll อยู่แล้วเราจึงต้องทำการดักไว้ ซึ่งผมได้ใช้ class ที่มีชึ่อว่า MouseWheelTrap สามารถดาวน์โหลดได้จากที่นี่ครับ http://www.spikything.com/blog/index.php/2009/11/27/stop-simultaneous-flash-browser-scrolling/ ให้เราทำการ import ให้เรียบร้อยในหน้า Main ของเราจากนั้นก็ทำการตั้งค่าเล็กน้อยดังนี้ครับ

ในแท็ก ใส่ eventดังนี้ addedToStage=”stretchHandler()”>
แล้วเราก็นำฟังก์ชั่นด้านล่างไปใส่ในแท็ก Script ของ Main ของเราเท่านี้ก็ใช้ได้แล้วครับ

private function stretchHandler():void{
stage.scaleMode = StageScaleMode.SHOW_ALL;
stage.align = StageAlign.TOP;
this.width = stage.stageWidth;
this.height = stage.stageHeight;
}

กู้เงิน | เศรษฐกิจพอเพียง | สินเชื่อบุคคล | สมัครบัตรกดเงินสด | สินเชื่อ | เงินกู้ด่วน | ยืมเงินทรูมูฟ | เงินด่วนนอกระบบ