StreamWhite

相信很多人都看過網頁上會有捲動的圖片、照片等

之前也有在我的BLOG中放入滾動式的照片(觀看)

Popfly製作動態相本，真的是非常的簡單...

同時，Popfly是用拖曳的方式，選擇好需要的物件，在將物件的Input及Output連接起來

這樣就可以完成一個Component...

讓我們來看看怎麼製作吧!1. 首先連結到Popfly的網站上去

2. 登入你的Live帳號

3. 登入完成以後，你可以選擇要創建遊戲、建立MeshUP、或是建立網頁，這邊我們選擇Create Meshup。

4. 你會看到這樣的工作介面

    旁邊的Block有很多選項，可以點擊玩看看...

5. 到這邊先前的工作就完成了，接下來我們連結到flickr上面去，將照片傳上去~

    flickr只要yahoo帳號即可，所以應該不需要額外註冊帳號的部分

    帳號註冊完畢以後，可以點選上傳相片，就可以上傳圖片了

    接下來依照指示往下設定照片敘述標題等...

6. 完成設定以後，會回到相簿中，這邊我們點選最上面的管理，選擇你的相片集

    然後選擇建立新相片集

這邊可以看到所有你上傳的照片，點選建立新相片集後，會出現以下視窗

你可以增加相簿名稱...然後相簿的簡述...完成以後在將下面的照片網上面拖曳即可。

完成以後案下儲存。

7. 這樣相簿的工作就準備好了。我們回到popfly的網頁上面開始製作動態相簿吧...

    在Blocks的地方，我們點選Image & Video，會看到Flickr的item點擊一下，然後右邊的工作區就會彈出一個紅色小方框

    我們點擊紅色方框兩下，這樣就會出現屬性內容的部分給你設定

    我們這邊選擇的是getPhotoset，也就是指定像片集，我只要特定的相本就好...

    這邊我們會看到兩個屬性欄位，一個是像片集的ID，一個是要顯示的數量...

    像片集的ID，可以在Flickr的網頁上，點選"你的足跡"選擇"你的相片集"

    這樣就會看到剛剛建立好的相本，你的滑鼠移動到相本上面時後，下面會出現一排網址，或是你可以按下右鍵選擇內容(屬性)

    大概是類似這樣的網址http://www.flickr.com/photos/30716408@N02/sets/72157607479678949/

    而最後面的72157607479678949就是像片集的ID

    我們把他複製過後，在貼到剛剛的相片集ID的屬性欄位上面，案下OK就完成相片的資料截取

    而Flickr這個方框呢，就是負責將指定的相片集的相片抓出來，然後輸出相片...

    PS 如果在Flickr的下方出現You need the key的字眼，請點擊他的連結，他會給你提示，在依照提示完成就可以獲得一組key

8. 接下來，我們就是要將剛剛輸出的相片接收下來，在播放出來

    我們可以在Blocks中，選擇Display，這邊你可以選擇Carousel或是ImageSildeshow這兩個集中之一來製作動態相本...

    這邊我就以Carousel做示範...點選以後會出現下圖

    看起來有點透明的部分，一般都是輸出顯示為主...

    接下來我們要做的事情很簡單，就是將flickr輸出的資料，丟到carousel中

    怎麼做呢?  只要點選flickr的右邊藍色圓圈，右邊的部分我們通常當作為"輸出"，左邊為"輸入"

    點選以後，你就會看到一個箭頭，我們再把他拉到carousel的左邊藍色圓圈，這樣就完成了~

9. 接下來可以點選Run來執行看看結果如何...

    確定以後在點選右上角的SAVE，將他儲存起來

    儲存過後呢，接下來就是要把他SHARE出去囉~

    像是BLOG之類的

    我們點選SHARE...然後會彈出一個視窗，你可以選擇embed然後會出現iframe的code

    或是依照上面的圖示分想到你的blog中

sample