今回は、文字入力の動き(タイピング)を作ってみたので紹介したいと思います。
構成
構成はテキスト部分とカーソル部分の二つです。この二つを合わせて作っていきます。
テキストの表示
テキスト部分はこんな感じで表示させます。
テキストオブジェクトで文字を打ち込んだら、メディアオブジェクトとしてクリッピングを出します。
クリッピングの右で文頭の一文字だけになるようにします。「Typing text」の「T」ですね。
移動方法を瞬間移動にして中間点を打ち「Ty」、中間点を打ち「Typ」、中間点を打ち「Typi」といった具合で文字を表示させていきます。
毎フレーム中間点を打つとちょっと速いと感じるので、2フレーム毎に中間点を打つといいかもしれません。
ちなみに、メインウィンドウ上でマウスホイールを回転させると1フレームずつタイムラインを移動するので、細かく中間点を打つときには便利です。
スペース部分では少し間隔をあけて中間点を打つと上手くタイミングが取れると思います。
クリッピングのいいところは何文ずつ字表示させるかを自分でコントロールできるところです。クリッピングの右の値次第で一文字表示させ、次は二文字表示させ、その次はまた一文字表示のようにすることができます。
クリッピングはちょっと大変かも・・・と思ったら、制御文字<r>, <w>を使っても良いですね。
カーソルと点滅
カーソルは四角形(図形)に斜めクリッピングをかけて縦線、下線、ボックスを作りました。あとは画像としてアイコン素材を使っても良いですね。
カーソルは文字の入力待機中に点滅します。
メディアオブジェクトとして点滅を出し、消灯速度を100にします。
点滅割合50、点灯・消灯速度を100にするとフェード無しのオンオフの点滅になります。後はお好みで速さを調節します。
合わせる
ではテキストとカーソルを合わせてタイピング演出を作ってみます。1秒くらいあけてテキスト部分を作ります。クリッピングの右を瞬間移動で動かし文字を表示させます。
カーソル用の四角形(図形)を出します。今回は縦線です。
メディアオブジェクトとして基本効果の中にある座標を出します。
カーソルオブジェクトを座標でテキストの左側に配置します。カーソルのスタート地点はここになります。
あとはテキストの表示に合わせてカーソルの座標を瞬間移動で動かしていきます。カーソルは表示される文字の末尾右側に置くように動かします。
こんな感じ。
カーソルは入力待機時間中は点滅でしたね。メディアオブジェクトとして点滅を出し表示前と表示後を点滅させます。この例では速さ1.5です。
別パターン
カーソルが下線の場合、初期位置は一文字目になります。
その後は表示されるテキスト末尾の右側に配置していきます。
こんな感じ。
カーソルがブロックの場合。初期位置は下線と同じ一文字目配置。
その後はテキスト末尾の右側に配置。
このブロックは下線と同じ作り方ですね。
ボックスカーソルの工夫
カーソルがボックスの場合、末尾の右側ではなく末尾に重ねて置くパターンもあります。
テキスト表示中も末尾の文字に重ねます。
表示後も末尾に重ねます。
こちらはボックスカーソルのタイムラインです。まずは先ほどまでのテキスト末尾の右側に配置していたボックスを座標で末尾に重なるように配置します。
ボックスを末尾に重なるように配置すると末尾の文字が見えなくなります。
テキストとクリッピングのオブジェクト(Layer 1と2)を複製し、貼り付け(Layer 6と7)。貼り付けた二つのオブジェクトを一文字分だけ先行させます。
拡張編集左端のレイヤーボタンをクリックして余計なレイヤーを一時的にオフにします。
クリッピングの左を瞬間移動にして末尾の文字だけが表示されるようにクリッピングしていきます。
テキストと末尾だけのテキストができました。
このようにテキスト、ボックス、ボックス内テキストが別々のオブジェクトになると、それぞれの色を自由に変えることができます。
ボックス内テキストにも点滅をかけることで、点灯しているときはボックスとボックス内テキストが表示され、消灯すると最背面のテキスト(Layer 1)が表示されるようになります。
中央から表示
クリッピング左下にある中心の位置を変更にチェックを入れると、テキストが中央から表示される動きになります。
中心の位置を変更にチェックを入れたときは、クリッピングの値を51のような奇数にするとテキストがぼけることがあるので、そのときは52のような奇数で設定してみてください。
縦線カーソルと合わせたもの。
使用例
検索バー、チャット、メッセージなどテキストを入力する場面の再現にぴったりです。
日本語入力の場合は、変換の工程を加えるのがポイントですね。文字の削除や打ち直し表現などの工夫もできます。
いかがだったでしょうか。
仕組みは単純ですが、少し作業量が多めになりました。その分自由度が高く、一歩進んだタイピング演出作りに役立つかなと思います。
手作り文字入力(タイピング)演出、機会があれば是非試してみてください。