VIZRT在電視新聞類節(jié)目中的交互應(yīng)用案例分析

郭軼君

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

1 綜述

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

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

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

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

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

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

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

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

圖3 3.15大型直播，觸摸大屏微博互動界面

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

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

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

在場景腳本中創(chuàng)建這樣一個函數(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í)際交互過程中，我們需要確定當(dāng)前觸摸屏處于哪個狀態(tài)，所以變量startpos用來代表當(dāng)前的狀態(tài)名稱即當(dāng)前動畫中stop點(diǎn)的名稱。而我們將要切換到的狀態(tài)則由所點(diǎn)擊的圖標(biāo)來表明，所以只要在相應(yīng)的圖標(biāo)代碼中調(diào)用該函數(shù)即可以獲得該數(shù)據(jù)，這個函數(shù)所要解決的最后一個問題就是如何獲取當(dāng)前狀態(tài)變量。回想切換邏輯的原理，其實(shí)我們只需要當(dāng)時間線播放到某一個狀態(tài)時通過命令來表明此時的狀態(tài)即可，那么將這個命令寫在與stop點(diǎn)位置一致的命令關(guān)鍵幀上即可，如圖6。

圖6

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

圖7

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

2.2 微博交互算法思路分析

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

sub gotodetail()

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

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

end sub

以上代碼用來控制彈出動畫的正向播放。

sub gotodetail_reverse()

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

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

end sub

用來控制彈出動畫的逆向播放。

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

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

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

pos_Down=pos.y

pos_Ini=position.y

end sub

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

以第一條為例

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

gotodetail()

else

gotodetail_reverse()

end if

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

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

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

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

sub setout (boolean b)

out =b

end sub

Function getout

getout=out

End Function

為視窗制作一段彈出動畫 direcort VIDIO。

在開始處寫入命令 THIS_SCENE*SCRIPT*INVOKE setout false；

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

在包含視窗的Container中編寫腳本：

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

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

sub OnLButtonDown()

dim va as string

va =“VIDIO”

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

stage.finddirector(va).continueanimation()

end sub

2.4 微博板塊效果升級算法分析

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

取得系統(tǒng)的時間數(shù)據(jù)通過回調(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ù)逐場執(zhí)行程序，通過變量push對手指按下的時間進(jìn)行判斷，frame將存儲時間值。當(dāng)手指松開，在函數(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

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

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

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

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

這里我們需要通過手指按下的坐標(biāo)、手指滑動的坐標(biāo)的插值來計算圖形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()將逐場返回手指的坐標(biāo)值儲存在實(shí)參pos中。這樣在該回調(diào)函數(shù)中diff將存儲不斷變化的手指沿X軸的變化值。Scene.findcontainer("PI").rotation.y=Init_rot+diff，最后將初始的餅圖旋轉(zhuǎn)值與diff值簡單相加。通過手指滑動就可以控制餅圖的Y軸旋轉(zhuǎn)屬性。

3 結(jié)論

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

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

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

[3]彼得斯. Flash ActionScript 3.0 動畫高級教程[M].北京：人民郵電出版社，2010.