前記事、ベンド可の矢印を作成するスクリプト「shapeArrow(s)@2DBend.jsx」のベンドを削除し、3D回転しやすい仕様に変更しました。
2DBend版を完全に置き換えるものではなく、使い分けと考えて作りました。
[概要]
3D回転対応の矢印シェイプを作成するスクリプト。
[使い方]
- スクリプトを実行
- エフェクトにある[頭]の3D座標で矢印の先っちょをセット
- エフェクトの[長さ]で矢印の長さを調節
- 3DレイヤーになってるのでレイヤーのX,Y,Z回転で奥行きのある角度に調節できる
[オプション]
- [矢印B]をONでおしりも矢印になる
- [3D感]で広角感を強調できる
- [矢の高さ]、[矢の太さ]、[全体太さ]調整可能
- [線の色]でシェイプの塗りの色を調整可能
- [境界線の太さ]でシェイプの線幅を調節可能
- [境界線の色]でシェイプの線の色を調節可能
[完成品]
JavaScript
//////////////////////////////////////////////////
// 矢印シェイプを生成するスクリプト
// 3D対応
//////////////////////////////////////////////////
var actCmp=app.project.activeItem;
function f_ShapeArrow_s_3D(){
var shapeLyr = actCmp.layers.addShape();// 空のシェイプレイヤーが作られる
shapeLyr.name="shape-Arrow(s)@3D";
shapeLyr.label=2;
shapeLyr.threeDLayer=true;
// セットするエフェクト準備
var efAry=["頭","矢印B","矢の高さ","矢の太さ","全体太さ","長さ","3D感","線の色","境界線の太さ","境界線の色"];
var efAry2=["ADBE Point3D Control","ADBE Checkbox Control","ADBE Slider Control","ADBE Slider Control","ADBE Slider Control","ADBE Slider Control","ADBE Slider Control","ADBE Color Control","ADBE Slider Control","ADBE Color Control"];
var addAry=[];
//エフェクトを次々適用
for(i=0;i<efAry.length;i++){
addAry[i]=shapeLyr.property("ADBE Effect Parade").addProperty(efAry2[i]);
addAry[i].enabled=false;
addAry[i].name=efAry[i];
}//for
//エフェクトに初期値セット
shapeLyr.property("ADBE Effect Parade")(efAry[2])(1).setValue(40);
shapeLyr.property("ADBE Effect Parade")(efAry[3])(1).setValue(20);
shapeLyr.property("ADBE Effect Parade")(efAry[4])(1).setValue(10);
shapeLyr.property("ADBE Effect Parade")(efAry[5])(1).setValue(200);
shapeLyr.property("ADBE Effect Parade")(efAry[7])(1).setValue([136,136,136,255]/255);//グレー
shapeLyr.property("ADBE Effect Parade")(efAry[8])(1).setValue(10);
shapeLyr.property("ADBE Effect Parade")(efAry[9])(1).setValue([0,0,0,255]/255);//黒
var shapeProperty = shapeLyr.property("ADBE Root Vectors Group"); // これにシェイプを追加していく
var shapeGroup1 = shapeProperty.addProperty("ADBE Vector Group");
shapeGroup1.name="ヨコ線";
/* 長方形パスを3つ準備+エクスプレッションもセットしていく */
var shapePath1 = shapeGroup1.addProperty("ADBE Vectors Group").addProperty("ADBE Vector Shape - Group");
//パス
shapePath1(2).expression=
'var anchor=[thisComp.width/2,thisComp.height/2];\r\n'+
'var arHeight=(effect("'+efAry[2]+'")(1)>0)?effect("'+efAry[2]+'")(1):0;\r\n'+
'var arWidth=(effect("'+efAry[3]+'")(1)>0)?effect("'+efAry[3]+'")(1):0;\r\n'+
'var allWidth=(effect("'+efAry[4]+'")(1)>0)?effect("'+efAry[4]+'")(1):0;\r\n'+
'var arLength=(effect("'+efAry[5]+'")(1)>0)?effect("'+efAry[5]+'")(1):0;\r\n'+
'var arB;\r\n\r\n'+
'if(effect("'+efAry[1]+'")(1)==0){\r\n'+
' arB=0;\r\n'+
' arHeight=(arLength>arHeight)?arHeight:arLength;\r\n'+
'}else{\r\n'+
' arHeight=(arLength/2>arHeight)?arHeight:arLength/2;\r\n'+
' arB=arHeight;\r\n'+
'}\r\n\r\n'+
'var p1a=[arHeight,-allWidth];\r\n'+
'var p1b=[arHeight,allWidth];\r\n'+
'var p2a=p1a+[arLength-arHeight-arB,0];\r\n'+
'var p2b=p1b+[arLength-arHeight-arB,0];\r\n\r\n'+
'createPath(points=[p1a,p2a,p2b,p1b,p1a],[],[],true);'
var shapeGroup2 = shapeProperty.addProperty("ADBE Vector Group");
shapeGroup2.name="矢印A";
var shapePath2 = shapeGroup2.addProperty("ADBE Vectors Group").addProperty("ADBE Vector Shape - Group");
//パス
shapePath2(2).expression=
'var arHeight=(effect("'+efAry[2]+'")(1)>0)?effect("'+efAry[2]+'")(1):0;\r\n'+
'var arWidth=(effect("'+efAry[3]+'")(1)>0)?effect("'+efAry[3]+'")(1):0;\r\n'+
'var allWidth=(effect("'+efAry[4]+'")(1)>0)?effect("'+efAry[4]+'")(1):0;\r\n'+
'var arLength=(effect("'+efAry[5]+'")(1)>0)?effect("'+efAry[5]+'")(1):0;\r\n'+
'if(effect("'+efAry[1]+'")(1)==0){\r\n'+
' arHeight=(arLength>arHeight)?arHeight:arLength;\r\n'+
'}else{\r\n'+
' arHeight=(arLength/2>arHeight)?arHeight:arLength/2;\r\n'+
'}\r\n\r\n'+
'var p1=[0,0];\r\n'+
'var p2a=[arHeight,allWidth+arWidth];\r\n'+
'var p3a=[arHeight,-allWidth-arWidth];\r\n\r\n'+
'createPath(points=[p1,p2a,p3a,p1],[],[],true);';
var shapeGroup3 = shapeProperty.addProperty("ADBE Vector Group");
shapeGroup3.name="矢印B";
var shapePath3 = shapeGroup3.addProperty("ADBE Vectors Group").addProperty("ADBE Vector Shape - Group");
//パス
shapePath3(2).expression=
'var arHeight=(effect("'+efAry[2]+'")(1)>0)?effect("'+efAry[2]+'")(1):0;\r\n'+
'var arWidth=(effect("'+efAry[3]+'")(1)>0)?effect("'+efAry[3]+'")(1):0;\r\n'+
'var allWidth=(effect("'+efAry[4]+'")(1)>0)?effect("'+efAry[4]+'")(1):0;\r\n'+
'var arLength=(effect("'+efAry[5]+'")(1)>0)?effect("'+efAry[5]+'")(1):0;\r\n'+
'if(effect("'+efAry[1]+'")(1)==0){\r\n'+
' arHeight=(arLength>arHeight)?arHeight:arLength;\r\n'+
'}else{\r\n'+
' arHeight=(arLength/2>arHeight)?arHeight:arLength/2;\r\n'+
'}\r\n\r\n'+
'var p1=[0,0];\r\n'+
'var p2a=[arHeight,allWidth+arWidth];\r\n'+
'var p3a=[arHeight,-allWidth-arWidth];\r\n\r\n'+
'if(effect("'+efAry[1]+'")(1)==0){\r\n'+
' p1=p2a;\r\n'+
' p3a=p2a;\r\n'+
'}else{\r\n'+
'}\r\n\r\n'+
'createPath(points=[p1,p2a,p3a,p1],[],[],true);';
shapeGroup3.property("ADBE Vector Transform Group").property("ADBE Vector Anchor").expression=
'[effect("'+efAry[5]+'")(1),0]';
shapeGroup3.property("ADBE Vector Transform Group").property("ADBE Vector Rotation").setValue(180);
// 塗り
shapeProperty.addProperty("ADBE Vector Graphic - Fill").property("ADBE Vector Fill Color").expression=
'effect("'+efAry[7]+'")(1);';
// 線
var stroke=shapeProperty.addProperty("ADBE Vector Graphic - Stroke");
stroke.property("ADBE Vector Stroke Width").expression=
'effect("'+efAry[8]+'")(1);';
stroke.property("ADBE Vector Stroke Color").expression=
'effect("'+efAry[9]+'")(1);';
shapeLyr.position.expression=
'effect("'+efAry[0]+'")(1)';
shapeLyr.scale.expression=
'a = effect("'+efAry[6]+'")(1);\r\n'+
'value+[a,0,0];';
}
app.beginUndoGroup("shapeArrow(s)@3D");
f_ShapeArrow_s_3D();
app.endUndoGroup();[解説]
前記事のベンド可の矢印を作成するスクリプト「shapeArrow(s)@2DBend.jsx」と本筋はほぼ同じため改めてのスクリプト解説はなし。
ここでは仕様について。
shapeArrow(s)@2DBend.jsxのまま矢印の頭とおしりの座標をセットする形式だと、3D的に回転させる操作性が悪くなるので、頭の座標のみ指定することにし、向きは回転で指定するようにしました。
またこの際、画面手前から奥に矢印を向けても、遠近感が弱く、カメラをセットして焦点距離を変化してもいいのですが、別のカメラレイヤーがある場合競合してしまいます。
そのため、[3D感]の数値分、矢印レイヤーのXスケールを拡大する方式にしました。長くしてやることで擬似的に広角な前後差を出すということです。
あと1パターン、回転する動きを描き込む際に、筒状になる矢印もよく使うので、このバージョンも開発予定です。
この記事へのコメントはありません。