萧何 发表于 2012-9-5 09:03:15

Axure制作QQ签名效果——axure案例解析

在QQ的主面板上，可以实现QQ签名的输入更改

显示状态：
http://www.heguangming.com/wp-content/uploads/2012/08/31.jpg

输入状态：
http://www.heguangming.com/wp-content/uploads/2012/08/4.jpg

Axure实际制作

问题分析：2种不同的状态可以用动态面板来解决，本案例的重点是如何保证在输入状态下修改的内容，可以传递到显示状态中

第一步：使用snagit截图工具，截一个QQ面板的头部部分，如图：
http://www.heguangming.com/wp-content/uploads/2012/08/31.jpg

第二步：拖动一个矩形组件，覆盖到QQ签名部分
http://www.heguangming.com/wp-content/uploads/2012/08/4.jpg

并给其设置和QQ面板一样的色调，并设置矩形的边框为无，覆盖到QQ签名部分
矩形组件尺寸：160*21
http://www.heguangming.com/wp-content/uploads/2012/08/6.jpg

第三步：设置动态面板

拖动一个动态面板到页面编辑区域，并设置尺寸为160*21.添加2个状态，分别为显示状态、输入状态
http://www.heguangming.com/wp-content/uploads/2012/08/7.jpg


编辑2个状态，在显示状态中，放入我们刚才制作的矩形组件，在输入状态中放入 一个尺寸为160*21的文本框组件
http://www.heguangming.com/wp-content/uploads/2012/08/8.jpg、
http://www.heguangming.com/wp-content/uploads/2012/08/9.jpg
并将动态面板移动到之前的矩形组件位置（既：QQ签名位置）

第四步：设置 显示状态下组件交互，单击时到输入状态
http://www.heguangming.com/wp-content/uploads/2012/08/111.jpg

第五步：键盘输入时，设置变量值等于输入框的值
http://www.heguangming.com/wp-content/uploads/2012/08/121.jpg

第六步：当失去焦点时，设置到动态面板到显示状态，并设置矩形组件的值等于变量值
http://www.heguangming.com/wp-content/uploads/2012/08/131.jpg

郭纯纯 发表于 2012-9-5 10:07:37

:handshake很牛

郭纯纯 发表于 2012-9-5 10:07:45

:handshake   很牛

蓝海立业 发表于 2012-9-5 13:27:03

还有瑕疵，输入完内容后，按回车键就不行，QQ本身可以体验到

小耳朵猪 发表于 2012-9-5 13:36:28

让矩形框中显示的内容=输入框的内容？如何设置？？..

是让动态面板显示状态的内容=输入状态的内容吗？..

小耳朵猪 发表于 2012-9-5 13:43:19

设置矩形组件的值等于变量值时，选择不到输入？？是什么问题？...6.0版本...

萧何 发表于 2012-9-5 14:49:04

5# 小耳朵猪

设置变量=输入的值

在失去焦点的时候设置矩形组件的值=变量的值

萧何 发表于 2012-9-5 14:49:42

6# 小耳朵猪


不好意思 这个问题 我也不清楚要不尝试 升级到6.5版本    论坛可以有免费下载
页: [1]
查看完整版本: Axure制作QQ签名效果——axure案例解析