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 ด้านล่าง)
การปรับค่าลักษณะต่างๆของ Text แต่ละบรรทัดใน RichEditableText by Ziah
Jul0
จากบล็อคที่แล้วที่ได้แสดงถึงการสร้าง Chat ด้วย RichEditableText ในบล็อคนี้จะอธิบายอีกหนึ่งความสามารถของ RichEditableText ที่มีความยืดหยุ่นมากกว่า TextArea อีกอย่างนึงครับ
โดยปกติแล้ว TextArea จะสามารถแก้ไข Property ของ Text ได้ แต่ว่าจะทำการแก้ไขทั้งหมดไม่สามารถแก้ไขเป็นส่วนๆได้ ซึ่งความสามารถนี้มีใน RichEditableText ตามชื่อของมันเลย เรามาเริ่มจากการดู Property ของมันกันเลยครับ
จากการนั่งเจาะดู Property ของมันทำให้ผมเห็นได้ว่า จริงๆแล้วการเก็บ Text ของ RichEditableText นั้นสามารถเก็บแยกๆกันเป็น Paragraph ได้เท่านี้ก็พอเดาได้ใช่ไหมครับว่าเราจะแก้ไข Text แยกกันเป็นส่วนๆได้อย่างไร โดยโค้ดมีหน้าตาดังนี้ครับ
var pe:ParagraphElement = new ParagraphElement; //สร้างตัวแปรย่อหน้า
var se:SpanElement = new SpanElement; //สร้างตัวแปรบรรทัด
se.text = obj.message; //ใส่ค่ากับ Span0
se.color = “#00FFFF”; //ใส่สี ในส่วนนี้สามารถกำหนดค่าลักษณะต่างๆของ Text ส่วนนี้ได้เลยครับ
pe.addChild(se) //กำหนดเสสร็จแล้วก็จับใส่ตัวแปรย่อหน้าเลยครับ
txtChat.content.addChild(pe); //แล้วก็ไปจับใส่ RichEditableText ได้เลยครับ โดยนำไป addChild ใส่ Property content ที่เป็น TextFlow
จากโค้ดข้างต้นเราจะใช้โค้ดดังกล่าวแทน txtChat.text+=obj.message เหมือนทั่วๆไป แต่เราจะสร้างตัวแปรเพื่อกำหนัดคุณลักษณะต่างๆของ Text ก่อนแล้วค่อยในไปใส่ RichEditableText ของเรา แล้วเราจะได้ผลลัพธ์ดังนี้เลยครับ
สร้างห้อง Chat โดยใช้ Spark ของ Adobe Flex by Ziah
Jul0
ในที่จริงแล้วการสร้างห้อง 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
การเช็คข้อมูล base64 ที่ถูกแปลงมาจากรูป by Ziah
May0
ในการส่งข้อมูลรูปไปให้ php เราต้องทำการแปลงข้อมูลก่อนโดยทาง php ของผมรับข้อมูลเป็นรูปแบบ base64 เพื่อไป decode โดยถ้าเป็นข้อมูล String ต่างๆเรายังดักเช็คก่อนทำการส่งได้ แต่ในที่นี้เป็นรูปเราจำเป็นต้องสร้าง BitmapImage และใช้เป็น ImageSnapshot ก่อนถึงจะส่งค่าได้ การเช็ครูปภาพของเราจึงต้องมีการใช้ตัวช่วยครับ
ข้อมูลรูปที่ถูก encode มาอยู่ในรูปแบบของ String
- - Paste ข้อมูลที่เป็น String ที่เราได้ดักมาลงใน Textbox เลยครับ
- - What to do with the source data เลือกเป็น decode
- - Output data เลือกเป็น export to a binary file, filename: เลือกใส่ชื่อไฟล์เลยครับเนื่องด้วย default ของมันเป็น .txt เราก็เปลีย่นเป็นชื่อรูป+จุด+นามสกุลไฟล์ของเราได้เลยตามรูปครับ
- จากนั้นกด Convert the source data เว็ปเบราเซอร์ของเราก็จะทำการเซฟรูปมาให้ครับ
ไฟล์ที่ได้
เท่านี้เราจะตรวจสอบข้อมูลรูปที่เราจะส่งให้ php ได้แล้วล่ะครับ
Who are we?
