星期五, 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="網頁的相關縮圖網址" />

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

星期日, 11月 01, 2009

Lightroom 3 BETA


Photoshop Lightroom 3已經在Adobe Labs推出beta試用版,有興趣的人可以下載來玩玩。我個人試用後的感覺,似乎沒有和前一版的Lightroom 2有太大的差別,或者說是大幅度的提昇;唯獨照片在經過「預載」後,速度已經是變得非常快了!不像之前,不管有沒有看過照片的大圖或縮圖,都得再等2秒鐘顯示精確的照片!然而,現在的我似乎也不知道自己是否應該對它有所期待什麼…畢竟Photoshop Lightroom 2就滿好用的了。

星期日, 10月 18, 2009

Mac: 滑鼠控制軟體 - MouseZoom X 2.2

MouseZoom X 2.2是一款Mac的免費滑鼠控制軟體,可以改善mac對滑鼠移動速度的缺點!因為它可以精確的控制滑鼠移動的速度,真的比原來蘋果上的設計有用多了!

下載後,會有Intel Macs以及PowerPC Macs的分別,現在大概都是Intel Mac的時代了,所以直接雙擊Intel Macs資料夾的MouseZoom.prefPane以便在偏好設定的控制面板上安裝MouseZoom,接著就是調整你希望的滑鼠移動速度了!超方便的!

星期五, 10月 09, 2009

AS2/AS3:Flash讀取外部資料到動態文字欄位

如果我們想在Flash中顯示目前觀看頁次(Page View)的數字訊息,可以透過伺服器將數字動態存取於某個檔案中,也許是純文字檔或ASP/PHP檔,再讓Flash去讀這個檔案來達到動態更新文字的效果!

在AS2中,我們將使用"LoadVars"的方法,讀取"counts.txt"這個外部純文字檔,並將其內容更新至實體名稱為"countNumbers"的動態欄位上;其中,"counts.txt"的文字內容很簡單,什麼都沒有就只有數字而已,內容如下:
23000000
接下來填入底下的Actionscript:
var lv:LoadVars = new LoadVars();
lv.onData = function(theText:Number) {
countNumbers.text = "累計人次:"+theText+"人";
}
lv.load("counts.txt");
結果將會使實體名稱為"countNumbers"的這個動態欄位顯示出底下的文字:
累計人次:23000000人
Flash-Creations.com的Reading a Text File and Using it in Flash有更多完整的敘述。
至於AS3,則是採用"URLLoader"的作法:
var myTextLoader:URLLoader = new URLLoader();
myTextLoader.addEventListener(Event.COMPLETE, onLoaded);
function onLoaded(e:Event):void {
countNumbers.text = "累計人次:"+e.target.data+"人";
}
myTextLoader.load(new URLRequest("counts.txt"));

星期四, 10月 08, 2009

Fireworks CS4無法開啟Illustrator檔案

今天在用Adobe Fireworks CS4開啟Adobe Illustrator CS4製作的網頁檔案時,竟然出現:「An Internal Error Occurred(發生內部錯誤)」的訊息,一時之間,有些覺得百思不解,於是Google了一下…在Adobe Fireworks Forum(Fireworks論壇)一篇「FW CS3 - Internal Error」的回應中找到了答案:
其實Fireworks無法對Illustrator的外部連結檔案做有效的處理,因此造成開啟失敗!
所以我把Illustrator內所有的外部(linked file)檔案都內崁(Embed file)進來,果然問題就解決了!哈哈~

星期三, 10月 07, 2009

AS2: Flash先暫停幾秒後再播放

有時候我們會希望Flash可以在時間軸的某個地方先暫停個幾秒後再播放, 要怎麼做呢?
先在第一個影格定義暫停(pause)功能:
function pause(){
play();
clearInterval(timer);
}
然後在你想暫停幾秒的影格處輸入底下的程式碼:
stop();
timer = setInterval(pause, 3000);
// 輸入3000就是停3秒, 輸入60000就是停60秒(一分鐘)
這樣就OK了~

星期一, 10月 05, 2009

Mac:取消Photoshop中Mac的多重觸碰面板放大縮小、旋轉功能

