顯示具有 Javascript 標籤的文章。 顯示所有文章
顯示具有 Javascript 標籤的文章。 顯示所有文章

星期五, 4月 01, 2011

讓CSS正確顯示中文字體

即使網頁已經是用UTF-8編碼,有時候還是會遇到亂碼的問題…例如在CSS中使用中文字體:微軟正黑體、新細明體…等,這問題真的很無奈!每次遇到都還是要想辦法把它變成unicode!雖然javascript可以讓中文字體變成UTF-8的功能:
<script type="text/javascript">
var uri="微軟正黑體";
document.write(encodeURIComponent(uri));
</script>

但CSS本身無法使用javascript…
這時候FireBug的指令列(Show Command Line > Command Line)就變成了我們的小幫手,可以幫我們達成中文字轉成unicode編碼的要求!只要在指令列使用「escape()」功能:

假設我們要CSS正確顯示「font-family:微軟正黑體;」,
在指令列用escape指令輸入「微軟正黑體」:
escape('微軟正黑體')
可以得到底下的回應:
%u5FAE%u8EDF%u6B63%u9ED1%u9AD4
再把所有的「%u」全取代成「/」(反斜線)就得到:
\5FAE\8EDF\6B63\9ED1\9AD4,\65B0\7D30\660E\9AD4
上面一串奇怪的數字加英文,就是我們要的unicode編碼!
將它取代原本的「微軟正黑體」:
font-family:\5FAE\8EDF\6B63\9ED1\9AD4,\65B0\7D30\660E\9AD4;
瀏覽器就可以正確顯示CSS中的「微軟正黑體」了!
另外,在Chrome、IE以及Safari的「開發人員工具」中,都有「主控台(Console)」可以使用「escape('中文字')」的功能,我覺得還滿不錯用的!

星期六, 2月 27, 2010

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,有機會再來介紹。

星期五, 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

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

星期六, 5月 16, 2009

AS2呼叫Javascript隱藏(/顯示)指定的Div

有時候我們會在yahoo或其它網站看到Flash的廣告banner在畫面中播放完後自動向上收回去,這效果滿有趣的,因為你可以讓大家看到一個比較完整的廣告效果,然後向上縮回,只留下另一個小廣告banner在同一個位置,不會讓大的廣告banner一直佔據網頁的空間。

其實,這只是在同一個地方放了兩個banner,一個大的、一個小的,播完大banner以後再留下小banner;我們可以用兩個div分別置放大、小banner,然後把播完廣告的大banner在畫面中刪除!

或者,也可以在同一個swf檔裡做兩個banner,在播完大banner之後,讓時間軸跳到小banner的地方,不讓別人看到原來大banner的畫面。

不過,這些都不是困難的問題,我們比較好奇的是,是什麼原因讓大banner播完後,Firefox竟然忘不了這個大banner曾經播放過的事實,因此留下原本大banner的「透明」區塊在畫面之中?!也許這層透明區塊不會對畫面造成影響,但另一個問題是…區塊底下的東西竟然無法點選、連結?!這個可麻煩了!真不知道該怎麼辦才好…

沒關係,感謝Javascript和CSS的強大功能,因為我們可以在Flash中呼叫Javascript功能,讓Javascript使用CSS設定,讓指定的Div消失於無形~!哈哈哈!!!

首先我們要讓Flash在特定的時間或事件之中觸發Javascript機制,例如播完影片之後,或者因為我們已經看過這個畫面,不想再看了!於是,我們可以在時間軸中加上底下的Actionscript(AS2):
getURL("javaScript:hideItem('hideThisDiv');","");
//讓Javascript知道要隱藏哪個Div
接著在html加入底下這段Javascript即可讓Flash自動隱藏起來:
<script type="text/javascript">
<!--
function hideItem(divID) {
hiddenID = document.getElementById(divID);
hiddenID.style.display = "none";
}
//-->
</script>

既然Javascript是用CSS的方式將Div隱藏起來(display:none;),我們同樣也可以把它叫出來,只要將「none」改為「block」(或其它非none的參數應該都可行):
hiddenID.style.display = "block";

星期四, 11月 06, 2008

用Javascript確保網頁在IE6看起來跟IE7一樣


很多人都遇到過網頁在IE7看的時候是正常的,但在IE6或其它舊版IE上看卻很怪的情形。或者,剛好相反…

所以Dean Edwards編寫一個javascript庫,加強舊版IE(IE6、IE5),讓它們看起來就相容於標準瀏覽器,它同時修復了舊版IE(IE5、IE6)許多的CSS問題,也讓透明png能正常使用。

目前這個javascript放在google伺服器上,所以Dean會幫我們更新。

更棒的是,他允許我們用"hot-link"的方式,直接連到google伺服器(http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js)。

星期二, 1月 09, 2007

SWF Object 1.4.4

我們常常在使用IE瀏覽器在看一些使用Flash製作的區塊時,發現得用滑鼠點個一兩次才能和Flash有互動的功能(或者你可以發現在IE上的Flash都會有個虛線方框在上面),但在FireFox瀏覽器就不會有這種情形。為了解決IE的這個問題,有位 "Geoff Stearns" 的資深程式設計師做了 "SWFObject" 的小東西來克服這問題,目前看來,似乎是個不錯的選擇。

那麼,該怎麼做呢?

我可以跟大家說明一下,但是建議要試的人最好對html的程式語法多所了解,否則很難成功!

1. 先下載SWFObject 1.4.4.zip(其中包含了示範檔),因為我們會用到裡面的 "swfobject.js",並且將這個js檔和我們的網頁檔案放在同一個目錄夾裡。

2. 用Dreamweaver開啟你要修改的html原始檔,我們將會用「程式碼」的視窗修改程式;首先,我們找到head標籤,在head裡寫一段javascript程式碼:
<script type="text/javascript" src="swfobject.js"></script>

這段javascript會呼叫剛才的swfobjcet.js。

3. 接著另外寫一個新空白的javascript程式碼標籤,並粗體字的內容放在javascript程式碼標籤裡;切記,這是讓我們的網頁出現Flash影片的地方,所以這段javascript一定要放在flash會出現的位置,javascript程式碼內容為:
<script type="text/javascript">
 var so = new SWFObject("myFlashMovie.swf", "myMovie", "764", "110", "8", "#FF6600");
 so.addParam("quality", high");
 so.addParam("wmode", "transparent");
</script>

SWFObject括號裡面的參數內容,依序為「你的Flash影片檔名(本例為 "myFlashMovie.swf")」、「Flash的id代碼(隨意命名,本例為 "myMovie")」、「Flash影片的寬度(預設單位為pixel,本例為 "764")」、「Flash影片的高度(本例為 "110" pixels)」、「Flash Player的版本(本例為 "8")」、「指定的背景顏色(本例為 "#FF6600")」。

"addParam"的作用是加入其它參數,例如Flash影片的Quality為High,以及transparent(設定Flash影片的背景為透明)。想知道SWFObject更多參數運用的人,可以到Adobe (Flash OBJECT and EMBED tag attributes)去了解唷!

4. 把檔案儲存起來,試試效果如何!

因為Google的Blog沒辦法讓我使用某些「特定」的標籤,所以沒辦法很完整的把標籤寫出,讓大家可以直接Copy-And-Paste,想了解更多的,可以到Deconcept的SWFObject: Javascript Flash Player detection and embed scriptRyan C. Davidson的網站瞧瞧。祝大家成功!