Home > Works

Works Archive

新しいブログを始めました!


こっそりと新しいブログを始めました!

ブログタイトルからも分かるかと思いますが、WebStromに関する個人的なメモです。

WebStormは以前、東京てら子で(バージョンが1.0の時)サラッとデモしたことがあります。

その後バージョンが2.0にあがり、どんな感じになったのかを検証する意味合いも含め、個人ライセンスを購入してみました。

今なら半額セールをやっているので、お得かと思います。

WebStromのサイトはがっつり英語(DLできるPDFも英語)ですし、Google先生にお世話になろうにも日本語のブログもまだそんなにないことから、ちょっと始めてみました。

最初はゆる〜いネタばかりを投稿していくことになるかと思いますが…

WebStormに関する情報を、共有出来ればと思っています。

という訳で、宜しくお願いします。

ステージにあるシェイプやグループ化されたものを、連番付きのシンボルに一括変換するJSFL


一昨日くらいでしたか、「ステージにあるシェイプやグループ化されたものを、連番付きのシンボルに一括変換するJSFLってないの?」とTLに流れていたので、自分の勉強がてら、それっぽいのを作ってみました。

で、作成しているときにハマッたことを、書いておきます。

同一フレーム内には、シェイプは一つが良さそう

DLしたflaファイル(CS3形式)とJSFLを試してもらうと分かると思いますが、ステージ上に置いてあるシェイプやテキストなどが、MovieClipシンボル(hoge_000_mcみたい)に連番付きで変換されます。

その際、同一フレーム内にシェイプを二つ置いていると、ちょっと変なことになります。

シェイプがそれぞれMovieClipシンボルに変換されるのではなく、二つのシェイプが一つのMovieClipシンボルに変換されてしまうんですね…

なので、このJSFLを使う場合は、同一フレーム内にはシェイプは一つにしておくといいと思います。

複数シェイプを配置する場合は、(サンプル通りに)グループ化しておくと問題なく使えます。

elementsに関して

for文の中のelementsの箇所なんですが、elements[i]なんじゃない? と思われた方もいらっしゃるかもしれません。

elementsの説明・その1

こんな感じで、シェイプが二つあったとします。

この状態で、elements[0]をconvertToSymbolで、シンボルに変換したとします。

elementsの説明・その2

すると、こんな感じになるかと思いますよね?

ところが、実際は…

elementsの説明・その3

このようになります。(シンボル化したものは、elementsの最後尾に移動し、残りがひとつずつ前に押し出される)

なので、for文が回っているうちは、常にelementsの先頭(0)を取得してあげると、まだシンボルに変換していないものを選択出来ます。

convertToSymbolした後は…

先の手順で要素を選択し、convertToSymbloを使って、シンボルに変換すると、その要素は選択されたままになっています。

選択を解除せずにfor文を回してしまうと、MovieClipが入れ子の状態になってしまうので、fl.getDocumentDOM().selectNone();を使って、選択を解除しています。

とりあえず作ったものなんで、使い勝手は悪いかと思いますが…

ライブラリ内のフォント(静的・ダイナミック)を一括置換してくれるJSFL


Progressionのスライドコンテンツを使ってスライドを作成している時に、僕はよくあることなんですが…

フォントを変更しようかなぁ…と思ったら、意外と面倒だったりします。

スライドの枚数分、MovieClipを作成したり、一つのMovieClip内のタイムラインにコンテンツを配置している場合。

フォントを変更する為だけに、上記リンクのJSFLを実行するのも何だなと…

検索して置換

FlashIDEのメニューの編集>検索して置換を使ってやろうかな? と思っても…

検索して置換

ライブラリ内のアイテムは、上手いことやってくれません…

JSFLを書いてみた

なので、JSFLを書いてみました。

ライブラリ内のアイテム

例えば、こんな感じでライブラリ内にアイテムがあったとします。

aaa(MovieClip)
タイムライン上(2フレーム)に、ダイナミックテキストを配置
bbb(MovieClip)
タイムライン上(1フレーム)に、ダイナミックテキストを(複数レイヤーに)配置
eee(MovieClip)
タイムライン上(4フレーム)に、静的テキストを配置

JSFLを実行すると、ライブラリ内のアイテム全てに対して、フォントを変更するという作業を行います。(ライブラリ内のMovieClipを選択する必要はありません!)

ライブラリ内のフォルダ構造とか、複数フレームに配置してあるとか、複数レイヤーに配置してあるとかは関係なく、サクッと置換してくれます。

注意点

ただ注意することは、全てのフォントに対してJSFLが実行されてしまいます。

つまり複数のフォントを使用していたとしても、それが一つの(指定した)フォントに置き換えられてしまうということです。

ダウンロード

僕が欲しくて作ったものなので、他の方にも使い勝手がいいかは分かりませんが…

DLしたzip内には、この記事のキャプチャに使用したflaファイル(CS3形式)が入っています。

それを開いて、ReplaceFonts.JSFLを実行してみてください。

使いたい方は、ここからどうぞ!

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

ダウンロード

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

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を、アップデート』をご覧下さい。

ホーム > Works

Search
Feeds
Meta

flashDevelopスポンサー

Return to page top