• <tr id="yyy80"></tr>
  • <sup id="yyy80"></sup>
  • <tfoot id="yyy80"><noscript id="yyy80"></noscript></tfoot>
  • 99热精品在线国产_美女午夜性视频免费_国产精品国产高清国产av_av欧美777_自拍偷自拍亚洲精品老妇_亚洲熟女精品中文字幕_www日本黄色视频网_国产精品野战在线观看 ?

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

    2014-09-12 11:04:28郭軼君
    關(guān)鍵詞:視窗關(guān)鍵幀圖標(biāo)

    郭軼君

    (江蘇電視臺 新聞中心,南京 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.

    猜你喜歡
    視窗關(guān)鍵幀圖標(biāo)
    視窗
    工會博覽(2022年33期)2023-01-12 08:53:38
    視窗
    工會博覽(2022年17期)2022-07-15 07:26:14
    Android手機(jī)上那些好看的第三方圖標(biāo)包
    基于改進(jìn)關(guān)鍵幀選擇的RGB-D SLAM算法
    視窗
    中國水利(2017年9期)2017-06-07 08:23:27
    中國風(fēng)圖標(biāo)設(shè)計
    電影評介(2016年24期)2017-01-04 05:41:44
    基于相關(guān)系數(shù)的道路監(jiān)控視頻關(guān)鍵幀提取算法
    基于聚散熵及運(yùn)動目標(biāo)檢測的監(jiān)控視頻關(guān)鍵幀提取
    有意思的廁所圖標(biāo)
    讀者(2015年13期)2015-05-14 11:41:05
    論“關(guān)鍵幀”在動畫制作中的作用
    华安县| 邳州市| 七台河市| 南通市| 滕州市| 佛教| 清丰县| 巴林左旗| 安西县| 农安县| 泽州县| 新源县| 武乡县| 伊宁市| 安岳县| 新建县| 临汾市| 东光县| 蓬安县| 宜昌市| 清河县| 南和县| 襄樊市| 洞口县| 金湖县| 荣昌县| 横山县| 华蓥市| 阿拉善盟| 铜川市| 桐柏县| 太湖县| 错那县| 喜德县| 江西省| 米易县| 晋江市| 务川| 大安市| 富宁县| 迁安市|