amana tech night vol.2 『実践！Pixate』

1. amana tech night #2 実践！ Pixate

3. amana tech night #2 // 実践！ Pixate いま話している人について吉竹遼 @ryo_pan 2011 年〜 2014 年 10 月までフェンリル株式会社で受託開発に従事。 2014 年 10 月から Standard Inc に参画。

4. amana tech night #2 // 実践！ Pixate これまでの活動 http://yo-ry.hateblo.jp/entry/2014/02/13/204727

5. amana tech night #2 // 実践！ Pixate これまでの活動 http://www.slideshare.net/ryoyos/origami-32856872

6. amana tech night #2 // 実践！ Pixate これまでの活動 http://www.standardinc.jp/reflection/article/prototyping-for-app-design/

7. amana tech night #2 // 実践！ Pixate これまでの活動 http://www.slideshare.net/ryoyos/creative-insights-01-42453782

8. amana tech night #2 // 実践！ Pixate これまでの活動 http://www.slideshare.net/ryoyos/ui-crunch-03

9. amana tech night #2 // 実践！ Pixate 事前準備 • Pixate の登録 http://www.pixate.com/ • ビューワーアプリのインストール iPhone　/　Android • アセットの DL・解凍 https://www.dropbox.com/s/cfxkodl35ep4vcm/assets.zip?dl=0 ワークショップの時とはファイル構成が微妙に違うので、当日参加された方も DL をお願いします

10. amana tech night #2 // 実践！ Pixate おおざっぱな流れ • プロジェクトの新規作成 • アセットの読み込み • アセットの配置 • 動きをつける • さらに動きをつけてみる

11. amana tech night #2 // 実践！ Pixate 01 プロジェクトの新規作成

12. 新規プロジェクトを作成する

13. 新規プロトタイプを作成する

14. 今回は iPhone 5 を選ぶ

16. アクションパネル（自動化のためのアクションが選択できる。自分で作ることも可能）アニメーションプロパティパネル（付加されたアニメーションやインタラクションの細かい設定ができる）キャンバス（レイヤーやアセットはここに表示される）プロパティパネル（選択したレイヤーの情報が編集できる）レイヤーパネル（作成したレイヤーとか置いたアセットはここに表示される）インタラクションパネル（レイヤーに対して付加できるインタラクションが選べる）アニメーションタブ（アニメーションパネルに切り替えることができる）

17. amana tech night #2 // 実践！ Pixate 02 アセットの読み込み

18. 真ん中のアイコンをクリックしてアセットパネルを開く

19. あらかじめダウンロードしておいたフォルダから、テキストファイル以外の 6 個の PNG ファイルを画面上に D&D する

20. 読み込みが終わるとアセットが一覧表示されますなお今回は btn_search.png は使用しません

21. amana tech night #2 // 実践！ Pixate 03 アセットの配置

22. クリックしてレイヤーを新規作成

23. ■ Position Left : 0pt / Top : 64pt ■ Size Width : 320pt / Height : 504pt にする

24. ダブルクリックしてレイヤー名を『main』に変更ダブルクリックして色を『f7f7f7』に変更（初期状態だと RGB が入ってるけど、# なしの HEX coloro を入力しても適用してくれる！かしこい！）

25. 適当に D&D で置く

26. main.png を main レイヤーに D&D

27. ② ■ Position Left : 0pt / Top : 0pt にする ① main.png を選んだ状態で

28. 親レイヤーに格納された子レイヤーの Position は親を基点に指定されるので、0,0 を指定すればいい感じに上に配置できますまず作りたいオブジェクトのサイズのレイヤーを作成して、その中にアセットを入れる、という流れでやるとスムーズに作れます

29. ① nav.png をキャンバス上に D&D する ② ■ Position Left : 0pt / Top : 0pt にする

30. amana tech night #2 // 実践！ Pixate 04 このあたりからビューワーアプリを起動しておくと、リアルタイムで更新されていくのが見れて楽しいです画面をスクロールさせてみる

31. Scroll インタラクションを main レイヤーに D&D で適用する（適用したいレイヤーを選択した状態でアニメーションプロパティパネルに D&D でも可）

32. amana tech night #2 // 実践！ Pixate 05 カートボタンを作る

