2011-10-16

After Effectsユーザーのための、プログラミング入門　その10 前編 AE_Dialogs_due C#コントロール集　AEスクリプトのUIデザイン

AE_Dialogs_due C#コントロール集　AEスクリプトのUIデザイン

このシリーズ気がついたら10回目です。という訳で記念としてその１と同じネタです。

その1で、C#への導入として「AEScriptDialogExport」をでっち上げたのですが、自分自身でも驚くくらい使えるものだったので、その後「AE_Dialogs」として作り直し、それを更に直したものが今回発表する「AE_Dialogs_due」です。

どんなモノかというと、Vusual Studio C#のフォームデザイナでダイアログのUIを設計して、それをAEスクリプトで使えるJavaScriptのコードとして出力するものです。

AEScriptDialogExportではC#既存のコントロールを無理やり使ってましたが、JavaScriptのコントロールとほぼ同じ挙動をするカスタムコントロールを利用できます。

更に表示される文字のフォントサイズ等を変更することも出来ます。

ダウンロードはここから出来ます。旧バージョンのAE_Dialogsもダウンロードできます。

AE_Dialogs_due_v100.zip

AE_Dialogs_dueのインストール

AE_Dialogs_dueはクラスライブラリ(AE_Dialogs_due.dll)にしてありますので、Visual Studioへのインストールが必要です。

アーカイブの中にはVCS2008用とVCS2010用の2つありますので、必要なものを適当な場所へコピーしておいてください。ここではVCS2010へのインストールを説明しますが、VCS2008でも基本的に同じです。

☆適当なWindowsフォームアプリケーションのプロジェクトを作成
まず、適当にプロジェクトを作って、Form1.cs[デザイン]をアクティブにしてツールボックスを表示させてください。

特にプロジェクトを作る必要はありませんが、この状態だと分かりやすくなるので。

☆ツールボックスにタブを作成。
ツールボックスパネルを右クリックして「タブの追加」を実行しタブを作成します。このタブ内にインストールします。

実行して名前を入力します。ここでは「AE_Dialogs_due」としています。


☆アイテムの選択
作成したタブのエリアを右クリックして「アイテムの選択」を実行、インストールを行います。

実行すると、「ツールボックスアイテムの選択」ダイアログが表示されます。
ちなみにこのダイアログの表示はかなり遅いです。最悪1分くらいは待たされますので注意してください。

右下にある「参照」ボタンを押すと選択ダイアログが表示されますので、適当な場所へ保存してあるAE_Dialogs_due.dllを選択します。

「ツールボックスアイテムの選択」ダイアログに新しいコントロールが追加されているはずです。この状態でOKボタンを押してください。

ツールボックスのタブにコントロールが表示されます。


以上でインストールは終了です。
右クリックして表示されるアイテムをアルファベット順にソートすると見やすくなります。

AE_Dialogs_dueの簡単な使い方

とりあえず簡単な使い方を説明します。

☆Ae_windowコンポーネントの登録
テキトなフォームへドラッグ＆ドロップでAe_windowを登録します。


フォームデザイナの下にae_window1が登録されます。


ae_window1をクリックしてアクティブ状態でプロパティを見ると以下のように表示されるはずです。


プロパティのAE_Formの値をフォーム(Form1)に設定します。


これで、Ae_windowコンポーネントの登録は終わりです。

☆他のコントロールの追加
あとは、適当に末尾に_AEがついたコントロールを追加していきます。フォームデザイナの使い方は、Visual Studioの説明書等を見てください。

ここでは適当にStatictext_AE/Edittext_AE/Button_AEを追加してみます。

とりあえずF5キーを押してデバッグを開始します。下図のようにダイアログが表示されるはずです。

ダイアログをマウスで右クリックするとメニューが表示されます。
ここでは「ダイアログに表示」を選びます。

「JavaScriptコード」ダイアログが表示され、スクリプトのコードが表示されます。

これをそのままUTF-8の文字コードでスクリプトとして保存して、AfterEffectsで実行すると、全く同じダイアログが表示されます。


