マルウェアは迷惑または危険なソフトウェアです。
あらゆる記憶メディアからのデータ回復に最適なプログラム....
今日は珍しいAdobe Illustratorのレッスンです。 今回は静止画ではなく、実際のアニメーションを作成するためです。 想像してみてください、Adobe Illustrator を使えば漫画も描けることがわかりました :)
そして、これには何も必要ありません。 レイヤーを適切に編成し、最終作品を SWF 形式にエクスポートし、各レイヤーをアニメーション フレームに変換します。 今日のチュートリアルでは、レトロな映画風のカウントダウン アニメーションを描画します。 出力は、これと同じカウントダウンを含む Flash ムービーである必要があります。
最初に行うことは、将来のアニメーションに必要な要素をすべて描画することです。 これを行うために、別のドキュメントに 2 つのフィルム フレームの位置、別々のセクターに切り取られた参照用の円、古代の効果を追加するテクスチャと垂直のスクラッチ、およびすべての数字と碑文を作成しました。
漫画のすべての部分の準備ができたら、アニメーション自体の作成を開始できます。 便宜上、これは新しいドキュメントで行うのが最適です。 この場合、レイヤーはアニメーション フレームの役割を果たします。 最初のレイヤーでは、フィルムのフレームをコピーするだけです。 作業領域の中央に配置します。
次に、2 番目のレイヤーを作成し、そこにフィルム フレームをコピーします。このレイヤーでは、端の穴がずらして開けられています。 中央に配置する必要もあります。
これら 2 つのレイヤーから、すでに動く映画のアニメーションを取得できます。 ただし、後でさらに多くのレイヤーが必要になります。 最初の 2 つのレイヤーを選択し、パネル オプションに移動してレイヤーのコピーを作成します。
同様に、動きを定義するフィルム フレームを含む 12 個のレイヤーを蓄積する必要があります。
これで、大量のレイヤーが作成され、すべて表示されます。 上の層が下の層をブロックするという意味では、作業にはあまり便利ではありません。 したがって、レイヤー名の左側にある目のアイコンをクリックすると、一部のレイヤーをオフにすることができます。 すべてのレイヤーを一度にオフまたはオンにするには、Alt キーを押しながら目のアイコンをクリックします。 レイヤーのオンとオフを切り替えると、将来のアニメーションの特定のフレームに何が配置されているかを正確に確認できます。 ここで、フィルムの動きにわずかな揺れを加えるために、受信したフレームをさまざまな方向にわずかに動かす必要があります。 これを行うには、現在作業するレイヤーのみをオンにし、フレームを任意の方向に数ピクセルずつシフトします。
すべてのレイヤーを確認し、少しシフトを追加したら、動く円のアニメーションの作成を開始できます。 これを行うには、漫画パーツ ドキュメントからセクターで構成される円をコピーし、フィルム フレームの上の最初のレイヤーに配置します。
円から選択範囲を削除すると、単一の全体のように見えます。 これこそまさに私たちが必要としているものです。
ただし、別々のセクターで構成されているため、色を変更することでアニメーションを非常に迅速かつ簡単に作成できます。 これを行うには、この円を 2 番目のレイヤーにコピーし、最初のセクターを明るくします。 フィルムは移動中に揺れるので、円をフレームの中心に正確に置く必要はないことに注意してください。 目の上に置きます。
同様に、前回よりも 1 セクター多く明るい色でペイントしながら、円を次の各レイヤーにコピーする必要があります。 これら 12 個のレイヤーが合わさって、塗りつぶされた円を含むフィルムの動きのアニメーションを形成します。
次に、レイヤーにテクスチャを追加する必要があります。 最初のレイヤーをオンにして、スペアパーツを含むソース ファイルからテクスチャをコピーします。
次に、次のレイヤーを順番にオンにして、そこに同じテクスチャをコピーします。 フレームごとに異なる外観にするには、90 度回転するだけです。 ご想像のとおり、12 フレームすべてにテクスチャを追加する必要があります。
もうコピーするのに飽きてしまったなら、喜んでいただけます。残りはほとんどありません。 最も難しい部分は終わりました。 垂直方向の傷など、ほぼすべてを追加する必要があります。 これを行うには、再度、元のスクラッチをコピーし、任意の場所にいくつかのレイヤーで配置します。 私の場合、傷は2層だけで現れます。
映画アニメーションのメインサイクルの準備ができたので、あとは数値を追加するだけです。 3 から 1 に Go!!! という単語を加えて数えているため、さらに多くのレイヤーが必要です。 12 ではなく、最大 48 です。これを行うには、フィルム アニメーションを含む既製のレイヤーのコピーをさらに 3 つ作成する必要があります。
そして、すべてがシンプルです。 一番最初のレイヤーをオンにして、そこに数字の 3 を置きます。
次に、円のアニメーションが終了するまで、この図を次のレイヤーにコピーする必要があります。 レイヤーの次のコピーに到達すると、円が再び完全に塗りつぶされます。番号 2 を入力する必要があります。 同様に、番号 1 を目的のレイヤーにコピーします。 Go!!! ラベルの最後のレイヤーに到達したら、ラベルを目的のレイヤーにコピーする前に、円を削除するだけです。
アニメーションに関しては以上です。 ここで重要なことは、混乱しないことです。 レイヤーに便利な名前を付けることができますが、私はなぜか怠け者でした :) それでも、完了したら、目のアイコンをクリックしてすべてのレイヤーを必ずオンに戻してください。
エクスポート設定ウィンドウで、必ず「名前を付けてエクスポート: AI レイヤー」を「SWF フレーム」に設定してください。 Illustrator レイヤーをアニメーション フレームに変えるのはこのオプションです。 次に、「詳細設定」ボタンをクリックします。
追加の設定が開きます。 ここでフレームレートを設定する必要があります。 1秒あたり12フレームあります。 [ループ] チェックボックスは、アニメーションを循環させる役割を果たします。 彼女のおかげで、ビデオが循環して再生されます。 また、[レイヤー順序: ボトムアップ] オプションを使用すると、パネル内で Illustrator レイヤーが下から上にレンダリングされます。 これがまさに私たちがアニメーションを構築した方法です。
その結果、アニメーションを含む Flash ムービーが得られます。
Adobe Illustrator で簡単なアニメーションを作成するのは、一見したほど難しくないことがわかりました。
ただし、長いビデオやインタラクティブなアプリケーションを作成するには、Adobe Flash またはその他の Flash エディタを使用することをお勧めします。 たとえば、この猫は仕事中に見つけた古い Macromedia Flash で作成しました。
また、最近ではHTML5やCSS3を使ってアニメーションを作成するケースも増えています。 このコードは最新のブラウザでサポートされており、Flash プレーヤーを使用する必要はありません。
ローマン、別名ダカスカス、特にブログ用
新しい情報を見逃さないようにニュースレターを購読してください。
アニメーションで命を吹き込みたいアイコンが 1 つまたは 2 つあります。 どこから始めますか? SVG ファイル、Illustrator CC および After Effects CC があるにもかかわらず、解決策が見つからないとします。
この記事では、Illustrator での SVG ファイルの準備と After Effects CC へのインポートなど、SVG ファイルを簡単にアニメーション化する方法を説明します。 シェイプレイヤーに変換して動きを加える方法も解説します。 最後に、エクスポートとレンダリングについて説明します。
仕事の最終結果。
それでは、最も興味深い部分、画像をアニメーション化する方法を学びましょう。
IllustratorでSVGファイルを準備するまず、Adobe Illustrator CC で SVG ファイルを開きます。 Week Of Icons で無料で入手できる小さな車のアイコンをアニメーション化します。
ファイルを開いた後、すべてのオブジェクトのグループ化を解除し、レイヤーに分割する必要があります。 手動で行うことも、使用することもできます レイヤーへのリリース (シーケンス)プロセスをスピードアップします。 ファイルを After Effects にインポートする前に、Illustrator ファイル形式で保存する必要があります。
貴重な時間を無駄にしないように、[レイヤーへのリリース (シーケンス)] を使用してオブジェクトのグループ化を解除できます。 After Effects CC でのファイルのインポートと整理 これで、After Effects CC にインポートする準備が整いました。 キーボード ショートカット Ctrl+I (Windows) または Command+I (Mac) を使用して [ファイルのインポート] ダイアログをロードするか、[ファイル] > [インポート] > [ファイル…] に移動します。同じ場所で、準備した Illustrator CC ファイルを選択し、[インポート] をクリックします。 選択したファイルの名前を示す小さなダイアログ ボックスが表示されます。 [インポート種類] というドロップダウン リストから [構成] を選択します。
ファイルをより速くインポートするには、プロジェクト パネルの列の位置をダブルクリックします。 タイムラインパネルに新しいコンポジションが表示されます。 それをダブルクリックします。 Illustrator CC レイヤーが名前の左側にオレンジ色のアイコンで表示されます。
本題に入る前に、これらすべてのレイヤーをシェイプ レイヤーに変換する必要があります。 Ctrl+A/Command+A を使用するか、 Shift + Left Mouse を使用して手動でそれらをすべて選択する必要があります。 その後、レイヤーを右クリックし、 [作成] > [ベクター レイヤーからシェイプを作成] を選択します。
新しいレイヤーが選択されたので、それらをパネルの上部の Illustrator CC レイヤーの上にドラッグし、邪魔にならないように Illustrator CC レイヤーを削除します。
Illustrator CC レイヤーを After Effects CC のシェイプレイヤーに変換する 必須ではありませんが、各レイヤーに適切な名前や色を付けることが重要です。 これにより、キーフレームに集中してより効率的に作業できるようになります。 以下の例では、ラベルの色はそれぞれのレイヤーの塗りつぶしとほぼ一致しています。
シェイプ レイヤーに適切な名前、色、ラベル、位置を付けることは非常に実用的です。 キーボード ショートカット Ctrl+K/Command+K を使用するか、コンポジション > コンポジション設定... コンポジション設定から、幅、高さ、フレーム レート、および継続時間を選択する必要があります。 このプロジェクトでは、アニメーションを滑らかに保つために 60 fps を選択しました。
この時点で、すべての準備が整っているように見えますが、実行する必要があることがもう 1 つあります。 特定のレイヤーをグループ化して、それらの動きが制御可能なメインレイヤーと同期するようにする必要があります。 この方法は「ペアレンティング」と呼ばれます。
Pick Whip を使用して、親レイヤーを複数のレイヤーに割り当てます。 この例では、フロントガラス、ボディパーツ、木材、ロープなどの重要性の低いレイヤー (子レイヤー) を主要なボディレイヤー (親レイヤー) に割り当てました。 これにより、親レイヤーを使用して車全体 (車輪を除く) の位置と回転を制御できるようになりました。
アニメーション制作車が岩にぶつかって、少し宙に浮いてほしかった。 また、木が上下に動いて幹が開くようにしたかったのです。 私は石、車、車輪を作ることから始めました。 そして、アクションをツリーに載せるという最大のハードルを乗り越える時が来ました。 それが完了したら、ラックやロープなどの細部の作業に取り掛かりました。
アニメーションを説明するスケッチ 最初のステップは岩の要素またはレイヤーを作成することでしたが、Illustrator CC に戻って別のレイヤーを追加する代わりに、After Effects CC のペンツールを使用しました。 これにより、小さな石をすぐにデザインすることができました。
おお、強力なペンツール！ トランクは比較的簡単な作業でした。 車の後部に設置し、左下の頂点にアンカーポイントを作りました。 Pick Whip を使用して、ボディの親レイヤーに割り当てました。 最後から 2 番目のステップでは、回転の効果を与えることで、車の跳ねる瞬間をより現実的にしました。Bodymovin と Lottie モバイル ライブラリを組み合わせました。
追伸 Illustrator CC および After Effects CC ファイルが見つかります。
アイコン セットは、から無料でダウンロードできます。
最近、ウェブサイトやアプリケーション上で、SVG（Scalable Vector Graphics）グラフィックスのさまざまな種類のアニメーションが非常に人気があります。 これは、すべての最新ブラウザがすでにこの形式をサポートしているためです。 SVG のブラウザサポートに関する情報は次のとおりです。
この記事では、軽量の Jquery プラグイン Lazy Line Painter を使用して SVG ベクトルをアニメーション化する最も簡単な例について説明します。
ソースこのタスクを完了して完全に理解するには、HTML、CSS、Jquery の基本的な知識が望ましいですが、SVG をアニメーション化したいだけの場合は必要ありません)。始めましょう。
したがって、従う必要がある手順は次のとおりです。
1. 正しいファイル構造を作成する
Initializr サービスはこれに役立ちます。以下の図のようにパラメーターを選択する必要があります。
- クラシック H5BP (HTML5 ボイラー プレート)
- テンプレートなし
- HTML5 シブだけ
- 縮小された
- .IE クラス
- クロームフレーム
- 次に、「ダウンロードします！」をクリックします。
2. プラグインをダウンロードして接続します
Initializr には最新の Jquery ライブラリが付属しているため、Lazy Line Painter プロジェクト リポジトリからダウンロードする必要があるアーカイブから、プロジェクトに転送する必要があるファイルは 2 つだけです。 1 つ目は「jquery.lazylinepainter-1.1.min.js」（プラグインのバージョンは異なる場合があります）で、結果のフォルダーのルートにあります。 2 つ目は example/js/vendor/raphael-min.js です。
これら 2 つのファイルは js フォルダーに配置されます。 そして、次のように、main.js の前に、index.html にそれらを含めます。
3. Adobe Illustratorでかっこいいアウトライン画像を描く
たとえば、添付ファイル内のアイコンを使用できます。
4. 画像を Lazy Line Converter に変換します
アイコンを下のボックスにドラッグ アンド ドロップするだけです。
変換後に表示されるコード自体で、輪郭の太さや色、アニメーションの速度を変更することができます！
5. 結果のコードを main.js に貼り付けます。
結果のコードを空の main.js ファイルに貼り付けるだけです。
オプション:
ストローク幅 — 輪郭の太さ
ストロークカラー - 輪郭の色
また、duration パラメータの値を変更することで、各ベクトルの描画速度を変更することもできます (デフォルトは 600)。
6. 好みに合わせて CSS を追加します
Index.html から段落を削除する
こんにちは世界！ これは HTML5 ボイラープレートです。
その代わりに、アニメーションが行われるブロックを挿入します。
次に、見栄えを良くするために main.css ファイルに CSS を追加します。
本文 (背景:#F3B71C; ) #アイコン (位置: 固定; 上:50%; 左:50%; マージン: -300px 0 0 -400px; )
すべてのファイルを保存します。
最新のブラウザでindex.htmlを開いて、その効果を楽しんでください。
追伸 ローカル マシンで実行すると、アニメーションの開始が数秒遅れることがあります。
インポートと簡単なアニメーション こんにちは。 今日は After Effects での簡単なアニメーションをレビューします。
リソース : Adobe Illustrator CC
Adobe After Effects CC
まずはIllustratorで絵を描いてみましょう。
私たちは描く
1) 背景として黄色の長方形を描画します
図 1 - 長方形
2) 円を描き、グラデーションで塗りつぶします。
サークルについて少し作業してみましょう。
- 輪郭上の下の点を削除すると、円弧が得られます。
- 円弧の底を閉じて直線を引くと、半円が得られます
図 2 - 1) 円を描きます。 2) 勾配。 3) ポイントを削除する
3) 長方形を描画し、そのコピーを作成します
- 1 つの灰色の長方形。
- 別の濃い灰色の長方形
4) 光線の数を 3 に設定して、アスタリスクから三角形を描画します。
図 3 - 1) 直角光。 2) 真っ暗。 3) 三角形
5) ペンと簡単な図形で猫を描きます 
図 4-1) 頭。 2）首。 3）体。 4）脚。 5) 尻尾
そして今、最も重要な瞬間が
次のように画像をレイヤー (アニメーション化されるものは別のレイヤー) に分配しましょう。 
図 5 - すべての写真 (重要なレイヤーに赤いマーク)
すべてを保存します。
保存設定を見てみましょう
図 6 - 保存
そして今、次のステージへ。 Adobe Illustrator を閉じて、After Effects を開きます。
After Effects へのインポート
ファイル - インポート - ファイル - 保存した Illustrator ファイルを選択します。
Illustrator からレイヤーをインポートすることを選択しましょう。フッテージを設定すると、レイヤーが結合された画像が得られますが、これは必要ありません。
図 7 - コンポジションとしてインポート
全て輸入品です。
では、何があるか見てみましょう。 コンポジションをダブルクリックして開き、レイヤーを確認します (すべてが正しく行われていれば、複数のレイヤーが存在します)。 これは分かりました、写真を見てください
図 8 - オープンコンポジション
そして今日私たちがここにいる目的は、アニメーションです。
After Effects でのアニメーション
背後にパン ツール (ショートカット - Y) を使用して、ピボット ポイントを上部の矢印に設定します。 点をとって、好きな場所に移動するだけです。 結果的にはこんな感じになります。。 
図 9 - パンツールとレイヤー
これで終わりです。アニメーションのレイヤーに進みましょう。
Arrow レイヤーと Head_cat が必要です。
矢印から始めましょう。
リストを展開し、時計を見つけてクリックします。 したがって、最初のポイントを 0 秒に設定します。 アニメーションは合計 2 秒続きます。
必要な設定は次のとおりです（合計 3 つのポイントを入力します）
| 2番 | 0 | 1 | 2 |
| +66 | - 70 | +66 |
図 10 - 回転矢印
次に、猫の頭をアニメーションさせてみましょう。
head_cat を展開し、 Position を見つけます。
4点となります。
残りの座標には触れずに最後の座標のみを変更します。
| 2番 | 0.1 | 0.17 | 1.12 | 2.0 |
| 位置 | 689.3 | 729.3 | 729.3 | 689.3 |
図 11 - ヘッドの位置決め
アニメーションの原理はこんな感じでした。 矢は左右に揺れ、子猫に近づくとすぐに頭を自分の中に引き込み、しばらくその位置にとどまってから、元の場所に戻します。
最終段階
製造
自分の作品から完成品を作成する必要があります。
メニューに移動 - レンダーキューに追加
[レンダリング]パネルが開き、出力モジュール (2 回クリック) で出力形式を選択します。 *.movを撮りました
図 12 - レンダリング
[レンダリング] ボタンをクリックして結果を取得します (パスを指定することを忘れないでください)。
それで全部です。
Adobe Illustratorでの透過GIFは以下のように行います。 メニューの [ファイル] > [Web とデバイス用に保存] に移動します (Alt+Ctrl+Shift+S)。 開いたウィンドウの [最適化されたファイル形式] フィールドで、まず [画像サイズ] タブに移動する必要があります。 実際のところ、デフォルトではページ全体が最適化ウィンドウに入りますが、これは通常は必要ありません。 したがって、[画像サイズ] タブで、[アートボードにクリップ] チェックボックス (ページに合わせてトリミング) の選択を解除し、[適用] ボタンをクリックします。
次に、形式選択リストで GIF を選択し、透明度チェックボックスをオンにします。
その後、どの色を透明にするかを決定します。 画像に存在するすべての色は、[カラー テーブル] (色のテーブル) タブに含まれており、色付きの四角形として表示されます。 ウィンドウの左側にあるツールバーからスポイト ツールを選択します。
色は 2 つの方法で定義できます。 最も簡単な方法は、スポイトを使用して画像上で色を直接指定することです。その後、その色はカラー テーブル上で暗いストロークで強調表示されます。 どの色を透明にする必要があるか正確にわかっている場合は、対応する色のボックスをクリックして、カラー テーブル上でその色を直接選択できます。 最初と 2 番目のケースで、複数の色を選択する必要がある場合は、Shift (または Ctrl) キーを押しながら作業する必要があります。 色を選択したら、それを透明にするようにプログラムに指示する必要があります。 これを行うには、[選択した色を透明にマップ] (選択した色を透明に追加) アイコンをクリックします。 図では、このボタンは丸で囲まれており、赤色が透明に設定されています。 画像上に透明な領域が表示され、カラーテーブル上の正方形の外観が変わり、その一部が白い三角形になります。 選択した色をキャンセルするには、カラー テーブルでその色を選択し、[選択した色を透明にマップ] アイコンを再度クリックする必要があります。
透明度の設定方法について少し説明します。 ドロップダウン メニューは、「透明度ディザ アルゴリズムの指定」 (ロシア語では「透明度シミュレーション アルゴリズム」) を担当します (下図)。 選択肢は 4 つあります: 透明度なしディザー - アルゴリズムなし、拡散透明度ディザー - 拡散アルゴリズム、パターン透明度ディザー - パターンベースのアルゴリズム、およびノイズ透明度ディザー - ノイズベースのアルゴリズムです。 拡散アルゴリズム モードでは、量スライダがアクティブになり、拡散値を変更できるようになります。 実際に何を適用すればよいでしょうか? 目的やイメージに応じて。 私はこのオプションを使用せず、常にデフォルトの透明ディザーなしのままにします。
[保存] を押します - 透明な GIF が完成します。 この作業は Adobe Illustrator バージョン CS4 (v.14) で行われましたが、すべてのアクションとキーボード ショートカットは以前のバージョン CS3 (v. 13) に関連しています。