33. ① 新規レイヤーを作成する ② レイヤー名を btn_cart に変更する ③ ■ Position Left : 260pt / Top : 508pt ■ Size Width : 50pt / Height : 50pt にする

34. btn_cart_00.png, btn_cart_01.png をキャンバス上に D&D する

35. btn_cart レイヤーに D&D

36. btn_cart_00.png は 01.png よりも上にあるようにする 00,01 共に ■ Position Left : 0pt / Top : 0pt にする

37. amana tech night #2 // 実践！ Pixate 06 サムネイルを作る

38. ① 新規レイヤーを作成する ② レイヤー名を thumb に変更する ③ ■ Position Left : 70pt / Top : 84pt ■ Size Width : 180pt / Height : 180pt にするレイヤーの色はこの後の作業をわかりやすくするためにしばらく残しておく

39. thumb.png をキャンバス上に D&D し、thumb レイヤーに格納する

40. thumb.png を適当に動かして thumb レイヤーの中心に吸い付かせる（かしこい！）

41. amana tech night #2 // 実践！ Pixate 07 サムネイルをドラッグできるようにする

42. Drag インタラクションを thumb レイヤーに D&D で適用する

43. アニメーションタブをクリックしてアニメーションパネルを表示する

44. Drag インタラクションを thumb レイヤーに D&D で適用する

45. 実機で確認してみると…… 動かせるようになった！

46. amana tech night #2 // 実践！ Pixate 08 サムネイルが元の位置に戻るようにする

47. さっき追加した Move アニメーションの中にある Based On をクリック

48. ■ Based On thumb / Drag Release ■ Move to Left : 70pt / Top : 84pt にする

49. amana tech night #2 // 実践！ Pixate 何をしたのか？ Move アニメーションはレイヤーを動かすアニメーション。素のままだとドラッグで動かせるだけなので『どのタイミングで』『どう動かすか』という条件を追加した。具体的には ■ Based On（タイミングの基準） thumb レイヤーが / ドラッグリリースされた時に ■ Move to（どう動かすか） Left 70pt / Top 84pt に動かすといった感じ。

50. 元の位置に戻るようにはなったけど位置が固定なのでちょっとびみょう。。

51. amana tech night #2 // 実践！ Pixate 09 スクロールに追従させてみる

52. もう 1 つ Move アニメーションを追加して、 ■ Based on main / ScrollPosition ■ Animates Continuously with rate ■ Move Top / -1 にする

53. amana tech night #2 // 実践！ Pixate 10 サムネイルの大きさを変えてみる

54. Scale インタラクションを thumb レイヤーに D&D で適用する

55. ■ Based On thumb / Drag Start ■ Scale 1.5x にする

56. 再度 Scale を thumb.png に適用して ■ Based On thumb / Drag Release ■ Scale 0x にするデフォルトの Scale も０x にする

57. サムネイルがカートの上に来たら小さくなるようにしてみる

58. ① 3 つ目の Scale を thumb.png に適用して ■ Based On thumb / Drag Position ■ Animates With duration to final value にする ② Zip に入っていた『conditions.txt』を開き、01 の文字列をペーストする Scale は０.5x に設定する ③ 画面下部にある『+CONDITION』をクリックする

59. 新しく ELSE IF という項目が追加されるので『conditions.txt』の 02 の文字列をペーストする Scale は 1.5x に設定する

60. Fade アニメーションを追加して ■ Based on thumb / Drag Start ■ Fade to 100% に設定する

61. amana tech night #2 // 実践！ Pixate 何をしたのか？ conditions.txt に書かれているのは、ちょっとした条件の記述（いわゆる if 文というやつです）。ざっくり解説すると・レイヤー（ここでは thumb）の・横の中心位置が・250pt よりも・大きく・加えて、・thumb レイヤーの縦の中心位置が 520pt よりも大きければ thumb.cx > 250 && thumb.cy > 520

62. amana tech night #2 // 実践！ Pixate 250pt 520pt 前ページに書いた条件に当てはまるエリアでのみ、サイズを小さくした。

63. amana tech night #2 // 実践！ Pixate 条件でできることは限られているため、慣れるのに時間はかかりません。詳しく知りたい方は↓を読んでみてください。 http://help.pixate.com/knowledgebase/articles/462989-11-conditions

64. amana tech night #2 // 実践！ Pixate 11 カートボタンの大きさも変えてみる

