星期五, 2月 12, 2010

SWFObject 2.2: SWFObject讓Flash變聰明了!

當我們用Dreamweaver或Flash發佈網頁時,我們聰明的Adobe軟體會自動在網頁中增加許多「讓人眼花」的程式碼,也許我們不確定這些程式碼能做什麼,反正它就是要用來插入Flash元件的程式碼就是了…,但是…如果要修改的話,有時候還真讓人覺得麻煩!而且一大堆黑麻麻的程式碼也讓人看了很不開心!

好在SWFObject(目前的版本是2.2)提供了「更智慧」的方法,可以用短短的程式碼就OK OK了!不但如此,它還提供了「替代圖片、替代文字」的功能以避免不支援Flash的情況發生(例如用iPhone上網時…)!

先說一下它的原理:載入swfobject.js後,用javascript指定DIV的ID名稱(SWFObject會將這個DIV給取代掉,因此可以在這個DIV中設定替代的方案,例如替代圖片或文字)、大小、以及其它「如果有需要再加上」的額外參數設定,例如具有透明背景的Flash等。

參考作法如下:

首先,我們準備相關素材:要置入的Flash檔案(swf/myFlash.swf/寬1000px、高650px)以及替代圖(images/myFlash.jpg/寬1000px、高650px),並且下載swfobject.js(js/swfobject.js);給等一下要置入Flash的DIV一個獨一無二的ID名稱(通常取和Flash一樣的檔名就好了,所以就是「myFlash」)。

然後就是加上網頁程式碼的部份了。找到要置放Flash的DIV:
<div id="myFlash">
  <a href="http://www.adobe.com/go/getflashplayer">
  <img src="images/myFlash.jpg" width="1000" height="650" alt="myFlash Content" title="myFlash Title"></a>
</div>

此時,這個「myFlash」DIV裡面的東西最大的功能只有一個:一旦Flash無法載入或載入失敗時,網頁依然會顯示出正確的畫面,也就是替代圖發揮功用的時候了!當然我們也可以進一步把這個DIV做成具有連結功能的圖片,即使沒有Flash,我們還是可以正常的瀏覽網站其它的內容。

在</head>上面加入底下的程式碼,先讓網頁載入swfobject.js,這樣swfobject才會有作用:
<script type="text/javascript" src="js/swfobject.js"></script>

設定適當的參數,讓SWFObject知道它該怎麼做:
<script type="text/javascript">
  var flashvars = {};
  var params = {};
    params.menu="false";
    params.wmode="transparent";
    params.bgcolor="#CCCCCC";
    params.allowfullscreen="true";
  var attributes = {};
    attributes.id="myFlash";
    attributes.name="myFlash";
  swfobject.embedSWF("swf/myFlash.swf", "myFlash", "1000", "650", "10.0.2", "false", flashvars, params, attributes);
</script>

SWFObject的編寫有一定的規則可依循:swfobject.embedSWF(*Flash路徑, *Flash要取代的id名稱, *Flash的寬, *Flash的高, *Flash發佈的版本, expressInstallSWFurl, flashvars, params, attributes, callbackFn);。其中,前面有打星號(*)的部份是必填的地方,其它可有可無。expressInstallSWFurl是要我們提供一個簡易安裝Flash Player的Flash檔案路徑,它會讓使用者連到Adobe官方網站下載最新的Flash Player,所以可以寫成「swf/expressInstall.swf」,或者直接寫成「false」,乾脆不提供…。

按上面的例子,swf/myFlash.swf就是Flash檔案的路徑,myFlash就是要放Flash的DIV的ID名稱,1000是Flash的寬度,650是Flash的高度(預設單位是像素px,想要全螢幕Flash的話,就把寬和高都設成100%),10.0.2這個看起來怪怪的數字其實是Flash所發佈的版本;params.wmode="transparent"與params.bgcolor="#CCCCCC"等參數設定增加了透明背景Flash、背景色為「#CCCCCC」等等的功能(如果不要透明背景Flash的話,把"transparent"改成"opaque"即可)。

其他參考資料:
1. Embedding Adobe Flash Player content using SWFObject 2
2. New test pages for SWFObject 2.2

星期四, 2月 11, 2010

直接分享網頁內容到Facebook/Plurk/Twitter

