在Axure文档中导入动效视频

我们都遇到过如何跟开发讲清楚动效设计的问题。最近在优化云音乐Android平台的动效，Material Design风格下的动效变得更为丰富而有层次，为了更清楚地向开发传达设计细节，我希望将做好的动效在Axure文档里表现为视频而非gif的形式，开发可以在看的过程中随时暂停/播放/来回拖动进度，以便更清楚地观察动效在每个阶段的状态。

在Axure导入动效视频，最简单的做法是使用软件自带的Inline Frame控件，具体操作如下：

1. 将Inline Frame控件拖到工作区

2. 将其属性设置为“video”，控件会变为如下形态，拖动控件四角可改变视频显示区域的大小

3.将动效视频上传至第三方视频网站，比如优酷。双击控件，在输入框中填写视频的url。

这样在生成的交互文档里，可以查看来自第三方网站的视频，视频嵌套的是该网站的播放控制器。

但是将视频上传到第三方网站毕竟有点麻烦，而且还避免不了来自第三方的广告。

重点来了，如果不想逼疯开发大哥们，教大家一种导入本地视频的方法，具体操作如下：

4. 使用记事本创建一个html文件，比如命名为“gridToPage.html”。贴如下代码：

若视频标题为中文，则在保存时需将编码改为UTF-8。

5. 将视频文件、“gridToPage.html”和Axure生成的html文件放在同一个文件夹下

6. 在Inline Frame的链接属性中，关联刚才创建的html文件而非视频文件，因为“gridToPage.html”已经放在同一个文件夹下，所以直接填写文件名即可。

这样在生成的交互文档上，可以控制视频播放了。鼠标在视频上悬浮时会出现如下播放控制条。

网易云音乐交互设计组