Flash on Ubuntu

จริงๆ มันก็ไม่ได้เฉพาะเจาะจงอะไรกับ Ubuntu หรอก มันรวมทุก Linux ทุก distro นั่นแหละ เพียงแต่ผมทำมันบน Ubuntu เท่านั้นเอง เลยตั้งให้มันหน่อย

นานมาละ ผมเคยเล่าถึงภาษา haXe ซึ่งมันเป็นภาษาครอบจักรวาล มันทำ Flash, JavaScript หรือแม้กระทั่งภาษาฝั่ง server ซึ่งเป็นภาษามันเอง ก่อนที่ผมจะไปเล่น ActionScript 3.0 ก็เลยมาลองมันเสียหน่อย เพียงแค่จะบอกทุกท่านว่า บน Linux ก็ทำ Flash ได้นะ ไม่ต้องใช้ Macromedia(Adobe) Flash ด้วย โดยใช้ภาษา haXe และผองเพื่อนนี่แหละ เป็นตัวควบคุม

นอกจากภาษา haXe แล้ว ยังมีอีกหนึ่งเพื่อนซี้ของ haXe คือ swfmill

swfmill เป็นเครื่องมือไว้สร้าง .swf โดยใช้ xml หรือจะแปลงมันกลับก็ได้ จาก .swf ไปเป็น xml โดยมันสามารถเตรียมข้าวของต่างๆ ที่เราอยากจะใช้ใน flash จำพวก .swf รูปภาพต่างๆ font หรือเสียงต่างๆ โดยเราสามารถเอามันมาแปะไว้บน stage เลยก็ได้ หรืออยากจะเก็บไว้ใน library ไว้เรียกใช้อีกที ก็ไม่เสียหาย
ซึ่งผมจะใช้ swfmill นี้แหละ เป็นตัวสร้าง .swf โดยจะ import เข้ามาใช้ใน haXe อีกที

จริงๆ แล้ว ไม่ต้องถึงขั้น haXe ก็ได้ ใช้เพียงแค่ mtasc+swfmill ก็ใช้ได้แล้ว
ซึ่ง mtasc เป็น flash compiler ซึ่ง haXe ก็ใช้ compiler ตัวนี้แหละ เป็นตัว compile (คนสร้าง haXe กับ mtasc เป็นคนเดียวกัน)

เพียงแต่ผมอยากจะลองแตะๆ haXe ดูบ้าง ก็เท่านั้นแหละ

เอาไปดูก่อน นี่ทำบน Ubuntu ครับ (ใช้ arrow key บังคับ)

มาติดตั้ง haXe กันก่อน

$ wget http://www.haxe.org/_media/hxinst-linux.tgz
$ tar -xf .tar
$ sudo ./hxinst-linux

มันก็จะติดตั้งไปตามเรื่อง

ติดตั้ง swfmill

$ wget http://www.swfmill.org/releases/swfmill-0.2.12.tar.gz
$ cd swfmill-0.2.12.tar.gz
$ ./configure && make && sudo make install

ผมเจอปัญหาสองตัว ตัวแรก มันบอกว่า No package 'libexslt' found
เพราะว่า มันหา libexslt.pc ไม่เจอ
ลอง locate libexslt.pc มันจะอยู่ที่ /usr/lib/pkgconfig/

วิธีซ่อมก็พิมพ์

$ PKG_CONFIG_PATH=/usr/lib/pkgconfig/
$ export PKG_CONFIG_PATH

ใน terminal

ผมลองอีกที ก็จะเจอปัญหาอีก มันจะฟ้องว่าไม่มีตัว lgcrypt
ก็ไปเอามาแปะอีก

$ sudo apt-get install libgcrypt11-dev

แล้วลองใหม่ ก็ไม่มีปัญหา

ติดตั้งอีกตัว คือ mtasc

$ sudo apt-get install mtasc

จริงๆ แล้วตัว mtasc มันติดมากับ haXe เลย แต่ผมขี้เกียจไปหาวิธีใช้ กอปรกับจะใช้ SciTE ช่วยด้วย เลยเอาแบบนี้ดีกว่า

ติดตั้ง SciTE ด้วย

$ sudo apt-get install scite

ผมไม่อยากจะต้องมานั่งพิมพ์ command ทุกครั้งเวลาที่จะต้อง build งาน ก็เลยใช้ SciTE ช่วย โดยการไปตั้งค่านิดหน่อย ดังนี้

$ sudo gedit /usr/share/scite/cpp.properties

แก้ไขค่าเดิมให้เป็น

file.patterns.flash=*.as;*.asc;*.jsfl;*.hx
filter.flash=Flash (as asc jsfl hx)|$(file.patterns.flash)|
command.build.*.as=mtasc -swf ../library/$(FileName).swf -header 1:1:31 $(FileNameExt)

ให้มันทำการ highlight และตั้งค่าการ build โดยจะเซ็ตให้ file.swf มีขนาด 1x1 pixel และมี framerate = 31
และเพิ่ม

