วิธีทำให้รูปที่โหลดมาโดย tag mx:Image เป็น anti-alias โดยอัตโนมัติ by heha

ใน 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