読者です 読者をやめる 読者になる 読者になる

よりぶろ

アプリのUIとかについて書いてく予定

Flinto for Macの使い方 / バージョン1.2で追加された機能の紹介

この記事はFlinto for Macの使い方シリーズになります。 他記事へはイカから行けますぞい!

2015年11月下旬頃、Flinto for Macに日本語化を含めたいくつかの機能追加がありました。

1.2で追加された主な仕様・機能

この記事では、録画機能とクリッピング機能についてご紹介します。

プレビュー時の録画機能

image

ズーム倍率の左の●ボタンから録画ができるようになりました。
細かい仕様としては以下になります。

  • プレビュー表示時のサイズで録画される
  • いじわるをして録画中にプレビューウィンドウを拡大してみたところ、元のサイズのままクリッピングされたかたちで拡大されました
  • クリック時のポインターの見えは特に変わらない

クリッピング機能

もう1つの追加機能がクリッピング(マスク)機能です。
これにより、トランジション中の画像などにクリッピングマスクを持たせることができるようになりました。
というわけでさっそく試してみましょう。

成果物

成果物のイメージは以下です。

image

事前準備

前回でも使ったファイルを引き続き利用します。

image

まずはページ03で使っている写真をページ01にペーストし、もとあったサムネイルと同じサイズにして中心を揃えます。古いほうのサムネイルは削除してOKです。
その後、サムネイルの並び順をlist 04レイヤー内で一番上にします。

image

ここからがポイントですが、クリッピングはグループ化(もしくはスクロールグループ化)したオブジェクトに対して有効化することができます。上図ではクリッピングを有効にした後、マスクの横幅を正方形になるように調整しています。
ここまでできたら、list 04レイヤーに適用しているトランジションの編集画面に移りましょう。

f:id:ryo_pan:20151204125409p:plain

このような状態になっているかと思います。ここから先の作業がちょっと面倒というか説明しづらいというか、おそらく作りたいトランジションの内容によって進め方が変わってくると思います。なので、この記事で説明しているやり方はあくまでも一例であると思って頂ければと思います。

というわけで、さっそく編集してみましょう。

image

まずは終了画面であるページ02をページ01の真上に持っていきます(X位置を0にしてる)。
ページ01のTabレイヤーに重ねていた02のTabレイヤーは基準であるページ02ごと動いたので、画面をはみ出て左にいってしまいました。これも合わせてX位置を0にして、再び01のTabレイヤー上に重ねています。
その後、Navレイヤー、New Scroll Groupレイヤー、BGレイヤーをまとめて画面の右側にはみ出させました。BGレイヤーの横幅が画面サイズぴったりなので、それを基準に位置を合わせています。

image

こういう動きになったと思います。

image

続いて、ページ02の写真と、ページ01のサムネイルを接続レイヤーで繋げます。この時、01のサムネイルではなく、それが格納されているグループに繋ぎ直すのがポイントです。
動きを確認してみましょう。

image

まだ不完全ですね。さらに作業を進めます。

image

ページ02の写真を01のサムネイルと同じサイズ・同じ位置にします。これによって、02の写真それ自体に動きが付くようになりました。続いて01のサムネイルにも変化を与えてみます。

image

トランジションを終了時にした状態でサムネイルのサイズ・位置を02の写真と同じに合わせます。これにより、01のサムネイルにも開始〜終了の動きが付くようになりました。そして、

image

無事想定した動きになりました!!!
……ただ、僕の作り方が悪いのか現在の仕様なのか、スクロールさせた状態で遷移すると表示が少しおかしくなるようです。

image

以上のように、クリッピング機能とトランジションを組み合わせることでさらに表現の幅が広がりました。
まだ試していませんが、おそらく動画と組み合わせればサムネイルをタップ→動画を横向きの全画面で再生、なんて動きもスムーズにできるのではと思います。
最初にも書きましたが、クリッピングの作り方はどういったことをしたいかによって変わってくると思います。この記事は一例ですが、何かしら参考になれば嬉しいです。

Flinto for Macの使い方シリーズはひとまずここまでとなります。
先日Meetupに参加した時にFlintoの思想について言及されてたのですが、「プロトタイプは最終的には棄てられたほうがいい」「Flintoを使ってデザイナーがもっと表現を自由にできるようにしたい」「そこから新しい表現が生まれてくれたら嬉しい」「デザイナーがマシンを起動して最初に立ち上げるツールになってくれれば」など、これからのFlintoはどうなるんだろうとワクワクする言葉がたくさん出てきていました。
またアップデートがあれば(そして日本語化がまだされていなければw)、記事にしてご紹介できればと思います。