色付きのボタンにする

やりたいよね。色付きボタン。AfterEffects標準の黒いボタンばかりも飽きてくる。

やり方を考える。

まず思いつくのは画像を用意してアイコンボタンにしてしまうこと。まぁ出来るけどさ...。なんかもっとスマートに出来ないんかね~、アイコンボタンじゃなくて普通のボタンを使って...って思ったあなた向けの記事。

いかにもbackgroundColorっぽい

ボタンのgraphicsプロパティにbackgroundColorというプロパティが存在する。「背景色」...か。なんかもう見つけたっぽい。これを設定してみる。

backgroundColorにはScriptUIBrushオブジェクトという「塗り(ブラシ)」に関しての設定をまとめたをオブジェクトを与える必要がある。これの作成の仕方は「好きな図形を描く」のページにある「2.b. パスに線/塗りを適用する」の項目を参照。

ブラシを作成して早速適用してみる。

var w = new Window('dialog{\

btn : Button{ text : "色付きにしたい" }\

}');


with( w.btn.graphics ){

var brush = newBrush( BrushType.SOLID_COLOR, [1,0,0] );

backgroundColor = brush;

}


w.show();

やってみた?エラーになったよね?エラーメッセージは、

Error: Cannot set backgroundColor property for this element type

エラーメッセージも読まずに人に助けを求める者はプログラミングする資格ないので、ちゃんと読む。

読んだ?

そういうことなので、この方法では無理ですね。

じゃあ何なら設定できるのか。いくつかあるが(ちゃんと調べてない)ここで使うのがグループ(Group)。

Groupの背景色を設定してみる

Groupの背景色を設定してみる。先程のButtonをGroupに変える。Groupは子がいないと、サイズが [0,0] になってしまうので、prefererdSizeでサイズを指定する。

var w = new Window('dialog{\

btn : Group{ preferredSize : [100,100] }\

}');


with( w.btn.graphics ){

var brush = newBrush( BrushType.SOLID_COLOR, [1,0,0] );

backgroundColor = brush;

}

w.show();

グループ全面が指定した色になった。てことはもうわかる。

Groupの背景色は設定できる。

もう答えは出た

もうわかったと思う。ボタンの親に着色用のグループを作成すればいい。

var w = new Window('dialog{\

gr : Group{\

btn : Button{ text : "色付きにしたい" }\

}\

}');


with( w.gr.graphics ){

var brush = newBrush( BrushType.SOLID_COLOR, [1,0,0] );

backgroundColor = brush;

}


w.show();

CCだと出来なかった・・・。

できた・・!!(CS6)
む・・・?(CC2019)

結局

ここまで引っ張っといて結局CC無理なんかい!という感じ。ま、縁だけちょっと色付いてるし。

やり方は他にもあるかも。ScriptUIはこんなのばかりなのだよ...。期待すんなし。

var w = new Window('dialog{\

btns : Group{\

gr : Group{\

btn : Button{ text : "OK" }\

}\

gr2 : Group{\

btn : Button{ text : "cancel" }\

}\

}\

}');


with( w.btns.gr.graphics ){

var brush = newBrush( BrushType.SOLID_COLOR, [1,0,0] );

backgroundColor = brush;

}

with( w.btns.gr2.graphics ){

var brush2 = newBrush( BrushType.SOLID_COLOR, [0,1,0] );

backgroundColor = brush2;

}


w.show();

OKとキャンセルで2色分けてみただけ