flashの最近のブログ記事

ちょっと躓いたので、標準コンポーネントComboBoxの使い方をまとめてみました。

• コンボボックスへのデータ指定
  コンボボックスで選択可能なリストは、dataProviderクラスを使って指定します。

var dp:DataProvider = new DataProvider();
dp.addItem( { label:"リスト1", data:"1" } );
dp.addItem( { label:"リスト2", data:"2" } );

var cb:ComboBox = root.combo1;  //root.combo1はステージに配置済み
cb.dataProvider = dp;

• アイテムの選択

cb.selectedIndex = 0;  //一番上のアイテムが選択される

• 選択されたアイテムの参照

cb.selectedItem

• コンボボックスのフォント変更
  コンポーネントをダブルクリックして中身を見てみると、textInputとlistコンポーネントがひとつずつありますが、それらにそれぞれフォントを指定します。

var tf:TextFormat = new TextFormat("_等幅", 16, 0x0000, true);
cb.textField.setStyle("textFormat", tf);
cb.dropdown.setRendrerStyle("textFormat", tf);

• コンボボックスのサイズ変更

cb.setSize(60, 26);  //width, heightの順に指定

• テキストの垂直位置の変更

cb.setStyle("textPadding", 4);  //テキストの垂直位置の調整

• ボタン部分の矢印
  コンボボックスのサイズを変更した際には、矢印の位置も若干調整が必要ですので、コンポーネントをダブルクリック→各場合のスキンを修正します。

本来、フォントの指定とか、コンボボックスのサイズ変更とかって、頻繁にするんだろうから、スクリプト書かなくてもプロパティパネル（or パラメータパネル）から指定できるようになってるもんだと思うんだけど、難しいのかな？少しだけ腑に落ちない一日でした。

大きなサイズのflaファイル（100MB近く？）をパブリッシュしようとした時によく下記のようなエラーメッセージが表示されます。

「JRE(Java Runtime Environment)の初期化時にエラーが発生しました。Flashを再インストールする必要がある可能性があります。」

大きなサイズのflaファイルがパブリッシュできないのも困りますし、一旦このメッセージが表示されると、その後はどんなflaファイルもパブリッシュできなくなってしまい、より困ります。
これの一つの対処法ですが、

1. flash（うちの場合はcs3）を再起動します。
2. 軽めのflaファイルを開いてパブリッシュします。
3. 先ほどパブリッシュできなかった大きなサイズのflaファイルを開いてパブリッシュします。

上記の手順を踏むことで、大きなサイズのflaファイルをパブリッシュできることがあります。

おそらく、JREの初期化というのは、flashを起動してから、一番最初にパブリッシュする際に行われる処理で、その際にflaファイルが大きすぎたりした場合に、何かしら（メモリ関連？）のエラーが発生してしまうのではないでしょうか？

エラーメッセージの通りに、今まで再インストールや修復を行っていた方は、一度この方法をお試しする価値はあるかもです。

ただし、必ずしも上記手順で、エラーが改善できるとは限りません。違う原因の場合も大いにありますのであしからず。。。

ActionScriptのエディタとして、いまや不動の地位を築いているFlashDevelopですが、かくいう自分もBeta 3の時代からお世話になっております。

にもかかわらず！今の今まで以下の便利なショートカットキーを存在を知りませんでした。

Ctrl + Shift + 1

このショートカットキーで何ができるのかというと

• import文の自動追加
• ローカル変数からクラスメンバー変数の変換
• イベントハンドラの自動生成
• setter,getterの自動生成

※具体的な方法は公式wiki（?）内の基本的な機能の紹介 - FlashDevelop.jp -を見ていただくと一発でわかると思います。

特にこの中でも、「イベントハンドラの自動生成」と「setter,getterの自動生成」を知っていれば、今までの相当な時間の短縮が図れたことは間違いありませんね。ローカル変数からクラスメンバー変数への変換もよくやる作業ですし。

2年以上は使ってきたのに、こんな基本的なショートカットキーを使っていなかったなんて、ほんとお間抜けもいいところです。いつから追加されてたんでしょうか？（そもそも最初からあったのかもしれませんが。。。）

