動(dòng)態(tài)面板的常用功能

動(dòng)態(tài)面板的常用功能動(dòng)態(tài)面板的常用功能動(dòng)態(tài)面板元件是制作交互效果的主力軍，那么它到底可以實(shí)現(xiàn)哪些交互效果呢？動(dòng)態(tài)面板有8個(gè)常用的功能：顯示與隱藏、調(diào)整大小以適合內(nèi)容、滾動(dòng)欄設(shè)置、固定到瀏覽器、100%寬度、從動(dòng)態(tài)面板脫離、轉(zhuǎn)換為母版、轉(zhuǎn)換為動(dòng)態(tài)面板。這些功能是制作原型過程中不可缺少的。動(dòng)態(tài)面板的顯示與隱藏效果先把當(dāng)前工程保存起來，將index頁面重新命名為“動(dòng)態(tài)面板的常用功能”，page1頁面重新命名為

“顯示與隱藏效果”。進(jìn)入“顯示與隱藏效果”頁面，拖曳兩個(gè)提交按鈕元件，將其分別命名為“顯示”“隱藏”。拖曳一個(gè)動(dòng)態(tài)面板元件，動(dòng)態(tài)面板的名稱為“顯示與隱藏”，將State1重新命名為“內(nèi)容”。頁面命名拖曳提交按鈕和動(dòng)態(tài)面板元件3.

編輯“內(nèi)容”狀態(tài)，我們拖曳一個(gè)矩形1元件，輸入文本內(nèi)容為“我是顯示與隱藏效果頁面內(nèi)容”，回到“顯示與隱藏效果”頁面。4.選中顯示按鈕之后，在檢視區(qū)域的屬性里，選擇觸發(fā)事件，鼠標(biāo)單擊時(shí)是一個(gè)觸發(fā)事件，移動(dòng)也是一個(gè)觸發(fā)事件，給顯示按鈕添加鼠標(biāo)單擊時(shí)觸發(fā)事件。編輯動(dòng)態(tài)面板狀態(tài)內(nèi)容添加鼠標(biāo)單擊時(shí)觸發(fā)事件5.在彈出的“用例編輯器（鼠標(biāo)單擊時(shí)）”對話框中，可以看到有“添加動(dòng)作”“組織動(dòng)作”和

“配置動(dòng)作”。對話框每個(gè)步驟的區(qū)域都劃分得很清楚，從添加動(dòng)作、組織動(dòng)作到配置動(dòng)作，就可以完成交互效果的設(shè)置。6.設(shè)置添加動(dòng)作操作。在“添加動(dòng)作”里單擊“元件”的“顯示/隱藏”動(dòng)作，在“配置動(dòng)作”里可以看到我們新增的動(dòng)作，也就是它可以管理多個(gè)動(dòng)作。在

“添加動(dòng)作”里可以新增多個(gè)動(dòng)作，當(dāng)有多個(gè)動(dòng)作

時(shí)，它是按順序從上向下依次執(zhí)行，單擊鼠標(biāo)右鍵，在彈出的選項(xiàng)中可以調(diào)整動(dòng)作的順序及刪除動(dòng)作。添加鼠標(biāo)單擊時(shí)觸發(fā)事件單擊顯示與隱藏動(dòng)作7.配置動(dòng)作。在“配置動(dòng)作”里，勾選要顯示的面板，在“可見性”一欄我們選擇“顯示”，在“動(dòng)畫”一欄可以設(shè)置動(dòng)畫效果。在這里可以選擇“逐漸”，時(shí)間選擇

“500毫秒”。配置動(dòng)態(tài)面板顯示動(dòng)作8.選中隱藏按鈕，同樣添加鼠標(biāo)單擊時(shí)觸發(fā)事

