Displaying articles with tag flash

Ruby on Rails :: Page caching

Posted by PunNeng, Mon Oct 06 01:17:00 UTC 2008

รีบปั่นก่อน ก่อนที่ merb 1.0 จะออกมา เดี๋ยวจะไม่ได้เขียน blog สักเท่าไหร่ เพราะคงไปนั่งวุ่นอยู่กับ merb นี่แหละ

post อันนี้ คงจะอยู่ทั้ง blog ผม และ rails66.com ด้วย เขียนทีเดียว แปะมันทั้งสองที่

วิธีการทีจะลดการทำงานของ server ได้ หนึ่งวิธีในนั้นที่ช่วยได้เยอะเลยคือการทำ cache
ใน Rails เองมีการทำ cache อยู่ 4 ระดับ คือ

  • page caching
  • action caching
  • fragment caching
  • sql caching

และตัวควบคุมการลบ cache พวกนี้ ก็คือ

  • sweeper

อันแรกนี้ ขอเป็น page caching ก่อน

ซึ่ง page caching เนี่ย มันจะเก็บ output ไว้เป็น file โดย save ไว้เป็น html เลย โดยเก็บไว้ใน public/ ซึ่งสามารถเปลี่ยนที่เก็บได้ เดี๋ยวค่อยว่ากันอีกที เมื่อมันมี request มา มันจะวิ่งเข้าที่ file นี้แทน แทนที่จะวิ่งไปที่ controller แล้วก็ทำงานตามที่เราเขียนไว้

การทำ page caching นี้ เหมาะสำหรับอะไรที่มันอยู่นานๆ แล้วคงจะไม่เปลี่ยน เช่นระบบ blog ซึ่งปกติ จะไม่ค่อยแก้ไขอะไรเท่าไหร่ จะทำการลบ cache นี้ออก ก็ต่อเมื่อมีการ update หรือมีการเพิ่มข้อคิดเห็น(comment) เป็นต้น

เริ่มต้นด้วยการเปิด cache ก่อน โดยปกติ ถ้าเราทำงานใน development environment มันจะปิดระบบ cache ทั้งหมด แต่ถ้าสลับมาเป็น production environment มันจะทำการเปิด cache ทุกอย่าง ลองดูใน config/environments/production.rb

  1
config.action_controller.perform_caching = true

ไปตั้งค่าให้เป็น true ใน config/environments/development.rb มันก็จะไปเปิดตัวจัดการ cache ให้

สมมติว่าถ้าต้องการเปลี่ยน path ในการเก็บ cache ก็ใส่เพิ่มไปว่า

  1
config.action_controller.page_cache_directory = RAILS_ROOT + "/public/wherever/you/want/"

เวลาเข้าถึงก็ http://localhost:3000/wherever/you/want/file

วิธีเซ็ต page caching ก็ง่ายๆ เราใส่ไปใน controller ว่า

  1
  2
  3
  4
  5
  6
class PostsController < ApplicationController
  caches_page :show
  def show
    @post = Post.find params[:id]
  end
end

แค่นี้เอง

เวลาจะลบ cache สมมติว่าเราจะลบ หลังจากที่เรา update content ของเรา เราก็ใส่ใน controller ไปว่า

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
def update
  @post = Post.find params[:id]
  if @post.update_attributes params[:post]
    flash[:notice] = "Updated"
    expire_page :action => "show", :id => @post.id
    redirect_to :action => "index"
  else 
    render :action => "edit"
  end
end

expire_page จะไปทำการลบให้เองเลย สบายมากๆ (รออีกสักหน่อย เดี๋ยวจะเขียนเรือง sweeper มาจัดการตรงนี้ครับ)

แต่ก็ใช่ว่าจะไม่มีปัญหาเลย เพราะหลังจาก update เสร็จแล้ว เราควรที่จะแสดงข้อความอะไรบอกหน่อย ในที่นี้ผมใส่ไปใน flash[:notice] ปัญหามันคือ มันจะเก็บ cache ไว้ในขณะที่มีข้อความนี้อยู่บนหน้า เพราะมันจะเก็บตอนที่เราสั่ง redirect_to

วิธีซ่อมแบบไม่ลงแรงเลยคือ ใช้ plugin ที่ชื่อว่า Cacheable Flash

เอามาจาก นั่งเทียนเขียนข่าว#12 ครับ

