基于flash技術(shù)的商品3D旋轉(zhuǎn)特效研究

徐曉

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

關(guān)鍵詞： 3D旋轉(zhuǎn)； Flash技術(shù)； ActionScript技術(shù)； 影片剪輯； 用戶體驗

中圖分類號：TP37 文獻標(biāo)志碼：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 引言

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

1 FLASH動畫特點

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

2 ActionScript概述

ActionScript是由Macromedia為Flash這個產(chǎn)品開發(fā)的，它原來是一種非常通俗易懂的腳本語言，現(xiàn)在升級到版本ActionScript3.0，它是一種完全的面向?qū)ο蟮木幊陶Z言，功能非常強大，包含的類庫非常多，語法和JavaScript比較相似，經(jīng)常用在Flash娛樂性、交互性、網(wǎng)頁開發(fā)、實用性開發(fā)和Internet應(yīng)用程序開發(fā)。ActionScript 2.0實際上是as1.0的升級版本，第一次將面向?qū)ο蟮某绦蛟O(shè)計引入到Flash中，但它并不是完全的面向?qū)ο蟮恼Z言，只是在編譯過程中支持面向?qū)ο笳Z言的語法。ActionScript 3.0則是一個完全面向?qū)ο蟮恼Z言，且as3.0并不是as2.0的簡單升級，它們完全是兩種不同思想的語言。as3.0全面采用了面向?qū)ο蟮乃枷?，而as2.0只是停留在面向過程這一階段，as2.0和as3.0就好比VB和C#。在as3.0里，就可以看到j(luò)ava和c#的影子，的確這些語言大部分的思想都是一樣的，只是稍微有一些小區(qū)別，例如在as3.0中引入了命名空間這一個概念，但是它并不支持委托、封裝及外部訪問等一些新概念。

3 設(shè)計原理

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

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

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

4.1 制作思路

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

4.2 ActionScript代碼分析

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

var circlex=400； //橢圓中心點x坐標(biāo)

var circley=200； //橢圓中心點y坐標(biāo)

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表示實例在圓周上的角度

}

根據(jù)離心角的角度通過橢圓參數(shù)方程計算出此刻圖片位于橢圓軌跡上的坐標(biāo)點：

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

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

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

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的值即可。如果圖片就這樣按著橢圓軌跡移動，雖然可以看，但是效果遠沒有那么真實。這時，我們就需要對元件進行一些透視處理了。

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

_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 結(jié)束語

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

參考文獻（References）：

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

[2] 李學(xué)鋒.基于Papervision3D的在線產(chǎn)品展示技術(shù)研究[J].襄樊學(xué)院學(xué)報，2009.8.

[3] 劉民，萬江平.基于Flash 3D的在線虛擬漫游系統(tǒng)設(shè)計與實現(xiàn)[J].計算機時代，2014.5.

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

[5] 袁澤政，淺議網(wǎng)絡(luò)三維技術(shù)在電子商務(wù)中的作用[J].對外經(jīng)貿(mào)實務(wù)，2003.11：24-25