tft每日頭條

 > 生活

 > 如何在幻燈片裡做一個倒計時

如何在幻燈片裡做一個倒計時

生活 更新时间:2024-08-22 09:19:36

在幻燈片中制作倒計時效果,一般是輸入若幹文本框,每個文本框中放入連續不同的數字,設置它們完全重合,再設置為按一定的時間出現和消失,從而實現倒計時效果。此種方法至少有兩個缺點,一是制作費時費力,二是倒計時時間固定,如果想更改還得重新制作,毫無交互性。若使用Articulate Storyline 3軟件,利用變量制作交互式的倒計時效果,不僅制作簡單,而且倒計時時間可靈活輸入,交互性非常強(圖1)。接下來我們就學習它的制作方法。

如何在幻燈片裡做一個倒計時(幻燈片中如何自定義倒計時)1

1. 設計倒計時界面

打開Articulate Storyline 3,新建一個項目。在“故事視圖”狀态,雙擊“無标題幻燈片”進入編輯窗口。在空白處右擊,選擇“設置背景格式”,在彈出窗口設置好所需要的背景;選擇“插入”選項卡,點擊“滑塊”選擇喜好的滑塊樣式,在幻燈片合适位置畫出一個滑塊控件,選中它後切換到“設計”選項卡,設置其開始為0,結束為90,初始為0,步長為1,變量處使用默認的“滑塊1”(上述參數可按需調整);選擇“格式”選項卡,按需設置滾動塊和軌道的填充、邊框效果等。在滑塊的右側插入一個文本框,輸入“123”,設置好其大小、字體、顔色等樣式,用來顯示當前滑塊的值,即倒計時的總時間;利用形狀,在幻燈片中央畫一個正圓,右擊并選擇“編輯文本”,輸入456,設置其大小、字體、顔色等樣式,用來顯示當前不斷變化的倒計時時間;切換到“插入”選項卡,點擊“按鈕”,按需選擇按鈕樣式;在幻燈片合适的位置畫出一個按鈕控件,同樣按需選擇按鈕的樣式;再利用文本框在幻燈片中标注好所需要的文字說明(圖2)。

如何在幻燈片裡做一個倒計時(幻燈片中如何自定義倒計時)2

小提示:如果不使用滑塊,在“插入”選項卡中點擊“輸入→數據條目→數值條目字段”,在幻燈片中插入可用鍵盤輸入的控件。

2. 添加控制變量

在窗口右側的觸發器面闆中點擊“管理項目變量”,在彈出的窗口中點擊“ ”添加新變量,名稱設為djs,類型為“數字”,默認值為0,這樣項目中就有了兩個變量,一個是新建的djs,一個是上面創建滑塊時建立的變量“滑塊1”。

3. 添加時間控制動畫

利用形狀工具,在幻燈片的外面畫一個矩形。選中這個矩形,選擇“動畫”選項卡,點擊“添加動作路徑→線條”,“持續時間”處設置為1,即完成這個路徑動畫需要1秒(圖3)。

如何在幻燈片裡做一個倒計時(幻燈片中如何自定義倒計時)3

小提示:這個提示時間非常重要,它的設置标志着倒計時時間的準确程度。

4. 添加變量到幻燈片

切換到“插入”選項卡,選中幻燈片文本框中的123,點擊“引用”,在彈出的窗口中選擇變量“滑塊1”。這樣,當滑塊的值改變時,這裡的顯示也跟随改變。同樣,選中正圓中的456,點擊“引用”,選擇變量djs(圖4)。

如何在幻燈片裡做一個倒計時(幻燈片中如何自定義倒計時)4

5. 設置觸發器

在右側觸發器面闆中,點擊“新建觸發器”,在彈出窗口操作處選擇“調整變量”,變量處選擇djs,運算符處選擇“=分配”,值處選擇“變量”;選擇“滑塊1”,時間處選擇“用戶單擊”,對象處選擇“按鈕1”。這樣,當點擊“開始”按鈕時,滑塊的當前值就賦給了變量djs(圖5)。

如何在幻燈片裡做一個倒計時(幻燈片中如何自定義倒計時)5

新建觸發器,在彈出窗口操作處選擇“移動”,對象處選擇“矩形1”,路徑處選擇“直線動作路徑1”,時間處選擇“用戶單擊”,對象處選擇“按鈕1”。這樣,當點擊“開始”按鈕時,矩形就會沿直線路徑移動,移動時間是1秒。由于矩形放在了幻燈片外面,所以播放時是看不到的(圖6)。

如何在幻燈片裡做一個倒計時(幻燈片中如何自定義倒計時)6

在新建觸發器中雙擊矩形下的觸發器,在彈出窗口的操作處選擇“移動”,對象處選擇“矩形1”,路徑處選擇“直線動作路徑1”,時間處選擇“動畫完成”,對象處選擇“矩形1”,動畫處選擇“直線動作路徑1”(圖7)。

如何在幻燈片裡做一個倒計時(幻燈片中如何自定義倒計時)7

再新增觸發器,在彈出的窗口的操作處選擇“調整變量”,變量處選擇djs,運算符處選擇“-減去”,值處選擇“值”,輸入1,時間處選擇“動畫完成”,對象處選擇“矩形1”,動畫處選擇“直線動作路徑1”;點擊“顯示條件”,點擊“ ”,在彈出窗口選擇“變量”,如果處選擇djs,運算符處選擇“>大于”,類型處選擇“值”,值處輸入0(圖8)。

如何在幻燈片裡做一個倒計時(幻燈片中如何自定義倒計時)8

6. 作品發布

最後,點擊“發布”按鈕,在彈出的窗口中選擇Web選項卡,輸入标題,設置好發布文件夾發布即可。

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved