ホームページ ウェブフロントエンド jsチュートリアル スクリプト: After Effects スクリプト用のウィンドウの作成

スクリプト: After Effects スクリプト用のウィンドウの作成

Jan 22, 2025 pm 08:35 PM

Contents
1. Introduction 6. Buttons
2. Windows 7. Options
3. Groups 8. Example
4. Panels 9. Conclusion
5. Text

導入

スクリプト用のウィンドウの作成は、エンド ユーザーが情報を入力し、指示を表示する必要がある場合に最適です。この記事では、基本的な JavaScript と Adob​​e Extendscript Toolkit CC を使用して、AE スクリプト用のウィンドウを作成する基本を説明します。


ウィンドウを作成するのはとても簡単です:

//New Window
var mainWindow = new Window("palette", "Title", undefined);
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

new Window() はウィンドウを作成するための引数です。次に、内部でタイプ、タイトル、境界を指定する必要があります。パレット ウィンドウは After Effects スクリプトに適しており、サイズと位置が後で影響を受ける可能性があるため、境界を未定義のままにすることも推奨されます。

窓口に電話をかけるには:

mainWindow.show();
ログイン後にコピー
ログイン後にコピー

現在ウィンドウには何もないので、これは単に小さなウィンドウを呼び出して、それが機能していることを示します。

Screenshot of window with nothing in it


グループ

次に行うことは、ウィンドウの情報を格納するオブジェクトを作成することです。

「グループ」を使用すると、その中のオブジェクトを整理できます。 mainWindow.show() の前に次の行をスクリプトに追加します:

group01 = mainWindow.add("group", undefined, "Group 01");
ログイン後にコピー
ログイン後にコピー

グループを mainWindow に追加し、タイプ、境界、およびテキストのプロパティの概要を示します。グループを追加しているので、最初の引数は「group」です。ここでも、境界を未定義のままにすることができます。最後に、グループに付ける名前を入力します。これはデフォルトではウィンドウに表示されません。

Screenshot of a group object with the text

パネルのデフォルトの方向は行ごとです。これをある種の列に変更したい場合は、これをスクリプトに追加することで変更できます:

group01.orientation = "column";
ログイン後にコピー
ログイン後にコピー

パネル

ただし、グループの名前を表示したい場合は、代わりに「パネル」オブジェクトの使用を検討できます。このタイプのオブジェクトは、ウィンドウの一部を区切るのに役立ちます:

group02 = mainWindow.add("panel", undefined, "Group 02");
ログイン後にコピー
ログイン後にコピー

「グループ」オブジェクトと同じプロパティを持ちますが、表示方法が若干異なります。

Screenshot of a panel object with the text

パネルのデフォルトの方向は列ごとです。これをある種の行に変更したい場合は、これをスクリプトに追加することで実行できます:

group02.orientation = "row";
ログイン後にコピー

文章

スクリプトに含める必要があるテキストは、静的テキストと編集可能なテキストの 2 種類であると考えられます。

静的テキスト
静的テキストはエンドユーザーへの指示に使用できます。次のように「statictext」をオブジェクトに追加します。

//New Window
var mainWindow = new Window("palette", "Title", undefined);
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

ここでも、同じ型、境界、テキスト引数を持つ追加コントロール オブジェクトを使用します。

編集可能なテキスト
編集可能なテキストは、エンド ユーザーが入力するテキスト ボックス フィールドを提供します。これは、カスタマイズ可能なテキスト レイヤーなど、スクリプトでエンド ユーザーからの情報が必要な場合に便利です。次のように「edittext」をオブジェクトに追加します。

mainWindow.show();
ログイン後にコピー
ログイン後にコピー

これは単に異なるタイプのオブジェクトです。 text 引数で指定したテキストは、最初はテキスト ボックス内にあり、エンド ユーザーが削除してその中に独自のテキストを書き込むことができます。

Screenshot of script displaying a static text and editable text example.

ご覧のとおり、ボックスのサイズが定義されていないため、編集可能なボックス内のテキストがわずかに切り取られています。これは、事後的にサイズを定義することで修正できます。

group01 = mainWindow.add("group", undefined, "Group 01");
ログイン後にコピー
ログイン後にコピー

これにより、必要に応じて、後でテキストボックスのサイズを調整できるようになります。

Screenshot of script displaying a static text and editable text example,with a slightly bigger text box.


ボタン

また、少なくともエンド ユーザーにスクリプトを「実行」するオプションを与えるために、スクリプト用のボタンが必要になる可能性があります。

ボタンの追加も同様のプロセスです:

