Flash制作講座フラッシュ制作講習

FLASH制作からActionScriptによるFlashコンテンツ制作のためのフラッシュ制作講座

隠し文字(制御文字)の表示AS3.0

ActionScriptソースコード内の制御文字、いわゆる隠し文字を表示させる方法。


スペース、タブ、改行などの文字は、ActionScriptソースコードを編集するアクションウィンドウでは
非表示になっています。


ActionScriptでは当然のようにストリング値の一部ではない2バイトのスペースは、コンパイルエラーを引き起こすため、それらの制御文字を表示させるための、隠し文字表示機能でそれらを削除します。


■[アクション]パネルの右上隅にあるオプションメニュー から [隠し文字/制御文字] を選択します。

■Ctrl+Shift+8 (Windows) または Command+Shift+8 (Macintosh) を押します。



隠し文字の表示には、次のシンボルが使用されます。


○1バイトのスペース==『 . 』

○2バイトのスペース==『 l 』

○Tab==『 >> 』

○改行==『 ¶ 』


ほとんどエラーの原因はシンタックスエラーによるものなので、実用では使用したことがありませんでした。



trace関数とEnterFrameでパブリッシュプレビューでの注意点

trace関数では、取得値などをリアルタイムに出力ウィンドウに表示させることで、デバッグや実際の値を確認するのに重宝するが、
addEventListenerでEnterFrameイベントのパブリッシュプレビューをした際には、通常のブラウザでのパブリッシュに比べて、メモリの消費が極端に大きくなった。


パブリックプレビューでEnterFrameイベントでtrace関数を実行し続けると、永遠に出力ウィンドウへ値が出力され続けるからだろうか。


通常、removeEventListnerで無効にする必要があるが、常時定数での動きのあるflashコンテンツの場合は、そのままイベント関数が実行されているケースも多い。


ただし、ブラウザやプレイヤー単体でプレビューする際と、パブリックプレビューではメモリの消費され方が違うのか、パブリックプレビュー時にEnterFrameイベントが発生し続けた場合、表示や動きにコマ落ちや処理速度の低下がみられるの対し、ブラウザなどで表示した場合、割合正常に動き続けた。


最初、ActionScript3.0自体の記述に誤りがあるのかなどといろいろ調べる羽目になり、パブリックプレビューでのtrace関数は注意が必要かもしれない。

Flash Player10.2-β版公開

2010年12月、アメリカのAdobe Systemsは『Flash Player 10.2』β版リリース発表した。



『Flash Player 10.2』β版のウリは、パフォーマンス向上技術である『Stage Video』という新しいテクノロジーの採用にある。



『Stage Video』技術というのは、色の変換やビットマップイメージの転送、スケールサイズの変換といったレンダリングのビデオ部分に関する全行程を、ハードウェアアクセラレーションを活用して高速化を図るAPI



具体的には動画再生時のCPU負荷を大幅に軽減して、Flashコンテンツでの動画再生時の負荷をよりスムーズにすることが可能となるようだ。



Flash Player 10.2βのダウンロードは米Adobe社サイトからできるようだ



日本Adobe Flash Player 最新版は、Adobe Flash Player 10.1.102.64。

ActionScriptライブラリとは

Flash制作において、もはやActionScriptをどのぐらい使いこなせるかがFlashコンテンツの表現や機能性に直結するといえるぐらい密接になっています。


ASファイルに代表されるような、外部スクリプト記述ファイルをインクルードして、タイムラインでの作業は一切せず、ソースコードの編集だけで、描写方法や機能をほとんど制御できます。


完全にプログラミングとなっていて、身近にFlashアニメーションを楽しむといった場合は、クラスやメソッドなどのいわゆるシステム開発の基礎知識がひつようにもなります。



もちろん、複雑な機能や緻密な動作を期待した場合、その記述内容は何百ラインや何千ラインの記述が必要になってきます。



もともとプログラム記述をほとんどすることなく、簡単にアニメーションのWEBリッチコンテンツを作成することが始まりだったアプリケーションであるFlashが、結局、複雑なプログラムソースが必要になるのは本末転倒といえるかもしれません。



しかし、プログラミングにおける恩恵も同時に受けることができます。


それが、"ActionScriptライブラリ"です。



ActionScriptの機能や描写方法のさまざまなソースコードオープンソース化されています。


ライブラリとはプログラミング用語的にはプロシージャ群(関数の集まり)といったニュアンスになると思われますが、WEBデザイン的な見方でいえば、プログラムのテンプレート集というと理解しやすいでしょうか。



JavaScriptの場合ではAPI(Application Programing Interface)『jQuery』などが似ているでしょうか。



とにかく、ソースコードをフルスクラッチで開発していくのは、プログラムの知識や数ヵ月の制作期間がかかる場合がありますが、
ライブラリの利用をするだけで、必要な時にライブラリから機能を呼び出すだけで、多くのクラスがコーディングなしで利用できます。




有名なActionScriptライブラリは『Papervision3(ペーパーヴィジョン)』や、『Tweener』などがあります。基本的にはフォルダごとswfファイル参照する場所に配置するだけですが、利用するにおいてはそれなりにActionScript以外のプログラミングの知識があれば、すぐに使いこなせるかもしれません。



ほかにも、機能別にさまざまなActionScriptライブラリが配布されていたりします。



特にユニークな動きが期待できるのが、『Box2DFlashAS3』で、リバウンドや落下、減速や加速などの微妙な物理計算のソースが集まっていて、Box2DFlashAS3ライブラリを利用したフルFlashコンテンツやゲームコンテンツなど、実にさまざまなFlashコンテンツが公開されています。



