PS Zoomify 應用在 html 中 - 靶心放在快樂的地方 - udn部落格
靶心放在快樂的地方
作家:靶心放在快樂的地方
文章分類
    Top
    PS Zoomify 應用在 html 中
    2014/01/11 15:54:51
    瀏覽:1701
    迴響:3
    推薦:39
    引用0

     

    Zoomify是一家商業公司,利用網路串流技術,

    用Flash方式,將大圖切割成數層不同大小的影像,

    使得影像的呈現不需要全景讀取,所以就不需遷就網路傳輸效能而縮小影像尺寸。

    在網路上預覽影像時,可以自動縮放或平移的特效,

    讓瀏覽者看的更仔細,而且是免費的功能,

    在 Photoshop 中也有這個指令可用哦!

     

    首先用photoshop 開啟圖片影像 - 中興新村地圖

    檢視一下影像尺寸 (影像 -> 影像尺寸)

            

    寬度 3200px, 高度 1350px , 是張很大的影像, 

            

    我們就用 zoomify 來顯示無損於本尊的大圖像囉! 

    1. 檔案 -> 轉存 -> Zoomify...

           

       這次我們只做下方三個選項的設定

          

       1. 資料夾-輸出完成檔的位置,

           包含一個 html 文件和置於產生html 所需的資料的置放位置。

       2. 基本名稱 - (英文字母)產生的 html 名稱。

       3. 瀏覽器選項 - 輸出的視窗尺寸

       4. 完成後, 在瀏覽器預覽, 可看到資料夾和基本名稱的結果

          

          a. 拖曳拉桿對圖面做縮放 (圖面上連擊二下, 也可直接放大)

          b. 移動位置 (圖面上手形工具也可拖曳移動)

          c. 顯示完整圖面

           

    2. 到資料夾位置, 自動產生 map_img資料夾和  map.html檔案

        1. map.html 是剛才顯示的檔案, 而 map_img 則放置了產生 html 所需的資料

          

        2. map_jmg 資料夾內有個 swf和xml 的檔案, 和一個放置圖片的 TileGroup0

          

        3.  TileGroup0 資料夾內, 放置了被拆成不同比例的分解圖

          

    這麼簡單就完成了, 好像很難的工程了!

    其實我們也是摸黑進行, 只是執行個指令, 就完成了, 

    至於這中間做了什麼工, 我也莫宰羊, 

    這個年代, 難的事就留給聰明的人去做,

    我們一般人, 會執行就好了!

    現在再用另一個範本轉一次 zoomify,

    這次選用有導覽器的 Zoomify (顏色皆可)

          

    基本名稱 : map2

          

    map2.html 在左上則會有導覽器顯視目前視窗, 在全景圖的位置。

          

    現在要將做出來的 object 放置到我們的網頁中呢?

    1. 將產生的 map.html 和 map_img 資料夾複製至 網站的資料夾中

       (網站為 zoomify_test)

          

    2. 開啟 dreamweaver 到 zoomify_test 網站

       確認資料夾有 map.html 和 map_img 資料夾

         

    3. 開啟 map.html, 複製 object 標籤

         

    4. 新增 html , 貼在 body 中的所需位置中, 就完成了!!

         

     

    回應
    全站分類:知識學習 其他
    自訂分類:photoshop
    上一則: PS 製作背景發光效果
    下一則: PS 合成練習
    迴響(3) :
    3樓. 冠慧~
    2014/01/13 19:25
    感謝

    分享 好棒的 應 用 好材料

    祝福 一切 順心 平安


    是些學習記錄, 不然自己忘得超快的, 

    記錄的過程, 會讓自己學習更紮實, 

    得到最多的, 還是自己, 

    謝謝收看.... 

    靶心放在快樂的地方2014/01/13 19:50回覆
    2樓. 呆媽(新舊電話情~udn手拉手))
    2014/01/13 00:41

    102歲的阿嬤福壽全歸

    以祝福的心看待,不要再難過ㄛ

    靶心懂事善良,調整好心情,迎接美好的日子

    阿嬤完成在這裡的人生課程,  

    畢業了, 往他的人生下個路程前進去了,

    其實都是"心" 在作怪, 

    有時人也是會卡住,  所以有朋友幫忙過關, 

    是件幸福的事, 

    呆媽, 好貼心~~親

    靶心放在快樂的地方2014/01/13 19:48回覆
    1樓. 呆媽(新舊電話情~udn手拉手))
    2014/01/12 22:12

    謝謝妳的分享

    這看起來很實用,妳解說詳細,按圖施工,一定可以成功(改天實際操作看看)

    哈~今天udn停機,剛才開機

    很多訂閱的文章還沒看,跟妳說:我現在可是閱讀好學生

    培養每天閱讀自己喜歡的文章,成為一種好習慣,在這多元化的園地學到很多好東西

    妳呢?假日過得愉快吧!

    謝謝呆媽收看!!

    任何問題歡迎討論...

    這個假日很特別, 好朋友 102 歲的阿嬤回天家了, 

    雖然我不認識阿嬤, 但這兩天腦子亂亂想, 

    從我們生下來, 就會有的一天, 我要怎麼快樂面對...

    不但沒想出個答案, 還把自己弄得有得 blue....

    所以這二天, 是腦袋打結日, 庸人自擾日啦!

    我這個大笨蛋, 

    就是沒有訂很多文章來看, 才會有時間煩惱, 

    哈哈! 我也要學習您啦!!

    靶心放在快樂的地方2014/01/12 22:52回覆
    發表迴響

    會員登入