海賊王をめざす男 マツです。こんにちは。

もう秋ですね。鎌倉の山は紅葉が少し色づきはじめました。

ActionScript コードカバレッジが、Flash Builder 4 Premium のプラグインとして公開されました。
このコードカバレッジは、コード品質を測るためプログラム内部のクラス、メソッドを網羅しチェックするもの。

Flash Builder 4 Premium

ActionScript Code Coverage Plug-in for Flash Builder 4 Premium
http://labs.adobe.com/technologies/ascode_coverage/

インストール方法

上記から ascode_coverage_p1_092910.zip をダウンロードします。

Flash Builder 4 インストールディレクトリの plugins フォルダにコピーします。

Flash Builder 4 を起動して、[ウインドウ]_[パースペクティブ]_[その他]_[Coverage] を選択し[OK]ボタンをクリック。

使用方法

[Code Coverage] パネルの右上にある[Start]ボタンをクリックします。

状態が Listening に変わります。

パースペクティブ を元に戻して、適当なプロジェクトのデバッグをします。

デバッグを終えて、パースペクティブを再び Coverage に戻すと状態が Disconnected に変わっています。

[Code Coverage] パネルの右上にある[Stop]ボタンをクリックします。

状態が Stopped に変わります。

[Code Coverage] パネルの右上にある[Generate Report]ボタンをクリックします。

するとレポートが生成され、[Package] パネルが開きます。

Package リストから Package を選択すると [Class] パネルが表示され、メソッドの数や実行されたメソッド数などが表示されます。

Class リストから Class を選択すると [Methods] パネルが表示されます。ここでは具体的に実行されなかったメソッド、実行されたメソッドのリストが表示されます。

Methods リストから Methods を選択すると [Source] パネルが表示されます。ただ日本語のコメントが文字化けしてました。文字化け対応は要調査。

コードカバレッジで、使用していないメソッドはないか、２重にメソッドを実行していないかなどをチェックして、コード品質の向上を目指したいです。

海賊王をめざす男 マツです。こんにちは。

Flash Catalyst って一体なんなのでしょうか？

私も最初のころは、余計なものはあまりインストールしたくないなぁ
と腰が重かったのですが、いざ使ってみるとこれはなんと！
いろんな便利な機能があって、個人制作からチーム制作まで
幅広く使える代物なんです！

こんな方におすすめ

Flash ってやったことないけど、自分の作ったデザイン（ai ファイル、psd ファイル）を
コードをかかずに Flash コンテンツにしてみたい
とおもっている方！

チームで制作してるのですが、Flash コンテンツをつくるうえで最適なレイヤー構造がよくわからないよ
とおもっている方！

ai ファイル、psd ファイルから Flash 素材を書き出すのが面倒だよ
とおもっている方！

Flex4 になって、スキンクラスをつくるのが面倒だよ
とおもっている方！

とにかくモックを 3 分でつくりたい！
とおもっている方！

あなたの知らない世界 Flash Catalyst をおしえちゃいます！

psd ファイルの確認

Flash Catalyst に psd ファイルを読み込む前に psd ファイルを Photoshop で開いてそのレイヤー構造をみてみましょう。

ヘッダー
header

ナビゲーション
navigation

背景
background

コンテンツ
australiaPage（オーストラリア ページ）

コンテンツ
tongaPage（トンガ ページ）

Flash Catalyst に psd ファイルを読み込む

Flash Catalyst を起動します。

[Adobe Photoshop ファイル(PSD)から]を選択します。

[Photoshop 読み込みオプション]で、[OK]ボタンをクリックします。
スマートオブジェクトなどを使用している場合は、[画像変換オプション]で一括でラスタライズして読み込むことも可能です。

Flash Catalyst に psd ファイルが読み込まれました。

psd のレイヤー構造がそのままに。

ステートをつくる

コンテンツページ（ステート）をつくりましょう。

[ステートを複製]をクリックします。
すると Page2 が複製されます。レイヤー構造もそのまま複製されます。

ステートの Page1 を選択して、レイヤーの australiaPage を 非表示→表示 にします。

ステートの Page2 を選択して、レイヤーの tongaPage を 非表示→表示 にします。

これで、Flash コンテンツのページとなるステートは完了です。

ボタンをつくる

編集エリアでぼたんにしたいところを選択します。

[レイヤー]から選択しても OK です。

コンポーネントに変換することが可能になります。

[コンポーネントを選択]から、[ボタン]を選択します。

ボタン コンポーネントができました。
レイヤー名を australiaButton を変えます。

ちなみにレイヤー名はどれも半角英数字にしておくといいです。

australiaButton コンポーネントをダブルクリックで編集することもできます。

