ActionScript 3.0から見るFlash Professional CS5
必要条件
Flash Professional CS5に備わった新たな機能としては、発売前からひとつに注目が集まり、いろいろと話題をさらってしまった感があります。けれど、落着いてドキュメントを確かめていけば、派手さはなくても、表現力や使い勝手を高める機能が加わっています。その中から7つご紹介します。
01 TLFテキスト
TLFとはテキストレイアウトフレームワーク Text Layout Framework の略です。[ツール]パネルから[テキストツール]を選ぶと、[プロパティ]インスペクタのテキストエンジンとして[TLFテキスト]が選択できます 図001左図 。[TLFテキスト]はとくに[詳細な文字設定]を使うと、まるでInDesignのような細かな文字の設定が行えます 図001右図 [*1]。図001■[テキストツール]で[TLFテキスト]が選択できる
![[テキストツール]を選ぶと、[プロパティ]インスペクタで[TLFテキスト]が選択できる(左図)。[詳細な文字設定]のセクションでは、細かな文字の設定ができる(右図)。](/content/dotcom/jp/devnet/flash/articles/actionscript30_CS5/_jcr_content/articlecontentAdobe/image_10.adimg.mw.650.png/1281343549770.png "[テキストツール]を選ぶと、[プロパティ]インスペクタで[TLFテキスト]が選択できる(左図)。[詳細な文字設定]のセクションでは、細かな文字の設定ができる(右図)。")
[TLFテキスト]のインスタンスは、TLFTextFieldクラスで生成し、そのプロパティやメソッドで操作します。たとえば、これまでのTextFieldインスタンス([クラシックテキスト])をタイムラインに動的に配置して、その文字を設定するときは、つぎのようなフレームアクションを書ききました。
// フレームアクション
var my_txt:TextField = new TextField();
var my_str:String = "TLFとはテキストレイアウトフレームワーク(Text Layout Framework)の略です。";
addChild(my_txt);
my_txt.x = 10;
my_txt.y = 10;
my_txt.width = 200;
my_txt.height = 150;
my_txt.wordWrap = true;
my_txt.border = true;
my_txt.text = my_str;
これと同じテキストを[TLFテキスト]でつくるには、クラスをTextFieldからTLFTextFieldに書替えるだけです。ただし、TLFTextFieldクラスを使うには、import宣言する必要があることに注意してください。
もちろん、TextFieldクラスにはできなかった機能がTLFTextFieldクラスに加わっています。たとえば、テキストを動的に縦書きにすることです。つぎのフレームアクション(スクリプト001)は、タイムラインにTLFTextFieldインスタンスを配置して、テキストを設定します。そして、そのインスタンスをクリックするたびに、横書きと縦書きが切替わります(図002)。
スクリプト001■動的に配置したTLFTextFieldインスタンスに文字の設定を行う
// フレームアクション
import flash.events.MouseEvent;
import fl.text.TLFTextField;
import flashx.textLayout.formats.BlockProgression;
var my_txt:TLFTextField = new TLFTextField();
var my_str:String = "もちろん、TextFieldクラスにはできなかった機能がTLFTextFieldクラスに加わっています。たとえば、テキストを動的に縦書きにすることです。また、TextFieldクラスとは異なり、TLFTextFieldクラスはSpriteがスーパークラスです。ですから、マウスクリックのようなインタラクティブなイベントが受取れます。";
addChild(my_txt);
my_txt.x = 10;
my_txt.y = 10;
my_txt.width = 200;
my_txt.height = 150;
my_txt.wordWrap = true;
my_txt.border = true;
my_txt.text = my_str;
addEventListener(MouseEvent.CLICK, setRightToLeft);
function setRightToLeft(eventObject:MouseEvent):void {
my_txt.blockProgression = BlockProgression.RL;
removeEventListener(MouseEvent.CLICK, setRightToLeft);
addEventListener(MouseEvent.CLICK, setTopToBottom);
}
function setTopToBottom(eventObject:MouseEvent):void {
my_txt.blockProgression = BlockProgression.TB;
removeEventListener(MouseEvent.CLICK, setTopToBottom);
addEventListener(MouseEvent.CLICK, setRightToLeft);
}
図002■TLFTextFieldインスタンスの横書きと縦書きを動的に切替える
 |
