解説用の星図をさっさかつくるプロジェクト メモ2 Javascript+fireworks
前のメモでは、解説用の星図を作るのに
・だいたいの下図が自動的に作られ、
・それを、パーツごとにちょっと修正できるのがベストとした。
そのために、Javascript で、fireworks を操ることに可能性を見いだした。
とりあえず、fireworks に絵を差し込むことはできた(というかサンプルそのままだけど)
では、次にfireworks に Javascript を使って、オブジェクトを放り込んでみる。 たとえば、○とか★とか文字とかである。できるかな。
−−−−−−−−−−−−−−−−−−
fw.getDocumentDOM().addNewRectangle({left:0, top:0, right:100, bottom:100}, 0);
fw.getDocumentDOM().addNewStar(5, -1, true, {x:186, y:72}, {x:265, y:89});
fw.getDocumentDOM().addNewText({left:43, top:220, right:102, bottom:232},
true);
−−−−−−−−−−−−−−−−−−
で、test.jsf という名前で保存して、新規ファイルを作って、スクリプト実行である。
あっけなくできてしまった。ただし、テキストはボックスが表示されたものの、中身は空っぽである。文字については、ハローワールド的サンプルが adobe のサイトにあった。ちょっと改変して・・・
−−−−−−−−−−−−−−−−−−
var dom = fw.getDocumentDOM();
dom.addNewText({left:55, top:200, right: 340, bottom: 30}, false);
var tr = fw.selection[0].textRuns;
tr.textRuns = [{changedAttrs: {fillColor:"#000000", size: "48pt"}, characters: "Hello Universe!"}];
fw.selection[0].textRuns = tr;
−−−−−−−−−−−−−−−−−−
うまくいった。textRuns というのがポイントのようだ
調子にのって、星を並べてみよう。Javascript のループと変数を使ってみる
−−−−−−−−−−−−−−−−−−
for (i = 0; i < 20; i++) {
fw.getDocumentDOM().addNewStar(5, -1, true, {x:i*50, y:72}, {x:i*50+i*2, y:89});
}
−−−−−−−−−−−−−−−−−−
うまくいった。さあ、次には、データに基づいて星を並べないといけないが・・
2008年01月06日 記す