pixatestudio2.0

 

モバイルアプリのプロトタイプ制作ツール、Pixate の最新バージョン Pixate Studio  2.0 が 2015年12月8日に公開されました。(10日時点では、バージョン2.0.1になっています。)

それでは今回のアップデートで、どのような機能アップデートがあったのかメモしたいと思います。

 

今回の主要アップデート

キャンバスへのズームイン/アウト

pixate_zoom

Pixate Studio 2.0 では、キャンバスのズームイン/アウトが出来るようになりました。

現時点では、12.5%, 25%, 50%, 100%, 200%, 400%, 800%にズームイン/アウトできます。

 

オーディオとビデオファイルがアセットへ追加可能に

これまで、画像ファイルしかアセットに出来なかったのが、新たに音声ファイルとビデオファイルもアセットに追加できるようになりました。

では、どのように追加するかですが、

load_movie1

 

まずは、Assetsで動画ファイルを選択しキャンバスに配置。

動画ファイルを配置しても、そのまま再生される訳では無いので、アニメーションを設定する必要があります。Studioの左下のAnimationパネルに"Playback"という新しいアニメーションがあるので、それを配置したオブジェクトにドラッグしてみてください。

pixate_movie2

 

Playbackのアニメーションが設定されると、画面右下のAnimation設定パネルでどのタイミングで動画が再生されるかを設定できます。

pixate_movie3

 

例えば、直ぐに動画を再生したい場合は、こちらの"Control Playback"という設定パネルで、

上記のように、

"Based On" を*SCREEN*にし"Loaded"にし、CONDITIONのActionで"Start playback"を選択します。

このように設定すると、Screenがロードされたタイミングで、動画が再生という設定になるので、プロトタイプをAndroidやiOSのアプリでロードされたタイミングで動画が再生さるようになります。

 

Scrollの新しいインタラクションの追加

Pixateのscroll viewは、正直扱うのに癖がありました。こちらの記事で詳しく紹介されていますが、端的に説明すると、scroll viewの上端がy=0だとした場合、下にスクロールすると、scroll viewのy座標は、マイナスに増えていくのですが、Pixateでは0より小さな値を扱えない関係でscroll viewがスクロールした場合のアニメーションの処理がシンプルに記述することができませんでした。

今回のPixate Studio 2.0のアップデートで scroll view の変更量(どれだけオフセットしたか)をトリガーにしてアニメーションを行うことが可能になりました。

スクロール部分に関しては後日、別記事として詳細に使い方を含めて書いてみますね。

 

それ以外の、細かいアップデート

  • Interaction と Animationが タブで分かれていたのが、独立したパネルに。
  • Layerのロックが可能に。
  • Layerパネルで複数のLayerを選択し、ドラッグが可能に。

などなどあります。

細かなアップデートについては、冒頭で紹介した本家のアナウンスを見ていただけると！

 

Pixateの使い方の基本的な部分は、前バージョン(ver 1.8)からの大きな変更は無いので、こちらの素敵なブログ記事やスライドが非常に参考になります :)

 

本記事は、UI Design Advent Calendar 2015 の10日目の記事になります。といいつつ、、、公開が数時間遅れてしまった。。。

 

でわでわ。