ActionScript3.0でインスタンス名を調べたり設定する方法

ライブラリにおいてあるムービークリップに対して、リンゲージでActionScriptに書き出しをチェックを入れてクラス化したモノを、var 変数名:クラス名 = new クラス名();で生成して、stage.addChild(変数名);でステージに配置するのは基本だと思います。が、この一連の流れで一体どこにインスタンス名を設定するのか非常に悩んでしまいました。

単純にMovieClipを生成するだけなら、var 変数名:MovieClip = new MovieClip();でできちゃいます。ActionScript2以下の場合では、createEmptyMovieClipを使って空のMovieClipを生成していたと思います。

インスタンスを作成する場所.createEmptyMovieClip(インスタンス名, 深度)

第二引数にインスタンス名を設定ができ、例えばforで繰り返し生成する場合は、インスタンス名に対して「i」を連結させて連番名などにしたりしていました。さて、、ActionScript3.0ではどうするのでしょうか。。。

まず、空のMovieClipを生成した時の名前を調べました。

var mc:MovieClip = new MovieClip();
trace(mc.name);//「instance1」と出力
「name」はActionScript2以下の場合は「_name」でアンダーバーがいりましたが、ActionScript3.0ではアンダーバーがいらなくなりました。newしたMovieClipの名前をtraceしてみると「instance1」と出力されました。
これをforで繰り返して生成したMovieClipにアクセスする為には「instance1」「instance2」とかのまま作られたらダメですよね。。。

そこで調べました。なんと!ActionScript2以下ではインスタンス名を調べることしかできなかったnameが、ActionScript3.0からnewしたインスタンス名に設定できることが分かりました、つまり、

var mc:MovieClip = new MovieClip();
mc.name = "myMc";
trace(mc.name);//「myMc」と出力
こう書けちゃうんです!勘の鋭い方はもう分かると思いますが、forで繰り返すときは、変数名.nameに代入する文字列に対して「i」とかを連結すればOK!
for(var i:int = 0; i<5; i++){
	var mc:MovieClip = new MovieClip();
	mc.name = "myMc"+i;//←ここで連番名にできる
	trace(mc.name);
}
これは、ActionScript3.0を覚える最初のほうの壁ですね。。。どなたか同じ壁にぶち当たってこれみて助かれば御の字です。

FlashLite1.xでloadVariablesの第二引数に注意

FlashLite1.xで動的にコンテンツを動かす時に欠かせないのが、loadVariablesで変数をまとめたテキストデータを取得方法があります。FlashLite1.xではムービークリップごとにアクセスするのはドットシンタックスではなくスラッシュシンタックスなので、loadVariablesの第二引数に_rootという記述では変数を取得することができないので、loadVariablesの第二引数に「”/”」と記述します。
と、断言しちゃってますが、Flashのヘルプや他のブログなどをみると、第二引数に_rootとかいているパターンが多く、ブラウザやDevice Centralで第二引数に_rootで正しく動いても、ケータイ端末実機で動かない場合は下記の方法を試してみてください。

Flash Lite 1.xでのloadVariablesの記述

on (press, keyPress "<Enter>") {
loadVariables("data.text","/"); //←第二引数で_rootではなく「"/"」スラッシュを書く
}

loadVariablesはボタンアクションでないと動作しない

swfファイルがケータイ端末にロードが完了した瞬間にFlashは再生され、1フレーム目のScriptが実行されます。その瞬間に、loadVariablesが実行されると、swfファイルを読み込んだだけで端末情報が取得できたりしてしまうので、フレームアクションではloadVariablesが実行されないようになってます。これはFlashLite全体の仕様なので、loadVariablesとloadMovieで外部ファイルにアクセスする場合は必ずユーザーさんにボタンアクションをしてもらわなければなりません。パソコンコンテンツとは違い、データを取得して動的に表示させる場合はスムーズに見えるようなUIの工夫が必要になると思います。

ActionScript3.0ではeval();が使えないので解決方法は

そろそろActionScript2.0から脱皮できそうな予感がしてきました!(オソw)そこで、ActionScript2.0でできたことで、ActionScript3.0でできないこと、その違いと方法を記録していきたいと思います。

