馬震安

1. 顯示圖片輕松設(shè)置

打開Axure RP Pro 7.0軟件，在站點(diǎn)地圖面板將不需要的頁面右擊刪除掉，將所保留的頁面重命名（如“幸運(yùn)大抽獎(jiǎng)”）。在部件庫拖動(dòng)中繼器到頁面中，雙擊這個(gè)中繼器，在中繼器頁面利用部件屬性和樣式面板對(duì)原有的矩形進(jìn)行樣式設(shè)置；在中繼器數(shù)據(jù)集面板增加3列，字段名分別為ImgA（用于存放背景圖）、ImgB（用于存放不同的獎(jiǎng)品圖）、sjs（用于圖片的隨機(jī)顯示），添加行并分別在ImgA和ImgB列右擊導(dǎo)入背景圖和獎(jiǎng)品圖。在Repeater Style面板設(shè)置布局為水平，勾選換行，每個(gè)row包含3個(gè)（圖2）。

接下來，右擊矩形轉(zhuǎn)換成動(dòng)態(tài)面板并命名為“圖片顯示”，在部件管理面板雙擊動(dòng)態(tài)面板中的“狀態(tài)1”，在狀態(tài)1窗口，拖動(dòng)圖片部件到矩形中，調(diào)整其大小與矩形內(nèi)徑相同，導(dǎo)入臨時(shí)背景圖。右擊狀態(tài)1復(fù)制成狀態(tài)2和狀態(tài)3，調(diào)整狀態(tài)2和狀態(tài)3窗口中的矩形和圖片寬度，越來越小（圖3）。

依次復(fù)制狀態(tài)3、狀態(tài)2、狀態(tài)1，把狀態(tài)1-6從上到下排列好，重新命名為1-6，這樣就能實(shí)現(xiàn)圖片的翻轉(zhuǎn)效果。為了在選中圖片時(shí)，圖片邊框變紅，需要把狀態(tài)6中的圖片命名為tu，點(diǎn)擊部件屬性和樣式面板中屬性標(biāo)簽交互樣式中的“選中”屬性，設(shè)置好選中時(shí)的邊框顏色為紅色，線形加寬。

接著，切換到中繼器窗口，在中繼器項(xiàng)目交互面板雙擊Case 1，在用例編輯器窗口右擊刪除原有語句，添加6個(gè)“設(shè)置圖像”動(dòng)作，在配置動(dòng)作處勾選圖片顯示下的“設(shè)置（圖片）”，默認(rèn)設(shè)置為“值”，點(diǎn)擊fx按鈕，在編輯值窗口點(diǎn)擊“插入變量、屬性、函數(shù)或運(yùn)算符”，在彈出的下拉列表中前3個(gè)選擇Item.ImgA，后3個(gè)選擇Item.ImgB（圖4）。

2. 動(dòng)畫效果按需控制

利用“項(xiàng)目→全局變量”菜單添加名稱為bian、默認(rèn)值為1的變量。然后，為中繼器窗口中動(dòng)態(tài)面板的“鼠標(biāo)單擊時(shí)”新增用例，在用例編輯器窗口新增變量bian等于1時(shí)的條件，添加設(shè)置面板狀態(tài)動(dòng)作，在配置動(dòng)作處勾選當(dāng)前部件，選擇狀態(tài)設(shè)置為6；增加選中動(dòng)作，勾選tu；添加禁用動(dòng)作，勾選圖片顯示；添加設(shè)置變量動(dòng)作，勾選bian，值為空。分別為“鼠標(biāo)移入時(shí)”和“鼠標(biāo)移出時(shí)”添加用例，在各自的用例編輯器窗口都新增一條變量bian等于空時(shí)的條件，都添加設(shè)置面板狀態(tài)動(dòng)作，勾選當(dāng)前部件，鼠標(biāo)移入時(shí)選擇狀態(tài)為Next，鼠標(biāo)移出時(shí)選擇狀態(tài)為Previous，循環(huán)間隔都為50毫秒（圖5）。

