為了節約成本，甜品培訓老師想在授課時通過幻燈片中的下拉菜單、複選框等交互功能，實現冰激淩各種原料的添加及色彩變化。這種交互功能在不涉及到代碼的情況下，利用Articulate Storyline就很容易實現（圖1）。

1. 構造冰激淩

在PPT中利用自選圖形，通過“合并形狀”中的聯合、組合、拆分、相交、剪除等，生成所需要的圖形。打開Articulate Storyline 3并新建一個項目，雙擊無标題幻燈片，右擊設置它的背景，将PPT幻燈片中創建好的圖形複制粘貼到Articulate Storyline 3幻燈片中，再将這些圖形按一定的層次結構進行組合，拼出完整的冰激淩樣式（圖2）。

2. 設置食材狀态

選定需要設置變化狀态的圖形。選擇“狀态”選項卡，點擊“編輯狀态”，再點擊“重複狀态”，狀态名稱設置為“咖啡色”，點擊“添加”，選擇添加的這個狀态，點擊“格式”選項卡，再點擊“重新着色”，選中所需要的顔色即可。同樣操作，需要幾種狀态就再重複幾次狀态并更改顔色，最後點擊“編輯狀态完成”。同樣道理，其他食材的狀态根據需要也是這樣設置（圖3）。

小提示： 在設置狀态時，不光可以改變食材的顔色，也可以改變食材的樣式。

3. 構建下拉菜單

首先，插入一個文本框，輸入臨時文本，設置為白色填充、黑色字體，用來存放下拉菜單所選的值；複制這個文本框，更改文本内容作為下拉菜單的第1項，選中剛複制出的文本框，選擇“狀态”選項卡，點擊“編輯狀态”，再點擊“重複狀态”，點擊狀态名稱處的下拉箭頭選擇“懸停”，點擊“添加”，将文本框設置為灰色填充、白色字體，最後點擊“編輯狀态完成”；根據所需菜單多少複制這個菜單項，将内容進行相應的更改；将這些菜單項與存放所選值的那個文本框上下緊鄰、左對齊。再将這幾個菜單項選中（不包括存放所選值的那個文本框），進行組合、剪切，在“幻燈片層”處點擊“新建層”，雙擊新建層，将層名稱更改為“菜單1”，在新建的層中粘貼。新建觸發器，在彈出窗口操作處選擇“更改以下項目的狀态”，對象上處選擇“文本框1”（即菜單第1項），目标狀态處選擇“懸停”，時間處選擇“鼠标懸停”，對象處選擇“文本框1”，勾選“在鼠标離開後恢複”，這樣就實現了當鼠标懸停在菜單第1項時，菜單由白底黑字變成為灰底白字。以此類推，其他的菜單效果也是這樣設置（圖4）。

接下來，在“幻燈片層”處點擊“基礎層”，選擇“插入”選項卡，點擊“标記→向下箭頭5”，在存放所選值的那個文本框右側畫出一個向下的箭頭标記，将這個标記的标簽填充設置為“無填充”，标簽邊框設置為“無輪廓”。新建觸發器，在彈出操作處選擇“顯示圖層”，圖層處選擇“菜單1”，時間處選擇“用戶單擊”，對象處選擇“标記1”，這樣當點擊向下箭頭時，菜單就會以動畫的形式顯示出來。

切換到“菜單1”層，新增觸發器，在彈出窗口操作處選擇“隐藏圖層”，圖層處選擇“此圖層”，時間處選擇“用戶單擊”，對象處選擇“文本框1”，這樣當點擊文本框1時，菜單就會隐藏起來。當然，點擊其他菜單項後隐藏總菜單的方法也是這樣設置。

點擊“觸發器”面闆中的“管理項目變量”，添加1個變量，變量名稱為“菜單1選項”，類型為“文本”，值為“0”。新增觸發器，在彈出窗口操作處選擇“調整變量”，變量處選擇“菜單1選項”，運算符處選擇“=分配”，值處選擇“值”，輸入“粉紅色”，時間處選擇“用戶單擊”，對象處選擇“文本框1”，這樣當點擊文本框1時（即菜單第1項），變量的值就變成了“粉紅色”。點擊其他菜單項後變量值的更改也這樣設置。

切換到基礎層，選中存放所選值的那個文本框，點擊“插入→引用”，在彈出窗口選中變量“菜單1選項”，确定後将文本框中的臨時值删除，保留百分号及之間的部分。這樣，這個文本框中變會顯示變量“菜單1選項”的值了。其他菜單的制作方法與之類似（圖5）。

4. 交互設置

切換到基礎層，利用文本框為每個下拉菜單添加标簽說明，點擊“插入→輸入”，插入所需要的複選框。切換到“菜單1”層，新增觸發器，操作處選擇“更改以下項目的狀态”，在對象上處選擇“圖片1”（即代表冰激淩的圖片），目标狀态處選擇“咖啡色”，時間處選擇“用戶單擊”，對象處選擇“文本框2”。這樣，當點擊菜單中的“咖啡色”時，圖片1的狀态就變成了設置好的咖啡色狀态。以此類推，其他圖片的變色效果也這樣設置。

選中代表水果的那個圖片（如圖片6），将它的初始狀态設置為“隐藏”；新增觸發器，操作處選擇“更改以下項目的狀态”，在對象上處選擇“圖片6”（即代表冰激淩的圖片），目标狀态處選擇“正常”，時間處選擇“狀态”，上處選擇“複選框3”，選擇“是”、“已選中”；再新增觸發器，操作處選擇“更改以下項目的狀态”，在對象上處選擇“圖片6”（即代表冰激淩的圖片），目标狀态處選擇“隐藏”，時間處選擇“狀态”，上處選擇“複選框3”，選擇“不是”、“已選中”。這樣，當勾選複選框3時就顯示圖片6（即水果），不選中時就隐藏圖片6。以此類推，其他需要複選框控制顯、隐效果的方法與上述設置類似（圖6）。

最後，點擊“發布”，設置好發布文件夾，點擊“發布”按鈕就可以了。

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