基于flash技術的商品3D旋轉特效研究

徐曉

摘 要： 目前最常見的線上產品展示方式是商品立體旋轉。在許多支持在線3D展示的技術中Flash具有其獨特的優勢。雖然Flash沒有出3D的API，但它還是可以用來做出很多類似的3D效果。文章主要分析了利用Flash技術設計商品3D旋轉特效的優點、原理、制作思路及程序設計。把這項技術應用在電商行業領域可提升用戶體驗，滿足用戶的視覺需要，能在日趨激烈的電商競爭中贏得先機。

關鍵詞： 3D旋轉； Flash技術； ActionScript技術； 影片剪輯； 用戶體驗

中圖分類號：TP37 文獻標志碼：A 文章編號：1006-8228（2017）03-68-03

Abstract： Now the most common way to display online products is three-dimensional rotation effect. There are many technologies support online 3D display， but Flash has its unique advantages. Although Flash does not have 3D API， but it can still be used to make a lot of effects similar to 3D. This paper mainly analyzes the advantages， principles， ideas and programming to design the 3D rotating special effect for product by using Flash technology. The application of this technology in the field of E-business can enhance the user experience， meet the user's visual needs， and win the initiative in the increasingly fierce competition in E-business.

Key words： 3D rotation； Flash technology； ActionScript technology； movie clip； user experience

0 引言

目前雖然多數線上產品都是靠著圖片和文字說明賣出去的，但3D體驗也正越來越多地應用在電商行業領域[1]。3D技術的應用能提升用戶體驗，這在日趨激烈的電商競爭中能幫助使用者贏得先機。現在有許多支持在線3D展示的技術，其中Flash有以下優勢：文件的體積小，可以飛快的在線瀏覽，而且基本上所有的瀏覽器都能夠支持FlashPlayer播放器，另外Flash還有很強的跨平臺和支持3D特效等特性。雖然Flash沒有3D的API功能，但是我們還是可以做出很多類似3D的效果。本文基于Flash技術提出了設計一組商品3D旋轉特效的原理及代碼。圖1是利用flash技術設計的商品3D立旋轉效果圖。

1 FLASH動畫特點

FLASH動畫活潑、生動、可以吸引網站瀏覽者去點擊這些動畫頁面，其強烈的視覺沖擊力可以加深網站瀏覽者的印象。FLASH動畫占用的存儲空間很小，只有位圖的幾千分之一，所以在網絡上使用是非常適合的。它做到真正的無級放大，不管瀏覽者的瀏覽器使用多大的窗口，它自始至終能完全顯示，而且也不會降低畫面質量。它采用插件的方式工作。客戶只需安裝一次插件，就能快速啟動并觀看動畫。還能插入AVI音樂、MP3及動畫[2]。

2 ActionScript概述

ActionScript是由Macromedia為Flash這個產品開發的，它原來是一種非常通俗易懂的腳本語言，現在升級到版本ActionScript3.0，它是一種完全的面向對象的編程語言，功能非常強大，包含的類庫非常多，語法和JavaScript比較相似，經常用在Flash娛樂性、交互性、網頁開發、實用性開發和Internet應用程序開發。ActionScript 2.0實際上是as1.0的升級版本，第一次將面向對象的程序設計引入到Flash中，但它并不是完全的面向對象的語言，只是在編譯過程中支持面向對象語言的語法。ActionScript 3.0則是一個完全面向對象的語言，且as3.0并不是as2.0的簡單升級，它們完全是兩種不同思想的語言。as3.0全面采用了面向對象的思想，而as2.0只是停留在面向過程這一階段，as2.0和as3.0就好比VB和C#。在as3.0里，就可以看到java和c#的影子，的確這些語言大部分的思想都是一樣的，只是稍微有一些小區別，例如在as3.0中引入了命名空間這一個概念，但是它并不支持委托、封裝及外部訪問等一些新概念。

3 設計原理

圖1的一組商品3D旋轉特效就是利用橢圓的性質，知道橢圓的兩個半軸，根據角度求得橢圓在軌跡上坐標點（見圖2），也就是橢圓的參數方程（見圖3）。這樣就使得一組商品里面的圖片沿著橢圓的軌跡改變坐標點，產生3D旋轉效果。另外可以再改變圖片的大小、透明度和深度，這樣使得效果看起來更逼真。

4 利用ActionScript代碼制作三維特效

通過ActionScript的強大功能，可以模擬例如雨雪、流星等奇妙的三維動畫視覺效果。下面我們分析一個具體的例子：商品3D旋轉特效。

4.1 制作思路

