Flashの塗りの縁取りを一発で行うJSFL


flash-draw-line-2

Flashの塗りの周りに線で縁取りたいときがあると思いますが、
インクボトルツールで何回もクリックする手間を解消してくれるJSFLを書きました。


↑の [view raw] を右クリックで保存できます。

使い方

塗りを選択して実行すると縁取ります。

JSFLはダブルクリックで実行できます。もしくは以下公式ヘルプを参照ください。
Adobe Flash Professional * JavaScript API の操作

JSFLのベンチマークをとってみる


JSFLのパフォーマンスを向上させる記事があったので、自分でも試してみました。

参考:Salsa de Pixeles: Improving JSFL performance

こういう関数を作って実行してみる。xJSFLにTimer が用意されていて便利。

結果は以下のようになります。単純な計算なのであまり変わりませんね。 

Task "benchmark test" took 126 milliseconds
Task "benchmark test2" took 156 milliseconds

 

キーフレームの作成方法による違い

空のキーフレームを100個作るときの時間を計測しています。

結果は以下のようになります。
convertToKeyframesで一括で作る場合とinsertKeyframeで1フレームずつ作る場合を比較しましたが、
前者の方が後者より約45倍早くなっています。

Task "convert keyframes" took 565 milliseconds
Task "insert keyframes" took 25.0 seconds

当たり前といえば当たり前のような結果ですが、JSFL書くときは気をつけたいです。

JSFL で Underscore.js を使うテスト


JSFL の fl.runScript を使って汎用的な JS のライブラリ Underscore.js が使えるか試してみたらできたのでメモ。

ファイルの構造(xJSFLでファイルのURIを指定しているのでこんな感じ)

jsfl_underscore_file-2

※注意:underscore-min.js (圧縮されたJS)を読み込んだところ、特定のメソッドで Flash が強制終了しました…。圧縮されてない underscore.js を使うと落ちませんでした…不思議。

結果

underscore_result

使い道

あまり思い浮かびませんが、生のJS書くよりはマシなのでモチベーションがあがりますね。
他にも汎用的なJSのライブラリを読み込んだりしたらさらに便利になりそう。

xJSFL はじめの一歩


xJSFLのベータ版が終わり1.xがリリースされましたね。めでたい!!

これを機にxJSFLをインストールして快適なJSFLライフを過ごしましょう(宣伝)

以下、備忘録とか宣伝とか。基本的には以前書いたエントリと同じですが。。。

続きを読む

モーショントゥイーンを自動作成する.jsfl


モーショントゥイーンを自動作成する.jsflをとりあえず作ってみました。

xJSFL | Context (class) を使いたかったが、バグがかなりあるようなのでかなりはまりました。無難に公式のAPI叩いた方がいいかも。
2012/6/10 追記:$timeline が用意されているようなので、それを使いました。

実行するとこんな感じになります。

次にやりたいこと

  • 任意のフレームをモーショントゥイーン
  • イージング
  • 複数レイヤーで同時に自動作成
  • グラフィック(またはMC)を作ってその中にタイムライン作成
  • パーティクルのようなもの
  • タイポグラフィー

JSFLでFizzBuzz


xJSFLを試しつつ書いてみた。traceだけでは物足りないのでKeyfameを作ってそのラベルにFizzBuzzの結果を入れるようにした。

実行すると下図の様になる。誰得

出力パネルへのtrace結果は下記。

0, keyfame.name :, 1
1, keyfame.name :, 2
2, keyfame.name :, Fizz
3, keyfame.name :, 4
4, keyfame.name :, Buzz
5, keyfame.name :, Fizz
6, keyfame.name :, 7
7, keyfame.name :, 8
8, keyfame.name :, Fizz
9, keyfame.name :, Buzz
10, keyfame.name :, 11
11, keyfame.name :, Fizz
12, keyfame.name :, 13
13, keyfame.name :, 14
14, keyfame.name :, FizzBuzz
15, keyfame.name :, 16
16, keyfame.name :, 17
...略

JSFLを始めようと思ったらxJSFLというフレームワークが便利そうだった


JSFLとは

Flash JavaScript(JSFL)を使うと、 Flash の制作環境での作業を効率的にできるらしい。何度か書こうと思ってその都度めんどくさくなってしまったので、今回は忘れないようにメモしておく。

公式ドキュメント

開発環境

いろいろ探していたら xJSFL というフレームワークがあるので、それを使うことにした。xJSFL は jQueryライクなフレームワークで、セレクタとか用意されているらしい。あとで試す。ライセンスはMITのようです。

インストールは下記参照。
xJSFL | Quick Start
(※ちなみに私の環境だとinstall.jsflを実行してFlashを再起動してもエラーが出ました。再起動後、再度install.jsflを実行したらインストールできた。)

インストールすると下の図のようなパネルが使えるようになる。

また、フレームワークだけでなく開発環境も配布しています。Komodo EditというIDEの拡張で JSFL の自動補完が出てくる。便利。(Memo: Macの場合、Command+Jで補完表示)

インストールは下記参照。
xJSFL | Komodo
(※Komodoのダウンロードリンクが切れているので、http://downloads.activestate.com/Komodo/releases/ から最新版をダウンロードする。)

実行方法

Komodo Edit上で Ctrl+Enterを押すと、Adobe Flash で JSFLの実行ができる。便利。

xJSFL

xJSFL で HelloWorld を書くと下記のようになるらしい。

xjsfl.init(this);
trace('Hello, World.');

とりあえず環境が揃ったので、xJSFLを使いつつ、JSFLを勉強していこうと思います。