エアーマット メリット デメリット 介護,
Jane Style 検索できない,
アシタカ サン SS,
僕の彼女は 魔法使い レンタル,
三井ホーム 全館空調 価格,
FF9 マダインサリ クイナ,
サグーワークス 案件 一覧,
Under Control 和訳,
夜叉 映画 ロケ地,
日弁連 登録 替え,
Google Classroom チャット機能,
楽天イーグルス パーカー 2019,
生理 呼吸 浅い,
ハンドメイド 確定申告 レシート,
筆耕 求人 東京,
バラ色の人生 歌詞 ピアフ,
岡村隆史 実家 住所,
フェリペ アンデルソン プレースタイル,
グランドチェロキー SRT8 維持費,
松本清張 聞かなかった場所 ネタバレ,
料理 使われている 英語,
紅ゆずる ブルーレイ ボックス,
テレビ 視聴者数 減少,
FF7 レズリー 正体,
Amazon レビュー 仕事,
Anaクラウンプラザホテル大阪 クラブラウンジ 2019,
ドラゴンボール 身勝手の極意 フィギュア 買取,
クラブツーリズム 割引 ベネフィット,
アマゾン プライム 恋愛 洋画 ランキング,
カーセンサー 掲載 効果,
マツキヨ ローション 評判,
特 任 教授の給料,
バルセロナ エイバル チケット,
ハッカ油 スプレー 作り方 エタノールなし,
女の子 名前 漢字 意味,
岩崎宏美 良美 デュエット,
App Development With Swift Level 1,
久 万田 大崎上島 メニュー,
歌い手 グループ名 決め方,
フォニックス クイズ アプリ,
はりま 法律事務所 口コミ,
オンライン授業 グーグル ドライブ,
Sensitivity, Specificity Accuracy,
MOZU 雫 父親,
甚平 ロンパース ディズニー,
付き合って は いけない バンドマン,
Let The River Run 映画,
海外 求人 英語力不問,
ネイティブ っ キャンプ,
キプリング 財布 アマゾン,
か 書き方 コツ,
ゲーミングイヤホン マイク付き Ps4,
Google リモートワーク 年内,
鈍感 敏感 違い,
広島 ホテル クラブフロア,
庭 タープ 張り方,
タカコーポレーション 修理 評判,
内職 札幌 高校生,
こんにちは！今回のテーマは「簡単！アニメーション GIF の作り方」です。 アニメーション GIF (以下 アニメ GIF )の作り方がかわからない、上手く動かせない…とお悩みの方向けの簡単な内容になっています。 作業環境は下記の通り、Adobeのソフトを使用して作成します。 の場合はすすんだメニュー）に「アニメGIF」出力があり、縦横サイズ、秒間のコマ数を設定すれば、簡単に、背景透明のアニメGIFを作成できます。「ぶれ」は、アニメーション中にゆらいで、手描きアニメのような効果を出す機能で、筆がかすれたような表現ができます。「ぶれ」の強さは「線の種類」パレットで調整できます。たったこれだけ。１コマ絵を描くだけなので、作り方は静止画と同じです。PowerPointでは、スライドショーさせるとアニメが動きます。LibreOfficeでは編集画面でも動きます。9VAeきゅうべえでは、新しいアニメを開いた直後に「１」ボタンを押したときだけ、ひとコマアニメーションを作ることができます。この方法と比較すると、9VAe きゅうべえの作り方がいかに簡単かわかります。「１」ボタンによって、9VAeきゅうべえの内部では以下の設定が行われます。ひとコマアニメーションを作成し、プレゼンソフトにアニメGIFを入れるまでの手順は以下のようになります。PowerPointも同じ手順です。もし、ワコムの筆圧ペンタブレットを接続していれば、筆圧によって線の太さが変わります。マウスでは、適当に線の太さが変化します。文字の形や線の太さは、あとから自由に変更できます。 小学校で学習するひらがな、カタカナ、数字、漢字の 1,182 字のスライドを用意しました。このスライドは一画ごとに独立したパーツの組み合わせで構成しているため、色や大きさをパーツごとに自由に編 … 最初のコンポジションに戻って、「O」が、どの時点からアニメーションを開始し、どの時点で終了するのかを確認します。まずは、完成した動画から。以下のようなアニメーションを作成します。再生ボタンをクリックでアニメーションがスタートします。Illustratorなどのベクトル形式で作成されたプロジェクトの場合、mp4(H.264形式)でレンダリングすると、コンポジションで設定した背景色が適用されず、背景が黒くなってしまいます。Illustratorは、クリップボードにコピーしているため閉じても大丈夫だと思いますが、念のため、After Effectsで貼付けるまで閉じずに開いたままにしておきます。これでキーフレームが作成されました。タイムラインのインジケーターを左右に動かすと、白い線も合わせて伸縮するようになります。[プレビュー] パネルの再生ボタンをクリックすれば、アニメーションをスタートさせることもできます。次に、先ほどクリップボードにコピーしたIllustratorのレイヤーをAfter Effects内にペーストします。[OK] をクリックすると、今まで透明だったコンポジションの部分（設定によってはコンポジションの背景色）に、赤色に塗りつぶされた平面レイヤーが作成されます。この作成されたレイヤーをコンポジションで選択したまま「command + v」と打ち、先ほどIllustratorでコピーしたレイヤーをペーストします。今回作成したものは、あくまでもサンプルなので、単調で躍動感に欠けますが、イージングをかけたり、単語ごとでコンポジションを分けたり、秒数を縮めたりと、もう少し手間を掛けてあげるともっとずっと良くなるかと思います。After Effectsの基本的な部分も含め、AIデータの配置から動画のレンダリングまで細かく紹介していきます。「切り抜く」という表現が正しいのか分かりませんが、下のレイヤーの形に合わせてアニメーションさせなくてはいけないので、その為の設定を行います。それぞれのコンポジションの作成が完了したら、一番最初のコンポジションに戻り、ベースレイヤーの「O」と「X」を削除しておきます。ここでは、640 × 360の大きさで、フレームレートは60fps、5秒間の短いアニメーションを作成する設定にしてあります。ここも同じように、新たな平面レイヤーを作成し、[不透明度] を調整して下のレイヤーが確認できる状態にします。作成したレイヤーを選択しつつ、ペンツールで文字順通りにパスを打ち、[エフェクト] で [線] をつけ、下の文字を覆えるだけの太さにします。上記のように全てのパスが打ち終わったら、「ブラック平面1」レイヤーを選択したまま、メニューの [エフェクト] をクリックし、[描画] → [線] をクリックします。設定と言っても単純なもので、初めに作成した「レッド平面1」というレイヤーの [トラックマット] という項目で、[ルミナンスキーマット ブラック平面1] を選択するだけです。レイヤーで分けることもできると思いますが、複数のコンポジションを扱うやり方も覚えておきたいので、あえてこの方法で対応してみました。文字を書き順通りに徐々にアニメーションさせて描画する「ハンドライティングアニメーション」をSVGで実装する方法。 以前に AfterEffects で同じようなことをやっていて、それのSVGバージョン。AfterEffe…次に、今度は、タイムラインのインジケーターの位置を一番右に移動させ、[終了] のインジケーターも100%にスライドさせます。「文字を書き順通りに塗りつぶす」と言っても、単なる（After Effects上の）テキストではなく、Illustrator で作成したレイヤーに、件のアニメーションを施すという作業になります。なお、今回「O」と「X」は、太すぎてしまうため、この2文字についてはとりあえず無視して、別の方法で対応することにします。このままだと、場所によって、本来、表示されるタイミングでないにも関わらず、ブラシサイズ（線）が太すぎたり、パスの位置が悪かったりするために、一部、見切れて表示してしまうことがあります。[トラックマット] という項目が見当たらない場合は、[スイッチ/モード] という部分をクリックすると表示されるようになります。これで、IllustratorのレイヤーをAfter Effects内に配置することができました。Illustratorは不要ですので、閉じてしまっても問題ありません。タイムラインを1フレームずつ進めたい時は、ショートカット（command + →）を利用すると便利です。ちなみに「O」用のコンポジションと「X」用のコンポジションでも分けています。やることはどちらも同じですので、「O」の場合のみ説明していきます。現状で３つのコンポジションが作成されていますが、このままだと、それぞれ別々にアニメーションするだけなので、これらを１つのコンポジションに配置して、１枚の動画にする作業を行います。まず、どこか適当なスペースをクリックして、どのレイヤーも選択していない状態にし、[ペンツール] をクリックします。[塗り] に背景色と同じ色を指定し、はみ出ている部分が完全に隠れるようにパスで囲んでいきます。次に、メニューの [レイヤー] → [新規] 内の [平面] をクリックで、もう１つ別の（アニメーション用）レイヤーを作成します。「平面設定」のダイアログで、今度は [カラー] を黒にして、[OK] をクリック、「ブラック平面1」というレイヤーが作成されます。最初に作成した要領で、新規にコンポジションを作成します。設定はすべて同じです。さっきと同じように、ベースとなるレイヤーをIllustratorからコピーして、[レイヤー] → [新規] → [平面] で新規の平面レイヤーを作成し、ペースト。「O」以外の余分な文字は削除します（この作業が地味に面倒）。これではみ出している部分は隠れましたが、このままだと表示のタイミングが来たとしても白い部分が残ってしまうので、表示させるべきタイミングが来たら [不透明度] を [0] にして、白いパスを非表示にするように（新たなキーフレームを作成して）設定します。まずAfter Effectsを開き、メニューの [コンポジション] → [新規コンポジション] の順にクリックし、動画の元となるコンポジションを作成します。次に、フレームを 01:19 まで進め、今度は [終了] インジケーターを [100%] にスライドし、完了です。「ブラック平面1」というレイヤーが選択されている状態で、メニュー下の [ペンツール] をクリックし、下のレイヤーを見ながら、書き順通りにパスを打っていきます。[不透明度] を元に戻し、先ほどとは少し手順が前後しますが、[ルミナンスキーマット] を選択して、下のレイヤーで切り抜きます。パスは全てクローズせずに、オープンパスとします。オープンパスは、「command」ボタンを押さえながらコンポジション内のどこかをクリックすると確定し、新たなパスを打つことができるようになります。このパスは、方向も含め、実際に塗りつぶされる順番に打っていく必要があります。あとで調整しなければいけないので、とりあえずは中心を意識してパスを打っていけばOKです。さらに、下のレイヤーに表示されている文字が全て隠れるくらいまで、[ブラシのサイズ] を太くし、（上のレイヤーの）パス自体を動かしたりして完全に白い線で下のレイヤーが隠れるように調整をします。各コンポジションを分かりやすくするため、コンポジションの名前をそれぞれ「cut_01」、「cut_02」、「cut_03」とし、全てを配置するコンポジションを「mix」としました。アンカーポイントの数が多かったりすると、多少、切り抜かれるまで時間が掛かる場合があります。とりあえず前提として、Illustratorのデータ（たとえばロゴとか）をベースにしますので、Illustratorを開き、対象のレイヤーを選択した上で「command + c」でクリップボードにコピーします。古いバージョンのブラウザでは、正常に表示されない箇所が出てくるため非表示としております。ものすごく長いですし、自分用の覚書ですので、見づらい点はご容赦ください。ここからが本題で、少しややこしくなっていきます。まず、どこか空いているスペースをクリックして、何も選択していない状態にします。mp4(H.264形式)で書き出したい場合は、メニューの [ファイル] → [書き出し] → [Adobe Media Encoder キューに追加] をクリックし、Media Encoderを立ち上げます。ここでは、00:32 でアニメーションが開始し、01:19 でアニメーションが終了することが分かりましたので、「O」のコンポジションに戻って、フレームを 00:32 に合わせてから「エフェクトコントロール」の [終了] インジケーターを [0%] にスライドし、[終了] のストップウォッチアイコンをクリックします。ここからは、アニメーションさせる為のキーフレームを作成していきます。この作業を繰り返して、はみ出している箇所を全て修正していきます（気にならない場合、この作業は不要）。スライドさせると分かると思いますが、0から100というのは、白い線の全長のことで、スライドに合わせて線が伸びたり縮んだりします。なので、0にすると線が全くない状態となります。今回のようなベクトルレイヤーの場合、レンダリング時にぼやけることがあるので、各レイヤーに対して [連続ラスタライズ] にチェックを入れておくと、ぼけを防ぐことができます。[連続ラスタライズ] の項目は、[スイッチ/モード] の切替えで表示されます。中央上の赤い再生ボタンをクリックすると、レンダリングが開始されます。After Effectsのバージョンは、CC (2015) になります。他に、IllustratorとMedia Encoderがでてきますが、これらも CC (2015) になります。Macで作成していますので、ショートカットとかは全てMac用のものになります。背景色を別で指定したい場合には、（レンダリングしたい）コンポジションに背景となる色を指定した「平面レイヤー」を作成し、最背面に追加することで、指定した背景色としてレンダリングすることができるようになります。すると「エフェクトコントロール」という線のスタイルを設定できるパネルが表示されますので（パネルが表示される場所は設定により異なります）、[すべてのマスク] にチェックを入れ、[カラー] に白を指定し、[ブラシの硬さ] は100%にしておきます。ここまでで、先ほど変更した [不透明度] を100%に戻しておきます。レンダリングする場合は、レンダリングしたいコンポジションを表示（今回の場合は全てのコンポジションを配置した「mix」というコンポジション）し、まずメニューの [コンポジション] → [レンダーキューに追加] をクリックして、コンポジションをレンダーキューに追加します。コンポジションの背景を透明にしたい場合は、コンポジションの下にある「透明グリッド」をクリックすると、背景色の表示非表示を切り替えることができます。前提条件として、この処理は背景色が決まっている場合に有効な方法です。背景が透過の場合には使えません。まず、先ほどの「エフェクトコントロール」パネルの [終了] の左側にある白い三角形をクリックします。0.0% から 100% のインジケーターが表示され、100%のところにつまみが配置されていますので、これを0.0%までスライドさせます。まず、（設定は同じで）新しくコンポジションを作成します。そこに、[プロジェクト] パレットに表示されている作成済みのコンポジションを、新規に作成したコンポジションへドラッグアンドドロップしていきます。この設定は、メニューの [コンポジション] → [コンポジション設定] で、全て後で変更が可能ですが、フレームレートやデュレーション（動画の長さ）については、予め決めておいた方が無難です。[H.264] と記載されている部分をクリックすると、「書き出し設定」というダイアログが表示されますので、形式や出力名を決定し（オーディオの書き出しが不要の場合は[オーディオを書き出す]のチェックを外す）、[OK] をクリックしてダイアログを閉じます。複数のコンポジションを配置する作業はこれだけです。通常は、ここでフレームの位置を調節して、アニメーションが開始する位置を合わせるのですが、今回は既にフレームを合わせてコンポジションを作成してあるので、配置するだけで1本の動画に仕上がっています。ここでは、[レンダリング設定] と [出力モジュール] をそれぞれ設定し、出力名を決定します。設定が完了したら [レンダリング] ボタンをクリックでレンダリングが開始します。パスの位置を調整することで解消できる場合もありますが、上記画像の場合には、ブラシサイズが太すぎることによるものなので、パスの位置を調整しただけでは修正できません。こういった場合の処理方法を、以下で紹介します。これで、00:32 から 01:19 の間でアニメーションするコンポジションが完成しました。「X」についても同じように作成しておきます。まず、メニューの [レイヤー] → [新規] 内の [平面] をクリックします。「平面設定」というダイアログが表示され、ここでは [カラー] の設定のみ行います。ここでのカラーは、仕上がりの色と同じになるので、仕上げたい色を指定します。Illustratorのレイヤーをペーストすると、以下のようにレイヤーで切り抜いたような状態になります。WordBench 長野 vol.7 で Webデザイナーが VCCW を使ってみた話をしてきました #wbnagano「コンポジション設定」というダイアログが表示されるので、作成する動画に合わせて項目を設定します。通常はこれでレンダリングすれば完了ですが、太すぎてうまく表示できなかった「O」と「X」について、コンポジションを分離する方法で対応してみたいと思います。CSSアニメーション(transition)で起こるバブリングの原因と対策正確には「バブリング」とは呼ばないと思うし、ちょっと意味合いが違うかもしれないけど、CSSで子要素に与えたtransitionが親要素へ伝播し、アニメーションの挙動をおかしくさせる現象に何度か遭遇した。 もしかすると、C…単純なアニメーションですが、Illustratorのレイヤーを利用する方法とか、コンポジションを分けたりとか、調べるのに結構苦労したので、将来の自分用にまとめてみた次第です。2017年3月11日（日）、松本で開催された「WordBench Nagano vol.7」に参加および登壇させていただきました。 今さら感は否めませんが、Webデザイナーとして、WordPressの開発環境にVCCWを…Illustratorは以上で、ここからはAfter Effectsでの作業になります。黒いレイヤーに覆われて、下のレイヤーが全く確認できない状態になってしまっているため、上の黒いレイヤーの [不透明度] を60%くらいにして、下のレイヤーが見える状態にします。
こんにちは！今回のテーマは「簡単！アニメーション GIF の作り方」です。 アニメーション GIF (以下 アニメ GIF )の作り方がかわからない、上手く動かせない…とお悩みの方向けの簡単な内容になっています。 作業環境は下記の通り、Adobeのソフトを使用して作成します。 の場合はすすんだメニュー）に「アニメGIF」出力があり、縦横サイズ、秒間のコマ数を設定すれば、簡単に、背景透明のアニメGIFを作成できます。「ぶれ」は、アニメーション中にゆらいで、手描きアニメのような効果を出す機能で、筆がかすれたような表現ができます。「ぶれ」の強さは「線の種類」パレットで調整できます。たったこれだけ。１コマ絵を描くだけなので、作り方は静止画と同じです。PowerPointでは、スライドショーさせるとアニメが動きます。LibreOfficeでは編集画面でも動きます。9VAeきゅうべえでは、新しいアニメを開いた直後に「１」ボタンを押したときだけ、ひとコマアニメーションを作ることができます。この方法と比較すると、9VAe きゅうべえの作り方がいかに簡単かわかります。「１」ボタンによって、9VAeきゅうべえの内部では以下の設定が行われます。ひとコマアニメーションを作成し、プレゼンソフトにアニメGIFを入れるまでの手順は以下のようになります。PowerPointも同じ手順です。もし、ワコムの筆圧ペンタブレットを接続していれば、筆圧によって線の太さが変わります。マウスでは、適当に線の太さが変化します。文字の形や線の太さは、あとから自由に変更できます。 小学校で学習するひらがな、カタカナ、数字、漢字の 1,182 字のスライドを用意しました。このスライドは一画ごとに独立したパーツの組み合わせで構成しているため、色や大きさをパーツごとに自由に編 … 最初のコンポジションに戻って、「O」が、どの時点からアニメーションを開始し、どの時点で終了するのかを確認します。まずは、完成した動画から。以下のようなアニメーションを作成します。再生ボタンをクリックでアニメーションがスタートします。Illustratorなどのベクトル形式で作成されたプロジェクトの場合、mp4(H.264形式)でレンダリングすると、コンポジションで設定した背景色が適用されず、背景が黒くなってしまいます。Illustratorは、クリップボードにコピーしているため閉じても大丈夫だと思いますが、念のため、After Effectsで貼付けるまで閉じずに開いたままにしておきます。これでキーフレームが作成されました。タイムラインのインジケーターを左右に動かすと、白い線も合わせて伸縮するようになります。[プレビュー] パネルの再生ボタンをクリックすれば、アニメーションをスタートさせることもできます。次に、先ほどクリップボードにコピーしたIllustratorのレイヤーをAfter Effects内にペーストします。[OK] をクリックすると、今まで透明だったコンポジションの部分（設定によってはコンポジションの背景色）に、赤色に塗りつぶされた平面レイヤーが作成されます。この作成されたレイヤーをコンポジションで選択したまま「command + v」と打ち、先ほどIllustratorでコピーしたレイヤーをペーストします。今回作成したものは、あくまでもサンプルなので、単調で躍動感に欠けますが、イージングをかけたり、単語ごとでコンポジションを分けたり、秒数を縮めたりと、もう少し手間を掛けてあげるともっとずっと良くなるかと思います。After Effectsの基本的な部分も含め、AIデータの配置から動画のレンダリングまで細かく紹介していきます。「切り抜く」という表現が正しいのか分かりませんが、下のレイヤーの形に合わせてアニメーションさせなくてはいけないので、その為の設定を行います。それぞれのコンポジションの作成が完了したら、一番最初のコンポジションに戻り、ベースレイヤーの「O」と「X」を削除しておきます。ここでは、640 × 360の大きさで、フレームレートは60fps、5秒間の短いアニメーションを作成する設定にしてあります。ここも同じように、新たな平面レイヤーを作成し、[不透明度] を調整して下のレイヤーが確認できる状態にします。作成したレイヤーを選択しつつ、ペンツールで文字順通りにパスを打ち、[エフェクト] で [線] をつけ、下の文字を覆えるだけの太さにします。上記のように全てのパスが打ち終わったら、「ブラック平面1」レイヤーを選択したまま、メニューの [エフェクト] をクリックし、[描画] → [線] をクリックします。設定と言っても単純なもので、初めに作成した「レッド平面1」というレイヤーの [トラックマット] という項目で、[ルミナンスキーマット ブラック平面1] を選択するだけです。レイヤーで分けることもできると思いますが、複数のコンポジションを扱うやり方も覚えておきたいので、あえてこの方法で対応してみました。文字を書き順通りに徐々にアニメーションさせて描画する「ハンドライティングアニメーション」をSVGで実装する方法。 以前に AfterEffects で同じようなことをやっていて、それのSVGバージョン。AfterEffe…次に、今度は、タイムラインのインジケーターの位置を一番右に移動させ、[終了] のインジケーターも100%にスライドさせます。「文字を書き順通りに塗りつぶす」と言っても、単なる（After Effects上の）テキストではなく、Illustrator で作成したレイヤーに、件のアニメーションを施すという作業になります。なお、今回「O」と「X」は、太すぎてしまうため、この2文字についてはとりあえず無視して、別の方法で対応することにします。このままだと、場所によって、本来、表示されるタイミングでないにも関わらず、ブラシサイズ（線）が太すぎたり、パスの位置が悪かったりするために、一部、見切れて表示してしまうことがあります。[トラックマット] という項目が見当たらない場合は、[スイッチ/モード] という部分をクリックすると表示されるようになります。これで、IllustratorのレイヤーをAfter Effects内に配置することができました。Illustratorは不要ですので、閉じてしまっても問題ありません。タイムラインを1フレームずつ進めたい時は、ショートカット（command + →）を利用すると便利です。ちなみに「O」用のコンポジションと「X」用のコンポジションでも分けています。やることはどちらも同じですので、「O」の場合のみ説明していきます。現状で３つのコンポジションが作成されていますが、このままだと、それぞれ別々にアニメーションするだけなので、これらを１つのコンポジションに配置して、１枚の動画にする作業を行います。まず、どこか適当なスペースをクリックして、どのレイヤーも選択していない状態にし、[ペンツール] をクリックします。[塗り] に背景色と同じ色を指定し、はみ出ている部分が完全に隠れるようにパスで囲んでいきます。次に、メニューの [レイヤー] → [新規] 内の [平面] をクリックで、もう１つ別の（アニメーション用）レイヤーを作成します。「平面設定」のダイアログで、今度は [カラー] を黒にして、[OK] をクリック、「ブラック平面1」というレイヤーが作成されます。最初に作成した要領で、新規にコンポジションを作成します。設定はすべて同じです。さっきと同じように、ベースとなるレイヤーをIllustratorからコピーして、[レイヤー] → [新規] → [平面] で新規の平面レイヤーを作成し、ペースト。「O」以外の余分な文字は削除します（この作業が地味に面倒）。これではみ出している部分は隠れましたが、このままだと表示のタイミングが来たとしても白い部分が残ってしまうので、表示させるべきタイミングが来たら [不透明度] を [0] にして、白いパスを非表示にするように（新たなキーフレームを作成して）設定します。まずAfter Effectsを開き、メニューの [コンポジション] → [新規コンポジション] の順にクリックし、動画の元となるコンポジションを作成します。次に、フレームを 01:19 まで進め、今度は [終了] インジケーターを [100%] にスライドし、完了です。「ブラック平面1」というレイヤーが選択されている状態で、メニュー下の [ペンツール] をクリックし、下のレイヤーを見ながら、書き順通りにパスを打っていきます。[不透明度] を元に戻し、先ほどとは少し手順が前後しますが、[ルミナンスキーマット] を選択して、下のレイヤーで切り抜きます。パスは全てクローズせずに、オープンパスとします。オープンパスは、「command」ボタンを押さえながらコンポジション内のどこかをクリックすると確定し、新たなパスを打つことができるようになります。このパスは、方向も含め、実際に塗りつぶされる順番に打っていく必要があります。あとで調整しなければいけないので、とりあえずは中心を意識してパスを打っていけばOKです。さらに、下のレイヤーに表示されている文字が全て隠れるくらいまで、[ブラシのサイズ] を太くし、（上のレイヤーの）パス自体を動かしたりして完全に白い線で下のレイヤーが隠れるように調整をします。各コンポジションを分かりやすくするため、コンポジションの名前をそれぞれ「cut_01」、「cut_02」、「cut_03」とし、全てを配置するコンポジションを「mix」としました。アンカーポイントの数が多かったりすると、多少、切り抜かれるまで時間が掛かる場合があります。とりあえず前提として、Illustratorのデータ（たとえばロゴとか）をベースにしますので、Illustratorを開き、対象のレイヤーを選択した上で「command + c」でクリップボードにコピーします。古いバージョンのブラウザでは、正常に表示されない箇所が出てくるため非表示としております。ものすごく長いですし、自分用の覚書ですので、見づらい点はご容赦ください。ここからが本題で、少しややこしくなっていきます。まず、どこか空いているスペースをクリックして、何も選択していない状態にします。mp4(H.264形式)で書き出したい場合は、メニューの [ファイル] → [書き出し] → [Adobe Media Encoder キューに追加] をクリックし、Media Encoderを立ち上げます。ここでは、00:32 でアニメーションが開始し、01:19 でアニメーションが終了することが分かりましたので、「O」のコンポジションに戻って、フレームを 00:32 に合わせてから「エフェクトコントロール」の [終了] インジケーターを [0%] にスライドし、[終了] のストップウォッチアイコンをクリックします。ここからは、アニメーションさせる為のキーフレームを作成していきます。この作業を繰り返して、はみ出している箇所を全て修正していきます（気にならない場合、この作業は不要）。スライドさせると分かると思いますが、0から100というのは、白い線の全長のことで、スライドに合わせて線が伸びたり縮んだりします。なので、0にすると線が全くない状態となります。今回のようなベクトルレイヤーの場合、レンダリング時にぼやけることがあるので、各レイヤーに対して [連続ラスタライズ] にチェックを入れておくと、ぼけを防ぐことができます。[連続ラスタライズ] の項目は、[スイッチ/モード] の切替えで表示されます。中央上の赤い再生ボタンをクリックすると、レンダリングが開始されます。After Effectsのバージョンは、CC (2015) になります。他に、IllustratorとMedia Encoderがでてきますが、これらも CC (2015) になります。Macで作成していますので、ショートカットとかは全てMac用のものになります。背景色を別で指定したい場合には、（レンダリングしたい）コンポジションに背景となる色を指定した「平面レイヤー」を作成し、最背面に追加することで、指定した背景色としてレンダリングすることができるようになります。すると「エフェクトコントロール」という線のスタイルを設定できるパネルが表示されますので（パネルが表示される場所は設定により異なります）、[すべてのマスク] にチェックを入れ、[カラー] に白を指定し、[ブラシの硬さ] は100%にしておきます。ここまでで、先ほど変更した [不透明度] を100%に戻しておきます。レンダリングする場合は、レンダリングしたいコンポジションを表示（今回の場合は全てのコンポジションを配置した「mix」というコンポジション）し、まずメニューの [コンポジション] → [レンダーキューに追加] をクリックして、コンポジションをレンダーキューに追加します。コンポジションの背景を透明にしたい場合は、コンポジションの下にある「透明グリッド」をクリックすると、背景色の表示非表示を切り替えることができます。前提条件として、この処理は背景色が決まっている場合に有効な方法です。背景が透過の場合には使えません。まず、先ほどの「エフェクトコントロール」パネルの [終了] の左側にある白い三角形をクリックします。0.0% から 100% のインジケーターが表示され、100%のところにつまみが配置されていますので、これを0.0%までスライドさせます。まず、（設定は同じで）新しくコンポジションを作成します。そこに、[プロジェクト] パレットに表示されている作成済みのコンポジションを、新規に作成したコンポジションへドラッグアンドドロップしていきます。この設定は、メニューの [コンポジション] → [コンポジション設定] で、全て後で変更が可能ですが、フレームレートやデュレーション（動画の長さ）については、予め決めておいた方が無難です。[H.264] と記載されている部分をクリックすると、「書き出し設定」というダイアログが表示されますので、形式や出力名を決定し（オーディオの書き出しが不要の場合は[オーディオを書き出す]のチェックを外す）、[OK] をクリックしてダイアログを閉じます。複数のコンポジションを配置する作業はこれだけです。通常は、ここでフレームの位置を調節して、アニメーションが開始する位置を合わせるのですが、今回は既にフレームを合わせてコンポジションを作成してあるので、配置するだけで1本の動画に仕上がっています。ここでは、[レンダリング設定] と [出力モジュール] をそれぞれ設定し、出力名を決定します。設定が完了したら [レンダリング] ボタンをクリックでレンダリングが開始します。パスの位置を調整することで解消できる場合もありますが、上記画像の場合には、ブラシサイズが太すぎることによるものなので、パスの位置を調整しただけでは修正できません。こういった場合の処理方法を、以下で紹介します。これで、00:32 から 01:19 の間でアニメーションするコンポジションが完成しました。「X」についても同じように作成しておきます。まず、メニューの [レイヤー] → [新規] 内の [平面] をクリックします。「平面設定」というダイアログが表示され、ここでは [カラー] の設定のみ行います。ここでのカラーは、仕上がりの色と同じになるので、仕上げたい色を指定します。Illustratorのレイヤーをペーストすると、以下のようにレイヤーで切り抜いたような状態になります。WordBench 長野 vol.7 で Webデザイナーが VCCW を使ってみた話をしてきました #wbnagano「コンポジション設定」というダイアログが表示されるので、作成する動画に合わせて項目を設定します。通常はこれでレンダリングすれば完了ですが、太すぎてうまく表示できなかった「O」と「X」について、コンポジションを分離する方法で対応してみたいと思います。CSSアニメーション(transition)で起こるバブリングの原因と対策正確には「バブリング」とは呼ばないと思うし、ちょっと意味合いが違うかもしれないけど、CSSで子要素に与えたtransitionが親要素へ伝播し、アニメーションの挙動をおかしくさせる現象に何度か遭遇した。 もしかすると、C…単純なアニメーションですが、Illustratorのレイヤーを利用する方法とか、コンポジションを分けたりとか、調べるのに結構苦労したので、将来の自分用にまとめてみた次第です。2017年3月11日（日）、松本で開催された「WordBench Nagano vol.7」に参加および登壇させていただきました。 今さら感は否めませんが、Webデザイナーとして、WordPressの開発環境にVCCWを…Illustratorは以上で、ここからはAfter Effectsでの作業になります。黒いレイヤーに覆われて、下のレイヤーが全く確認できない状態になってしまっているため、上の黒いレイヤーの [不透明度] を60%くらいにして、下のレイヤーが見える状態にします。