After Effectsのロゴ

こんにちは、デジタルサイネージ大好きTeam DISITです。

今回は少しリッチな演出、テキストを金属感満載にするテキストアニメーションを

おなじみAdobe AfterEffectsで制作する方法を書いてみたいと思います。

今回も基本的に有償プラグインは使用しておりません♪

世界中のどなたか一人にでもお役に立てれば幸いです!

ではさっそく作っていきましょう。

まずは元となるテキストを用意します。

文字ツールで今回は『DISIT』と入力し、天地左右センターに配置しましょう。

AfterEffectsの操作画面

あらかじめ用意しておいたテキストに映り込む画像を配置。

こちらの画像ですが、なんでも大丈夫ですが、明暗がはっきりしている画像の方が良いと思います。

画像をテキストレイヤー下に配置し、

エフェクト→スタイライズ→モーションタイルを選択します。

AfterEffectsの操作画面

パラメーターは下記のように設定します。

これで画像がタイル状に複製されます。

さらにミラーエッジにチェックを入れ、つなぎをスムーズにしておきます。

AfterEffectsの操作画面

次にこの画像レイヤーの位置にキーフレームを打ち、

下の画像のようにアニメーションさせます。

AfterEffectsの操作画面

そして、この状態で一度プリコンポーズします。

AfterEffectsの操作画面

プリコンポーズしましたら、トラックマットを『アルファマット』に設定します。

これでテキスト部分にだけ画像のアニメーションが流れるようになります。

AfterEffectsの操作画面

それでは金属感を演出していきましょう

エフェクト→ディストーション→CC blobbylizeを適用(一枚目)

エフェクト→スタイライズ→CC Glassを適用(二枚目)

パラメーターはそれぞれ画像のように設定。

CC Glassを一番上にしてください。

AfterEffectsの操作画面

AfterEffectsの操作画面

AfterEffectsの操作画面

さらに金属感を増すため新規で調整レイヤーを配置

新規調整レイヤーを追加します。

AfterEffectsの操作画面

次に色をつけていきます。

エフェクト→カラー補正→トーンカーブを適用

AfterEffectsの操作画面

ここのエフェクトはトーンカーブでなくても良いです、色々好みで試してみてください。

今回は下画像のように設定します。

AfterEffectsの操作画面

さらに新規調整レイヤーを追加し、

エフェクト→スタイライズ→グローを適用します。

グローのパラメーター設定をしながら、

いままで適用したエフェクトのパラメーターも色々と変更しながらお好みの感じに仕上げてください。

AfterEffectsの操作画面

あとは出現するアニメーションなどを追加して書き出してみましょう!!

完成!

 

デジタルサイネージ事業を手がける株式会社共栄メディア(本社:東京都新宿区、代表:錦山慎太郎)は8月1日、有限会社オーク(本社:東京都中央区、代表:小野光一)の所有するwebベースサイネージソリューション「PORABO」の事業譲渡及び商標権の譲渡が終結した為、お知らせいたします。

又、事業譲渡に伴い8月1日からは株式会社共栄メディアが販売、サポート及び保守を行い、これまでと変わらずにご利用できる体制を整えると共に更に便利にご利用頂けるよう発展させていきますので、今後とも変わらぬご愛顧の程、何卒よろしくお願い申し上げます。

ソニーの業務用ディスプレイ・テレビ 法人向けブラビア(以下、法人向けブラビア)対応webベースサイネージソリューション「PORABO」とは

ポラーボは法人向けブラビアを利用する事によりサイネージの導入をより身近にします。
これまで、サイネージには[セットトップボックス(STB)]と呼ばれる[外付けサイネージプレイヤー]が必要でした。
法人向けブラビアにはサイネージ基本機能が備わっているので、従来のサイネージ機器よりも設置機器、電源の必要数が減り、設置場所の制限から開放され用途が格段に広がりました。機器の移動も簡単に。シチュエーションに合わせた効果的なプロモーションが可能となりました。