AS3でeval();が使えない

evalは「テキストをインスタンス名のターゲットに変換してくれる」というのがボクのイメージです。
例えば、ステージ上に、mc0からmc9までのムービークリップがあるとします。これらに一気に命令する時は、
▼ActionScript1.x ~ 2.0の場合

for(var i:Number = 0; i<10; i++){
	eval("mc"+i).onRelease = function(){
		trace("ほげ");
	}
}
for文の中の変数「i」を利用して、「mc0」「mc1」「mc2」「mc3」…..「mc8」「mc9」まで一気にonReleaseのボタンが設定できました。
ActionScript3.0だとevalが使えないので、下記の方法を使います。
▼ActionScript3.0の場合
for(var i:int = 0; i<10; i++){
	this.["mc"+i].onRelease = function(){
		trace("ほげ");
	}
}
えーっと、実は、この記述の方法はActionScript1.x~2.0で、Flash Player5以上であれば使うことができます。

更にもっと深い階層になると、

for(var i:int = 0; i<10; i++){
	this.["mc"+i]["mc2"+i]["mc3"+i].onRelease = function(){
		trace("ほげ");
	}
}
と、ドットで連結させるところを、[ ] ←この括弧で連結することで、インスタンス名にアクセスすることができます。

for文でインスタンスのプロパティに対してアクセスしたい場合、getChildByNameを使ってインスタンス名を参照します。例えばX座標のとき、

for(var i:int = 0; i<10; i++){
	trace(this.getChildByName("mc"+i).x);
}

FlashLite1.1がPHPをloadVariablesで読み込めないとき

Flash Lite 1.1を動的に表現するためにはloadVariablesを使って外部ファイルを読み込む必要があります。loadVariables(“hoge.php”)など、PHPで出力したテキストに対して、auだけうまくloadVariablesできないときがありました。どうやらechoして出力するファイル形式がテキストタイプということを書くと、うまくloadVariablesすることができるみたいです。

/*↓この1行を最初のほうに書いておく*/
header("Content-type:text/plain");
$hoge = "ホゲホゲ";
echo "hensu=".$hoge;

Flash Playerを切り替えるFlash Switcher Firefoxアドオン


Flash Swicher

Flashコンテンツの動作確認の際、FlashPlayerのバージョンを下げて確認したいことがあると思います。また、SWFObjectなどを使って、FlashPlayerのバージョンを満たしていないユーザーさんの為に代替コンテンツを表示させるとかの動作確認も必要な場合もあります。そんな時に便利なのがFlash SwitcherというFirefoxアドオンです。

Flash Switcherをインストール

配布先:Flash Switcher
http://www.sephiroth.it/firefox/flash_switcher/index.php
Mozillaのアドオン配布サイトではFirefox3.5はインストールできない。となってますが、本家のサイトからアドオンをダウンロードすると使えました。

Flash Playe ver.r3,4,5,6,7,8,9,10のインストールと設定

配布先:Archived Flash Players for testing purposes
http://www.adobe.com/jp/support/kb/ts/228/ts_228683_ja-jp.html
Adobeのサイトから過去のFlash Playerをダウンロードしてきます。ダウンロードした各zipファイルを解凍して、インストーラーを起動させてインストールしていくんですが、どこにインストールされたのかちょっとややこしいことになりました。。。インストーラーにもよるかもしれませんが、「NetScapeがありません!」というアラートがでたりしたので、インストール先が設定できる場合は、分かりやすいところにインストールして【NPSWF32.dll】というファイルがあるか確認してください。

Windowsでの設定方法


NPSWF32.dll

【NPSWF32.dll】のファイルにそっとマウスを乗せてください。するとそのファイルがFlash Playerの何のバージョンかがポップウィンドウで確認できると思います。Flash Player old
そのファイルを、新規フォルダを作ってその中に入れます。【3.0 r18】とか【7.0 r63】とかにボクはしました。Firefoxブラウザに戻って、右下にあるFlash Switcherのアイコンから【Settings】をクリックします。Local Repository Directoryできたフォルダーを、画像の上にある「Local Repository Directory」が指定しているパスの中に置いたら過去のFlash Playerの設置は完了です。

Firefox Plugins directory

