不用代碼,制作級聯(lián)菜單幻燈片
發(fā)布時間:2018-07-02 來源: 感恩親情 點擊:
1. 設計菜單樣式
打開Articulate Storyline 3并新建一個項目,雙擊無標題幻燈片,右擊設置它的背景色,在窗口右側的幻燈片層處,右擊基礎層,選擇“重命名”,命名為“主菜單”;利用“插入”選項卡“形狀”中的矩形,在幻燈片中插入所需要的主菜單項,右擊矩形,選擇“編輯文本”,輸入主菜單內容,設置好字體、字號及顏色等,利用對齊工具將所有主菜單項目頂端對齊(圖2)。
接下來,在幻燈片層處點擊“新建層”,新層命名為“菜單1子菜單”;選中該層,在幻燈片中利用矩形根據(jù)需要添加子菜單,排放整齊;再新建層,命名為“菜單2子菜單”,同樣用矩形插入所需要的子菜單;其他主菜單、子菜單的建立以此類推。如果子菜單下還包括子菜單,同樣利用新建層的方式添加。比如,“子菜單24”下又包括3個子菜單,可以在名稱為“菜單2子菜單”的層上相應菜單右側,利用自選圖表中的圖表添加代表還有子菜單的箭頭,同樣新建層,命名為“子菜單24子菜單”,利用矩形插入所需要的子菜單。這樣,級聯(lián)菜單的樣式就設計完成了(圖3)。
2. 添加交互效果
在窗口右側的“觸發(fā)器”面板中點擊“管理項目變量”,在彈出的窗口點擊“新建變量”,變量名稱為“weizhi”,類型為“文本”。這個變量就用來記錄當前所選擇的菜單(圖4)。
在“觸發(fā)器”面板點擊“新建觸發(fā)器”,在彈出的窗口向導中依次輸入:操作為“顯示圖層”,圖層為“菜單1子菜單”(即主菜單1的子菜單所在的圖層名),時間為“鼠標懸!保瑢ο鬄椤熬匦1”(即標簽為“主菜單1”的矩形),不要勾選“在鼠標離開后恢復”。這樣鼠標懸停在“主菜單1”時,它下面的子菜單就會顯示出來。鼠標懸停在其他主菜單項時的子菜單顯示也這樣設置(圖5)。
新增觸發(fā)器,在彈出的窗口依次選擇:操作為“調整變量”,變量為“weizhi”,運算符為“=分配”,值為“值”和“主菜單1”,時間為“鼠標懸!,對象為“矩形1”,不要勾選“在鼠標離開后恢復”。這樣,鼠標懸停在“主菜單1”時,變量“weizhi”的值就變成了“主菜單1”。同理,鼠標懸停在其他主菜單項時,變量“weizhi”的值的變化也是這樣設置(圖6)。
接下來是子菜單下級菜單的顯示設置。選定“菜單2子菜單”圖層,點擊“新建觸發(fā)器”,在彈出窗口的操作處選擇“顯示圖層”,圖層處選擇“子菜單24子菜單”(即子菜單24的下級菜單所在的圖層名),時間處選擇“鼠標懸!,對象處選擇“矩形4”(即標簽為“子菜單24”的矩形),不要勾選“在鼠標離開后恢復”。這樣鼠標懸停在“子菜單24”時,它下面的子菜單就會顯示出來。同時,還要更改變量“weizhi”的值為“子菜單24子菜單”(即子菜單的標簽)。在“子菜單24子菜單”圖層上右擊,選擇“屬性”,在彈出的窗口將“隱藏其他幻燈片層”前面的鉤去掉(圖7)。
選定“菜單1子菜單”圖層,新增觸發(fā)器,在彈出的窗口分別選擇:操作為“調整變量”,變量為“weizhi”,運算符為“=分配”,值為“值”和“子菜單11”(即子菜單標簽),時間為“用戶單擊”,對象為“矩形1”(即“子菜單11”)。這樣,當點擊“子菜單11”時,變量“weizhi”的值就變成了“子菜單11”。當然,點擊其他菜單時,變量“weizhi”值的變化設置與上述操作類似,這里就不一一贅述了。
3. 設置當前位置
選定基礎層,在幻燈片中的合適位置插入一個文本框,內容是“您的當前位置:”,將光標定位到文本框的最后面,點擊“插入→引用”,在彈出的窗口選中變量“weizhi”。這樣,這個文本框中就會顯示變量“菜單1選項”的值了(圖8)。
最后,點擊“發(fā)布”,設置好發(fā)布文件夾,點擊“發(fā)布”按鈕就可以了。
熱點文章閱讀