長微博怎么發(長微博怎么發長圖片)

?????????????????主要內容

在微博發布中，輸入文本時會有提示可輸入文本字數的變化，當文本字數超過140時，提示轉成長微博，點擊轉成長微博按鈕原微博的內容會同步到長微博文本框內，本課我們介紹使用axure里面的變量和函數實現這個效果。

交互說明

1.鼠標在輸入框（短微博）中為輸入狀態時，輸入框變高，輸入框背景顯示藍色陰影；未在輸入狀態時，輸入框（短微博）恢復默認高度，無藍色陰影

2.輸入框（短微博）輸入文本時，計算剩余可輸入文本數量并信息提示；輸入文本數量超過140時，提示文字改變，顯示“進入長微博”按鈕。

3.點擊“進入長微博”按鈕，打開新增長微博面板，輸入框（長微博）顯示文本與輸入框（短微博）內容相同。

4.新增長微博面板中，點擊面板背景縮略圖，更換面板背景圖。默認以首張縮略圖為背景。

一、原型制作

步驟1：

拖入單行文本標簽，制作微博示，編輯文字“來，說說你在做什么，想什么”

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

步驟2：

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

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

步驟3：

拖入文本標簽，設置位置與大小，編輯文字：還能輸入140字，命名：字數統計，并設為隱藏，再拖入文本標簽，編輯文字：轉成長微博，命名：轉長微博，并設為隱藏

步驟4：

拖入圖片部件，分別導入表情標、圖片標、@、同步標，拖入文本標簽分別對應編輯文字：表情、圖片、朋友、同步。根據圖標和文字分別對應命名：表情標、表情、圖片標、圖片、@、朋友、同步、同步標。

步驟5：

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

步驟6：

制作新增長微博

a.拖入動態面板，把它設為隱藏，命名：長微博面板，在狀態1里編輯，拖入矩形，調整位置與大小，編輯文字制作長微博標題欄；

b.拖入圖片部件，導入一張圖片作為，設置它置于最底層，并命名：背景，把它轉為動態面板，新增7個狀態，分別在每個狀態中導入背景圖片；

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

C.拖入兩個文本標簽，分別編輯文字：標簽、正文，放在對應的位置，拖入單行文本框，調整位置與大小，設置它的提示文字“請輸入標題，最多30字（選填）”，設置它的提示樣式，并設置最大字數是30

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

E.拖入矩形，調整大小與位置，編輯文字：生成長微博，拖入矩形和水平線，制作關閉按鈕

二、設置“獲得焦點時、失去焦點時”事件

步驟7：

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

動作1

第二步：點擊新增動作，選擇“顯示/隱藏”動作

第四步：配置動作，勾選“外框1、外框2”前復選框，可見性“隱藏”

動作2

第二步：點擊新增動作，選擇“顯示/隱藏”動作

第四步：配置動作，勾選“外框1-焦點、外框2-焦點、字數統計”前復選框，可見性“顯示”，并設置“字數統計”置于頂層

動作3

第二步：點擊新增動作，選擇“選中”動作

第四步：配置動作，勾選“外框1-焦點、外框2-焦點”前復選框，選擇選定狀態值=true

動作4

第二步：點擊新增動作，選擇“移動”動作

第四步：配置動作，勾選“表情標”前復選框

移動到絕對位置，點擊x后面的fx,打開“編輯值”窗口，點擊“新增局部變量”設置LVAR1=部件.表情標，點擊“插入變量、函數”，選擇“部件”下面的x,然后再選中“This”選擇LVAR1，點擊“確定”保存編輯并關閉“編輯值”窗口

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

繼續同樣的操作設置“表情、圖片標、圖片、@、朋友、同步、同步標、廣播”移動到同樣的位置：絕對位置“x:[[LVAR1.x]]，y:[[LVAR1.y+30]]”

步驟8：

選中“輸入文本1”雙擊“失去焦點時”事件，打開用例編輯器設置

動作1

第二步：點擊新增動作，選擇“顯示/隱藏”動作

第四步：配置動作，勾選“字數統計、外框1-焦點、外框2-焦點”前復選框，可見性“隱藏”

動作2

第二步：點擊新增動作，選擇“顯示/隱藏”動作

第四步：配置動作，勾選“外框1、外框2”前復選框，可見性“顯示”

動作3

第二步：點擊新增動作，選擇“選中”動作

第四步：配置動作，勾選“外框1-焦點、外框2-焦點”前復選框，選擇選定狀態值=true

動作4

第二步：點擊新增動作，選擇“移動”動作

第四步：配置動作，勾選“表情標”前復選框

