ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
イージングなしとあり 画像ではイージングがわかりやすいようにグラフを入れてあります。 横が時間、縦がスケール、点がキーが打たれていることを表しています。 UIごとのイージング UI素材ごとにどのような緩急の付け方が良いのか迷うかと思います。 ダイアログアニメーション以外に、画面遷移時のUIの動きやクエスト開始演出など様々なアニメーションを入れるたびにどのイージングが正解なのか、それについては正解はありません。 ゲームの色味やデザイン、世界観を知らずにアニメーションは付けられません。 また、UIがどこまで世界観を踏襲するのかで、システムのような動きにするのか、世界観に合わせた動きにするのかも変わってきます。 こういった部分は関係部署にコミュニケーションをとってどんなゲームを作りたいのかを把握し、イージングはどうするのかを考えていきます。 そして、予備動作やオーバーシュートが必要なのか不要なの
状況説明系はもっともシンプルでシステム寄りのものになるため、表示アニメーション自体シンプルな場合がほとんどです。 状況説明が使われるのはRPGやMMOなど情報過多なゲームに多く、使用されるシーンは状態異常やアイテムを拾った時、攻撃に付加効果がついた時など画面では伝えにくいことを説明することが多いです。 動きは主にベルトコンベアのように機械的なアニメーションやフェードインアウトで終わる場合も多く、目立たせずに情報だけを伝えることが目的の場合に使用されます。 威力表現 インゲーム中の文字で最も重要でゲームによって様々な表現になる演出です。 文字の出し方は、連続で何発与えたかを視覚的に表現するのもバラバラに見せたり重ねて見せるやり方や、数値を加算して結果だけ出すやり方など様々な表現があります。 回復を表現する時は文字を緩やかに上へ表示することでHPの上昇を表現するなど、ここでの文字表現だけで一つ
こんにちは! 株式会社Rabeeでデザイナーをしています、nanamiです🌿 デザインにおいて「伝えたい情報を意図した通りに見せる」ことは最重要ポイントであり、且つ難しいポイントではないでしょうか。 そんな「伝わるデザイン」の特徴の1つとして挙げられるのが、見ている人に見せたい情報を適切に見せるよう目線をコントロールできていること。 これはWebサイトのデザインでもバナーのデザインでも共通して言えることですが、今回は特に目線の動きが重要になる動画のデザインを見ながら、そのポイントをまとめてみました! 悪い例 〜私の初心者作品を添えて〜他人の失敗例を見ると学びになることって多いですよね…🧐 ということで、良い例をご紹介する前に、まずはNG例を見ながら説明をしたいと思います。 今回はNG例として、私が学習の一環としてとあるサービスの紹介動画を作成した中からシーンを抜粋しています。 私が作成
こんにちは、mooographです。 フリーランスで映像制作をしている、女子映像クリエイターです。 現在YouTubeで、アニメーションやモーショングラフィックスのチュートリアルを配信しています。 私は学生の頃、海外美大に留学していた経験があります。 以前Twitterで、海外美大ではどのようなカリキュラムだったのか気になる!というコメントをいただきましたので 私が学生時代、どのようにアニメーションやモーショングラフィックスを勉強したかお話しようと思います。 もともとはピクサーに憧れて、アニメーションフィルムの勉強をしようと海外に行ったわけですが、 紆余曲折あってモーショングラフィックスカッコいい!!となり、その勉強をすることにしました。 モーショングラフィックスはデザイン科どのような勉強をしたかお話する前に、そもそもモーショングラフィックスの授業があるのは、アニメーション科ではなくNew
まず先にUI演出と書いていますが、UIアニメーションとUI演出の二つ違いを書いておきます。(UI演出という言葉を勝手に作っているので自分の解釈の説明です) ・UIアニメーション ユーザーの知りたい機能や視線の誘導、快適さを追求する動き ・UI演出 世界観のようにゲーム自体の表現や期待感のようなユーザーの感情を動かす動き ゲームはアプリと違い、機能性だけを追求するものではないため、UI演出が大切になります。 アプリはユーザーへ快適と便利を提供しますが、ゲームはエンターテイメントを提供するものでアプリとは仕様が全く異なります。 だからこそ、機能重視のUIアニメーションはとても大事ですが、UI演出もゲームにとってはとても大事な存在になっています。 最近までNG系UIアニメーションなどでわかりやすくシンプルにしていくことを書いていましたが、この記事では演出もゲーム作りの一つで大事な要素ということに
PSDで画面を作っていきます AEに持っていく時にPSDをそのままAEに入れるので、動かしたいパーツだけレイヤー分けをしておくと使いやすいです。 なるべくシンプルにしておくのがおすすめで、フォルダーは使わずにレイヤーだけの中身になっているようにPSDを整理しておくと簡単にAEで作業ができます。 AE準備編 ワークスペースを整える まずはAEをひらくと不要なウインドウも多いので、最低限のウインドウだけにします。 ウインドウ → ワークスペース → 最小構成 余計なウインドウが消えてすっきりしました。 そして、ここから使うものだけをさらに厳選します。 画像で黒く塗りつぶされているものだけをまずは使うと混乱しなくてよいと思います。 そこから徐々に使える領域を広げ、エフェクトに手を出すと無限の可能性が待っています。 AEの構成は4つに分かれていて、まずは各ウインドウの簡単な説明をします。 ・プロジ
デザインやイラストの静止画を思い通りに動かせたら楽しいのに、どんな動きをつければよいのか分からない、そんな制作者・クリエイターにぴったりなAfter Effectsの解説書を紹介します。 案件で動画やアニメの依頼が増えてきたというWeb制作者やイラストレーターの人にお勧めの一冊です。IllustratorやPhotoshopは使えるけど、動画やモーショングラフィックスはまだという人に特にお勧めします。 本書は、9/28に発売されたばかり! さまざまなデザイン書でお馴染みのPower Design Inc.様が制作されたイラレのデザインを映像クリエイターの著者様がAfter Effectsで動きをつけた実践的な解説書です。動画用のデータの作り方をはじめ、After Effectsの基本操作、さまざまな動画・モーショングラフィックスの制作手順を学べます。 解説はAfter Effects初心者
初めに AutoEncoder(自己符号器)というのは機械学習の中でも、教師無し学習の一種です。応用例としては異常検知が知られています。 今回はCNN(畳込ニューラルネットワーク)を使用してmnistに対するAutoEncoedrを試してみたいと思います。 何番煎じかわからないですが、Pytorchを勉強した備忘録です。 今回参考にしたのはこちら AutoEncoderについて 大雑把なAutoEncoderの理解は以下になります。 入力データと出力データの内容がイコールになるように、エンコーダとデコーダを調整します。 入力データが普段と異なるデータの場合、うまく入力データとイコールになる出力データを作ることができません。 そのため、入力データと出力データの差が多い場合、異常と判断することができる(らしいです)。 実践 環境は python ver3.6.9 pytorch ver1.3.
はじめに この記事は、Visual Studio Codeに、Adobe ExtendScript Debuggerプラグインをセットアップする手順を共有するためのものです。 前提とする条件 この記事は以下の環境を想定しています。 macOS 10.14.6 Visual Studio Code 1.38.1 ExtendScript Debugger 1.1.2 記事を読む前に、お手元の環境をご確認ください。 想定する読者 この記事は以下の読者を想定しています。 Visual Studio Codeを利用したことがある JavaScriptの知識がある ExtendScriptを利用、開発したことがある この記事ではVisual Studio CodeおよびExtendScript開発の解説はしません。 ExtendScriptとは ExtendScriptとは、Adobe社のCreat
神はいる!!!! After Effectsでちょいちょい遊ぶことが増えてきて、日夜プラグイン販売サイトである「aescripts」に張り付いている私です、こんばんわ。 After Effectsいいですよね、かっけえ映像が作れたりする汎用性が高いツールです。個人的にAfter Effectsの強みって、ユーザーが制作した多種多様なプラグイン群だと思うんです。あれ作れねぇかなあ!! って時に検索すると「こいつで一発だよ」って出てきて、しゅしゅごい・・・ってなります。 プラグインなしでも勿論同じ物が作れるでしょう。しかし、プラグインがなくて作るのが1日かかって少しでも修正がかかるとさらに1日かけたりするのか、かちゃぽんぱでワンクリックでいけるのどっちがいい? って言われたら私は後者ですね!!! 先人たちのでかい肩に乗るのが私の主義。 というわけで紹介していきましょう。有料のものが多いです。ま
「Lottieロッティー」はAirbnb社が開発した、ベクター画像をアニメーションさせることができる技術・ファイルフォーマットです。 前回の記事では、Lottieの概要から、Figmaを使った作り方、LottieFilesを用いた書き出し方法を紹介しました。 本記事ではAdobe After Effectsを使ったLottieの作成方法から書き出し方、表示確認までを紹介します。 ▼Lottieの作例 サンプルを別ウインドウで開く ソースコードを確認する 作り方 - Bodymovinで書き出し After Effectsでアニメーションを作成し、After Effectsの拡張機能「Bodymovin」を使って書き出す方法と、「LottieFiles」で書き出す2種類の方法を紹介します。 ▼Lottieの作成・書き出し・実装までの一連の流れ 完成品のサンプルを別ウインドウで開く アニメーシ
After EffectsでLottieデータを作成する際、 画像が使えない問題からどうしてもパスのデータを生きた状態で AE上に持ってこないといけなかったのですが AEはパスの癖がややあってイラストレーター上で作る方が早かったり 同じパスデータを使いたいということがありました。 色々調べたところ2種のインポート方法があるようです 20201019追記:有料ツールを使えばイラストレーターのレイヤー名+パス全てをそのままAE移植できるよう。overloadという有料ツールをプロの方は使っているそう 1. 1つのオブジェクト(パス)をコピペでAEヘ持ってくる 2. いくつか重なっているオブジェクトをまとめて1つのオブジェクトとしてAEに読み込ませる 一つ目のパスをコピペする方法 とりあえず単体のパスだけ欲しい時には便利です 1つのオブジェクト(パス)をコピペでAEヘ持ってくる 1. まずIll
Adone After EffectsのEffectsPlugin集のソース一式とWindowsバイナリです。 no supporot MacOS! 昔から趣味でコツコツと作っていたものです。 趣味といっても僕自身日本のアニメ制作者なので業務に使えます。 次のバージョンはかなり大がかりな改変を考えています。時間かかりそうなので、とりあえず SDK2023 でビルドした物をアップします。 バージョンアップというか以下のことを考えています。 バージョンに名前をつける。どのバージョンを使っているか分かるように。 バイナリーに使用期限を設ける。 互換性が高いのでやたら古いバージョンを使っている人がいるのでその対策が主です。 ですが、それで利便性が失われるのが嫌なので悩んでいます。 まぁ、バージョンアップしても利用条件は変わりません。未来永劫無料・無許可で使用できます。 FsPlugins20240
AfterEffectsで素材をループさせたいなと思う時があると思いますが、 初心者が実際にやってみると簡単にできない罠があります。 【ベストな例】(手打ち勢は全員これを使ってくれ) 昔twitterに書いてあった内容の引用です。 ループさせたいコンポを選択後に下記のexpressionを記述 loopOut(type="cycle"); if(time==key(numKeys).time) {key(1)}else{loopOut(type="cycle");}; gifが見切れてますが、 右クリックでタイムリマップ後に、エクスプレッションをコピペしてるだけです。 あとで説明するやり方のようにキーフレームを打たなくてもちゃんとループします。 loopOut(type ="cycle")%(timeRemap.key(2)); でも可能なようです。こっちの方が短いので覚えやすい? 自分の
皆さん、動画編集たのしんでいますかー!おそらくこの記事を読んでくださっている方の多くは、動画編集をはじめてまだ日が浅く「Adobe Premiere Pro(プレミアプロ)」をはじめとする専用アプリでの慣れない作業にイライラしてしまうこともあるのではないかと思います。わからないことに頭を悩ませる時間ってもったいないですよね。問題はサクッと解決して、ご自身の作品に集中しましょう! 今回ご紹介するのは、After Effectsでつくるテキストアニメーションです。 見本のテキストアニメーションの作成手順を今すぐ知りたい方は、目次の2番をクリック。部分的に難しいと感じる点があるかとは思いますが、会得できると表現の幅がぐんと広がりますので、ぜひじっくり取り組んでみてくださいね。この記事の目次はこちら! テキストアニメーションを作ってみよう! Premiere Proで行う動画編集ではテロップやタイ
ブログ、ゲームUI演出(https://gameanimation.info)は2019年12月末に開設し、その時のブログの内容はゲームアプリの演出GIFアニメ資料サイトとして作成していました。 なぜブログを始めたか UIアニメーションの勉強を怠っていたのと、怠惰に慣れ始めて向上心をなくしつつあったため、ブログをきっかけに、自身の知識量を増やし、業界全体の参考サイトとなるブログを立ち上げてインプットアウトプットを増やしていこうと思い、ブログを開始しました。 12月/1月/2月 ブログ開設 アクセス:Twitterで宣伝して1日10人ほどアクセス 12月-1月は毎日ゲームアプリを触って参考になりそうな演出をアプリごとにまとめてブログを更新していました。 ログボ、クエスト開始、リザルト、ガチャなど、様々な演出を集め、業務の役に立つように、同じ業界の方の参考になるように資料収集をしていました。
自分自身の備忘録がわりに、動く矢印のアニメーションをAfter Effectsで作る2つの方法についてまとめておきます。 その1 - ブラシアニメーションひとつ目はブラシアニメーションを使った方法から。 1.新規コンポジションを作成 2.レイヤー>新規>平面(この時、選択した色が背景の色になります)を選択。ぺンツールでパスを描く(パスを描く方法は他にもあるけど、今回はとりあえずこれで) 3.エフェクト>描画>ブラシアニメーションを選択するか、エフェクト&プリセットパネルから「ブラシアニメーション」を選択。 4.ブラシアニメーションの詳細を設定(画像は初期値) ブラシのサイズ:ブラシの太さを設定。 ブラシの硬さ:ブラシの鮮明度を設定。ぼかしたい時は数値は小さく。 ブラシの不透明度:ブラシの透明度を設定。 ストロークの長さ(秒):ブラシの軌跡の設定。0に設定すると軌跡が消えずに残る。数値が大き
こんにちは。 動画制作を勉強中のマエポンです。 同じ動画素材でもスローモーションや早回しを入れるだけで面白い表現ができるようになりますよね。 今回は、After Effectでタイムリマップと時間伸縮を使って「スローモーション」と「早回し」する方法について説明したいと思います。 どちらの機能もとても簡単に使えるのでぜひ使ってみてください。 ※所要時間は1分程度です。 こんな感じ↓ (通常→早回し→通常→スロー→通常) 関連記事 【After Effects】タイムリマップを使って動画素材をループさせる方法 【After Effects】動画を逆再生させる時間反転レイヤーとキーフレーム反転 時間伸縮を使った「スローモーション」と「早回し」 まず、素材を入れた状態で素材を選択して右クリックを押します。 するとメニューが出てくるので、「時間」→「時間伸縮」を選択します。 「時間伸縮」をクリックす
wiggleはよく使うエクスプレッションですが動きのコントロールは式自体が行います。wiggleをループアニメーションなどを使う場合に重宝する方法を共有します。 式 wiggleの構文 wiggle(freq, amp, octaves = 1, amp_mult = .5, t = time) ///////freq = 速度 //////amp = 移動量 ////octaves = 基本の動きに加える変動の細かさ ///amp_mult = 変動の変化量 //t = 現在の時間 freq = 1; amp = 100; //ループする周期の決定。コンポジションの時間と同じにすれば一周 loop = 1; //指定時間でループを繰り返す t = time%loop; //wiggleの最初の位置 wiggle1 = wiggle(freq, amp, octaves = 1, amp_
UI演出の役割として6つ挙げている中の価値の向上について書いていきます。 ・注目させる ・アクションへの反応、理解を助ける ・世界観を表現する ・体感時間を短くする ・価値の向上 演出は価値に変化をつけることができ、演出次第で価値を上げることも下げることもできます。 今回は演出による価値の上下について書いていきます。 演出が価値を高める 物の価値は本体の性能、機能だけで価値が決まるものではなく、外観のデザインや安全性という安心感も価値を高め、文字もキャッチコピー 一つ入れるだけで価値が加えられることもあります。 そしてブランド化やファン化によって物自体の価値を何倍にも上げることがあります。 同じように、演出やアニメーションによって、アイテムやキャラの価値を高めることが可能になります。 価値を向上させる要素 価値を向上させる要素として、演出は適切な提示頻度と価値に対する適切な派手さを出すこと
シェイプレイヤーやテキストレイヤーをプリコンポジションすると元のコンポジションサイズになってしまい透明な領域が大きくなりがちです。そんな時にお勧めの手順があります。 目標範囲 コンポジションを目標範囲にクロップ 表示領域を調整したあとはコンポジションメニューから コンポジションを目標範囲にクロップ を選択すると表示されていた範囲にコンポジションをリサイズすることが可能です。 非常に便利な機能ですので是非使ってください。 コンポジションをリサイズして快適なAe生活を^^
どーもこんにちは、デジタルサイネージ大好きTeam DISITです。 さてさて早いもので、 とうとうやってきてしまいました年末です、、、。 皆様、やり残した事はございませんか? 今年の仕事、今年のうちに! もう一踏ん張り頑張って素敵な年末年始にしましょう! っというわけで、年末ですので軽い内容のAftereffectsでのエントリーです。 キーフレームで設定したアニメーションを繰り返させる方法です。 世界中のどなたか一人にでもお役に立てれば幸いです! ではさっそく作ってみましょう。 まずは適当にテキストを打ち込みます。 またDISITで、、、。 そしてキーフレームで動きをつけましょう 今回は左右に動くように位置のキーフレームを打ちます。 パラメーター設定はお好みで!(あまり動き過ぎると目が痛いので程々で、、) 一応、左右に揺れて元の位置に戻るようにしましょう。 そしてこれも好みなんですが、
フラクタルノイズまずはCT+Nでコンポジションの設定をします。 名前はラインにします。 HDTV1080 29.97、デュレーションは10秒で設定します。 ここにCT+Yで平面レイヤーを生成します。 色は白にしましょう。 白平面を選択した状態でエフェクト&プリセットから フラクタルノイズを適用します。 フラクタルノイズ内トランスフォームの縦横比を固定のチェックを外します。 コントラストを250、明るさを-50、スケールの幅を8、スケールの高さを5000にします。 展開にエクスプレッションを設定します。 展開横のストップウォッチマークをALTボタンを押しながら左クリックです。 time*1500と入力します。 これは毎秒1500数値が変更し続けるというエクスプレッションです。 展開のオプション内、ランダムシードという部分で好きな数値にしても良いと思います。 今回は500に設定しましょう。 こ
バウンド効果を加えるエクスプレッション先にバウンド効果を加えることができるエクスプレッションを紹介しておきます。このコードをコピペするだけです。 amp = 0.8; freq = 3; decay = 10; n = 0; if (numKeys > 0){ n = nearestKey(time).index; if (key(n).time > time){ n--; } } if (n == 0){ t = 0; }else{ t = time - key(n).time; } if (n > 0){ v = velocityAtTime(key(n).time - thisComp.frameDuration/10); value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t); }else{ value; }*アスタリス
2012.6.24 地面に何かがたたきつけられた瞬間だけ揺れる表現をWiggleで再現したくて、試行錯誤したのでメモ。 確認環境 AfterEffectsCS5.5 for Mac 考え方 指定した時間の時間だけwiggleを実行するという、単純な考え方です。 コード if (time >= 3 && time <= 4) { wiggle(1000,20); } else { value; } 上記コードでは、3秒から4秒の間wiggleを実行するという意味になります。 上記コードのtimeは現在の時間で秒を表します。(フレームではない事に注意) 秒からフレームへ変換する方法もあるらしいのですが、なんか上手くいかなかったので、自分は目視で合わせましたw 参考 エクスプレッションの時間 [itemlink post_id="1977"]
素材の置き換え(プロジェクト全体から一括差し替え) この方法では、プロジェクト全体で利用されている素材を一括して全て差し替えます。1つの素材が様々なコンポジションで利用されており、それらの全てのレイヤーを一括して差し替えたい時に有効な方法です。 置き換えたい素材の選択 まずプロジェクトパネル内にある素材の中から、置き換えたい素材を選択します。希望の素材をまず選択していないと置き換えが出来ませんので、まずは正しく素材を選択しましょう。 フッテージの置き換えメニューを表示する 1つ1つの素材の事をAfter Effectsではフッテージと呼びます。「フッテージの置き換え」というのが、素材を置き換えるという意味のメニューになります。メニューは素材を右クリックする事で表示されます。 置き換え作業 ファイルを選択後「右クリック>フッテージの置き換え>ファイル」と進むと「フッテージを置き換え」ダイアロ
こんにちは、Bすずめです。 普段、動画編集の副業で使っている AE(アフターエフェクト:After Effects)で 文字を一文字ずつ下から出す というテキストアニメーションの作り方をサクッとご紹介します。 サンプルファイルをダウンロードできます。 サンプルファイルをダウンロード > 手順は以下の通り。 1.テキストに「アニメーター」を追加 テキストレイヤーの横にある 「アニメーター」から「位置」と「不透明度」を追加。 2.「位置」のY軸を下げて「不透明度」を0%に 「位置」のY軸を自分がイメージする程度に下げて「不透明度」を0%にする。 3.シェイプを「上へ傾斜」にする 「範囲セレクター」の 「高度」にあるシェイプを 「上へ傾斜」にします。 そうすることで、一文字ずつ現れる短形でなく、滑らかなアニメーションになります。 4.「イーズ(低く)」を100%にする 「高度」にある「イーズ(低
2022.06.13 ExtendScript ExtendScript Debugger ver2が遂にリリースされました。 ver1に対してlaunch.jsonを設定するのは同じですが中身の設定は大きく変わっています。 今回とりあえず前バージョンのように動かすことを前提に触ってみます。 launch.jsonは必須ではない 今回より前バージョンではlaunch.jsonファイルが必須でしたが今回よりなくても動かなくなりました。但しlaunchなのかattachなのか、そしてターゲットアプリケーションを実行の度に選択しないと行けないので単発のデバッグでない限り作成した方が良いでしょう。下の図のcreate a launch.jsonを選ばずにRun and Debugのボタンを押せばそのままlaunch.json無しで実行できます。 launch.jsonの設定 ここからいよいよlau
Adobe After Effects CC 42 万能プラグイン『Motion Tools 2 』のダウンロード・インストール方法を解説していきます(゚∀゚) *『インストール後のエラー対処法』についても解説していますd( ̄  ̄) 『Motion Tools 2』は イージングの調整、バウンスの追加、アンカーポイントの位置調整、レイヤーオフセット、シェイプ化したテキストを一文字ずつレイヤーに分けてくれたりなど、作業を劇的効率化してくれる機能満載の優秀なプラグインです\( ̄∀ ̄)/ 以前は無料でダウンロードできましたが、残念ながら… 2020年12月31日現在『Motion Tools』を受け取ることができる講義は有料($99)となってしまいました…(ToT) *『Motion Tools』の機能や使い方を徹底解説した記事はこちら⬇︎⬇︎
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く