件，彈出用例編輯器對話框。在“添加動(dòng)作”下面單擊“顯示/隱藏”操作，在“配置動(dòng)作”下面勾選“顯示與隱藏（動(dòng)態(tài)面板）”，“可見性”一欄選擇“隱藏”單選按鈕，“動(dòng)畫”一欄選擇“向右滑動(dòng)”效果，“時(shí)間”選500毫秒，單擊確定按鈕。給隱藏按鈕添加隱藏效果9.按F5鍵發(fā)布看一下效果，先單擊隱藏按鈕將動(dòng)態(tài)面板隱藏起來，可以看到它向右滑動(dòng)隱藏起來，再單擊顯示按鈕，顯示出動(dòng)態(tài)面板的內(nèi)容，就實(shí)現(xiàn)了動(dòng)態(tài)面板內(nèi)容的顯示與隱藏效果。發(fā)布原型動(dòng)態(tài)面板的隱藏與顯示效果，會(huì)使頁面變得有生氣，頁面內(nèi)容動(dòng)起來，能給用戶一種真實(shí)的體驗(yàn)。雖然制作的原型是同一種，但是讓用戶體驗(yàn)到和使用真正軟件一樣的感受，這就是動(dòng)態(tài)面板元件的強(qiáng)

大之處。動(dòng)態(tài)面板的調(diào)整大小以適合內(nèi)容1.

將page2頁面命名為“調(diào)整大小以適合內(nèi)容”，打開這個(gè)頁面，拖曳一個(gè)動(dòng)態(tài)面板元件到工作區(qū)域。2.雙擊動(dòng)態(tài)面板，將動(dòng)態(tài)面板命名為“調(diào)整大小以適合內(nèi)容”，狀態(tài)的名稱為“內(nèi)容”。新增頁面與動(dòng)態(tài)面板動(dòng)態(tài)面板和狀態(tài)命名3.拖曳一個(gè)矩形1元件，文本內(nèi)容為“我是動(dòng)態(tài)面板的內(nèi)容，超出動(dòng)態(tài)面板的顯示區(qū)域”，調(diào)整矩形元件大小，讓它超出顯示區(qū)域。編輯面板狀態(tài)內(nèi)容動(dòng)態(tài)面板的調(diào)整大小以適合內(nèi)容的這個(gè)功能不會(huì)浪費(fèi)空間，跟著狀態(tài)里的內(nèi)容調(diào)整動(dòng)態(tài)面板的大小，也不用擔(dān)心超出動(dòng)態(tài)面板的顯示區(qū)域會(huì)被隱藏起來的問題。4.回到動(dòng)態(tài)面板的頁面，動(dòng)態(tài)面板里的內(nèi)容部分沒有顯示出來，在動(dòng)態(tài)面板上單擊鼠標(biāo)右鍵，選擇“自動(dòng)調(diào)整為內(nèi)容尺寸”，會(huì)發(fā)現(xiàn)動(dòng)態(tài)面板的大小調(diào)整了，完全顯示了狀態(tài)里的內(nèi)容。沒有完全顯示出來完全顯示出來動(dòng)態(tài)面板的滾動(dòng)欄設(shè)置動(dòng)態(tài)面板的滾動(dòng)欄設(shè)置是可以讓動(dòng)態(tài)面板出現(xiàn)滾動(dòng)欄，橫向或者縱向拖動(dòng)滾動(dòng)欄，可以讓內(nèi)容完全地展現(xiàn)出來。在安裝軟件的時(shí)候，經(jīng)常會(huì)彈出軟件安裝許可協(xié)議，在安裝頁面無法完全展示出協(xié)議的內(nèi)容，會(huì)發(fā)現(xiàn)在右側(cè)或者下面有滾動(dòng)條，通過動(dòng)態(tài)面板的滾動(dòng)欄設(shè)置，同樣可以實(shí)現(xiàn)這樣的效果。安裝協(xié)議實(shí)戰(zhàn)演練1.

將page3頁面命名為“滾動(dòng)欄設(shè)置”，打開這個(gè)頁面，拖曳一個(gè)動(dòng)態(tài)面板元件，將其為“滾動(dòng)欄設(shè)置”，狀態(tài)命名為“內(nèi)容”。2.進(jìn)入“內(nèi)容”狀態(tài)里，拖曳一個(gè)文本段落元件到工作區(qū)域，調(diào)整一下文本段落元件的大小。頁面和動(dòng)態(tài)面板命名編輯狀態(tài)內(nèi)容3.回到動(dòng)態(tài)面板的頁面里，在動(dòng)態(tài)面板上單擊鼠標(biāo)右鍵滾動(dòng)欄里選擇滾動(dòng)條的顯示方式，這里提供了4種顯示方式：從不顯示滾動(dòng)條、自動(dòng)顯示滾動(dòng)條、自動(dòng)顯示垂直滾動(dòng)條、自動(dòng)顯示水平滾動(dòng)條。在這里選擇自動(dòng)顯示滾動(dòng)條。4.發(fā)布看一下效果，拖動(dòng)滾動(dòng)條，就可以完整顯示文本內(nèi)容。自動(dòng)顯示滾動(dòng)條發(fā)布原型動(dòng)態(tài)面板的固定到瀏覽器1.新增一個(gè)頁面，頁面重新命名為“固定到瀏覽器”。拖曳一個(gè)矩形3元件，文本內(nèi)容命名為“我是頂部信息”，它的x、y坐標(biāo)值設(shè)置為（0,0），寬度設(shè)置為700。頂部信息2.再拖曳一個(gè)矩形3元件，文本內(nèi)容命名為“我是尾部信息”，它的x、y坐標(biāo)值設(shè)置為（0,1000），寬度設(shè)置為700。3.拖曳一個(gè)動(dòng)態(tài)面板元件，動(dòng)態(tài)面板命名

