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

之前也有在我的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


 

創作者介紹
創作者 teexit1224 的頭像
teexit1224

StreamWhite

teexit1224 發表在 痞客邦 留言(1) 人氣()