☆フォントサイズを変える
更にちょっと修正を加えます。
デバッグを終了し、statictext_AE1をクリックしてアクティブにして、プロパティウィンドウを開きます。
そこでAE_Textを「テスト」AE_textObjNameを「stData01」に変更し、

プロパティの下の方にある「Font」の右のボタンをクリックしてサイズを「28」に設定します。

上と同じ手順でスクリプトにして実行すると以下のようになります。



以上が簡単な使い方です。

コントロールの説明

以下にAEスクリプト用に作ったカスタムコントロールの説明を行います。

基本的にAE_で始まるプロパティが作成されるスクリプトに反映されます。
ただし、Font/Items/Imageはオリジナルのプロパティが反映されますので注意してください。


Ae_windowコンポーネント

Ae_winodwコンポーネントは以下のプロパティを操作出来ます。
フォームの形状を決めるものと出力するスクリプトの状態を決めるものと２種類あります。

プロパティ名値の型内容
AE_FormFormターゲットとなるフォームを指定。
AE_funcNamestringwindowをobjectにした時のfunctionの名称。
isInFuncがtrueの時のみ有効。
AE_isCenterboolwindowを中央表示するかどうか
AE_isExportPictbool出力時に画像ファイルも書きだすか
AE_isInFuncboolwindowをObjectかするかどうか
AE_isLocalboolwindowをローカル変数にするかどうか。inInFuncがtrueの時のみ有効
AE_maximizeButtonbool最大化ボタンを表示するかどうか
AE_minimizeButtonbool最小化ボタンを表示するかどうか
AE_objNamestringwinodw Objectの変数名
AE_resizeablebooltrueならウィンドウのリサイズを許可
AE_sizeSizeウィンドウサイズ
AE_titlestringウィンドウに表示されるタイトル
AE_windowTypewindowTypeウィンドウの形状。dialog/palette/floatingPalette/winodwと指定可能

Ae_winodwコンポーネントは、一つのフォームに1個しか登録できません。
あと、タイトルのFontは変更できません。フォームのFontの設定を変えても反映されません。

プロパティはだいたいJavascriptのWindowオブジェクトのプロパティと同じ名前にしてあります。
プロパティの説明はJavaScript tools Guide.pdfを参照してください。

Button_AE/Checkbox_AE/Statictext_AE/Radiobutton_AEコントロール


Button_AE/Checkbox_AE/Statictext_AE/Radiobutton_AEコントロールは以下のプロパティを操作できます。

プロパティ名値の型内容
AE_boundsRectangleボタンの位置・大きさ
AE_defaultElementdefaultElementbuttonのnameをok/cancel/なしに設定。dialog時のみ有効
AE_isLocalboolbuttonをローカル変数にするかどうか。inInFuncがtrueの時のみ有効
AE_objNamestringbutton objectの変数名
AE_textstringbuttonに表示される文字
AE_textObjNamestringAE_textのデータの変数名。指定されていないときは、変数を作らない。
AE_valueboolCheckbox_AEとRadiobutton_AEのみ。チェックの値。
AE_multilineboolStatictext_AEのみ。trueで複数行表示
AE_scrollingboolStatictext_AEのみ。trueでスクロール可能
FontFOnt文字のフォントを指定

AE_defaultElementは、windowTypeがdialogの時のみ有効で、ok/cancel/noneと選べます。
okならばenterkeyでこのボタンが押されたことになります。cancelならばエスケープキーでこのキーが押されたことになります。

AE_textObjNameは指定されると、AE_textの内容をAE_textObjNameの名称の変数に割り当てます。

AE_valueは、Checkbox_AEのチェックの値になります。

FontはデフォルトではTahomaフォントの8.25ptになっています。

Fontの指定について

フォントの指定には以下の注意点があるので注意してください。

◎フォントサイズの補正
全てのコントロールのFontはデフォルトでTahomaフォントの8.25ptになっています。
これがAEスクリプトのUIフォントのデフォルト値に一番近いものですが、スクリプトからフォントサイズを調べると値は11になっています。ドキュメントでは同じPointサイズなのですが値が違います。仕方ないので、このコンポーネントではJavaScriptへ変換するときに1.333(11/8.25)で補正した数値にしています。


◎fontStyleの謎
fontStyleは、REGULAR(通常)/BOLD(太字)/ITALIC(斜体)/BOLDITALIC(太字斜体)の4種類が選べますが、実際に実行するとREGULAR以外の場合でかなりの確率で実行時エラーになります。

では、BOLD/ITALIC/BOLDITALICは使えないかと思うと、時と場合によっては使えたりしてかなり不可解な挙動になってます。

一応このコンポーネントでは全てのfontStyleが指定できますが注意してください。

◎フォントの指定
一応全てのフォントが設定できてしまいますが、windowsやMacやOSのバージョン違いによってFontの有無が違うので注意してください。AE_boundsをかなり余裕を持って指定しておかないと、文字が全部表示されない場合があります。

Dropdownlist_AEコントロール


Dropdownlist_AEコントロールは以下のプロパティを操作できます。

プロパティ名値の型内容
AE_boundsRectangleボタンの位置・大きさ
AE_indexintItemsで選択されているもの。0スタート。-1で何も無選択
AE_isLocalboolローカル変数にするかどうか。inInFuncがtrueの時のみ有効
AE_itemsObjNamestringItemsのデータの変数名。指定されていないときは、変数を作らない。
AE_objNamestringbutton objectの変数名
ItemsstringDropdownlistの文字データコレクション
FontFOnt文字のフォントを指定

AE_indexは選択されたアイテムのインデックス番号ですが、Visual studioのフォームデザイナには反映されません。


AE_itemsObjNameは、指定された場合、ItemsのデータをAE_itemsObjNameの名称の変数に割り当てます。

Group_AE/Panel_AEコントロール


Group_AE/Panel_AEコントロールは以下のプロパティを操作できます。

プロパティ名値の型内容
AE_borderStyleboderStylePanel_AEのみ。Panelの境界線の表示方法
AE_boundsRectangle位置・大きさ
AE_isLocalboolローカル変数にするかどうか。inInFuncがtrueの時のみ有効
AE_objNamestringobjectの変数名
AE_textstring表示される文字。Panel_AEのみ
AE_textObjNamewindowTypeAE_textのデータの変数名。指定されていないときは、変数を作らない。
FontFont文字のフォントを指定

AE_borderStyleはblack(黒の矩形)/etched(通常)/gray(グレーの矩形)/raised(浮き上がった)/sunken(沈んだ)の4種類が設定できます。

Iconbutton_AE/Image_AEコントロール


Iconbutton_AE/Image_AEコントロールは以下のプロパティを操作できます。

プロパティ名値の型内容
AE_boundsRectangle位置・大きさ
AE_defaultExtstringAE_imageFileで拡張子まで指定されなかった時に使われる
AE_imageFileNamestring画像ファイルの名前
AE_imageFilePathstring画像ファイルのパス
AE_imageObjNamestring画像を表す変数名。
AE_isLocalboolローカル変数にするかどうか。inInFuncがtrueの時のみ有効
AE_objNamestringobjectの変数名
ImageImage表示される画像

AE_imageFileNameは、実際の画像ファイルの名前。AE_imageFilePathは、そのパス。
readOnlyでそれを合わせたAE_imageFullPathもある。

imageプロパティに指定された画像をスクリプトの出力時に書き出します（AE_isExportPictがtrueの時）
imageプロパティに貼り付ける画像は必ず24bitあるいは32bitの画像にしてください。256色パレットカラー画像は出力できません。

Edittext_AEコントロール


Edittext_AEコントロールは以下のプロパティを操作できます。

プロパティ名値の型内容
AE_borderlessbooltrueで境界線を非表示。デフォルトはfalse
AE_boundsRectangle位置・大きさ
AE_isLocalboolローカル変数にするかどうか。inInFuncがtrueの時のみ有効
AE_multilinebooltrueで複数行の編集が可能になる。デフォルトはfalse
AE_noechobooltrueでパスワード表示。デフォルトはfalse
AE_objNamestringobjectの変数名
AE_readonlybooltrueで書込み禁止。デフォルトはfalse
AE_scrollablebooltrueでスクロール可能にデフォルトはtrue。AE_multilineがtrueの時のみ有効
AE_textstring配列表示される文字。複数行指定のため配列
AE_textObjNamewindowTypeAE_textのデータの変数名。指定されていないときは、変数を作らない。
FontFont文字のフォントを指定


Listbox_AEコントロール


Listbox_AEコントロールは以下のプロパティを操作できます。

プロパティ名値の型内容
AE_boundsRectangle位置・大きさ
AE_columnTitlesstring配列カラム表示時のタイトル文字列。AE_showHeadersがtrueの時に有効
AE_columnWidthsint配列カラム表示時のカラムの横幅
AE_isLocalboolbuttonをローカル変数にするかどうか。inInFuncがtrueの時のみ有効
AE_itemsNamestringItemsのデータの変数名。指定されていないときは、変数を作らない。
AE_multiselectbooltrueで複数行の選択が可能になる。デフォルトはfalse
AE_numberOfColumnsboolカラム（列）の数
AE_objNamestringbutton objectの変数名
AE_showHeadersboolタイトル行の表示。デフォルトはfalse
ItemsstringListbox_AEの文字データコレクション
FontFOnt文字のフォントを指定

AE_columnTitles/AE_columnWidths/AE_numberOfColumnsは本来デザイナ上で同期しなければいけませんが、現在のバージョンではしていないので注意してください。

Progress_AE/Slider_AE/ScrollbarH_AE/ScrollbarV_AEコントロール


Progress_AE/Slider_AE/ScrollbarH_AE/ScrollbarV_AEコントロールは以下のプロパティを操作できます。

プロパティ名値の型内容
AE_boundsRectangle位置・大きさ
AE_isLocalboolbuttonをローカル変数にするかどうか。inInFuncがtrueの時のみ有効
AE_valueint現在の値
AE_minvalueint最小値
AE_maxvalueint最大値
AE_valueint最大値
AE_objNamestringobjectの変数名

AEスクリプトのUIの作成。後編につづく！

ざっとコントロールの説明をしましたが、AEスクリプトのUIの作成の作成の詳細を知らないとちょっとわかりづらいです。
CS３のaftereffects_scripting_guide.pdfからFileIO絡みとUI関係は別のドキュメント（javascript_tools_guide.pdf）にまとめられていています。

UIの作り方はjavascript_tools_guide.pdfを読まないと行けませんがadobe製品全般のマニュアルなので、After Effectsのスクリプトとして使える項目がよくわからなくて困ります。

その説明まで行う予定でしたが、あまりにも長いので後編に続きます。
ただ、仕事で暫く忙しくなるのでちょっと間があきますのでごめんなさいです。

To Be Continued!


タグ : , , [タグを追加する]
bry-ful
この記事の投稿者について：bryful

フィードバック

1 Star2 Stars3 Stars4 Stars5 Stars
（評価回数：2 , 平均：5.00）
Loading...Loading...

この記事に対する 16 の反応があります