Firefoxブラウザに戻って、右下にあるFlash Switcherのアイコンから【Settings】をクリックします。「Firefox Plugins directory」欄でdefaultの場所が、

C:\WINDOWS\system32\Macromed\Flash

となっているかもしれません。これでは正常に動作しないので、Firefoxのプラグインの場所を指定しましょう。
▼こっちが正解!

C:\Program Files\Mozilla Firefox\plugins

以上でWindows版での設定が完了しました。ポチポチ切り替えるとブラウザが一旦おちて再度立ち上がったときに、Flash Switcherのアイコンをクリックしてバージョンが切り替わっていたら成功です。

swfobject2.xの使い方

FlashをHTMLに貼り付ける方法の中でswfobjectsというJavaScriptでswfを表示させる方法が便利です。今更な感じもしますが、ボクが使ってて気になったところ、例えば表示した時、一瞬Flashの場所が抜けて、あとから表示することによってガクガク表示したり、swfのキャッシュをクリアにするなど、個人的に問題と思ったところを補う形で紹介したいと思います。

まずはさっそくソースコードのコピペ場所を!

//swfobject.jsを呼び出す
<script type="text/javascript" src="swfobject.js"></script>
//表示させるswfコンテンツの設定
<script type="text/javascript"><!--
var flashvars = {hensu: value};
var params = {allowscriptaccess: "always"};
var attributes = {id: "myFlashContent",name: "myFlashContent"};
swfobject.embedSWF("content.swf?u=20091210", "flashContent", "400", "200", "9.0.0", "expressInstall.swf", flashvars, params,attributes);
//--></script>
//FirefoxでFlashコンテンツに触ったときに出る、
//点線(フォーカスのアウトライン)を消す。
<style type="text/css"><!--
object {outline: none;}
--></style>
//実際に表示させる場所に書くHTMLと代替コンテンツ
<div style="height:200">
	<div id="flashContent">
	<h1>代替コンテンツ</h1>
	</div>
</div>

swfobject.jsを呼び出す記述

swfobject.jsはgoogle codeからダウンロードできます。
配布元:swfobject – Project Hosting on Google Code
http://code.google.com/p/swfobject/

ページ右側に「Featured downloads」というところから、swfobjectのzipファイルをダウンロードします。zipを解凍すると「swfobject.js」がありますので、それを任意の場所にアップしてソースコード2行目の記述を、必要であればパスを換えてHTMLに書きます。

//swfobject.jsを呼び出す
<script type="text/javascript" src="swfobject.js"></script>

flashvarsの使い方

swfobject.embedSWFが実際にFlashを表示させる関数です。その関数の引数にいろいろパラメータを渡すことによっていろんなことができます。flashvarsは変数の値をswfに送るための記述です。もちろん、変数を渡す必要がなければ省略できます。

var flashvars = {hensu1: value1, hensu1: "変数2"};

この「flashvars」のなかに入れる値は、変数をActionScriptへ渡すために記述です。phpやJavaScriptなどのプログラムからFlashへ何か値を渡したいときに、

var value1 = "値だよ";
var flashvars = {hensu1: value1, hensu2: "変数2"};

このように書けば「hensu1」というグローバル変数のなかに「”値だよ”」という文字列StringがFlashにわたることになります。ActionScript内の記述では、この「hensu1」と「hensu2」に対して「var hensu1 = new Sting();」や「var hensu1 = “”;」などを書く必要はありません。というのも、変数「hensu1」に格納された値「”値だよ”」がswfにわたってからFlashが再生されるので、せっかく渡った値がリセットされてしまうことになります。Flash内で動作確認する際は「flashvars」が渡す値を仮でActionScript内の変数として書いてデバッグをし、実際にHTMLをブラウザでFlashの動作確認する際にはコメントアウトをしておきましょう。

paramsの設定方法

objectタグの中に設定するparamsが必要であれば追加して書くことが可能ですが省略もできます。FlashPlayerを投下させる意味のある「wmode」の設定が、たとえばJavaScriptで作られたドロップダウン式のメニューとFlashがかぶっている場合に、この「wmode」が良く使われると思います。しかし、wmodeをtransparentにすると日本語入力などのコンテンツに使用すると、文字が入力できないというバグがあるみたいなので使う時には注意してください。
参考サイト:wmode を transparent に設定した際の注意点
http://www.adobe.com/jp/support/kb/ts/228/ts_228635_ja-jp.html