3. 巧設(shè)獎(jiǎng)品隨機(jī)排列

首先，在中繼器窗口的圖片上添加單選按鈕部件，命名為xz，右擊它設(shè)置為隱藏，并為它的“選中狀態(tài)改變時(shí)”添加用例。在窗口中新增條件為這個(gè)部件的選中狀態(tài)為true時(shí)添加更新行動(dòng)作，選擇sjs列，值為Math.random（）；添加新增排序動(dòng)作，勾選中繼器，屬性為sjs，順序?yàn)樯颍▓D6）。

4. 不用代碼控制抽獎(jiǎng)

在幸運(yùn)大抽獎(jiǎng)主頁中增加一個(gè)矩形部件，大小與圖片區(qū)域相等，透明度為30%，置于頂層，名稱為fg。在主頁合適位置添加形狀按鈕，雙擊標(biāo)簽修改為開始。右擊它轉(zhuǎn)換成動(dòng)態(tài)面板，名稱為anniu。右擊anniu的狀態(tài)1復(fù)制成狀態(tài)2，將狀態(tài)2里面的按鈕標(biāo)簽改為“再來一次”。為狀態(tài)1中“開始”按鈕的“單擊鼠標(biāo)時(shí)”增加用例，添加選中動(dòng)作，勾選xz，值為true；添加隱藏動(dòng)作，勾選fg；添加設(shè)置面板狀態(tài)動(dòng)作，勾選anniu，選擇狀態(tài)為狀態(tài)2；再增加選中動(dòng)作，勾選xz，值為false。同樣為狀態(tài)2中“再來一次”按鈕的“單擊鼠標(biāo)時(shí)”增加用例。添加選中動(dòng)作，勾選xz，值為true；增加設(shè)置面板狀態(tài)動(dòng)作，勾選圖片顯示，選擇狀態(tài)設(shè)置為1；增加設(shè)置變量值動(dòng)作，勾選bian，值為1；增加顯示動(dòng)作，勾選fg；增加設(shè)置面板狀態(tài)動(dòng)作，勾選anniu，選擇狀態(tài)為“狀態(tài)1”；再增加選中動(dòng)作，勾選xz，值為false（圖7）。

切換到“幸運(yùn)大抽獎(jiǎng)”主頁面，在“頁面交互”面板為“頁面載入時(shí)”增加用例，添加設(shè)置面板狀態(tài)動(dòng)作，勾選“圖片顯示（動(dòng)態(tài)面板）”，選擇狀態(tài)設(shè)置為1。

以上任務(wù)完成后，發(fā)布生成HTML文件。點(diǎn)擊該文件啟動(dòng)網(wǎng)絡(luò)瀏覽器，便能夠演示抽獎(jiǎng)了。

1. 顯示圖片輕松設(shè)置

打開Axure RP Pro 7.0軟件，在站點(diǎn)地圖面板將不需要的頁面右擊刪除掉，將所保留的頁面重命名（如“幸運(yùn)大抽獎(jiǎng)”）。在部件庫拖動(dòng)中繼器到頁面中，雙擊這個(gè)中繼器，在中繼器頁面利用部件屬性和樣式面板對(duì)原有的矩形進(jìn)行樣式設(shè)置；在中繼器數(shù)據(jù)集面板增加3列，字段名分別為ImgA（用于存放背景圖）、ImgB（用于存放不同的獎(jiǎng)品圖）、sjs（用于圖片的隨機(jī)顯示），添加行并分別在ImgA和ImgB列右擊導(dǎo)入背景圖和獎(jiǎng)品圖。在Repeater Style面板設(shè)置布局為水平，勾選換行，每個(gè)row包含3個(gè)（圖2）。

接下來，右擊矩形轉(zhuǎn)換成動(dòng)態(tài)面板并命名為“圖片顯示”，在部件管理面板雙擊動(dòng)態(tài)面板中的“狀態(tài)1”，在狀態(tài)1窗口，拖動(dòng)圖片部件到矩形中，調(diào)整其大小與矩形內(nèi)徑相同，導(dǎo)入臨時(shí)背景圖。右擊狀態(tài)1復(fù)制成狀態(tài)2和狀態(tài)3，調(diào)整狀態(tài)2和狀態(tài)3窗口中的矩形和圖片寬度，越來越小（圖3）。

