JSFL・JSF・JSX Archive

以前、『JSFLについて、まとめてみました。』という記事の中で、IDE側でJSFLファイルを開いておいて、三角ボタンで実行すると、エラーの行番号が表示されないと書きました。

あれこれやっていたら、三角ボタンからの実行だと、JSFL自体も実行されない場合があるようです。

CS3の場合

ライブラリ内に「Hoge」というフォルダを作成。その中に、「hogehoge」と「piyopiyo」というMovieClipを入れておきます。flaファイルは、FolderOpen.flaとして保存しておきます。

で、以下のJSFLを用意して、三角ボタンから実行します。

var doc = fl.getDocumentDOM();

fl.trace(doc.name);

doc.library.selectItem("Hoge");

//Folderを展開
doc.library.expandFolder(true);

//Folderを閉じる
//fl.getDocumentDOM().library.expandFolder(false);

すると、Hogeというフォルダは選択されるのですが、フォルダを展開するというJSFLは実行されませんでした。

三角ボタンからの実行だと、アクティブなドキュメントが違うのかな？　と思ったので、doc.nameをtraceしてみると…

FolderOpen.fla

問題ない。う～ん、何でだろう？

同じファイルをメニューのコマンド>コマンドの実行から選択したり、JSFLファイルをダブルクリックで実行すると、きちんとフォルダは展開されるんですよねぇ…

（三角ボタンを押して）正しいコードを書いているのに、何故かJSFLが実行されないという場合は、試しに同じファイルを、メニューのコマンドやダブルクリックで実行してみたら、きちんと動作するかも…

CS4＆CS5の場合

上記のコードをCS4＆CS5で実行してみましたが、（三角ボタン・コマンドから実行・ダブルクリックのいずれも）フォルダは選択される＆アクティブなドキュメントはtraceされるものの、フォルダが展開されることはありませんでした。

まぁ、フォルダを展開するっていうJSFLを使うことは、あまりないと思いますけど…

（僕だけの環境かもしれませんが）他にもCS3では動くけど、CS4やCS5だと動かないコードがあったり…

何なんでしょうね？

以前に作成した『Progression4でスライドを作る際に、ちょっと便利なJSFL』をアップデートしました。

前回までは更新の際、作成したスライドの枚数と修正後のXMLのノード数が一致していないと更新作業が上手いこといってくれませんでしたが、その点を修正してあります。

例えばですが、（Create～.jsflを使って）新規にスライドを5枚作成したとします。

その後、XMLに修正を加え、修正後のノード数がスライド10枚分になったとしても、きちんと更新してくれるということです。（DLしたZipの中に、サンプルのXMLが二つ入っていますので、そちらを使って更新を試してみてください！）

その逆でも、もちろんOKです。

新たに追加したこと

複数MovieClip、タイムラインに共通しているのですが、スライドを作成すると、『Slides』フォルダ内にMovieClipが作成されるように変更しました。

あとは、XMLを編集して、Update～.jsflを実行してください。

UpdateのJSFLを使う場合は、Slidesフォルダを選択した状態で、JSFLを実行してください。

Slidesフォルダを選択していない状態でJSFLを実行してしまうと、変な具合に更新されてしまうことがあります。

JSFLにも、Slidesフォルダを選択してからUpdate処理を行うという記述を入れているのですが、時折きちんと認識してくれないっぽいんですよねぇ…（CS5だと、フォルダを選択しなくても上手くいく場合があったり…）

ダウンロード

ダウンロードはこちらからどうぞ。

これも『東京てら子6』でサラッとやったものなんですが、一応まとめておきます。

右クリック→プログラムから開く

JSFLファイルをFlash IDEで編集しようとして、マウスの右クリック→プログラムから開くからFlash IDEを選択すると、どうなるか？

.flaファイルは普通に開けるんですが、JSFLファイルの場合はファイルが開かれずに、実行されてしまいます。

プログラムから開くだから、fl.openScriptになると思いきや、fl.runScriptになってしまうんですねぇ…

IDE側でJSFLを開くには、メニュー→開くからJSFLファイルを選択してあげればOKです。

JSFLファイルを実行する

作成したJSFLファイルを実行するには、以下の方法が挙げられます。

1. 任意の場所において、コマンド→コマンドの実行
2. JSFLファイルを、Configuration>Commandsフォルダに入れ、コマンドのメニューから実行
3. IDE側でJSFLファイルを開いておいて、アクションパネルの三角ボタンを押して実行
4. JSFLファイルを、IDEのウィンドウ内やショートカットアイコンにドラッグ＆ドロップ