โดยวิธีการมันก็ง่ายๆ ครับ คือเก็บข้อความไว้ใน cookie ก่อน แล้วก็ดึงมาแสดงผลด้วย javascript อีกที
แต่ผมไม่ค่อยชอบ น่าจะมีตรวจว่ามี flash หรือเปล่า ก็เลยลงมืองัดแงะปลุกปล้ำเสียหน่อยได้หน้าตาแบบนี้

  1
caches_page :show, :if => Proc.new{ |p| p.request.session.data["flash"].blank?}

คือ cache ถ้า flash message ว่าง
ดูเท่กว่าเยอะ

ปล. อาทิตย์หน้ามาต่อกับ action caching ครับ

ข้อมูลจาก rails api

1 comment | Filed Under: Ruby on Rails | Tags: flash

Debugging ActionScript with Firebug

Posted by PunNeng, Tue Apr 15 23:26:00 UTC 2008

ผมทำ flash ก้อนนึง ให้เพื่อนผมอยู่ ตอนทำก็ปกติดี แต่ตอนเอาขึ้นเว็บแล้วต้องทดสอบนี่สิ ไอ้หยาาา!! มัน trace ไม่ได้

เมื่อ trace(); ไม่แสดงผลบน browser จะ debug ยังไง ??

เมื่อก่อนใช้ xRay ก็ ok นะ trace ได้เยอะดี

แต่ตอนนี้ ขี้เกียจติดตั้ง เล่นมันง่ายๆ กับ Firebug นี่แหละ ไม่เคยใช้ ?? เข้านี่เลย -> Firebug

ใน Firebug เราสามารถ print ค่าอะไรบางอย่างได้ด้วย colsole.debug(whatyouwant); ใน JavaScript ยังมี console.log, console.info, console.warn, and console.error อีกด้วย ตอนที่ให้ flash แสดงผล ก็บน browser เช่นกัน !! อะฮ้า จัดการต่อ flash(AS3) ไปยัง JavaScript เสียเลย ได้หน้าตาแบบนี้

  1
  2
  3
  4
function firebug(msg:String):void{
  ExternalInterface.call("console.debug", msg);
}
firebug("what_you_want");

สำหรับ AS2 ก็เหมือนๆ กัน

  1
  2
  3
  4
function firebug(msg:String):void{
  getURL("javascript:console.debug(msg)");
}
firebug("what_you_want");

เฮ้ละ IE(และศัตรูอย่าง Safari/Opera) ไม่มี Firebug!!

โหลด Firebug lite ไปใช้ได้

ปล. ที่ไม่ค่อยได้เขียน blog เพราะทำ flash ให้เพื่อนผมอยู่(เป็นแพะไปซะ วะฮะฮ่า)
ปอ. ผมรัก Firebug

5 comments | Filed Under: General | Tags: flash

Flash :: Introduction to ActionScript 3.0

Posted by PunNeng, Sat May 26 04:19:00 UTC 2007

เล็กน้อย สำหรับ ActionScript
ActionScript หรือเรียกย่อๆ ว่า AS เป็น programming language ที่ใช้บน Flash ทำหน้าที่ควบคุมต่างๆ นานา บน flash มันจะทำงานบน ActionScript Virtual Machine(AVM) ซึ่งเป็นส่วนหนึ่งบน flash player มันจะถูก compile เป็น bytecode ที่จะเอาไปใช้ต่อไป นอกจากใช้บน flash ได้แล้ว มันยังใช้บน flex ได้ด้วย ซึ่งการนำไปใช้ มันจะติดไปกับไฟล์ .swf ซึ่งจะถูก flash player เรียกใช้งานอีกทีนึง

มาถึง ActionScript 3.0 บ้าง
ActionScript 3.0 ได้ถูกออกแบบมาให้เป็น Object-Oriented(OO) เต็มตัว ใครที่คุ้นเคยกับ OO อยู่แล้ว ก็จะสบายไป
มาดูว่า AS3 มันทำอะไรได้บ้าง

  • Virtual Machine ตัวใหม่ เรียกว่า AVM2 มีประสิทธิภาพมากกว่าเดิมด้วย bytecode แบบใหม่
  • Compiler ตัวใหม่ ที่ปรับให้เข้ากับมาตรฐานของ ECMAScrpt(ECMA 626) ซึ่งผ่านการปรับปรุงและ optimize ให้ดีขึ้นมากกว่าตัวเก่า
  • ปรับปรุงและเพิ่มเติม application programming interface(API) ด้วยตัวควบคุมระดับต่ำ(low-level - ใกล้เคียงภาษาที่ computer ใช้ประมวลผล ทำให้ประมวลผลเร็วขึ้น) และรูปแบบที่เป็น OO จริงๆ
  • ตัวภาษาหลัก ก็ใช้มาตรฐานของ ECMAScript(ECMA -262) ที่ปรับปรุงครั้งที่ 4 ซึ่งกำลังร่างอยู่(อันบนเป็นการปรับปรุงครั้งที่ 3)
  • XML API ก็ใช้มาตรฐานของ ECMAScript for XML(E4X-ECMA-357 ปรับปรุงครั้งที่ 2) E4X เป็นตัวที่เพิ่มให้ XML เป็น Data type อีกชนิดนึงของ ActionScript(ลองแล้ว ง่ายโคตร)
  • รูปแบบของ Event ใช้มาตรฐานของ Document Object Model(DOM) Level 3

