郭軼君

(江蘇電視臺(tái) 新聞中心，南京 210008)

1 綜述

在線包裝系統(tǒng)是一種新型的電視包裝手段，2000左右年進(jìn)入中國(guó)，但在歐美各國(guó)這項(xiàng)技術(shù)早已全面應(yīng)用，即使在東南亞各國(guó)也早已具備多年的成熟應(yīng)用經(jīng)驗(yàn)。

目前世界上得到業(yè)界認(rèn)可的有兩家大型在線包裝品牌，vizrt與奧威。下文以vizrt為例，闡述在對(duì)vizrt 本身運(yùn)行機(jī)制的深入理解的基礎(chǔ)上，進(jìn)行交互性開(kāi)發(fā)的應(yīng)用與研究，滿足更為廣泛的包裝需求。

2 交互式應(yīng)用，觸摸交互功能開(kāi)發(fā)

觸摸是主持人與設(shè)計(jì)師所設(shè)計(jì)的場(chǎng)景最直接交互方式，也是在線包裝交互性最外在的體現(xiàn)，那么如何實(shí)現(xiàn)這樣一個(gè)更為直觀的交互效果，其實(shí)思路與如何讓Operator(在線操控人員)更靈活地控制場(chǎng)景是同樣的道理，下面就來(lái)逐步講解本文的制作思路。

2.1 各板塊切換算法思路分析

該觸摸屏是江蘇電視臺(tái)購(gòu)買vizrt以來(lái)第一次在大型直播中應(yīng)用，也是本人第一次進(jìn)行觸摸屏開(kāi)發(fā)。由圖1-5可以看出，該觸摸場(chǎng)景共分為5個(gè)板塊，分別由紅色方塊標(biāo)出的五個(gè)圖標(biāo)控制。當(dāng)按下任意圖標(biāo)將由當(dāng)前場(chǎng)景切換為目標(biāo)場(chǎng)景。如初始界面為315直播的logo，當(dāng)按下第三個(gè)圖標(biāo)，logo將動(dòng)畫(huà)下場(chǎng)，同時(shí)微博將依次劃入畫(huà)面。在腳本中我們通過(guò)調(diào)用切換邏輯實(shí)現(xiàn)任意兩個(gè)狀態(tài)無(wú)縫動(dòng)畫(huà)轉(zhuǎn)換。

圖1 3.15大型直播，觸摸大屏起始界面

圖2 3.15大型直播，觸摸大屏視頻連線界面

圖3 3.15大型直播，觸摸大屏微博互動(dòng)界面

圖4 3.15大型直播，觸摸大屏圖片瀏覽界面

圖5 3.15大型直播，觸摸大屏餅狀統(tǒng)計(jì)圖界面