依次復(fù)制狀態(tài)3、狀態(tài)2、狀態(tài)1，把狀態(tài)1-6從上到下排列好，重新命名為1-6，這樣就能實(shí)現(xiàn)圖片的翻轉(zhuǎn)效果。為了在選中圖片時(shí)，圖片邊框變紅，需要把狀態(tài)6中的圖片命名為tu，點(diǎn)擊部件屬性和樣式面板中屬性標(biāo)簽交互樣式中的“選中”屬性，設(shè)置好選中時(shí)的邊框顏色為紅色，線形加寬。

接著，切換到中繼器窗口，在中繼器項(xiàng)目交互面板雙擊Case 1，在用例編輯器窗口右擊刪除原有語句，添加6個(gè)“設(shè)置圖像”動(dòng)作，在配置動(dòng)作處勾選圖片顯示下的“設(shè)置（圖片）”，默認(rèn)設(shè)置為“值”，點(diǎn)擊fx按鈕，在編輯值窗口點(diǎn)擊“插入變量、屬性、函數(shù)或運(yùn)算符”，在彈出的下拉列表中前3個(gè)選擇Item.ImgA，后3個(gè)選擇Item.ImgB（圖4）。

2. 動(dòng)畫效果按需控制

利用“項(xiàng)目→全局變量”菜單添加名稱為bian、默認(rèn)值為1的變量。然后，為中繼器窗口中動(dòng)態(tài)面板的“鼠標(biāo)單擊時(shí)”新增用例，在用例編輯器窗口新增變量bian等于1時(shí)的條件，添加設(shè)置面板狀態(tài)動(dòng)作，在配置動(dòng)作處勾選當(dāng)前部件，選擇狀態(tài)設(shè)置為6；增加選中動(dòng)作，勾選tu；添加禁用動(dòng)作，勾選圖片顯示；添加設(shè)置變量動(dòng)作，勾選bian，值為空。分別為“鼠標(biāo)移入時(shí)”和“鼠標(biāo)移出時(shí)”添加用例，在各自的用例編輯器窗口都新增一條變量bian等于空時(shí)的條件，都添加設(shè)置面板狀態(tài)動(dòng)作，勾選當(dāng)前部件，鼠標(biāo)移入時(shí)選擇狀態(tài)為Next，鼠標(biāo)移出時(shí)選擇狀態(tài)為Previous，循環(huán)間隔都為50毫秒（圖5）。

3. 巧設(shè)獎(jiǎng)品隨機(jī)排列

首先，在中繼器窗口的圖片上添加單選按鈕部件，命名為xz，右擊它設(shè)置為隱藏，并為它的“選中狀態(tài)改變時(shí)”添加用例。在窗口中新增條件為這個(gè)部件的選中狀態(tài)為true時(shí)添加更新行動(dòng)作，選擇sjs列，值為Math.random（）；添加新增排序動(dòng)作，勾選中繼器，屬性為sjs，順序?yàn)樯颍▓D6）。

4. 不用代碼控制抽獎(jiǎng)

