?????????????????主要內(nèi)容

在微博發(fā)布中，輸入文本時(shí)會(huì)有提示可輸入文本字?jǐn)?shù)的變化，當(dāng)文本字?jǐn)?shù)超過(guò)140時(shí)，提示轉(zhuǎn)成長(zhǎng)微博，點(diǎn)擊轉(zhuǎn)成長(zhǎng)微博按鈕原微博的內(nèi)容會(huì)同步到長(zhǎng)微博文本框內(nèi)，本課我們介紹使用axure里面的變量和函數(shù)實(shí)現(xiàn)這個(gè)效果。

交互說(shuō)明

1.鼠標(biāo)在輸入框（短微博）中為輸入狀態(tài)時(shí)，輸入框變高，輸入框背景顯示藍(lán)色陰影；未在輸入狀態(tài)時(shí)，輸入框（短微博）恢復(fù)默認(rèn)高度，無(wú)藍(lán)色陰影

2.輸入框（短微博）輸入文本時(shí)，計(jì)算剩余可輸入文本數(shù)量并信息提示；輸入文本數(shù)量超過(guò)140時(shí)，提示文字改變，顯示“進(jìn)入長(zhǎng)微博”按鈕。

3.點(diǎn)擊“進(jìn)入長(zhǎng)微博”按鈕，打開新增長(zhǎng)微博面板，輸入框（長(zhǎng)微博）顯示文本與輸入框（短微博）內(nèi)容相同。

4.新增長(zhǎng)微博面板中，點(diǎn)擊面板背景縮略圖，更換面板背景圖。默認(rèn)以首張縮略圖為背景。

一、原型制作

步驟1：

拖入單行文本標(biāo)簽，制作微博示，編輯文字“來(lái)，說(shuō)說(shuō)你在做什么，想什么”

拖入多行文本框，制作輸入框，設(shè)置位置與大小，x:39 y:43 , w:538 h:76，命名：輸入文本1

步驟2：

拖入矩形，選擇右演說(shuō)氣泡圖形，調(diào)整旋轉(zhuǎn)，再加入一個(gè)矩形把兩個(gè)圖形組合成一個(gè)新的圖形，設(shè)置位置與大小與輸入框一樣，放在輸入框上面，并分別命名為：外框1、外框2。

復(fù)制這兩個(gè)矩形，調(diào)整位置與大小分別為：x:36 y:40 w:490 h:106，x:508 y:54 w:106 h:79，分別命名為：外框1-焦點(diǎn)、外框2-焦點(diǎn)，設(shè)置它選中時(shí)的交互樣式，并設(shè)為隱藏

步驟3：

拖入文本標(biāo)簽，設(shè)置位置與大小，編輯文字：還能輸入140字，命名：字?jǐn)?shù)統(tǒng)計(jì)，并設(shè)為隱藏，再拖入文本標(biāo)簽，編輯文字：轉(zhuǎn)成長(zhǎng)微博，命名：轉(zhuǎn)長(zhǎng)微博，并設(shè)為隱藏

步驟4：

拖入圖片部件，分別導(dǎo)入表情標(biāo)、圖片標(biāo)、@、同步標(biāo)，拖入文本標(biāo)簽分別對(duì)應(yīng)編輯文字：表情、圖片、朋友、同步。根據(jù)圖標(biāo)和文字分別對(duì)應(yīng)命名：表情標(biāo)、表情、圖片標(biāo)、圖片、@、朋友、同步、同步標(biāo)。

步驟5：

拖入矩形，設(shè)置位置與大小，編輯文字：廣播，并命名：廣播

步驟6：

制作新增長(zhǎng)微博

a.拖入動(dòng)態(tài)面板，把它設(shè)為隱藏，命名：長(zhǎng)微博面板，在狀態(tài)1里編輯，拖入矩形，調(diào)整位置與大小，編輯文字制作長(zhǎng)微博標(biāo)題欄；

b.拖入圖片部件，導(dǎo)入一張圖片作為，設(shè)置它置于最底層，并命名：背景，把它轉(zhuǎn)為動(dòng)態(tài)面板，新增7個(gè)狀態(tài)，分別在每個(gè)狀態(tài)中導(dǎo)入背景圖片；

拖入矩形，設(shè)置大小與位置，把它放在背景下方，導(dǎo)入8張背景的縮略圖并列放在在矩形中

C.拖入兩個(gè)文本標(biāo)簽，分別編輯文字：標(biāo)簽、正文，放在對(duì)應(yīng)的位置，拖入單行文本框，調(diào)整位置與大小，設(shè)置它的提示文字“請(qǐng)輸入標(biāo)題，最多30字（選填）”，設(shè)置它的提示樣式，并設(shè)置最大字?jǐn)?shù)是30

d.拖入圖片，導(dǎo)入文本樣式的圖片，拖入多行文本框，調(diào)整位置與大小，把它在文本樣式下方，命名：輸入文本2

E.拖入矩形，調(diào)整大小與位置，編輯文字：生成長(zhǎng)微博，拖入矩形和水平線，制作關(guān)閉按鈕

二、設(shè)置“獲得焦點(diǎn)時(shí)、失去焦點(diǎn)時(shí)”事件

步驟7：

步驟7：選中“輸入文本1”雙擊“獲得焦點(diǎn)時(shí)”事件，打開用例編輯器設(shè)置

動(dòng)作1

第二步：點(diǎn)擊新增動(dòng)作，選擇“顯示/隱藏”動(dòng)作

第四步：配置動(dòng)作，勾選“外框1、外框2”前復(fù)選框，可見性“隱藏”

動(dòng)作2

第二步：點(diǎn)擊新增動(dòng)作，選擇“顯示/隱藏”動(dòng)作

第四步：配置動(dòng)作，勾選“外框1-焦點(diǎn)、外框2-焦點(diǎn)、字?jǐn)?shù)統(tǒng)計(jì)”前復(fù)選框，可見性“顯示”，并設(shè)置“字?jǐn)?shù)統(tǒng)計(jì)”置于頂層

動(dòng)作3

第二步：點(diǎn)擊新增動(dòng)作，選擇“選中”動(dòng)作

第四步：配置動(dòng)作，勾選“外框1-焦點(diǎn)、外框2-焦點(diǎn)”前復(fù)選框，選擇選定狀態(tài)值=true

動(dòng)作4

第二步：點(diǎn)擊新增動(dòng)作，選擇“移動(dòng)”動(dòng)作

第四步：配置動(dòng)作，勾選“表情標(biāo)”前復(fù)選框

移動(dòng)到絕對(duì)位置，點(diǎn)擊x后面的fx,打開“編輯值”窗口，點(diǎn)擊“新增局部變量”設(shè)置LVAR1=部件.表情標(biāo)，點(diǎn)擊“插入變量、函數(shù)”，選擇“部件”下面的x,然后再選中“This”選擇LVAR1，點(diǎn)擊“確定”保存編輯并關(guān)閉“編輯值”窗口

點(diǎn)擊y后面的fx,打開“編輯值”窗口，點(diǎn)擊“新增局部變量”設(shè)置LVAR1=部件.表情標(biāo)，點(diǎn)擊“插入變量、函數(shù)”，選擇“部件”下面的y，再選中“This”選擇LVAR1，在LVAR1.y后面加+30，點(diǎn)擊“確定”保存編輯并關(guān)閉“編輯值”窗口

繼續(xù)同樣的操作設(shè)置“表情、圖片標(biāo)、圖片、@、朋友、同步、同步標(biāo)、廣播”移動(dòng)到同樣的位置：絕對(duì)位置“x:[[LVAR1.x]]，y:[[LVAR1.y+30]]”

步驟8：

選中“輸入文本1”雙擊“失去焦點(diǎn)時(shí)”事件，打開用例編輯器設(shè)置

動(dòng)作1

第二步：點(diǎn)擊新增動(dòng)作，選擇“顯示/隱藏”動(dòng)作

第四步：配置動(dòng)作，勾選“字?jǐn)?shù)統(tǒng)計(jì)、外框1-焦點(diǎn)、外框2-焦點(diǎn)”前復(fù)選框，可見性“隱藏”

動(dòng)作2

第二步：點(diǎn)擊新增動(dòng)作，選擇“顯示/隱藏”動(dòng)作

第四步：配置動(dòng)作，勾選“外框1、外框2”前復(fù)選框，可見性“顯示”

動(dòng)作3

第二步：點(diǎn)擊新增動(dòng)作，選擇“選中”動(dòng)作

第四步：配置動(dòng)作，勾選“外框1-焦點(diǎn)、外框2-焦點(diǎn)”前復(fù)選框，選擇選定狀態(tài)值=true

