衫衫's profile夜♋衫衫工作室™PhotosBlogListsMore Tools Help

Blog


    February 21

    在 Windows Live Spaces 及部落格內加入 cocoa TV 相簿特效

    cocoa TV 相簿特效!? 這是甚麼玩意?

        

    各位現在看到的, 就是夜衫衫稱為「cocoa TV 」的相簿特效了~ 可愛嗎? 上兩日的 "懷舊教學" 才介紹了 cocoa island, 想不到今天卻無意間發現這個和 cocoa island 有關的 "新鮮" 小玩意,「小椰果」在電視機及相簿前走來走去, 十分有趣, 而且其中一款更支援每張相片也顯示中文標題, cocoa island 的 Fans 真的不能錯過啊! (有關 BlogPetcocoa islandLivly Island 的教學, 各位可以參考另一篇<在 Windows Live Spaces 及部落格內加入飼養 BlogPet、cocoa island 及 Livly Island>教學。)

    其實以上兩個相簿特效, 並非是 cocoa island 的付屬功能, 而是日本免費網上相簿服務 - OCNフォトフレンド 新推出的一個小玩意。事不宜遲, 夜衫衫立即介绍~!

    在開始教學教程前, 還是按照已往一樣, 先說明一些基本條件:

    ☞ 請各位注意:

    1. 本教學會利用到 Sandbox 這個 gadget, 如果各位不清楚 Sandbox 這個 gadget 是甚麼, 請參考 <六. 利用 Sandbox gadget 在 Space 頁首上加入 Flash 物件~ 並以 Slide 相簿特效作示範>。

    2. 如果因為 HTML SandboxSandbox 的最大字元限制而無法加入以上插件或玩意, 可參考 <九. 在 Space 頁首上加入多個 Sandbox 或 HTML Sandbox gadget 教學>。
    3. 教學所介紹的插件, 衫衫只有在 HTML Sandbox Sandbox 這兩個 gadget 上進行測試。如果各位希望在 Custom HTMLHTML 模瑰部落格內加入插件的話, 請自行研究插件代碼的轉換方法。
    4. 在 2007 年 1 月, Windows Live Spaces 系統更新後, 加入了新功能 - 內嵌影片 (或稱內嵌訊視), 容許用戶在每篇部落格中加使用 <embed> 語法加入 Flash 插件, 如果各位不清楚這內嵌影片功能, 可參考 <十三.「內嵌影片」功能的用途>。

    OCNフォトフレンド - 先來簡單介紹一下, 這個「cocoa TV 」的相簿特效, 是由日本免費網上相簿服務 - OCNフォトフレンド 提供的其中一種相簿特效  (全數暫時共 13 款), 用戶成功申請帳號後, 即可獲 30 MB 免費儲存量 (網站設有收費版本, 收費版本功能更多, 儲存量亦更大), 另外, 各用戶亦設有「友達」制度 (即加入其他用戶成為朋友), 用戶可選擇上載後的相片, 設定成完全公開、只公開給朋友或不公開。 但因為 OCNフォトフレンド 提供的所有相簿特效都是 JavaScript 形式的代碼, 所以 Windows Live Spaces 的用戶必須透過修改代碼為 <embed> 嵌入式代碼, 才可加在 Windows Live Spaces 或部落格內。
    http://photofriend.jp/

    申請 OCNフォトフレンド 帳號及加入相簿特效在 Windows Live Spaces 的方法:

    1. 先到 OCNフォトフレンド 網站 - http://photofriend.jp/, 按一下「メンバー登錄はこちら」(圖1)

    (圖1)

    2. 請根據 (圖2) 的指示, 填上電郵地址, 然後按一下「このメールアドレスで仮登錄する」按扭。
    PS: 各位必須留意電郵地址一欄, 因為 OCNフォトフレンド 是不接收 @hotmail.com、@msn.com、@gmail.com 或 @yahoo.com 等電郵帳號的申請。另外, 你在這裡填上的電郵地址, 就是將來你的 OCNフォトフレンド 帳號名稱。

    (圖2)

    3. 然後網頁會跳出下圖 (圖3) 的訊息框, 請按一下「確定」按扭。

    (圖3)

    4. 當看到以下畫面 (圖4), 即代表你已成功登錄電郵地址帳號。

    (圖4)

    5. 這時候, 你會收到一封由 OCNフォトフレンド 寄出的確認電郵 (圖5), 開啟郵件後, 內裡包含除了有你的 OCNフォトフレンド 帳號密碼外, 更有一個啟動帳號連結, 請點選這連結。
    PS: 如果郵件內容變成亂碼, 請將編碼方法改為「日文 (自動選擇)」。

    (圖5)

    6. 啓動你的帳號後, 即可設定你的個人資訊, 根據 (圖6) 的指示, 填上各項資料, 然後按一下「利用規約に同意する」按扭。


    (圖6)

    7. 然後網頁會跳出下圖 (圖7) 的訊息框, 請按一下「確定」按扭。

    (圖7)

    8. 當看到以下畫面 (圖8), 即代表你已成功登記 OCNフォトフレンド 帳號, 你現在已可使用各項 OCNフォトフレンド 所提供的免費服務, 請按一下「OCNフォトフレンドップ画面へ」登入 OCNフォトフレンド 網站。

    (圖8)

    9. 登入 OCNフォトフレンド 網站後, 你就可以按一下上方的「アップロード」準備上載你的相片 (圖9)

    (圖9)

    10. 按下「瀏覽...」按扭, 即可選擇你要上載的相片, 每次最多可以上載五張; 而下方的資料選項, 各位可以按需要填寫或省略, 但公開設定選項, 則必須選擇「一般に公開」, 該選項代表相片設定為公開, 這樣其他人才可以看到相片; 最後請按一下「写真をアップロードする」按扭開始上載你的相片 (圖10)

    (圖10)

    11. 上載你的相片後, 網頁會顯示每張相片的資訊, 各位可以隨意修改, 注意其中「タイトル」一欄, 就是相片的標題, 因這標題將會顯示在某些相簿特效中, 所以建議各位不要留空這一欄, 以免將來標題變成空白; 一切填寫及檢查清楚後, 請按一下「写真をアップロードする」按扭 (圖11)

    (圖11)

    12. 然後網頁會顯示「写真情報の入力の完了」字句, 代表你的相片己上載成功 (圖12)

    (圖12)

    13. 這時候, 各位就可以開始製作相簿特效了, 先在上方按一下「写真管理」, 然後再選擇「ブログアクセサリ」選項 (圖13)

    (圖13)

    14. 然後網頁會顯示多個相簿特效, 按下右方的「次へ ▶▶」, 可以瀏覽更多選擇 (共 13 款); 當然, 本教學的目的就是「cocoa TV 」的相簿特效, 各位在選擇後, 請按下方的「次へ」按扭 (圖14)

    (圖14)

    15. 然後網頁會顯示有關這相簿特效的選項, 其中「写真の枚数」代表顯示相片的數目, 各位請自行選擇 (但别選擇 1 枚 啊!); 然後按下方的「設定を保存」按扭 (圖15)

    (圖15)

    16. 經過以上步驟, 終於獲得相簿特效的代碼, 請將整段代碼複製出來 (圖16)

    (圖16)

    17. 雖然現在已得到 JavaScript 代碼, 對於其他 Blogger 可能已經足夠, 但上述已提到了, Windows Live Spaces 的用戶必須將代碼轉換成 <embed> 嵌入式代碼, 才可以放在 Windows Live Spaces 內。現在夜衫衫就來說明一下, 各位應該怎樣轉換代碼~

    其實在上述得到的 JavaScript 代碼中, 已包含了你的帳號 ID, 利用這個帳號 ID, 放入下面的嵌入式代碼中, 即可使用。例如, 以下是夜衫衫申請後所得到的原代碼:

    <script type="text/javascript" charset="UTF-8" src="http://photofriend.jp/uf/31831/0b5d02513ca723450e2aa7d4645dab050000000000000025589.js"></script>

    /31831/0b5d02513ca723450e2aa7d4645dab050000000000000025589 就是夜衫衫的帳號 ID, 將這個帳號 ID 放入下面代碼中。

    修改後為:

    <p align="center"><embed src="http://photofriend.jp/images/swf/baf2.swf" quality="high" menu="" bgcolor="#ffffff" width="140" height="160" name="pholiot" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="xmluri=http://photofriend.jp/uf/你的帳號 ID.js.xml%3F1171988358&rgb=0xffffff&sw=110&sh=135"></embed>

    PS: 請將代碼內全形的 <> 符號改成半形的 <> 符號。

    PS: 以上的代碼, 當然不是官方提供啦~! 只是夜衫衫以「取巧」的方法改編, 經測試過後應該沒有問題~ ^^

    將修改後的代碼, 放入 HTML Sandbox Sandbox 隨便一個 gadget 內, 再按一下「Save」按扭 (圖17)

    (圖17)

    18. 預覽一下結果, 發現「cocoa TV 」已成功安裝在你的 Space 上了 (圖18)

    (圖18)

    19. 另外, 因為修改後代碼的格式, 十分適合利用內嵌影片, 功能, 直接放在部落格內, 所以若各位不想在 Sandbox gadget 內加入「cocoa TV 」, 可以試試直接在部落格內加入啊!! (圖19) 在本教學的頂部, 就是利用內嵌影片的方法來加入夜衫衫的「cocoa TV 」。

    (圖19)

    20. 還記在步驟 14 中所看到的不同相簿特效嗎? 現在夜衫衫就列出 OCNフォトフレンド 其餘的全部種相簿特效的代碼 (連計上述所介紹的「cocoa TV 」, 合共 13 款), 各位只要代入自己的帳號 ID 即可, 喜歡使用那一個就隨便選擇吧~

    PS: 為了不影嚮瀏覽本頁速度, 以下各玩意都不會在這裡作出示範, 如果要觀看各玩意的實際示範, 各位可以按這裡 (因相簿特效眾多, 瀏覽器載入須時, 請各位開啟這網頁時耐心等待)。

    PS: 請將代碼內全形的 <> 符號改成半形的 <> 符號。

    實際效果

    可以被 Windows Live Spaces 支持的 embed 嵌入式代碼

    <embed src="http://photofriend.jp/images/swf/baf1.swf" quality="high" menu="" bgcolor="#ffffff" width="110" height="135" name="pholiot" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="xmluri=http://photofriend.jp/uf/你的帳號 ID.js.xml%3F1172012479&amp;rgb=0xffffff&amp;sw=110&amp;sh=135"></embed>
    <embed src="http://photofriend.jp/images/swf/baf12.swf" quality="high" menu=""
    bgcolor="#ffffff" width="140" height="160" name="pholiot"
    pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="xmluri=http://photofriend.jp/uf/你的帳號 ID.js.xml%3F1172010637&amp;rgb=0xffffff&amp;sw=110&amp;sh=135"></embed>
    <embed src="http://photofriend.jp/images/swf/baf13.swf" quality="high" menu=""
    bgcolor="#ffffff" width="140" height="160" name="pholiot"
    pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="xmluri=http://photofriend.jp/uf/你的帳號 ID.js.xml%3F1172010708&amp;rgb=0xffffff&amp;sw=110&amp;sh=135"></embed>
    <embed src="http://photofriend.jp/images/swf/baf3.swf" quality="high" menu="" bgcolor="#ffffff" width="140" height="160" name="pholiot" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="xmluri=http://photofriend.jp/uf/你的帳號 ID.js.xml%3F1172012761&amp;rgb=0xffffff&amp;sw=110&amp;sh=135"></embed>
    <embed src="http://photofriend.jp/images/swf/baf4.swf" quality="high" menu=""
    bgcolor="#ffffff" width="140" height="160" name="pholiot"
    pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="xmluri=http://photofriend.jp/uf/你的帳號 ID.js.xml%3F1172010774&amp;rgb=0xffffff&amp;sw=110&amp;sh=135"></embed>
    <embed src="http://photofriend.jp/images/swf/baf6.swf" quality="high" menu=""
    bgcolor="#ffffff" width="140" height="140" name="pholiot"
    pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="xmluri=http://photofriend.jp/uf/你的帳號 ID.js.xml%3F1172010873&amp;rgb=0xffffff&amp;sw=110&amp;sh=135"></embed>
    <embed src="http://photofriend.jp/images/swf/baf7.swf" quality="high" menu=""
    bgcolor="#ffffff" width="140" height="140" name="pholiot"
    pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="xmluri=http://photofriend.jp/uf/你的帳號 ID.js.xml%3F1172010918&amp;rgb=0xffffff&amp;sw=110&amp;sh=135"></embed>
    <embed src="http://photofriend.jp/images/swf/baf8.swf" quality="high" menu=""
    bgcolor="#ffffff" width="140" height="140" name="pholiot"
    pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="xmluri=http://photofriend.jp/uf/你的帳號 ID.js.xml%3F1172010992&amp;rgb=0xffffff&amp;sw=110&amp;sh=135"></embed>
    <embed src="http://photofriend.jp/images/swf/baf9.swf" quality="high" menu=""
    bgcolor="#ffffff" width="140" height="140" name="pholiot"
    pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="xmluri=http://photofriend.jp/uf/你的帳號 ID.js.xml%3F1172011034&amp;rgb=0xffffff&amp;sw=110&amp;sh=135"></embed>
    <embed src="http://photofriend.jp/images/swf/baf10.swf" quality="high" menu=""
    bgcolor="#ffffff" width="140" height="140" name="pholiot"
    pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="xmluri=http://photofriend.jp/uf/你的帳號 ID.js.xml%3F1172011071&amp;rgb=0xffffff&amp;sw=110&amp;sh=135"></embed>
    <embed src="http://photofriend.jp/images/swf/baf11.swf" quality="high" menu=""
    bgcolor="#ffffff" width="140" height="140" name="pholiot"
    pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="xmluri=http://photofriend.jp/uf/你的帳號 ID.js.xml%3F1172011131&amp;rgb=0xffffff&amp;sw=110&amp;sh=135"></embed>
    <embed src="http://photofriend.jp/images/swf/baf5.swf" quality="high" menu=""
    bgcolor="#ffffff" width="140" height="160" name="pholiot"
    pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="xmluri=http://photofriend.jp/uf/你的帳號 ID.js.xml%3F1172011179&amp;rgb=0xffffff&amp;sw=110&amp;sh=135"></embed>

    PS: 請將代碼內全形的 <> 符號改成半形的 <> 符號。

    PS: 以上的代碼, 當然不是官方提供啦~! 只是夜衫衫以「取巧」的方法改編, 經測試過後應該沒有問題~ ^^

    只要將欄位內的整段代碼複製出來, 然後放入 HTML Sandbox Sandbox 隨便一個 gadget 內, 或利用內嵌影片的方法直接在部落格內中即可成功。

    提提大家, 要登入 OCNフォトフレンド 網站, 請按 , 然後輸入你登記時的電郵地址及密碼 (圖20) (不是你的名稱啊)~; 要登出則可按。至於 OCNフォトフレンド 其他的功能, 就留給各位慢慢發掘吧~ ^_^

    (圖20)

    最後再次向朋友 J 說一聲抱歉啦~ 你生日會的相片已被夜衫衫引用作試範多次了~ ^_^
     

    本教學最後更新日期: 2007 年 2 月 21 日

    本節教學完畢

    如果要轉載這篇文章, 請使用「引用通告」功能, 或指明出處, 感謝。
    不清楚如何使用「引用通告」功能, 可參考這裡

    Comments (4)

    Please wait...
    Sorry, the comment you entered is too long. Please shorten it.
    You didn't enter anything. Please try again.
    Sorry, we can't add your comment right now. Please try again later.
    To add a comment, you need permission from your parent. Ask for permission
    Your parent has turned off comments.
    Sorry, we can't delete your comment right now. Please try again later.
    You've exceeded the maximum number of comments that can be left in one day. Please try again in 24 hours.
    Your account has had the ability to leave comments disabled because our systems indicate that you may be spamming other users. If you believe that your account has been disabled in error please contact Windows Live support.
    Complete the security check below to finish leaving your comment.
    The characters you type in the security check must match the characters in the picture or audio.

    To add a comment, sign in with your Windows Live ID (if you use Hotmail, Messenger, or Xbox LIVE, you have a Windows Live ID). Sign in


    Don't have a Windows Live ID? Sign up

    衫衫 夜wrote:
    ✿小穎✿ 你好,
    多謝讚賞~
    別客氣, 請隨便~ ^_^
    Feb. 27
    幸穎 林wrote:
    HI~~衫衫
    我借走囉....謝謝
    真是讚的教學.....我有用"引用通告"喔....
    謝謝你
    Feb. 27
    衫衫 夜wrote:
    wu下wu下 你好,
    別客氣~ ^_^
    Feb. 24
    wuwu wuwrote:
    thanks
    Feb. 22

    Trackbacks (2)

    The trackback URL for this entry is:
    http://camuschu.spaces.live.com/blog/cns!85BD955C085738A8!1493.trak
    Weblogs that reference this entry