按照設(shè)計(jì)需求將trio中切換邏輯的思想轉(zhuǎn)移到觸摸場(chǎng)景中來(lái)為我而用。通過(guò)到了這樣一個(gè)命令(MAIN_SCENE*STAGE*DIRECTOR*＄logic GOTO_TRIO ＄" & startpos & " ＄" & newState)可以模擬切換邏輯中不同狀態(tài)之間的轉(zhuǎn)換動(dòng)畫(huà)，其中startpos newState為可以理解為當(dāng)前需要切換的兩組動(dòng)畫(huà)狀態(tài)名稱，當(dāng)此命令執(zhí)行，時(shí)間線將在director：logic中的兩個(gè)stop點(diǎn)：startpos 向 newState播放，這樣便實(shí)現(xiàn)了所需要展現(xiàn)的效果。

在場(chǎng)景腳本中創(chuàng)建這樣一個(gè)函數(shù)：

dim startpos as string

Sub transitionTo(newState as String)

startpos = scene.findContainer("aaa").geometry.text

SendCommand("MAIN_SCENE*STAGE*DIRECTOR*＄logic GOTO_TRIO ＄" & startpos & " ＄" & newState)

End Sub

由于在實(shí)際交互過(guò)程中，我們需要確定當(dāng)前觸摸屏處于哪個(gè)狀態(tài)，所以變量startpos用來(lái)代表當(dāng)前的狀態(tài)名稱即當(dāng)前動(dòng)畫(huà)中stop點(diǎn)的名稱。而我們將要切換到的狀態(tài)則由所點(diǎn)擊的圖標(biāo)來(lái)表明，所以只要在相應(yīng)的圖標(biāo)代碼中調(diào)用該函數(shù)即可以獲得該數(shù)據(jù)，這個(gè)函數(shù)所要解決的最后一個(gè)問(wèn)題就是如何獲取當(dāng)前狀態(tài)變量?；叵肭袚Q邏輯的原理，其實(shí)我們只需要當(dāng)時(shí)間線播放到某一個(gè)狀態(tài)時(shí)通過(guò)命令來(lái)表明此時(shí)的狀態(tài)即可，那么將這個(gè)命令寫(xiě)在與stop點(diǎn)位置一致的命令關(guān)鍵幀上即可，如圖6。

圖6

如圖7中我以第一個(gè)stop點(diǎn)為例標(biāo)出了命令設(shè)置datapool state為O這樣Data Text Pluging將這個(gè)由viz conmmand傳遞來(lái)的數(shù)據(jù)直接輸入到文字插件中，于是場(chǎng)景中的文字就變成了臨時(shí)存儲(chǔ)當(dāng)前狀態(tài)變量的容器。startpos = scene.findContainer("aaa").geometry.text將讀取此時(shí)的文字?jǐn)?shù)據(jù)。

圖7

其余stop點(diǎn)內(nèi)的命令關(guān)鍵幀填寫(xiě)的內(nèi)容于此類似。按照換邏輯的思想，各個(gè)狀態(tài)點(diǎn)之間的轉(zhuǎn)換動(dòng)畫(huà)需手動(dòng)制作，依照?qǐng)D6所示設(shè)定這5個(gè)狀態(tài)點(diǎn)，保證兩任意狀態(tài)直接相連。之后，在五個(gè)圖標(biāo)中分別調(diào)用transitionTo(newState as String)這個(gè)函數(shù)，這樣當(dāng)按下任意按鈕圖標(biāo)無(wú)論當(dāng)前狀態(tài)是什么，都將通過(guò)go to trio的命令驅(qū)動(dòng)當(dāng)前狀態(tài)與目標(biāo)狀態(tài)之間的動(dòng)畫(huà)發(fā)生。

2.2 微博交互算法思路分析

微博板塊將要實(shí)現(xiàn)的是在上下拖拽微博版的時(shí)候每當(dāng)其中一個(gè)字幕條到達(dá)一定的區(qū)域內(nèi)就自動(dòng)跳出，當(dāng)離開(kāi)這個(gè)區(qū)域時(shí)自動(dòng)跳回。首先為每個(gè)字幕條制作了跳出動(dòng)畫(huà)(所有字幕條都在同一個(gè)父層級(jí)之下，這樣保證了所有的字幕條擁有共同的相對(duì)坐標(biāo)系)，經(jīng)過(guò)測(cè)試為四個(gè)字幕條分別確定了5個(gè)區(qū)間。(-30，30)(-230，-80)(60，120)(120，230)

sub gotodetail()

stage.finddirector("a").reverse=false

stage.finddirector("a").continueanimation()

end sub

以上代碼用來(lái)控制彈出動(dòng)畫(huà)的正向播放。

sub gotodetail_reverse()

stage.finddirector("a").reverse=true

stage.finddirector("a").continueanimation()

end sub

用來(lái)控制彈出動(dòng)畫(huà)的逆向播放。

由于在彈出動(dòng)畫(huà)的開(kāi)始與結(jié)束位置設(shè)定了stop點(diǎn)。所以動(dòng)畫(huà)不會(huì)在范圍內(nèi)不停的循環(huán)正向播放，或逆向播放。