動(dòng)作4

第二步：點(diǎn)擊新增動(dòng)作，選擇“移動(dòng)”動(dòng)作

第四步：配置動(dòng)作，勾選“表情標(biāo)”前復(fù)選框

移動(dòng)到絕對(duì)位置，點(diǎn)擊x后面的fx,打開“編輯值”窗口，點(diǎn)擊“新增局部變量”設(shè)置LVAR1=部件.表情標(biāo)，點(diǎn)擊“插入變量、函數(shù)”，選擇“部件”下面的x,然后再選中“This”選擇LVAR1，點(diǎn)擊“確定”保存編輯并關(guān)閉“編輯值”窗口

點(diǎn)擊y后面的fx,打開“編輯值”窗口，點(diǎn)擊“新增局部變量”設(shè)置LVAR1=部件.表情標(biāo)，點(diǎn)擊“插入變量、函數(shù)”，選擇“部件”下面的y，再選中“This”選擇LVAR1，在LVAR1.y后面加-30，點(diǎn)擊“確定”保存編輯并關(guān)閉“編輯值”窗口

繼續(xù)同樣的操作設(shè)置“表情、圖片標(biāo)、圖片、@、朋友、同步、同步標(biāo)、廣播”移動(dòng)到同樣的位置：絕對(duì)位置“x:[[LVAR1.x]]，y:[[LVAR1.y-30]]”

三、設(shè)置”文字改變時(shí)“事件

步驟9：

選中“輸入文本1”雙擊“文字改變時(shí)”事件，打開用例編輯器設(shè)置

第一步：編輯條件：如果部件值長(zhǎng)度 .當(dāng)前部件?≦?"140"

動(dòng)作1

第二步：點(diǎn)擊新增動(dòng)作，選擇“設(shè)置文本”動(dòng)作

第四步：配置動(dòng)作，勾選“字?jǐn)?shù)統(tǒng)計(jì)”前復(fù)選框，將文本值設(shè)置為點(diǎn)擊值后面的fx，打開“編輯值”窗口，點(diǎn)擊“新增局部變量”設(shè)置LVAR1=部件文字.輸入文本1，點(diǎn)擊“插入變量、函數(shù)”，選擇LVAR1，選擇“字符串”下面的length,加入編輯文字設(shè)置為：還能輸入[[140-LVAR1.length]]字，點(diǎn)擊“確定”保存編輯并關(guān)閉“編輯值”窗口。

動(dòng)作2

第二步：點(diǎn)擊新增動(dòng)作，選擇“顯示/隱藏”動(dòng)作

第四步：配置動(dòng)作，勾選“轉(zhuǎn)長(zhǎng)微博”前復(fù)選框，可見性“隱藏”，點(diǎn)擊確定

步驟10：

選中“輸入文本1”繼續(xù)設(shè)置“文字改變時(shí)”時(shí)事件，重復(fù)步驟9操作（或復(fù)制用例1)，修改用例相關(guān)參數(shù)

用例2：編輯條件：如果部件值長(zhǎng)度 .當(dāng)前部件 > "140"

動(dòng)作1：將文本值設(shè)置為：超出[[LVAR1.length-140]]字，您可以轉(zhuǎn)成長(zhǎng)微博發(fā)表

動(dòng)作2：顯示“轉(zhuǎn)長(zhǎng)微博”，并置于頂層

四、設(shè)置“鼠標(biāo)移入時(shí)、鼠標(biāo)單擊時(shí)、顯示”事件

步驟11：

選中“轉(zhuǎn)長(zhǎng)微博”雙擊“鼠標(biāo)移入時(shí)”事件，打開用例編輯器設(shè)置

動(dòng)作1

第二步：點(diǎn)擊新增動(dòng)作，選擇“顯示/隱藏”動(dòng)作

第四步：配置動(dòng)作，勾選“外框1-焦點(diǎn)、外框2-焦點(diǎn)、轉(zhuǎn)長(zhǎng)微博、字?jǐn)?shù)統(tǒng)計(jì)”前復(fù)選框，可見性“顯示”，更多選項(xiàng)設(shè)置“轉(zhuǎn)長(zhǎng)微博、字?jǐn)?shù)統(tǒng)計(jì)”置于頂層

動(dòng)作2

第二步：點(diǎn)擊新增動(dòng)作，選擇“顯示/隱藏”動(dòng)作

