Anima's Life : 6月 2016

Introduction to Origami

1.首先建立一個 Origami 專案牠會產生一個基本頁面

2. 點Window -> Resize to Thirds 讓畫面分開並佔滿整個螢幕

3. Viewer Size 指螢幕的大小還有方向
(1) Type 有很多種手機平板可以選
(2) Orientation 直的衡的
4. Layer Group
(1)Render
(2)Texture Target
(3)Texture Mipmapping
(4)Pixel Width 會連接到 Viewer Size設定好
(5)Pixel High 會連接到 Viewer Size設定好

5. Viewer
(1) Enable
(2) Image 會連接到 Layer Group 設定好
6. 會發現Layer Group 是方角(Group:可以點擊兩下去編輯內部) 其他兩個是圓角

7. Adding Assets : 點兩下Layer Group 可以到內部編擊

8. 此時看到一個Fill Layer 黑色也就是螢幕目前的樣子
(1) Enable: 開起此Layer
(2) Coloy : Layer顏色
(3) Opacity: 透明度

9. 新增圖片進去(直接拖拉) 此時會有兩個圓框一個是圖片預覽(黑色) 另一個是詳細設定(籃色) 上面參數都很好懂

10. 兩個籃色圓框右上角會顯示Layer上下關系數字越小越下面

11. 參數點兩下可以編輯長按可以左右拖拉

12. Adding Patches : Command+Return 叫出 Library選單

13. 上欄選擇Origami這個分類也可以用下方Filter去搜尋

14. 搜尋 Interaction 2 並選擇產生紅色圓框 Patch

15. 搜尋 Text Layer 並將 Interaction 2 的 Dowm 連接到 Text Layer 的 Text

16. 此時點擊畫面文字(0) 按下會變1 放開會變0 也就是說 Down 會偵測手指按下螢幕的動作

17. 此時換將Interaction 2 的 Down 連接到 Layer 的 Scale

18. 會發現Scale 變 0 也就是沒有畫面當手指按下去時 Scale 變1 也就顯示了圖片

19. 搜尋 Transition (快速建: T) 並選擇

20. 將 Interaction2的Down 連接到 Transition的Progress ， Transition的Value 連接到 Layer的Scale

21. Start Value=1 還有 End Value=0.37 並測試看看螢幕發現正常了

22. 可以發現 Transition 是用來改變兩組數值之間的變化的

23. Adding Animation: 搜尋 Pop Animation (快速建: a)並選擇

24. 此時將 Interaction2的Down 連接到 Pop Animation的Number ，Pop Animation的Progress 連接到 Transition的Progress 看看效果 (Boucing , Speed 可以調看看)

25. 以上23 24 步驟可以用快速建 : 點著Interaction2的Down 並按a 就會自動連接

26. Adding New Sate : 我們要的是點擊一下變大點擊一下變小這樣交叉變化此時要用Swhich (快速建:Shift+S )

27. 也可以像25.那樣按住Interaction2的Down 並點用快捷建Shift+S 此時可以看看變化

28. Synchronizing Effects: 此時新增一個圖片Layer(範例是按讚) 此時想要縮小時隱藏這個Layer

29. 用Opacity吧 ! 按著Layer3 的 Opacity 並按鍵盤 T 產生 Transition

30.其實這些方框都可以重新命名成好懂得名稱

31.將Start value 改 1 End Value 改0

32. 將Pop animation 的Progress 另外連接到31.的Progress 此時可以看看變化

33. 最後 Wrapping UP !!!

Rooms Part 1: Collapsible Navigation Bar

1.新建專案之後將Assets 都丟進去Layer Group

2. 調整一下圖片的位置

3. 加入 Scroll Patch

4. 將長圖片的image(黑色) 連接到Scroll的Image 使長圖片可以滑動

5. 將Scroll的Y position 連接到長圖片設定(藍色)的 Y position 並試試看效果

6. 發現拉超過時出現黑色也就是 Layer 1 的顏色 (看你要啥顏色都可以調的)

