Action Script

เขียน Twitter Widget ด้วย Flash Action Script 3 อย่างง่าย ตอนที่ 1

ทุกวันนี้หากใครไม่รู้จัก Twitter ก็คงจะเชยสุดๆครับ เพราะนักการเมือง ดารา นักร้อง หรือ บริษัท ต่้างๆล้วนมี Twitter
แล้วตัว Daydev เองก็มีเช่นกันครับ @daydev มี Client มากมายให้เล่น Seesmic หรือ Twhirl ซึ่งทำให้คุณ
Tweet ผ่าน Desktop Computer ของคุณได้เลยแน่นอน widgetbox เว็บไซต์ที่ทำ Widget ก็มี Twitter
Widget ไว้ โชว์ Log ของการ Tweet ของคุณซึ่งแน่นอน เราจะมาลองทำ Widget อย่างง่ายๆ กันครับ

สร้าง twitter Widget อย่างง่ายด้วย Flash

 

ผมได้ไปอ่าน Blog ของทางต่างประเทศและลอง ทำตามดูแล้ว มันก็เข้าใจได้ง่ายครับกับ Flash Action Script 3
ตัวนี้เพียงคุณมี Skill ด่้าน XML , PHP และ Flash Action Script หน่อยนึงคุณก็สามารถทำ Widget
ไปแปะบน Blog หรือ เว็บของคุณได้ครับ

 

แรกเริ่มเลยเราต้องไปใช้ statuses Timeline ของ Twitter ก่อนซึ่งจะเป็น Log ของการ Tweet ล่าสุดของเราครับ
ซึ่งวิ่งไปที่ URL ดังต่อไปนี้

http://twitter.com/statuses/user_timeline.xml?screen_name=USERNAME(ของคุณ)

ซึ่งทางผมจะยกตัวอย่าง @daydev ครับก็ให้กรอก URL ตามตัวอย่างด้านล่าง

http://twitter.com/statuses/user_timeline.xml?screen_name=daydev

ครับลอง Preview ดูจะเห็น XML Data เหมือนดังรูปด้านล่าง

XML Format Timeline Twitter

 

สร้าง เอกสาร XML ขึ้นมา 1 ไฟล์ชื่อว่า crossdomain.xml ให้สร้าง Format ดังรูปแบบด้านล่าง

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM
"
http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="www.twitter.com" />
</cross-domain-policy>

บันทึกไฟล์ และ สร้าง PHP ไฟล์ขึ้นมา 1 ไฟล์ที่ชื่อว่า twitter.php ครับและเขียน Code ดังต่อไปนี้

<?php
$filename = 'http://twitter.com/statuses/user_timeline.xml?screen_name=daydev';
$handle = fopen($filename, 'r');
$contents = stream_get_contents($handle);
fclose($handle);
echo $contents;

?>

บันทึกไฟล์เช่นเดิมครับ แล้วทำการ Upload File ผ่าน FTP ไปไว้ ที่ Hosting ของเราครับหรือ Localhost ผ่าน
Appserv
ก็ได้ครับหากใครที่ยังไม่มี Hostingเว็บไซต์คุณเอง ทำการ Preview ไฟล์ twitter.php ดูนะครับจะได้
log การ tweet มากมายบนเว็บเรา

XML Parser บน PHP ไฟล์

เปิดโปรแกรม Adobe Flash CS3 ขึ้นมาครับสร้างเอกสาร ตามรูป

ActionScript3 file

ทำการเขียน Code ตามรูปแบบด้านล่างนี้ครับ หรือจะ Copy เลยก็ได้

package
{
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;
import flash.net.URLLoader;
import flash.events.Event;

public class Twitter_Main extends MovieClip
{

public function Twitter_Main():void
{
initButton();
initTwit();

}
private function initButton():void
{
followBtn.buttonMode = true;
followBtn.addEventListener(MouseEvent.MOUSE_OVER, over);

}
private function over(e:MouseEvent):void
{
followBtn.gotoAndStop(2);
followBtn.removeEventListener(MouseEvent.MOUSE_OVER, over);
followBtn.addEventListener(MouseEvent.MOUSE_OUT, out);
followBtn.addEventListener(MouseEvent.MOUSE_DOWN, down);

}
private function out(e:MouseEvent):void
{
followBtn.gotoAndStop(1);
followBtn.addEventListener(MouseEvent.MOUSE_OVER, over);
followBtn.removeEventListener(MouseEvent.MOUSE_OUT, out);
followBtn.removeEventListener(MouseEvent.MOUSE_DOWN, down);

}
private function down(e:MouseEvent):void
{
followBtn.gotoAndStop(3);
followBtn.removeEventListener(MouseEvent.MOUSE_DOWN, down);
followBtn.addEventListener(MouseEvent.MOUSE_UP, follow);

}
private function follow(e:MouseEvent):void
{
navigateToURL(new URLRequest("http://twitter.com/YOURUSER"), "_blank");
followBtn.removeEventListener(MouseEvent.MOUSE_UP, follow);

}
private function initTwit():void
{
var l:URLLoader = new URLLoader();
l.addEventListener(Event.COMPLETE, loaded);
l.load(new URLRequest("http://YOURHOST.COM/twitter.php")); 

}
private function loaded(e:Event):void
{
e.currentTarget.addEventListener(Event.COMPLETE, loaded);
var xml:XML = new XML(e.currentTarget.data);
var list:XMLList = new XMLList(xml.status.text);

var boxArray:Array = new Array();


for(var i:int = 0; i < 4; ++i){
boxArray[i] = this.getChildByName("box" + i);
boxArray[i].textBox.appendText(list[i]);

}
}
}
}

ยาว นิดๆ นะครับ แต่ไม่ต้องห่วงมันไม่ยากเกินไป ดังตัวอย่างนี้ ผมจะทำการ Tweet โชว์ แค่ 4 ข้อความล่าสุดนะครับ
หากต้องการโชว์มากกว่า 4 ข้อความให้แก้ไขที่ Code บันทันนี้ครับ แก้ไขตัวเลข จาก 4 เป็น 5 หรือ เลขอะไรก็ใส่ไปครับ
แต่เราต้องแก้ไข Flash Movie Clip ด้วยในส่วนของ Interface

for(var i:int = 0; i < 4; ++i){
                boxArray[i] = this.getChildByName("box" + i);
                boxArray[i].textBox.appendText(list[i]);

            }

เปลี่ยน Service ของ Script 2 ส่วนครับให้เป็น Service ของเรา ซึ่งตัวอย่างจะเป็น Service ของ Daydevให้
ใส่แทนคำว่า YOURUSER ครับ

private function follow(e:MouseEvent):void
        {
            navigateToURL(new URLRequest("http://twitter.com/daydev"), "_blank");
            followBtn.removeEventListener(MouseEvent.MOUSE_UP, follow);

        }

และแก้ไข URL ที่เรา FTP ไฟล์ twitter.php ขึ้นไปครับที่ บรรทัดนี้ ซึ่งทางเรา Upload file ไปที่ URL
นี้ครับ http://daydev.com/twitter/twitter.php

private function initTwit():void
        {
            var l:URLLoader = new URLLoader();
            l.addEventListener(Event.COMPLETE, loaded);
            l.load(new URLRequest("http://daydev.com/twitter/twitter.php"));     
                                                                    
        }

บันทึกไฟล์ ชื่อว่า Twitter_Main.as

ในบทความต่อไปจะเป็นการ สร้าง Interface เพื่อลองรับการทำงานของ Action Script ตัวนี้ครับ

ติดตามตอนต่อไป….

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Leave a Reply

Back to top button

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน