Code Snipplet | LevelUp! Studio

การแก้ปัญหา ScrollBar ของ Flex โผล่เมื่อใช้ CustomScrollBar จาก Catalyst by Ziah

31
Jan0

ScrollBar ของ Flex ที่โผล่มาซ้อนกับ CustomScrollBar

จากการที่ใช้ Flash Catalyst สร้าง CustomScrollBar เพื่อนำมาใส่ใน Flex ทำให้เกิดปัญหาเรื่อง ScrollBar ของ Flex โผล่มาซ้ำซ้อนกับ CustomScrollBar ของเรา แม้ว่าเลื่อนไปล่างสุดก็ยังมีไอเม็มที่ยังเลยจาก CustomScrollBar ของเราอีก

เลื่อน CustomScrollBar สุดแล้วยังเห็นไอเท็มไม่ครบ

ซึ่งวิธีแก้ที่จะเสนอในวันนี้เป็นวิธีการแก้ใน ActionScript ดังนี้ครับ

scroll3

Group ตัวอย่างที่นำมาใชเแสดงผล โดยมี id คือ groupList และจากที่เห็น dataProvider ของ List เราคือ aColvList ซึ่งเป็น ArrayList ที่ถูกกำหนดไว้ใน ActionScript แล้ว

จากโค้ดข้างต้นเป็น mxml tag ของ CustomScrollBar ของเราซึ่งกำหนด Viewport ไว้คือ Group ที่ครอบลิสท์ไอเท็มของเราที่จะใช้

scroll4

ทีนี้มาถึงสวนที่เราใช้แก้ปัญหา ScrollBar ของ Flex ไม่ให้แสดงขึ้นมาคือการเติมส่วนที่กำหนดขนาดความสูงของ Group ของเรา ให้มีขนาดเท่ากับส่วนสูงของ Item ของเรา คูณด้วยจำนวนแถว ซึ่งอธิบายโค้ดได้ดังนี้

if(aColvList.length%5) // 5 คือจำนวนของ Item ใน 1 แถวว่ามีกี่ตัว ซึ่งเราทำการเช็คว่าจำนวนไอเท็มของเราพอดีกับแถวหรือไม่หรือมีจำนวนที่เกินมา

colvList.height = (int(aColvList.length/5)+1)*160; //ถ้ามีเกินมาซึ่งก็คือแถวสุดท้ายมี 1-4 ตัว ก็ทำการนำจำนวนไอเท็มทั้งหมดหาร 5 แล้ว +1 ก็จะได้จำนวนแถว + แถวที่เกินมาแล้วคููณกับความสูงของไอเท็มหรือแถวๆหนึ่ง ซึ่งในที่นี้คือ 160

else

colvList.height = int(aColvList.length/5)*160; //ถ้าไม่มีเกินก็ทำการหารเอาจำนวนแถวคูณกับความสูงของแถวได้เลยครับ

ที่นี้เราก็จะได้ CustomScrollBar มาใช้อย่างไม่มีปัญหาแล้วล่ะครับ

CustomScrollBar เมิ่อแก้ไขสำเร็จแล้ว

Tagged as: CustomScrollBar, flash catalyst, flex

ไม่มีความเห็น

วิธีการทำให้เกมเฟลกซ์เป็นแบบเต็มจอ by Ziah

30
Sep0

จากประสบการณ์เกม Flex ที่ผ่านมา ที่ตอนแรกคิดว่าการกดเต็มจอคงเป็นอะไรที่ไม่ยาก ก็ต้องมานั่งงมพอสมควร วันนี้เลยจะมาบอกวิธีการทำใหเกมของเราเป็นแบบเต็มจอ(ฟูลสกรีน)ให้ครับ

โดยตอนแรกโค้ดที่คิดไว้เป็นดังนี้

public function setFullscreen():void {

stage.displayState = StageDisplayState.FULL_SCREEN; //ทำให้เต็มจอ

}

public function unsetFullscreen():void {

stage.displayState = StageDisplayState.NORMAL; //ทำให้กลับเป็นปกติ

}

