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

星期四, 3月 31, 2011

AS2: 用Flash播放YouTube裡的影片[一定得用控制面版版]

至於AS2控制YouTube影片的部份,Google也是有提供AS2 For YouTube Video的參考資料,但目前看來,似乎無法不使用Google提供的Video控制面版…
//指定YouTube Video ID序號, 例如:YHLWdb55iic
var myVideoID:String = "9evx8PZEMKU";

//自動播放:true, 不自動播放:false
var autoPlayVideo:Boolean = false;

//重覆播放:true, 不重覆播放:false
var loopVideoState:Boolean = false;

//聲音大小,最大100,最小:0 (無聲)
var myVolume:Number = 30;

//有聲:false, 無聲:true
var muteVideoState:Boolean = false;

//指定影片尺寸, 寬(videoWidth), 高(videoHeight)
var videoWidth:Number = 330;
var videoHeight:Number = 245;



//Below Functions Are Edited By Perr Tang
var autoPlayState:String;
if (autoPlayVideo == true) {
autoPlayState = "&autoplay=1";
} else {
autoPlayState = "";
}
var myVideoURL:String;
if (useControlPanelState == true) {
myVideoURL = "http://www.youtube.com/v/" + myVideoID + autoPlayState;
} else if (useControlPanelState == false) {
myVideoURL = "http://www.youtube.com/apiplayer?version=3&video_id=" + myVideoID+autoPlayState;
}
Security.allowDomain("www.youtube.com");

// create a MovieClip to load the player into
var ytplayer:MovieClip = _root.createEmptyMovieClip ("ytplayer", 1);

// create a listener object for the MovieClipLoader to use
var ytPlayerLoaderListener:Object = {onLoadInit:function () {
// When the player clip first loads, we start an interval to
// check for when the player is ready
loadInterval = setInterval (checkPlayerLoaded, 250);
}};
var loadInterval:Number;

function checkPlayerLoaded ():Void {
// once the player is ready, we can subscribe to events, or in the case of
// the chromeless player, we could load videos
if (ytplayer.isPlayerLoaded ()) {

ytplayer.setSize (videoWidth,videoHeight);//指定影片大小
trace ("width= " + videoWidth + " and height= " + videoHeight);
ytplayer.setVolume (myVolume);
if (muteVideoState == true) {
ytplayer.mute ();
}
ytplayer.addEventListener ("onStateChange",onPlayerStateChange);
ytplayer.addEventListener ("onError",onPlayerError);

clearInterval (loadInterval);
}
}

function onPlayerStateChange (newState:Number) {
trace ("New player state: " + newState);
if (newState == "0") {
if (loopVideoState == true) {
ytplayer.playVideo ();
} else {
ytplayer.stopVideo ();
}
}
}

function onPlayerError (errorCode:Number) {
trace ("An error occurred: " + errorCode);
}

// create a MovieClipLoader to handle the loading of the player
var ytPlayerLoader:MovieClipLoader = new MovieClipLoader ();
ytPlayerLoader.addListener (ytPlayerLoaderListener);

// load the player
ytPlayerLoader.loadClip (myVideoURL,ytplayer);
//ytPlayerLoader.loadClip("http://www.youtube.com/v/9evx8PZEMKU?version=3&loop=1&playlist=9evx8PZEMKU", ytplayer);

AS3: 用Flash播放YouTube裡的影片[加強版]

後來發現,人的需求是愈來愈高,一下子要這個功能,一下子又要那個功能…所以我把目前遇到所有「想要」的功能,寫成了一個ActionScript 3.0的程式碼,現在應該都有了吧!~~

//指定YouTube Video ID序號, 例如:YHLWdb55iic
var myVideoID:String = "YHLWdb55iic";

//自動播放:true, 不自動播放:false
var autoPlayVideo:Boolean = true;

// 用控制面版:true, 不用控制面版:false
var useControlPanelState:Boolean = false;

//重覆播放:true, 不重覆播放:false
var loopVideoState:Boolean = true;

//聲音大小,最大100,最小:0 (無聲)
var myVolume:Number = 10;

//有聲:false, 無聲:true
var muteVideoState:Boolean = false;

//指定影片尺寸, 寬(videoWidth), 高(videoHeight)
var videoWidth:Number = 300;
var videoHeight:Number = 215;

//Below Functions Are Edited By Perr Tang
var autoPlayState:String;
if(autoPlayVideo == true){
autoPlayState = "&autoplay=1";
}else{
autoPlayState = "";
}
var myVideoURL:String;
if(useControlPanelState == true){
myVideoURL = "http://www.youtube.com/v/" + myVideoID+"?version=3"+autoPlayState;
}else if(useControlPanelState == false){
myVideoURL = "http://www.youtube.com/apiplayer?version=3&video_id=" + myVideoID+autoPlayState;
}
// The player SWF file on www.youtube.com needs to communicate with your host
// SWF file. Your code must call Security.allowDomain() to allow this
// communication.(設定允許跨網域連到youtube.com)
Security.allowDomain("www.youtube.com");

// This will hold the API player instance once it is initialized.
var player:Object;

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);


//loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3&video_id=YHLWdb55iic&autoplay=1"));
loader.load(new URLRequest(myVideoURL));

function onLoaderInit(event:Event):void {
addChild(loader);
loader.content.addEventListener("onReady", onPlayerReady);
loader.content.addEventListener("onError", onPlayerError);
loader.content.addEventListener("onStateChange", onPlayerStateChange);
loader.content.addEventListener("onPlaybackQualityChange",
onVideoPlaybackQualityChange);
}

function onPlayerReady(event:Event):void {
// Event.data contains the event parameter, which is the Player API ID
trace("player ready:", Object(event).data);

// Once this event has been dispatched by the player, we can use
// cueVideoById, loadVideoById, cueVideoByUrl and loadVideoByUrl
// to load a particular YouTube video.
player=loader.content;
// Set appropriate player dimensions for your application
player.setSize(videoWidth, videoHeight);//指定影片大小
player.setVolume(myVolume);
if(muteVideoState == true){
player.mute();
}
}

function onPlayerError(event:Event):void {
// Event.data contains the event parameter, which is the error code
trace("player error:", Object(event).data);
}

function onPlayerStateChange(event:Event):void {
// Event.data contains the event parameter, which is the new player state
trace("player state:", Object(event).data);
if(Object(event).data == "0"){
if(loopVideoState == true){
player.playVideo();
}else{
player.stopVideo();
}
}
}

function onVideoPlaybackQualityChange(event:Event):void {
// Event.data contains the event parameter, which is the new video quality
trace("video quality:", Object(event).data);
}

星期六, 2月 26, 2011

AS3: 用Flash播放YouTube裡的影片

今天遇到了一個用Flash播放youtube影片的問題,雖然有提供「可能」可以用的網站連結參考,但短時間還是試不出個所以然,所以回家後就google了一下,看看是否有別的方法…結果,還真的有方法!…

其實Google有針對自己的Player提出控制方法,請參考:YouTube ActionScript 3.0 Player API Reference ( http://code.google.com/intl/zh-TW/apis/youtube/flash_api_reference.html )

方法其實非常簡單!只是…不知道的人冤枉路就會走得很久遠…

首先,先找到你的youtube分享連結,例如孫燕姿的新歌:「世說心語」MV完整版,它的分享連結是:http://www.youtube.com/watch?v=pgdgaDdNgwo,「v=」後面就是它的影片ID(video id),也就是「pgdgaDdNgwo」;這個ID很重要,因為我們它關係著我們要播的是哪支影片。

接下來把底下的ActionScript 3.0的語法貼到時間軸裡,並且將紅色的video id取代成你的youtube影片id就OK了:
// The player SWF file on www.youtube.com needs to communicate with your host
// SWF file. Your code must call Security.allowDomain() to allow this
// communication.(設定允許跨網域連到youtube.com)
Security.allowDomain("www.youtube.com");

// This will hold the API player instance once it is initialized.
var player:Object;

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3&video_id=pgdgaDdNgwo")); //換成你的video_id

function onLoaderInit(event:Event):void {
addChild(loader);
loader.content.addEventListener("onReady", onPlayerReady);
loader.content.addEventListener("onError", onPlayerError);
loader.content.addEventListener("onStateChange", onPlayerStateChange);
loader.content.addEventListener("onPlaybackQualityChange",
onVideoPlaybackQualityChange);
}

function onPlayerReady(event:Event):void {
// Event.data contains the event parameter, which is the Player API ID
trace("player ready:", Object(event).data);

// Once this event has been dispatched by the player, we can use
// cueVideoById, loadVideoById, cueVideoByUrl and loadVideoByUrl
// to load a particular YouTube video.
player = loader.content;
// Set appropriate player dimensions for your application
player.setSize(640, 390);//指定影片大小
player.playVideo(); //讓影片立刻播放
}

function onPlayerError(event:Event):void {
// Event.data contains the event parameter, which is the error code
trace("player error:", Object(event).data);
}

function onPlayerStateChange(event:Event):void {
// Event.data contains the event parameter, which is the new player state
trace("player state:", Object(event).data);
}

function onVideoPlaybackQualityChange(event:Event):void {
// Event.data contains the event parameter, which is the new video quality
trace("video quality:", Object(event).data);
}

星期一, 8月 30, 2010

AS3: 找到最高圖層深度(getNextHighestDepth)

在以前AS2的時候,有個語法可以找到指定物件的最高圖層深度:
this.getNextHighestDepth();
然而,當我們改用AS3的時候就發現…再也沒有這個功能了!
因為聽說Flash會自動幫我們排序!聽起來真的是很聰明!
但它還是沒有辦法把我們想要的東西放到最上面的圖層!
只要有東西擋在眼前,我們就會覺得很不舒服!
所以我們找到了可以用的方法!
假設我們希望topMovieClip可以在最上面的話:
//用「numChildren-1」找到母影片片段(parent)的最高深度
var highestDepth:uint=topMovieClip.parent.numChildren-1;
//用setChildIndex來設置最高深度
topMovieClip.parent.setChildIndex(topMovieClip,highestDepth);
相關連結:http://space.flash8.net/space/?246908/viewspace-382644.html

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

不止是AS2可以先暫停幾秒後再播放,AS3同樣也可以!怎麼做呢?
假設我們要暫停8秒鐘再繼續:

//先暫停在目前的時間軸上
stop();

//新增一個Timer(mcTimer)
//用Timer宣告我們要在8秒後做某件事情「一次」
var mcTimer:Timer = new Timer(8000,1);

//監聽這個Timer(mcTimer)時間到了要做什麼事
mcTimer.addEventListener(TimerEvent.TIMER, timerHandler);

//其實要做的事就只有一個:play();
function timerHandler(e:TimerEvent):void {
play();
}

//開始讀秒(1秒、2秒、…)
mcTimer.start();

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

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

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

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

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

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

星期一, 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)。

