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

2010年4月29日

Ubuntu - flash 字型亂碼 解決！

執行

sudo gedit /etc/fonts/conf.d/49-sansserif.conf

將兩個「sans-serif」改成「san serif」即可！\\\

另外有朋友提供更好的方法

vim /etc/fonts/conf.d/69-language-selector-zh-tw.conf

將 sans-serif 下的 binding="strong" 拿掉

感謝 - Tsung 提供建議
關鍵字 ,

2010年1月13日

解決Flash內容總是漂浮於頁面頂層的問題

已經有兩個網友向我反應了Flash MP3 Player無法和lightbox之類插件兼容的問題，其症狀為，當打開lightbox效果的圖片時，flash movie會漂浮在整個頁面的最頂層，破壞了lightbox的效果。

今天做了一點小小的調查，原來瀏覽器渲染嵌入頁面的內容如flash movie或Java applet時，默認將它們放置於頁面的最上層，忽略其z-index屬性。所以，像lightbox這類插件，靠設置覆蓋層的z-index屬性來營造 高亮效果的js腳本，基本無法做到覆蓋掉頁面上的flash movie。

Adobe公司給出了對於類似問題的解決辦法，就是設置flash movie的wmode屬性。

這個屬性用於控制Flash 的窗口模式，其有三個取值：

window 模式

默認情況下的顯示模式，在這種模式下flash player有自己的窗口句柄，這就意味著flash影片是存在於Windows中的一個顯示實例，並且是在瀏覽器核心顯示窗口之上的，所以flash只 是貌似顯示在瀏覽器中，但這也是flash最快最有效率的渲染模式。由於他是獨立於瀏覽器的HTML渲染表面，這就導致默認顯示方式下flash總是會遮 住位置與他重合的所有DHTML層。

但是大多數蘋果電腦瀏覽器會允許DHTML層顯示在flash之上，但當flash影片播放時會出現比較詭異的現象，比如DHTML層像被flash刮掉一塊一樣顯示異常。

Opaque 模式

這是一種無窗口模式，在這種情況下flash player沒有自己的窗口句柄，這就需要瀏覽器需要告訴flash player在瀏覽器的渲染表面繪製的時間和位置。這時flash影片就不會在高於瀏覽器HTML渲染表面而是與其他元素一樣在同一個頁面上,因此你就可 以使用z-index值來控制DHTML元素是遮蓋flash或者被遮蓋。

Transparent 模式

透明模式，在這種模式下flash player會將stage的背景色alpha值將為0並且只會繪製stage上真實可見的對象，同樣你也可以使用z-index來控制flash影片的 深度值，但是與Opaque模式不同的是這樣做會降低flash影片的回放效果，而且在9.0.115之前的flash player版本設置wmode=」opaque」或」transparent」會導致全屏模式失效。

瞭解了各種模式的實現方式和意義在以後的開發中就可以按照具體情況選擇設置wmode屬性的值了。

我的插件之所以出現問題，就是因為我把wmode的值設定為了window，當然，這也是默認的值。從三種屬性值的具體含義中，我們可以知道，無論 是將wmode設定為opaque或者transparent，都可以解決問題，不過網上搜出來的結果，普遍只說了設成transparent這種，並且 普遍不講理由為何。

參考資料：

flash wmode 參數詳解

Flash content displays on top of all DHTML layers

How to make a Flash movie with a transparent background



作者：Charles

原文鏈接：解決Flash內容總是漂浮於頁面頂層的問題

《Becomin' Charles》版權所有，轉載時必須以鏈接形式註明作者和原始出處及本聲明。
關鍵字 , ,

2009年1月18日

AMFPHP-搭起Flash與PHP的美麗橋樑

Flash在跟Server在交換資料，比較常見的是一般的文字訊息或是XML，我自己在趕時間的時候，會偷懶的隨便echo一個字出來知會 flash說server程式已經做完了或是程式執行之後的結果，不趕時間且資料量較多的時候，則會乖乖的用XML。不過，最近開始我比較常用的是AMF 跟JSON這兩個方法，其實都還滿方便的，各有其優缺點。

AMF(Action Message Format)，由Adobe公司推出的規格，主要是用來給flash以RPC的方式來交換資料用的，在flash player 6的版本就已經開始支援(AMF0)，直到flash player 9才又推出新規格(AMF3)。其它細節可參考：http://en.wikipedia.org/wiki/Action_Message_Format

接下來就來個簡單的實作吧 :)

1. 下載AMF gateway
找個自己順手的語言吧

AMFPHP：這是PHP的
http://www.amfphp.org/

PyAMF：這是Python的(還不熟，努力學習中)
http://pyamf.org/

AMF.NET：這是.NET的
http://amfnet.openmymind.net/

光看名字大概就能猜到它的後端是用什麼做的
其它還有for Java或其它的，有興趣的可以繼續google翻翻看

2. 安裝AMF gateway(以AMFPHP為例)
安裝方法很容易的，只要把下載下來的壓縮檔解開，放在Web server底下一個自己找得到的路徑就行了

我是放在 http://127.0.0.1/test/amfphp/ 底下

AMFPHP有提供一個很棒的Service Browser：
http://127.0.0.1/test/amfphp/browser
這是個用Flex做的介面，可以清楚列出目前在AMF gateway上的服務

3. 在AMF gateway上新增一個服務
我做了一個簡單的php類別檔，存檔為callme.php，並放在AMF gateway的services資料夾裡面(文末有原始檔連結)。php不像java或as一樣硬性規定類別名稱一定要跟檔名一樣...至少php5還沒有，但建立這習慣也不錯。

上面，我做了一個callme的類別，然後裡面放了一個callmeplease的方法，這個方法會接收一個參數，執行完成之後，會把傳入的參數return回來
這裡只是簡單直接return而已，更複雜的資料庫存取程式也可以寫在這裡....

接下來看一下Service Browser，會發現寫寫的那個新的服務在的左手邊的列表裡
AMFPHP Browser
在右邊的Text輸入文字，按一下右邊的「Call」，應該就可以直接看到結果。(中文支持問題請見文末補充)

4. 新增一個Fla(這裡以AS3.0為例)
import flash.net.*;

// 新增一個NetConnection物件
var test:NetConnection = new NetConnection();

// 連上AMF gateway
// 這裡每家AMF gateway的實作方法應該都有差別，細節請記得看該實作說明
test.connect('http://127.0.0.1/test/amfphp/gateway.php');

// 準備一個Responder物件來接收事件，用法及參數請參考F1說明
var returnResult:Responder = new Responder(ok, ng);

function ok(res:Object):void {
trace(res);
}

function ng(res:Object):void {
trace(res);
}

//以上，我做了ok跟ng兩個簡單小function，分別是trace出它們接收到的物件

test.call('callme.callmeplease', returnResult, 'hi, flash');
// 這裡是最重要的動作，就是直接用call這個方法
// "呼叫"在gateway上面的callme這個服務裡的callmeplease這個方法
// 第二個參數是接收反應的responder，第三個參數是給callmeplease的參數

以上，callme.callmeplease會把"hi, flash"傳給AMF gateway，然後gateway回傳"hi, flash"回來給flash。順利的話，Ctrl + Enter執行，就會在output視窗看到輸出的東西了。

就這樣，你的Flash已經可以跟各家有支援AMF的gateway"對談"了

上面提到的原始檔在這裡可以拿得到(其實沒幾行字，就一個php跟fla)
http://code.eddie.com.tw/downloads/flash/AMF.rar

還是看不懂嗎? 沒關係，這裡有個很棒的影音教學，看完跟著作一遍就知道大概是怎麼運作的了
http://www.gotoandlearn.com/player.php?id=78

希望對大家有幫助 :)

補充1：
AMF不久之後已經可以在Zend Framework裡找到native module了，ZF真的是包山包海了 :)((而且ZF-AMF就是由AMFPHP裡的主導人Wade Arnold來親自操刀)。

補充2：
AMFPHP預設的編碼是不支援中文的(會出現亂碼)，不過只要修改一下gateway的程式碼即可。

使用文字編輯器，開啟AMFPHP資料夾的gateway.php，應該可以找到一段跟字碼有關的：
$gateway->setCharsetHandler("utf8_decode", "ISO-8859-1", "ISO-8859-1");

把它修改成：
$gateway->setCharsetHandler("utf8_decode", "UTF-8", "UTF-8");

或是如果你的PHP模組裡有iconv的話也可以這樣改：
$gateway->setCharsetHandler("iconv","UTF-8","UTF-8");

記得，不要改flash裡的useCodePage = true，雖然可能也ok，但這是走回頭路....能使用Unicode就盡量使用它吧 :)

關鍵字

Flash Remoting和AMF-RPC for NET基礎入門

Flash Remoting和AMF-RPC for NET基礎入門

在前面的章節，我們介紹了Flash如何通過中間件ASP.NET網頁與服務器之間實現數據交換，瞭解了Flash影片應用程序如何融入到網絡應用環境的最一般原理，有了基本的創建具有網絡交互功能Flash影片應用程序的基本知識。

這一章，我們將開始使用Flash的一個最重要的服務器組件AMF-RPC來實現與Flash影片應用程序的交互，用戶可以感受到更加強烈的Flash網絡應用程序「感覺」，從而可以更輕鬆的創建功能更強大的Flash網絡應用程序——這就是「富媒體應用程序」。

使用Flash作為開發工具，我們現在可以開始學習怎樣使用AMF-RPC創建更為強大而且易用的富媒體應用程序了。

6.1 Flash Remoting基礎和AMF-RPC基礎

隨著互聯網不斷介入應用程序開發的各個領域，協調運算便不斷成為應用程序開發所追求的方向。應用開發也隨之形成了一種習慣：即將應用程序構建成一組組件，分佈於計算機網絡之間，並作為整個程序的一部分一起運行，這便是分佈式應用程序。

為了實現這一目標，人們創建了各種各樣的技術。例 如，Microsoft的DCOM（分佈式組件對象模型)、Object Management Group的CORBA (公共對象請求代理程序體系結構)、Sun的RMI (遠程方法調用)。這些技術提供了可靠的、可升級的體系結構，以滿足對應用程序日益增長的需要。

但是，目前要實現它們的話，存在著不少的問題。DCOM在跨防火牆工作時會有問題，因為它是建立在私有協議上的；而CORBA存在有多種不同接口的問題；RMI的應用有些麻煩，因為你不得不去搜尋一個對象，然後才能調用方法。

並且，隨著計算機客戶端軟件不斷的異化，必須保證各種各樣的軟件終端都可以連接到遠程的服務組件，並能夠實現互操作。於是基於XML的遠程過程調用（RPC）便應運而生，比較知名的RPC包括XML-RPC和WEB服務，這些技術都是Remoting技術。

Remoting技術的實現必須包含兩個方面：

1Remoting Channel：這是指客戶端和服務端的通信協議，例如我們可以使用TCP、HTTP協議。

2Serializer：這是指在傳輸時採用何種格式來傳輸數據，例如我們可以採用Binary，也可以採用SOAP來傳輸XML格式的數據。

客戶端的數據經過序列化通過HTTP被傳遞到遠程服務端，在服務端，一般會有一個代理（網關）接收並將數據逆序列化，從而執行位於服務端的方法，並返回給客戶端。

隨著Flash不斷介入應用程序開發的各個領域，作 為一個流行的應用程序終端，用於Flash的Remoting實現也日漸多了起來，從最早應用於Flash 5的SQL Component Kit，到現在日漸流行的XML-RPC、WDDX、Flash Remoting MX（AMF-RPC）等。

AMF-RPC是目前最重要的Flash Remoting技術。



Flash Remoting: The Definitive Guide
關鍵字

flash php

[1]使用MovieClip物件的getURL、loadVariables、loadVariablesNum方法可以使用HTTP或HTTPS協定以URL編碼格式向PHP應用程式伺服器傳遞和接收資料。

[2]使用LoadVars類的load、send和sendAndLoad方法可以使用 HTTP 或 HTTPS 協定以URL編碼格式向PHP應用程式伺服器傳遞和接收資料。

[3]使用XML類的XML.send、XML.load和XML.sendAndLoad方法可以以XML格式向PHP應用程式伺服器傳遞和接收資料，這還包括一些基於XML的變種形式，例如WDDX、SOAP等。
[4]使用XMLSocket類的XMLSocket.connect 和 XMLSocket.send方法可以創建和使用TCP/IP套接字連接從而以XML 格式向PHP應用程式伺服器傳遞和接收資料。

[5]使用Connection類或者NetConnection的call方法可以使用AMF協定向PHP應用程式伺服器傳遞和接收資料，這被稱為AMF-RPC的方式，還包括其他的變種形式，但都統稱為AMF-RPC方式。
關鍵字

2009年1月17日

XML新手上路3之FLASH載入篇

如何使用FLASH載入XML

  1. stop();
  2. var my_xml:XML = new XML();
  3. //宣告my_xml變數，型別：XML
  4. var xml_url:String = "xml_data.xml";
  5. //外部載入路徑，型別：字串
  6. my_xml.ignoreWhite = true;
  7. //忽略xml裡的空白字元
  8. //這個屬性，一定要開啟為true
  9. /*
  10. 例：
  11. 跟


  14. 結構是不一樣的，因為多了空白，FLASH會認為是一個結點，所以要忽略
  15. */
  16. my_xml.onLoad = function(success:Boolean):Void
  17. {
  18. //當XML載入成功或失敗時，會執行這個function
  19. //後方要接一個變數，我們取名為success，型別：布林值
  20. //如果載入成功，success就為ture，失敗為false
  21. if (success) {
  22. //載入成功後，開始播放
  23. play();
  24. }
  25. };
  26. my_xml.load(xml_url);
  27. //開始載入

我們以下方的 xml來練習




01.jpg
2008/03/24



02.jpg
2008/03/25



03.jpg
2008/03/26


此XML，把值都寫在nodeValue裡
我們先在場景上放一個Button
取實體名稱為：_mc0
在第二個影格寫上程式
_mc0.onRelease=function(){
trace("第一筆item，label結點值為："+my_xml.firstChild.firstChild.firstChild.firstChild.nodeValue)
trace("第一筆item，imgURL結點值為："+my_xml.firstChild.firstChild.childNodes[1].firstChild.nodeValue)
trace("第一筆item，date結點值為："+my_xml.firstChild.firstChild.childNodes[1].firstChild.nodeValue)
}
這樣就可以得到第一筆item裡的結點值
你可以練習看看如何得到第二筆的結點值
________________我是分隔線__________________

來練習一個簡單的XML相本
一樣使用上方的 xml檔
場景上有二個button，分別為上一張和下一張
放二個動態文字，來顯示label和date
再放一個空白的MovieClip，用來動態載入圖片

