Works Archive

以前に作成した『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』で発表したモノなんですが、（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を、アップデート』をご覧下さい。

東京てら子6で発表したものが、意外と好評だったので、Spark projectにコミットしてみました。

ConvertToSymbol

ConvertToSymbolという名前からも分かるかと思いますが、フォルダ内にある拡張子が「.jpg」と「.png」の画像を、MovieClipシンボルかグラフィックシンボルに自動的に変換してくれるJSFLです。

数点の画像の場合は、メニュー→読み込み→ライブラリに読み込みなどを行って、シンボルに変換すると思いますが、画像の数が多いと結構大変ですよね？

使い方

で、使い方。

ConvertToSymbol.jsflファイルを実行します。

すると、作成シンボルがMovieClipシンボルかグラフィックシンボルかを選択します。MovieClipシンボルの場合は、mc。グラフィックシンボルの場合は、graと入力します。

次にライブラリ内に作成するフォルダ名を入力します。

次に、画像の入っているフォルダを選択します。

すると、キャプチャのように、画像をシンボルに自動的に変換してくれます。

キャプチャからも分かるかと思いますが、画像のファイル名がシンボル名になります。

グラフィックシンボル（gra）を選択すると、以下のようになります。

細かい設定・1

作成されたシンボルの中を見て頂ければ分かりますが、配置されたビットマップはシンボル内では左上（0,0）の位置に配置されます。

//位置合わせには、left、right、top、bottom、vertical center、horizontal centerが指定可能。

//左上（0,0）に合わせる場合
var vertical = "left";
var horizontal = "top";

//中心に合わせる場合
/*var vertical = "vertical center";
var horizontal = "horizontal center";*/

これは、コード内の34～42行目に書かれています。

左上ではなく、中心に合わせる場合は、以下のように変更します。

//位置合わせには、left、right、top、bottom、vertical center、horizontal centerが指定可能。

//左上（0,0）に合わせる場合
//var vertical = "left";
//var horizontal = "top";

//中心に合わせる場合
var vertical = "vertical center";
var horizontal = "horizontal center";

その他にも、右上に合わせたい場合は、rightとtopを組み合わせるといったことで、いろいろな指定が可能です。

細かい設定・2

//作成するシンボルに、「_mc」をつける場合
//createSymbol('movie clip','_mc');

//作成するシンボルに、「_mc」をつけない場合
createSymbol('movie clip','');
break;

デフォルトでは、作成されるシンボルには、_mcが付かない設定になっています。

_mcとか_graをシンボル名に付けたいという場合は、以下のように変更します。

//作成するシンボルに、「_mc」をつける場合
createSymbol('movie clip','_mc');

//作成するシンボルに、「_mc」をつけない場合
//createSymbol('movie clip','');
break;

このように変更してあげると、作成されるシンボルは以下のようになります。

細かい設定・3

現時点では、jpgとpngの画像を各種シンボルに変換してくれますが、他の拡張子も追加したいという場合には、以下の様にします。

var s = String(folderContents[i]);
var pattern = new RegExp(".jpg*|.png*","i");
var t = s.replace(pattern,extension);

74行目のvar pattern = new RegExp(“.jpg*|.png*”,”i”);の箇所に注目してください。

ここにgifを追加したい場合は、以下のように変更します。

var s = String(folderContents[i]);
var pattern = new RegExp(".jpg*|.png*|.gif*","i");
var t = s.replace(pattern,extension);

こうすることで、gif画像も変換候補に追加することが出来ます。

拡張子は、大文字・小文字を区別しないでシンボルに変換する設定になっているので、.JPGでも.jpgでもOKです。

ダウンロード

ダウンロードは、こちらから。

使っているPCにインストールされているフォント数とフォント名（のリスト）が知りたかったので、ちょっと作ってみました。

調べる度に、毎回swfを〜っていうのが面倒なので、ここに貼り付けておくことに…

JavaScriptを有効にしてご覧ください。（要FlashPlayer9以上）

ActionScript3.0ライブラリ入門

『ActionScript3.0ライブラリ入門』という書籍が、翔泳社さんより7月14日（amazonでは、15日）に発売されます。

僕も、共著という形で執筆させて頂きました。

僕以外の執筆陣は、超有名な方ばかり。

• 新藤さん
• 池田さん
• 浦野さん
• 加茂さん
• 小林さん
• 高輪さん
• タロタローグさん
• 召田さん
• 森山さん

何故、僕がここに名を連ねているのか自分でも良く分かりませんが…

僕が担当したのは、ライブラリの入手先・入手方法（SVNの基礎知識やSVNクライアントツールの使い方）とASDocの読み方・作り方の箇所になります。

頑張って書きましたので、お手にとっていただけると嬉しいです。

関係者の皆様、お疲れ様でした！