サイネージ機器として法人向けブラビアを使用することで、これまでよりも高精細、広色域、より広いコントラストを実現。ただ画質が上がるだけにとどまらない表現力は法人向けブラビアだからこそ。
情報が多い街中、店頭で映像・広告・告知等が人の目に止まるかどうかは、表示される内容とともに美しい画面が差別化の鍵を握ります。ふと目に止まるほどの画面が情報を引き立てます。

主な特徴

■わかりやすい操作画面!ネットワーク管理で連携も自在!万が一のサポートも万全

ネットワークを利用した番組、表示機器の管理がアイコン化されたわかりやすい操作画面で行えます。もちろんPCだけでなく、スマートフォン、タブレット端末からもアクセス操作が可能です。
必要な機能を必要な分だけ利用できるSaaS形式でのサービス提供なので、不要な分の負担がかかりません。

■詳細なログ管理・レポートで、サイネージの効果的配信をお手伝いします

ポラーボでは端末毎の稼働状況を、Web上でリアルタイムでご覧いただけます。
24時間表示の円グラフだけでなく、配信が途切れた時間帯を確認が出来ます。
ポラーボでは番組、広告、告知毎の配信回数、配信時間をログ管理。配信のタイミング、回数等をより効果的に利用していただくためにWeb上でレポートをリアルタイムでご覧いただけます。数字の羅列だけではわかりにくい、回数、時間の変動はグラフ表示もされます。ポラーボはただ配信するだけでなく、次によりよい配信ができ、効果を上げていくためにお役立ていただけます。

■4K動画対応

4K動画は綺麗な分、データサイズが大きくなります。その為、クラウドでの運用は現実的ではありませんでしたが、ポラーボでは4K動画をUSBにキャッシュし、再生時はUSBから読み込みますので、安定した再生が可能です。

■事前ダウンロード

必要な動画は番組再生時ではなく、前日の配信終了後あらかじめダウンロードを行います。
時間指定により回線が混雑していない時間帯に、ダウンロードする事も可能です。

■テレビチューナー搭載※

災害時などに、一時的にサイネージの運用を停止し、テレビ放送に切り替えることも可能です。
画面の一部にテレビを表示し、残りの画面に情報を出すことが可能です。
待合室などでテレビを放送しながら、お知らせを表示することも可能です。
※テレビチューナー搭載モデルのみ

■問い合わせ先

株式会社 共栄メディア デジタルサイネージ事業部

「https://disit.jp」

専用問い合わせフォーム
「https://porabo.jp/f/inquiry.cgi」

専用ページ
「http://porabo.jp/」

直通TEL(デジタルサイネージグループ)担当:伊東
03-3267-6089
メール
disit@kyoeimedia.co.jp

■会社概要

株式会社共栄メディア
設立:1978年6月
代表取締役社長:錦山 慎太郎
所在地:〒162-0801 東京都新宿区山吹町306 共栄本社ビル
「https://www.kyoeimedia.co.jp/」

有限会社オーク
代表取締役社長:小野 光一
所在地:〒104-0061 東京都中央区銀座3-12-15 銀座細谷ビル3F
「http://oak-d.com/index.html」

■事業内容

セールスプロモーション企画、販売促進に伴う企画~制作
什器、POP、印刷、イベント企画、キャンペーン企画
デジタルサイネージコンテンツ制作、PV作成
Web制作・運営管理、デジタルカタログ制作
スマートフォンアプリ制作
Tシャツプリント、ウェアプリント全般
ノベルティグッズ作成
商業印刷全般、その他特殊印刷
デジタル校正、平台色校正、本機校正

 

After Effectsのロゴ

 

こんにちは、デジタルサイネージ大好きTeam DISITです。

今回はサイネージコンテンツにもよく使用されるグラフアニメーションですが、

おなじみAdobe AfterEffectsで制作する方法を書いてみたいと思います。

色々なアニメーション表現に応用が効くと思うので是非挑戦してみてください!

世界中のどなたか一人にでもお役に立てれば幸いです!

ではさっそく作っていきましょう。

グラフの作成

まずはアニメーションさせたいグラフを作りましょう。

楕円形ツールで細い内・外側の円、

太いメインの円グラフ、同じ位置に不透明度を下げたサブの円グラフのシェイプレイヤーを作成し、

中央にパーセントの数値を表示するテキストレイヤーを配置します。

