免費資源：向量圖示

Pictoico.com提供了Creative Commons的非商業使用版權的免費向量圖示！我覺得畫得非常棒！或許我們可以從中找到製作圖示的靈感！

CSS: 推薦20個CSS的密技！

好一陣子沒寫部落格，最近好像常遇到幾個明明就是很久以前的東西，但直到現在卻都仍舊有效的事情！公司專案管理的模式是如此，沒想到CSS的密技也是一樣好用到現在…

底下這兩個推薦連結，雖然都是英文網站，但懂CSS語法的人應該看得懂它在寫什麼！文章建立的時間都是4、5年前(一個是2005年，另一個是2006年)，也許是久了一些，可是很多CSS的東西到現在也都一樣好用！所以，這真的是太神奇了(orz)！

．Ten CSS tricks you may not know(十個你可能不知道的CSS密技！)
‧Ten more CSS tricks you may not know(另外十個你可能不知道的CSS密技！)

裡面提到了很多我們在用CSS製作網頁時常用到的一些小技巧！有時候自己也會忘記或沒注意到，所以我覺得還滿實用的，也寫得非常棒！推薦大家趕快把密技學起來！省下鬼遮眼的時間，就是你多出來開心愉悅的時間！

Let's Buzz it ! 加個Buzz it的推文按鈕吧！

Google Buzz這項和Gmail綁在一起的服務才發佈沒一個月的時間，Tech Crunch和Mashable就把Google Buzz的分享按鈕加上去了！速度之快…那麼，你也想自製Buzz圖示嗎？想做的話也太慢了點，Cheth Studios已經有提供免費下載囉！不過，你知道要怎麼讓這個「Buzz it」分享適當的主題呢？其實方法也算簡單，語法如下：

<a href="http://www.google.com/reader/link?url=部落格文章網址&title=部落格文章標題&srcTitle=部落格網站名稱&srcUrl=部落格網址"><img alt='' src='Buzz小圖示的網址'/></a>

所以趕快用Buzz推你的網站吧，Let's buzz it !!

SWFObject搭配Flash Scaler，另一個實現全螢幕Flash的小技巧！

先前提到SWFFit這個補強全螢幕Flash不足的小工具，但Flash Scaler其實也是一個滿不錯用的工具！用法不難，同樣要先載入Flash Scaler的javascript(flashscaler.js)：

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

然後確定我們要用另一個DIV(ID名稱設為「flashcontent」)將SWFObject要指定的flash DIV給包起來，將底下這段程式碼放進body裡面：

<script type="text/javascript">
  scale = new FlashScaler("flashcontent",1000,650);
</script>

它的寫法規則是：FlashScaler("DIV名稱",最小寬度,最小高度);。
並且為DIV新增一個CSS樣式：

#flashcontent {
  overflow: hidden;
}

Flash Scaler有幾個特別要注意的地方：

1. 指定的DIV必須要包住SWFObject指定的Flash DIV；
2. 指定的DIV必須是要新增「overflow:hidden;」屬性。

參考的完整程式碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Scalable Flash with scrollbars (SWFObject dynamic publishing example)</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="StyleSheet" href="css/main.css" type="text/css" media="screen,print" />
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/flashscaler.js"></script>
<script type="text/javascript">
var flashvars = {};

var params = { };
params.scale = "noScale";
params.wmode = "transparent";

var attributes = {};

swfobject.embedSWF("fullscreen.swf", "myFlash", "100%", "100%", "8", false, flashvars, params, attributes);
</script>
<style type="text/css">
<!--
html, body { margin: 0;padding:0;background: #351100;overflow:visible;height:100%; }
#flashcontent {
overflow: hidden;
}
-->
</style>
</head>
<body>
<div id="flashcontent">
<script type="text/javascript">
scale = new FlashScaler("flashcontent",1000,650);
</script>
<div id="myFlash">
<h2>SORRY!</h2>
<p>We have detected that you do not have the Flash Player plugin required to view this website.</p>
<p>Download the latest <a href="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">Flash Player</a>
for free! It takes just a few minutes to download and install.</p>
</div>
</div>
</body>
</html>

用SWFObject搭配SWFFit，讓全螢幕Flash也可以很聰明