當(dāng)按下鼠標(biāo)，程序?qū)⒂涗洿藭r(shí)按點(diǎn)的坐標(biāo)值與當(dāng)前微博的坐標(biāo)值，用來(lái)計(jì)算拖拽結(jié)束后的相對(duì)位移。

sub OnButtonDown6DOF(button as Integer，pos as vertex，rot as vertex)

pos_Down=pos.y

pos_Ini=position.y

end sub

當(dāng)開(kāi)始拖拽的時(shí)候，微博的坐標(biāo)會(huì)相應(yīng)的發(fā)生變化position.y=pos_Ini+(pos.y-pos_Down)*0.78接下來(lái)利用之前測(cè)試好的區(qū)間，通過(guò)邏輯判斷可以激活各個(gè)字幕條的彈出動(dòng)畫(huà)。

以第一條為例

if position.y < 30 and position.y>-30 then

gotodetail()

else

gotodetail_reverse()

end if

當(dāng)手離開(kāi)屏幕，微博板塊將繼續(xù)滑動(dòng)一段距離，模擬物體的慣性。為此我們將定義一段微博的整體位移動(dòng)畫(huà)GX。通過(guò)函數(shù)sub GX()修改該動(dòng)畫(huà)的關(guān)鍵幀來(lái)模擬這樣的效果。起始關(guān)鍵幀將設(shè)置為微博板的當(dāng)前坐標(biāo)，并通過(guò)move函數(shù)取得的變量數(shù)據(jù)diff=pos.y-pos_Down

判斷手指離開(kāi)屏幕微博應(yīng)該往哪個(gè)方向繼續(xù)飄動(dòng)。

sub GX()

dim GX as director=stage.finddirector("GX")

GX.FindKeyframe("O").xyzvalue=position.xyz

if diff<0 then

GX.FindKeyframe("IN").xyzvalue=cvertex(position.x，position.y-12，position.z)

else

GX.FindKeyframe("IN").xyzvalue=cvertex(position.x，position.y+12，position.z)

end if

GX.startanimation()

end sub

最后在 OnButtonUp6DOF中調(diào)用函數(shù)GX

sub OnButtonUp6DOF(button as Integer，pos as vertex，rot as vertex)

if system.mousex <500 then

GX()

end if

end sub

2.3 視窗交互算法分析

視窗交互算法將要實(shí)現(xiàn)的效果是：三個(gè)視窗可以被同時(shí)拖動(dòng)，在松開(kāi)后自動(dòng)滑動(dòng)返回起始位置，每個(gè)視窗可以單獨(dú)彈出、彈入，三個(gè)視窗拖動(dòng)并彈回效果與微博拖動(dòng)算法類似。下面講解點(diǎn)擊效果，當(dāng)點(diǎn)擊一次視窗，視窗彈出，再次點(diǎn)擊視窗收回，這里有兩種方法可以用來(lái)實(shí)現(xiàn)這樣的效果。

1)通過(guò)邏輯判斷，設(shè)置一個(gè)布爾變量out，當(dāng)out為真代表視窗彈出，當(dāng)out為假表示視窗收回。 在場(chǎng)景腳本文件中建立這樣兩個(gè)函數(shù)來(lái)設(shè)置并返回視窗此時(shí)的狀態(tài)。

sub setout (boolean b)

out =b

end sub

Function getout

getout=out

End Function

為視窗制作一段彈出動(dòng)畫(huà) direcort VIDIO。

在開(kāi)始處寫(xiě)入命令 THIS_SCENE*SCRIPT*INVOKE setout false；

在結(jié)尾處寫(xiě)入命令 THIS_SCENE*SCRIPT*INVOKE setout true；

在包含視窗的Container中編寫(xiě)腳本：

Dim out as boolean

Sub OnLbuttonDown()

out=scene.script..getout

If out=false then

Scene.stage.finddirector.(“VIDIO”).reverse=false

