色付きのボタンにする
やりたいよね。色付きボタン。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();
グループ全面が指定した色になった。てことはもうわかる。
もう答えは出た
もうわかったと思う。ボタンの親に着色用のグループを作成すればいい。
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だと出来なかった・・・。
結局
ここまで引っ張っといて結局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();