SWFObject確實讓Flash置入網頁的程式碼減少很多，而且在全螢幕Flash的時候不會產生討厭的視窗捲軸！可是，相反的，它在這個時候就缺少了一個看似不起眼、但卻也仍有其必要性的功能：視窗捲軸！

說來還真矛盾，我們不就希望不要有視窗捲軸嗎？考慮底下的情形：
假設我們的「全螢幕Flash(Fullscreen Flash)」的最佳顯示區域是寬1000px、高650px，它在螢幕解析度為800x600像素的電腦觀看時(或者你的瀏覽器畫面小於1000x650像素時)，因為SWFObject的關係，你的瀏覽器不會出現垂直或水平的視窗捲軸！換言之，你很可能沒辦法看見周圍被切掉的地方！

好在SWFFit提供了一個相當友善的解決方式！讓瀏覽器會自動出現垂直或水平捲軸的功能(讓你看見看不見的地方！)！不過它必須配合SWFObject才能實現這個功能。

SWFFit說明如下：

首先載入SWFFit這支js(放在載入SWFObject的js底下)：

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

接著在設定適當的參數，讓SWFFit知道它該怎麼做(也可以直接加到SWFObject的參數設定後面)：

<script type="text/javascript">
  swffit.fit('myFlash',1000,650,2000,1300, true, true);
</script>

SWFFit的編寫同樣的規則可循：swffit.fit('Flash的id名稱',Flash顯示的最小寬度,最小高度,最大寬度,最大高度, 是否水平置中, 是否垂直置中);。

參考的完整程式碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Fullscreen Flash via SWFObject and SWFFit</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swffit.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.menu="false";
params.allowscriptaccess="samedomain";
params.bgcolor="#351100";
params.scale= "noScale";
params.wmode="transparent";
var attributes = {};
attributes.id= "myFlash";
attributes.name= "myFlash";
attributes.align= "center";
swfobject.embedSWF('swf/myFlash.swf', 'myFlash', '100%', '100%', '9', 'swf/expressInstall.swf', flashvars, params, attributes);
swffit.fit('myFlash',1000,650,2000,1300, true, true);
</script>
<style type="text/css">
<!--
html, body { margin: 0;padding:0;background: #351100;overflow:hidden;height:100%; }
-->
</style>
</head>
<body>
<div align="center" id="myFlash">
<p>請安裝最新版的Flash Player</p>
<p>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</p>
</div>
</body>
</html>

不過在我測試的時候，發現SWFFit 2.3.3在Mac(Leopard 10.5.8)的FireFox(version 3.6)下可能會出現一個奇特的情形(bug?!)：在全螢幕Flash的畫面中做任何的互動動作(例如隨便在畫面中點一下)，垂直和水平的視窗捲軸竟然同時出現了(而且還是撐到最大的那種@@)！但在PC上面卻沒有這個問題！可惜目前我還找不到解決的方法(知道的人麻煩提供一下吧！大感謝！)…但SWFFit 2.4 beta似乎沒這個問題！

有其它替代可行的方案嗎？目前我看到的有Flash Scaler以及SWF-Force-Size，有機會再來介紹。

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

直接分享網頁內容到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="網頁的相關縮圖網址" />

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

Lightroom 3 BETA

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

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

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

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

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"));

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)進來，果然問題就解決了！哈哈~

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

有時候我們會希望Flash可以在時間軸的某個地方先暫停個幾秒後再播放, 要怎麼做呢?
先在第一個影格定義暫停(pause)功能:

function pause(){
play();
clearInterval(timer);
}

然後在你想暫停幾秒的影格處輸入底下的程式碼:

stop();
timer = setInterval(pause, 3000);
// 輸入3000就是停3秒, 輸入60000就是停60秒(一分鐘)

這樣就OK了~

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即可。

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編碼，否則在中文顯示上會出現問題。

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%;

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

今天在Freelancerswitch看到一則漫畫，大致上是描述一名接案的自由工作者(freelancer)與業主(客戶/client)的對話…

業主：「那我就直說好了…你的時薪是我們正職員工的兩倍以上！而且，如果我需要你幫忙，你也不會在上班時間隨時待命，是吧？」
Freelancer：「請問你會支付我的勞健保費、員工福利、病假、年假、退休金、…等其它福利津貼嗎？」
業主：「不會，當然不會！」
Freelancer：「那就對了，這就是為什麼你付錢找一個Freelancer而不是請正職員工的原因了！」

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