Skip to main content

自動更新播放清單輪播範例實作教學 - Media Flow

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

BRICKS TOOLS avatar
Written by BRICKS TOOLS
Updated over 3 years ago

此範例將說明如何利用 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 的獨立網頁中上傳或刪除檔案測試裝置上的輪播是否會有更新。

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

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

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

Did this answer your question?