當按上一張時，就載入上一張照片
下一張，就載入下一張照片
如果已經是第一張，就保持在一張
如果是最後一張，就保持在最後一張
(怎麼感覺像在把程式碼用中文打出來)
這時候我們需要一個變數，來當索引值
var index:Number = 0
取名為index，初始值為0(一進來時，會先播放第一張，因為XML的第一筆索引值是0，不是1喔)


  1. stop();
  2. var index:Number = 0;
  3. //索印值
  4. var len:Number = my_xml.firstChild.childNodes.length;
  5. //xml裡照片數量
  6. function moveIndex(__num:Number):Void
  7. {
  8. //此function，用來處理index的值，加上判斷，避免產生Error
  9. index += __num;
  10. // index += __num可以寫成 index = index + __num，二者寫法一樣。
  11. if (index <>
  12. index = 0;
  13. //如果索引值小於0，就保持在0，也就是第一張
  14. } else if (index > len - 1) {
  15. index = len - 1;
  16. //如果索引值大於長度扣一，就保持在最後一張
  17. //為什麼要扣一，
  18. //假設xml裡有三筆item，透過length屬性，得到的值會是3
  19. //但索引值最大只能是2，因為沒有childNodes[3]這筆資料，所以要扣一
  20. }
  21. trace('目前的index值為：' + index);
  22. //設定，將xml裡的值，放到我們指定的地方
  23. label_txt.text = my_xml.firstChild.childNodes[index].childNodes[0].firstChild.nodeValue;
  24. //將得到的值，寫到我們指定的物件屬性，原本我們在childNodes都是寫數字，現在換成變數index
  25. load_mc.loadMovie(my_xml.firstChild.childNodes[index].childNodes[1].firstChild.nodeValue);
  26. date_txt.text = my_xml.firstChild.childNodes[index].childNodes[2].firstChild.nodeValue;
  27. }
  28. prev_mc.onRelease = function():Void
  29. {
  30. moveIndex(-1);
  31. //執行moveIndex，並把參數-1帶進去
  32. };
  33. next_mc.onRelease = function():Void
  34. {
  35. moveIndex(1);
  36. //執行moveIndex，並把參數-1帶進去
  37. };
  38. moveIndex(0);
關鍵字 ,

2009年1月16日

使用AMFPHP跟FLASH做溝通(Flash Remoting範例)

這個範例使用 AMFPHP amfphp 1.1(1.2為BATE版不建議目前使用)+PHP5(若是不會設定請參考前文)+FLASH8+FLASH8 remoting compont.

當你需要開發FLASH跟AMFPHP互動程式你需要以下軟體
Flash MX 8 Professional
Macromedia Flash Remoting Components for Flash 8 ActionScript 2.0(觀看詳細內容 | 變更資訊 )

若你的執行環境是在windows底下.我建議你可以安裝 WAMP (Window, Apache, MySQL, PHP).
或是自行參考前文安裝ＰＨＰ5+IIS5的範例

提示：

1.預設IIS5根目錄為 C:Inetpubwwwroot
2.將下載的AMFPHP解壓縮放置C:Inetpubwwwrootflashservices底下

步驟一

1.1開啟文字編輯器或是Dreamweaver等工具撰寫以下PHP程式碼
1.2將撰寫好的檔案存檔檔名為HelloWorld.php
放置在 services directory (C:Inetpubwwwrootflashservicesservices):

PHP碼

步驟二
FLASH8 ACTIONSCRIPT程式碼

2.1開啟FLASH8 建立一新文件
2.2在第一影格下寫下以下程式碼(或是按F9開啟程式碼編輯器)
2.3撰寫完成存檔，按下Ctrl+Enter執行FLASH程式


執行結果



以上就是簡單的FLASH跟PHP使用Flash Remoting範例

先行預告在JAVA中也是有同樣的元件，稱為OPENAMF。
再下一篇的教學我將提到如何使用OPENAMF讓JAVA跟FLASH做溝通!!
關鍵字 ,

2008年12月7日

FS Command: A Short Introduction

http://moock.org/webdesign/flash/fscommand/index.html#diagram1
關鍵字

2008年11月30日

AS3.0 的 TweenLite-輕量級tween引擎!

「GreenSock 網站」提供的 Tween 系列一共有三個版本：

1.「TweenMax」完整版 http://blog.greensock.com/tweenmaxas3/

2.「TweenLite」輕裝版 http://blog.greensock.com/tweenliteas3/

3.「TweenFilterLite」濾鏡版 http://blog.greensock.com/tweenfilterliteas3/

今天來介紹一個Flash AS3.0 的 tween 工具
以前在使用AS2.0 的時候就有用tween工具的習慣了，因為自己常用語法寫動畫，常會EnterFrame沒有結束 或是 動畫效果不夠、控制不易的問題..

在AS2.0使用的是 MC_tween ，目前也有出AS3.0的版本了 Tweener 但是個人沒去用過，還沒有空去try
我是使用 TweenLite (AS3.0) 因為他有現成的檔案 可以 自動產生as程式，較為方便! 介紹給大家摟~ 雖然堪稱 tween之父 的 Tweener 也相當好用..
首先:
先下載他的檔案
官方寫說 TweenLite 是一個強有力的輕量級tween引擎 只有2k，這點挺吸引我的! 點這裡>>可以看官方的引擎速度測試
使用:
在程式碼裡加入

import gs.TweenLite;
import fl.motion.easing.* (視你動畫動作的類型需求而掛入)


動畫使用部分:

TweenLite.to(mc, 1, {x:46, y:43, ease:Linear.easeIn});

//呼叫mc作 x軸移動到46 y軸移動 動畫類型Linear.easeIn
(當然還有很多參數及動畫類型可以做選擇)

目前官方有已經製作好的swf檔案 可以作基本的設定，可以自動產生as3.0 code很好用

TweenLite 還有其他的動畫方式:

TweenLite.to(target:Object, duration:Number, variables:Object);
就是以目前物件屬性作指定動作
TweenLite.from(target:Object, duration:Number, variables:Object);
剛好是 TweenLite.to()的相反  先指定屬性而後作動作到原本的物件屬性作
TweenLite.delayedCall(delay:Number, onComplete:Function, onCompleteParams:Array);
延遲呼叫函式
TweenLite.killTweensOf(target:Object);
刪除某指定物件的tween
TweenLite.killDelayedCallsTo(function:Function);
刪除延遲呼叫的函式


