如果你想把現成的網頁,或者flash swf檔案直接放進 Axure RP的prototype中,可以使用 『inline frame』 widget來幫助你達成這個作法。(Axure RP Pro 4.6以上的版本支援inline frame widget的功能)
操作方式很簡單:
step 1. 把Inline frame widget放到畫布上;
step 2. 按滑鼠右鍵 Edit inline frame > Edit Default Target;
step 3. 然後選擇link到一個外部URL或file即可。
嵌入flash
比如說,想要嵌入flash到prototype裡頭,而這個flash檔的網址是 http://www.example.com/video.swf,接著把這個網址輸入 inline frame的 Default Target,輸出Prototype之後,就會再瀏覽器上看到flash出現在prototype裡頭了。如果要讓prototype上的flash更好看,可以設定inline frame的 『Toggle Border』,把border去掉。
如果swf檔是在自己的電腦,那麼把swf檔放到prototype的同一個資料夾目錄,接著把這個flash檔名輸入到inline frame的 Default Target,輸出Prototype之後,一樣會在瀏覽器上看到flash出現在prototype裡頭了。
要留意的是:
1. flash swf檔本身的屬性如果是自動縮放到視窗大小,就會自己縮放符合inline frame的大小, 否則就會受到inline frame的大小限制而遮蔽
2.建議以IE觀看網站原型。在IE跟Firefox上檢視嵌入flash的prototype,IE的表現比較正常的,在Firefox上偶爾會無法顯示flash
嵌入現成網頁
如果想把現成網頁加入prototype,Axure RP目前並沒有辦法直接餵入 html code,因此也是得採用inline frame widget。
將inline frame widget的size設定成螢幕大小,比如1024×768,然後再特定的現成網頁,輸入為Default Target,這樣一來就會在prototye上看到這個現成的網頁了。這裡有個嵌入網頁的例子。
嵌入Youtube video
那麼嵌入youtube video又是怎麼回事呢? 其實最簡單的方式是利用擷圖軟體 (推薦Faststone Capture 5.3),抓個youtube video的畫面放進來。
如果你並不滿意只抓了畫面貼近來,一定要嵌入會播放的youtube video,那麼可以用下面的方式來嵌入Prototype。
step 1. 將Youtube video提供的embed html code,另存成一個單一html file (假設命名為 youtube.htm);
step 2. 將youtube.htm 放到prototype的同一個資料夾目錄;
step 3. 透過上述的操作方式,設定inline frame的 Default Target是youtube.htm。
這麼一來輸出prototype就可以看到網站原型中可以看到可播放的video了。
依照這種作法,很多特殊的網頁呈現方式,都可以嵌入到prototype裡頭。但是建議Prototype的設計人員,能夠抓圖來模仿就盡量抓圖,不需要為了完全的擬真去模擬這些設計,縮短Prototype設計的時間,才是Axure RP提供快速原型設計(Rapid Prototyping)的本意。




很受用的經驗分享!
因為我的案例很特殊,一定要能動態demo影音,所以我很希望能夠節取youtube等方式進行demo。
但是依照了上面的說明,還是無法成功>』<。去youtube抓了embeded code然後用word存成html格式。然後將該檔案存在我prototype中該案的資料夾內。之後透過external link輸入該檔案位置。
我是不是作錯了什麼?謝謝。
不能用 『Word』去存成HTML,Word會自己把Youtube的code弄的一塌糊塗。
請用 『notepad』 記事本這類純文字編輯軟體,去存成html (也就是存檔後命名檔名為 .html, 比如 video.html 『。
直接打開 video.html,看看能否看到 youtube的video正常播放,如果這個步驟ok了。接下來就按照網頁上的教學即可。
Richard,按照您的話之後成功了^__________^,因此我除想分享一點經驗。notepad網路上有中文版(含主程式),輸入youtube的embeded code後另存成html格式,將其檔案放入該案的prototype的資料夾中,然後透過點選(或quick link)inline frame,在external URL裡面輸入該檔案的位置,就可以成功了。
另外embeded code裡面有包含了該影片的播放尺寸,inline frame宜配合相關尺寸,或協同進行修正。
再次謝謝Richard^_^
[...] 利用Inline Frame嵌入flash/video [...]