創建存放一組圖片的影片剪輯，其中包含了六幀，每一幀上有不同的圖片，為該影片剪輯設置屬性標識符mc（見圖4），以便用ActionScript來控制mc影片剪輯。在代碼中通過ActionScript來控制影片剪輯。使用for循環不斷控制影片剪輯的位置、大小和透明度，從而實現物體的3D旋轉特效。

4.2 ActionScript代碼分析

橢圓環繞效果，首先是加載一組圖片，讓其按一個橢圓形狀排列。為了演示方便，將圖片嵌入到mc影片剪輯中。這一步所需要的參數有以下：

var circlex=400； //橢圓中心點x坐標

var circley=200； //橢圓中心點y坐標

var disx=300； //橢圓在x 軸上的截距

var disy=100； //橢圓在y 軸上的截距

for （var i=0； i<=5； i++） //附加一組圖片，6個實例

{ attachMovie（"mc"， "mc"+i， i）；

_root["mc"+i].gotoAndStop（i）；

_root["mc"+i].cita=i*60； //變量cita表示實例在圓周上的角度

}

根據離心角的角度通過橢圓參數方程計算出此刻圖片位于橢圓軌跡上的坐標點：

x=circlex+disx*cos （_root["mc"+i].cita）

y=circley+disy*sin （_root["mc"+i].cita）

這樣可以很方便的使圖片實現橢圓排列效果。實現代碼如下：

for （var i=0； i<=5； i++）

{ with （_root["mc"+i]）

{ _x=disx*Math.cos（_root["mc"+i].cita/180*Math.PI）

+circlex；

_y=disy*Math.sin（_root["mc"+i].cita/180*Math.PI）

+circley；

}

}

接下來就是讓圖片隨著圓圈移動了，這個更簡單，不斷的增長圓周上的角度_root["mc"+i].cita的值即可。如果圖片就這樣按著橢圓軌跡移動，雖然可以看，但是效果遠沒有那么真實。這時，我們就需要對元件進行一些透視處理了。

透視處理的技巧有很多，這里我們只關注兩點，就是大小與不透明度。當物體遠離時很變小，會變得模糊，當物體離近時會變大，很變得清晰。顯然，我們就可以改變一下元件的scalex，scaley與alpah屬性，改變多少呢，我們在這里可以做一下簡單的處理。假設物體移動的距離范圍為0～2*disy，也就是橢圓的短軸長度，那么物體的實際位置距離應該是_root["mc"+i]._y+disy了。那么我們可以把（_root["mc"+i]._y +disy）/（2*disy） 當作物體的scale與alpha占實際大小的比率。但這樣一來還會產生問題，也就是當物體移動或接近到_root["mc"+i]._y的時候，那么scale與alpha值就為0或者接近0了，這時候物體就看不見了。我們希望看到的是物體在遠端的效果，也希望看到物體很靠近我們時要變得比實際大，這里就需要兩個參數，一個是muchscale，用來設定物體顯示出來時的基本倍數，另一個是lowest，用來規定物體到最小應該為多大，不透明度應該為多少（當然，是按比例來算）。于是我們可以得到下面的控制物體變化的公式：

_xscale=（（_y-circley+disy）/（2*disy））*muchscale+lowest；

_yscale=（（_y-circley+disy）/（2*disy））*muchscale+lowest；

_alpha=（（_y-circley+disy）/（2*disy））*muchscale+lowest；

5 結束語

Flash成為互聯網上最流行的動畫格式，是由于它占用存儲空間非常小這一特性，而通過采用Flash格式來降低三維動畫文件的大小就成了行之有效的方法，這就促使三維技術有一個應用前景非常廣闊的發展設想。把這項技術應用在電商行業領域可提升用戶體驗，滿足用戶的視覺需要，能在日趨激烈的電商競爭中贏得先機。本文設計的基于flash技術的商品3D旋轉特效，還是比較基礎和粗糙的，還有很多地方可以改進，例如，可以加入鼠標的交互，當鼠標移到上面不同位置產生加速，減速，改變方向，改變橢圓中心等等。這些將作為后續改進的方向。

參考文獻（References）：

[1] 王立英.基于Flash的在線三維商品展示系統的研究與實現[D].電子科技大學碩士學位論文，2011.

[2] 李學鋒.基于Papervision3D的在線產品展示技術研究[J].襄樊學院學報，2009.8.

[3] 劉民，萬江平.基于Flash 3D的在線虛擬漫游系統設計與實現[J].計算機時代，2014.5.

[4] 何偉明，羅立宏.基于Flash的三維商品展示[J].廣東工業大學學報（社會科學版），2009.B6：317-318

[5] 袁澤政，淺議網絡三維技術在電子商務中的作用[J].對外經貿實務，2003.11：24-25