単行本『田舎医者/ポチ』予告編(& Hype 1.5.0 レビュー)

 4月13日発売予定の新単行本『田舎医者/ポチ』の、収録作品のアニメーテッド・プレビュー付き予告編を作ってみました。
 下の画像をクリックするか、このリンクをクリックすると見られますので(読み込みにちょっと時間がかかるかも知れません)、お時間のある時にでもどうぞ。
 収録作品が映画の予告編みたいに動きます(笑)。
inakaisya-pochi-preview

 予告編の制作には、前にここここで書いた、HTML5をベースにしたインタラクティブなアニメーションを作れるアプリケーション、Hypeを使いました。
 先月メジャー・アップデートがあったので、今回初めてバージョン1.5.0を使ってみました。レイアウトやアニメーション編集の機能強化、HTMLウィジットやメールフォームの追加、iBooks Authorへのエクスポートなど、様々な機能がバージョンアップしたんですが、確かにバージョン1.0と比べて格段に使いやすくなっています。
 というわけでその中から、使ってみて「良くなった!」と感じたものを、幾つかピックアップ。

【Locking and Visibility】
 Adobe Illustratorを使ったことのある方なら判ると思うんですが、Hypeも画像やテキストといったオブジェクトを、下から上に重ねていくように画面をレイアウトしていきます。で、今まではそれが重なっていくと、どうしても下に隠れたオブジェクトを選択するのが難しくなっていったりしました。
 新バージョンではタイムライン上で、可視/不可視のオン/オフが、アイコンのクリック一つで出来るようになったので、そういった「うが〜、この下にあるオブジェクトを選択したいのに、上のが邪魔で選択できねぇ!」みたいなストレスが皆無に。
 そしてアニメートしないオブジェクトをロックすることも出来るようになったので、つい間違ったオブジェクトを動かしてしまってundo……ってなこともなくなりました。

【Sweet Snapping】
 これはIllustratorのスマートガイド機能と似たような感じで、この機能をオンにしておくと、いま選択してドラッグしているオブジェクトと、他のオブジェクトとのセンター合わせや距離(ピクセル数)などのガイドが表示されるようになる、というもの。
 前のバージョンでは、画面全体のセンターあわせくらいしか、こういうガイドは出なかったので、この新機能でオブジェクトの位置を揃えたりするのが格段に楽になりました。

【Rulers and Guidelines】
 作業ウィンドウの上方と左方に、ルーラー(定規)が表示できるようになりました。このルーラーからはPhotoshopと同じ要領で、ガイドを引っ張り出すことができます。
 当然このガイドにはオブジェクトをスナップできるので、これまたレイアウト作業が格段に便利に。そしてこのガイドは、現在作業しているのとは別のシーンにコピーもできるので、複数シーン間でのレイアウトの統一なども、ぐっと楽に。

【Grouping】
 複数オブジェクトをグループ化できるようになりました。
 以前は、複数のオブジェクトを同時に同じ動きをさせたい場合、複数オブジェクトを選択した状態で、録画機能をオンにしてまとめてドラッグ&ドロップ……とかしなきゃならなかったのが、このグループ化機能によって、アニメーションを各オブジェクトにではなく、グループ全体に適用するころができるようになりました。
 これはまさに切望していた機能強化で、実際すごく便利!

【Redesigned Animation Interface】
 アニメーション用のタイムラインが、今までは一つだったのが、新バージョンではオブジェクト用と各オブジェクトのアニメーション用の、二つのウィンドウに分かれました。
 これによって、上のオブジェクト用ウィンドウでオブジェクトを選択すると、選択されたオブジェクトのアニメーション用タイムラインが下のウィンドウに表示されるという形になり、今までのようにアニメートしたいオブジェクトの属性を、いちいち開いたり畳んだりという手間が省かれました。
 更に、オブジェクト用ウィンドウに表示されているアニメーションのタイムラインを直接選択&ドラッグすることで、開始位置や終了位置を変えたり、全体の位置そのものを移動したりできるようになりました。
 これまた、以前は変更したいアニメーション用のキーフレームを、タイムライン上で全て選択してからドラッグしたりしなければいけなかったので、タイミングの微調整はもとより、いったん全体を作ってしまってから、頭や途中に別のアニメーションを挿入したくなったので、そこから後のアニメーション全てをまとめて後ろに動かしたい……なんて作業が格段に楽になりました。

【Bounce and Instant Timing Functions】
 アニメーションのモーション指定が、今までのLinear(一定速度)、Ease In Out(最初と最後だけゆっくり)、Ease In(最初だけゆっくり)、Ease Out(最後だけゆっくり)の4種類に、新たにInstant(途中経過のアニメートなしでモーションがいきなり切り替わる)とBounce(最後に弾むようなアクション)が加わりました。
 特にInstantがありがたく、例えば今までオブジェクトをいきなりパッと表示したい場合、まずタイムラインの一番頭に透過100%のキーフレームを置き、次に表示したい時間の1フレーム前にも透過100%というキーフレームを置き、1フレーム後の目的のフレームに透過0%のキーフレームを置く……なんて作業が必要だったのが、このInstantを使えば、1フレーム前にキーフレーム云々という作業がいらなくなります。

 以上、今回初めてHype 1.5.0を使ってみて「うぉ〜便利になった!」と自分が感じたポイントを、幾つかピックアップしてみました。
 操作方法もPhotoshopやIllustratorといった定番ソフトのそれに似ているので、特にマニュアル等で確認しなくても、勘と見当でサクサク使える感じです。