วิธีการใช้สกินที่สร้างเองกับสกรอลบาร์ Spark List by

31
Jul
0

โดยปกติแล้วทางดีไซน์เนอร์จะสร้างทั้งสกรอลล์บาร์มาให้ ซึ่งเราต้องนำมาผูกกับลิสท์ที่เราสร้างขึ้นมาเอง โดยแต่ก่อนนั้นผมใช้ <s:VScrollBar> แล้วเซ็ท property skin ให้เป็น custom skin ของเรา จากนั้นก็เซ็ท viewport ให้เป็นตัว List ของเรา ซึ่งปัญหาคือสกรอลล์ทำงานได้ไม่ถูกต้องเท่าที่ควร มักมีบางส่วนหายไปด้านล่างๆของลิสท์ เราเลยต้องมาเปลี่ยนวิธีกันใหม่ครับ

- ขั้นแรกให้เราสร้างไฟล์ CSS แล้วประกาศไว้ในไฟล์แอปพลิเคชั่นหลักของเราเลยครับ
<fx:Style source=”styles.css”/>

- จากนั้นในไฟล์ให้เราเซ็ทสกินใส่ CSS ไว้ครับ
@namespace s “library://ns.adobe.com/flex/spark”;

@namespace mx “library://ns.adobe.com/flex/mx”;

.friendScroll s|VScrollBar{

skinClass: ClassReference(“components.scrollbarVerticalScrollbar”);

fixedThumbSize:false;

horizontalScrollPolicy: off;

}

- จากนั้นก็เซ็ท property “styleName” ให้ตรงกับที่เราประกาศไว้ใน CSS ครับ

<s:List id=”listFriend” styleName=”friendScroll” dataProvider=”{aFriendList}” itemRenderer=”components.friendCustomComponent” />

แค่นี้สกรอล์ของเราก็จะเปลี่ยนเป็น Custom สกินแล้วครับ แต่บางทีอาจจะต้องมีแก้เล็กน้อยในไฟล์สกินเพื่อให้ตำแหน่งมันตรงกับความเป็นจริงด้วยนะครับ

gg-bar

วิธีการสกรอล์(หมุนลูกกลิ้ง)เมาส์แล้วทำให้ข้อมูลใน 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;
}