▼pramsのソースコードサンプル

var params = {
	play: "true",
	loop: "false",
	menu: "false",
	quality: "best",
	wmode: "transparent",
	allowscriptaccess: "always"
};

attributesの使い方

objectタグにidとnameを設定する時にこのattributesを使います。いろいろ調べても情報がなく、どういった使い方をするのかよくわかりませんが、、、おそらくIE4やN3などの古いブラウザで表示するのに必要そうな雰囲気がします^-^;

var attributes = {id: "myFlashContent",name: "myFlashContent"};

swfobjectができること

1.Internet Explorer(IE)においてのActiveX コントロールのアクティブ化
 いわゆる、IEでみたときにFlashを一回クリックしないと動作しないし触れないのを回避できます。
 ActiveX コントロールのアクティブ化(Microsoft)
 http://msdn.microsoft.com/ja-jp/library/ms537508(VS.85).aspx
 アクティブコンテンツのFAQ(Adobe)

2.FlashPlayer未インストールのユーザーに対しての代替コンテンツの表示

3.再生に必要なFlashPlayerのバージョンが満たされてなかった時に、代替コンテンツを表示させるか、Express Installを用いて最新版のFlashPlayerをインストールしてもらうのを促す。
参考サイト:Express Install 適用ガイド(Adobe)
http://www.adobe.com/jp/devnet/flashplayer/articles/expressinstall.html

4.Flashコンテンツが重要なコンテンツの場合、h1タグを用いて見出しを設置できるSEO対策。

5.パラメータを変数としてswfに渡すことができる。

swfobjectの注意点

・違うドメインへページ遷移するとき
getURLするときは、paramsにallowscriptaccess: “always”を追加する必要がある。
・wmodeの注意点
文字を入力するコンテンツの場合、FlashPlayerの透過を設定するwmode: “transparent”にすると文字が入力できない。
・swfobject.embedSWFの引数に入れる順番は決まっています。
例えば、flashvarsは使わないがparamsを使いたい時には、flashvarsの場所をnullにする必要があります。
▼引数なしの場合のサンプル

var flashvars = null;
var params = {allowscriptaccess: "always"};
swfobject.embedSWF("content.swf?u=20091210", "flashContent", "400", "200", "9.0.0", "expressInstall.swf", flashvars, params);

▼同じようにexpressInstallを使わない場合

swfobject.embedSWF("content.swf?u=20091210", "flashContent", "400", "200", "9.0.0", "", flashvars, params);

おまけ設定

・outline:noneのCSSでFlashの回りに点線を消してしまう。
CSSでobjectのoutlineをnoneにしています。これはFirefoxでFlashを表示させた時、そのコンテンツに対してクリックすると周りに出る点線を消す設定です。キーボードのTabを押すと、ページ内でクリックできる箇所にフォーカスをあてているこの点線を、swfobjectが表示させるobjectタグに対して設定しています。

・Flashに指し換わるdivの上に高さを設定したdivを挟む。
フルFlashコンテンツであれば問題ありませんが、パーツで使用するFlashがswfobjectで展開される前の状態では、一瞬、上下にガクガク表示する現象があります。これはネットの環境やパソコンの性能に左右されるかもしれませんが、ここで予め高さを設定し、backgroundで色や背景画像を設定しておけば見た目に変なことが起きることがありません。

外部テキストファイルをダイナミックテキストで表示すると2回改行されている

FlashのActionScriptでLoadしたXMLファイルやテキストファイルをダイナミックテキストで表示する時に、パブリッシュすると表示されているテキストが2回改行されている時があります。テキストファイルの中身を確認したら改行は1回。その時は、そのXMLやテキストファイルの改行コードをみてください。

