สร้างห้อง Chat โดยใช้ Spark ของ Adobe Flex by Ziah
Jul1
ในที่จริงแล้วการสร้างห้อง Chat ดูเหมือนจะง่าย แต่หลังจากได้ทำแล้วส่วนที่มีปัญหาคือการเลื่อน Scrollbar อัตโนมัติทำงานไม่ถูกต้องเท่าที่ควร ในวันนี้ผมเลยจะมาเสนอวิธีการสร้างห้อง Chat และทำให้มีการ Scroll ที่ถูกต้องครับ
<s:TextInput id="txtChatInput" keyDown="sendChat(event)" text="" x="7" y="133"/>
<s:RichEditableText id="txtChat" clipAndEnableScrolling="true" x="13" y="28" width="201" height="97" editable="false" selectable="false"/>
<s:VScrollBar id="scrllChat" viewport="{txtChat}" fixedThumbSize="true" skinClass="components.chat_scrollVerticalScrollbar" x="213" y="27"/>
จากด้านบน
- TextInput คือส่วนที่จะให้ผู้ใช้ได้กรอกข้อความ
- RichEditableText เป็นคอมโพเนนท์ที่คล้ายๆ TextArea แต่ว่าเป็นของ Tag Spark โดยมันมีความสามารถต่างๆเพิ่มเข้ามาทำให้ใช้งานได้ดีมากยิ่งๆขึ้นส่วนสำคัญคือสามารถใช้กับ Custom ScrollBar ของเราได้ดังข้อถัดไป
- VScrollBar จากที่เห็นจะเป็นการใส่สกินของเราเองและใส่ viewport คือ RichEditableText ของเรา
ทีนี้โดยทั่วไปแล้ว เมื่อผู้ใช้ได้รับค่าเข้ามาเพื่ออัพเดท Chat เราจะทำการเลื่อนไปที่ล่างสุดโดยอัติโนมัติ แต่โค้ดโดยทั่วไปและ ตาม website ต่างๆได้เสนอมาว่าให้ใส่โค้ดดังนี้ในฟังก์ชั่นอัพเดทค่าห้อง Chat ของเรา ( id ของคอมโพเนนท์ อ้างอิงจากคอมโพเนนท์ด้านบน)
txtChat.appendText("\n"+obj.message); //เพิ่มค่าใน Chat
txtChat.validateNow(); //อัพเดทค่าล่าสุด
scrllChat.value = txtChat.contentHeight; //แบบที่ 1 ให้ Scroll ไปที่ส่วนที่ท้ายสุดของ chat
scrllChat.value = scrllChat.maximum ; //แบบที่ 2 ให้ Scroll เป็นค่าที่สูงที่สุด(ท้ายสุด) ของ Scroll
แต่ว่าทั้งสองแบบนั้น เมื่อเราทำการพิมหลายๆบรรทัดก็ยังคงทำให้เกิดบั๊คตามมา (แบบที่1มักเป็นกับแค่เพียงภาษาไทย แบบที่สองเป็นทั้งสองภาษา)
ซึ่งหลังจากที่ได้อ่าน Property ต่างๆของ RichEditableText ทำให้ได้การเขียนคำสั่งที่ทำให้ Chat สามารถทำงานได้อย่างถูกต้องตลอดดังนี้ครับ
txtChat.appendText("\n"+obj.message); //เพิ่มค่าใน Chat
txtChat.validateNow(); //อัพเดทค่าล่าสุด
txtChat.scrollToRange(txtChat.text.length,txtChat.text.length); //ใช้ฟังก์ชั่นเลื่อน Scroll ไปที่ตำแหน่งสุดท้ายของอักษรใน Chat ของเรา
จากด้านบนจะทำให้การเลื่อน Scroll อัตโนมัติของเราเลื่อลงมาล่าสุดได้ตลอดถูกต้องแล้วล่ะครับ
Reference : http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/RichEditableText.html
การใช้ฟังก์ชั่นหากินสำหรับสร้างเกมจากFlash hitTestObject, hitTestPoint และ realHitTest by Ziah
Apr0
ฟังก๋ชั่น hitTestObject และ hitTestPoint เป็นฟังก์ชั่นที่ค่อยข้าต้องใช้บ่อยมากในการเขียนเกมด้วย Flex เนื่องจากทั้งสองฟังก์ชั่นจะทำการตรวจเช็คว่าอยู่ทับกันหรือไม่ จึงใช้ในการชนกันต่างๆหรือเช็คความถูกต้องของตำแหน่งต่างๆอีกด้วย
◘ ฟังก์ชั่น hitTestObject
เป็นฟังก์ชั่นที่ค่อนข้างใช้บ่อย เพราะใช้งานง่ายที่สุด ใช้ระหว่าง 2 DisplayObject โค้ดเป็นดังนี้
สมมุติ a และ b เป็น movieClip
a.hitTestObject(b); //ถ้า a กับ b ทับกันก็จะได้ true
◘ ฟังก์ชั่น hitTestPoint
เป็นฟังก์ชั่นที่ใช้บ่อยเมื่อเช็ควัตถุกับเมาส์ เพราะใช้ระหว่าง Point (x,y) และ DisplayObject โค้ดเป็นดังนี้
สมมุติ a เป็น movieClip
a.hitTestPoint(mouseX,mouseY); //เช็คว่าเมาส์อยู่ทับวัตถุ a หรือไม่
◘ *แถม* ฟังก์ชั่น realHitTest
เนื่องจากทั้งสองฟังก์ชั่นก่อนหน้านี้ จะเช็คโดยไม่คำนึงถึง alpha จึงต้องใช้ฟังก์ชั่นนี้ซึ่งหน้าตาเป็นดังนี้
public function realHitTest(object:DisplayObject, point:Point):Boolean{
if(object is BitmapData)
{
return (object as BitmapData).hitTest(new Point(0,0),0, object.globalToLocal(point));
}
else {
if(!object.hitTestPoint(point.x, point.y, true))
{
return false;
}
else {
var bmapData:BitmapData = new BitmapData(object.width, object.height, true, 0x00000000);
bmapData.draw(object, new Matrix());
var returnVal:Boolean = bmapData.hitTest(new Point(0,0), 0, object.globalToLocal(point));
bmapData.dispose();
return returnVal;
}
}
}
a.realHitTest(mouseX,mouseY) เป็น false ในขณะที่ฟังก์ชั่นอื่นเป็น true
จากภาพกรอบสี่เหลี่ยมคือพื้นที่จริงของวัตถุ ฉะนั้นเมื่อใช้ 2 ฟังก์ชั่นแรกจะ return true เพราะไม่สนใจ alpha แต่ถ้าใช้ realHitTest จะ return false มาให้ครับ
วิธีทำให้รูปที่โหลดมาโดย tag mx:Image เป็น anti-alias โดยอัตโนมัติ by heha
Feb0
ใน Flex นั้นโดยปกติจะมี tag ที่ใช้โหลดรูปเข้ามาในตัว app ได้อย่างง่ายๆ โดยแค่ใช้
<mx:Image id=”imgReward” source=”image.png” />
ก็สามารถโหลดรูปมาแสดงได้ทันที ไม่ต้องสร้าง Loader มาโหลดให้วุ่นวายถ้าใช้เป็น as3 เพียวๆ และใน Flex 4 จะมี tag
<s:BitmapImage ai:embed=”1″ smooth=”true” source=”@Embed(‘image.png’)” />
ใช้โหลดรูปเข้ามาเช่นกัน แถมยังทำ Anti-Alias ให้ด้วย เพียงแต่ว่ามันใช้กับรูปในลักษณะของ Embed มาตั้งแต่ตอน compile ได้เท่านั้น ไม่สามารถสั่ง Load path ที่ต้องการขณะ Run-time ได้จึงเป็นที่มาของปัญหานี้ ในบทความนี้เราจะแนะนำวิธีทำให้ <mx:Image> สามารถทำ Anti-Alias ได้ในตัวครับ
รูปก่อนทำ Anti-Alias
ก่อนอื่นให้สร้าง function ขึ้นมาใส่ไว้ใน class ที่เก็บ function ที่ใช้งานบ่อยๆ ของเราเอง (มันใช้บ่อยแน่ๆ ละครับ) แล้วใส่ function ดังนี้ (ของผมใช้ชื่อ class EffectHelper)
public static function smoothImage(evt:Event):void{
var myBitmap:Bitmap = ((evt.target as Image).content as Bitmap);
if (myBitmap != null) {
myBitmap.smoothing = true;
}
}
ทีนี้ตอนเรียกใช้งาน ก็เรียกแบบนี้ครับ
<mx:Image id=”imgReward” source=”image.png” complete=”EffectHelper.smoothImage(event)” />
บรรทัดเดียวก็ “เอาอยู่” ละครับ 
ชีวิตง่ายขึ้นเยอะจริงๆ
รูปหลังทำ Anti-Alias
การแก้ปัญหา ScrollBar ของ Flex โผล่เมื่อใช้ CustomScrollBar จาก Catalyst by Ziah
Jan0
ScrollBar ของ Flex ที่โผล่มาซ้อนกับ CustomScrollBar
จากการที่ใช้ Flash Catalyst สร้าง CustomScrollBar เพื่อนำมาใส่ใน Flex ทำให้เกิดปัญหาเรื่อง ScrollBar ของ Flex โผล่มาซ้ำซ้อนกับ CustomScrollBar ของเรา แม้ว่าเลื่อนไปล่างสุดก็ยังมีไอเม็มที่ยังเลยจาก CustomScrollBar ของเราอีก
เลื่อน CustomScrollBar สุดแล้วยังเห็นไอเท็มไม่ครบ
ซึ่งวิธีแก้ที่จะเสนอในวันนี้เป็นวิธีการแก้ใน ActionScript ดังนี้ครับ
Group ตัวอย่างที่นำมาใชเแสดงผล โดยมี id คือ groupList และจากที่เห็น dataProvider ของ List เราคือ aColvList ซึ่งเป็น ArrayList ที่ถูกกำหนดไว้ใน ActionScript แล้ว
จากโค้ดข้างต้นเป็น mxml tag ของ CustomScrollBar ของเราซึ่งกำหนด Viewport ไว้คือ Group ที่ครอบลิสท์ไอเท็มของเราที่จะใช้
ทีนี้มาถึงสวนที่เราใช้แก้ปัญหา 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 เมิ่อแก้ไขสำเร็จแล้ว
การทำงานระหว่าง Flash Catalyst CS5.5 และ Flash Builder 4.5 ในเวอร์ชั่นใหม่ by Ziah
Jul0
ในก่อนหน้านี้ Flash Catalyst 5 (ต่อจากนี้จะเรียกว่า Fc) และ Flash Builder 4 (ต่อจากนี้จะเรียกว่า Fb) ได้สร้างความสะดวกในการสร้าง UI ใน Fc แล้วจึงนำไปโค้ดดิ้งต่อใน Fb แต่หลังจากที่ตัวผมเองได้ทำงานกับทั้งสองโปรแกรมมาสักพัก ก็ได้พบความลำบากนิดหนึ่งในการใช้งานคือ มันเป็นโฟลว์ทางเดียว เมื่อคนออกแบบสร้าง Fc มาเสร็จแล้ว เราก็ต้องอิมพอร์ทเข้ามาทำงานใน Fb เพราะ Fc ไม่สามารถแก้ไขโค้ดใดๆได้เลย และเมื่อทางโค้ดดิ้งแก้ไขอะไรเรียบร้อยแล้ว เมื่อถึงเวลาจะมีการแก้ UI ต้องแก้ในโค้ดดิ้งเลย เพราะเมื่อเราทำการอิมพอร์ทเข้า Fb แล้ว เราจะไม่สามารถนำกลับไปทำใน Fc ได้อีก แต่หลังจากนั้นเพียงไม่นาน Adobe ก็ได้ปล่อยเวอร์ชั่นใหม่มาครับ คือเพิ่ม .5 เข้าไปเป็น Fc CS 5.5 และ Fb 4.5 ซึ่งส่วนใหญ่จะมากับการซัพพอร์ท Mobile ต่างๆ แต่ก็มีผลพลอยได้ด้วยคือ ทาง Fb สามารถเรียก Fc ขึ้นมาแก้ไข UI ได้แล้วล่ะครับ!
เรามาดูกันเลยดีกว่าว่าเป็นอย่างไร
• เรามาทำการ Import Flash Catalyst Project กันก่อนเลยครับ โดยตอนนี้ได้ย้ายที่แล้ว
• ก็จะได้โปรเจ็ค Flex จาก Fc เหมือนเวอร์ชั่นเดิมนะครับ
• จากนั้นเราลองมาแก้โค๊ดกันสักหน่อย
• ต่อไปเราก็ใช้ความสามารถใหม่ของ Fb 4.5 ครับ กดไปที่ Edit Project in Flash Catalyst
• จะทำให้เราเห็นโปรเจ็คใน Fb ของเราโดนล็อคดังรูป และโปรแกรม Fc ก็จะทำการเปิดโปรเจ็ค Fb ของเราใน Fc เองครับ
• เรามาดูกันใน Fc จะเห็นได้ว่าโค้ดที่เราแก้ไขไว้ได้เข้ามาใน Fc แล้ว ซึ่งทำให้เราสามารถแก้ไข UI หลังโค้ดดิ้งได้แล้วล่ะครับ
• เรามาลองใส่ State เพิ่มอีกตัว
• เมื่อเราแก้ไข UI ต่างๆ ใน Fc เสร็จแล้วเราก็มาเลือก Resume Working On Project in Flash Builder ครับ
- หรือถ้าต้องการทำการเริ่มการแก้ไขใหม่อีกครั้งจาก Fb ที่มีอยู่ให้เลือก Re-open Project in Flash Catalyst ครับ
– หรือถ้าต้องการยกเลิกการแก้ไขจาก Fc ให้เลือก Cancel Editing Project in Flash Catalyst ครับ
• เมื่อเราแก้ไขเสร็จแล้ว UI ที่ถูกแก้ไขก็จะถูกนำมาแก้ใน Fb Project ของเราในทันทีเลยล่ะครับ
Flow การทำงานแบบใหม่ของ Flash Catalyst CS5.5 และ Flash Builder 4.5
เราจะเห็นได้ว่าโฟลว์การทำงานของ Fc 5.5 และ Fb 4.5 ไม่ได้ไปทางเดียวเหมือนเวอร์ชั่นเก่าๆอีกต่อไปครับ เพราะเราสามารถแก้ไขไปมาระหว่างสองโปรแกรมได้อย่างอิสระแล้ว ทำให้ผู้ที่ทำ Flex มีความสะดวกสบายขึ้นในเวอร์ชั่นใหม่นี่ครับ
Who are we?
