【Axure高级教程】在原型中插入音频和视频

2013/09/13 15:42
阅读数 1.7W
不得不说Axure很强大,但是它也不是万能的,比如说Axure本身不提供插入本地多媒体文件的功能(虽然用“内部框架”可以实现插入网络媒体的效果, 但是由于需要加载,网络环境不好则会严重影响效果)。所以我一直想尝试着在原型中插入本地多媒体文件,甚至想过改js代码,无奈时间和技术能力有限,没有 继续尝试。于是苦思冥想了一番,终于找到一个看似繁琐,但实为简单的解决办法,我们一起来看一看。

第一步:找好音频、视频的链接及文件
   该范例中成功插入了音频及视频,既支持网络链接,也支持本地文件。网络链接建议采用源地址,例如优酷视频的源地址可以通过如下方式找到:
【Axure高级教程】在原型中插入音频和视频
 
第二步:插入网络音频及视频
   可能一些朋友曾经尝试并且成功的用Axure中的“内部框架”在原型中插入了视频和音频,“内部框架”本身是具有该功能的,只是较为隐藏,不易发现。后面我们会一起探讨插入本地多媒体文件的方法,我们先来看看用“内部框架”如何插入网络多媒体。
【Axure高级教程】在原型中插入音频和视频

1.如上图,在组件中找到内部框架。
【Axure高级教程】在原型中插入音频和视频
2.如上图,对“内部框架”点击鼠标右键--编辑内部框架--编辑默认目标。
【Axure高级教程】在原型中插入音频和视频
3.如上图,选择“连接到外部URL或文件”,然后在“超链接”中输入“网络音频”及“网络视频”的源地址。确定后生成原型,原型打开后将会自动加载“超 链接”的“音频”和“视频”。是否自动播放,由链接中的音频和视频是否自动播放决定,通常音乐会自动播放,而视频需要触发播放。另外,内部框架会自动调 整,适应视频的分辨率。
4.禁止媒体文件自动播放,需要设定手动触发播放的条件,例如:点击按钮时,其用例的设定为: 在内部框架中打开链接--选中内部框架--链接到外部URL或文件--输入“网络音乐”及“网络视频”的源地址。则在原型中通过点击按钮,触发音频和视频链接的加载。
 
第三步:插入本地音频及视频,也是最复杂的一步
   这里或许有朋友会问,我直接在内部框架中加载本地文件的链接地址不就可以了吗?但是你尝试了就会发现, 被加载的本地文件播放时,是会弹出播放器的!
   不过你是否发现了可以模仿插入“网络音频”和“网络视频”的办法—— 在本地生成“多媒体文件超链接”,然后再用“内部框架”打开这个链接,这样就不会弹出播放器。
   这个链接如何生成,生成后的链接能自动加载多媒体文件吗?
    做过网页的朋友,或者用过DreamWeaver的朋友应该清楚,用DreamWeaver就可以做到。所以我们在这里需要借用一个关键性的工具——DreamWeaver。
【Axure高级教程】在原型中插入音频和视频
 
【Axure高级教程】在原型中插入音频和视频
1.生成插入本地多媒体文件链接,见上图。每个多媒体文件生成独立的链接。
【Axure高级教程】在原型中插入音频和视频
2.把音频、视频文件及对应的超链接放在Axure原型的文件夹目录下,建议分开放,便于区分。这样做的目的是什么:
【Axure高级教程】在原型中插入音频和视频
目的是为了在超链接中用 “相对路径”,从而避免使用“绝对路径”造成的 “放到其他电脑中超链接文件无法加载”的问题。(关于相对路径和绝对路径,不清楚的同学可以百度一下)
【Axure高级教程】在原型中插入音频和视频
3.手动播放和停止音频和视频。手动播放音频和视频,采用前面第二步第4点介绍的办法即可。手动停止音频和视频,其实也很简单,在内部框架中打开一个非多媒体文件链接即可。
4.隐藏“音频内部框架”,将其转换成动态面板,状态设为“隐藏”即可。
 
总结:
1.插入网络音频和视频:在内部框架中打开网络多媒体的链接地址;
2.插入本地音频和视频:用DreamWeaver生成本地多媒体文件链接,在内部框架中打开该链接,注意用“相对路径”。
 
Demo下载地址:
展开阅读全文
打赏
8
6 收藏
分享
加载中
更多评论
打赏
0 评论
6 收藏
8
分享
返回顶部
顶部