はじめてActionScriptライブラリを使ってみようとする人は、外部ASファイルのルールやpackageやclassファイルの記述方法やルールを理解しておくとよいかもしれません。



またしっかりと理解していきたい場合の基本的な考え方は、プログラミング言語Javaなどに類似するところがあり、継承(extends)などの見慣れない記述がいくつかでてきますが、Javaphpなどの解説ドキュメントからでも基礎的なことは理解できるでしょう。



とにかくActionScriptのライブラリを使いこなすことができれば、多くの制作時間を節約して多彩な機能や描写を容易に利用することが可能です。




【関連サイト】

Papervision3D blog
http://blog.papervision3d.org/

Papervision3D.org
http://www.papervision3d.org/

PV3D Developers Blog
http://dev.papervision3d.org/

tweener - Project Hosting on Google Code
http://code.google.com/p/tweener/

■AS3 Flash Physics Engine Box2DFlashAS3
http://box2dflash.sourceforge.net/

MouseEventフォーカスMC名取得-Flash/AS3.0

ループ処理などで配置したMCやリンケージにMouseEventを取得する場合、同じようにイベントリスナーを繰り返し処理で記述するだけです。



ただイベントリスナーを受け取ったMC毎の処理関数も、それぞれの処理を用意する場合があります。



それには、MouseEventフォーカスの対象MCを判別する必要があり、MouseEventオブジェクトのevent.targetとevent.currentTargetが便利です。




【記述例:マウスイベント対象となるMCを指定、名前を取得する】

parent_MC.name = "親MC";
parent_MC.child_MC.name = "子MC";

parent_MC.addEventListener(MouseEvent.MOUSE_OVER,mOver);

function mOver(eventObject:MouseEvent):void {
trace("target="+eventObject.target.name);
trace("currentTarget="+eventObject.currentTarget.name);
}



上のような例では、child_MCにマウスオーバーした場合、targetは"子MC"になりますが、currentTargetは"親MC"がトレースされます。




なのでparent_MCでのマウスイベント処理を指定したい場合は、eventObject.currentTargetを指定することで、意図するイベントを発生させることが可能なようです。

XMLパース簡単文字列操作-Flash/AS3.0

XMLデータを取得した後に、データ型を変更して、抽出した文字列から特定の文字を削除、置き換えするための簡易的な方法です。


もっと高度な方法があるかもしれませんが、値の取得だけをしたいという文字列からの抽出や削除、文字の置き換え手段です。


replace関数を使用しますが、データ型がXMLだとそのまま強制変換できませんので、データ型を変換してから特定文字列の削除をします。


【記述例:XMLデータ型をString(文字列型)に変換して特定文字を削除する方法】

var whX:String;

whX=String(xml.channel.item.content);
//xml.channel.item.contentには"x=25000"が格納されているものとします。

whX=whX[i].replace(/x=/g,"");

trace(whX);//出力結果は"25000"が入ります。

whX=whX[i].replace(/000/g,"k");
//さらに上記述を続けると

trace(whX);//出力結果は"25k"が入ります。

XMLパースデータの文字列の簡単な操作や、文字の削除、置き換えについてはこのような方法でも値を取得できました。

外部画像ループMC作成-Flash/AS3.0

今回は、外部画像を読み込んでMCをstageに配置する流れをループ処理で指定した回数実行する記述です。


実際のコンテンツはブログから出力されるRSSフィードから記事数のlengthを取得して、記事の数だけ実行するために作成します、
RSSからのXMLパースは前エントリーがあるので省略しています。


MCをfor文などのループ処理で作成する場合、変数のみではなく必ず配列で作成する必要があります。


【記述例】
var whCnt:Number = 5;
var mcArr:Array = new Array();//MC配列を用意
var areaArr:Array = new Array();//親MC配列を用意

var mCnt:Number = new Number();

for (var i:Number = 0; i < whCnt; i++) {
var herMc:MovieClip = new MovieClip();
herMc.name="herMc"+i;
mcArr[i]=herMc;
var loadA:Loader = new Loader();
var url_thum:URLRequest=new URLRequest(whTHUM[i]);//whTHUM配列にはすでに画像パスが入っている
loadA.load(url_thum);
mcArr[i].x=50*i;
mcArr[i].y=0*i;
mcArr[i].addChildAt(loadA,0);
mCnt= i;
var areaM:MovieClip = new MovieClip();
areaM = "areaM"+i;
areaArr[i] = areaM;
areaArr[i].addChild(mcArr[i]);
}
loadA.contentLoaderInfo.addEventListener(Event.COMPLETE,loadComp);
function loadComp(event:Event):void {
trace("カウント"+mCnt);
for (var i:Number = 0; i < whCnt; i++) {
trace(mcArr[i]);
mcArr[i].width=250;
mcArr[i].height=250;
}
}

【簡単な解説】
複数のイメージ画像をmc:herMcにループしてロードし、そのmc:herMcを別々の親MCにそれぞれ配置する記述です。



ここで、一見無意味に見えるcontentLoaderInfo.addEventListenerのイベントリスナーですが、このイベントがないとmcの縦横サイズのプロパティが取得できないので、
X軸やY軸の指定ができても、widthやheightの指定をするときは必ず必要になります。


またcontentLoaderInfo.addEventListenerはすべての処理が完了した時点でコールされるので、配列でのコントロールが出来ないです。


注意点としては、function loadComp()からの横縦サイズの指定のときに、arrArr[i]からのパス指定ではなく、mcArr[i]パスを直接指定します。


もっと記述方法はシンプルにできるかもしれません。