group01.orientation = "column";
ログイン後にコピー
ログイン後にコピー

これによりボタンが作成されます。

Screenshot of a script with a run button.

ただし、ボタンが何かを行うには、ボタンが押されたときに何を行うかをスクリプトに指示する必要があります。私は、ボタンで完了させたいすべてのタスクを格納する関数を作成するのが好きです。

group02 = mainWindow.add("panel", undefined, "Group 02");
ログイン後にコピー
ログイン後にコピー

ここでは、button01.onClick を使用して最初の関数を実行し、app.beginUndoGroup("Tutorial") を実行するように要求します。これにより、スクリプトの取り消しが After Effects 内からの 1 つのアクションになるようになります。次に、関数 completeTasks を実行するように指示します。その下で、関数 completeTasks を定義します。ここで、ボタンに完了させたいすべてのアクションを含めます (今のところ、私のものではスクリプト ウィンドウを閉じるだけです)。そして、元に戻すグループを閉じる app.endUndoGroup("Tutorial") を追加して関数を終了します。

これについては今後の記事で詳しく説明します。


オプション

使用可能なコントロール オブジェクトのその他のオプションは、JavaScript ツール ガイド CC にあります

ここでは、チェックボックス、ドロップダウン メニュー、ラジオ ボタン、スライダーなどのオブジェクトについて説明し、いくつか例を挙げます。テキストやボタンの追加と同様の手順に従います。


ウィンドウについて学んだことを前の記事に結び付けて、新しいコンポジションを作成して開くサンプル スクリプトを作成しましょう。

//New Window
var mainWindow = new Window("palette", "Title", undefined);
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

このスクリプトを見てみましょう。

まず、ウィンドウとグループを作成します。 Group01 は私の「パネル」で、静的テキストに見出し「説明」を追加します。一方、残りのオブジェクトは「グループ」オブジェクトである Group02 内に配置されます。 Group02の向きを縦棒にしたいのでここで設定します。

次に、オブジェクトを作成します。 Group01 内の静的テキストから始めます。次に、ユーザーが作成する新しいコンポジションのサイズを指定できるように、Group02 内に 2 つの edittext オブジェクトを作成し、両方のテキスト フィールドのサイズを指定します。最後に、エンド ユーザーがスクリプトを実行できるようにボタンを作成します。

すべての変数を作成したら、関数を作成します。まず、説明したように、[元に戻す] グループを開いてカスタム関数 completeTasks を実行することで、ボタンの onClick 関数を設定します。

次に、completeTasks を定義します。まず、compWidth 編集テキスト オブジェクトと compHeight 編集テキスト オブジェクトの両方のテキストに対して parseInt() を使用する必要があります。これにより、スクリプトの残りの部分が入力を理解できるように、テキストから整数に変換されます。これが完了したら、幅と高さをユーザーが入力した値に設定して、新しいコンポジションを作成します。その後、スクリプト ウィンドウが閉じて、元に戻すループが閉じられる前に、コンポジションが開かれてアクティブなコンポジションになります。

このスクリプトを実行すると、テキスト フィールドで指定された幅と高さの値に設定された新しいコンポジションを作成できます。

このスクリプトは、テキスト フィールドに整数以外のものが追加された場合 (または最大値を設定した場合)、スクリプトが失敗したことをユーザーに警告するアラームを追加することで改善できます。これについては、別の記事で詳しく説明します。現時点では、テキスト フィールドに不正な文字がある場合、幅と高さの両方のテキスト フィールドに数値が入力されるまでスクリプトは機能しません。

Screenshot of completed script


結論

これで、Adobe Extendscript Toolkit CC を使用して After Effects スクリプト用のウィンドウを作成するための初心者ガイドは終了です。次の記事では、コンポジション用のさまざまなタイプのレイヤーの作成について説明します。

以上がスクリプト: After Effects スクリプト用のウィンドウの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

javascriptの分解:それが何をするのか、なぜそれが重要なのか javascriptの分解:それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptの進化:現在の傾向と将来の見通し JavaScriptの進化:現在の傾向と将来の見通し Apr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

JavaScriptエンジン:実装の比較 JavaScriptエンジン:実装の比較 Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

Python vs. JavaScript:学習曲線と使いやすさ Python vs. JavaScript:学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

JavaScript:Web言語の汎用性の調査 JavaScript:Web言語の汎用性の調査 Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合) next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合) Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合) next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合) Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

C/CからJavaScriptへ:すべてがどのように機能するか C/CからJavaScriptへ:すべてがどのように機能するか Apr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

See all articles