也許我說明的不夠好 也不詳細 更多詳細參數及設定，上官網看吧
關鍵字

TweenLite

/*

版本: 8.02

日期: 8/24/2008

ACTIONSCRIPT 語言版本: 3.0 (AS2 版也有提供)

更新 及 更多文檔請訪問: http://www.TweenLite.com (這裡的鏈接指向 AS3 版)

描述:
緩動。 我們都在做。我們很多人都知道除了 Adobe's Tween 類之外，還有很多更好的動畫引擎，（比如 Tweener）. 每種引擎都有它們各自的優缺點。
最近幾年，為了得到一個更緊湊的，跑得更快，效率更高的引擎，我創建了 TweenLite （我無法接受其它的一些引擎帶來的文件尺寸上的負擔）.它很快就融入到我的所有工作中。我告訴其它人，讓大家能夠從中獲益，最終，我將它發佈了出來。在過 去的幾年中，TweenLite越來越受歡迎，超乎了我的想像.
基於此，我又添加了一些新的功能，並且儘量保持這個文件的尺寸，讓它小於3K。 TweenFilterLite 擴充了 TweenLite 並且加入了濾鏡緩動，包含了 ColorMatrixFilter 的一些效果，比如飽和、對比、增亮、色調，甚至是著色，但文件的尺寸始終沒有超過3K。與 TweenLite 的做法相似，提供有AS2版和AS3版的類包下載。
TweenMax 比 TweenFilterLite 增加了更多的特性，包含 bezier 緩動，暫停/恢復，順序執行等等。(見 www.TweenMax.com)
我猜你會想「如果這個是『輕量級的』，那麼它一定會丟掉很多特性，讓我用的時候會有點擔心」。這種想法是對的，在這裡缺少一些其它緩動引擎所包含的特效， 但是我可以肯定的說，在過去幾年我的工程（很多獲獎的 flash 程序以及500強企業的項目中）中，我幾乎一直都在用它，而它從沒有讓我失望過。
我還真沒發現過我還需要其它的功能。你可以對任何的屬性（包括 DisplayObject 對象的音量和顏色）使用緩動函數，內置的延遲時間，回調函數，以及傳遞參數給這些回調函數，甚至根據數組進行緩動，統統只在一行代碼中完成。如果你需要更 多的特效，你可以裝上TweenFilterLite 或者 TweenMax來用用。
我也從來沒有發現比這個更快的引擎。不同引擎執行效率的比較，請訪問 http://blog.greensock.com/tweeing-speed-test/.

TweenLite參數說明:
1) $ target : Object - 作為目標的對象， MovieClip或者其它對象
2) $ duration : Number - 動畫的時間長度（單位：秒）
3) $ vars : Object – 對象，通過屬性值，來存貯各種屬性參數用於緩動。（如果你使用 TweenLite.from() 方法，這裡的參數表示緩動的初始值）
該對象所具有的屬性：
alpha: alpha 目標對象應該完成 (或開始，當使用 TweenLite.from()時)的透明度級別.如果 target.alpha 是1，當緩動被執行的時候，你指定參數為 0.5，它將把透明度從 1 緩動到 0.5.
x: 改變 MovieClip的 x 位置,把這個值設置成你希望的 MovieClip 的結束位置(如果你使用的是 TweenLite.from()這個值表示開始位置).
　　　　( y scaleX scaleY rotation　等屬性不再重複說明）
特別的屬性 (**可選的**):
delay : Number - 延遲緩動 (以秒為單位).
ease : Function - 緩動函數. 例如，fl.motion.easing.Elastic.easeOut 函數。默認的是 Regular.easeOut函數。
easeParams : Array - 用來存貯緩動公式所需要的額外數據. 當使用 Elastic 公式並且希望控制一些額外的參數，比如放大係數和緩動時間。大多數的緩動公式是不需要參數的，因此，你不需要給其它的緩動公式傳遞參數。
autoAlpha : Number - 用它來代替 alpha 屬性，可以獲得一些副加的效果，比如當 alpha 值緩動到 0時，自動將 visible 屬性改為 false。當緩動開始前，autoAlpha 大於 0時，它將會把 visible 屬性變成 true 。
visible : Boolean - 在緩動結束時，想要指定 DisplayObject 的 visible 屬性，請使用這個參數。
volume : Number - 對 soundTransform （MovieClip/SoundChannel/NetStream 等）對象中的volume屬性（音量大小）進行緩動
tint : Number - 改變 DisplayObject 的顏色，設置一個16進制顏色值之後，當緩動結束時，目標對象將被變成這個顏色，（如果使用的是TweenLite.from()，這個值將表示目標對象 開始緩動時的顏色)。舉個例子，顏色值可以設定為： 0xFF0000。
removeTint : Boolean - 要移除 DisplayObject 顏色，將這個參數設成 true 。
frame : Number - 將 MovieClip 緩動到指幀頻。
onStart : Function - 在緩動開始時想要執行某個函數，就將函數的引用（通常是函數名）放到這裡。如果緩動是帶延遲的，那麼在緩動開始前該函數不會被執行。
onStartParams : Array - 為緩動開始時要執行的函數傳遞參數。(可選的)
onUpdate : Function - 緩動過程中，每次更新時調用這裡指定的函數(緩動開始後，每一幀被觸發一次),
onUpdateParams : Array - 給 onUpdate 參數指定的函數傳遞參數 (可選的)
onComplete : Function - 緩動結束時執行的函數。
onCompleteParams : Array - 給 onComplete 參數指定的函數傳遞參數 (可選的)
persist : Boolean - 值為 true 時，TweenLite 實例將不會自動被系統的垃圾收集器給收走。但是當新的緩動出現時，它還是會被重寫（overwritten）默認值為 false.
renderOnStart : Boolean - 如果你使用帶有延遲緩動的 TweenFilterLite.from() ，並且阻止緩動的渲染（rendering ）效果，直到緩動真正開始，將這個值設為 true.默認情況下該值為 false ，這會讓渲染效果立即被執行，甚至是在延遲的時間還沒到之前。
overwrite : int - 當前的緩動被創建以後，通過這個參數可以限制作用於同一個對象的其它緩動，可選的參數值有：
- 0 (沒有): 沒有緩動被重寫。這種模式下，運行速度是最快的，但是需要注意避免創建一些控制相同屬性的緩動，否則這些緩動效果間將出現衝突。
- 1 (全部): (這是默認值，除非 OverwriteManager.init() 被調用過)對於同一對象的所有緩動在創建時將會被完全的覆蓋掉。
TweenLite.to(mc, 1, {x:100, y:200});
TweenLite.to(mc, 1, {x:300, delay:2}); //後創建的緩動將會覆蓋掉先前創建的緩動，（可以起到這樣的作用：緩動進行到一半時被中斷，執行新的緩動 譯者注）
- 2 (自動): (當 OverwriteManager.init() 被執行後,會根據具體的屬性值進行選擇)只覆蓋對同一屬性的緩動。
TweenLite.to(mc, 1, {x:100, y:200});
TweenLite.to(mc, 1, {x:300}); //only "x" 屬性的緩動將被覆蓋
- 3 (同時發生): 緩動開始時，覆蓋全部的緩動。
TweenLite.to(mc, 1, {x:100, y:200});
TweenLite.to(mc, 1, {x:300, delay:2}); //不會覆蓋先前的緩動，因為每二個緩動開始時，第一個緩動已經結束了。

舉例:
將實例名為 "clip_mc" 的 MovieClip 透明度降到 50% (0.5) ，並將它 x 軸位置移動到 120 ，將音量將到 0，緩動總共用時 1.5 秒，代碼如下：
import gs.TweenLite;
TweenLite.to(clip_mc, 1.5, {alpha:0.5, x:120, volume:0});

如果希望使用更高級的緩動函數在 5 內，將 alpha 變到 0.5，將 x 移動 到 120 ，使用 "easeOutBack" 彈性函數，緩動整體延遲 2 秒發生，並且在緩動結束時，執行 "onFinishTween" 函數，並且為這個函數傳遞幾個參數，(一個數值 5 以及對 clip_mc 的引用)，代碼如下：
import gs.TweenLite;
import fl.motion.easing.Back;
TweenLite.to(clip_mc, 5, {alpha:0.5, x:120, ease:Back.easeOut, delay:2, onComplete: onFinishTween, onCompleteParams:[5, clip_mc]});
function onFinishTween(argument1:Number, argument2:MovieClip):void {
trace("The tween has finished! argument1 = " + argument1 + ", and argument2 = " + argument2);
}

如果你的舞台上的 MovieClip 已經停在了它的結束位置，你只想讓它花上5秒種回到這個位置，(只需要改變 y 屬性，比當前位置高 100 像素的位置，讓它從那裡下落), 代碼如下（這次使用的是 TweenLite.from 譯者注):
import gs.TweenLite;
import fl.motion.easing.Elastic;
TweenLite.from(clip_mc, 5, {y:"-100", ease:Elastic.easeOut});

說明:
- TweenLite類會讓你的 Flash 文件增加 3kb大小。
- 給參數值加上引號，表示對指定的屬性進行相應操作。比如，使用 TweenLite.to(mc, 2, {x:"-20"}); 它將 mc.x 向左移動 20 像素，與此相同效果的代碼是：TweenLite.to(mc, 2, {x:mc.x - 20});
- 你可以用別的緩動函數替換 TweenLite 默認的緩動函數: Regular.easeOut.
- 必須使用 Flash Player 9 或之後版本的播放器 (ActionScript 3.0)
- 可以對任何 MovieClip 使用 "volume" 緩動,就比如：TweenLite.to(myClip_mc, 1.5, {volume:0});
- 可以將 MovieClip 設定成某種顏色，使用 "tint" 參數,比如: TweenLite.to(myClip_mc, 1.5, {tint:0xFF0000});
- 想要對數組內容進行緩動，將數值放到一個叫 endArray 的數組中即可，例如:
var myArray:Array = [1,2,3,4];
TweenLite.to(myArray, 1.5, {endArray:[10,20,30,40]});
- 可以在任何時候終止緩動，使用 TweenLite.killTweensOf(myClip_mc); 函數。如果想強制終止緩動，可以傳遞一個 true 做為第二個參數，比如
TweenLite.killTweensOf(myClip_mc, true);
- 取掉延遲回調函數，用 TweenLite.killDelayedCallsTo(myFunction_func);這項功能可以用來控制回調函數的優先級。
- 使用 TweenLite.from() 方法，可以使用對象從別的位置回到當前的位置。例如，你可以將對象在舞台上擺放整齊（緩動結束時的位置），然後利用
緩動，讓它們跑到那個位置上去，你可以將緩動的初始位置值 x 或 y 或 alpha (或者其它你需要的屬性)當做參數傳遞給這個方法函數。

TweenLite 下載鏈接：
http://www.greensock.com/ActionS ... S3/TweenLiteAS3.zip
下載下來的類包中，有一個 TweenLiteAS3_Sample_1.swf ，初學者可以用它來觀察各種緩動的效果，並且直接得到相關的執行代碼。算是一個可視化設計的工具，不要錯過。
下載到類包以後，解壓縮到一個目錄比如：d:\AS3Class ，在flash9 的首選參數－>ActionScript->ActionScript3.0設置中添加類目錄，d:\AS3Class\TweenLiteAS3 即可正確引用到相關的類。


應用舉例：
import gs.TweenLite;
import gs.easing.*;

stage.addEventListener(MouseEvent.CLICK, onCK);
function onCK(evt) {
TweenLite.to(mc, 0.5, {x:mouseX, y:mouseY, rotation:360});
}
在舞台上點擊，會讓mc 元件旋轉並跑動到鼠標位置。

關鍵字

2008年11月28日

flash 動態特效-爆好用的TWEEN語法

MC TWEEN 動態特效action程式官方網站：
http://hosted.zeh.com.br/mctween/

各種運動效果參數的範例：
http://hosted.zeh.com.br/mctween/animationtypes.html

語法解說
http://hosted.zeh.com.br/mctween/documentation.html

參考 : http://blog.shanger.net/article.asp?id=210
關鍵字

FLASH 運動曲線研究(緩動效果)

緩動曲線的概念：

緩動曲線是一個0為起點的連續函數曲線，x軸表示時間變化，y軸表示位移變化。曲線的斜率反映出運動的數度。

緩動效果在Flash動畫中比較常見，用於模擬一些現實中常見的運動軌跡，或者製造一些超絢的效果。
而且新版本的Flash中，內置了一些常用的緩動曲線函數。

可惜,Flash的這些曲線函數不是開源的，我們不知道內部如何實現，也就無法將其移植到JS中。感受其絢麗的同時，未免有一絲遺憾。

於是乎，自己琢磨琢磨。

首先，我對Flash的漸變函數接口非常不滿。
搞那麼多參數幹嗎？
要描述一個區間的漸變運動特徵，只需一個y = f(x)足已。那麼一大堆參數，真夠囉嗦。
//原理：我們以終點位移為參考，只需要知道中間個點相對於最終位移，我們就能確定運動的規律。
y= f(x)
//約定
//x ∈ [0,1] #將x變化換算成[0,1]是最簡單不過的操作
//f(0) = 0 #運動是連續的嘛^_^.
//f(1) != 0 #如果f(1) = 0了，那不就沒有運動嘛，中間即使有位移，我也無法計算中間的位移相對於總體位移的比例。

曲線轉換
每種類型的漸變都有三種變形

漸入(in)

在過渡的開始提供緩動效果。

漸出(out)

在過渡的結尾提供緩動效果。

漸入漸出(inOut/Both)

在過渡的開始和結尾提供緩動效果。


其中，我們只要知道一個的曲線，其他兩個都可以轉換生成：
知道漸入曲線之後，將其相對於(0.5,0.5)點繪製鏡像，就是一個緩出運動，分段疊加就是一個完整的緩入緩出運動。



首先，常見的加速/減速運動：
初中物理就能搞定。
加速漸變函數為(easeIn)：
y=x*x; //y軸比例常數無需考慮

這是一個簡單的2次曲線，表現一個漸入運動。
簡單的變換一下：y = 1-(1-x)*(1-x) 減速運動(easeOut)
複雜一點：
y = x>0.5? 1-2(1-x)*(1-x) :
2*x*x :
先加速後減速運動(easeBoth)




既然有二次曲線，很自然就想到三次、四次曲線。是的，這些曲線都有類似特徵，區別在中間更陡峭，兩頭平緩（緩入緩出）

接下來，我就想實現一下彈動效果：
這類效果就好像一個甲蟲飛到蜘蛛網上，在網上抖動兩下，靜下來聽天由命。
抖動，週期運動，好，我們很快就想到正弦曲線。
方法基本正確，不過我起初還是走彎路了，我自作聰明的想著延長開始的半週期（x軸邊形處理，振動讓週期先大後小）。
但最終發現效果非常不理想，最後查看yui的實現。模仿一下，走出了這個誤區。
我們通常看到的振盪移位效果，都是開始移動了較長位移，給人一種開始的振動週期更長的錯覺，振動週期是不需要變化的。
糾正這個錯誤後，實現曲線函數如下：

y = Math.pow(1024,x-1)*Math.sin(x*((2*(period||1)+0.5)*Math.PI));

利用指數函數的第二象限的漸變特徵變形，取處理正弦波形的振幅，達到一個衰減的效果。

趁熱打鐵，看看yui的其他幾類漸變效果：

回退起步效果。
喜歡看動畫片的話，你一定記得這個常見的場面，當一個傢伙想快跑的時候，一點要先回撤一段距離，能後如突然加速前進。ok要的就是這個效果。
實現其實也很簡單，一個二次曲線就可以搞定

y = x*(x-(backDistance||0.1)*4)



撞牆效果

這個名字可能不太合適吧，應該叫撞地效果更合適，鑑於撞牆這個名詞更常見一些，也就標題黨一回好了：）
玩過彈球吧，彈球的運動規律一定還記得。
對就是這種軌跡。
運功軌跡就是若干條二次曲線的分段拼接。改寫一個yui裡面的模擬實現。

this.bounceOut = function (x) {
if (x < (1/2.75)) {
return x*x;
} else if (x < (2/2.75)) {
return (x-=(1.5/2.75))*x + .75/7.5625;
} else if (x < (2.5/2.75)) {
return (x-=(2.25/2.75))*x + .9375/7.5625;
}
return (x-=(2.625/2.75))*x + .984375/7.5625;
};
這裡手動指出了一大堆參數，其實，這些參數都可以通過計算得出，偷個懶，就這麼地吧，^_^
關鍵字

Papervision3D 2.0 系列教程 (下載 & 設置)

Papervision3D系一個用ActionScript寫的高性能3D引擎，現在的最新版本系3.0－

官方主頁地阯：
http://www.papervision3d.org
http://blog.papervision3d.org

1. 下載Papervision3D 2.0 Alpha

1.下載並安裝Tortoise SVN
2.在你硬盤上某個地方創建一個新文件夾，Papervision3D稍後將會下載到這個文件夾中
3.鼠標右擊該文件夾，選擇"SVN Checkout"
4.在彈出的窗口中輸入如下地阯："http://papervision3d.googlecode.com/svn/"
5.點擊OK然後等待至下載完畢
6.當你看到"Completed At revision:xxx"時，Papervision3D就下載成功了～～

2. 為Papervision3D工程做相關設置

1.運行Flash
2.選擇"Edit -> Preferences"
3.在左邊的"Category"列表中選擇"ActionScript"
4.點擊窗口右下的"ActionScript 3.0 Setting"按鈕
5.在彈出的窗口中點擊"+"添加一個類路徑，定位到你下載Papervision3D的文件夾中的"src"（即..../Papervision3D/src）
6.OK，設定完成。

第二種方法

1. 下載Papervision3D原始碼。請到下面網址下載。
http://papervision3d.googlecode.com/files/Papervision3D_1_5.zip
2. 解壓縮並複製到自己喜歡的資料夾，例如c:\pv3d。
3. 開啟Flash CS3，到工具列的『編輯』->『偏好設定』->『ActionScript』，右邊下方會有個『語言』標籤，點『ActionScript 3.0 設定』。
4. 出現的類別路徑視窗裡，右上方有個像準心的按紐，點下去，到你剛剛解壓縮pv3d的路徑裡的src資料夾。例如：『C:\Papervision3D_1_5\PV3D_1_5\src』。

經過上面的階段，Flash才能找到PV3d的類別所在。

第三種方法：

1.Adobe Flex Builder 3 Public Beta 3，因為作者將使用 PV3D 的 AS3 的版本來開發，所以需要使用 Flash 9 或 Flex 2 / 3 以上的工具，手邊沒有這些工具的讀者可以上 Adobe Labs 網站取得 90 天試用版，到以下網址可以取得：http://labs.adobe.com/technologies/flex/flexbuilder3/。

2.PV3D 的 Library 可以透過 TortoiseSVN 從 Google Code 下載最新版本，URL 為 http://papervision3d.googlecode.com/svn/trunk/，作者寫此文章時的最新版本為 392 版。若是對於 SVN 的方式不熟悉的讀者也可直接到 Google Code 下載已經打包好的 *.zip 檔，網址為：http://code.google.com/p/papervision3d/，此刻可下載到的版本為 1.5 版，可能會有讀者對此版本有些疑問，這跟 SVN 上的版本號碼看似使用不同的編號原則，我們可將 1.5 版的 *.zip 解開後，檢視 \src\org\papervision3d\Papervision3D.as 的檔案內容可以發現以下這段敘述：



/**
* Enables version to be retrieved at runtime or when reviewing a decompiled swf.
*/
static public var VERSION :String = 'Beta RC1.1';

/**
* Enables version date to be retrieved at runtime or when reviewing a decompiled swf.
*/
static public var DATE :String = '18.06.07';

若是從 SVN 取得的 392 版，則可在 \as3\trunk\src\org\papervision3d\Papervision3D.as 看到以下這段敘述：

/**
* Enables version to be retrieved at runtime or when reviewing a decompiled swf.
*/
static public var VERSION :String = 'Beta 1.7';

/**
* Enables version date to be retrieved at runtime or when reviewing a decompiled swf.
*/
static public var DATE :String = '20.08.07';

先不論其版號的命名原則是否有正確的在執行，以上也只是幫助讀者做一個參考罷了。


版權聲明：轉載時請以超鏈接形式標明文章原始出處和作者信息及本聲明

參考文件：

http://bbs.flash2u.com.tw/_html/article/pv3d/pv3d_1.htm#http://bbs.flash2u.com.tw/_html/article/pv3d/pv3d_2.htm

http://november.idv.tw/arch/326

http://blog.yam.com/milkmidi/article/12556685
關鍵字 , ,
訂閱： 文章 (Atom)