7. 加入 Progress Patch

8. 將Scroll 的 Yposition 連接到 Progress 的 Value

9. Progress 的 Start Value 跟長圖的一開始Y postion一樣(-383)

10. Progress 的 End Value 則是 -383 + 32(狀態欄的高度)

11. 將Bar轉換為Macro (滑鼠按著並按 G 就會變成Macro了) 變成 Layer Group

12. 按著Layer Group 的 Pixel High 變按 T (Transition)

13. Start Value 128 End Value 128-32

14. 此時將Progress 與 Tansition 的 Progress連接在一起 (Value會等比例調整) 試試看效果

15. 會發現會跟著縮掉 Transition 的 Value其實只要1 or 0 就好此時增加 Range Pacth

16. 將 Progress 的 Progress 連接到 Range的Value , Range的Clipped Value 連接到 Transtition的Progress 此時看看效果

17.會發現狀態欄被壓縮了點進去Layer Group 將 Anchor Point 轉 Top Center 再看看效果 ok了

18. 此時加入Bar 三個元素並調整一下位置試試看會發現會太上去我們希望牠滑上去後會消失(Opacity)

19. 跳出Layer Group 將Range的 Clipped Value 連接到LayerGroup 其他位置(會新增一個) 並命名為 Collapse Progress

20. 點進去 Layer Group 會發現出現一個黑色圓框了

21. 將牠連到左右圖片的Opacity吧可是會發現效果相反了此時用快捷建(點著Progress 並按r) 就會出現Reverse Progress 試試看效果吧

22. 另外微調一下字體的 Scale (點Scale按t) 並將 Progress 連接到 CollapseProgress就完成囉

Rooms Part 2: Swipe-away Navigation

1. 繼續上一個Part 我們想要點進一篇文章並Swipe就可以回上一頁

2. 加一個 POST 的 image 並加入 Swipe (Origami的Swipe)

3. 將Swipe的 Position 連到 image 的 X position

4. Swipe 的 Sart position 還有 End position(調到螢幕外面738左右微調看看) 會對應到image 的 Xposition

5.此時我們想要將之前Part 1做的包在一起(Macro) 按g 產生LayerGroup 並選擇Part 1的東西減下並到 Layer Group貼上，此時畫面變黑色因為Layer Group沒有接到任何Layer

6. 按著Layer Group的 imgae 並按 l 產生layer 就會出現了(層數要改最下層Layer1)

7. 現在想要Swipe後顯示(Opacity)將Swipe的Progress 連接到 Layer 1 的Opacity 也就是說 Swipe 從 0->1 Opacity 就會顯現試試看效果

8. 現在想要Swipe後放大效果但是不能像上面一下直接連Scale 因為從0到1 動畫會太誇張(妳可以試試看)

9. Transition解決吧點Scale按t 產生 Start 0.97 左右並將 Progress 連接到 Swipe 的 Progress

10. 現在想要點一下post 就會以Swipe動畫方式顯示post內容新增 Hit Area Patch

11. 首先調Width and High 跟圖片一樣

12. 點長圖按g讓牠變Layer Group 並將剛剛的Hit Area 剪下貼到Group裡面

13. 此時會發現Hit Area會跟著動了只要微調一下Y position就可以了

14. 加一個interaction 2 並將 interaction 2 標題連接到 Hit Area 標提 (表示所有動作接是連接到Hir Area)

15. 此時要把tap這個功能帶到上一個Layer使用在點 interaction 2 的 tap 按 p

16. 往上一層就會看到Tap了還要在往上一層所以點tap 按p

17. 往上一層將Layer Group的Tap 連接到 Swipe的Jump to start

18. 將紅色區塊消除在Hit Area 的 Setup Mode 關掉

Rooms Part 3: Creating a New Post

1. 連接上個 part

2. 現在要讓+圖片按下去會虛化的按鈕效果

3. 加一個interaction 2 並將牠的port連接到 + 的 Layer port (port是標提列的連接)

4. 點interaction 2 的Down 按a 出現pop animation(跳動動畫)

