跳至主要內容
全部系列1. 基礎教學 / Basics3. 基礎元件
3.2 多媒體視覺方塊 (圖片、影片)
3.2 多媒體視覺方塊 (圖片、影片)

學習如何建置媒體投遞箱上傳媒體素材,並在應用程式中建立圖片及影片方塊

BRICKS TOOLS avatar
作者:BRICKS TOOLS
3 年前已更新

歡迎使用 BRICKS ,此教學涵蓋基礎 Brick 的第二步 : 學習基礎多媒體視覺方塊的設定,只要完成此章節內容,即可輕鬆學會 BRICKS 雲端智慧顯示基本 Bric 的使用。


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

  • 步驟一『建立媒體投遞箱』

    上一小節教學如何使用方塊元件,但若是想要放置圖像和影片怎麼辦呢?沒關係 BRICKS 的 Media 投遞箱能滿足這些需求,請先存檔,並返回 Workspace 資訊頁切換至 [ MEDIA ] 頁籤,初次建立需點擊畫面中間的 [ Enable ] 後,再選擇左下角 [ New Box ] 來新增一個新的 Media 投遞箱。

    一個投遞箱能放置多個及多種類的媒體素材,因此可以善用投遞箱的命名來分類管理您的媒體素材。

    Create a new Media Box

    Naming Media Box

  • 步驟二『上傳你的媒體素材』

    從建立好的 Media 投遞箱中,點擊 [ Upload ] 上傳一張圖片及影片。

    Media upload page

    上傳媒體素材有以下幾種管道,這裡可以依照手邊有的影片及圖片素材選擇上傳方式,上傳完成後返回應用程式。

    1. My Device 我的電腦資料夾

    2. Google Drive 雲端硬碟

    3. Link 網路素材連結

    4. Camera 從電腦攝影機中拍攝

    5. Screencast 錄製螢幕

      Choice upload method

      記得要等上傳完成後按 [ Done ]。

      Confirm Media upload complete

  • 步驟三『在應用中建立圖片及影片 Brick』

    從 Main Canvas 新增一個 Image 及一個 Video Brick,其 Brick 元件的長寬可依照素材比例設定。例如圖片是500*300時,可依照 Canvas 的大小設定為 5*3或25*15等比例的 Grid 長寬。

    Create a Image Brick

    在圖片及影片的 Brick 屬性變數中找到 [ Path ] 這項,並點擊右方的按鈕開啟 Media 投遞箱的選擇介面。

    Setting Image Bricks Media Path

    選擇建立的 Media 投遞箱,點擊相對應的媒體素材,並點擊想放置的素材尺寸。在投遞箱中,所有上傳的素材都會轉換成 BRICKS 相容的格式,並且會建立不同大小的比例供選擇。

    Select Media Asset

  • 步驟四『調整並檢視素材位置』

    記得點擊右上角的儲存按鈕後在裝置上檢視素材是否正確呈現,也可選擇播放預覽確認,也同樣可以針對圖片及影片的元件磚屬性變數去點擊觀看說明,嘗試改變設定了解屬性變數的用途。

    Preview BRICKS Application

  • 恭喜學會了多媒體視覺方塊的基本概念


    下一小節將帶您認識可控向量動畫。

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

是否回答了您的問題?