本日Flinto for Macバージョン2を公開しました。こちらの最新版には、画面内でのインタラクションやアニメーションに関する大きな新機能が加わりました。スイッチ切り替えやボタンを押す操作、ループするアニメーションやスクロールベースのアニメーションまでが、簡単に作成できるようになります。新機能「ビヘイビアデザイナ」の登場です。

Flinto for Mac 2を試す

多くの皆さんに新しい機能を試していただけるよう、Flinto for Macのトライアルをリセットしました。過去にすでにFlinto for Macを試された方でももう一度試していただけます。

ビヘイビアデザイナ

ビヘイビアデザイナを使うと、画面内で起こる小さなインタラクションを作成できます。例えばスクロールベースのインタラクションやループするアニメーション、スイッチの切り替え、ボタンのエフェクトその他様々なインタラクションを作成可能です。ビヘイビアはトランジションと同じく再利用できます。ビヘイビアは一時停止することが可能なため、非常にレスポンシブなインタラクションにも向いています。

ビヘイビアデザイナなら、手早く非常に視覚的にアニメーションを編集できます。プレビュー内でアニメーションがかかっているレイヤー自体を直接編集できるので、作品の最終的な出来と切り離された部分で作業している感じはまったくありません。

ビヘイビアはグループに適用され、一連のステータスから成り立っています。各ステータスにリンクを追加することで、ステータス間を移動でき、自動的にアニメーションが起こります。ビヘイビアデザイナの詳細はチュートリアルビデオページをご覧下さい。

切り替えられるスイッチをデザインするには、「オン」と「オフ」のステータスを作る必要があります。各ステータスにはもう一方のステータスをターゲットとしたタップジェスチャーを追加します。さらにリアルな挙動にするためには、ステータス間にスワイプジェスチャーを付けても良いでしょう。

ビヘイビアデザイナでループするアニメーションを作るには、レイヤーの各位置のステータスを作り、それらのステータスをタイマーリンクでリンクします。

スクロールベースのアニメーションでは、1つのステータスから別のステータスへ、新しいスクロールジェスチャーを使ってリンクして下さい。定義した範囲でスクロールすると、1つのステータスからもう1つのステータスへのアニメーションが再生されます。上記の例では、1つは縮小するヘッダーに、もう1つは右側の画像のパララックス効果に、同じグループ内の2つのビヘイビアが使われています。

ビヘイビアデザイナを閉じたら、ビヘイビアの細かい部分を気にかけることなく、プロトタイプの別の面に集中できます。

共有可能なトランジションとビヘイビア

Flinto 2でもう1つ変わったのは、トランジションとビヘイビアをドキュメント間で共有できるようになったところです。1つのドキュメントから別のドキュメントへリンクをコピーすると、リンクに適用されているトランジションがコピー先のドキュメントでも使えるようになります。ビヘイビアが適用されたグループも、新しいドキュメントへコピーして再利用が可能です。

こちらはよく使うトランジションやビヘイビアがいくつかあるチームでの作業において、画期的な機能改善です。また優れたトランジションやビヘイビアをたくさん詰め込んだFlintoドキュメントを他の人にシェアし、みんなで使えるようにすることもできるため、Flintoユーザーコミュニティ全体にとっても有意義だと考えられます。

トランジションデザイナ改良

今回のアップデートではFlinto for Macのトランジションデザイナにも改善を加え、これまでよりもさらに使いやすくしました。トランジションデザイナで混乱を招きがちだったいくつかの部分を改良し、「画面を整列」トランジションを作成する新規設定を追加しました。

• 起点と終点画面サムネイルが新しくなり、どれが最初の画面でどれが最後の画面なのか明確に
• 画面ボーダーを削除して画面をグループのような扱いに変更。画面をクリックしてドラッグすると、全体を移動できるように。ダブルクリックまたは「command＋クリック」で、含まれるレイヤーにアクセス可能
• 新規「画面を整列」チェックボックスで画面を整列させてロックできるようになり、よくある挙動で操作間違いが起こりにくく

• Flintoを試してみよう！
• Twitterでシェア
• Facebookグループに参加