Scnene.stage.finddirecor(“VIDIO”).startanimation()

else if out=true then

Scene.stage.finddirector(“VIDIO”).reverse=true

Scene.stage.finddirector(“VIDIO”).startanimation()

End sub

2)在動(dòng)畫(huà)VIDIO上制作三個(gè)關(guān)鍵幀分別為起點(diǎn)位置，彈出位置并且記錄一個(gè)stop點(diǎn)，第三個(gè)位置記錄起點(diǎn)位置關(guān)鍵幀與action關(guān)鍵幀寫(xiě)入命令THIS_SCENE*STAGE*DIRECTOR*VIDIO SHOW 0.0；這樣當(dāng)動(dòng)畫(huà)開(kāi)始播放，點(diǎn)一次時(shí)候由起點(diǎn)位置彈出并停止，繼續(xù)點(diǎn)擊將向第三個(gè)關(guān)鍵幀播放，回到了起始位置，同時(shí)利用命令action，將時(shí)間線也回零。

這樣只要始終CONTINUE ANIMATION 就可以保證兩次點(diǎn)擊的效果。在VIDIO上寫(xiě)入程序

sub OnLButtonDown()

dim va as string

va =“VIDIO”

Stage.finddirector("VIDIO").reverse=false

stage.finddirector(va).continueanimation()

end sub

2.4 微博板塊效果升級(jí)算法分析

當(dāng)松開(kāi)手指時(shí)候，微博版式將產(chǎn)生動(dòng)態(tài)的移動(dòng)效果，當(dāng)手指滑動(dòng)速度快時(shí)，微博版應(yīng)該產(chǎn)生更大的慣性繼續(xù)移動(dòng)比較遠(yuǎn)的距離，反之亦然。

取得系統(tǒng)的時(shí)間數(shù)據(jù)通過(guò)回調(diào)函數(shù)

sub OnExecPerField()

if push == false then

exit sub

else

frame=frame+1

text=cstr(frame)

dim con as container

con = Scene.FindContainer("text").GetChildContainerByIndex(0)

con.Geometry.Text=text

end if

end sub

該回調(diào)函數(shù)逐場(chǎng)執(zhí)行程序，通過(guò)變量push對(duì)手指按下的時(shí)間進(jìn)行判斷，frame將存儲(chǔ)時(shí)間值。當(dāng)手指松開(kāi)，在函數(shù)OnButtonUP6DOF()中，

sub OnButtonUP6DOF(button as Integer，pos as vertex，rot as vertex)

DF = pos.y-pos_Down

GX()

frame=0

end sub

所調(diào)用的GX()中將push設(shè)置為假。

con = Scene.FindContainer("text").GetChildContainerByIndex(0)

con.Geometry.Text=text

該段代碼將場(chǎng)數(shù)返回給Text插件，顯示在場(chǎng)景中，指示手指按下的時(shí)間。

GX()將在手松開(kāi)時(shí)，調(diào)用一段動(dòng)畫(huà)(該動(dòng)畫(huà)需要時(shí)間設(shè)置在某一個(gè)director之中)并修改其關(guān)鍵幀。

sub GX()

dim V as double

push=false

'速度系數(shù)

V=abs(DF/(frame))+1

if V>=130 then

V=130

end if

dim GX as director=stage.finddirector("GX")

GX.FindKeyframe("O").xyzvalue=position.xyz

if DF<0 then

GX.FindKeyframe("IN").xyzvalue=cvertex(position.x，position.y-23*V，position.z)

else

if DF>0 then

GX.FindKeyframe("IN").xyzvalue=cvertex(position.x，position.y+23*V，position.z)

end if

end if

GX.startanimation()

end sub

