【Axure高級教程】在原型中插入音頻和視頻

不得不說Axure很強大，可是它也不是萬能的，好比說Axure自己不提供插入本地多媒體文件的功能（雖然用「內部框架」能夠實現插入網絡媒體的效果， 可是因爲須要加載，網絡環境很差則會嚴重影響效果）。因此我一直想嘗試着在原型中插入本地多媒體文件，甚至想過改js代碼，無奈時間和技術能力有限，沒有 繼續嘗試。因而苦思冥想了一番，終於找到一個看似繁瑣，但實爲簡單的解決辦法，咱們一塊兒來看一看。

第一步：找好音頻、視頻的連接及文件

   該範例中成功插入了音頻及視頻，既支持網絡連接，也支持本地文件。網絡連接建議採用源地址，例如優酷視頻的源地址能夠經過以下方式找到：

 

第二步：插入網絡音頻及視頻
   可能一些朋友曾經嘗試而且成功的用Axure中的「內部框架」在原型中插入了視頻和音頻，「內部框架」自己是具備該功能的，只是較爲隱藏，不易發現。後面咱們會一塊兒探討插入本地多媒體文件的方法，咱們先來看看用「內部框架」如何插入網絡多媒體。

1.如上圖，在組件中找到內部框架。

2.如上圖，對「內部框架」點擊鼠標右鍵--編輯內部框架--編輯默認目標。

3.如上圖，選擇「鏈接到外部URL或文件」，而後在「超連接」中輸入「網絡音頻」及「網絡視頻」的源地址。肯定後生成原型，原型打開後將會自動加載「超 連接」的「音頻」和「視頻」。是否自動播放，由連接中的音頻和視頻是否自動播放決定，一般音樂會自動播放，而視頻須要觸發播放。另外，內部框架會自動調 整，適應視頻的分辨率。

4.禁止媒體文件自動播放，須要設定手動觸發播放的條件，例如：點擊按鈕時，其用例的設定爲： 在內部框架中打開連接--選中內部框架--連接到外部URL或文件--輸入「網絡音樂」及「網絡視頻」的源地址。則在原型中經過點擊按鈕，觸發音頻和視頻連接的加載。

 

第三步：插入本地音頻及視頻，也是最複雜的一步

   這裏或許有朋友會問，我直接在內部框架中加載本地文件的連接地址不就能夠了嗎？可是你嘗試了就會發現， 被加載的本地文件播放時，是會彈出播放器的！
   不過你是否發現了能夠模仿插入「網絡音頻」和「網絡視頻」的辦法—— 在本地生成「多媒體文件超連接」，而後再用「內部框架」打開這個連接，這樣就不會彈出播放器。

   這個連接如何生成，生成後的連接能自動加載多媒體文件嗎？

    作過網頁的朋友，或者用過DreamWeaver的朋友應該清楚，用DreamWeaver就能夠作到。因此咱們在這裏須要借用一個關鍵性的工具——DreamWeaver。

 

1.生成插入本地多媒體文件連接，見上圖。每一個多媒體文件生成獨立的連接。

2.把音頻、視頻文件及對應的超連接放在Axure原型的文件夾目錄下，建議分開放，便於區分。這樣作的目的是什麼：

目的是爲了在超連接中用 「相對路徑」，從而避免使用「絕對路徑」形成的 「放到其餘電腦中超連接文件沒法加載」的問題。（關於相對路徑和絕對路徑，不清楚的同窗能夠百度一下）

3.手動播放和中止音頻和視頻。手動播放音頻和視頻，採用前面第二步第4點介紹的辦法便可。手動中止音頻和視頻，其實也很簡單，在內部框架中打開一個非多媒體文件連接便可。

4.隱藏「音頻內部框架」，將其轉換成動態面板，狀態設爲「隱藏」便可。

 

總結：

1.插入網絡音頻和視頻：在內部框架中打開網絡多媒體的連接地址；

2.插入本地音頻和視頻：用DreamWeaver生成本地多媒體文件連接，在內部框架中打開該連接，注意用「相對路徑」。

 

Demo下載地址：

http://vdisk.weibo.com/s/fzpRy