移動到絕對位置，點擊x后面的fx,打開“編輯值”窗口，點擊“新增局部變量”設置LVAR1=部件.表情標，點擊“插入變量、函數”，選擇“部件”下面的x,然后再選中“This”選擇LVAR1，點擊“確定”保存編輯并關閉“編輯值”窗口

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

繼續同樣的操作設置“表情、圖片標、圖片、@、朋友、同步、同步標、廣播”移動到同樣的位置：絕對位置“x:[[LVAR1.x]]，y:[[LVAR1.y-30]]”

三、設置”文字改變時“事件

步驟9：

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

第一步：編輯條件：如果部件值長度 .當前部件 ≦ "140"

動作1

第二步：點擊新增動作，選擇“設置文本”動作

第四步：配置動作，勾選“字數統計”前復選框，將文本值設置為點擊值后面的fx，打開“編輯值”窗口，點擊“新增局部變量”設置LVAR1=部件文字.輸入文本1，點擊“插入變量、函數”，選擇LVAR1，選擇“字符串”下面的length,加入編輯文字設置為：還能輸入[[140-LVAR1.length]]字，點擊“確定”保存編輯并關閉“編輯值”窗口。

動作2

第二步：點擊新增動作，選擇“顯示/隱藏”動作

第四步：配置動作，勾選“轉長微博”前復選框，可見性“隱藏”，點擊確定

步驟10：

選中“輸入文本1”繼續設置“文字改變時”時事件，重復步驟9操作（或復制用例1)，修改用例相關參數

用例2：編輯條件：如果部件值長度 .當前部件 > "140"

動作1：將文本值設置為：超出[[LVAR1.length-140]]字，您可以轉成長微博發表

動作2：顯示“轉長微博”，并置于頂層

四、設置“鼠標移入時、鼠標單擊時、顯示”事件

步驟11：

選中“轉長微博”雙擊“鼠標移入時”事件，打開用例編輯器設置

動作1

第二步：點擊新增動作，選擇“顯示/隱藏”動作

第四步：配置動作，勾選“外框1-焦點、外框2-焦點、轉長微博、字數統計”前復選框，可見性“顯示”，更多選項設置“轉長微博、字數統計”置于頂層

動作2

第二步：點擊新增動作，選擇“顯示/隱藏”動作

第四步：配置動作，勾選“外框1、外框2”前復選框，可見性“隱藏”

動作3

第二步：點擊新增動作，選擇“選中”動作

第四步：配置動作，勾選“外框1-焦點、外框2-焦點”前復選框，選擇選定狀態值=true

步驟12：

選中“轉長微博”雙擊“鼠標單擊時”事件，打開用例編輯器設置

動作1

第二步：點擊新增動作，選擇“顯示/隱藏”動作

第四步：配置動作，勾選“長微博面板”前復選框，可見性“顯示”，更多選項：置于頂層

動作2

第二步：點擊新增動作，選擇“顯示/隱藏”動作

第四步：配置動作，勾選“轉長微博，可見性“隱藏”

動作3

第二步：點擊新增動作，選擇“移動”動作

第四步：配置動作，勾選“表情標”前復選框

移動到絕對位置，點擊x后面的fx,打開“編輯值”窗口，點擊“新增局部變量”設置LVAR1=部件.表情標，點擊“插入變量、函數”，選擇“部件”下面的x,然后再選中“This”選擇LVAR1，點擊“確定”保存編輯并關閉“編輯值”窗口

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

繼續同樣的操作設置“表情、圖片標、圖片、@、朋友、同步、同步標、廣播”移動到同樣的位置：絕對位置，“x:[[LVAR1.x]]，y:[[LVAR1.y-30]]”

步驟13：

選中“長微博面板”雙擊“顯示”事件，打開用例編輯器設置

第二步：點擊新增動作，選擇“設置文本”動作

第四步：配置動作，勾選“輸入文本2”前復選框，將文本設置：部件文本=輸入文本1

四、設置“鼠標單擊時”事件

步驟14：

在長微博動態面板狀態1的編輯區，選中第1張縮略圖，雙擊“鼠標單擊時”事件，打開用例編輯器設置

第二步：點擊新增動作，選擇“設置面板狀態”動作

第四步：配置動作，勾選“背景”前復選框，選擇狀態：狀態1

繼續分別設置后面7張縮略圖“鼠標單擊時”事件，狀態分別對應為：狀態2、狀態3、狀態4、狀態5、狀態6、狀態7、狀態8

步驟15：

在長微博動態面板狀態1的編輯區，選中關閉按鈕，雙擊“鼠標單擊時”事件，打開用例編輯器設置

第二步：點擊新增動作，選擇“顯示/隱藏”動作

第四步：配置動作，勾選“長微博面板”前復選框，可見性“隱藏”

步驟16：

生成原型，預覽效果