詳しい使い方は後述しますが、「POP」とか「Prott」と比べると画面要素が多くて、最初この画面を見た時は「何がどうなっているんだ...」って思いました。「pixateはプロトタイピングツール」と思い込んでいるからややこしいだけで、「どっちかというとKeynoteに近いもの」と認識を改めれば、なんとなく使い方のコツが掴めるんじゃないかと思います。端末にアプリをインストールしておくことで、実機で動作確認することができます。アプリを起動し、コネクティングしましょう。選べますが、前者のほうが安定するようなのでオススメです。ネットワークに接続する必要があります。ボタンを押すと、接続中の端末が表示されますのでチェックボタンをクリック。繋がるとリアルタイムでデバイスの画面に反映されます。シミュレータで動作確認することができます。「Simulator」→「作成したデバイス名」で、こちらもリアルタイムで反映されます。プロトタイピング作成までの基本的な流れ基本的な作業の流れは以下のようになります。中に入るので、真ん中の画面にドラッグ&ドロップで配置。反応する範囲を設定(レイヤーを作る)。インタラクションを仕込む。インタラクションで起こるアニメーションを設定。デバイスやシミュレータで確認。ある動作を作ってみる画面右上のボタンをタップすると、別の画面に遷移する「ドリルダウン」のプロトタイプを作成してみましょう。移動前の画面、ボタンの画像を画面内に配置。移動後の画面は、画面外に配置。この場合はドリルダウンなので、右隣に置きましょう。新規レイヤーを作成し、設定ボタンの大きさに範囲を設定。この時設定ボタン画像より上にレイヤーがきているか確認。下に潜ってしまった場合は、レイヤーをドラッグして並び替えられます。ついでに名前も変えておきましょう。好みの名前で構いませんが、ひとまず「tap_setting」という名前にします。レイヤーの色を透明にレイヤーの色を透明にします。パネルから消しましょう。レイヤー構造を整理するインタラクションやアニメーションをつける前に、一度レイヤーを整理しましょう。レイヤーは他レイヤーにドラッグして親・子の関係にすることができます。今回は、ボタンを押すとはけていくもの(現在の画面)ボタンを押すと入っていくもの(設定画面)それぞれのレイヤーを作成しておきます。名前も「Main」「Setting」と、それっぽいのをつけておきました。レイヤーにアニメーションを追加します。インタラクションを追加します。アニメーションを追加します。それぞれに追加します。パネルにはいくつかの設定項目があります。インタラクションなのでこれを選択します。CONDITION:このアニメーションはどういう条件の時に行うの?というのを設定する例えば、「ボタンが画面より100pt下に来た時に」というような場合に使います。この項目は条件式を書く必要があるので、ちょっと複雑です。書き方のサンプルはこちらを参照してください。今回は特にそのような条件は無いので、空欄でOKです。どの位置に移動させるかを設定するアニメーションによって移動させたい位置を記述します。今回は画面外に出したいので、1画面分ずらすということでleftに「-375pt」を設定しています。Curve:アニメーションのイージングを設定するその名の通り、イージングの設定です。こちらはお好みで!Durations:アニメーションの継続時間を設定するこのアニメーションを何秒間行うかの設定です。Delay:アニメーションがはじまるまでの待ち時間を設定するわざとタイミングをずらしたい時などに設定します。今回はタップしてすぐに始まって欲しいので、0秒のままにします。同等なので詳細は割愛しますが、今回は「画面内に入っていく」アニメーションですので、以下のように設定します。実機やシミュレータで確認して、ちゃんとアニメーションできていればOK!これでドリルダウンする動きができました。別に書いてあげる必要があります。やり方はドリルダウンの時とほぼ同じです。アニメーションを作成します。レイヤーのことですね。レイヤーにアニメーションを複数個持たせることができます。実は新規に親レイヤーなんて作成しなくても、読み込んだ画像のレイヤーに直接アニメーションを設定することができます。Aの画像とBの画像を同時に動かしたい、となった時、A・B画像を親レイヤーの配下に置けば、親レイヤーに移動のアクションを書くだけで済みます。Photoshopのフォルダのようなものとして使うことで、画像枚数が増えていった時も整理しやすくなります。使ったほうがいいです!端末の画面回転の感知これはできませんでした...現状では、画面を横にするとそのまま縦画面が回転するようです。今後のバージョンアップに期待ですね。(もし方法をご存知でしたら、ぜひお知らせ下さい!)ちょっと難しい動きを作りたい公式のサンプルプロジェクトがとっても参考になります。ファイルがダウンロードできます。デモや動画を見て、自分の考えている動きに近いものがあれば、ダウンロードして確認するといいでしょう。Norén%d人のブロガーが「いいね」をつけました。