設(shè)置速度系數(shù)V是為了使得版式在松手之后合理的運(yùn)動(dòng)，DF/frame模擬了手指運(yùn)動(dòng)的平均速度。+1是為了控制之后關(guān)鍵幀的合理值否則將運(yùn)動(dòng)過(guò)快。DF存儲(chǔ)了手指的移動(dòng)數(shù)值，該數(shù)值通過(guò)正負(fù)符號(hào)來(lái)判斷手指是向上還是向下運(yùn)動(dòng)，并在確定方向之后合理的運(yùn)用與時(shí)間相關(guān)的速度系數(shù)V進(jìn)行簡(jiǎn)單的運(yùn)算得到末尾關(guān)鍵幀屬性，向下運(yùn)動(dòng)將減去一定的數(shù)值position.y-23*V，確保按照相應(yīng)的速度繼續(xù)沿下運(yùn)動(dòng)一段距離，反之position.y+23*V將模擬手指向上滑動(dòng)產(chǎn)生的慣性效果。當(dāng)GX()計(jì)算完成，在開(kāi)始下一次觸摸之前，我們需要將計(jì)算過(guò)的時(shí)間值回零，frame=0。

2.5 統(tǒng)計(jì)圖交互算法分析

最后實(shí)現(xiàn)的效果是餅狀圖交互，這個(gè)交互效果設(shè)計(jì)的比較簡(jiǎn)單，我們只是通過(guò)移動(dòng)手指使得餅狀圖形繞Y軸繞行。

這里我們需要通過(guò)手指按下的坐標(biāo)、手指滑動(dòng)的坐標(biāo)的插值來(lái)計(jì)算圖形ROTATEY的值。

sub OnButtonDown6DOF(Button as Integer，pos as vertex，rot as vertex)

Init_rot=Scene.findcontainer(“PI”).rotation.y

mouseDown = pos.x

end sub

首先取得餅圖的初始y軸旋轉(zhuǎn)值，Init_rot=Scene.findcontainer("PI").rotation.y

記錄手指按下的坐標(biāo)值mouseDown = pos.x

sub OnMove6DOF(Button as Integer，pos as vertex，rot as vertex)

diff=pos.x-mouseDown

Scene.findcontainer(“PI”).rotation.y=Init_rot+diff

end sub

函數(shù)OnMove6DOF()將逐場(chǎng)返回手指的坐標(biāo)值儲(chǔ)存在實(shí)參pos中。這樣在該回調(diào)函數(shù)中diff將存儲(chǔ)不斷變化的手指沿X軸的變化值。Scene.findcontainer("PI").rotation.y=Init_rot+diff，最后將初始的餅圖旋轉(zhuǎn)值與diff值簡(jiǎn)單相加。通過(guò)手指滑動(dòng)就可以控制餅圖的Y軸旋轉(zhuǎn)屬性。

3 結(jié)論

在線包裝的交互應(yīng)用有很廣闊的發(fā)展空間，且實(shí)現(xiàn)同樣的效果也可以由不同的算法實(shí)現(xiàn)。當(dāng)一個(gè)設(shè)計(jì)師熟練地掌握了腳本語(yǔ)言，結(jié)合自身對(duì)電視包裝的理解，發(fā)揮豐富的想象力，不僅僅可以將交互應(yīng)用在觸摸屏這樣的平臺(tái)。借用熟練的技術(shù)、靈活的思維，在線包裝應(yīng)用的方方面面都有交互的影子。作為一名在線包裝設(shè)計(jì)師需要考慮的不僅僅是構(gòu)圖、色彩、動(dòng)畫(huà)、質(zhì)感這些傳統(tǒng)的圖形設(shè)計(jì)問(wèn)題，更需要考慮并能付諸實(shí)現(xiàn)的是如何從多方面增強(qiáng)播控的交互性。

[1]Vizrt Artist User Manual：1059-1094.

[2]金斯利 休斯.VBScript程序員參考手冊(cè)[M].北京：清華大學(xué)出版社，2009.

[3]彼得斯. Flash ActionScript 3.0 動(dòng)畫(huà)高級(jí)教程[M].北京：人民郵電出版社，2010.