第四步：配置動(dòng)作，勾選“外框1、外框2”前復(fù)選框，可見性“隱藏”

動(dòng)作3

第二步：點(diǎn)擊新增動(dòng)作，選擇“選中”動(dòng)作

第四步：配置動(dòng)作，勾選“外框1-焦點(diǎn)、外框2-焦點(diǎn)”前復(fù)選框，選擇選定狀態(tài)值=true

步驟12：

選中“轉(zhuǎn)長(zhǎng)微博”雙擊“鼠標(biāo)單擊時(shí)”事件，打開用例編輯器設(shè)置

動(dòng)作1

第二步：點(diǎn)擊新增動(dòng)作，選擇“顯示/隱藏”動(dòng)作

第四步：配置動(dòng)作，勾選“長(zhǎng)微博面板”前復(fù)選框，可見性“顯示”，更多選項(xiàng)：置于頂層

動(dòng)作2

第二步：點(diǎn)擊新增動(dòng)作，選擇“顯示/隱藏”動(dòng)作

第四步：配置動(dòng)作，勾選“轉(zhuǎn)長(zhǎng)微博，可見性“隱藏”

動(dòng)作3

第二步：點(diǎn)擊新增動(dòng)作，選擇“移動(dòng)”動(dòng)作

第四步：配置動(dòng)作，勾選“表情標(biāo)”前復(fù)選框

移動(dòng)到絕對(duì)位置，點(diǎn)擊x后面的fx,打開“編輯值”窗口，點(diǎn)擊“新增局部變量”設(shè)置LVAR1=部件.表情標(biāo)，點(diǎn)擊“插入變量、函數(shù)”，選擇“部件”下面的x,然后再選中“This”選擇LVAR1，點(diǎn)擊“確定”保存編輯并關(guān)閉“編輯值”窗口

點(diǎn)擊y后面的fx,打開“編輯值”窗口，點(diǎn)擊“新增局部變量”設(shè)置LVAR1=部件.表情標(biāo)，點(diǎn)擊“插入變量、函數(shù)”，選擇“部件”下面的y，再選中“This”選擇LVAR1，在LVAR1.y后面加-30，點(diǎn)擊“確定”保存編輯并關(guān)閉“編輯值”窗口

繼續(xù)同樣的操作設(shè)置“表情、圖片標(biāo)、圖片、@、朋友、同步、同步標(biāo)、廣播”移動(dòng)到同樣的位置：絕對(duì)位置，“x:[[LVAR1.x]]，y:[[LVAR1.y-30]]”

步驟13：

選中“長(zhǎng)微博面板”雙擊“顯示”事件，打開用例編輯器設(shè)置

第二步：點(diǎn)擊新增動(dòng)作，選擇“設(shè)置文本”動(dòng)作

第四步：配置動(dòng)作，勾選“輸入文本2”前復(fù)選框，將文本設(shè)置：部件文本=輸入文本1

四、設(shè)置“鼠標(biāo)單擊時(shí)”事件

步驟14：

在長(zhǎng)微博動(dòng)態(tài)面板狀態(tài)1的編輯區(qū)，選中第1張縮略圖，雙擊“鼠標(biāo)單擊時(shí)”事件，打開用例編輯器設(shè)置

第二步：點(diǎn)擊新增動(dòng)作，選擇“設(shè)置面板狀態(tài)”動(dòng)作

第四步：配置動(dòng)作，勾選“背景”前復(fù)選框，選擇狀態(tài)：狀態(tài)1

繼續(xù)分別設(shè)置后面7張縮略圖“鼠標(biāo)單擊時(shí)”事件，狀態(tài)分別對(duì)應(yīng)為：狀態(tài)2、狀態(tài)3、狀態(tài)4、狀態(tài)5、狀態(tài)6、狀態(tài)7、狀態(tài)8

步驟15：

在長(zhǎng)微博動(dòng)態(tài)面板狀態(tài)1的編輯區(qū)，選中關(guān)閉按鈕，雙擊“鼠標(biāo)單擊時(shí)”事件，打開用例編輯器設(shè)置

第二步：點(diǎn)擊新增動(dòng)作，選擇“顯示/隱藏”動(dòng)作

第四步：配置動(dòng)作，勾選“長(zhǎng)微博面板”前復(fù)選框，可見性“隱藏”

步驟16：

生成原型，預(yù)覽效果