แต่ปรากฎว่าผลที่ได้คือเข้าโหมดฟูลกรีนจริงครับ แต่ตัวเกมยังขนาดเท่าเดิมชิดมุมซ้ายบนของจอ

ที่นี้เราจะทำอย่างไรให้ Flex เกมของเราขยายเต็มจอ ก็ทำตามนี้เลยครับ

public function setFullscreen():void {

stage.align = StageAlign.TOP; //สั่งให้ตัวเกมจัดกลางจอชิดด้านบนก่อนครับ

stage.displayState = StageDisplayState.FULL_SCREEN;

}

public function unsetFullscreen():void {

stage.align = StageAlign.TOP_LEFT; //ให้เกมไปชิดซ้ายบนตามปกติ

stage.displayState = StageDisplayState.NORMAL;

}

ทีนี้เราก็ทำการขยายขนาดของเกมดังนี้ครับ

public var DEFAULT_WIDTH:int = 760; //ค่าความกว้างพื้นฐานของตัวเกม เซ็ทไว้เท่ากันกับ Group ที่ครอบทั้งเกมไว้ด้วย

public var DEFAULT_HEIGHT:int = 600; //เช่นเดียวกันกับความสูง

public function setFullscreen():void {

stage.align = StageAlign.TOP;

stage.displayState = StageDisplayState.FULL_SCREEN;

allApp.width = stage.width; // allApp ของผมคือ Group ที่ครอบตัวเกมทั้งหมดไว้ครับเราก็ทำการขยายมันให้เท่ากัน stage.width ซึ่งก็มีค่าเท่ากับความกว้างของจอในขณะนั้นแล้ว

allApp.height = stage.height; //เช่นเดียวกับบรรทัดก่อนหน้าแต่เป็นความสูง

}

public function unsetFullscreen():void {

stage.align = StageAlign.TOP_LEFT; //ให้เกมไปชิดซ้ายบนตามปก

ติstage.displayState = StageDisplayState.NORMAL;

allApp.width = DEFAULT_WIDTH; //สั่งให้ค่ากลับเป็นค่าพื้นฐาน

allApp.height = DEFAULT_HEIGHT; //เช่นกันกับความกว้าง

}

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

public function setFullscreen():void {

stage.align = StageAlign.TOP;

stage.displayState = StageDisplayState.FULL_SCREEN;

allApp.width = stage.width;

allApp.height = stage.height;

component.scaleX = stage.height/DEFAULT_HEIGHT; //ทำการขยายขนาดขอคอทโพเนนท์ตัวหนึ่งๆ ซึ่งจะทำให้มีขนาดเท่ากับจอที่ทำการขยายแล้วด้วยสเกลเมื่อเทียบกับขนาดจอแล้วมีขนาดเท่าเดิม

component.scaleY = stage.height/DEFAULT_HEIGHT; // ที่ต้องใช้ height มาคำนวนไม่ใช้ width เพราะ Resolution ของจอคอมพิวเตอร์จะมีด้านกว้างมากกว่าด้านสูงดังนั้นวัตถุที่มีขนาดใหญ่เท่าขนาดเกมก่อนหน้าก็จะพอดีกับความสูงของขนาดจอครับ

component.x -= ((component.width*stage.height/DEFAULT_HEIGHT) - (component.width))/2; //ทำการเลื่อนแกน x ของวัตถุต่างๆ จากที่ยกตัวอย่างจะเป็นวัตถุที่ขนาดเต็มจอ ทำให้ไม่ต้องเลื่อนแกน y

//จากนั้นเราก็ทำการปรับค่าส่วนต่างๆของเกมให้ตรงกับที่ต้องการครับ

}

