Deep Linking trong Flash với AS3 – Phần 1

Người ta vẫn nói rằng Flash không được thân thiện với SEO. Rất khó để các máy tìm kiếm có thể đọc được nội dung trong Flash. Điều đó đúng, nhưng không đúng hoàn toàn. Deep linking sẽ giúp các máy tìm kiếm nhận ra nội dung trong 1 trang Flash dễ dàng hơn.

Vậy trước hết cần phải hiểu Deep linking là gì. Khi bạn ghé thăm 1 trang web Flash, phần lớn đường link đến các menu khác nhau đều không đổi và nút “Back” trên browser coi như không có giá trị. Deep link trong Flash sẽ có dạng như sau: http://www.yoursite.com/#/link1. Khi đó file swf đã có 1 địa chỉ cụ thể và nút “Back” trên browser sẽ hoạt động như bình thường.

Để hiểu rõ hơn, bạn click vào link sau: http://www.khanhngn.com/deeplinking

Krasimir Tsonev, một chuyên gia về web đã thực hiện deep linking trong Flash bằng một quá trình gồm 2 phần. Phần Javascript xử lý các sự kiện trong trình duyệt. Còn phần ActionScript sẽ chịu trách nhiệm cho các sự kiện trong Flash. Hãy xem file HTML

<html>
<head>
    <title>Deep linking in Flash with AS3</title>
</head>
<body>
    <div id="animation"></div>
    <script type="text/javascript">
 
        var dl = new DeepLinkingClass();
        var swf = new FlashObject("./swf/flash.swf", "animationSwf", "500", "350", "9", "#999999");
        window.onload = function() {
            swf.addVariable("page", dl.getPath());
            swf.write("animation");    
            dl.flashObj = document.getElementById("animationSwf");
        }
         
        function updateAddress(address) {
            dl.setPath(address);
        }
 
    </script>
 
</body>
</html>

Sử dụng FlashObject để embed Flash vào HTML. Sau đó tạo đối tượng của class DeepLinkingClass. Class này chịu trách nhiệm về URL trên browser

var dl = new DeepLinkingClass();

Sau đó tạo các đối tượng FlashObject để nó hiển thị trong Flash. Địa chỉ trang web hiện tại sẽ được Object trong DeepLinkingClass cung cấp.

swf.addVariable("page", dl.getPath());

Thiết lập giá trị cho flashObj cũng rất quan trọng.

dl.flashObj = document.getElementById("animationSwf");

Cuối cùng là function để gọi ActionScript thực hiện nhiệm vụ update URL trên browser.

function updateAddress(address) {
    dl.setPath(address);
}

Đây là code của DeepLinkingClass:

DeepLinkingClass = {};
DeepLinkingClass = function() {
    deepLinkingObj = this;
    this.location = location;
    this.hash = location.search || location.hash;  
    this.loop();
}
DeepLinkingClass.prototype = {
    getPath:function() {
        if(this.hash.indexOf("#") < 0){
            return "";
        } else {           
            if(this.hash.charAt(this.hash.length-1) == "/"){
                return this.hash.slice(2, this.hash.length-1);
            } else {
                return this.hash.slice(2);
            }
        }
    },
    setPath:function(path) {
        if(this.location) {
            this.hash = path;
            top.location = path;
        }
    },
    loop:function() {
        if(this.hash != (top.location.search || top.location.hash) && this.flashObj) {
            this.hash = (top.location.search || top.location.hash);
            this.flashObj.changePage(this.getPath());
        }
        setTimeout("loop()", 200);
    }
}
 
var deepLinkingObj;
function loop() {
    if(deepLinkingObj) {
        deepLinkingObj.loop();
    }
}

Class này có 3 phương pháp:
– getPath(): lấy địa chỉ hiện tại trên browser. Không phải toàn bộ URL mà chỉ phần ta cần
– setPath(): thay đổi địa chỉ trên browser. Chuyển các giá trị như #home hoặc #aboutus
– loop(): phương pháp lặp, dùng để kiểm tra khi địa chỉ thay đổi sau đó update nội dung trên Flash. Không có vòng loop thì nút “Back” và “Forward” trên browser không hoạt động.

Dưới đây là code trong Flash:

package lib.document {
 
    import flash.display.MovieClip;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.external.ExternalInterface;
     
    public class App extends MovieClip {
         
        // movie clip that contains all the pages
        private var _pages:MovieClip;
        // movie clip that contains the menu buttons
        private var _menu:MovieClip;
        // current page
        private var _currentPage:String;
         
        function App(){
             
            ExternalInterface.addCallback("changePage", changePage);
             
            // getting initial page
            _currentPage = loaderInfo.parameters.page || "home";
             
            // constructing the pages
            _pages = new Pages();
            _pages.gotoAndStop(1);
            _pages.y = 70;
            addChild(_pages);
             
            // constructing the menu
            _menu = new Menu();
            _menu.y = _menu.x = 22;
            _menu.b1.addEventListener(MouseEvent.CLICK, onMenuButton1Clicked);
            _menu.b2.addEventListener(MouseEvent.CLICK, onMenuButton2Clicked);
            _menu.b3.addEventListener(MouseEvent.CLICK, onMenuButton3Clicked);
            _menu.b4.addEventListener(MouseEvent.CLICK, onMenuButton4Clicked);
            addChild(_menu);
             
            showPage(_currentPage);
             
        }  
        // change the current page
        function showPage(address:String):void {
            _pages.gotoAndStop(address);
            ExternalInterface.call("updateAddress", "#/" + address);
        }
        // update the page (called from the javascript)
        public function changePage(address:String):void {
            showPage(address);
        }
        // menu events
        private function onMenuButton1Clicked(e:Event):void {
            showPage("home");
        }
        private function onMenuButton2Clicked(e:Event):void {
            showPage("aboutus");
        }
        private function onMenuButton3Clicked(e:Event):void {
            showPage("portfolio");
        }
        private function onMenuButton4Clicked(e:Event):void {
            showPage("contacts");
        }
    }
}

Bạn có thể download toàn bộ source của bài này ở đây: download source

Bài sau tôi sẽ giới thiệu 1 cách khác để deep link trang Flash của bạn. Đó là cách sử dụng SWFAddress. Đó cũng là 1 cách dễ dàng và nhanh chóng để deep link.