この投稿への反応のRSS トラックバックURL Twitterでつぶやく（URLを挿入して投稿画面に飛びます）
  1. 1 AEUSERS(AEP Project) 10月 16th, 2011 at 08:51

    新着記事 : After Effectsユーザーのための、プログラミング入門　その10 前編 AE_Dialogs_due C#コントロール集　AEスクリプトのUIデザイン http://t.co/TI6Uhaq7

  2. 2 k-sk＠yokohama 10月 16th, 2011 at 08:51

    新着記事 : After Effectsユーザーのための、プログラミング入門　その10 前編 AE_Dialogs_due C#コントロール集　AEスクリプトのUIデザイン http://t.co/TI6Uhaq7

  3. 3 影鞍 10月 16th, 2011 at 08:53

    新着記事 : After Effectsユーザーのための、プログラミング入門　その10 前編 AE_Dialogs_due C#コントロール集　AEスクリプトのUIデザイン http://t.co/TI6Uhaq7

  4. 4 CGWORLD.jp 10月 16th, 2011 at 10:49

    新着記事 : After Effectsユーザーのための、プログラミング入門　その10 前編 AE_Dialogs_due C#コントロール集　AEスクリプトのUIデザイン http://t.co/TI6Uhaq7

  5. 5 さがら 10月 16th, 2011 at 10:59

    新着記事 : After Effectsユーザーのための、プログラミング入門　その10 前編 AE_Dialogs_due C#コントロール集　AEスクリプトのUIデザイン http://t.co/TI6Uhaq7

  6. 6 nakamura001 10月 16th, 2011 at 11:34

    新着記事 : After Effectsユーザーのための、プログラミング入門　その10 前編 AE_Dialogs_due C#コントロール集　AEスクリプトのUIデザイン http://t.co/TI6Uhaq7

  7. 7 jetinoue 10月 16th, 2011 at 12:05

    新着記事 : After Effectsユーザーのための、プログラミング入門　その10 前編 AE_Dialogs_due C#コントロール集　AEスクリプトのUIデザイン http://t.co/TI6Uhaq7

  8. 8 髙田瑛示 10月 16th, 2011 at 12:32

    新着記事 : After Effectsユーザーのための、プログラミング入門　その10 前編 AE_Dialogs_due C#コントロール集　AEスクリプトのUIデザイン http://t.co/TI6Uhaq7

  9. 9 kuma_msfm 10月 16th, 2011 at 12:44

    新着記事 : After Effectsユーザーのための、プログラミング入門　その10 前編 AE_Dialogs_due C#コントロール集　AEスクリプトのUIデザイン http://t.co/TI6Uhaq7

  10. 10 アワビP_R12 10月 22nd, 2011 at 10:18

    After Effectsユーザーのための、プログラミング入門　その10 前編 AE_Dialogs_due C http://t.co/aIuwtxId

  11. 11 Adobe Creative Suite 11月 15th, 2011 at 08:53

    「After Effectsユーザーのための、プログラミング入門　その10 前編 AE_Dialogs_due C#コントロール集　AEスクリプトのUIデザイン」AEP Project http://t.co/TPqvfWEe #CS5_jp

  12. 12 Adobe Creative Suite 11月 15th, 2011 at 09:06

    スクリプトは経験があるけれど他の言語はさわったことがないユーザーを対象に、C#/AEのJavaScriptをメインにプログラム全般を解説する連載の第10回です。今回は「AE_Dialogs_due」を解説しています。http://t.co/TPqvfWEe

  13. 13 古籏一浩 11月 15th, 2011 at 09:38

    スクリプトは経験があるけれど他の言語はさわったことがないユーザーを対象に、C#/AEのJavaScriptをメインにプログラム全般を解説する連載の第10回です。今回は「AE_Dialogs_due」を解説しています。http://t.co/TPqvfWEe

  14. 14 yoshiyuki.s 1月 3rd, 2013 at 14:59

    After Effectsユーザーのための、プログラミング入門　その10 前編 AE_Dialogs_due C#コントロール集　AEスクリプトのUIデザイン http://t.co/zcoVDAYS

  1. 1 AfterEffectsユーザーのための、プログラミング入門その10前編AE_Dialogs_dueC#コントロール集AEスクリプトのUIデザイン | スクリプト - After Effects - 動画編集ソフト - アプリケーション | Jishuu.net Pingback on 4月 10th, 2012 at 06:14
  2. 2 After Effectsユーザーのための、プログラミング入門その10前編AE_Dialogs_dueC#コントロール集AEスクリプトのUIデザイン | スクリプト - After Effects - 動画編集ソフト - アプリケーション | Jishuu.net Pingback on 10月 3rd, 2012 at 21:01

コメントをどうぞ！

« Expressionで楽をする
After Effectsユーザーのための、プログラミング入門　その10 後編 AE_Dialogs_due C#コントロール集　AEスクリプトのUIデザイン »

特集

Creators' Heads／クリエイターズヘッズ：映像クリエイターのためのニュースサイト