Dan Warne的部落格提到一個「在Photoshop中取消Mac的多重觸碰面板放大縮小、旋轉」的功能,這功能只有使用新版MacBook/MacBook Pro/MacBook Air的人會有感覺,因為Multi-Touch的多重觸碰功能很容易讓你難以掌握Photoshop!

首先到Adobe下載外掛程式:
http://www.adobe.com/support/downloads/detail.jsp?ftpID=4337

接著把下載的Plugin檔案放到:
應用程式 > Photoshop > Plugins 資料夾裡,重新啟動Photoshop即可。

星期日, 9月 27, 2009

AS3:讓Flash按鈕可以直接在Twitter開新主題

想要讓Flash的動畫按鈕可以在按下去以後,直接就在Twitter開立新的主題,目前我的作法是讓Flash呼叫Javascript的Function來達到這個功能。首先是Flash的程式部份:
import flash.external.ExternalInterface;
import flash.external.*;
shareFashion.tt_btn.addEventListener(MouseEvent.CLICK, clickTwitter);
function clickTwitter(e:MouseEvent):void
{
ExternalInterface.call("addMoreFashion"); 
//呼叫Javascript中的「addMoreFashion」程式
}
Flash會呼叫一支名為「addMoreFashion」的javascript程式(當然,你也可以改成其它的名字,只要能相互對應就好。)。接下來就是在html中加上Javascript程式,讓Flash呼叫用的:
<script language="JavaScript">
<!--
function addMoreFashion()
{
window.location=void(window.open('http://twitter.com/home/?status='.concat(encodeURIComponent(location.href)) .concat('').concat(encodeURIComponent('新標題名稱'))));
window.location = 'fashion.htm'
}
// -->
</script>
其中,「新標題名稱」就是開建立標題後會顯示什麼字在上面;「fashion.htm」則是這支javascript所在的網頁名稱。

目前這個方法有個缺點,在於「fashion.htm」只能使用UTF-8編碼,否則在中文顯示上會出現問題。

星期日, 8月 09, 2009

CSS:讓背景影像水平垂直置中

當我們製作了一個小而精緻的網站時,網頁的內容範圍不大,因此我們可能會希望讓背景圖案能水平、垂直皆置中;一般來說,直覺的寫法可能是:
background:#111111 url(../images/bg.gif) no-repeat 50% 50%;
不過,當你以各種不同的瀏覽器檢查時,可能會發現…其實有些瀏覽器只有水平置中而已,垂直的位置並未置中(不是落在50%的地方),所以畫面會有問題…有一個很簡單的方法可以輕鬆解決這個問題:增加background-attachment為fixed的屬性,即「background-attachment:fixed;」,便可讓背景圖案真正的水平、垂直皆置中:
background:#111111 url(../images/bg.gif) no-repeat fixed 50% 50%;

星期一, 7月 20, 2009

為何接案的時薪要比一般正職員工的時薪高?

今天在Freelancerswitch看到一則漫畫,大致上是描述一名接案的自由工作者(freelancer)與業主(客戶/client)的對話…
業主:「那我就直說好了…你的時薪是我們正職員工的兩倍以上!而且,如果我需要你幫忙,你也不會在上班時間隨時待命,是吧?」
Freelancer:「請問你會支付我的勞健保費、員工福利、病假、年假、退休金、…等其它福利津貼嗎?」
業主:「不會,當然不會!」
Freelancer:「那就對了,這就是為什麼你付錢找一個Freelancer而不是請正職員工的原因了!」

以前覺得Freelancer在收取費用的時候,常常會覺得這樣子的費用會不會太貴了些!看了這篇小小的漫畫之後,我真的覺得我之前收的費用都太低了!

星期一, 7月 13, 2009

AS3:路徑(Path)大不同!

Actionscript 3.0的路徑與我們在之前2.0使用的情形不一樣。_root.myMovie在AS3變成了MovieClip(root).myMovie,this._parent._parent.myMovie在AS3則變成了MovieClip(this.parent.parent).myMovie。

