全部系列
4. 範例及專案教學 / Working Examples
(範例) 自動輪播影片
自動更新播放清單輪播範例實作教學 - Media Flow
自動更新播放清單輪播範例實作教學 - Media Flow

實作 MediaFlow + Slideshow 實現直接透過 Media 投遞箱更新 Slideshow 播放內容

BRICKS TOOLS avatar
作者:BRICKS TOOLS
一週前已更新

此範例將說明如何利用 Media Flow 處理器實現即時上傳檔案更新輪播內容。


🕐 此篇教學預計花費時間: 3~5 分鐘

你可選擇跟著影片製作或是依照下方教學一步步完成:

  • 步驟一:「建立放置輪播素材的 MediaBox」

    1. 切換至 MEDIA 頁籤,點擊左下角的[New Box]新增一個 MediaBox

    2. 取名 MediaBox 為 SlideMediaBox

    3. 點擊[Upload]上傳輪播素材

  • 步驟二:「透過 PropertyBank 快速建立 MediaFlow 處理器」

    切換回 APPLICATION 頁籤:

    1. 先從 Property Bank 點擊[+]

    2. 選擇[As Media Flow File List]並指定步驟一創建的 SlideMediaBox

    3. Passcode 的欄位留空,系統將自動替 MediaBox 建立一組授權用的 Passcode。

    4. 選擇[New]後即會自動新增一組連結完成的 MediaFlow 處理器及點擊素材的變數。

*關於 Meida Flow 處理器的各屬性定義可進入 處理器 - Media Flow 中查看詳細說明。

  • 步驟三:「建立 Slideshow 元件」

    1. 點擊 Canvas 右側的[+] 新增一個 Slideshow Brick 元件。

    2. 依照你的喜好在最右側 Properties 的 [Countdown]欄位設定 Slideshow 變換素材的速度。

    3. 點擊[Path]左側的鏈結,選擇步驟二創建已連結 MediaFlow 的 Property 變數。

    4. 依照喜好設定輪播素材的圖片延伸方式,選擇[Cover]會自動以不改變比例的大小延伸填滿 Slideshow 元件的大小。

*關於 Slideshow 各屬性定義可進入 輪播器 - Slideshow 元件 中查看詳細說明。

  • 步驟四:「設定 MediaFlow 處理器自動訂閱 MediaBox 更新」

    1. 切換至 Generator 下的 MediaFlow 處理器。

    2. 設定 Properties 中的 [Subscribe Box Change] 為 Yes ,這樣當 Media 投遞箱中的檔案刪除或更新時,處理器會自動更新至步驟二新增的變數。

  • 步驟五:「設定進入 Canvas 時自動下載 Media Flow 清單」

    為了讓 Media Flow 處理器能自動更新 Filelist 清單,需要在 Canvas 的 Enter 事件中新增一個 Media Flow 的 MEDIA FLOW FETCH 事件,這樣才能使 Media Flow 獲取 Media Box 的檔案清單。

  • 步驟六:「複製 Passcode 至 MediaBox 開啟獨立頁面」

    1. 切換至 Generator 下的 MediaFlow 處理器

    2. 到 Properties 中 Passcode 將自動生成的碼複製下來

    3. 切換至 MEDIA 頁籤,點擊[Edit]後,選擇最下方的[Copy Public Link]

    4. 在瀏覽器上新增頁面,貼上上一步複製的 MediaBox 公開連結

    5. 將前面複製的 Passcode 貼上網頁的輸入框,現在即可單獨從網頁上新增修改媒體素材,分享出去也不用怕別人更改到設定。

  • 步驟七:「在裝置上預覽並即新上傳或刪除檔案測試」

    綁定裝置後在裝置上預覽輪播效果,並可即時在 Media Box 的獨立網頁中上傳或刪除檔案測試裝置上的輪播是否會有更新。

  • 恭喜你完成了可自動更新清單的自動輪播應用程式。


下一章範例將帶你製作自動查詢互動機 。

若需要任何幫助,歡迎點擊右下角的對話圖示詢問,我們會盡快回覆您的問題

是否回答了您的問題?