網站企劃顧問/專案/課程及Axure RP-悠識數位



2008/8/20

利用Inline Frame嵌入flash/video

如果你想把現成的網頁,或者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)的本意。


訪客留言

  1. C47 2008/12/3 21:31:04

    很受用的經驗分享!

  2. Frank 2009/7/26 01:28:19

    因為我的案例很特殊,一定要能動態demo影音,所以我很希望能夠節取youtube等方式進行demo。
    但是依照了上面的說明,還是無法成功>』<。去youtube抓了embeded code然後用word存成html格式。然後將該檔案存在我prototype中該案的資料夾內。之後透過external link輸入該檔案位置。
    我是不是作錯了什麼?謝謝。

  3. richard 2009/7/26 09:44:05

    不能用 『Word』去存成HTML,Word會自己把Youtube的code弄的一塌糊塗。

    請用 『notepad』 記事本這類純文字編輯軟體,去存成html (也就是存檔後命名檔名為 .html, 比如 video.html 『。

    直接打開 video.html,看看能否看到 youtube的video正常播放,如果這個步驟ok了。接下來就按照網頁上的教學即可。

  4. Frank 2009/7/26 12:54:40

    Richard,按照您的話之後成功了^__________^,因此我除想分享一點經驗。notepad網路上有中文版(含主程式),輸入youtube的embeded code後另存成html格式,將其檔案放入該案的prototype的資料夾中,然後透過點選(或quick link)inline frame,在external URL裡面輸入該檔案的位置,就可以成功了。
    另外embeded code裡面有包含了該影片的播放尺寸,inline frame宜配合相關尺寸,或協同進行修正。
    再次謝謝Richard^_^

  5. MIRROR » Blog Archive » Axure教程网络资料汇集 2010/1/19 13:17:52

    [...] 利用Inline Frame嵌入flash/video [...]

張貼留言

* 為必填,您的email並不會被顯示
姓名

Email *

下載Axure RP 最佳網站企劃軟體 網站企劃/Axure RP原型設計課程介紹 網站企劃FB粉絲專頁 Axure RP User Club FB粉絲專頁