2011年10月3日 星期一

[教學] Flash 支援瀏覽器上一頁、下一頁

當Web 2.0 面世後, 大大小小的網頁, 採用局部更新頁面. 瀏覽速度得以提升, 整合更為友善.
令使用習慣改變, 瀏覽器喪失基本功能. 上一頁與下一頁, 在應用AJAX 或Flash 是一件苦惱事情. 只有極少數網頁(Gmail 等等), 還照顧這個用戶習慣.

Flash 支援瀏覽器上一頁、下一頁, 我們可以使用jQuery history (不建議使用Really Simple History, 因為支援度和穩定性不足), 為大家介紹一個簡單範例:


範例功能:
  1. 在Flash 按下按鈕, 然後修改URL 路徑
  2. 按瀏覽器上一頁或下一頁, 在不更新頁面情況下, 改變Flash 內容
  3. 在瀏覽器輸入URL 路徑, Flash 的起始頁為該內容

請按 [觀看] 範例


範例使用的JavaScript 程式庫:

  • jquery-1.6.4.min.js - 因jquery.history plugin 是基於jQuery 建構成, 這個程式庫是必須
  • jquery.history.js - 支援瀏覽器上一頁與下一頁功能. 它支援的瀏覽器類型:
      - Internet Explorer 6, 7, and 8+
      - Safari 4 and 5+
      - Google Chrome 4+
  • swfobject.js - 在不同瀏覽器上, 提供插入SWF 一致方法


範例使用的Action Script 類別:



範例說明:

  • 當使用戶在Flash 按下"Page 4" 按鈕時

    在Action Script 層面, 收到Mouse 事件後, 我們呼叫外部JavaScript 的"addHistory"
    function clickP4Handler(event:MouseEvent):void{
      var location:String = "p4";
      ExternalInterface.call("addHistory", location);
      changeLocationHandler(location);
    }
    this.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
    

    在JavaScript 層面, 利用window.location 修改URL 路徑
    (請不要使用Flash 的navigatorToURL() 修改, 因每個瀏覽器解讀是不一致)
    function addHistory(location){
      window.location = "#"+location;
    }
    

  • 在Action Script 層面登錄"changeLocation", 提供給JavaScript 呼叫

    由於ExternalInterface 登錄, 必須等待Flash Player 在HTML 層面完成載入. 在Action Script 我們會不斷呼叫"checkFunction", 查詢是不否完成載入
    function enterFrameHandler(event:Event):void{
      if(ExternalInterface.call("checkFunction"))
        this.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
      ExternalInterface.addCallback("changeLocation", changeLocationHandler);
    }
    this.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
    

    在JavaScript 層面, 測試Flash Player 是否完成載入
    function checkFunction(){
      return document.getElementById("jquery_history").changeLocation!=undefined;
    }
    

  • 最後, 當用戶按瀏覽器上一頁或下一頁

    在JavaScript 層面, 收到history 事件改變, 我們呼叫外部Action Script 的"changeLocation"
    jQuery(document).ready(function($) {
      function load(loc) {
        if(checkFunction())
          document.getElementById("jquery_history").changeLocation(loc);
        lastLocation = loc;
      }
      $.history.init(function(url) {
        load(url == "" ? "1" : url);
      });
      $('#ajax-links a').live('click', function(e) {
        var url = $(this).attr('href');
        url = url.replace(/^.*#/, '');
        $.history.load(url);
        return false;
      });
    });
    

    在Action Script 層面, "changeLocation" 把內容gotoAndStop 跳至合適位置
    function changeLocationHandler(location:String):void{
      switch(location){
        default:
        case "p1": contentMc.gotoAndStop(1); break;
        case "p2": contentMc.gotoAndStop(2); break;
        case "p3": contentMc.gotoAndStop(3); break;
        case "p4": contentMc.gotoAndStop(4); break;
      }
    }
範例可在Internet Explorer, Safari, Google Chrome, Firefox, Opera... 等等, 運作正常.
大家可以 [下載], 然後一齊看看, 做一個友善的Flash 平台.

沒有留言: