Home > Archives > 2010-07

2010-07

Progression4のスライド作成JSFLを、アップデート


以前に作成した『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だと、フォルダを選択しなくても上手くいく場合があったり…)

ダウンロード

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

JSFLについて、まとめてみました。


これも『東京てら子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をお使いならスニペットに登録しておいて…みたいな使い方も出来るかと思いますが…

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

Progression4でスライドを作る際に、ちょっと便利なJSFL


これも『東京てら子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」と表示されます。

困ったもんだ…

東京てら子で、今後やりたい事


以前このブログにて、今後の東京てら子でやりたい事をお聞かせください! というアンケートを採らせて頂きました。

その結果です。(↓サムネイル画像をクリックすると、大きいサイズの画像が表示されます)

その他として、以下のようなリクエストも頂きました。

  • ソーシャルアプリ
  • nutsu先生を招いてGenerative art入門とか作品やスケッチを持ち寄ってみんなで見せ合う
  • デザインパターン、インターフェイスの実装
  • DB連携、システム連携

貴重なご意見、ありがとうございました。

Home > Archives > 2010-07

Search
Feeds
Meta

flashDevelopスポンサー

Return to page top