Post on 17-Jul-2015
amana tech night #2
実践!Pixate
amana tech night #2 // 実践! Pixate
いま話している人について
吉竹 遼@ryo_pan
2011 年〜 2014 年 10 月までフェンリル株式会社で受託開発に従事。
2014 年 10 月から Standard Inc に参画。
amana tech night #2 // 実践! Pixate
これまでの活動
http://yo-ry.hateblo.jp/entry/2014/02/13/204727
amana tech night #2 // 実践! Pixate
これまでの活動
http://www.slideshare.net/ryoyos/origami-32856872
amana tech night #2 // 実践! Pixate
これまでの活動
http://www.standardinc.jp/reflection/article/prototyping-for-app-design/
amana tech night #2 // 実践! Pixate
これまでの活動
http://www.slideshare.net/ryoyos/creative-insights-01-42453782
amana tech night #2 // 実践! Pixate
これまでの活動
http://www.slideshare.net/ryoyos/ui-crunch-03
amana tech night #2 // 実践! Pixate
事前準備
• Pixate の登録 http://www.pixate.com/
•ビューワーアプリのインストール iPhone / Android
•アセットのDL・解凍 https://www.dropbox.com/s/cfxkodl35ep4vcm/assets.zip?dl=0
ワークショップの時とはファイル構成が微妙に違うので、当日参加された方もDLをお願いします
amana tech night #2 // 実践! Pixate
おおざっぱな流れ
•プロジェクトの新規作成
•アセットの読み込み
•アセットの配置
•動きをつける
•さらに動きをつけてみる
amana tech night #2 // 実践! Pixate
01
プロジェクトの新規作成
新規プロジェクトを作成する
新規プロトタイプを作成する
今回は iPhone5 を選ぶ
アクションパネル(自動化のためのアクションが選択でき
る。自分で作ることも可能)
アニメーションプロパティパネル(付加されたアニメーションやインタラク
ションの細かい設定ができる)
キャンバス(レイヤーやアセットはここに表示される)
プロパティパネル(選択したレイヤーの情報が編集できる)
レイヤーパネル(作成したレイヤーとか置いたアセット
はここに表示される)
インタラクションパネル(レイヤーに対して付加できるインタラ
クションが選べる)
アニメーションタブ(アニメーションパネルに切り替え
ることができる)
amana tech night #2 // 実践! Pixate
02
アセットの読み込み
真ん中のアイコンをクリックして
アセットパネルを開く
あらかじめダウンロードしておいたフォルダ
から、テキストファイル以外の6個の PNG
ファイルを画面上にD&Dする
読み込みが終わるとアセットが一
覧表示されます
なお今回はbtn_search.png は使
用しません
amana tech night #2 // 実践! Pixate
03
アセットの配置
クリックしてレイヤーを新規作成
■ Position
Left:0pt/Top:64pt
■ Size
Width:320pt/Height:504pt
にする
ダブルクリックしてレイヤー名を
『main』に変更
ダブルクリックして色を『f7f7f7』に変更
(初期状態だとRGBが入ってるけど、#な
しのHEXcoloro を入力しても適用してく
れる!かしこい!)
適当にD&Dで置く
main.pngをmain レイヤーにD&D
②
■ Position
Left:0pt/Top:0pt
にする
①
main.pngを選んだ状態で
親レイヤーに格納された子レイヤーの
Position は親を基点に指定されるので、0,0
を指定すればいい感じに上に配置できます
まず作りたいオブジェクトのサイズのレイ
ヤーを作成して、その中にアセットを入れる、
という流れでやるとスムーズに作れます
①
nav.png をキャンバス上にD&D
する
②
■ Position
Left:0pt/Top:0pt
にする
amana tech night #2 // 実践! Pixate
04
このあたりからビューワーアプリを起動しておくと、リアルタイムで更新されていくのが見れて楽しいです
画面をスクロールさせてみる
Scroll インタラクションを
main レイヤーにD&Dで適用する
(適用したいレイヤーを選択した状態
でアニメーションプロパティパネルに
D&Dでも可)
amana tech night #2 // 実践! Pixate
05
カートボタンを作る
①
新規レイヤーを作成する
②
レイヤー名をbtn_cartに変更する
③
■ Position
Left:260pt/Top:508pt
■ Size
Width:50pt/Height:50pt
にする
btn_cart_00.png,btn_cart_01.png
をキャンバス上にD&Dする
btn_cart レイヤーにD&D
btn_cart_00.png は 01.png よりも
上にあるようにする
00,01 共に
■ Position
Left:0pt/Top:0pt
にする
amana tech night #2 // 実践! Pixate
06
サムネイルを作る
①
新規レイヤーを作成する
②
レイヤー名を thumbに変更する
③
■ Position
Left:70pt/Top:84pt
■ Size
Width:180pt/Height:180pt
にする
レイヤーの色はこの後の作業
をわかりやすくするためにし
ばらく残しておく
thumb.pngをキャンバス
上にD&Dし、thumbレ
イヤーに格納する
thumb.pngを適当に動かして thumbレイヤー
の中心に吸い付かせる(かしこい!)
amana tech night #2 // 実践! Pixate
07
サムネイルをドラッグできるようにする
Drag インタラクションを
thumbレイヤーにD&Dで適用する
アニメーションタブをクリックして
アニメーションパネルを表示する
Drag インタラクションを
thumbレイヤーにD&Dで適用する
実機で確認してみると……
動かせるようになった!
amana tech night #2 // 実践! Pixate
08
サムネイルが元の位置に戻るようにする
さっき追加したMoveアニメーション
の中にあるBasedOnをクリック
■BasedOn
thumb/DragRelease
■Moveto
Left:70pt/Top:84pt
にする
amana tech night #2 // 実践! Pixate
何をしたのか?
Moveアニメーションはレイヤーを動かすアニメーション。素のままだと
ドラッグで動かせるだけなので『どのタイミングで』『どう動かすか』
という条件を追加した。具体的には
■BasedOn(タイミングの基準)
thumbレイヤーが/ドラッグリリースされた時に
■Moveto(どう動かすか)
Left70pt/Top84ptに動かす
といった感じ。
元の位置に戻るようにはなったけど
位置が固定なのでちょっとびみょう。。
amana tech night #2 // 実践! Pixate
09
スクロールに追従させてみる
もう1つMoveアニメーションを追加して、
■Basedon
main/ScrollPosition
■ Animates
Continuouslywithrate
■Move
Top/-1
にする
amana tech night #2 // 実践! Pixate
10
サムネイルの大きさを変えてみる
Scale インタラクションを
thumbレイヤーにD&Dで適用する
■BasedOn
thumb/DragStart
■ Scale
1.5x
にする
再度 Scale を thumb.png に適用して
■BasedOn
thumb/DragRelease
■ Scale
0x
にする
デフォルトの Scale も0xにする
サムネイルがカートの上に来たら
小さくなるようにしてみる
①
3つ目の Scale を thumb.png に適用
して
■BasedOn
thumb/DragPosition
■ Animates
Withdurationtofinalvalue
にする
②
Zip に入っていた『conditions.txt』
を開き、01の文字列をペーストする
Scale は0.5x に設定する
③
画面下部にある『+CONDITION』をクリックする
新しくELSEIF という項目が追加され
るので『conditions.txt』の 02の文
字列をペーストする
Scale は 1.5x に設定する
Fade アニメーションを追加して
■Basedon
thumb/DragStart
■ Fadeto
100%
に設定する
amana tech night #2 // 実践! Pixate
何をしたのか?
conditions.txt に書かれているのは、ちょっとした条件の記述(いわゆる
if 文というやつです)。ざっくり解説すると
・レイヤー(ここでは thumb)の
・横の中心位置が
・250pt よりも
・大きく
・加えて、
・thumbレイヤーの縦の中心位置が520pt よりも大きければ
thumb.cx>250&&thumb.cy>520
amana tech night #2 // 実践! Pixate
250pt
520pt
前ページに書いた条件
に当てはまるエリアで
のみ、サイズを小さく
した。
amana tech night #2 // 実践! Pixate
条件でできることは限られているため、
慣れるのに時間はかかりません。
詳しく知りたい方は↓を読んでみてください。
http://help.pixate.com/knowledgebase/articles/462989-11-conditions
amana tech night #2 // 実践! Pixate
11
カートボタンの大きさも変えてみる
Scale アニメーションを
btn_cart レイヤーにD&Dで適用する
■Basedon
thumb/DragStart
■ Scale
1.5x
に設定する
2つ目の Scale アニメーションを適用し、
■Basedon
thumb/DragRelease
■ Animates
Withdurationtofinalvalue
に設定する
『conditions.txt』の 01をペーストする
■ Scale
1x/基点を右下に変える
■ EasingCurve
spring
■ Friction/Tension
10/300
に設定する
『+CONDITION』をクリックし、条件を
追加
■ Scale
1x/基点は右下
に設定する
amana tech night #2 // 実践! Pixate
12
サムネイルの処理を詰めるこれを適用することで、サムネイルを離した時にカートに吸い込まれたように見えます
thumb.png に Fade アニメーションを
追加し、
■Basedon
thumb/DragRelease
■ Animates
Withdurationtofinalvalue
に設定する
『conditions.txt』の 01をペーストする
■ Fadeto
0%
■ Duration
0s
に設定する
amana tech night #2 // 実践! Pixate
ex1
highlighted を再現するどこをタップしたのかが分かるようになります
①
main レイヤー内に新規レイヤーを
作成する(ここではhighlighted
に名前を変更)
■ Position
Left:4pt/Top:4pt
■ Size
Width:312pt/Height:209pt
■ Appearance 内 Color
ffffff
■ Opacity
0%
に設定する
②
Fade アニメーションを 2つ追加し、
1つ目を
■Basedon
thumb/DragStart
■ Fadeto
50%
2つ目は
■ Basedon
thumb/DragRelease
■ Fadeto
0%
に設定する
amana tech night #2 // 実践! Pixate
ex2
カートの数字を変えてみる
Reorder インタラクションを
btn_cart_01.png に D&Dで適用する
■Basedon
thumb/DragRelease
に設定する
■Ordering
PlaceBehind/btn_cart_01.png
■ Delay
1.5seconds
に設定する
『conditions.txt』の 01をペーストする
Tap インタラクションを
btn_cart レイヤーにD&Dで適用する
btn_cart_00.pngに再度 Reorder を適
用して
■Basedon
thumb/DragRelease
に設定する
■Ordering
BringToFront
■ Delay
0seconds
に設定する
amana tech night #2 // 実践! Pixate
完成!
amana tech night #2 // 実践! Pixate
おまけ
Pixate でできることの簡単な解説
amana tech night #2 // 実践! Pixate
Pixate でできること ( ざっくり )
レイヤーに
レイヤーを
レイヤーのを付加して
させる
xの位置/x の中心位置/y の位置/y の中心位置/右位置/下位置
スケール/x のスケール/y のスケール/透明度/回転/x の回転
yの回転/z の回転/y のスクロール速度/x のスクロール速度
yのスクロール量/x のスクロール量
に変化があった場合
ドラッグ/タップ/ダブルタップ/長押し
回転/ピンチ/スクロール
移動/スケール/回転/透明度/色の切り替え
画像の切り替え/階層切り替え
amana tech night #2 // 実践! Pixate
Pixate を使ってみての雑感
•できることに限りがあるのがいい
• iPhone でも Android でも見れるのがいい
•Origami や Framerjs よりも覚えるのが簡単
amana tech night #2 // 実践! Pixate
まとめ
•作ったプロトタイプをどう使うかが大切
•実際に触ってできることできないことを知ろう
•あまり手法に振り回されすぎないように!
amana tech night #2 // 実践! Pixate
参考リンク
公式ヘルプ (5,6,10,10a,10b,11 は特に必読 )
公式チュートリアル
公式デモ
PrototypingandDesignwithLyft&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