ボタンコンポーネントのステートは、Up, over, Down, Disabled の４つになっています。

レイヤー構造は、コンポーネント前のレイヤー構造がそのままになっています。
Up ステートの australiaBack レイヤーの不透明度を 0 にします。

同じように tongaButton を作成します。

Page2 ステートで、australiaButton, tongaButton レイヤーを選択して、右クリックで[ステートで共有]をみると
デフォルトでは[すべてステート]状態になっているのがわかります。
ステートごとに変えたいのであれば、ここを[現在のステートのみ]に変えることで可能です。

クリックイベントをつける

ボタンをクリックしたら、指定したステートを表示するようにしましょう。

australiaButton を選択し、[インタラクション]_[インタラクションを追加]をクリックします。

[クリック時]
[ステートのトランジションを実行]
[ステートを選択]_[Page1]

同じように tongaButton のクリックイベントを追加します。

フェードアウト／イン

Page1 から Page2 ステートへの遷移をタイムラインを使って直感的にフェードアウト／インさせることができます。

ボタンコンポーネントの Up, over, Down, Disabled のステート遷移も可能です。

パキッとデザインが変わるのではなく、気持ち良い表現で変えることができます。

フェード他アクションは、移動、サイズ変更、回転、3D 回転、サウンドエフェクト、ビデオコントロール、SWF コントロールなどがそろっています。

さてさて、以上で終わりです。ビルド（Ctrl + Enter）して Flash コンテンツを確認してみましょう。

【デモ】

できましたねー。この作業だったら 3 分もあればできてしまいます。
コードをかかずに Flash コンテンツができてしまいました。

Flash Catalyst から Photoshop で編集する

Flash Catalyst で作業中 Photoshop や Illustrator で編集することも可能です。

編集したいオブジェクトを右クリックして、[Adobe Photoshop CS5 で編集]を選択します。

Photoshop で Flash Catalyst のコンテンツを編集するには FXG 拡張機能をインストールすることで可能になります。

Photoshop で画像を大きくリサイズ編集し、保存後 ファイルを閉じます。

Flash Catalyst に戻ると Photoshop で編集したものが適応されています。

これとは別に psd を更新した場合、更新したレイヤーだけを Flash Catalyst へインポートすることも可能です。

コードでプロジェクトをみる

[デザイン]ビューから[コード]ビューにすることで、Flash Catalyst の fxp ファイルの中身がコードとなって確認できます。

ここで注目してほしいのは、[プロジェクトナビゲーター]です。

[プロジェクトナビゲーター]をみると assets には psd から切り出された素材があります。

そうなんです。この Flash Catalyst は、レイヤーを素材に書き出してくれるのです。
これまで、psd から切り出して png に保存という流れを自動でやってくれます。なんて便利。
レイヤー名が素材ファイル名になるのでレイヤー名は重要です。例として一部の素材は日本語にしておきました。

Flash Catalyst の fxp ファイルは、Flash Builder にインポートして、プロジェクトとして使うことが可能です。

今回作成したボタンコンポーネントはスキンクラスとして作成されています。Button1.mxml, Button2.mxml

spark になってからスキンのデザインが Flash Builder だとめんどいという印象でしたが、Flash Catalyst があれば解決しますね。

まとめ

デザインする方こそ Flash Catalyst は使ってほしいのです。
自分でつくったデザインを動かしてみましょう。きっとたくさんの気づきがあると思います。
私もはじめて Flash で自分のつくったものが動いたときとても感動しました。
そして、それまでの でたらめなレイヤー構造を改めるようになりました。

チームでやるとき気をつけること

・レイヤー構造のレギュレーションをつくる。
・レイヤー名が後にファイル名になるので命名規則をつくる。
・Flash Catalyst は、View をつくるものと考える。
・etc

デザインするひとは、一歩踏み込むチャンスです。
デベロッパーのひとがどのようにデザインを動かしているのか Flash Catalyst を使うことで知ることができます。
Flash コンテンツに限らず、iPhone アプリ、Android アプリなどのスマートフォンアプリをつくるときにも
その考え方はきっと役に立つはずです。

デベロッパーのひとは、デザイナーのレイヤー構造を知りましょう。
どのようなレイヤー構造だと助かるのかを伝えましょう。

Flash Catalyst はお互いをサポートしあうとても良いツールだと思います。

海賊王をめざす男 マツです。こんにちは。

Android 2.2 Froyo から FlashPlayer 10.1 が搭載され、注目大の Android 。Flash Builder 4 に Android 開発環境をつくってみましょう。

JDK

Download Java SE Development Kit 6u21 をダウンロード。2010/09/06 現在