僕自身、各バージョンがリリースされる毎にいち早くチェックとかしていたわけではなく、FlashDevelopのセットアップ時に、その時点での最新バージョンをインストールしていただけで、新しいバージョンになってより使いやすくなった部分とか、追加された機能については全くノータッチだったわけです。。。

あと、当時（Beta-RC時代）は設定の仕方がいろいろと変更になっていたりして、前のバージョンから、次のバージョンに移行するのに若干手間だったというのもあります。やっぱり使い慣れたバージョンは強いですね。XPがいつまでたっても移行しないのもわかる気がします。

flash.external.ExternalInterfaceクラスを使用すると、HTML内のjavascriptとの通信を行うことが出来ます。

これにより、javascriptで取得できるイベントによりflash内でアクションを起こしたり、
その逆にflash内からjavascriptを介して、ブラウザの制御を行うことが可能になります。

以下サンプル（リンク）とソースです。
サンプルページ
ExternalInterfaceTest.zip

ソースの肝です。

---------- AS側 ----------
//javascriptから呼び出す関数の登録
if (ExternalInterface.available) {
    //ExternalInterface.marshallExceptions = true;
    ExternalInterface.addCallback("TestFunc_AS", receivedFromJavaScript);
}else {
    text1.appendText("External interface is not available for this container.");
}

//javascriptの呼び出し
if (ExternalInterface.available) {
    try {
        ExternalInterface.call("TestFunc_JS", text2.text);
    } catch (error:SecurityError) {
        text1.appendText("A SecurityError occurred: " + error.message + "\n");
    } catch (error:Error) {
        text1.appendText("An Error occurred: " + error.message + "\n");
    }
}

---------- HTML側 ----------
function TestFunc_JS(value){
    document.forms["form1"].output.value += "ActionScript says: " + value + "\n";
}

function thisMovie(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        return window[movieName];
    } else {
        return document[movieName];
    }
}

function sendToActionScript(value) {
    thisMovie("ExternalInterfaceTest").TestFunc_AS(value);
}

まず、availableプロパティでhtml内に埋め込まれたswfであるかどうかをチェックしています。
ちなみにswf単体で動かした場合には、この値がfalseになります。

javascriptからasを呼び出せるようにするには、addCallback関数にて、
javascriptからの呼び出しを許可する関数を登録します。
後は、HTML側からswfを取得し、(swf).登録関数名で呼び出せます。

逆にasからjavascriptを呼び出す際の設定は入りません。
asからjavascriptを呼び出す際にはcall関数を使用します。
第一引数が関数名、第二引数以降に関数に渡すパラメータを指定します。

ちなみにas側でmarshallExceptionsオプションをtrueにすると、例外をキャッチできるようになります。javascript例外をflash内で、flash内の例外をjavascriptでキャッチ可能です。
(flashplayer ver 9.0.115 以降)

今年の８月位から（？）、Amazon Web Service APIの仕様が変更になり、リクエスト時のパラメータにHMAC-SHA256署名を追加する事が必須となりました。
その辺も含めて、as3でAmazon Web Service APIを利用する手順をまとめてみます。

まずは、署名を作成するに当たって、AWSの本家サイトにてアクセス用のアカウントを作成します。右上の Create an AWS Account から作成可能です。

次に、APIへのアクセスIDと認証アクセスキーを確認します。
Your Account - Security Credential ページの真ん中あたりに、Access Key IDとSecret Access Keyが確認できます。（アクセスキーが一つも無い場合には、同箇所のCreate a New access Keyのリンクからアクセスキーを作成します。）
これらを使って、認証を行い、アマゾンAPIを利用します。

とりあえず、今回はAPIへアクセスしてリストを取得し、取得したリストの上位３つを表示するサンプルを作ってみました。
AwsApiTest.zip
※Access Key ID、Secret Access Keyは空にしてありますので、DL後にAWSApiTest.asを編集して設定してください。

