跳至主要內容
全部系列2. 進階課程 / Advanced Topics5. 設定元件進場動畫
5.1 互動行為控制
5.1 互動行為控制

學習如何在不同畫布之間切換，讓畫面變化更豐富

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

歡迎使用 BRICKS ，此教學涵蓋互動控制的第一步 : 互動行為控制，只要完成此章節內容，即可輕鬆學會 BRICKS 雲端智慧顯示動態控制的使用。

🕐 此篇教學操作預計花費時間：2～3 分鐘

  • 步驟一『新增一塊新畫布』

    從左方最上層的 Main(Root) 點擊 [ ＋ ] 新增並命名新的 Canvas 畫布，並點擊 [ New ] 確認新增。

    Create a new Canvas

  • 步驟二『在新畫布上新增底色方塊』

    1. 在左方的層級中找到剛剛新增的畫布，點擊右方的 [ + ] 新增一個 Rect 方塊

    2. 使其和 Application 應用程式長寛一致，從右方屬性中設定［ Background Color ］。

      Setting Brick background color

  • 步驟三『設定畫布自動切換』

    1. 點擊新的畫布 Canvas ，找到右方的 Showing Timeout 設定停留在此畫布的時間，此處是以毫秒為單位，每1000毫秒等於1秒。

    2. 設定好停留時間後，在［ Next Canvas ID ] 的選項中，選擇要切換過去的 Canvas 畫布名稱，這裡設定成返回顯示成最初製作的 Main 主畫布。

    3. 此時試著播放預覽，會發現顯示畫面停留在主畫布，並未顯示新增的第二塊畫布，那是因為預設仍會從主畫布開始播放，而我們未在主畫布中設定切換到第二塊畫布的機制，下個步驟就來設定透過點擊事件來觸發切換畫布。

      Canvas showing timeout & next Canvas ID

  • 步驟四『設定點擊行為』

    先點擊主畫布上的任一個物件，從右方屬性變數中，找到最下方的事件 Event 並設定 [ On Press ] 的行為，On Press 代表使用者點擊該物件時會觸發的事件。

    Setting On Press Event

  • 步驟五『設定事件行為內容』

    點擊 On Press 的 [ Edit ] 按鈕後，會開啟行為設定介面，此時從下方的 [ New Action ] 選擇想要觸發點擊行為後發生的動作，請在清單中尋找 [ CHANGE CANVAS ] 的更換畫布動作。

    Setting On Press Event to Change Canvas


    設定好動作之後，請至上方的選擇動作屬性 Select Action Property 中選擇 [ Canvas id ]。

    Choice Change Canvas Event property


    接著在指定 id 的欄位中選擇想要切換的畫布 Canvas，請設定為之前新增的畫布。

    Choice Change Canvas Event to target Canvas


    設定完成之後，點擊下方的 [ Save ] 按鈕儲存，並點擊播放預覽，試著點擊剛剛設定點擊行為的物件，看看是否會觸發切換到新畫布的流程，並且新畫布是否會停留設定的秒數後回切換回主畫布呢？

    若點擊沒有反應，有可能是設定的物件上下層級太低，被其他物件遮擋，試著調整上下層級再播放預覽試試！

    Change layer

  • 恭喜成功完成第一個顯示應用程式


    下一小節將帶您認識轉場動畫特效

觀看下一節

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

是否回答了您的問題？