5. 再點 pop animation的 progress按 t 出現 trasition

6. 將 transition的Value 連接到 + Layer 的 Opacity

7. 此時調一下Tansition的 Start Value = 1 , End Value = 0.8 左右試試看效果吧

8. 現在讓新的畫面從下面跳上來

9. 拉圖片按Y position + t 創 trasition 並將Start Value調整到螢幕下面 -1341左右 End Value = 0

10. 點Transition的Progress按a 出現 pop animation

11. 可以預想需要用State去區別(Switch)

12. 點折pop animation的Number按(Shift+S) 出現Switch

13. 將按鈕的interaction 2 的 up 連接到 Switch 的 Turn On 試試看效果

14. 現在來做將post關起來的動作

15. 跟上一個的 Hit Area 一樣

16. 點new post圖片並按g 變成Group 並點進去新增兩個 Hit Area 一個給X 一個給post 並微調位置

17. 注意一下Area比按鈕大一點這樣使用者不需要很精準的按就能有遇期反應了

18.兩個Hit Area 都點port 按i 新增interaction 2

19. 此時跟之前一樣要將兩個的up連接到上一層的state 關掉Switch

20. 但這邊說一個新方法: Wireless 也就是不需要拉線直接Wireless呼叫

21. 點著up按w 會出現 wireless(藍色圓框並有wifi標誌) 也叫up 但是這個名稱會是wireless的辨別名所以重新命名成CloseButtonUp

22. 另一個一樣做法並命名為 PostButtonUp

23. 往上一層的 Swtch 點 Turn off 按wireless 或是在任意地方 (Shift+W) 出線Wireless Receiver (紫色圓框並有wifi標誌)

24. 點一下 Wireless Receiver 並按Command+2 會列出所有 Wireless 選Close Button UP 吧試試看效果

25. 剛剛的post button還沒設定用上面方法做發現不能一次連兩條線

26. 這是因為牠不知道是否要同時按(and) 還是各別按(or) 要做 Turn Off

27. 此時新增一個 Logic Patch (Shift + A) 點兩下選擇要哪一種logic 此時選 OR 試試看效果

28. 現在要做Post會出現的效果

29. 先在長圖Group裡面新增image

30. 此時到外層點Pixel High 按 t 新增 trasition Sart 2100 End 2100+900(新增圖片的高度)

31. 到內層新增的圖片(Layer 3) Yposition調整到上面空出來的位置

32. 將Layer 1 的Anchor Point 設為 Bottom Center

33. 回上一層現在來做往下動畫在Pixel high Transition 點Progress 按 a 產生animation

34. 增加一個new post 產生的 State (Shift+s) 產生 Switch 將 On/off連接到 pop animation

35. 到內層改一下Layer順序讓新的post順序低一些

36. 到外層複製 PostButtonUp 的 Wireless Reicer並連接到Switch 的 Turn On 試試看效果

37. 但感覺怪怪的現在想要當畫面掉下來之後再做animation 所以要偵測new post 畫面是否掉下來了

38. 新增 Conditional Patch (按c) 其實就是if判斷

39. 將first Value 連接到 new post 圖片的 Y position ,Condition為lower, Second為 -1340

40. 也就是說當 new post 的 Yposition < -1340 Result就會變成1

41. 此時當Switch 為 On 時且 40.符合才會做動畫所以就用之前說的Logic Patch (Shift+a) 使用and gate

40. 連接Switch的On/Off 還有 Conditional 的 Result 到AND gate 並將結果連到 pop animation 的 Number

42. 試試看效果吧

43. 會發現Close Button也會出現新post 這邊要改掉

44. 看一下會發現 Switch 永遠都是On 的沒有Off (被Turn On一次後之後都是On狀態)

45. 此時將Close Button的 interaction 2的up連接到Switch的Off即可解決試試看吧

46. 會發現當post過一次後按+ 原本post會瞬間消失可以從AND gate看出來端倪我們不想要她這麼快消失

