解説用の星図をさっさかつくるプロジェクト メモ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日 記す

続く