Java SE ダウンロード - Sun Developer Network (SDN)
http://java.sun.com/javase/ja/6/download.html

ダウンロードした jdk-6u21-windows-i586.exe をインストール。

Eclipse

Flash Builder 4 標準の Eclipse バージョンの確認は、
[ヘルプ]_[製品の詳細]から Eclipse のアイコンをクリックします。

Version: 1.1.1.R35x_v20090811

JDT(Eclipse Java Development Tools plugin)のインストール

Flash Builder [ヘルプ]_[新規ソフトウェアのインストール]

[追加]ボタン

[名前]
Eclipse 3.5
[ロケーション]
http://download.eclipse.org/releases/galileo/

[Programming Languages]_[Eclipse Java Development Tools] にチェックを入れ、[次へ]ボタンをクリック。

インストールの詳細でアイテムを確認したら、[次へ]ボタンで進みます。

[使用許諾契約に同意します]をチェックして、[終了]ボタンをクリックします。

Flash Builder 再起動。

Android Plugin

Flash Builder [ヘルプ]_[新規ソフトウェアのインストール]

Windows7 の場合「プラグインをインストールまたはアップデートするには、Flash Builder を終了し、管理者権限で実行する必要があります。」というメッセージがでたら、Adobe Flash Builder 4 インストールフォルダの FlashBuilder.exe を右クリックして、[プロパティ]_[互換性]_[管理者としてこのプログラム実行する]にチェックを入れます。これでメッセージは表示されません。

Flash Builder [ヘルプ]_[新規ソフトウェアのインストール]

[追加]ボタンをクリックして、サイトを追加します。

[名前]
Android Plugin
[ロケーション]
http://dl-ssl.google.com/android/eclipse/

[OK]ボタンをクリック。

[Developer Tools]にチェックをして、[次へ]ボタンをクリック。

インストールの詳細でアイテムを確認したら、[次へ]ボタンで進みます。

[使用許諾契約に同意します]を選択して、[終了]ボタンをクリック。

セキュリティー警告が表示されるが、[OK]ボタンクリック。

Flash Builder 再起動。

Android SDK Location
The Location of the Android SDK has not been set up.
Please go to Preferences > Android and set it up

Android SDK がないよとメッセージが表示されます。

Android SDK

android-sdk_r06-windows.zip をダウンロード。2010/09/06 現在

Android Developers
http://developer.android.com/index.html

sdks ディレクトリをつくってそこにインストール。
C:\Program Files\Eclipse\sdks\android-sdk_r06-windows

[ウィンドウ]_[設定]_[Android]_[SDK Location]

SDK ロケーションにインストールした Android SDK のパスを入力します。
C:\Program Files\Eclipse\sdks\android-sdk_r06-windows

[OK]ボタンをクリックする。

Platform API インストール

[ウィンドウ]_[Android SDK and AVD Manager]

[Installed Packages]を選択し、[Update All...]ボタンをクリックする。

[Accept All] を選択し、[Install]ボタンをクリックする。

Virtual Devices

[ウィンドウ]_[Android SDK and AVD Manager]
[Virtual Devices]_[New]
Name:Xperia
Target:Android 1.6 - API Level 4
Size:64 MiB
Built-in:WVGA854

[Create AVD]ボタン

[Start]ボタンで、エミュレータを起動します。

Hello World

[ファイル]_[新規]_[その他]_[Android Project]

[次へ]ボタン

Project name:HelloWorld

Create new project in workspace

Use default location のチェックを外して、適当な Location を入力します。

Build Target Android 1.6 をチェック。

Application name: Hello World
Package name: classes.content.helloworld
Create Activity:HelloWorld
Min SDK Version:4

[終了]ボタン

[Package Explorer]の classes.content.helloworld を右クリックして、
[New]_[Class]

Name:HelloView

[終了]ボタン

HelloView.java

package classes.content.helloworld;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;
public class HelloView extends View {
	public HelloView(Context context) {
		super(context);
		setBackgroundColor(Color.WHITE);
	}
	@Override
	protected void onDraw(Canvas canvas){
		canvas.drawText("Hello World!", 0, 20, new Paint());
	}
}

HelloWorld.java

package classes.content.helloworld;
import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
public class HelloWorld extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(new HelloView(this));
    }
}

[Debug]ボタンでデバッグをします。

デバッグ方法を選択します。[Android Application]を選択。

Android Device Chooser
Launch a new Android Virtual Device
でデバッグするターゲット端末を選択して、[OK]ボタン。

エミュレータが起動し、アプリが実行されます。

Hello World!

海賊王をめざす男 マツです。こんにちは。