以下の部分がAmazonAPIへのリクエストの生成部分です。

	// Amazon APIより取得したいリストに応じてパラメータを設定
	var query:String = "AWSAccessKeyId=" + access_key_id + "&"
		+ "BrowseNode=" + browse_node + "&"
		+ "Operation=ItemSearch&"
		+ "Page=1&"
		+ "ResponseGroup=Large&"
		+ "SearchIndex=" + search_index + "&"
		+ "Service=AWSECommerceService&"
		+ "Sort=salesrank" + "&"
		+ "Timestamp=" + escape(timestamp) + "&"
		+ "Version=" + "2009-02-01";
				
	// 署名の生成
	var signatureText:String = 
		["GET", requestUri, requestPath, query].join("\n");
	var signature:String = 
		makeSignature(signatureText, secret_access_key);
	
	// 署名をクエリの最後に追加
	query += "&Signature=" 
		+ signature.replace(/\+/g,'%2B').replace('=', '%3D');
	
	// リクエストURLの完成
	var requestUrl:String = 
		"http://" + requestUri + requestPath + "?" + query;

流れとしては

1. 取得したいリストに応じた検索用パラメータ（GET値）を作成
2. アクセス先URL、検索用パラメータ、Secret Access Keyを使って署名を作成
3. 署名をパラメータの一つとして末尾に追加
4. アマゾンURL+検索用パラメータでアクセス！

となります。

注意すべきは検索用パラメータの順番で、


• AWSAccessKeyIdが一番最初
• それ以外の検索用パラメータはアルファベット順
• Signatureは一番最後

という順番で指定しないとうまく動かないようです。

また、HMAC-SHA256署名の方法に関しましては、E.E. -Evening Emerald-様の記事を参考にさせていただきました。上記サイトで署名を行う方法についてとても詳しく書かれていますので、ここでは割愛します。
（余談部分のイベントハンドラへの複数パラメータ渡しがとてもステキでした。ぜひご覧下さい。）

as3のMatrixクラスを使ったムービークリップの変形にてmatrixクラスのscale(),rotate()による変換は、対象オブジェクトの親の座標を基準として適応されると書きましたが、fl.motion.MatrixTransformerクラスを使用すると、対象オブジェクト内の座標を基準として変換を適応できます。

下記、サンプル内のscaleMeおよびrotateMeボタンを押すと、flaマークの座標にかかわらず自分自身の中心を基準として変形されます。

以下、前回のソースに手を加えたサンプルとソースです。
MatrixTest2.zip

以下、今回のサンプルで追加した肝な部分です。

回転(自分基準)

function rotateMe(target:MovieClip, q:Number) {
	var mat:Matrix = target.transform.matrix;
	MatrixTransformer.rotateAroundInternalPoint(mat, 0, 0, q);
	target.transform.matrix = mat;
}

拡大・縮小(自分基準)

function scaleMe(target:MovieClip, sx:Number, sy:Number) {
	var mat:Matrix = target.transform.matrix;
	var mat_sx:Number = MatrixTransformer.getScaleX(mat);
	var mat_sy:Number = MatrixTransformer.getScaleY(mat);
	MatrixTransformer.setScaleX(mat, mat_sx * sx);
	MatrixTransformer.setScaleY(mat, mat_sy * sy);
	target.transform.matrix = mat;
}

まず回転変換ですが、これはMatrixTransformerクラスのrotateAroundInternalPointメソッドを使用すれば、自分自身の座標系を基準にして変換を適応することが可能です。

また、MatrixTransformerクラスにはrotateAroundExternalPointという関数も用意されていて、これは親座標系を基準にして変換をするので、機能的にはmatrix.rotate()と似てます。

相違点としては、rotateAroundInternalPointとrotateAroundExternalPointメソッドは変換を行う際に、基準とする座標を指定することもできます。また、引数に指定する回転角度はラジアン単位ではなく度単位なので注意が必要です。

次に拡大・縮小に関してですが、MatrixTransformerクラスのgetScaleX,getScaleYを利用すると、現在変換行列で定義されている拡大に関する成分をとってくる事ができます。

後は、これらの値に変更を加えた値をsetScaleX,setScaleYメソッドで変換行列に再設定してあげれば大丈夫です。

