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

amana tech night #2
実践！ Pixate

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

これまでの活動
http://yo-ry.hateblo.jp/entry/2014/02/13/204727

http://www.slideshare.net/ryoyos/origami-32856872

http://www.standardinc.jp/reflection/article/prototyping-for-app-design/

http://www.slideshare.net/ryoyos/creative-insights-01-42453782

http://www.slideshare.net/ryoyos/ui-crunch-03

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

おおざっぱな流れ
• プロジェクトの新規作成
• アセットの読み込み
• アセットの配置
• 動きをつける
• さらに動きをつけてみる

01
プロジェクトの新規作成

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

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

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

02
アセットの読み込み

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

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

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

03
アセットの配置

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

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

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

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

②
■ Position
にする
①
main.png を選んだ状態で

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

①
nav.png をキャンバス上に D&D
する
②
■ Position
にする

04
このあたりからビューワーアプリを起動しておくと、リアルタイムで更新されていくのが見れて楽しいです
画面をスクロールさせてみる

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

05
カートボタンを作る

①
新規レイヤーを作成する
②
レイヤー名を btn_cart に変更する
③
■ Position
■ Size
にする

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

btn_cart_00.png は 01.png よりも
上にあるようにする
00,01 共に
■ Position
にする

06
サムネイルを作る

①
新規レイヤーを作成する
②
レイヤー名を thumb に変更する
③
■ Position
■ Size
にする
レイヤーの色はこの後の作業
をわかりやすくするためにし
ばらく残しておく

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

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

07
サムネイルをドラッグできるようにする

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

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

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

08
サムネイルが元の位置に戻るようにする

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

■ Based On
thumb / Drag Release
■ Move to
にする

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

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

09
スクロールに追従させてみる

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

10
サムネイルの大きさを変えてみる

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

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

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

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

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

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

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

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

250pt
520pt
前ページに書いた条件
に当てはまるエリアで
のみ、サイズを小さく
した。

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

11
カートボタンの大きさも変えてみる

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

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

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

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

12
サムネイルの処理を詰める
これを適用することで、サムネイルを離した時にカートに吸い込まれたように見えます

thumb.png に Fade アニメーションを
追加し、
■ Based on
■ Animates
に設定する
■ Fade to
0%
■ Duration
0s
に設定する

ex 1
highlighted を再現する
どこをタップしたのかが分かるようになります

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

ex 2
カートの数字を変えてみる

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

■ Based on
に設定する
■ Ordering
Place Behind / btn_cart_01.png
■ Delay
1.5 seconds
に設定する

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

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

完成！

おまけ
Pixate でできることの簡単な解説

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

Pixate を使ってみての雑感
• できることに限りがあるのがいい
• iPhone でも Android でも見れるのがいい
• Origami や Framerjs よりも覚えるのが簡単

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

参考リンク
公式ヘルプ (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』

Recommended

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』