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

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

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

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

<span style="color: #008000;">http://twitter.com/statuses/user_timeline.xml?screen_name=</span><span style="color: #ff0000;">USERNAME(ของคุณ)</span>

1	<span style="color: #008000;">http://twitter.com/statuses/user_timeline.xml?screen_name=</span><span style="color: #ff0000;">USERNAME(ของคุณ)</span>

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

<span style="color: #008000;">http://twitter.com/statuses/user_timeline.xml?screen_name=</span><span style="color: #ff0000;">daydev</span>

1	<span style="color: #008000;">http://twitter.com/statuses/user_timeline.xml?screen_name=</span><span style="color: #ff0000;">daydev</span>

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

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

<span style="color: #008000;">&lt;?xml version=</span><span style="color: #800080;">"1.0"</span><span style="color: #008000;">?&gt;</span><br /><span style="color: #008000;">&lt;!DOCTYPE cross-domain-policy SYSTEM <span style="color: #800080;"><br />"</span></span><span style="color: #800080;">http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"</span><span style="color: #008000;">&gt;<br /><span style="color: #0000ff;">&lt;cross-domain-policy&gt;</span><br />&lt;allow-access-from domain=<span style="color: #800080;">"www.twitter.com"</span> /&gt;<br /><span style="color: #0000ff;">&lt;/cross-domain-policy&gt;</span></span>

<?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 ดังต่อไปนี้

<strong><span style="color: #ff0000;">&lt;?php</span></strong><br /><span style="color: #008000;">$filename = '</span><span style="color: #ff0000;">http://twitter.com/statuses/user_timeline.xml?screen_name=daydev</span><span style="color: #008000;">';</span><br /><span style="color: #008000;">$handle =</span> <span style="color: #008000;"><span style="color: #0000ff;">fopen</span>($filename, 'r');<br />$contents =<span style="color: #0000ff;"> stream_get_contents</span>($handle);<br /><span style="color: #0000ff;">fclose</span>($handle);<br /><span style="color: #ff0000;">echo</span> $contents;</span><br /><span style="color: #ff0000;"><strong>?&gt;</strong></span><br />

<?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 มากมายบนเว็บเรา

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

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

<span style="color: #0000ff;">package<br />{<br />import flash.display.MovieClip;<br />import flash.events.MouseEvent;<br />import flash.net.navigateToURL;<br />import flash.net.URLRequest;<br />import flash.net.URLLoader;<br />import flash.events.Event;<br /><br />public class Twitter_Main extends MovieClip<br />{<br /><br />public function Twitter_Main():void<br />{<br /><span style="color: #ff9900;">initButton();<br />initTwit();</span><br />}<br />private function initButton():void<br />{<br /><span style="color: #ff9900;">followBtn.buttonMode = true;<br />followBtn.addEventListener(MouseEvent.MOUSE_OVER, over);</span><br />}<br />private function over(e:MouseEvent):void<br />{<br /><span style="color: #ff9900;">followBtn.gotoAndStop(2);<br />followBtn.removeEventListener(MouseEvent.MOUSE_OVER, over);<br />followBtn.addEventListener(MouseEvent.MOUSE_OUT, out);<br />followBtn.addEventListener(MouseEvent.MOUSE_DOWN, down);</span><br />}<br />private function out(e:MouseEvent):void<br />{<br /><span style="color: #ff9900;">followBtn.gotoAndStop(1);<br />followBtn.addEventListener(MouseEvent.MOUSE_OVER, over);<br />followBtn.removeEventListener(MouseEvent.MOUSE_OUT, out);<br />followBtn.removeEventListener(MouseEvent.MOUSE_DOWN, down);</span><br />}<br />private function down(e:MouseEvent):void<br />{<br /><span style="color: #ff9900;">followBtn.gotoAndStop(3);<br />followBtn.removeEventListener(MouseEvent.MOUSE_DOWN, down);<br />followBtn.addEventListener(MouseEvent.MOUSE_UP, follow);</span><br />}<br />private function follow(e:MouseEvent):void<br />{<br /><span style="color: #ff9900;">navigateToURL(new URLRequest(<span style="color: #008000;">"http://twitter.com/YOURUSER"</span>), "_blank");<br />followBtn.removeEventListener(MouseEvent.MOUSE_UP, follow);</span><br />}<br />private function initTwit():void<br />{<br />var l:URLLoader = new URLLoader();<br /><span style="color: #ff9900;">l.addEventListener(Event.COMPLETE, loaded);<br />l.load(new URLRequest(<span style="color: #008000;">"http://YOURHOST.COM/twitter.php"</span>));  </span><br />}<br />private function loaded(e:Event):void<br />{<br /><span style="color: #ff9900;">e.currentTarget.addEventListener(Event.COMPLETE, loaded);<br />var xml:XML = new XML(e.currentTarget.data);<br />var list:XMLList = new XMLList(xml.status.text);<br /><br />var boxArray:Array = new Array();</span><br /><br />for(var i:int = 0; i &lt; <span style="color: #ff0000;">4</span>; ++i){<br /><span style="color: #ff9900;">boxArray[i] = this.getChildByName("box" + i);<br />boxArray[i].textBox.appendText(list[i]);</span><br />}<br />}<br />}<br />}</span>

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

<span style="color: #0000ff;">for(var i:int = 0; i &lt; <strong><span style="color: #ff0000;">4</span></strong>; ++i){</span><br /><span style="color: #ff6600;">                boxArray[i] = this.getChildByName("box" + i);<br />                boxArray[i].textBox.appendText(list[i]);</span><br /><span style="color: #0000ff;">            }</span> <br />

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 ครับ

<span style="color: #0000ff;">private function follow(e:MouseEvent):void<br />        {<br /><span style="color: #ff6600;">            navigateToURL(new URLRequest(<span style="color: #008000;">"http://twitter.com/daydev"</span>), "_blank");<br />            followBtn.removeEventListener(MouseEvent.MOUSE_UP, follow);</span><br />        }</span>

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

<span style="color: #0000ff;">private function initTwit():void<br />        {<br /><span style="color: #ff6600;">            var l:URLLoader = new URLLoader();<br />            l.addEventListener(Event.COMPLETE, loaded);<br />            l.load(new URLRequest(<span style="color: #008000;">"http://daydev.com/twitter/twitter.php"</span>));     </span>                                                                     <br />        }</span><br />

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 ตัวนี้ครับ

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