馬震安

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

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

接下來，右擊矩形轉(zhuǎn)換成動態(tài)面板并命名為“圖片顯示”，在部件管理面板雙擊動態(tài)面板中的“狀態(tài)1”，在狀態(tài)1窗口，拖動圖片部件到矩形中，調(diào)整其大小與矩形內(nèi)徑相同，導(dǎo)入臨時背景圖。右擊狀態(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，這樣就能實現(xiàn)圖片的翻轉(zhuǎn)效果。為了在選中圖片時，圖片邊框變紅，需要把狀態(tài)6中的圖片命名為tu，點擊部件屬性和樣式面板中屬性標(biāo)簽交互樣式中的“選中”屬性，設(shè)置好選中時的邊框顏色為紅色，線形加寬。

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

2. 動畫效果按需控制

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

3. 巧設(shè)獎品隨機排列

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

4. 不用代碼控制抽獎

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

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

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

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

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

接下來，右擊矩形轉(zhuǎn)換成動態(tài)面板并命名為“圖片顯示”，在部件管理面板雙擊動態(tài)面板中的“狀態(tài)1”，在狀態(tài)1窗口，拖動圖片部件到矩形中，調(diào)整其大小與矩形內(nèi)徑相同，導(dǎo)入臨時背景圖。右擊狀態(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，這樣就能實現(xiàn)圖片的翻轉(zhuǎn)效果。為了在選中圖片時，圖片邊框變紅，需要把狀態(tài)6中的圖片命名為tu，點擊部件屬性和樣式面板中屬性標(biāo)簽交互樣式中的“選中”屬性，設(shè)置好選中時的邊框顏色為紅色，線形加寬。

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

2. 動畫效果按需控制

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

3. 巧設(shè)獎品隨機排列

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

4. 不用代碼控制抽獎

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

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

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

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

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

接下來，右擊矩形轉(zhuǎn)換成動態(tài)面板并命名為“圖片顯示”，在部件管理面板雙擊動態(tài)面板中的“狀態(tài)1”，在狀態(tài)1窗口，拖動圖片部件到矩形中，調(diào)整其大小與矩形內(nèi)徑相同，導(dǎo)入臨時背景圖。右擊狀態(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，這樣就能實現(xiàn)圖片的翻轉(zhuǎn)效果。為了在選中圖片時，圖片邊框變紅，需要把狀態(tài)6中的圖片命名為tu，點擊部件屬性和樣式面板中屬性標(biāo)簽交互樣式中的“選中”屬性，設(shè)置好選中時的邊框顏色為紅色，線形加寬。

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

2. 動畫效果按需控制

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

3. 巧設(shè)獎品隨機排列

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

4. 不用代碼控制抽獎

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

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

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