fl.motion.MatrixTransformerクラスに関しては、他にもいろいろと便利な関数があるみたいなので、また書いていきたいと思います。

Flash上のテキストフィールドのhtmlTextプロパティにhtmlタグを設定すると、テキストフィールド内にhtmlを出力することが可能です。

今回は、そのhtml内のAタグを押した時に、Flash上でイベントを起こすサンプルを作って見ました。
HtmlLinkEvent.zip

サンプルソース以下の部分で、テキストボックスにhtmlTextを設定後、イベントリスナーを追加しています。

public function init() {

・・・

    textBox.htmlText = "<a href=\"event:50 50\">ムービークリップを
(50, 50)に移動</a>";
    textBox.htmlText += "<a href=\"event:50 300\">ムービークリップ
を(50, 300)に移動</a>";
    textBox.htmlText += "<a href=\"event:300 50\">ムービークリップ
を(300, 50)に移動</a>";
    textBox.htmlText += "<a href=\"event:300 300\">ムービークリッ
プを(300, 300)に移動</a>";
			
    textBox.addEventListener(TextEvent.LINK, onClickLink);
}

 

また、イベントリスナーが受け取るTextEventのtextプロパティに、Aタグに設定したテキスト（event:の後部分）が渡ってくるので、それを使って色々なイベントを遷移できそうです。

private function onClickLink(te:TextEvent) {
    var vals:Array = te.text.split(" ");

    Tweener.addTween(targetmc, {time:1, x:vals[0], y:vals[1]});
}

今回は単純に、座標を渡して、その場所にとぅぃぃぃんするサンプルでした。

as3のflash.geom.Matrixクラスを使うと、変換行列を使ったオブジェクトの変形を行うことができます。

一般的に、オブジェクトの変形は、そのオブジェクトのtransformプロパティを再設定することで行います。変換行列による変換は、このtransformプロパティに変換行列を適用して、再設定してやればできます。

以下、とりあえず、簡単に出来る変換について、サンプルとソースです。
MatrixTest.zip

以下、今回のサンプルの肝な部分です。

平行移動

function translate(target:MovieClip, tx:Number, ty:Number) {
	var mat:Matrix = target.transform.matrix;
	mat.translate(tx, ty);
	target.transform.matrix = mat;
}

拡大・縮小

function scale(target:MovieClip, sx:Number, sy:Number) {
	var mat:Matrix = target.transform.matrix;
	mat.scale(sx, sy);
	target.transform.matrix = mat;
}

回転

function rotate(target:MovieClip, q:Number) {
	var radians:Number = q * Math.PI / 180;
	var mat:Matrix = target.transform.matrix;
	mat.rotate(radians);
	target.transform.matrix = mat;
}

基本的な流れは、以下の通りです。

1. 変換するオブジェクトの変換行列を取得
2. 取得した変換行列に対して、変換を適用
3. 変換するオブジェクトへの再設定

回転変換は、パラメータとして渡された値をラジアンに変換していますが、それ以外はほぼ同じ流れです。

また、変換行列を初期化することで、元の状態にもどすこともできます。

リセット

function reset(target:MovieClip) {
	var mat:Matrix = new Matrix();
	target.transform.matrix = mat;
}

画像ファイルをFlashに読み込んだ際に、ビットマッププロパティでスムージングと圧縮：ロスレスに設定すると、画像の劣化を防いだり、小数点座標に配置された際の表示が汚くなるのを防ぐ事ができます。

ただ、画像の数が多いときは、全てに設定するのがちょっと面倒だったりします。そんなときには、以下の方法でサクっと一括設定する事ができます。

1. ライブラリから画像を一つ選択して、ビットマッププロパティを設定します。
2. ライブラリでビットマッププロパティを設定したい画像を全て選択します。
3. ヒストリパネルを開いて、１の作業のビットマッププロパティを選択して「再生」を押します。
   

上記の方法で、最初の画像に設定したビットマッププロパティと同様の設定が、選択した画像全てに適応されます。

ただし、テキスト系の画像等はスムージングをつけない方がくっきりして見やすかったりもするので、そういった画像がある場合は、2回に分けて、それぞれ設定をかえて適応すればいいと思います。