Successfully reported this slideshow.

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

104

Share

1 of 83
1 of 83

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

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

  1. 1. amana tech night #2 実践! Pixate
  2. 2. amana tech night #2 // 実践! Pixate いま話している人について 吉竹 遼 @ryo_pan 2011 年〜 2014 年 10 月までフェンリル株式会社で受託開発に従事。 2014 年 10 月から Standard Inc に参画。
  3. 3. amana tech night #2 // 実践! Pixate これまでの活動 http://yo-ry.hateblo.jp/entry/2014/02/13/204727
  4. 4. amana tech night #2 // 実践! Pixate これまでの活動 http://www.slideshare.net/ryoyos/origami-32856872
  5. 5. amana tech night #2 // 実践! Pixate これまでの活動 http://www.standardinc.jp/reflection/article/prototyping-for-app-design/
  6. 6. amana tech night #2 // 実践! Pixate これまでの活動 http://www.slideshare.net/ryoyos/creative-insights-01-42453782
  7. 7. amana tech night #2 // 実践! Pixate これまでの活動 http://www.slideshare.net/ryoyos/ui-crunch-03
  8. 8. amana tech night #2 // 実践! Pixate 事前準備 • Pixate の登録 http://www.pixate.com/ • ビューワーアプリのインストール iPhone / Android • アセットの DL・解凍 https://www.dropbox.com/s/cfxkodl35ep4vcm/assets.zip?dl=0 ワークショップの時とはファイル構成が微妙に違うので、 当日参加された方も DL をお願いします
  9. 9. amana tech night #2 // 実践! Pixate おおざっぱな流れ • プロジェクトの新規作成 • アセットの読み込み • アセットの配置 • 動きをつける • さらに動きをつけてみる
  10. 10. amana tech night #2 // 実践! Pixate 01 プロジェクトの新規作成
  11. 11. 新規プロジェクトを作成する
  12. 12. 新規プロトタイプを作成する
  13. 13. 今回は iPhone 5 を選ぶ
  14. 14. アクションパネル (自動化のためのアクションが選択でき る。自分で作ることも可能) アニメーションプロパティパネル (付加されたアニメーションやインタラク ションの細かい設定ができる) キャンバス (レイヤーやアセットはここに表示される) プロパティパネル (選択したレイヤーの情報が編集できる) レイヤーパネル (作成したレイヤーとか置いたアセット はここに表示される) インタラクションパネル (レイヤーに対して付加できるインタラ クションが選べる) アニメーションタブ (アニメーションパネルに切り替え ることができる)
  15. 15. amana tech night #2 // 実践! Pixate 02 アセットの読み込み
  16. 16. 真ん中のアイコンをクリックして アセットパネルを開く
  17. 17. あらかじめダウンロードしておいたフォルダ から、テキストファイル以外の 6 個の PNG ファイルを画面上に D&D する
  18. 18. 読み込みが終わるとアセットが一 覧表示されます なお今回は btn_search.png は使 用しません
  19. 19. amana tech night #2 // 実践! Pixate 03 アセットの配置
  20. 20. クリックしてレイヤーを新規作成
  21. 21. ■ Position Left : 0pt / Top : 64pt ■ Size Width : 320pt / Height : 504pt にする
  22. 22. ダブルクリックしてレイヤー名を 『main』に変更 ダブルクリックして色を『f7f7f7』に変更 (初期状態だと RGB が入ってるけど、# な しの HEX coloro を入力しても適用してく れる!かしこい!)
  23. 23. 適当に D&D で置く
  24. 24. main.png を main レイヤーに D&D
  25. 25. ② ■ Position Left : 0pt / Top : 0pt にする ① main.png を選んだ状態で
  26. 26. 親レイヤーに格納された子レイヤーの Position は親を基点に指定されるので、0,0 を指定すればいい感じに上に配置できます まず作りたいオブジェクトのサイズのレイ ヤーを作成して、その中にアセットを入れる、 という流れでやるとスムーズに作れます
  27. 27. ① nav.png をキャンバス上に D&D する ② ■ Position Left : 0pt / Top : 0pt にする
  28. 28. amana tech night #2 // 実践! Pixate 04 このあたりからビューワーアプリを起動しておくと、リアルタイムで更新されていくのが見れて楽しいです 画面をスクロールさせてみる
  29. 29. Scroll インタラクションを main レイヤーに D&D で適用する (適用したいレイヤーを選択した状態 でアニメーションプロパティパネルに D&D でも可)
  30. 30. amana tech night #2 // 実践! Pixate 05 カートボタンを作る
  31. 31. ① 新規レイヤーを作成する ② レイヤー名を btn_cart に変更する ③ ■ Position Left : 260pt / Top : 508pt ■ Size Width : 50pt / Height : 50pt にする
  32. 32. btn_cart_00.png, btn_cart_01.png をキャンバス上に D&D する
  33. 33. btn_cart レイヤーに D&D
  34. 34. btn_cart_00.png は 01.png よりも 上にあるようにする 00,01 共に ■ Position Left : 0pt / Top : 0pt にする
  35. 35. amana tech night #2 // 実践! Pixate 06 サムネイルを作る
  36. 36. ① 新規レイヤーを作成する ② レイヤー名を thumb に変更する ③ ■ Position Left : 70pt / Top : 84pt ■ Size Width : 180pt / Height : 180pt にする レイヤーの色はこの後の作業 をわかりやすくするためにし ばらく残しておく
  37. 37. thumb.png をキャンバス 上に D&D し、thumb レ イヤーに格納する
  38. 38. thumb.png を適当に動かして thumb レイヤー の中心に吸い付かせる(かしこい!)
  39. 39. amana tech night #2 // 実践! Pixate 07 サムネイルをドラッグできるようにする
  40. 40. Drag インタラクションを thumb レイヤーに D&D で適用する
  41. 41. アニメーションタブをクリックして アニメーションパネルを表示する
  42. 42. Drag インタラクションを thumb レイヤーに D&D で適用する
  43. 43. 実機で確認してみると…… 動かせるようになった!
  44. 44. amana tech night #2 // 実践! Pixate 08 サムネイルが元の位置に戻るようにする
  45. 45. さっき追加した Move アニメーション の中にある Based On をクリック
  46. 46. ■ Based On thumb / Drag Release ■ Move to Left : 70pt / Top : 84pt にする
  47. 47. amana tech night #2 // 実践! Pixate 何をしたのか? Move アニメーションはレイヤーを動かすアニメーション。素のままだと ドラッグで動かせるだけなので『どのタイミングで』『どう動かすか』 という条件を追加した。具体的には ■ Based On(タイミングの基準) thumb レイヤーが / ドラッグリリースされた時に ■ Move to(どう動かすか) Left 70pt / Top 84pt に動かす といった感じ。
  48. 48. 元の位置に戻るようにはなったけど 位置が固定なのでちょっとびみょう。。
  49. 49. amana tech night #2 // 実践! Pixate 09 スクロールに追従させてみる
  50. 50. もう 1 つ Move アニメーションを追加して、 ■ Based on main / ScrollPosition ■ Animates Continuously with rate ■ Move Top / -1 にする
  51. 51. amana tech night #2 // 実践! Pixate 10 サムネイルの大きさを変えてみる
  52. 52. Scale インタラクションを thumb レイヤーに D&D で適用する
  53. 53. ■ Based On thumb / Drag Start ■ Scale 1.5x にする
  54. 54. 再度 Scale を thumb.png に適用して ■ Based On thumb / Drag Release ■ Scale 0x にする デフォルトの Scale も0x にする
  55. 55. サムネイルがカートの上に来たら 小さくなるようにしてみる
  56. 56. ① 3 つ目の Scale を thumb.png に適用 して ■ Based On thumb / Drag Position ■ Animates With duration to final value にする ② Zip に入っていた『conditions.txt』 を開き、01 の文字列をペーストする Scale は0.5x に設定する ③ 画面下部にある『+CONDITION』をクリックする
  57. 57. 新しく ELSE IF という項目が追加され るので『conditions.txt』の 02 の文 字列をペーストする Scale は 1.5x に設定する
  58. 58. Fade アニメーションを追加して ■ Based on thumb / Drag Start ■ Fade to 100% に設定する
  59. 59. amana tech night #2 // 実践! Pixate 何をしたのか? conditions.txt に書かれているのは、ちょっとした条件の記述(いわゆる if 文というやつです)。ざっくり解説すると ・レイヤー(ここでは thumb)の ・横の中心位置が ・250pt よりも ・大きく ・加えて、 ・thumb レイヤーの縦の中心位置が 520pt よりも大きければ thumb.cx > 250 && thumb.cy > 520
  60. 60. amana tech night #2 // 実践! Pixate 250pt 520pt 前ページに書いた条件 に当てはまるエリアで のみ、サイズを小さく した。
  61. 61. amana tech night #2 // 実践! Pixate 条件でできることは限られているため、 慣れるのに時間はかかりません。 詳しく知りたい方は↓を読んでみてください。 http://help.pixate.com/knowledgebase/articles/462989-11-conditions
  62. 62. amana tech night #2 // 実践! Pixate 11 カートボタンの大きさも変えてみる
  63. 63. Scale アニメーションを btn_cart レイヤーに D&D で適用する
  64. 64. ■ Based on thumb / Drag Start ■ Scale 1.5x に設定する
  65. 65. 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 に設定する
  66. 66. 『+CONDITION』をクリックし、条件を 追加 ■ Scale 1x / 基点は右下 に設定する
  67. 67. amana tech night #2 // 実践! Pixate 12 サムネイルの処理を詰める これを適用することで、サムネイルを離した時にカートに吸い込まれたように見えます
  68. 68. thumb.png に Fade アニメーションを 追加し、 ■ Based on thumb / Drag Release ■ Animates With duration to final value に設定する 『conditions.txt』の 01 をペーストする ■ Fade to 0% ■ Duration 0s に設定する
  69. 69. amana tech night #2 // 実践! Pixate ex 1 highlighted を再現する どこをタップしたのかが分かるようになります
  70. 70. ① 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% に設定する
  71. 71. amana tech night #2 // 実践! Pixate ex 2 カートの数字を変えてみる
  72. 72. Reorder インタラクションを btn_cart_01.png に D&D で適用する
  73. 73. ■ Based on thumb / Drag Release に設定する ■ Ordering Place Behind / btn_cart_01.png ■ Delay 1.5 seconds に設定する 『conditions.txt』の 01 をペーストする
  74. 74. Tap インタラクションを btn_cart レイヤーに D&D で適用する
  75. 75. btn_cart_00.png に再度 Reorder を適 用して ■ Based on thumb / Drag Release に設定する ■ Ordering Bring To Front ■ Delay 0 seconds に設定する
  76. 76. amana tech night #2 // 実践! Pixate 完成!
  77. 77. amana tech night #2 // 実践! Pixate おまけ Pixate でできることの簡単な解説
  78. 78. amana tech night #2 // 実践! Pixate Pixate でできること ( ざっくり ) レイヤーに レイヤーを レイヤーの を付加して させる x の位置 / x の中心位置 / y の位置 / y の中心位置 / 右位置 / 下位置 スケール / x のスケール / y のスケール / 透明度 / 回転 / x の回転 y の回転 / z の回転 / y のスクロール速度 / x のスクロール速度 y のスクロール量 / x のスクロール量 に変化があった場合 ドラッグ / タップ / ダブルタップ / 長押し 回転 / ピンチ / スクロール 移動 / スケール / 回転 / 透明度 / 色の切り替え 画像の切り替え / 階層切り替え
  79. 79. amana tech night #2 // 実践! Pixate Pixate を使ってみての雑感 • できることに限りがあるのがいい • iPhone でも Android でも見れるのがいい • Origami や Framerjs よりも覚えるのが簡単
  80. 80. amana tech night #2 // 実践! Pixate まとめ • 作ったプロトタイプをどう使うかが大切 • 実際に触ってできることできないことを知ろう • あまり手法に振り回されすぎないように!
  81. 81. 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

×