47. 用Delay Patch (按d) 插再AND gate 和 pop animation 之間

48. Value接到兩邊 Duration 預設0.5秒 Style 選 Decresing 也就是當1變0才用Delay 0變1不用看看效果吧

49. Staggeres Animation 現在想要一點新花樣當按new post時會先下拉白色畫面之後再pop out post

50. 點pop animation 按 Command 複製一個 Delay也複製一個

51. 第一個Delay的output Value 連接到新的Delay的Value ,Duration改0.5秒 Style改成Invresing 0變1才做

52. 新的Delay的OutputValue連到新的Pop animation的Number

53. 原本pop animation的progress連到Pixels high的Progress(原本連好了)

54. 新的Pop animation的Progress連接到Layer Group的Expand Progress(遠本連接會消掉)

55. 看看效果吧

56. 會發現有new post時下拉 Bar 會在new post 的某個位置才收合

57. 此時到bar的progress 複製一個 (依照兩種情況而有不同的高度判斷)

58. 複製連接到value的接線到新的Porgress Value

59. 微調新的(new post) Start Value=-833 End Value= -833+32

60. 想一下會知道new post的pop animation 的 progress可以告知new post產生的訊息

61. 新增一個Transition 並將 new post的pop animation 的 progress 連接到牠的progress

62. 當Transtion 的 Progress=0 表示沒有new post 此時將原本的progress的Progress連接到Transition的Start Value 另一個progress(有new post的高度設定)就連接到End Value

63.最後將Transition的Value 連接到Range的Value吧此時看看效果

64. +按鈕太快了將Speed降低誠5

65. X and Post按鈕的紅色區塊取消勾選 Setup Mode

66. new post 好像有東西被遮起來到Layer Group往上調整層數

67. 完成囉~~~

概論: 此功能實現方式，將粉絲專頁的訊息都透過WebHooks 連到自己建置的伺服器上，自己的伺服器依據送過來的訊息，依照寫好的規則，透過API 回覆給使用者。

在此，我們用FB提供的範例，也就是用 NodeJS 寫的伺服器達成自動回覆公能
如果你對 NodeJS 不熟或完全沒概念，以下我都有詳盡解釋，歡迎留言

1. 到Facebook API 建立一個新的App (https://developers.facebook.com/) 左上角新增

2. 之後要求新增 Messenger

3. 開始建立 Webhooks 要連到的伺服器位址

4. Setup Webhooks 會長這樣，此時要先去架好NodeJS 伺服器

5. 由於安全性問題，網址FB要求一定要 HTTPS，如果自己有架伺服器經驗，這一部分可以申請個 CloudFlare 的SSL ，如果沒有架站過，在此推薦 cloud9 ，牠可以用虛擬機快速建立伺服器，並支援HTTPS，以下接用Cloud9去實做

6. 申請好帳號新增Workspace
git clone 填 https://github.com/fbsamples/messenger-platform-samples.git (FB的範例)

6. 建立好後檔案目錄如下

7.下方有Terminal可以輸入指令此時輸入下面指令

(1) cd ~/workspace/node/

(2) npm install

此時會多一個node_module資料夾

8. 此時到node/config 的default.json設定全域變數

appSecret到這裡看

pageAccessToken 再這裡產生(需要有粉絲專頁，沒有的話去建立一個吧)

validationToken 隨意輸入，之後要填再第四點的驗證權杖欄位

8.好了之後就可以輸入 node app.js 開啟伺服器了

9.此時到 https://專案名稱-帳號名稱.c9users.io/ 可以正常看到訊息就是成功開啟了

10.此時回到第四點

回呼網址輸入剛剛的 https://專案名稱-帳號名稱.c9users.io/webhook驗證權杖輸入剛剛的 validationToken
~運作方式解說~在app.js 裡面可以找到以下程式碼，牠會處理剛剛給FB的回乎網址送來的訊息並且看FB傳來的驗證權杖對不對如果跟剛剛設定的default.json一樣就回傳status 200 也就是成功訊息給FB