これ以外にも、方法があります。

てら子の際、「えっ、それでJSFL実行出来るんですか？」と何人かの方に言われたんですが…

意外と知られていないかもしれませんが、JSFLファイルをダブルクリックするだけでも実行出来ます。

気を付けることは、JSFLファイル内に以下のものを記述している場合です。

fl.getDocumentDOM();

これを記述している場合、flaファイルを開かずに実行してしまうと、JSFLの記述にミスがなくても以下のようなエラーが出ます。

TypeError: fl.getDocumentDOM() has no properties

fl.getDocumentDOM();を使っている場合は、（名称未設定などの）flaファイルを開いてからJSFLを実行するようにすると、このエラーは出ません。

エラーが起きたら…

IDEでJSFLを開いておいて、三角ボタンで実行した場合ですが…

（ソースにエラーがある場合）一応、エラーは表示されますが、何行目にエラーがあるまでは表示してくれないんですよねぇ…

コマンド→コマンドの実行や、JSFLファイルをダブルクリックで実行した場合だと…

以下の JavaScript エラーが発生しました :

ファイル “CreateSlide_MovieClips.jsfl” の 74 行目 :
ReferenceError: createGuid is not defined

このように、何行目でエラーが起きたのかを知らせてくれます。

三角ボタンで実行するのは簡単なんですが、このような欠点があります。

JSFLでもtraceを使いたい

久しぶりにJSFLを書いてみると、いつもの癖でこんな感じに書いてしまって…

trace("ほげほげ");

これで実行してしまうと…

Reference Error : trace is not defined.

みたいに怒られます。

ど〜してもfl.trace();じゃなく、JSFLでもtrace();を使いたいって場合は、以下のようにするとエラーは出ません。

trace("ほげほげ");

function trace(string){
	fl.trace(string);
}

CS5をお使いならスニペットに登録しておいて…みたいな使い方も出来るかと思いますが…

まぁ、こんなことする人はいないでしょうね。

これも『東京てら子6』で発表したモノなんですが、（Progression4でスライドを作る人が、どれだけいるのか分かりませんが…）公開しておきます。

Progression4でスライドを作成する場合、主に以下の方法を採るかと思います。

1. スライドの枚数分、MovieClipシンボルを作成
2. 一個のMovieClip（スライド用）を作成。その中のタイムラインに、もろもろ配置

僕もこれまで、どちらかの方法を用いてスライドを作成していたんですが、必要枚数分のスライドを作成したり、タイムライン上にいろいろ配置するのって結構手間が掛かったり…

ちょっと文字だけ修正したいんだけど…という場合でも、MovieClipの中に入って編集する必要がありますよね？

これをどうにか出来ないものかと…

以前から、テキストエディタでファイルを修正。あとは自動的にスライドを作成・更新してくれたら便利だよなぁ…と思っていたので、自分用にJSFLを用いて作ってみました。

必要なことは、XMLに記述する

スライドの作成に必要なものは、XMLファイルに記述していきます。

XMLは、こんな感じ。

<?xml version="1.0" encoding="utf-8"?>
<slides>
	<num>001</num>
	<type>0</type>
	<title>スライドサンプル</title>
	<contents>ダミー文字。ダミー文字。ダミー文字。</contents>
</slides>

num

スライドの番号

type

スライドのタイプ

title

タイトル部に表示するもの

contents

テキスト部に表示するもの

それぞれ詳しく説明していきます。

num

作成するスライドの番号になります。

スライドの枚数分、MovieClipを作成する方法を採る場合、作成するMovieClipの名前を仮に「Slides」としてJSFLを実行すると、Slides001、Slides002のように「MovieClipの名前 + num」という感じでライブラリ内にスライドが必要枚数分、作成されます。

type

作成するスライドのタイプになります。

typeが0の場合

このように、スライドの中央部にタイトルが表示されます。

始めと終わりのスライドなんかに用いると良いかと…

typeが1の場合

画面上部に、タイトルが。その下に、テキストが表示されるスライドになります。

typeが2の場合

タイトルがなく、テキストのみが表示されるスライドになります。

title

ここに設定したものが、type0とtype1のスライドのタイトル部に表示されます。

contents

ここに設定したものが、type1とtype2のスライドのテキスト部に表示されます。

スライドを追加する場合

<num>～</contents>までをコピペして、必要事項を記述してきます。

