久々にFlashのお勉強を再開しています。割とよく見るようなものを習作として作ってみました。CPUに負荷かけまくりなので、もうちょい精進します……

Flash CS3だけの開発環境では、ソース書くのがしんどくなってきたので、劇的に便利とウワサのFlashDevelopを使いたいと思います。

Photoshopなどのアプリやフォント類がMacのものしかなく、今更Windowsに乗り換える気もないので、MacにParallelsを入れてFlashDevelopを動かします。

【1】ParallelsDesktopをインストール

FlashDevelopはWindowsにしかインストールできないので、まずはMac上でWindowsを動かすための「ParallelsDesktop 4.0 for Mac」をインストール。以前、バージョン1を入れたときは、あまりに動作が重くてお蔵入りしていましたが、バージョン4になったらエライさくさく動きますね。

【2】Windowsをインストール

続いて、ParallelsにWindowsOSをインストール。Vistaは持ってないので、XPをインストールしました。

【3】FlashDevelopをインストールする前に、色々と下準備

まずはWIndowsに「.NET Framework Version 2.0」をインストール。続いて「JAVAランタイム」もインストール。

【4】ようやくFlashDevelopをインストール

最新版の「FlashDevelop 3.0.0 RC1」をダウンロードしてWIndowsにインストール。

【5】FlashDevelopを日本語化

こちらのブログ「FlashDevelop 3.0.0 RC1 のメニューを日本語化 | logicalyze::blog」を参考に日本語化します。まずは、エディタの使用フォントを変更します。「ツール」メニュー→「プログラム設定」ダイアログから指定。等幅の「MS ゴシック」を指定します。メニュー部分は、XMLファイルで定義されているので、日本語化したXMLで上書きします。

メニュー部分はXMLで定義されているので、これを上書きします。場所は「C:Program FilesFlashDevelopSettings」フォルダです。上書きした後にFlashDevelopを再起動すればOK。 エディタ部分で日本語を使用するにはフォント設定を返る必要があります。「ツール」メニュー→「プログラム設定」の中の、「Display＞UI Console Font」で「MS ゴシック」を指定します。

【6】MacのFlash CS3と連携させましょう。

こちらのブログ「BONKURA BLOG - FlashDevelopをMacで使う方法」を参考にしました。ちなみにFlashDevelopからCS3経由でパブリッシュするのに「command＋Enter」のショートカットが効かなかったので、「F6キー」を使いました。またパブリッシュするときは、MacのFlash CS3の方で.flaファイルを開いておかないとパプリッシュされません。

【7】Parallelsでのキーボード入力環境を整えましょう。

Macのキーボードは「かな」「英数」キーで、日本語／半角英数を切り替えますが、Parallels上では「英数」キーが効きません。加えてテンキーも使えません。ですが、「AppleK for Parallels」を入れることで解決します。同様の機能をもつ無料アプリ「AppleKbWin」もあるのですが、「ParallelsDesktop 4.0 for Mac」にはインストールできませんでした。

【8】シンタックスをチェックしたい

FlashDevelopにもシンタックスエラーをチェックする「Check Syntax」機能があるのですが、Flex SDKを入れないと効かないようです。なので、Flex 3 SDKも入れてみました。

色々とやることが多いですが、これでMacでもFlashDevelopを使う環境が整いました！FlashDevelopはいろいろとカスタマイズできるようなので、使い込んでいくうちに色々と試していきたいと思います。

ちなみにカスタマイズについては、「7つのステップで完成！FlashDevelopカスタマイズの奥義 | _level0.KAYAC」を参照してみてください。

Bitmapまわりを触ってみたかったので、いくつか作ってみました。AS3は色々と便利なメソッドが用意されているので、比較的簡単なんですね。

■ Pointillism

画像を読み込んで、座標ごとに色を取得し、ランダムに丸いシェイプを置いています。

■ Pointillism2

座標ごとに取得した色をRGBに分解して、RGBごとの丸いシェイプを置いています。いわゆるブラウン管のテレビのようにしたかったけど、ちょっと違いますね。ビットマップに変換するときのBlendModeを「difference」にしています。ちなみに、「difference」のヘルプでの解説は以下の通り。

表示オブジェクトの要素カラーと背景色を比較し、2 つの要素カラーのうち明るい方の値から暗い方の値を差し引きます。

・・・よく分からないので、色々と試してみた方が良いですね。

■ Pointillism3

WEBカメラを使ってみたかったのです。リアルタイムに変換＋描画しているので、処理が重い重い。。もうちょいスマートなやり方も考えておこう。

参考にしたサイトはこちらです。

・5iVESTAR.ORG » Blog Archive » Wonderfl が楽しい
・Halftone | Wonderfl Build Flash Online

Progressionに限らずASを外部ファイルにする場合、グラフィック要素（ムービークリップ）はFlash IDE 内のライブラリにあるので、これらを外部ASファイルと関連づけるためにリンケージの設定が必要になります。

フルFlashでサイトを構築するとなるとムービークリップが多くなって、それぞれにリンケージを設定するのがとても面倒だなぁと嘆いていたら、そのあたりもProgressionは拡張機能としてキチンとフォローしていました。その名も「リンケージの一括設定」。・・・流石すぎます。

こちらのブログを参考にしました。リンケージ一括設定を使ってみる | ra66it.net

「リンケージの一括設定」をするにはちょっとした下準備が必要で、シンボル名を命名規則に合わせたりライブラリのフォルダ名をパッケージに合わせたりしておく必要があります。ちょっと面倒なようですが、逆にルールに従っておけば管理しやすくもなりますね。

FlashでWEBサイトを構築する際の鬼のフレームワーク「Progression」を実戦投入すべく、お勉強してみました。

Progressionを使ったサイトを構築するにあたり必要最低限のことは、オフィシャルサイトのチュートリアルで学べます。僕はまずここで基本を押さえました。

また、gihyo.jpの特集『Flashのフレームワーク「Progression3」を始めてみよう！』では、オフィシャルのチュートリアルにはなかった「コマンド」の使い方について解説されているので助かります。

Progressionのキモの一つに「コマンド」というものがあります。これはオブジェクトを表示させたり移動させたりといった様々な命令（コマンド）を書く部分で、コマンドを一つ一つ順番に実行させることができます。

そのコマンドを、例えば「アルファをフェードインしつつ、横方向に移動する」といった、複数の処理を同時に実行させるにはどうすればいいのかなぁと思っていたら、ちゃんとやり方が用意されていました。

まずは、順番に実行させるやり方（シリアルリスト）

   protected override function _onInit():void {
       // 実行したいコマンドを登録します。
       addCommand(
           new Trace("初めてのコマンド"),
           new Wait(1000),
           new Trace("1秒待ちました"),
           new Wait(1000),
           new Trace("もう1秒待ちました")
       );
   }
   

次に、同時実行させるやり方（パラレルリスト）

   protected override function _onInit():void {
       // 実行したいコマンドを登録します。
       addCommand(
           new Trace("初めてのコマンド"),
           new Wait(1000),
           [
           new Trace("1秒待ちました"),
           new Wait(1000),
           new Trace("これは同時に実行されます")
           ]
       );
   }
   

[ ]で挟めば、複数のコマンドが同時に処理されます。なるほど。