在幸運(yùn)大抽獎(jiǎng)主頁中增加一個(gè)矩形部件，大小與圖片區(qū)域相等，透明度為30%，置于頂層，名稱為fg。在主頁合適位置添加形狀按鈕，雙擊標(biāo)簽修改為開始。右擊它轉(zhuǎn)換成動(dòng)態(tài)面板，名稱為anniu。右擊anniu的狀態(tài)1復(fù)制成狀態(tài)2，將狀態(tài)2里面的按鈕標(biāo)簽改為“再來一次”。為狀態(tài)1中“開始”按鈕的“單擊鼠標(biāo)時(shí)”增加用例，添加選中動(dòng)作，勾選xz，值為true；添加隱藏動(dòng)作，勾選fg；添加設(shè)置面板狀態(tài)動(dòng)作，勾選anniu，選擇狀態(tài)為狀態(tài)2；再增加選中動(dòng)作，勾選xz，值為false。同樣為狀態(tài)2中“再來一次”按鈕的“單擊鼠標(biāo)時(shí)”增加用例。添加選中動(dòng)作，勾選xz，值為true；增加設(shè)置面板狀態(tài)動(dòng)作，勾選圖片顯示，選擇狀態(tài)設(shè)置為1；增加設(shè)置變量值動(dòng)作，勾選bian，值為1；增加顯示動(dòng)作，勾選fg；增加設(shè)置面板狀態(tài)動(dòng)作，勾選anniu，選擇狀態(tài)為“狀態(tài)1”；再增加選中動(dòng)作，勾選xz，值為false（圖7）。

切換到“幸運(yùn)大抽獎(jiǎng)”主頁面，在“頁面交互”面板為“頁面載入時(shí)”增加用例，添加設(shè)置面板狀態(tài)動(dòng)作，勾選“圖片顯示（動(dòng)態(tài)面板）”，選擇狀態(tài)設(shè)置為1。

以上任務(wù)完成后，發(fā)布生成HTML文件。點(diǎn)擊該文件啟動(dòng)網(wǎng)絡(luò)瀏覽器，便能夠演示抽獎(jiǎng)了。

1. 顯示圖片輕松設(shè)置

打開Axure RP Pro 7.0軟件，在站點(diǎn)地圖面板將不需要的頁面右擊刪除掉，將所保留的頁面重命名（如“幸運(yùn)大抽獎(jiǎng)”）。在部件庫拖動(dòng)中繼器到頁面中，雙擊這個(gè)中繼器，在中繼器頁面利用部件屬性和樣式面板對(duì)原有的矩形進(jìn)行樣式設(shè)置；在中繼器數(shù)據(jù)集面板增加3列，字段名分別為ImgA（用于存放背景圖）、ImgB（用于存放不同的獎(jiǎng)品圖）、sjs（用于圖片的隨機(jī)顯示），添加行并分別在ImgA和ImgB列右擊導(dǎo)入背景圖和獎(jiǎng)品圖。在Repeater Style面板設(shè)置布局為水平，勾選換行，每個(gè)row包含3個(gè)（圖2）。

接下來，右擊矩形轉(zhuǎn)換成動(dòng)態(tài)面板并命名為“圖片顯示”，在部件管理面板雙擊動(dòng)態(tài)面板中的“狀態(tài)1”，在狀態(tài)1窗口，拖動(dòng)圖片部件到矩形中，調(diào)整其大小與矩形內(nèi)徑相同，導(dǎo)入臨時(shí)背景圖。右擊狀態(tài)1復(fù)制成狀態(tài)2和狀態(tài)3，調(diào)整狀態(tài)2和狀態(tài)3窗口中的矩形和圖片寬度，越來越?。▓D3）。

依次復(fù)制狀態(tài)3、狀態(tài)2、狀態(tài)1，把狀態(tài)1-6從上到下排列好，重新命名為1-6，這樣就能實(shí)現(xiàn)圖片的翻轉(zhuǎn)效果。為了在選中圖片時(shí)，圖片邊框變紅，需要把狀態(tài)6中的圖片命名為tu，點(diǎn)擊部件屬性和樣式面板中屬性標(biāo)簽交互樣式中的“選中”屬性，設(shè)置好選中時(shí)的邊框顏色為紅色，線形加寬。

接著，切換到中繼器窗口，在中繼器項(xiàng)目交互面板雙擊Case 1，在用例編輯器窗口右擊刪除原有語句，添加6個(gè)“設(shè)置圖像”動(dòng)作，在配置動(dòng)作處勾選圖片顯示下的“設(shè)置（圖片）”，默認(rèn)設(shè)置為“值”，點(diǎn)擊fx按鈕，在編輯值窗口點(diǎn)擊“插入變量、屬性、函數(shù)或運(yùn)算符”，在彈出的下拉列表中前3個(gè)選擇Item.ImgA，后3個(gè)選擇Item.ImgB（圖4）。

