2012年5月6日 星期日

大量圖片的互動處理 Autoviewer的使用


} Image Gallery 說故事的新方式,報導新利器! ~
Autoviewer是現在很熱門的 flash gallery 的應用程式。它搭配著photoshop來使用,簡單、快速。
Flash gallery的應用是很重要的多媒體文本經驗值之一,可以在操作使用過程,體會互動性思考大量圖像的版面思考

Autoviewer 的呈現範例
Autoviewer 是 SimpleViewer 系列的 image gallery 中,最基礎的一個。這一列系的 image gallery 好用,易操作,更重要的是非常適合敘事性文章的使用,如新聞文本。其中的 TiltViewerPostCardViewer 等,都易於溶入新聞性報導的呈現。


使用軟體:
  1. Photoshop cs 5.1
  2. 下載 autoviewer ( 直接下載 Airtight Photoshop CS4 scripts installer  )
  3. 下載 Notepad ++ (直接下載  Notepad++ v6.1.2 Installer)
Q:為什麼要使用Notepad++ 來取代常用的「記事本」,以進行語法編輯呢?
A:目前中文有二種常用編碼,Big5及UTF-8,「記事本」軟體太陽春,不會
     自動判斷編碼,常導致出現亂碼。用Notepad++則可解決這一問題。如以下教
     學範例,使用記事本會出現亂碼,使用Notepad++則不會。

î 教學影片 1/3:軟體下載及安裝


下載及安裝操作重點要項:
(1) autoviewer是photoshop的外掛擴充使用軟體,必須在使用photoshop中才能操作使用。
(2) 安裝過程要有Adobe Extension Manager這一軟來協助安裝,通常在CS套裝軟體內會有附,也可以免費下載。


î 教學影片 2/3:Autoviewer基礎使用



Autoviewer使用操作重點要項:
(1) 在使用Autoviewer之前,請先使用photoshop來檢查調整照片。
(2) Autovierwer所產生的檔案夾,請要置入到可對外連結的網路空間或FTP。
(3) 若要使用dropbox免費空間,請看安裝及使用說明
(4) 教學影片使用新聞系Ftp,及檔案網址的轉換


î 教學影片 3/3:使用 iframe 嵌入網頁 

老師強烈建議使用這個方法,簡單、快速! 在使用 embed 語法所碰到的許多「無言」問題, 都可以用這一嵌入語法獲得解決。


語法:
<iframe frameborder="0" height="570" scrolling="no" src="http://lmcdwriting.org/userfiles/lmcsilver20121007/gallery1026/20121122/index.html" width="430"></iframe>

語法說明:
(1) iframe 的寬度和高度要比你所設定的照片寬、高,都要大上一點才好。例如,範例中的照片高度 373,寬度是560,所以我設iframe的寬度(width)是580,高度(height)是393,比照片各大上20px。
(2) 把做好的 gallery 資料夾放到 FTP 或 Dropbox 後,請找出 index.html 這個檔案的位置網址,再 放到 src="xxx"中,即紅色字體部分。 即可將整個語法嵌入網頁。


î 教學影片中的範例呈現 




沒有留言:

張貼留言