Flash のライブラリって、ちゃんとシンボルの命名規則を決定せずに進めると煩雑になってしまいますよね。
今回はライブラリ整理術。親、子、孫と MC をつくっていったときどのようにまとめるか。

親：SquareMC
　子：CircleMC
　　孫：TriangleMC

このような構造のムービークリップをつくります。

親の SquareMC をつくります。

SquareMC に子の CircleMC をつくります。

ライブラリにフォルダ[SquareMC.]を作成します。
（ . がポイントです）

[SquareMC.]フォルダのなかに CircleMC を移動させます。

親は自分の子をフォルダの中にいれます。そのフォルダの名前は親の名前に . をいれることで、ライブラリで親自身の直下にリストされます。これで親のすぐそばに子をまとめることができます。
. を使用したのは、SquareMC.CircleMC という意味も込められています。

続いて、CircleMC に孫の TriangleMC をつくります。

swc にして SquareMC を使えるようにリンケージを設定します。

SquareMC のクラス名は、SquareMC とします。シンボル名と同じにすることで、as で使用されるクラス名からライブラリのどのシンボルを new しているのかが分かりやすいです。

使用例

var squareMC:SquareMC = new SquareMC();

SquareMC に配置されている子の CircleMC のインスタンス名は、先頭を小文字にして、circleMC とします。
同じように CircleMC に配置されている子の TriangleMC のインスタンス名は、先頭を小文字にして、triangleMC とします。

squareMC.circleMC.triangleMC

このようにアクセスすることができます。必要があれば、CircleMC, TriangleMC にもリンケージを設定するといいと思います。

煩雑になりがちな Flash ライブラリの整理の一例でした。ライブラリの中身って誰かにみせるの恥ずかしい！って思っているひとはぜひ参考にしてみてください。

今回の fla をダウンロードしてお使いください。
【ダウンロード】

海賊王をめざす男 マツです。こんにちは。

高校野球も終り、蝉の声も少なくなってきました。そろそろ秋ですかね。

Adobe Flash Builder 4 Premium Edition の新機能であるネットワーク モニターで、サーバーとのやりとりを監視することができます。

手順

[ネットワークモニター]パネルの[モニターを有効にする]ボタンをクリックします。

モニターを有効にしたら、アプリケーションを実行します。（デバッグで実行する必要はありません。）

サーバーとの通信ごとに[要求]と[応答]をみることができます。
[要求]では、自分がリクエストした URL にどんなパラメータをセットしてるかをツリービューで確認できます。

[応答]では、レスポンス内容を確認できます。

また要求時刻、応答時刻、経過時間（ミリ秒）もわかるので、コンテンツの表示が遅いのはサーバーのレスポンスが遅いのか Flash の処理が遅いのかの判断材料になります。

API にバグがあったとき担当しているプログラマーの方に迅速に対応してもらう際にもネットワーク モニターは重宝します。

海賊王をめざす男 マツです。こんにちは。

今週末は、「ごはんとFlash with JS」ですねー。 Flex やっている方いたらお声をかけてください。

Module 内で DragManager を使用したときのこと。以下のエラーがでました。

VerifyError: Error #1014: クラス IDragManager が見つかりません。
at flash.display::MovieClip/nextFrame()
at mx.core::FlexModuleFactory/deferredNextFrame()[E:\dev\4.x\frameworks\projects\framework\src\mx\core\FlexModuleFactory.as:631]
at mx.core::FlexModuleFactory/update()[E:\dev\4.x\frameworks\projects\framework\src\mx\core\FlexModuleFactory.as:401]
at mx.core::FlexModuleFactory/moduleCompleteHandler()[E:\dev\4.x\frameworks\projects\framework\src\mx\core\FlexModuleFactory.as:718]

Flex4 になってもまだ Fix されていません。

この問題を回避するには、メインアプリケーションのスクリプトブロックに次の 2 行を追加します。

import mx.managers.IDragManager;
private var iDragManager:IDragManager;

他にも Flex4 になって、モジュールの扱いがちょっと変わってます。
例えばモジュールで使用しているコンポーネントの CSS をメインアプリケーションに宣言できたのが、警告がでるようになりました。

例）Alert コンポーネントをモジュールで使用していたとき
タイプがアプリケーションで使用されていないので、CSS タイプセレクター 'mx.controls.Alert' は処理されませんでした。

モジュール内で使用しているコンポーネント の CSS の宣言はモジュールでしないと警告がでるようになりました。
エラーではないので、ビルドはできるのですがちょっと...。

複数のモジュールで構成されているプロジェクトの場合不便かも。

参考
http://www.adobe.com/support/documentation/jp/flex/2/releasenotes_flex201_sdk.html