2. 動(dòng)畫效果按需控制

利用“項(xiàng)目→全局變量”菜單添加名稱為bian、默認(rèn)值為1的變量。然后，為中繼器窗口中動(dòng)態(tài)面板的“鼠標(biāo)單擊時(shí)”新增用例，在用例編輯器窗口新增變量bian等于1時(shí)的條件，添加設(shè)置面板狀態(tài)動(dòng)作，在配置動(dòng)作處勾選當(dāng)前部件，選擇狀態(tài)設(shè)置為6；增加選中動(dòng)作，勾選tu；添加禁用動(dòng)作，勾選圖片顯示；添加設(shè)置變量動(dòng)作，勾選bian，值為空。分別為“鼠標(biāo)移入時(shí)”和“鼠標(biāo)移出時(shí)”添加用例，在各自的用例編輯器窗口都新增一條變量bian等于空時(shí)的條件，都添加設(shè)置面板狀態(tài)動(dòng)作，勾選當(dāng)前部件，鼠標(biāo)移入時(shí)選擇狀態(tài)為Next，鼠標(biāo)移出時(shí)選擇狀態(tài)為Previous，循環(huán)間隔都為50毫秒（圖5）。

3. 巧設(shè)獎(jiǎng)品隨機(jī)排列

首先，在中繼器窗口的圖片上添加單選按鈕部件，命名為xz，右擊它設(shè)置為隱藏，并為它的“選中狀態(tài)改變時(shí)”添加用例。在窗口中新增條件為這個(gè)部件的選中狀態(tài)為true時(shí)添加更新行動(dòng)作，選擇sjs列，值為Math.random（）；添加新增排序動(dòng)作，勾選中繼器，屬性為sjs，順序?yàn)樯颍▓D6）。

4. 不用代碼控制抽獎(jiǎng)

在幸運(yùn)大抽獎(jiǎng)主頁中增加一個(gè)矩形部件，大小與圖片區(qū)域相等，透明度為30%，置于頂層，名稱為fg。在主頁合適位置添加形狀按鈕，雙擊標(biāo)簽修改為開始。右擊它轉(zhuǎn)換成動(dòng)態(tài)面板，名稱為anniu。右擊anniu的狀態(tài)1復(fù)制成狀態(tài)2，將狀態(tài)2里面的按鈕標(biāo)簽改為“再來一次”。為狀態(tài)1中“開始”按鈕的“單擊鼠標(biāo)時(shí)”增加用例，添加選中動(dòng)作，勾選xz，值為true；添加隱藏動(dòng)作，勾選fg；添加設(shè)置面板狀態(tài)動(dòng)作，勾選anniu，選擇狀態(tài)為狀態(tài)2；再增加選中動(dòng)作，勾選xz，值為false。同樣為狀態(tài)2中“再來一次”按鈕的“單擊鼠標(biāo)時(shí)”增加用例。添加選中動(dòng)作，勾選xz，值為true；增加設(shè)置面板狀態(tài)動(dòng)作，勾選圖片顯示，選擇狀態(tài)設(shè)置為1；增加設(shè)置變量值動(dòng)作，勾選bian，值為1；增加顯示動(dòng)作，勾選fg；增加設(shè)置面板狀態(tài)動(dòng)作，勾選anniu，選擇狀態(tài)為“狀態(tài)1”；再增加選中動(dòng)作，勾選xz，值為false（圖7）。

切換到“幸運(yùn)大抽獎(jiǎng)”主頁面，在“頁面交互”面板為“頁面載入時(shí)”增加用例，添加設(shè)置面板狀態(tài)動(dòng)作，勾選“圖片顯示（動(dòng)態(tài)面板）”，選擇狀態(tài)設(shè)置為1。

以上任務(wù)完成后，發(fā)布生成HTML文件。點(diǎn)擊該文件啟動(dòng)網(wǎng)絡(luò)瀏覽器，便能夠演示抽獎(jiǎng)了。