65. Scale アニメーションを btn_cart レイヤーに D&D で適用する

66. ■ Based on thumb / Drag Start ■ Scale 1.5x に設定する

67. 2 つ目の Scale アニメーションを適用し、 ■ Based on thumb / Drag Release ■ Animates With duration to final value に設定する『conditions.txt』の 01 をペーストする ■ Scale 1x / 基点を右下に変える ■ Easing Curve spring ■ Friction / Tension 10 /300 に設定する

68. 『+CONDITION』をクリックし、条件を追加 ■ Scale 1x / 基点は右下に設定する

69. amana tech night #2 // 実践！ Pixate 12 サムネイルの処理を詰めるこれを適用することで、サムネイルを離した時にカートに吸い込まれたように見えます

70. thumb.png に Fade アニメーションを追加し、 ■ Based on thumb / Drag Release ■ Animates With duration to final value に設定する『conditions.txt』の 01 をペーストする ■ Fade to 0% ■ Duration 0s に設定する

71. amana tech night #2 // 実践！ Pixate ex 1 highlighted を再現するどこをタップしたのかが分かるようになります

72. ① main レイヤー内に新規レイヤーを作成する（ここでは highlighted に名前を変更） ■ Position Left : 4pt / Top : 4pt ■ Size Width : 312pt / Height : 209pt ■ Appearance 内 Color ffffff ■ Opacity 0% に設定する ② Fade アニメーションを 2 つ追加し、 1 つ目を ■ Based on thumb / Drag Start ■ Fade to 50% 2 つ目は ■ Based on thumb / Drag Release ■ Fade to 0% に設定する

73. amana tech night #2 // 実践！ Pixate ex 2 カートの数字を変えてみる

74. Reorder インタラクションを btn_cart_01.png に D&D で適用する

75. ■ Based on thumb / Drag Release に設定する ■ Ordering Place Behind / btn_cart_01.png ■ Delay 1.5 seconds に設定する『conditions.txt』の 01 をペーストする

76. Tap インタラクションを btn_cart レイヤーに D&D で適用する

77. btn_cart_00.png に再度 Reorder を適用して ■ Based on thumb / Drag Release に設定する ■ Ordering Bring To Front ■ Delay 0 seconds に設定する

78. amana tech night #2 // 実践！ Pixate 完成！

79. amana tech night #2 // 実践！ Pixate おまけ Pixate でできることの簡単な解説

80. amana tech night #2 // 実践！ Pixate Pixate でできること ( ざっくり ) レイヤーにレイヤーをレイヤーのを付加してさせる x の位置 / x の中心位置 / y の位置 / y の中心位置 / 右位置 / 下位置スケール / x のスケール / y のスケール / 透明度 / 回転 / x の回転 y の回転 / z の回転 / y のスクロール速度 / x のスクロール速度 y のスクロール量 / x のスクロール量に変化があった場合ドラッグ / タップ / ダブルタップ / 長押し回転 / ピンチ / スクロール移動 / スケール / 回転 / 透明度 / 色の切り替え画像の切り替え / 階層切り替え

81. amana tech night #2 // 実践！ Pixate Pixate を使ってみての雑感 • できることに限りがあるのがいい • iPhone でも Android でも見れるのがいい • Origami や Framerjs よりも覚えるのが簡単

82. amana tech night #2 // 実践！ Pixate まとめ • 作ったプロトタイプをどう使うかが大切 • 実際に触ってできることできないことを知ろう • あまり手法に振り回されすぎないように！

83. amana tech night #2 // 実践！ Pixate 参考リンク公式ヘルプ (5,6,10,10a,10b,11 は特に必読 ) 公式チュートリアル公式デモ Prototyping and Design with Lyft & Pixate http://help.pixate.com/knowledgebase/articles/461798-1-introduction http://www.pixate.com/education/video-tutorials/ http://www.pixate.com/education/demos/ https://www.youtube.com/watch?v=X-jDSOHsix8

amana tech night vol.2 『実践！Pixate』

amana tech night vol.2 『実践！Pixate』

Recommended

More Related Content

Similar to amana tech night vol.2 『実践！Pixate』

Similar to amana tech night vol.2 『実践！Pixate』(20)

amana tech night vol.2 『実践！Pixate』