其中,this在AS2原本可指物件本身,但在AS3則一律只能指向時間軸所在的位置,而不是物件本身;MovieClip(this)則可指向時間軸所在的物件本身(Object MovieClip);MovieClip(root)指的則是主時間軸(Object MainTimeLine)。

星期四, 7月 09, 2009

美國空軍網站


朋友M給我的一個很先進感的網站:美國空軍網站。3D的立體效果,讓先進的科技感表露無疑!讓我想起了以前的電玩遊戲(地球爭霸、泰伯倫選爭、Falcon 4.0),好懷念的回憶,因為我已經很久沒有玩電腦遊戲了!

裡面的3D立體互動式影片播放的介面,其實有一些網站也有類似的效果,像Fendi的官方網站就是一個;看似簡單的效果,卻可以帶來不錯的互動經驗,也許哪天我可以在網站上試試類似的效果...

看完美國空軍以後,我們來看看「中華民國空軍」…的網站;嗯,嗯,那,…嗯,我們有無可限量的進步空間!空軍加油!加油!

星期三, 7月 01, 2009

Photoshop Lightroom發佈2.4更新



Adobe Photoshop Lightroom 2.4又有更新可以下載了。更新的部份增加了幾乎所有最新機種的相機,例如Canon 500D、Nikon D5000、Sony A380、Pentax K-7、Hasselblad、…等,當然也修改了之前的一些問題,羅列如下,有興趣了解的人可以看一看:
  1. Web galleries with a Collection Title of six characters would not export or upload
  2. The crop aspect ratio could revert to the last selected ratio even when reset to original
  3. The crop aspect ratio in Quick Develop could be lost after a crop adjustment
  4. The crop aspect ratio lock could be lost after an orientation switch
  5. Images could preview incorrectly when imported using the MTP/PTP USB protocol
  6. Sony .ARW files may not have been recognized by Lightroom’s import dialog
  7. The Japanese language configuration of Lightroom on Mac OS X 10.5 could fail to switch to the print module if the HP B9180 was set as the default printer
  8. Metadata options that are intended for use were dimmed incorrectly when exporting DNG files
  9. The Japanese language configuration of Lightroom on Mac OS X was missing a shortcut for “Zoom Out”
  10. Several translation and shortcut corrections were made for the eight additional languages introduced with Lightroom 2.3

星期六, 6月 27, 2009

Actionscript3寫的翻頁引擎:MegaZine3


MegaZine3是一個公開原始碼(Open Source)的Flash翻頁引擎,它用Actionscript 3語法寫成,透過載入外部XML,即可產生完整的Flash電子書!雖然是免費的,但看得到不見得就吃得到!你還是得有一些簡單的基礎才能順利用這個引擎讓車子可以跑,不然它就只是個紙上模型而已…此外,它也沒有提供原始程式…想要將外觀調整成我們自訂的樣式可能有些問題。

從下載的資料夾可以看出它使用了swfAddress與swfObject,所以就算這是個Flash的翻頁電子書,你還是可以透過瀏覽器的上一頁與下一頁來控制目前顯示的頁面,是個很好的運用!很值得學習!

星期日, 6月 21, 2009

祈求與機會

王牌天神2中摩根費里曼(Morgan Freeman)和女主角在餐廳的一段對話:
「當人們向上帝祈求耐心時,你想上帝是直接給他耐心?還是給他機會培養成為有耐心的人?」
If someone prays for patience, you think God gives them patience, or does he give them the opportunity to be patient?

「當他祈求勇氣時,上帝是直接讓他有勇氣?還是給他機會磨練成為有勇氣的人?」
If he prayed for courage, does God give him courage, or does he give him opportunities to be courageous?

「當有人祈求希望家人之間可以更加親密和諧時,你想上帝會快速給她溫暖模糊的情感?還是給她機會去深刻體認家人之間的愛及重要性?」
If someone prayed for the family to be closer, do you think God zaps them with warm fuzzy feelings, or does he give them opportunities to love each other?
上面的文字是今天在奇摩新聞的連結所看到的一段話,我看了之後覺得很有哲理!

當我們在生命中遭遇挫折時,我們希望自己是因為上帝的救助而立即渡過難關?或者,我們應該擁抱機會去克服生命中的挫折而讓自己有所成長?