徐曉

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

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

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

1 FLASH動(dòng)畫(huà)特點(diǎn)

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

2 ActionScript概述

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

3 設(shè)計(jì)原理

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

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

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

4.1 制作思路

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

4.2 ActionScript代碼分析

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

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

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

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

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

for （var i=0； i<=5； i++） //附加一組圖片，6個(gè)實(shí)例

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

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

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

}

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

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

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

這樣可以很方便的使圖片實(shí)現(xiàn)橢圓排列效果。實(shí)現(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；

}

}

接下來(lái)就是讓圖片隨著圓圈移動(dòng)了，這個(gè)更簡(jiǎn)單，不斷的增長(zhǎng)圓周上的角度_root["mc"+i].cita的值即可。如果圖片就這樣按著橢圓軌跡移動(dòng)，雖然可以看，但是效果遠(yuǎn)沒(méi)有那么真實(shí)。這時(shí)，我們就需要對(duì)元件進(jìn)行一些透視處理了。

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

_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é)束語(yǔ)

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

參考文獻(xiàn)（References）：

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

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

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

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

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