現在有很多網站可以直接將網頁的摘要與網址分享到Facebook或Plurk、Twitter等微網誌上,雖然乍看之下是很方便的事情,但這樣的分享常常不見得會讓網友「買單」、真的去分享到他的微網誌上。然而,有的客戶還是會希望能提供這樣的「貼心功能」;於是,我們還是得「乖乖聽話」,畢竟付錢的是老大,還是加上了這個功能。

我們可以運用「呼叫外部javascript」的方法,將javascript程式碼寫到一個外部檔案中,例如一個名字是「shareWithFriends.js」的javascript,它全部的內容可能只寫成這樣子:
<!--
function Facebook() {
 void(window.open('http://www.facebook.com/share.php?u='.concat(encodeURIComponent(location.href)) ));
}
function Plurk() {
 void(window.open('http://www.plurk.com/?qualifier=shares&status=' .concat(encodeURIComponent(location.href)) .concat(' ') .concat('(') .concat(encodeURIComponent(document.title)) .concat(')')));
}
function Twitter() {
 void(window.open('http://twitter.com/home/?status=' .concat(encodeURIComponent(document.title)) .concat(' ') .concat(encodeURIComponent(location.href))));
}
//-->

未來,我們只要把這個javascript存在網站的某個特定位置,就可以讓它一直被重覆使用,非常方便!畢竟這支javascript都在做同樣的事情:「把你看的網頁網址存成一個字串,然後再送給Facebook/Plurk/Twitter讓它們為你發佈新的微網誌。」換言之,我們會在特定的按鈕上呼叫javascript功能來自動抓取目前網頁的標題等內容,並發佈成一篇新的微網誌文章。

我們若要呼叫上面的javascript,得先在目前的網頁的<head>底下加入的網頁程式碼:
<script type="text/javascript" src="shareWithFriends.js"></script>

假如我們是使用Flash來呼叫的話,在Actionscript 3.0的前提下,可以用ExternalInterface.call的方法來達成;假設有三個對應於Facebook、Plurk、Twitter的Flash按鈕,應該要在時間軸上加入以下的Actionscript 3.0程式碼:
import flash.external.ExternalInterface;

//Facebook Button Setup
Facebook_btn.addEventListener(MouseEvent.CLICK, clickFacebook);
function clickFacebook(e:MouseEvent):void {
 ExternalInterface.call("Facebook");
}
//Plurk Button Setup
Plurk_btn.addEventListener(MouseEvent.CLICK, clickPlurk);
function clickPlurk(e:MouseEvent):void {
 ExternalInterface.call("Plurk");
}
//Twitter Button Setup
Twitter_btn.addEventListener(MouseEvent.CLICK, clickTwitter);
function clickTwitter(e:MouseEvent):void {
 ExternalInterface.call("Twitter");
}

要用Actionscript 2.0的getURL功能也沒問題,程式碼如下:
//Facebook
Facebook_btn.onRelease = function () {
 getURL("javascript:Facebook(); void(0);");
}
//Plurk
Plurk_btn.onRelease = function () {
 getURL("javascript:Plurk(); void(0);");
}
//Twitter
Twitter_btn.onRelease = function () {
 getURL("javascript:Twitter(); void(0);");
}

除此之外,Plurk和Twitter會在分享的時候,會自動將網頁的標題文字當成分享的連結字,例如:
<title>Perr的分享</title>,網頁的標題就是「Perr的分享」,而「Perr的分享」就會變在Plurk與Twitter自動的貼上的文章標題。

其中,Facebook和Plurk、Twitter有些不一樣的地方!因為Facebook原本就有提供公開分享的功能,只要按照它的格式即可:
http://www.facebook.com/sharer.php?u=要分享的網址&t=內容標題

但有趣的是,這方法似乎有些問題!因為Facebook沒有按照我給它的「內容標題」去貼出訊息,而是用連結到的「網頁標題(title)」來當作它的「文章標題」!

怎麼辦呢?

只要增加幾個meta資料在<head>之後就可以了,例如:
<meta name="title" content="Perr的分享" />
<meta name="description" content="直接分享網頁內容到Facebook/Plurk/Twitter" />

如此一來,Facebook會將「Perr的分享」當成新的文章標題,同時也把description的內容,也就是「直接分享網頁內容到Facebook/Plurk/Twitter」,當成新的文章內容了!

如果要提供網友的一些網站相關圖片的話,也可以在剛才上面的那段網頁程式碼後面再加上底下這段程式碼:
<link rel="image_src" href="網頁的相關縮圖網址" />

當然,縮圖並不限定只能放一個,所以我們也可以同時放置好幾個縮圖,讓網友可以「先睹為快」!