⇄ | ![図002■TLFTextFieldインスタンスの横書きと縦書きを動的に切替える([縦書き])](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/jp/devnet/flash/articles/actionscript30_CS5/ActionScript30_CS5_004.png) |
TLFTextFieldインスタンスの横書き(左図)と縦書き(右図)が動的に切替えられる。
TLFTextFieldインスタンスの書式の設定は、TextFieldインスタンスと少し勝手が違います。まず、使うクラスはTextLayoutFormatです。そして、書式を定めたTextLayoutFormatオブジェクトは、TLFTextFieldインスタンスに直接適用するのでなく、インスタンスのTLFTextField.textFlowプロパティを取出し、そのTextFlow.hostFormatプロパティに設定します。TextFlowオブジェクトは、TLFTextFieldインスタンスに納められる文章全体を管理します。
// フレームアクションに追加
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.elements.TextFlow;
var my_fmt:TextLayoutFormat = new TextLayoutFormat();
var myTextFlow:TextFlow = my_txt.textFlow;
my_fmt.color = 0x6600FF;
my_fmt.fontSize = 12;
myTextFlow.hostFormat = my_fmt;
myTextFlow.flowComposer.updateAllControllers();
なお、TLFテキストに変更を加えた後は、TextFlow.flowComposerプロパティを参照して、IFlowComposer.updateAllControllers()メソッドによりコンテンツを更新します。前掲スクリプト001に上記の書式の設定を加えたのが、つぎに示すスクリプト002です(図003)。
スクリプト002■動的に配置したTLFTextFieldインスタンスのテキストに書式を設定する
// フレームアクション
import flash.events.MouseEvent;
import fl.text.TLFTextField;
import flashx.textLayout.formats.BlockProgression;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.elements.TextFlow;
var my_txt:TLFTextField = new TLFTextField();
var my_str:String = "TLFとはテキストレイアウトフレームワーク(Text Layout Framework)の略です。[ツール]パネルから[テキストツール]を選ぶと、[プロパティ]インスペクタのテキストエンジンとして[TLFテキスト]が選択できます。[TLFテキスト]はとくに[詳細な文字設定]を使うと、まるでInDesignのような細かな文字の設定が行えます。";
var my_fmt:TextLayoutFormat = new TextLayoutFormat();
var myTextFlow:TextFlow = my_txt.textFlow;
addChild(my_txt);
my_txt.x = 10;
my_txt.y = 10;
my_txt.width = 200;
my_txt.height = 150;
my_txt.wordWrap = true;
my_txt.border = true;
my_txt.text = my_str;
my_fmt.color = 0x6600FF;
my_fmt.fontSize = 12;
myTextFlow.hostFormat = my_fmt;
myTextFlow.flowComposer.updateAllControllers();
addEventListener(MouseEvent.CLICK, setRightToLeft);
function setRightToLeft(eventObject:MouseEvent):void {
my_txt.blockProgression = BlockProgression.RL;
removeEventListener(MouseEvent.CLICK, setRightToLeft);
addEventListener(MouseEvent.CLICK, setTopToBottom);
}
function setTopToBottom(eventObject:MouseEvent):void {
my_txt.blockProgression = BlockProgression.TB;
removeEventListener(MouseEvent.CLICK, setTopToBottom);
addEventListener(MouseEvent.CLICK, setRightToLeft);
}
図003■書式が設定されたTLFTextFieldインスタンス
[*1] [テキストツール]の[TLFテキスト]については、「trick7がオススメするFlash CS5の新機能」をご参照ください。
02 IKボーンのスプリング
Flash Player 10から備わったインバースキネマティクス(IK)のボーンに、スプリングが設定できるようになりました。Flash Professional CS5のオーサリング(ムービー作成)時におけるIKボーンのスプリングについては、英文ですが 「Exploring the Spring tool in Flash Professional CS5」に詳しい解説とサンプルが掲載されています。ActionScript 3.0でコントロールするときも、IKアーマチュアは予めムービー内に作成しておきます。
設定がわかりやすいように、ごくシンプルなつくりにしました。IKボーンをひとつつくり、名前はikBoneBarです。また、IKアーマチュアはmyArmatureとしました(図004)。スプリングは[プロパティ]インスペクタの[スプリング]セクションで設定できます。けれど、今回は[スプリング]はなしのまま、スクリプトでこの設定を行います。
図004■IKボーンを設定したIKアーマチュア
 |