AS3 เหมาะสำหรับงานทีมีความซับซ้อนสูงๆ งานที่ออกแบบด้วย OO หรืองานที่ต้องการที่จะนำกับไปใช้ใหม่(reuseable)

สำหรับสิ่งใหม่ๆ สำหรับ AS3
นอกจากจะเพิ่ม features ใหม่ๆ แล้ว มันยังเปลี่ยนรูปแบบต่างจาก version ก่อน ไม่ว่าจะเป็น syntax หรือรูปแบบของ OO และอื่นๆ อีก
มาดู features ของฝั่งภาษาหลัก
Run-time exceptions
เพิ่มมาแล้ว สามารถดักจับในขณะที่งานเรากำลังเล่นอยู่ ซึ่งใน version ก่อน เราต้องเขียนสั่งเอง ก็ช่วยในการ debug นั่นแล
Run-time types
อันนี้เกี่ยวกับการประกาศ data type ซึ่งใน version ก่อน ตอน compile มันจะ check ให้ เพื่อตรวจสอบการเขียน code ของเราให้ผิดพลาดน้อยที่สุด แต่พอรันแล้ว มันกลายเป็นชนิด dynamic(duck type1) ซึ่งจริงๆ มันก็ถูกแปลงให้เป็น bytecode ของ AS1 อีกที แต่ในตัวใหม่ ไม่เป็นแล้ว ก็ช่วยให้เราใช้หน่อยความจำน้อยลง ทำงานเร็วขึ้น เพราะไม่ต้องไปตรวจสอบอีกที ว่ามันเป็นชนิดอะไร
Sealed classes
sealed class คือ class ที่ไม่สามารถเพิ่ม property และ method ในขณะที่มันกำลังเล่นอยู่ได้ มีส่วนทำให้งานมีประสิทธิภาพมากขึ้น เพราะไม่ต้องเสียหน่วยความจำหรือการประมวลผลไปกับเพิ่มส่วนนี้ ยกเว้น Object class ก็ยังคงทำได้ และถ้าเราไม่ต้องการลักษณะของ sealed class สามารถทำได้โดยประกาศ dynamic หน้า class นั้นๆ
Method Closures
เป็นการสั่งให้ method จำ object ที่ตัวเองอาศัยอยู่ได้ ปัญหามักจะเกิดกับการคุม event อธิบายด้วย code ดีกว่า
มาดูของเก่ากับ AS2

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
import mx.controls.Button;
import mx.utils.Delegate;

function clickHandler(eventObj:Object):Void {
    trace("[" + eventObj.type + "] event on " + eventObj.target + " instance.");
    trace("\t this -> " + this);
}

var buttonListener:Object = new Object();
buttonListener.click = function(eventObj:Object):Void {
    trace("[" + eventObj.type + "] event on " + eventObj.target + " instance.");
    trace("\t this -> " + this);
};

this.createClassObject(Button, "one_button", 10, {label:"One"});
one_button.move(10, 10);
one_button.addEventListener("click", clickHandler);

this.createClassObject(Button, "two_button", 20, {label:"Two"});
two_button.move(120, 10);
two_button.addEventListener("click", buttonListener);

this.createClassObject(Button, "three_button", 30, {label:"Three"});
three_button.move(230, 10);
three_button.addEventListener("click", Delegate.create(this, clickHandler));

เมื่อคลิกที่ one_button จะได้

[click] event on _level0.one_button instance. this -> _level0.one_button

คลิกที่ two_button จะได้

[click] event on _level0.two_button instance. this -> [object Object]

คลิกที่ three_button จะได้

[click] event on _level0.three_button instance. this -> _level0

ในกรณีนี้ this จะเปลี่ยนไป ขึ้นอยู่กับว่ามันอยู่ object ตัวไหน พระเอกเลยเป็นmx.utils.Delegate แทน
แต่ของใหม่ ไม่สามารถสร้าง object ที่จะมารับดัก event ได้ มันจึงเป็นการบังคับ this ไปในตัวว่าต้องเป็นบน object ที่ method ตัวนั้นอยู่เท่านั้น
ECMAScript for XML (E4X)
โม้ไปข้างบนละ

XML API ก็ใช้มาตรฐานของ ECMAScript for XML(E4X-ECMA-357 ปรับปรุงครั้งที่ 2) E4X เป็นตัวที่เพิ่มให้ XML เป็น Data type อีกชนิดนึงของ ActionScript(ลองแล้ว ง่ายโคตร)

เอาเป็นว่าการใช้ xml มันจะง่ายขึ้นเยอะ
Regular expressions
แน่นอน ผมเคยบอกไปแล้ว ว่า AS3 จะใช้ RegExp ได้
Namespaces
นอกจาก xml ในของเก่าแล้ว ของใหม่ก็รองรับเหมือกัน สามารถสร้าง namespace ใช้เองได้
New primitive types มีชนิดของข้อมูลแบบพื้นฐานใหม่ เช่น int หรือ uint ซึ่ง int คือ 32 bit sign interger ส่วน uint คือ 32 bit unsigned integer ใช้ให้ถูกต้องตามลักษณะจะช่วยเพิ่มประสิทธิภาพการทำงานให้ flash player เยอะเลย

มาดู features ของฝั่ง flash player บ้าง โดยส่วนใหญ่จะเป็นเรื่องของ api อันใหม่ เตรียม class ใหม่ๆ ไว้ให้ code เราสั่งมันทางาน
DOM3 event model
ข้างบนก็แว่บๆ มาแล้วทีนึง มันก็เป็นมาตรฐานของ event handling ที่กำหนดโดย World Wide Web Consortium เป็นแนวทางใหม่กับการจัดการเรื่อง event handling ใน flash Display list API
ฝั่งการแสดงผล ก็มีของใหม่มาอีก เช่น Sprite class และ Shape class หรือของเก่าที่มีอยู่แล้วอย่าง MovieClip class ซึ่งความเหมือน หรือแตกต่าง เดี๋ยวมาว่ากันทีหลัง ซึ่งล้วนแต่เพิ่มประสิทธิภาพในการทำงานทั้งสิ้น
Handling dynamic data and content
กลไกใหม่ๆ เพิ่มมาอีกแล้ว อย่างการโหลดของภายนอกอย่างภาพต่างๆ หรือข้อมูลจาก file จะมี Loader class ที่ไว้โหลด .swf หรือภาพต่างๆ ซึ่งจะบอกข้อมูลรายละเอียดต่างๆ ของสิ่งที่เราโหลดเข้ามา ผมว่ามันง่ายดีนะ สำหรับการจัดการพวก preload ทั้งหลาย หรือ URLLoader class ก็จะจัดการกับการโหลด text เข้ามา หรือ Socket class ที่ไว้จัดการกับการต่อ server socket ต่างๆ
Low-level data access
ต่อจากอันบน กับการโหลดสิ่งต่างๆ จากภายนอก มันใช้สิ่งนี้แหละ ในการติดต่อกับข้อมูลระดับต่ำในการเก็บข้อมูลต่างๆ เข้ามา เช่น URLStream class ซึ่ง URLLoader class เอามาทำต่อยอดอีกที ก็ใช้ในการเข้าถึงข้อมูลดิบที่ยังไม่ได้ผ่านการแปลงอะไรเข้ามา หรือ ByteArray class จะใช้ในการจัดการกับ binary data ได้ ไม่ว่าจะอ่านหรือเขียนก็ตาม และของใหม่อย่าง Sound API ที่มีสิ่งที่เพิ่มมาอย่าง SoundChannel และ SoundMixer แค่ชื่อก็น่าเล่นแล้ว และนอกจากนี้ ชุด API ใหม่นี้ ยังจัดการในเรื่องความปลอดภัยในการให้สิทธิ์กับ SWF file หรือการโหลดข้อมูลต่างๆ ซึ่งจะเพิ่มความสามารถด้านความปลอดภัย
Working with text
AS3 แยกการทำงานกับ text ออกมาต่างหากเลย อย่าง TextLineMetrics class, TextField class และอีกต่างๆ นานา รวมถึง Font class ด้วย ที่จะให้เราจัดการเรื่อง font ได้เต็มที่ ผมก็หวังว่ามันคงจะดีนะ(ที่หวัง เพราะยังไม่ได้ลองเลย)