public function unsetFullscreen():void {

stage.align = StageAlign.TOP_LEFT; //ให้เกมไปชิดซ้ายบนตามปก

ติstage.displayState = StageDisplayState.NORMAL;

allApp.width = DEFAULT_WIDTH;

allApp.height = DEFAULT_HEIGHT;

component.scaleX = 1; //ปรับกลับเป็นขนาดปกติ component.scaleY = 1;

component.x = 0; //เลื่อนกลับที่ปกติ

//ทำตรงข้ามกับด้านบน

เท่านี้เราก็จะมีฟังก์ชั่นการปรับเต็มจอที่ใช่ได้แล้วล่ะครับ

Tagged as: Action Script, Flex Builder, Fullscreen

ไม่มีความเห็น

การใช้จำกัดบรรทัดการแสดงผลข้อความและใส่ทูลทิปให้กับ Text ใน Flex by Ziah

30
Jun0

ในบางครั้งการออกแบบจาก Flash Catalyst เมื่อนำมาใส่ข้อมูลจริงอาจมีบางครั้งที่ข้อมูลยาวเกินขนาด ซึ่งถ้าเราไม่ทำอะไรกับมัน ข้อมูลText ก็จะล้นออกมาซึ่งจะทำให้ การแสดงผลนั้นออกมาผิดพลาด ซึ่งเราจะแก้ไขโดยการจำกัดจำนวนบรรทัดของText และใช้ Tooltip ให้แสดงข้อมูลเต็มเมื่อนำเมาส์มาชี้ โดยที่ไม่ต้องยุ่งกับส่วนของข้อมูลเลย ดังรูป

การแสดงผลที่ผิดพลาด

เมื่อแก้ไขแล้ว

• ขั้นแรกเราจะทำการจำกัดบรรทัด โดยใส่ property maxDisplayLines ให้กับ Richtext ตัวที่เราจะทำการจำกัดบรรทัด และใส่ width เพื่อให้รู้ขนาดความกว้างของบรรทัด

<s:RichText id=”txtName” maxDisplayedLines=”1″ text=”Item Name” textAlign=”center” width=”117″ x=”4″ y=”2″>

ก็จะทำให้ได้กานจำกัดบรรทัดโดยจะตัดประโยคให้พอดีกับบรรทัดและเติม … ต่อท้าย ดังรูป

• ต่อไปเราจะทำการเพิ่ม ToolTip โดยมีสองวิธีคือใส่ในแท็กเลยหรือเพิ่มใน ActionScript ก็ได้

วิธีใส่ในแท็ก

<s:RichText id=”txtName” maxDisplayedLines=”1″ text=”Item Name” textAlign=”center” width=”117″ x=”4″ y=”2″ toolTip=”{/*ตัวแปรที่นำมา Binding*/}”>

วิธีใส่ใน ActionScript

//ในส่วนที่มีการเปลี่ยนแปลงข้อมูล
var str:String = //ข้อมูลที่รับมา
txtName.text = str;
txtName.toolTip = str; //String ของข้อมูลที่เหมือนกับ property text

ก็จะได้ ToolTip เมื่อนำเมาส์มาชี้ดังรูป

เราได้การแสดงผลที่ไม่เกินจากที่เรากำหนดไว้และสามารถชี้เพื่อแสดงข้อมูลทั้งหมดได้แล้วล่ะครับ

แถมอีกนิดการตกแต่ง ToolTip ใน Flex ทำได้ง่ายนิดเดียวครับใช้โค้ดนี้

styleManager.getStyleDeclaration(”mx.controls.ToolTip”).setStyle(styleProp:String,newValue:*); //styleProp คือ Property ที่ใช้ใน CSS ครับ newValue ก็ค่าที่เราจะใช้ เช่น color : red; ก็ใช้เป็น (”color”,”red”) ครับ

ตัวอย่าง

styleManager.getStyleDeclaration(”mx.controls.ToolTip”).setStyle(”backgroundColor”,”black”);
styleManager.getStyleDeclaration(”mx.controls.ToolTip”).setStyle(”fontWeight”,”bold”);
styleManager.getStyleDeclaration(”mx.controls.ToolTip”).setStyle(”fontSize”,”21″);
styleManager.getStyleDeclaration(”mx.controls.ToolTip”).setStyle(”color”,”#FFFFFF”);
styleManager.getStyleDeclaration(”mx.controls.ToolTip”).setStyle(”fontFamily”,”Arial”);

ผลลัพธ์