改行コードがCR+LFとなっている場合は、CRかLFのどちらかを選択するか、読み込んだテキストに対して、正規表現の改行を split(“\r\n”); して配列に入れてからまたおきかえt(ry って結局ややこしいので、^-^; 元のテキストデータの改行コードをCRかLFのどちらかを選択するほうをお勧めします。で、文字コードはUTF-8を選択。

ActionScriptでスペクトラムのサンプル

spectrum
※↑リンク先はポップアップします。音量に気をつけてください。
ここにあったスペクトラムのサンプルをちょこっと改造。コピペしてmp3のパスを書き換えたらとりあえず動きました。ByteArrayクラスがバイナリデータを読み取ったり操作したりすることができるみたいです。
▼参考サイト
ByteArray
http://livedocs.adobe.com/flex/3_jp/langref/flash/utils/ByteArray.html
Flash 9 Sound Spectrum!
http://theflashblog.com/?p=181
SoundMixer.computeSpectrum() stretchFactor変化デモ
http://dev.ekndesign.com/2008/02/16/soundmixercomputespectrum-stretchfactor%E5%A4%89%E5%8C%96%E3%83%87%E3%83%A2/

▼サンプルダウンロード
spectrum.zip

▼このエラーが出たときは、mp3ファイルのパスが間違っていると思います。

Error #2044: ハンドルされていない IOErrorEvent : text=Error #2032: ストリームエラー。
	at spectrum_fla::MainTimeline/frame1()

var s:Sound = new Sound();
var sc:SoundChannel;
var ba:ByteArray = new ByteArray();
var array:Array;
<p>s.load(new URLRequest("my.mp3"));
sc = s.play(0,1000);
this.addEventListener(Event.ENTER_FRAME, spectrum);
var a:Number = 0;
var al:Number = 0;
function spectrum(event:Event) {
	a = 0;
	al = 0;
	graphics.clear();
	SoundMixer.computeSpectrum(ba,true,0);
	for (var i=0; i < 180; i=i+10) {
		a = ba.readFloat();
		al = Number(a.toFixed(3));
		var num:Number = a*360;
		graphics.lineStyle(num/15,0x003333|(num << 8),al);
		graphics.drawCircle(stage.stageWidth/2,stage.stageHeight/2,i);
	}
}

Flashの周りに出る点線を消す方法

091023_01
かなり限られた条件だと思いますが、ボクが見ているFirefoxではFlsahコンテンツを触ると周りに点線が出るという現象が起きてます。その点線は、テキストリンクや画像リンクに対してクリックしたときと同じ点線が表示します。

点線が出てしまう条件の予想

・Windows XP
・Firefox(Mac版 Firefoxでは出ませんでした。)
・swfobject v2.2 でFlashを表示。

点線を消す方法

根本的解決になるかどうかはわかりませんが、swfobjectでも最終的にはobjectタグをdocument.writeしているので、objectタグに対してoutline: none;としてあげると、ボクの環境でFlashの周りの点線は消えました。

コレでいいのかなー^-^;

object{
	outline: none;
}

追記:この点線は、Firefoxでフォーカスがあたっているところに対しての点線でした。見てくれを重視するために、この点線自体を消したい場合は、全体に対してCSSでoutline:nonet;とするといいと思います。

ActionScriptのトゥイーン制御ライブラリTweenerの使い方

Tweener(トゥイーナー)とは

例えば、1秒かけてX座標に100pxゆるやかにだんだん加速しながら移動後に、”テスト”と出力する場合。

//ActionScript2
import caurina.transitions.Tweener;
Tweener.addTween([instance],{_x:100, time:1, transition:'easeOutQuint', onComplete:handler});
function handler(){
	trace(&quot;テスト&quot;);
}

TweenerはActionScript3.0とActionScript2.0で使用する事ができ、インスタンスに対して「だんだんゆっくり止まる」「どんどん勢いよく移動」「びょーんびょーん(?)」と、いろんなイージングが設定できるトウィーン制御ライブラリです。とても簡単なScriptで実現できます!

導入手順

▼まずはGoogle Codeに公開されているライブラリをダウンロード。
配布元:http://code.google.com/p/tweener/
ダウンロードしたzipファイルを解凍すると、「caurina」というフォルダができると思います。それをflaファイル直下、またはFlashの環境設定でクラスパスを追加します。これで準備は完了しました。

Tweenerの使い方サンプルを簡単に説明

import caurina.transitions.Tweener;
この1行は、Tweenerを使うために、ダウンロードしたTweenerライブラリをimportする記述です。ライブラリを管理している環境によって左右されますが、Flashの実行ファイルがある場所に「caurina」フォルダーを置いたら、「caurina」からの階層になります。
Tweener.addTween([instance],{
この1行の[instance]は、トゥイーンして動かしたいインスタンス名をいれます。[] ←括弧は必要ないので、例えば、「myInstance」というインスタンス名のムービークリップを動かすとした時の最初の1行は、
Tweener.addTween(myInstance,{
このようになります。

Tweenerの書き方、ActionScript3.0

import caurina.transitions.Tweener;
Tweener.addTween([instance],{
	x:100,
	y:100,
	scaleX:1,
	scaleY:1,
	rotation:0,
	alpha:1,
	time:1,
	delay:0,
	transition:'easeOutQuint',
	_Blur_blurX:20,
	_Blur_blurY:20,
	_Blur_quality:3,
	_color:0x330066,
	onComplete:onCompleteHandler,
	_bezier:[{x:115,y:115},{x:200,y:200},{x:285,y:285}]
});

Tweenerの書き方、ActionScript2.0

import caurina.transitions.Tweener;
Tweener.addTween([instance],{
	_x:100,
	_y:100,
	_scale:1,
	rotation:0,
	_alpha:1,
	time:1,
	delay:0,
	transition:'linear',
	_color:0xffffff,
	onComplete:onCompleteHandler,
	_bezier:[{x:115,y:115},{x:200,y:200},{x:285,y:285}]
});

トゥイーンの逆再生

import caurina.transitions.Tweener;
Tweener.removeTweens([instance],{
	_x:100,
	_y:100,
	_scale:1,
	rotation:0,
	_alpha:1,
	time:1,
	delay:0,
	transition:'linear',
	_color:0xffffff,
	onComplete:onCompleteHandler,
	_bezier:[{x:115,y:115},{x:200,y:200},{x:285,y:285}]
});

Tweenerのパラメータ

パラメータは必要に応じて足したり減らすことができます。

x:100,  //移動後のX座標
y:100,  //移動後のY座標
scaleX:1,  //X座標への大きさ
scaleY:1,  //Y座標への大きさ
rotation:0,  //回転
alpha:1,  //透明度
time:1,  //何秒かけるか
delay:0,  //トゥイーン開始までの待ち時間
transition:'easeOutQuint',  //トゥイーンのトランジション
_Blur_blurX:20,  //X座標へのぼかし
_Blur_blurY:20,  //Y座標へのぼかし
_Blur_quality:3,  //ぼかしのクオリティ
_color:0x330066,  //着色
onComplete:onCompleteHandler,  //トゥイーン後の処理
_bezier:[{x:115,y:115},{x:200,y:200},{x:285,y:285}]  //ベジェ曲線状にトゥイーンする通過点

BlurをつかってぼかすTweenを使う場合

ブラーを使ってぼかしをTweenさせる前に、フィルター用のライブラリをimportして、いったん初期化をする関数を実行します。

//▼ぼかしフィルターのimport
import caurina.transitions.properties.FilterShortcuts;
//▼ぼかしフィルターの初期化
FilterShortcuts.init();
//▼ぼかしTween
Tweener.addTween([instance],{alpha:1,
	transition:'easeOutQuint',
	time:5,
	_Blur_blurX:20,
	_Blur_blurY:20});

動きを途中でとめる場合

Tweener.pauseTweens(mc);

エラーコード

## [Tweener] Error: The property 'x' doesn't seem to be a normal object property of [object Object] or a registered special property.
例えばコレの場合だと、「The property ‘x’」プロパティのXが間違ってますよ。ということですね。これが出たときは、「_x」と「x」の記述違いでした。AS2とAS3とではアンダーバーがいるいらないがありますので、コピペしたサンプルでエラーがでたら、プロパティを見てみましょう。

トゥイーンする動きのトランジションチートシート

どういう動きでトゥイーンするか、transitionに設定する名前が載っているチートシートです。「transition」のパラメータに「easeInSine」とか「easeInOutSine」をコピペしてつかってください。