command.build.*.hx=haxe compile.hxml

ไว้ที่บรรทุดสุดท้ายเลย สำหรับสั่ง build

แก้อีก file

$ sudo gedit /usr/share/scite/html.properties

แล้วทำเหมือนเดิม

file.patterns.xml=*.xml;*.xsl;*.svg;*.xul;*.xsd;*.dtd;*.xslt;*.axl;*.xrc;*.rdf;*.swfml
filter.web=Web (html htm asp shtml css xml docbook jsp swfml)|$(file.patterns.web);*.css;*.xml;*.docbook|

และเพิ่ม

command.build.*.swfml=swfmill simple $(FileNameExt) $(FileName).swf

ไว้ที่บรรทุดสุดท้าย

config อะไรเรียบร้อยแล้วก็มาลองดู

$ mkdir haxe_test
$ mkdir haxe_test/src
$ mkdir haxe_test/library

แล้วโหลด Car.as.tar.gz ที่ผมทำไว้ ไว้ใน haxe_test/src
เปิด Application > Programming > SciTE Text Editor
แล้วเปิด Car.as ที่โหลดมา
แล้วกดปุ่ม build ที่ toolbar (icon รูปค้อน)

มันก็จะไปรันคำสั่งที่เราใส่ไปตอนต้น แล้วเราจะได้ Car.swf มาตัวนึง สำหรับเก็บ Car class ไว้เรียกใช้ในขั้นตอนต่อไป
ที่ใส่ขนาดเป็น 1x1 เพราะว่าเราไม่จำเป็นต้องแสดงผล .swf ตัวนี้

จากนั้นก็มาเตรียม library ไว้ใช้ โดยใช้ swfmill เป็นตัวจัดการ
new file ใน SciTE แล้ว save เป็น stage.swfml ไว้ใน haxe_test
ใส่ค่าดังนี้

<?xml version="1.0" encoding="iso-8859-1" ?>
<movie width="450" height="450" framerate="31" version="7">
  
  <frame>
    <library>
      <clip import="library/Car.swf" />
      <clip id="car" class="Car">
        <frame>
          <clip id="car_img" import="library/car.jpg" />
          <place id="car_img" x="-14.5" y="-25" depth="1"/>
        </frame>
      </clip>
    </library>
  </frame>
</movie>

ก่อนอื่น หารูปรถสักคัน resize ให้เรียบร้อยแล้ว save ไว้ใน haxe_test/library ตั้งชื่อว่า car.jpg
โดยมันจะ import Car class มา แล้วทำการใส่ class นี้ เข้าไปใน MovieClip(<clip/>) ที่มี id(identifier หรือ linkage id นั่นแหละ) ว่า car
โดย MovieCilp ตัวนี้ จะอยู่ใน Library ซึ่งจริงๆ แล้วเรายังสามารถใส่ <frame> เพิ่มได้อีก โดยระบุ name ไป เราก็จะใช้ gotoAndStop('name') ได้ เริ่มเป็น timeline น้อยๆ แล้ว
ใน MovieClip นี้ ยังมี MovieClip ข้างในอีกตัว มี id ว่า car_img เป็น image แล้วก็ระบุตำแหน่งของมันไป โดยให้ registry point ของ MovieCilp car อยู่ตรงกลางของ image นี้
สั่ง build อีกที เราจะได้ stage.swf มา

จริงๆ ถึงขั้นตอนนี้แล้ว เราสามารถสั่ง compile จาก mtasc ได้โดยสั่ง

$ mtasc -keep -swf stage.swf -out test.swf -main MtascTest.as

รับ stage.swf เข้ามา แล้ว export เป็น test.swf
keep คือสั่งให้มันไม่เคลียร์ class ของเก่าที่ทำไว้
โดยใน MtascTest.as(ใน haxe_test) ใส่ code ว่า

class MtascTest{
  static function main(){
    var car:MovieClip = _root.attachMovie("car","car",0,{_x:200,_y:200});
    car.startCar();
  }
}

แบบนี้ ก็ได้

หรือจะใช้ haXe ก็ได้ โดยสร้าง compile.hxml ไว้ใน haxe_test ไว้บรรจุ command โดยใส่ว่า

-swf haxe_test.swf
-swf-lib stage.swf
-main HaxeTest

แล้วสร้าง HaxeTest.hx ไว้ใน haxe_test แล้วใส่ code ว่า

class HaxeTest{
  static function main(){
    var car:flash.MovieClip = flash.Lib.current.attachMovie("car","car",0, {_x:200, _y:200});
    car.startCar();
  }
}

แล้วสั่ง build เลย ก็ได้เหมือนๆ กัน

แล้วก็เอา .swf ที่ได้ ไปใช้ตามสะดวก

เห็นไหม บน Linux ก็ทำ Flash ได้

สำหรับฝั่ง open source ของ flash สามารถเข้าไปดูได้ใน www.osflash.org ครับ
มีอะไรให้เล่นอีกเพียบบบ

จากเว็บผมเอง