Deep Linking trong Flash với SWFAddress – Phần 2

Trong phần 1 về chủ đề Deep Linking tôi đã giới thiệu cơ bản về Deep Linking và 1 phương pháp để áp dụng vào 1 Flash site cụ thể. Phần 2 này tôi muốn giới thiệu 1 cách làm khác rất dễ dàng và phổ biến hiện nay, đó là sử dụng thư viện SWFAddress do công ty Asual phát triển. SWFAddress là 1 thư viện nhỏ nhưng rất hiệu quả trong việc thực hiện Deep Linking cho Flash và Ajax.

Bạn click vào đây để xem demo của bài này: demo

Trước hết, bạn cần download gói SWFAddress ở đây: http://www.asual.com/swfaddress/

Để thực hiện Deep Linking cho 1 trang Flash, bạn cần 4 thứ trong gói này. Đó là folder “swfaddress” chứa “swfaddress.js” và folder “swfobject” chứa “swfobject.js” (2 folders này tìm trong samples/flash) và 2 class “SWFAddress.as”“SWFAddressEvent.as” (tìm trong samples/adobe). Để có được kết quả như demo thì thư mục trên host của bạn gồm các thành phần như hình sau:


Vậy còn thiếu 2 thứ phải làm là index.htmlindex.swf. Trước hết làm việc với file index.html. File này trong thẻ <head> phải có 2 dòng sau:

<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript" src="swfaddress/swfaddress.js"></script>

Còn thẻ <body> thì trông như thế này:

<body>
	<div id="content">
           <p>Để xem trang này cần javascript và Flash 8+</p>
        </div>
        <script type="text/javascript">
        // < ![CDATA[
            var so = new SWFObject('index.swf', 'website', '550', '400', '8', '#ffffff');
            so.useExpressInstall('swfobject/expressinstall.swf');
            so.addParam('menu', 'false');
            so.write('content');
        // ]]>
        </script>
</body>

Bước tiếp theo là tạo file Flash. Bạn có thể tạo trang Flash rất đơn giản như demo bằng cách đặt mỗi trang ở 1 Frame hoặc mỗi trang là 1 MovieClip hoặc như thế nào đó mà bạn thích. Ở đây tôi tạo 4 MovieClip là “home_mc”, “about_mc”, “portfolio_mc”“contact_mc” tương đương với 4 trang.

Button “Contact” hoạt động như sau:

var currentSite:MovieClip = home_mc; //trang đầu tiên là home
contact_btn.addEventListener(MouseEvent.CLICK, contactClick);
function contactClick(evt:MouseEvent):void
{
	if (currentSite != contact_mc)
	{
		//Đặt giá trị cho SWFAddress:
		SWFAddress.setValue("Contact");
		currentSite.visible = false;
		contact_mc.visible = true;
		currentSite = contact_mc;
	}
}

3 Button còn lại hoàn toàn tương tự. Đến đây tất nhiên bạn chưa có được Deep Linking. Phần quan trọng nhất là đưa SWFAddress vào làm việc.

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, onChange);
function onChange(evt:SWFAddressEvent):void
{
	//thiết lập tiêu đề của site trên browser
	if (evt.value != "/")
	{
		SWFAddress.setTitle("Deep Linking - "+evt.value.substring(1));
	}
	else
	{
		SWFAddress.setTitle("Deep Linking");
	}
}

Tới đây bạn sẽ thấy SWFAddress hoạt động rồi. Flash site đã có Deep Link dạng http://localhost/deeplinking/#/contact. Tuy nhiên nút “Back” và “Forward” trên Browser vẫn chưa hoạt động. Cái thiếu chính là điều kiện để nó thực hiện Back hoặc Forward. Bạn viết tiếp đoạn sau vào trong function onChange

function onChange(evt:SWFAddressEvent):void
{
	//thiết lập tiêu đề của site trên browser
	if (evt...
	//để nút Back trên browser hoạt động cần:
	switch (evt.value)
	{
		case "/Home" :
			homeClick(null);
			break;
		case "/About" :
			aboutClick(null);
			break;
		case "/Portfolio" :
			portfolioClick(null);
			break;
		case "/Contact" :
			contactClick(null);
			break;
		case "/" :
			homeClick(null);
			break;
	}
}

Tới đây bạn đã có 1 demo Flash site với Deep Linking hoàn chỉnh. Mỗi 1 trang trong Flash site của bạn đã có riêng 1 đường link.