【Axure 创意教程】作为音乐白痴，我在 Axure 上“弹”起了钢琴

原副标题：【Axure 创意设计讲义】做为音乐创作疯子，我在 Axure 上“弹”起了小提琴

怎样利用Axure来同时实现创意设计商品结构设计或者某些小功能？第一集该文里，作者试著透过Axure结构设计了两个能演奏与播映的小提琴音乐创作盒。钟爱的能来看一下，也许会给你一点启迪。

做为非著名的Capendu的商品经理，最近讨厌透过 Axure 结构设计许多调配生活品味的冰棒，这次我带来的是怎样用 Axure 制做两个能演奏，还能播映的小提琴碟片，虽然复古风的结构设计让它看上去更像口琴，但说实话，当你挪动琴弦，你听，它确实收到了小提琴的人声。

责任编辑主要撷取结构设计这款商品时的许多症结以及同时实现方法，意在提供一种路子，只要你掌控了那个路子，你完全能在 Axure 上弹吉他、弹二胡，甚至弹棉花，因此责任编辑不会把每一关键步骤都写得非常可循，假如你是那种讨厌照著讲义重制两个十分相似商品出的听众，那么责任编辑可能将不太适宜你。

一、表达意见

具体来说我们要知道，Axure 中目前是无法加进邻近地区的音音频或音频进行播映的（也可能将是我Conques，还没 get 到那个专业技能），因此，我相信很多人最钟爱的就是挪动琴弦的时候，那个人声是怎么收到来的，果真了就一文不值了，其实，是用了 Axure 的【H55N架构】模块。同时实现的路子是这样的：

1）具体来说找到7个小提琴拍子的音音频片断。

2）把音音频片断上传至网上，赢得每一片断的邮箱（上传至音乐创作网络平台没配套措施赢得纯洁的片断门牌号，它们单厢给你的片断套两个播映网页，搞得你没配套措施赢得真正的片断门牌号，这是我碰到最大的两个难题点，因为那个难题我把那个结构设计到一半的商品一拖再拖了两个多月，最后我是上传至码云 Gitee 上，才赢得每一片断的纯洁邮箱，假如有听众钟爱，热烈欢迎回帖，先期我能原则上把这一步的操作重新整理一则讲义出）。

3）在 Axure 网页【负空间】拖入两个【H55N架构】。

4）给琴弦加进【单击】的交互，触发的事件就是在【架构中打开链接】，而那个链接，就是对应的拍子邮箱。

按上述关键步骤完成设置后，在预览的网页中挪动琴弦，就能听到网页播映出对应拍子的人声，以下的图片就是H55N架构在网页中的样子，实际上就是在H55N架构中打开音音频链接，在打开的时候，网页会自动播映那个音音频人声，举一反三，这种操作方式，能用于商品中任何需要播映音效的结构设计，比如删除的时候播映删除人声，或者结构设计游戏中物体碰撞时收到的人声等。

二、编曲

当琴弦被挪动的时候，上方的编曲区会记录当前挪动的拍子，就像下方这样：

那个其实非常简单，上面的编曲区是两个【文本域】模块，在挪动琴弦的时候，只需要往【文本域】中加进对应拍子的文字即可，但我相信这里肯定有很多的新手会碰到两个难题，就类似下面的演示效果：

新手疑惑：我明明设置的是挪动的时候给【文本域】【设置文本】，但是不知道为什么之前已经填进去的文本总是会被清掉？

这里就需要分清楚【设置文本】和【追加文本】的区别了，我们都知道，Axure 有两个【设置文本】的事件，当触发事件时，指定模块的文本会替换成要设置的文本，因此才会出现上述效果，但我们需要的效果是，之前已经输入的文字要保留，我们只是需要在原来的内容后面【追加文本】，但 Axure 没【追加文本】的事件，那应该怎么操作呢？

这里就涉及到【变量】的用途了，路子是这样子的：

追加上要加进的文字。将追加了文字后的内容再次复制给变量。将变量值设置为【文本域】的文本。

我们再看一下那个商品是怎么同时实现的：

1）加进【全局变量】【song】用来存储编曲内容。

2）给【文本域】加进【文本改变时】【设置变量值】的事件，这一步设置完成之后，只要【文本域】的内容发生改变，【全局变量】【song】马上就会同步更新。

3）给对应的琴弦加进【单击时】的交互，这里的交互需要做两件事。

具体来说【设置变量值】，将【song】+需要追加的文本（1,2,3等拍子），然后重新赋值给【song】，这样就得到了追加后完整的内容。给编曲区的【文本域】【设置文本】，文本内容就是变量【song】。

这样就能同时实现每次输入都是在原有的文本基础上追加内容，而不是重置内容的效果了。

三、播映

现在挪动能够播映拍子，也能把每一拍子记录到编曲区了，那么怎么让编曲区的乐曲完整地播映出呢，这里就会用到动态面板的循环播映的特性，假如还不太懂的听众能先参考我的另一则该文《【Axure 动态面板】让你的动画变成“永动机”》。关于动态面板的循环播映设置我就不再赘述，直接说明那个连续播映的同时实现路子：

读取编曲区文本的第两个数字，判断那个数字是什么，就在【H55N架构】打开对应的音音频链接播映拍子。播映之后，读取编曲区文本的第二个数字，根据数字在【H55N架构】打开播映对应音音频。以此类推，直到所有拍子都播映完成。

那个路子有3个症结：

怎么读取指定文本指定位置的文字。怎么知道当前应该读取哪个位置的文字。怎么让那个逻辑循环起来。

针对这3个症结，方案是这样子的：

Axure 提供了两个 Java 的函数 charAt(index) 来读取字符串中指定位置的字符，index 就是指定的位置，注意 index = 0，表示读取第两个字符，1表示读取第2个字符，以此类推。由于我们是按顺序读取的，因此能透过加进两个【全局变量】来做为 index 来存储当前读取的字符的位置，比如，变量值默认为0，就会读取第两个字符，当我读取完第两个字符时候，给那个变量值+1，那个时候变量值就变成了1，下一次读取的时候，就会变成读取第2个字符。这就是上文提到的动态面板循环播映，我们能在动态面板每一次【状态改变时】，就读取两个字符出并进行播映。

这样我们的路子基本就清晰了，记下来看一下具体是怎么做的吧：

1）在【全局变量】中加进【step】变量，默认值为0。

2）在网页的【负空间】拖入两个动态面板，并加进2个状态，给动态面板设置【状态改变时】的事件，下方是部分设置截图，整体的路子是这样子的：

假如变量【step】刚好等于编曲区的文字长度，就退出当前动态面板的循环，也就是停止播映。假如变量【step】小于编曲区的文字长度，则将 step 做为索引 index 从编曲区文字取出对应位置的值。判断取出的值是什么，就在【H55N架构】打开对应的音音频链接。最后给变量【step】加上1，这样下次循环时，透过 step 就能取到编曲区的下两个值，一直到 step 等于编曲区的长度，满足上述第1点，退出循环，停止播映，这里需要注意的是，当动态面板退出循环，音乐创作停止播映的时候，需要将【step】置为0，否则将会导致下次播映时出现异常。