ทีนี้ มาลองดูว่า มันจะเข้าอะไรได้หรือไม่ได้กับ flash ของเก่าบ้าง
สำหรับตัว player ซึ่งตอนนี้คงเป็น version 9 ก็สามารถแสดงผล .swf ที่สร้างจาก version เก่าๆ ได้หมด แต่ของเรา แสดงผลของใหม่ได้ไม่หมดนะ ก็รีบ update กันนะ แต่ก็ใช่ว่าจะเข้ากันได้หมดทุกอย่าง ดังนี้

  • ไม่สามารถเขียน AS1-2 รวมกับ AS3 ได้ - ต้องแยก
  • AS3 โหลด .swf ที่เขียนด้วย AS1-2 ได้ แต่ไม่สามารถเข้าถึง property หรือ method ได้ - ใช้ได้ในการเตรียม asset ต่างๆ อย่างเดียว
  • ในทางตรงกันข้าม .swf ที่เขียนด้วย AS1-2 ไม่สามารถโหลด .swf ที่เขียนด้วย AS3 ได้ - ถ้าสร้างจาก flash8 หรือ Flex Builder 1.5 ละก็ ทำงานร่วมกันไม่ได้เลย มีข้อยกเว้นหน่อย คือ .swf ที่เขียนด้วย as2 สามารถโหลด .swf ที่เขียนด้วย as3 เข้ามาทับตัวมันได้ โดยที่ต้องยังไม่โหลดหรือทำอะไรกับ level ของมัน ซึ่งทำได้โดยใช้ loadMovieNum() method แล้วส่ง 0 ไปเป็น level
  • ถ้าอยากให้มันทำงานร่วมกัน ต้องแปลงของเก่า ไปเป็นของใหม่ครับ ใน help จะมี index บอกอยู่ว่าอะไรที่เปลี่ยนไปบ้าง คงต้องปรับๆ ครับ

จากทั้งหมดที่เล่ามา สรรพคุณที่เห็นกันอย่างเด่นชัดเลยคือประสิทธิภาพในการทำงานของ Flash Player ที่ดีขึ้น เนื่องมาจากการจัดการกับ bytecode ใหม่ ซึ่งต้องสร้างจาก ActionScript 3.0 นอกจากเรื่องประสิทธิภาพแล้ว ยังมีเรื่อง OO ที่ดูเป็นรูปเป็นร่างขึ้นมามากกว่าของเก่า ซึ่งตัวนี้แหละ จะช่วยให้เราจัดการกับงานใหญ่ๆ ได้ดีขึ้น

1duck type คือ เป็นชนิดอะไรก็ได้ ขึ้นอยู่กับการใช้งาน เหมือนเป็ด ทำได้ทุกอย่าง

ปล. thaiflashdev ตายอยู่ ชาว flash ใจเย็นนะครับ :)
ข้อมูลจาก help ของ flash

1 comment | Filed Under: General | Tags: flash

Flash on Ubuntu - haXe - swfmill - MTASC

Posted by PunNeng, Thu May 10 17:59:00 UTC 2007

จริงๆ มันก็ไม่ได้เฉพาะเจาะจงอะไรกับ 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
ใส่ค่าดังนี้

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
<?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 ว่า

  1
  2
  3
  4
  5
  6
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 ว่า

  1
  2
  3
  4
  5
  6
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 ครับ มีอะไรให้เล่นอีกเพียบบบ

2 comments | Filed Under: General | Tags: flash

Making transparent flash video

Posted by PunNeng, Thu Apr 26 03:16:00 UTC 2007

ช่วงนี้ผมยังวนเวียนอยู่กับ Flash ครับ ยังเพลินนนน

ผมจะมาเล่นกับ video บ้าง ไม่ค่อยมาเล่นเท่าไหร่ ก็ตามหัวข้อละครับ วิธีทำ flash video ให้มันโปร่งใส โดยใช้ blue screen เป็นส่วนที่ทำให้โปร่งใส

แบบด้านล่าง
หรือจิ้มที่นี่ .swf เพื่อดูเต็มๆ แล้วย่อหน้าต่างไปที่ 640x480 นะครับ

โดยผมจะใช้ Final Cut Pro 5.1 เป็นตัวช่วยทำ video ก่อน แล้วใช้ Flash 8 Video Encoder เป็นตัวแปลงให้เป็น .flv

