Axure 9 教程:如何做跑馬燈廣告、彈幕

4 評論 4709 瀏覽 7 收藏 7 分鐘

怎么在Axure中,完成跑馬燈廣告,以及彈幕效果呢?一起來看看~

方案1:所需元件:1個動態(tài)面板內(nèi)含1個文本,動態(tài)面板控制文本顯示區(qū)域

(動態(tài)面板就是一個xy坐標(biāo)軸,00代表與之接觸初始位,正值時元件顯示為負(fù)則隱藏。)

如何實現(xiàn)使文字從左到右移動?第1時間肯定想到的是移動,那讓這個移動那循環(huán)起來就是跑馬燈廣告。

條件設(shè)置:

  • 添加頁面[載入時]用例,移動文本并設(shè)置事件循環(huán);
  • 為每個文字添加[移動時]用例,設(shè)置完全移出時回到初始值。

操作步驟:

第1步,在頁面上添加[載入時用例],用例設(shè)置如下。因為是往左移所以(-4,0),如果是往上移則是(,0-4),往哪邊移則哪些設(shè)為負(fù)數(shù),具體值可以調(diào)整。

第2步,如上一直往左移,但是當(dāng)文本完全移出時則一直顯示空白。所以我們還得設(shè)置當(dāng)文本移動時回歸初始始位置。在文本部件添加[移出時]用例,設(shè)置如下。

文字完全移出有多種表達方式:

1)用位置標(biāo)識,不在面板可顯示區(qū)域內(nèi);

2)用跟目標(biāo)面板有沒有接觸,元件范圍表示,沒有接觸即代表完全移出。

以下為了方便我直接用數(shù)字表示,-200這個值應(yīng)該是該文本部件的1/2左右,我為了方便直接顯示具體數(shù)值,也可以用函數(shù)LVAR1.width/2表示。如果發(fā)現(xiàn)不夠完美,可以再調(diào)整數(shù)值(最后一半文字移動時因為沒有內(nèi)容往前補充所以會有一段空白,所以需要修改值)。

按這種方式可以實現(xiàn)往左/右/上/下移動,操作邏輯一致。 如果是多個文本一起移動,就需要添加多個文本并需要在每個文本上加移出時用例,操作繁瑣。有沒有簡單的模板可用了?把文本部件轉(zhuǎn)化為動態(tài)面板就可以解決重復(fù)操作問題了。

點擊預(yù)覽

方案2:所需元件:1個動態(tài)面板內(nèi)含2個文本面板

條件設(shè)置:

  • 添加頁面[載入時]用例,移動文本面板并設(shè)置事件循環(huán);
  • 為每個文本面板添加[移動時]用例,設(shè)置完全移出時回到初始值。

操作步驟:

第1步:頁面載入時移動多文本動態(tài)面板,并設(shè)置等待后重新載入該事件實現(xiàn)循環(huán)。

第2步:為每個文本動態(tài)面板添加[移動時]用例,設(shè)置如下。元件的左邊位置小于元件的寬度,代表元件完全移出外部的顯示區(qū)域( (0.0)是該文本移動到起始位置,如果想一段間隙顯示完后出現(xiàn)一小段空屏,可調(diào)整x值,如果設(shè)置x值設(shè)為該部件寬度,則會達到一個顯示完一屏再顯示第2屏的感覺。

建議以上用動態(tài)面板做,做成元件后可以直接復(fù)用,跑馬燈、滾屏消息、彈幕等都可以應(yīng)用。 再以上基礎(chǔ)上一般的廣告會有一種效果,鼠標(biāo)移入時會暫停,點擊后可跳轉(zhuǎn)。

點擊預(yù)覽

鼠標(biāo)移入時暫停播放,移出時自動播放。

所需元件:1個動態(tài)面板(控制文本顯示區(qū)域),內(nèi)含1個文字動態(tài)面板。

條件設(shè)置:

  1. 引入全局變量賦1,控制是否暫停;(新增) 統(tǒng)一鼠標(biāo)移入為0,移出為1。
  2. 添加頁面[載入時]用例并設(shè)置載入循環(huán)(同上),條件:變量值和文本面板是否全部移出。
  3. 調(diào)置動態(tài)面板移出時用例,將該元件移至最后。
  4. 為每個文字添加[移入移出]用例,并賦變量值;設(shè)置單擊時跳轉(zhuǎn)鏈接(新增)

操作步驟:

第1步:新建全局變量并賦值,也可用局部變量。

第2步:頁面載入時移動多文本動態(tài)面板,設(shè)置變量值為1且未完全移出時移動文字動態(tài)面板,如下。 我這個axure版本有問題條件設(shè)置時不能設(shè)置&語句,注意看第2種情形是或者。

第3步:為每個文字動態(tài)面板設(shè)置[移動時]用例,如下。

第4步:為單獨每個文字部件單獨添加用例。

點擊預(yù)覽

 

本文由 @流素 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 你好,能分享下rp文件嘛?我這里循環(huán)的時候無法循環(huán),也是按照你寫的文檔操作的,不知道是哪里的細節(jié)出了問題

    回復(fù)
  2. 請問你這個案例原型rp文件可以發(fā)出來交流一下嗎,我設(shè)置以后沒有回到原點沒有循環(huán)起來,想看一下你的交互,不方便百度云發(fā)的話,可以留一個聯(lián)系方式嗎,非常感謝

    來自重慶 回復(fù)
  3. 預(yù)覽密碼是?

    來自廣東 回復(fù)
    1. 123456,已經(jīng)取消了密碼

      來自浙江 回復(fù)