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);
}

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」をコピペしてつかってください。

Flashのボタンアクションでマウスカーソルを矢印にする方法

ActionScript2を相変わらず使っています。制作業界はもうActionScript3が主流なんですかね。。
ボタンの上にボタンが来るようなコンテンツを作るとき、下のボタンが反応してしまう時があります。それ以外のときでも、onRollOverハンドラで動くモノの上にマウスカーソルを持ってくると、人差し指カーソルになってしまい、矢印カーソルのままにしたい時があります。

そんな時に使うのがuseHandCursorです。マウスカーソルが人差し指になってほしくない所にMovieClipをおいて、そのMovieClipに対してuseHandCursor = false;としてあげるとマウスカーソルは矢印のままになります。ただし、そのMovieClipにonRelease、onRollOverなどのイベントハンドラを設定していることが条件です。

mc.useHandCursor = false;
mc.onRollOver = function(){
 trace("ほげほげ");
}

Flash Player 10.1はiPhone以外のスマートフォンでフルに動作可能に

091008_01

アメリカのAdobeMAXで、次期FlashCS5でiPhoneアプリとしてパブリッシュできる。というニュースは、Flashクリエイターのみなさんとしては朗報だったとおもいます。

それと同時に、Flash Player ver.10.1も発表されました。このFlash Player 10.1は、パソコンとiPhone以外のスマートフォンでフルに動作可能になるみたいです。つまり、将来的には他の携帯端末もFlash LiteではなくPCと携帯と分けたFlashコンテンツ制作が可能になるのではないでしょうか。日本の場合はキャリア間同士が統一させていく動きは全く聞かないので、まだまだ先かもしれませんけどね。^-^; あと、GPUの活用で高画質な映像を提供できるということは、確実にXHTML5を意識してのことだと思います。ブラウザもAIRも携帯端末も、コンテンツが動くのは全てFlash Player。カメラや家電にも連携するようなFlash Playerになる日もそう遠くなくなってきたと思います。

Flash CS5からiPhoneアプリの制作が可能に!

091006_01

いまアメリカのほうでAdobeMAXが開催されているみたいなんですが、そこで次期Flash CS5から、iPhoneアプリへのパブリッシュ機能を搭載する。との発表があったそうです。
ClockMaker Blogさんが詳細を書いています。あとFlash Labs(英語)やCNETにも記事が載ってます。

AppleはFlashのことをそんなに好きではないかも?ということがまかり通っていますが、(Appleのサイトには全くFlashが使われてなく、動画もQuickTime)どうやら、iPhoneのSafariブラウザにFlash Playerを実装する。というより、App StoreからダウンロードできるiPhoneアプリをFlash CS5で作れる。というこですね。

セミナーの資料がアップされているみたいです。