เริ่มด้วยการทำ video ที่ใช้ฉากหลังเป็น blue screen ก่อน โดยผมจะใช้ video จาก www.tzi.de/tkikeyer ละกัน file ที่ 1 หน้าตาประมาณนี้ blue_screen

จากนั้น ไปที่ File->Import->Files... แล้วเลือก video ที่โหลดมา มันจะยังใช้ไม่ได้หรอกครับ ต้องแปลงมันก่อน สำหรับบน Mac ผมแนะนำให้ Record แล้ว export เป็น .mov ไปเลยครับ จะได้ไ่ม่ต้องมีปัญหากับเรื่อง file format ผมขี้เกียจ record ครับ เลยไปเอาของฟรีมาใช้ ก็ต้องแปลงไปแปลงมา =='
ผมจะใช้ VLC เป็นตัวแปลงละกัน สำหรับวิธีแปลง ง่ายดายมากมาย แค่เปิด file.avi ขึ้นมา เลือก Streaming/Exporting Wizard -> Transcode/Save to file -> Existing playlist item -> Transcode video(MPEG-4 Video) ->MPEG 4 /MP4 -> เลือกที่จะ save file และตั้งชื่อ file เป็นการแปลง file แบบ ขอไปที อย่าเอาเป็นเยี่ยงอย่างนะครับ =='

เอาใหม่ import file ใหม่ ที่เราแปลงมานั่นแหละ แล้ว drag จาก หน้า browser ไปที่ timeline ด้านล่าง ก็จะได้ประมาณนี้

finalcut1

แล้ว double click ที่เราลากไปแปะนั้นแล จากนั้น double click ที่หน้าต่าง Canvas ตัว video จะไปโผล่ที่หน้าต่าง Viewer อีกที แล้วไปที่ Effects -> Video Filters -> Key -> Blue and Green Screen จากน้ันเลือกที่แท็ป filters ของหน้าต่าง Viewer จะได้ดังรูป

finalcut2

แล้วหน้าต่าง Canvas จะเปลี่ยนแปลงตามที่เราปรับ ซึ่งผมพอใจกับค่าตัวเลขที่ปรับไปดังภาพ แล้วปรับ Background ให้เป็น White บนหน้าต่าง Viewer และ Canvas จะได้ดูได้เหมือนๆ กัน (จริงๆ เลือกที่ Viewer ตัวเดียวก็ได้) ถ้าไม่ปรับเป็น White มันไม่ยอมเป็น transparent ให้ครับ

finalcut3

แล้วก็ทำการ export เลย คลิกเลือกที่หน้าต่าง Canvas หนึ่งที แล้วไปที่ File -> Export -> QuickTime Movie...(อันแรก) แล้วจะมีหน้าต่างให้เลือก options ต่างๆ ตรง Setting ให้เลือก Custom... แล้วจะได้หน้าต่างอีกหน้าต่าง เป็น Sequence Preset Editor แล้วเลือก options ตามต้องการ แต่ตรง Compressor ให้เลือกที่ Animation แล้วเลือกที่ปุ่ม Advanced... ด้านล่างอีกทีนึง แล้วเลือก Depth: ให้เป็น Millions of Colors+ แล้ว Ok ไปเรื่อยๆ จนมาถึงหน้าที่เราจะสั่ง save ให้แน่ใจว่าเราเลือก Make Movie Self-Content แล้วด้วย แล้วตั้งชื่อ แล้วก็ Save เลย มันจะ Render มาให้ file นึง

จากนั้นไปที่ Flash 8 Encoder โลดด (Flash 9 ออกแล้ว ไอ่เหน่งยังบ้านนอกอยู่ครับ ==') add file ที่มันถูกสร้างขึ้นมาตอน export แล้วเลือกที่ file แล้วไปที่ Settings -> Show Advanced Settings -> เลือกที่ Encode Alpha Channel แล้วกด OK แล้วไป Start Queue ก็จะได้ .flv มาตัวนึง

มาที่ Flash บ้าง กด import(Ctrl+r) .flv นั้นมา แล้วแต่งเอาตามใจชอบ มันจะมีลักษณะ transparent ดังรูป

finalcut3_flash

ปล. video จะชัดหรือไม่ชัด ขึ้นอยู่กับความละเอียดของ video ต้นฉบับ และความละเอียดของผู้แต่ง video ครับ

1 comment | Filed Under: General | Tags: flash

codegent: we're hiring