![図004■ボーンを設定したアーマチュア([プロパティ]インスペクタ)](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/jp/devnet/flash/articles/actionscript30_CS5/ActionScript30_CS5_008.png) |
 |
IKボーンはひとつつくり、名前はikBoneBar。IKアーマチュアはmyArmatureとした。ここでは[スプリング]を設定していない。
なお、このIKアーマチュアは、SWF上でインタラクティブに操作できるようにします。そのためには、[プロパティ]インスペクタでIKアーマチュアの[オプション]セクションの[種類]を[実行時]に設定しておく必要があります(図005)。
図005■IKアーマチュアを[実行時]に設定
![[実行時]に設定すると、SWF上でインタラクティブに操作できる。](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/jp/devnet/flash/articles/actionscript30_CS5/ActionScript30_CS5_009.png "[実行時]に設定すると、SWF上でインタラクティブに操作できる。")
IKボーンにスプリングを設定するには、IKジョイントの参照が必要です。その手順は、Flash CS4 Professionalのときと変わりません。まず第1に、IKManager.getArmatureByNameメソッドで、IKアーマチュアの名前(myArmature)からIKArmatureインスタンスの参照を得ます。そして第2に、IKArmatureインスタンスに対してIKArmature.getBoneByName()メソッドを呼出し、IKボーンの名前(ikBoneBar)を引数に渡します。これでIKBoneの参照が得られますので、第3にIKBone.headJointまたはtailJointプロパティにより、IKJointインスタンスが取得できます[2]。
これでIKJointインスタンスにスプリングが設定できます。[プロパティ]インスペクタの[スプリング]セクションには、[強さ」と[減衰]のふたつのコントロールがありました(前掲図004)。前者はIKJoint.springStrength、後者はIKJoint.springDampingのプロパティで指定します。つぎのスクリプト003は、スプリングの強さと減衰をともに50に設定しました。
スクリプト003■IKJointインスタンスにスクリプトでスプリングを設定する
// フレームアクション
// IKアーマチュア: myArmature
// IKボーン: ikBoneBar
import fl.ik.IKManager;
import fl.ik.IKArmature;
import fl.ik.IKBone;
import fl.ik.IKJoint;
var ikNodeBar:MovieClip;
var myArmature:IKArmature = IKManager.getArmatureByName("myArmature");
var myBone:IKBone = myArmature.getBoneByName("ikBoneBar");
var myJoint:IKJoint = myBone.tailJoint;
myJoint.springStrength = 50;
myJoint.springDamping = 50;
これでスプリングが設定されました。IKアーマチュアは[実行時]の設定ですので、棒のインスタンスをマウスでドラッグして動かせば、ペンギンのインスタンスがバネあるいはゴムでつながれたように間隔を伸び縮みさせながらついてきます(図006)。
図006■マウスのドラッグでスプリングの効果が現れる
IKアーマチュアを[実行時]に設定したので、インタラクティブなアニメーションにスプリングの効果が適用される。
あまり激しく動かし過ぎると、ペンギンが振り回されて回転してしまいます。納得のいく動きにするには、IKアーマチュアをもっと細かくつくり込み、動きの制限なども加える必要があるでしょう。
[*2] インバースキネマティクスの基本については、「ボーンツールを活用したインタラクションの作成」をお読みください。
03 コードヒントとコードスニペット
スクリプトを書く環境についても、便利な機能が加わっています。まずは、[コードスニペット]からご紹介します。これは、いわばそのまま使えるスクリプトのライブラリです。[コードスニペット]パネルに、さまざまなスクリプトが用途により小分けされて納められています(図007)。
図007■[コードスニペット]パネル
たとえば、インスタンスに「アニメーション」の中の「キーボードの矢印キーで移動」を設定するとしましょう。そのときは、インスタンスに名前をつけたうえで選択して、[コードスニペット]パネルの選びたい項目をダブルクリックします。それだけで、インスタンス名も正しく設定されたフレームアクションが、[アクション]パネルに自動的に記述されます(図008)。
図008■[コードスニペット]パネルで設定されたフレームアクション
初心者は[コードスニペット]のスクリプトを学習に役立てることができるでしょう。また、中・上級者は、自分や他の人たち向けにスクリプトを[コードスニペット]に加えることもできます。
まず、[コードスニペット]に登録したいスクリプトを準備します。実際に適用するインスタンス名で置換えたい参照は、「instance_name_here」と記述しておきます(図009)。たとえば、「キーボードの矢印キーで移動」のスクリプトは、移動ピクセル数が決め打ちのため修正が面倒なので、変数に変えてみます。
図009■[コードスニペット]に登録するスクリプトを準備して選択する
そのうえで、登録したいステートメントを選んだ状態で、[コードスニペット]パネルのオプションポップアップメニューから[新規コードスニペットを作成]を選択すると、[新規コードスニペットを作成]ダイアログボックスが開きます(図010)。
図010■[新規コードスニペットを作成]ダイアログボックスを開く
![図010■[新規コードスニペットを作成]ダイアログボックスを開く(オプションメニュー)](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/jp/devnet/flash/articles/actionscript30_CS5/ActionScript30_CS5_016.png "図010■[新規コードスニペットを作成]ダイアログボックスを開く(オプションメニュー)")
![[コードスニペット]パネルのオプションポップアップメニューから[新規コードスニペットを作成]を選択。](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/jp/devnet/flash/articles/actionscript30_CS5/ActionScript30_CS5_017.png "[コードスニペット]パネルのオプションポップアップメニューから[新規コードスニペットを作成]を選択。")
まず、ダイアログボックスの[自動読込み]ボタンをクリックすると、選択しておいたステートメントが[コード]のフィールドに読込まれます(コピー&ペーストも可能です)。つぎに、[コードスニペットを適用する時に、「instance_name_here]の部分を自動的に置き換える」に、必要があればチェックをつけます。そして、[タイトル]と[ツールヒント]を入力したら[OK]ボタンをクリックします。スクリプトは[コードスニペット]パネルの「カスタム」フォルダに登録されます。
図011■[コードスニペット]パネルの「カスタム」フォルダ
つぎのコードヒントは、もちろんFlash CS4 Professional以前からある機能です。しかし、もっと気が利くようになりました。第1に、パッケージのクラスを用いると、importステートメントが自動的に入ります。とくにクラス定義をするときには、とても手間が省けるでしょう(図012)。
第2に、コンストラクタの呼出しにもコード補完が利きます。これまでは、たとえばDisplacementMapFilterを変数宣言したとき、データ型の指定にはコードヒントが使えました。しかし、そのあとコンストラクタの呼出しは長い名前を慎重にタイプするか、せいぜいデータ型からコピー&ペーストするくらいしか手がありませんでした。ところが、これからはコンストラクタもコードヒントから選べます。
図012■import宣言は自動的に挿入されてコンストラクタにもコードヒントが現れる
第3に、カスタムクラスもコードヒントに含まれるようになりました。データ型に指定できるのはもちろん、コンストラクタがコードヒントから選べます。さらに、カスタムクラスで型指定していると、カスタムクラスのプロパティやメソッドがコードヒントに含めて表示されます(図013)。
package {
public class MyClass {
public var myProperty:String;
public function MyClass() {}
public function myMethod():void {}
}
}
図013■カスタムクラスもコードヒントに含まれる
ひとつ注意しなければいけないのは、パッケージのクラスはimport宣言をしていないと、そのクラスのコードヒントが表示されないということです。これは、クラス定義でしたら問題ないでしょう。けれど、フレームアクションでは、これまで少なくとも通常の(flashパッケージの)クラスは、明示的にimportステートメントを書かなくても済みました。もっとも、前述のとおり、変数をvar宣言しさえすれば、クラスが自動的にimportされます。問題が残るとするなら、クラス定数です。
たとえば、イベントリスナーに指定するイベント定数Event.ENTER_FRAMEをタイプするとき、そのままではコードヒントが出ません。ひとつの小技は、暫定的に変数を宣言してしまうということです。以下のようにEventでデータ型指定した変数を仮に宣言すれば、improtステートメントが加えられます。これでコードヒントが出るという訳です。
var e:Event
04 エレメントを納めたVectorインスタンスの生成
Flash Player 10から、エレメントにデータ型を指定できる、いわば最適化された配列(Arrayクラス)ともいえるVectorクラスが備わりました[*3]。ただ、配列と異なり、コンストラクタでインスタンスを生成するとき、同時にエレメントを加えることはできませんでした。ところが、Flash Professional CS5から、つぎのような新たなシンタックスで、エレメントを納めたVectorインスタンスが生成できるようになりました。
new <ベース型>[エレメント0, エレメント1, …, エレメントN, ]
クラス名であるVectorの記述がなく、呼出しの括弧()も書かないという奇妙なスタイルです。最後のエレメントの後のカンマ(,)は省けます。たとえば、0から2までの整数をエレメントとするVectorインスタンスは、つぎのステートメントで生成できます。地味に便利です。
var myVector:Vector.<int> = new <int>[0, 1, 2];
ただし、このシンタックスでは、今度は引数でVectorインスタンスの長さが固定できなくなります。その指定をしたいときには、後からVector.fixedプロパティで行いましょう。
[*3] Vectorクラスおよびその配列(Arrayクラス)との比較については、「Vectorクラス」および「ActionScript 3.0におけるパフォーマンス向上のヒント」をご参照ください。
05 マイクから波形をとるMicrophone.sampleDataイベント
残る3つの項は、いずれも新たなイベントのご紹介です。ひとつ目は、Microphone.sampleDataイベントで、マイク入力からサウンドのサンプリングデータが得られます。このサンプリングデータから、サウンドの波形を描いたり録音することができるようになります。本稿では、そのイベントの扱いについて簡単にご説明します。
まず、マイク入力を受取るには、Microphone.getMicrophone()メソッドでMicrophoneインスタンスを取出します。そしてつぎに、プロパティMicrophone.rateでサンプリング周波数、Microphone.gainによりゲイン(増幅率)を定めます。そのうえで、MicrophoneインスタンスにMicrophone.sampleDataイベント(定数SampleDataEvent.SAMPLE_DATA)のリスナーを登録します。
サウンドのサンプリングデータは、リスナー関数が受取るSampleDataEventオブジェクトのSampleDataEvent.dataプロパティにバイナリデータでByteArrayオブジェクトとして納められています。
import flash.media.Microphone;
import flash.events.SampleDataEvent;
var my_mic:Microphone = Microphone.getMicrophone();
my_mic.rate = 22;
my_mic.gain = 100;
my_mic.addEventListener(SampleDataEvent.SAMPLE_DATA, drawSampleData);
function drawSampleData(eventObject:SampleDataEvent):void {
var myData:ByteArray = eventObject.data;
// 以降サンプリングデータの処理
それでは、試しにリスナー関数で、サウンドのサンプリングデータから波形をグラフのように描いてみましょう。サンプリングデータは、±1の範囲の浮動小数点数値の集まりです。したがって、読込むためのメソッドはByteArray.readFloat()になります。
ByteArrayインスタンスの総バイト数をByteArray.length、読込むデータのポインタ位置はByteArray.positionプロパティで調べ、ByteArray.bytesAvailableの返すバイト数の残りがなくなるまで、whileループで取出した値を順に処理します(スクリプト004)。
スクリプト004■マイクから受取ったサンプリングデータを波形として描く
// フレームアクション
import flash.media.Microphone;
import flash.events.SampleDataEvent;
import flash.utils.ByteArray;
import flash.display.Graphics;
var nWidth:Number = stage.stageWidth;
var nCenter:Number = stage.stageHeight / 2;
var nScale:Number = 100;
var myGraphics:Graphics = graphics;
var my_mic:Microphone = Microphone.getMicrophone();
my_mic.rate = 22;
my_mic.gain = 100;
my_mic.addEventListener(SampleDataEvent.SAMPLE_DATA, drawSampleData);
function drawSampleData(eventObject:SampleDataEvent):void {
var myData:ByteArray = eventObject.data;
myGraphics.clear();
myGraphics.lineStyle(0, 0x000000);
myGraphics.moveTo(0, nCenter);
var nPitch:Number = nWidth / myData.length;
while (myData.bytesAvailable > 0) {
var nX:Number = myData.position * nPitch;
var nY:Number = myData.readFloat() * nScale + nCenter;
myGraphics.lineTo(nX, nY);
}
}
具体的には、マイクからサンプリングデータを受取るたびに、横軸はデータのポインタ位置として、縦軸に各値を線グラフのように結んで描きます。すると、そのサウンドの特徴を表す波形になりました(図014)。もっとも、これは取出したデータをそのまま並べただけです。目的によって、このデータをさらに変換・加工して扱うことになります[*4]。
図014■マイクから受取ったサンプリングデータにより描かれた波形
[*4] AIR 2.0による解説として「AIR 2.0 Microphone API」が参考になります。
06 タッチパネル対応イベント
タッチパネルに対応したマルチタッチやジェスチャーも、インタラクティブな(InteractiveObjectクラスの)イベントとして受取れるようになりました[*5]。もちろん、扱い方はActionScript 3.0の原則どおりです。EventDispatcher.addEventListener()メソッドに目的のイベントとリスナー関数を引数として渡します。
InteractiveObjectクラスに新たに加わったマルチタッチやジェスチャーに関わるイベントを表001にまとめました。Flash Player 10.1以降では、インスタンスに対するこれらのイベントに、リスナー関数を登録して扱えます。
表001■タッチパネルに対応したInteractiveObjectクラスイベント
| InteractiveObjectクラスのイベント | イベント定数 | イベントを発生させる操作 |
|---|---|---|
| gesturePan | TransformGestureEvent.GESTURE_PAN | タッチポイントを移動 |
| gesturePressAndTap | PressAndTapGestureEvent.GESTURE_PRESS_AND_TAP | タッチしてタップ |
| gestureRotate | TransformGestureEvent.GESTURE_ROTATE | タッチして回転のジェスチャ |
| gestureSwipe | TransformGestureEvent.GESTURE_SWIPE | スワイプジェスチャ |
| gestureTwoFingerTap | GestureEvent.GESTURE_TWO_FINGER_TAP | 2箇所に同時にタッチ |
| gestureZoom | TransformGestureEvent.GESTURE_ZOOM | ズームジェスチャ |
| touchBegin | TouchEvent.TOUCH_BEGIN | タッチの開始 |
| touchEnd | TouchEvent.TOUCH_END | タッチの終了 |
| touchMove | TouchEvent.TOUCH_MOVE | タッチ位置を移動 |
| touchOut | TouchEvent.TOUCH_OUT | タッチ位置をインスタンス外に移動 |
| touchOver | TouchEvent.TOUCH_OVER | タッチ位置をインスタンス上に移動 |
| touchRollOut | TouchEvent.TOUCH_ROLL_OUT | タッチ位置をインスタンス外に移動 |
| touchRollOver | TouchEvent.TOUCH_ROLL_OVER | タッチ位置をインスタンス上に移動 |
| touchTap | TouchEvent.TOUCH_TAP | タッチしてタップ(押して離す) |
[*5] マルチタッチとジェスチャーのサポートについては、akihiro kamijo「Flash Player 10.1とマルチタッチ」をお読みください。
07 グローバルにエラーがキャッチできるUncaughtErrorEvents.uncaughtErrorイベント
Flash Player 10.1からエラーを扱うイベントとして新たにクラスUncaughtErrorEventsが備わりました。通常エラーを受取るには。以下のふたつの処理を組み入れます。しかし、それでも捉えきれなかったエラーを、不明な例外としてイベントUncaughtErrorEvents.uncaughtError(定数UncaughtErrorEvent.UNCAUGHT_ERROR)が扱います[*6]。
【エラーの検出方法】
- try..catchステートメントでエラーを切り分ける。
- エラーのイベントにリスナーを登録して処理する。
UncaughtErrorEventsオブジェクトは、Loader.uncaughtErrorEventsまたはLoaderInfo.uncaughtErrorEventsプロパティから参照を得ます。ユーザー側でエラーダイアログが出るのを避けたり、予想しなかったエラーの情報を得るためなどに用いられます。
[*6]「エラーの種類」をご参照ください。
