簡単なIllustrator scriptを二つ作りました。 パスアイテムのカラーを選択したパスアイテム内で入れ替えるScriptです。 使い方 今回二つのScriptがありますがどちらもカラーを入れ替えたいパスアイテムを選択して使うだけです。複合パス、グループアイテム内のパスアイテムも入れ替え対象になります。 ただしアピアランスのカラーは対象になりません。その他あまりにも構造が複雑なデータパスのアイテムは入れ替えの対象にならない可能性もあります。 Shuffler 選択したパスアイテムのカラーをランダムにシャッフルします。選択したカラー内でシャッフルするので選択してないカラーが出てきたりしま
Illustratorでランダムに色をパスアイテムに当て込みたい時のためのScript作成しました。hslで色相を循環するScriptと二つのカラー値の間でランダムに色を差し替えるScriptです。 使用するにあたって 今回のScriptはIllustratorのパスアイテムにScriptが色を当て込みます。前提として単体のパスアイテムのみでグループや複合パスなんかには適応できません。使用する時は以下のように適応させたいパスアイテムを選択してください。 rangeColor 二つのカラー値の間でランダムな色を配置するScriptです。ツールパレットの塗りの色と線の色がそのまま乱数の返す色の範囲
Illustratorのオブジェクトモデルは複雑で、前回のカラーオブジェクトだけでもややこしいものでしたがグラデーションカラーになるとカラーオブジェクトに加えてスライダーの位置、数などより複雑になります。初見だと混乱すること必須のこのオブジェクトモデルについて紹介します。 大まかな構造 まず前回のカラーオブジェクト同様グラデーションオブジェクトに選択したグラデーションパスアイテムからアクセスします。単純なフラットな塗りの場合fillColorプロパティにアクセスすればカラーオブジェクトにアクセスできましたがご存知の通りグラデーション、それ自体が複数の色データを保持しています。さらにグラデーショ
Illustrator用のExtension、gradientBoxを作りました。グラデーション内の色を一括で変更したり調整するためのExtensionです。例えばグラデーションの色全体の明るさを変えたい時にいちいち全てのグラデーション内の色を一つ一つ調整するのもかなりの手間です。このExtensionではこのような調整をボタン一発でできるようになります。 使い方 基本はグラデーションアイテムを選択してカラーを読み込みます。キーのいろか塗りの色か事前に選んでください。その後に読み込んだ特定のカラーを調整します。調整したいカラーにチェックを入れて調整する数値を左のフォームに入力。青いボタンを押し
久しぶりに純粋なIllustrator scriptについて取り上げます。パスアイテムの色の置き換え、調整についてです。Illustratorのオブジェクトモデルも結構複雑で、勿論ドキュメントなりを見てやればできる事ではあるのですがつまずきやすい部分ではあります。今回カラー関係のオブジェクトモデルについて扱ってみます。 各パスアイテムのカラーオブジェクトはどこに格納されているのか パスアイテムのアクセスですがいくつかあります。documentオブジェクトからなりlayerオブジェクトからなりと、例えばlayerオブジェクトからアクセスする場合は layerオブジェクトに各レイヤーにpathIt
最後になりました。今回おまけ的にloading画面を作ります。loadingの最中はあらゆる要素の反応を無効にしたいので全ての画面をload画面で覆います。これを図的に表すとこんな感じでしょうか。 立体的な要素の指定はz-indexを行います。詳しくはこちらも参照してください。 まずhtmlでload要素を配置します。 load要素はcontainerには必ず含めないでください。このload要素はcontainerと独立した要素なので。そして以下、css。 円がくるくる回転するcssです。ベースとなっているload要素にz-index:5と高めの要素を指定しています。 このload要素ですが普
前回に続きパネルのjsとjsxの通信についての記事です。 ヘッドの情報を書き込む機能から。ただこれは前回のガイドを引く機能のようにフォームの情報をjsxに渡して実行するだけなので前回とあまり変わりません。 html js データを書き込む情報を日付とパスアイテムの長さから選べますがどちらとも選択されていない場合は書き込む情報が無くなるのでアラートを出して処理を中止します。 ヘッド情報を書き込む関数です。hostscript.jsxに追加します。パネルの情報によって書き込む内容を変えます。（と言ってもチェックボックスのオン、オフ程度の事ですが）最後に関数分岐用のswitch構文でmakeHead
jsからjsxに通信する場合、jsx内でエラーが起きても具体的にどこで起きているのか分かりにくい、$.write関数（console.logのjsx版）が使えないなどかなり不便です。これをもう少しやりやすくします。とりあえずVSCodeでデバッグするためにExtendScript Debuggerを使用します。CEPの開発をしながらjsxのデバッグもしたいのでvscodeのlaunch.jsonをCEPフォルダーの直下に作ります。 launch.json CEPのフォルダーからjsx内のjsxのテストを実行できるように“program“を “${file}&
今回からjsxとパネルのjsで通信します。main.jsから通信する前に通信の対象となるjsxを作ります。最初はアクティブなアートボードに対してガイドを中央に引くjsxを動かすjsを書きます。singleProcessというフォルダにsetCenterGuide.jsxを作ってその中にガイドを引くコードを書きます。 今回の通信は特にフォームの数値を渡したりするわけではないので単純にガイドを引くだけのシンプルなjsxです。 setCenterボタンを押すとcenterGuide関数が実行されるようにイベントを登録。関数の引数にjsxのファイル名、singleProcessを渡します。事前に準備し
ついにmain.jsに触ります。完成形が以下 今回Node.jsのネイティブモジュールを使用するため冒頭でfsとpathをrequireしてます。更に各種htmlのidタグをdocument.getElementByIdで取得。extensionRoot変数はご存知の通りjsxフォルダーのパスです。 本格的に解説に入る前にnav.jsの関数を実行した時に書いたコードをもう一度確認します。 冒頭の変数を頭に入れつつまずウインドウが開いた時に実行する関数、initから解説します。 非同期処理が入るのでasync関数として定義しています。ここで行っているのは。 jsxの共通の関数等を外部ファイルとし