星期六, 6月 27, 2009

Actionscript3寫的翻頁引擎:MegaZine3


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

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

星期五, 5月 01, 2009

AS2:FLV影片播放器不能自動重播

當你在Flash裡把載入flv影片的參數設成自動重播(autoRewind=true)後,理論上這支影片就會自動重播了。不過,有趣的是,理論常常會和現實衝突!因為昨天我就遇到了不會自動重播的情形…明明已經在flash的播放器上指定了正確的flv影片路徑,而且也將autoRewind設為true,但影片就是不會自動重播!?還好Kirupa的一篇「loop "flv" files」提供了一個非常簡單的解決辦法,直接將底下的actionscript程式碼加在flv影片的播放器上就行了:
on (complete){
this.autoRewind=true;
this.play();
}
基本上,上面的語法只是告訴flash說:「當影片(this)載入完畢(complete)後,記得要自動重播(autoRewind=true),然後就開始播放影片(play)。」

不過這樣的做法仍然是有前提的,例如使用ActionScript 3.0語法的Flash就行不通(因為ActionScript3.0不能把語法下在物件上,不論是Movie Clip、按鈕皆不可行),但仍可給之前的版本做參考與應用。

星期一, 4月 13, 2009

AS2:在Flash 8用同一個影片組件播放不同的影片



雖然現在Flash已經有CS4的版本,而且已經發行很久了;但不可否認的,還是有一些人仍然在使用Flash 8的版本,一樣在使用ActionScript 2.0。今天,我就遇到一個我很久沒在用的東西:影片組件。

影片組件可以很容易的把單一影片在swf檔案中播放,只要在參數視窗裡面,將空白的"contentPath"欄位指定影片的位置即可。但如果我想要點選不同的按鈕,讓同一個播放影片的影片組件播放不同的影片,又該怎麼做呢?

Adobe Flash的線上參考說明提供了一篇文章:Playing multiple FLV files,有相關的做法可供參考。其範例如下:
import mx.video.*;
my_FLVPlybk.contentPath = "http://www.helpexamples.com/flash/video/clouds.flv";
var listenerObject:Object = new Object();
// listen for complete event; play new FLV
 listenerObject.complete = function(eventObject:Object):Void {
  if (my_FLVPlybk.contentPath == "http://www.helpexamples.com/flash/video/clouds.flv") {
   my_FLVPlybk.play("http://www.helpexamples.com/flash/video/water.flv");
  }
};
my_FLVPlybk.addEventListener("complete", listenerObject);

其中,最值得注意的就是「contentPath」,指的就是影片路徑,用以告知影片檔案在何處。假設我們指定播放影片的影片元件的實體名稱為「my_FLVPlybk」,那麼只要在後面的contentPath指定影片位置,即可更新影片元件播放的內容。換言之,只要設定按鈕在按下去之後,指定新的contentPath給影片,就可以讓影片播放新的影片內容了。

星期四, 3月 19, 2009

用Flash晾衣服



這是我最近看到最酷的衣服!也許你說它不過是塊布而已,但因為它的成份是「Flash」組成的,它可以擁有各種不同的樣貌!有哪件衣服這麼棒,可以隨時換不同的圖案、顏色、甚至影片!?這衣服真的是很有創意!只是以目前的科技看來,要拿來當衣服穿的話…可能要再等等。現在你能做的,是好好欣賞這件晾著的Flash布,它的左上角與右上角都被夾子夾住,按住夾子可以移動布的上緣兩端;一移動夾子,它就會跟著被拉扯的唷!

Flash平台其實有很多的應用面,還有哪些特別的Idea呢?「Adobe Flash Player in action」提供了許多已經實現的Flash創意!基本上,連這個網頁自己本身的呈現也都是Flash的創意呢!

星期三, 2月 25, 2009

iPhone Plays A Movie



用Adobe Flash CS4把Illustrator畫的iPhone變成可以播放電影預告片的小螢幕。

其實用Flash播放影片不難,但要用Flash的3D工具把影片調成與特定角度相對應的樣子還真的不容易!我相信Flash的3D工具有很大的改進空間!但如果畫面是偏左或偏右的話,應該都比我現在的畫面好調整!我試了很久,只能不斷的嘗試以找到「接近」的角度,真的不容易!

另外,好期待今年暑假變形金剛2(Transformers 2)的上映呀!