วิธีการสกรอล์(หมุนลูกกลิ้ง)เมาส์แล้วทำให้ข้อมูลใน Flash เลื่อนโดยที่ไม่เลื่อนหน้าจอ Web by Ziah
Feb0
วันนี้จะมาสอนวิธีการสกรอล์(หมุนลูกกลิ้ง)เมาส์แล้วทำให้ข้อมูลใน Flash เลื่อนโดยที่ไม่เลื่อนหน้าจอ Web ไปด้วยครับ แบ่งเป็นสองส่วนหลักๆละกัน เริ่มที่ส่วนแรกก่อนการสกรอล์เมาส์แล้วทำให้ข้อมูลของเราเลื่อน
โค้ดส่วนที่เป็น 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;
}
Enjoy this article?
Consider subscribing to our RSS feed!
ไม่มีความเห็น
ยังไม่มีความเห็น
ใส่ความเห็น
Who are we?
Contact Us
หมวดหมู่
ป้ายกำกับ
บันทึกเก่า
- พฤษภาคม 2017
- กุมภาพันธ์ 2017
- มกราคม 2017
- ธันวาคม 2016
- พฤศจิกายน 2016
- ตุลาคม 2016
- กันยายน 2016
- สิงหาคม 2016
- กรกฎาคม 2016
- มิถุนายน 2016
- พฤษภาคม 2016
- เมษายน 2016
- มีนาคม 2016
- กุมภาพันธ์ 2016
- มกราคม 2016
- ธันวาคม 2015
- พฤศจิกายน 2015
- ตุลาคม 2015
- กันยายน 2015
- สิงหาคม 2015
- กรกฎาคม 2015
- มิถุนายน 2015
- พฤษภาคม 2015
- เมษายน 2015
- มีนาคม 2015
- กุมภาพันธ์ 2015
- มกราคม 2015
- ธันวาคม 2014
- พฤศจิกายน 2014
- ตุลาคม 2014
- กันยายน 2014
- สิงหาคม 2014
- กรกฎาคม 2014
- มิถุนายน 2014
- พฤษภาคม 2014
- เมษายน 2014
- มีนาคม 2014
- กุมภาพันธ์ 2014
- มกราคม 2014
- ธันวาคม 2013
- พฤศจิกายน 2013
- ตุลาคม 2013
- กันยายน 2013
- สิงหาคม 2013
- กรกฎาคม 2013
- มิถุนายน 2013
- พฤษภาคม 2013
- เมษายน 2013
- มีนาคม 2013
- กุมภาพันธ์ 2013
- มกราคม 2013
- ธันวาคม 2012
- พฤศจิกายน 2012
- ตุลาคม 2012
- กันยายน 2012
- สิงหาคม 2012
- กรกฎาคม 2012
- มิถุนายน 2012
- พฤษภาคม 2012
- เมษายน 2012
- มีนาคม 2012
- กุมภาพันธ์ 2012
- มกราคม 2012
- ธันวาคม 2011
- พฤศจิกายน 2011
- ตุลาคม 2011
- กันยายน 2011
- กรกฎาคม 2011
- มิถุนายน 2011
- พฤษภาคม 2011
- เมษายน 2011
- มีนาคม 2011
- กุมภาพันธ์ 2011
- มกราคม 2011
- ธันวาคม 2010
- พฤศจิกายน 2010
- ตุลาคม 2010
- กันยายน 2010
- สิงหาคม 2010
- กรกฎาคม 2010
- มิถุนายน 2010
- พฤษภาคม 2010
- เมษายน 2010
- มีนาคม 2010
- กุมภาพันธ์ 2010
- มกราคม 2010
- ธันวาคม 2009
- พฤศจิกายน 2009
- ตุลาคม 2009
- กันยายน 2009
- สิงหาคม 2009
- กรกฎาคม 2009
- มิถุนายน 2009
- พฤษภาคม 2009
- มีนาคม 2009