複数のMovieClipを作成する場合

※JSFLを実行する前に、Progressionのプロジェクトパネルから、スライドコンテンツのプロジェクトを作成しておいてください。

※JSFLを実行する前に、線の色（赤とか青とか）を選択しておいてください。ここで選択した色が、JSFLを実行した後、ガイドとして表示されます。

スライドの枚数分、MovieClipを作成する場合は、CreateSlide_MovieClips.jsflを実行します。

最初に、タイトルとテキストのフォントサイズを設定します。

次に、フォントのカラーを設定します。

フォントを選択します。

作成するMovieClipの名前を設定します。

マージン（ガイドを引く位置）を設定します。

あとは、読み込むXMLファイルを設定してあげると、以下のようにMovieClipが作成されます。

タイムラインに書き出す場合

※JSFLを実行する前に、Progressionのプロジェクトパネルから、スライドコンテンツのプロジェクトを作成しておいてください。

※JSFLを実行する前に、線の色（赤とか青とか）を選択しておいてください。ここで選択した色が、JSFLを実行した後、ガイドとして表示されます。

タイムラインに書き出す場合は、CreateSlide_Timeline.jsflを実行します。

フォントサイズとかの指定は、先の複数MovieClipの場合と同じなので、割愛。

読み込むXMLファイルを設定してあげると、以下のようにMovieClipのタイムラインにもろもろ配置されます。

更新する場合

XMLファイルをあれこれ修正します。

複数MovieClipを更新する場合は、UpdateSlide_MovieClips.jsflを実行します。

タイムラインを更新する場合は、UpdateSlide_Timeline.jsflを実行します。

フォントサイズとかの変更がある場合は、設定を変更します。

更新したXMLファイルを指定してあげると、更新作業が終了します。

補足

3枚目のスライドのタイプを1にしていたんだけど、0に変更したいという場合。

可能です。XMLファイルの該当箇所を修正し、Update～.jsflファイルを実行してください。

作成した際は●枚だったんだけど、（内容が増えたり減ったりしたので）アップデートの際にXMLを編集すれば、スライドの追加・削除も自動的に出来るの？

現時点では、未対応です。（作成した際のスライドの枚数と、アップデートした際のスライドの枚数が一致していると、更新作業は上手くいきます）

ダウンロード

こちらからどうぞ。

DLしたフォルダ内に入っているスライド（swfファイル）ですが、以下のような値で作成しています。（僕のノートPCで、いい感じに表示される値です）

タイトルとテキストのフォントサイズ

45,25

フォントのカラー

#000000,#000000

フォント

メイリオ（フォントの埋め込みは、行っていません）

MovieClipの名前

任意

マージン

50

読み込んだXMLファイルは、フォルダ内に入っているslide.xmlです。

ご要望

何かご要望等ありましたら、コメントお願いします。

先のスライドの追加・削除の機能を含めて、アップデートするかも？　しれません。

追記（2010/07/30）

JSFLファイルを更新しました。詳細は、『Progression4のスライド作成JSFLを、アップデート』をご覧下さい。

var dom = fl.getDocumentDOM();
var lib = fl.getDocumentDOM().library;

lib.addNewItem("movie clip","Hoge");
lib.selectItem("Hoge");
lib.editItem();

dom.getTimeline().addNewLayer("hoge","normal");
//Hogeと表示される
fl.trace(dom.getTimeline().name);

こんなコードを書いて、実行してみると…

ライブラリ内にHogeというMovieClipが作成され、Hoge内のタイムライン上に「hoge」という新しいレイヤーが作成されます。

編集されているタイムラインの名前を調べてみると、「Hoge」と表示されます。

dom.getTimeline();を…

今度はdom.getTimeline();という箇所を、一つの変数にして実行してみます。

var dom = fl.getDocumentDOM();
var line = fl.getDocumentDOM().getTimeline();
//var line = dom.getTimeline(); //こう書いても結果は同じ…
var lib = fl.getDocumentDOM().library;

lib.addNewItem("movie clip","Hoge");
lib.selectItem("Hoge");
lib.editItem();

line.addNewLayer("hoge","normal");
//シーン 1と表示される
fl.trace(line.name);

やってることは一緒みたいな気がするんですが、これを実行すると…

HogeというMovieClipのタイムライン上ではなく、メインのタイムライン上に「hoge」というレイヤーが作成されてしまいます。

編集されているタイムラインの名前を調べてみると、「シーン 1」と表示されます。

困ったもんだ…