After Effectsの操作画面

パスのトリミングを追加

次に数値レイヤー以外のシェイプレイヤー(円グラフ)どれでもよいので

コンテンツ→追加→パスのトリミングを追加します。

※”パスのトリミング”の設定は〔オフセット→0×-90←この設定で開始地点が円の頂点になります〕

After Effectsの操作画面

追加された”パスのトリミング”をコピーして

各円グラフレイヤーへペーストします。

これで各グラフの任意のところにキーフレームを打ち、

アニメーションさせる事ができるようになりました。

メイン円グラフのアニメーション設定

次にメインの円グラフと数値を連動して制御したいので

新規調整レイヤーを追加し、エフェクトから”スライダー制御”を追加しましょう。

After Effectsの操作画面

まずは下画像のようにメインの円グラフの

”パスのトリミング”のプロパティ→開始点のプロパティピックウィップを調整レイヤーの”スライダー制御”に関連付けします。

After Effectsの操作画面

次に数値レイヤーのテキストプロパティにあるソーステキストのストップウォッチをAltを押しながらクリックしエクスプレッションを追加。

そして円グラフと同じく、プロパティピックウィップを調整レイヤーの”スライダー制御”に関連付けします。

After Effectsの操作画面

これでメインの円グラフと数値を同時に制御できるようになりました。

 

ただこのままスライダー制御にキーフレームを打ちアニメーションさせると、

下画像のように小数点以下も表示されてしまいます。

After Effectsの操作画面

そこで、数値レイヤーのソーステキストのエクスプレッション言語メニューからJavaScript Math→Math.round(value)を、

thisComp.layer(“メイン調整レイヤー”).effect(“スライダー制御”)(“スライダー”)の文頭を選択し追加します。

そしてMath.round(value)のValueを削除し、()の中にthisComp.layer(“メイン調整レイヤー”).effect(“スライダー制御”)(“スライダー”)を入れてあげます。

この設定をすると、下画像のように小数点以下を切り捨てて表示してくれます。

After Effectsの操作画面

それでは動きをつけていきましょう。

調整レイヤーの”スライダー制御”の0秒と2秒にキーフレームを打ちます

両方のキーフレームを選択した状態でF9を押しイージーイーズー設定をし、動きをスムーズにします。

さらにキーフレームを選択した状態でグラフエディターを開き、動き出しを速く終わりをゆっくりに設定します。

After Effectsの操作画面

これでメイン円グラフのアニメーション設定はひとまずOKです。

残りの円グラフレイヤーにアニメーション設定

次に残りの円グラフレイヤーにもアニメーション設定をしていきましょう。

先ほどと同じように、0秒と1秒のところにキーフレームを打ち、イージーイーズー設定をします。

After Effectsの操作画面

このままだとつまらないので、

開始のタイミングをちょっとずらしてみましょう。

After Effectsの操作画面

最初に外側の円が動き出し、追って内側、最後にサブの円グラフが動きだすように設定します。

ここは好みだと思いますが、だいたい少し動きに変化が出れば良いかと思います。

あとはメイン円グラフとの調整をしていきましょう。

サブの円グラフたちの出現とともにメイン円グラフがでてくように配置します(下画像)。

After Effectsの操作画面

繋ぎのタイミングをスムーズにするため下図のように設定しましょう。

After Effectsの操作画面

完成

棒グラフなども同じように作成できます、

あとはパラメーターやタイミングなど

色々と変えて自分好みのグラフアニメーションを見つけてみましょう。

最後までご覧いただいた方ありがとうございました!

またお会いしましょう♪

CONTACT

デジタルサイネージのことでお役に立てる自信があります。

お電話でのお問い合わせ

受付時間:月~金 10:00~17:00/土・日・祝日 休み

『ディジットサイトを見た』と最初にお伝えください。
スムーズに担当者へおつなぎいたします。

新型コロナウイルスに対する社内外への感染被害抑止のため、
弊社では在宅勤務を導入しております。

電話が繋がらない場合は
こちらの電話またはメールにてお問い合わせください。

STAFF BLOG

スタッフブログ

DISIT(ディジット)のスタッフが書くブログ。