วิธีการเพิ่มหรือลดคำสั่งเมื่อกดคลิ้กขวาในแอปพลิเคชั่น Flex by Ziah
Sep0
เนื่องด้วยความซนของผู้เล่นทำให้เราต้องค้นหาวิธีการเพิ่มลดคำสั่งเมื่อกดคลิ้กขวาใน Flex app ของเรา เพราะโดนปกติแล้วคลิ้กขวาจะมีคำสั่ง Print ซึ่งเมื่อ Print แล้วพวก effect ต่างๆใน Flex app ของเราจะผิดเพี้ยนไป ทำให้ผู้เล่นอาจจะเจออะไรบางอย่างที่เราไม่ต้องการแสดงก็เป็นได้
คำสั่งเมื่อคลิ้กขวาใน Flex Application ของเรา ส่วนที่บอกไว้ก่อนหน้าคือมีคำสั่ง Print ด้วย
Print เสร็จก็จะเห็นหมดเลย (เนื่องจากเวลาพิมพ์น่าจะลบ Effect ต่างๆของ Flash ออกให้)
เลยได้วิธีตั้งค่าคลิ้กขวาดังนี้
ในไฟล์ Application ของเรา เพิ่มฟังก์ชั่นด้านล่าง และเรียกใช้เมื่อ applicationComplete ครับ
private function setContextMenu():void{
var customContextMenu:ContextMenu = new ContextMenu(); //สร้าง contextMenu ขึ้นมาใหม่
customContextMenu.hideBuiltInItems(); //ลบ contextMenu ที่มีมาให้ออกให้หมด
this.contextMenu = customContextMenu; //ตั้งค่าเป็นตัวใหม่
}
เท่านี้เมนูที่มีมาให้ก็จะหายไปแล้วครับ
เหลือแต่คำสั่งพื้นฐานของ Flash
แถมให้ ถ้าเราอยากเพิ่มตัวเลือกใหม่ๆก็ทำได้ดังนี้ครับ
private function setContextMenu():void{
var customContextMenu:ContextMenu = new ContextMenu();
customContextMenu.hideBuiltInItems();
var testOption:ContextMenuItem = new ContextMenuItem(“Test Me!”); //สร้างตัวเลือกใหม่ขึ้นมาชื่อว่า Test Me!
testOption.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,contextEvent); //ใส่ Event ให้ตัวเลือกใหม่
customContextMenu.customItems.push(testOption); //เพิ่มเข้าไป
this.contextMenu = customContextMenu;
}
private function contextEvent(event:ContextMenuEvent):void{ //ฟังก์ชั่นที่ถูกเรียกใช้เมื่อเลือกตัวเลือกที่สร้างมา
Alert.show(“PENTAKILL”);
}
ตัวเลือกคลิ้กขวาที่มีเพิ่มขึ้นมา ก่อนและหลังคลิ้ก
ง่ายๆแค่นี้เองครับ ลองเอาไปประยุกต์ใช้กันดูได้นะครับ
วิธีทำให้ TextField ใน Flash CS5 มี Font ตัวหนา เมื่อถูกแก้ไขโดย Flex by Ziah
Sep0
โดยปกติแล้วถ้าเราตั้ง TextField ใน Flash ให้มีตัวหนาแล้ว มันก็จะคงฟอนท์ตัวหนาไว้ตลอด แต่เมื่อเรามาแก้ไขตัวหนังสือของมันด้วย Flex แล้วมันจะทำให้ฟอนท์ของ TextField ดังกล่าวกลายเป็นตัวธรรมดาไปเฉยๆ วันนี้มีวิธีแก้มาฝากกันครับ
TextField สองอันตัวอย่างที่ทำมาจาก Flash เซ็ทไว้ให้เป็นตัวหนา
เมื่อเรานำ Flash ด้านบนเข้าไปใช้ใน Flex แล้วสั่งให้มีการแก้ไขข้อความใน TextField
ผลลัพธ์คือตัวอักษรจะไม่ติดตัวหนาแล้ว
txt_name.text = “Cybermon”;
txt_skill.text = “Destroy itself after attack”;
แก้ไขค่าในสอง TextField ทำให้ตัวอักษรไม่ Bold
วิธีแก้ไขก็ไม่ยากเลยครับ หลังจากที่เราใส่ค่าใหม่แล้ว เราต้องทำการเรียก setTextFormat เพื่อตั้งค่าให้เป็นตัวหนาอีกรอบครับ
ตัวอย่าง
var myTextFormat:TextFormat = new TextFormat();
myTextFormat.bold = true;
myTextField.setTextFormat(myTextFormat);
หรือเราจะเขียนย่อๆแบบนี้ก็ได้ครับถ้าเรารู้ว่ามันรับ Parameter ยังไงบ้างแล้ว (เพิ่มเติม) ซึ่งจะทำให้ได้โค้ดดังนี้
txt_name.text = “Cybermon”;
txt_skill.text = “Destroy itself after attack”;
txt_name.setTextFormat(new TextFormat(null,null,null,true));
txt_skill.setTextFormat(new TextFormat(null,null,null,true));
เท่านี้เราก็จะได้ผลลัพธ์เป็นตัวหนาตามปกติแล้วล่ะครับ
TextField ที่ผ่านฟังก์ชั่น setTextFormat แล้วก็จะตัวหนาตามเดิม
วิธีการใช้สกินที่สร้างเองกับสกรอลบาร์ Spark List by Ziah
Jul0
โดยปกติแล้วทางดีไซน์เนอร์จะสร้างทั้งสกรอลล์บาร์มาให้ ซึ่งเราต้องนำมาผูกกับลิสท์ที่เราสร้างขึ้นมาเอง โดยแต่ก่อนนั้นผมใช้ <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 สกินแล้วครับ แต่บางทีอาจจะต้องมีแก้เล็กน้อยในไฟล์สกินเพื่อให้ตำแหน่งมันตรงกับความเป็นจริงด้วยนะครับ
Starling Asset Manager by arthit_game
Feb0
package
{
import flash.display.Bitmap;
import flash.utils.Dictionary;
import starling.textures.Texture;
import starling.textures.TextureAtlas;
public class Assets
{
[Embed(source="../system/Blackground.jpg")]
public static const Blackground:Class;
[Embed(source="../assets/audio/sound1.mp3")]
public static const sound1:Class;
private static var gameTextureAtlas:TextureAtlas;
[Embed(source="../assets/textures/atlas.png")]
public static const atlasTexture:Class;
[Embed(source="../assets/textures/atlas.xml", mimeType="application/octet-stream")]
public static const atlasXML:Class;
public static function getAtlas():TextureAtlas
{
if (gameTextureAtlas == null)
{
var texture:Texture = getTexture("atlasTexture");
var xml:XML = XML(new atlasXML());
gameTextureAtlas = new TextureAtlas(texture, xml);
}
return gameTextureAtlas;
}
private static var gameTextures:Dictionary = new Dictionary();
public static function getTexture(name:String):Texture
{
if (gameTextures[name] == undefined)
{
var bitmap:Bitmap = new Assets[name]();
gameTextures[name] = Texture.fromBitmap(bitmap);
}
return gameTextures[name];
}
}
}
import starling.utils.AssetManager;
import starling.display.Sprite;
import starling.display.Image;
import flash.media.Sound;
private static var sAssets:AssetManager;
public function Main() extends Sprite
{
sAssets = new AssetManager();
//Add Texture
sAssets.addTexture("nameBlackground",Assets.getTexture("Blackground"));
//Add Atlas
sAssets.addTextureAtlas("atlas1",Assets.getAtlas());
//Add Sound
sAssets.addSound("sound1",new Assets.sound1() as Sound);
}
public function exampleUse():void
{
//Texture
var img:Image = new Image( assets.getTexture("nameBlackground"));
this.addChild(img);
//Atlast
var mc:MovieClip = new MovieClip( assets.getTextureAtlas("atlas1").getTextures("heroAttack"),12);
Starling.juggler.add(mc);//For sprite to play animation
this.addChild(mc);
//Sound
var s1:Sound = assets.getSound("sound1");
s1.play(0,1);
}
public static function get assets():AssetManager { return sAssets; }
การส่งค่าจากแฟลชให้แสดงที่ console ในเว็บเบราเซอร์ต่างๆ by Ziah
Sep0
โดยปกติแล้วเราชาว Flash โปรแกรมเมอร์เวลาต้องการจะเช็คค่าที่ตำแหน่งต่างๆของโค้ดของเรา เราก็มักจะใช้ trace(“//string”); เพื่อเช็คค่าต่างๆขณะที่รันเทสแอปพลิเคชั่นของเรา แต่ในบางทีแล้วเราต้องการที่จะดักค่าที่เราต้องการทดสอบกับข้อมูลจริง ซึ่งต้องเป็นตัวที่ publish ไปรันบนแอปพลิเคชั่นจริงๆแล้วเราจึงไม่สามารถดู trace ที่เราเขียนขึ้นมาได้ เราจึงต้องมีการใช้วิธีต่างกันไป โดยวิธีที่จะนำมาเสนอในวันนี้จะเป็นดังนี้ครับ
เราจะทำการเรียกฟังก์ชั่น console.log ของ javascript ซึ่งจะแสดงค่าที่เราใส่ไว้ใน console ของ Developer Tools ที่มีใน Web Browser ในสมัยนี้ ซึ่งต่างๆกันไป
วิธีการเรียก console.log ก็จะมีหน้าตาดังนี้
ExternalInterface.call("console.log",[{
'test':"call me maybe"
}]);
จากการใช้ ฟังก์ชั่น ExternalInterface.call ซึ่งรับค่าสองตัว คือ ชื่อฟังก์ชั่น JS ที่จะเรียกและ ค่า Argument ที่จะส่งไปในฟังก์ชั่นนั้น ทำให้เราสามารถเรียกฟังก์ชั่น console.log ได้โดยใส่ค่าที่ต้องแสดงหรือตัวแปรที่ต้องการทราบค่า (นอกจากนั้นเรายังสามารถใส่ Object ทั้งก้อนเพื่อดูค่าด้านในได้เลยซึ่ง trace ทำไม่ได้)
ซึ่งจะทำให้เราเห็นค่าดังนี้
ตัวอย่างจาก Google Chrome (กด F12 แล้วเปิด Console ด้านล่าง)
Who are we?