為“固定到瀏覽器”，狀態(tài)命名為“qq”。拖曳一個(gè)圖片元件到狀態(tài)中，插入一個(gè)企

鵝的圖片。4.回到動(dòng)態(tài)面板的頁面，在動(dòng)態(tài)面板上單擊鼠標(biāo)右鍵在選項(xiàng)里選擇“固定到瀏覽器”，勾選“固定到瀏覽器窗口”復(fù)選框，可以設(shè)置橫向和縱向固定的位置，橫向選擇

“右側(cè)矩形”，縱向選擇“居中”，也可以設(shè)置邊距，固定的位置可以根據(jù)實(shí)際需求來選擇。5.發(fā)布看一下效果，會(huì)發(fā)現(xiàn)頁面隨滾動(dòng)條上下滾動(dòng)，而企鵝的圖標(biāo)始終固定在右側(cè)里，隨時(shí)可以單擊。發(fā)布原型100%寬度1.

新增一個(gè)頁面，命名為“100%寬度”。拖曳一個(gè)動(dòng)態(tài)面板元件，輸入面板的名稱為“100%寬度”，狀態(tài)命名為“內(nèi)容”。2.進(jìn)入狀態(tài)的編輯頁面，拖曳一個(gè)矩形1元件，文本內(nèi)容命名為“我是矩形元件，我的寬度超出動(dòng)態(tài)面板的顯示區(qū)域”。新增頁面和動(dòng)態(tài)面板編輯狀態(tài)內(nèi)容3.回到動(dòng)態(tài)面板的頁面，會(huì)看到超出顯示的區(qū)域沒有顯示出來，單擊鼠標(biāo)右鍵，選擇“100%寬度”選項(xiàng)。設(shè)置

完之后，沒有任何變化，這個(gè)效果只能在瀏覽器中看到效果。4.發(fā)布看一下效果，矩形1元件的內(nèi)容在橫向上被完全顯示出來，但是在縱向上還沒有完全顯示出來，它只針對寬度起作用。設(shè)置100%寬度發(fā)布原型從動(dòng)態(tài)面板脫離新增一個(gè)頁面，重新命名為“從動(dòng)態(tài)面板脫離”。打開這個(gè)頁面，拖曳一個(gè)動(dòng)態(tài)面板元件，輸入名稱“從動(dòng)態(tài)面板脫離”，新增兩個(gè)狀態(tài)，分別命名為“我是狀態(tài)一”“我是狀態(tài)二”。進(jìn)入“我是狀態(tài)一”的狀態(tài)里面，拖曳一個(gè)矩形3元件，文本內(nèi)容命名為“我是狀態(tài)一的內(nèi)容”。新增頁面和動(dòng)態(tài)面板編輯狀態(tài)一內(nèi)容3.進(jìn)入“我是狀態(tài)二”的狀態(tài)里面，拖曳一個(gè)矩形3元件，文本內(nèi)容命名為“我是狀態(tài)二的內(nèi)容”。4.回到動(dòng)態(tài)面板頁面，單擊鼠標(biāo)右鍵，選擇“從首個(gè)狀態(tài)中脫離”選項(xiàng)，狀態(tài)一就會(huì)變?yōu)槠胀ǖ木匦卧?，同時(shí)動(dòng)態(tài)面板顯示狀態(tài)二的內(nèi)容。轉(zhuǎn)換為母版動(dòng)態(tài)面板可以轉(zhuǎn)換為母版。可以將