必要条件

この記事に必要な予備知識

リサイズ時のオブジェクト移動は2系統あります。1つは、丸や三角などの図形のムービークリップインスタンス(以後、図形MC)で、ウィンドウ幅に合わせて各オブジェクトの位置を変更させます。もう1つは、「HapHands」というロゴムービークリップインスタンス(以後、ロゴMC)で、常にウィンドウの右下に位置するようにさせます。

解説の流れとしては、まず図形MCの処理を作成し、その後にロゴMCの処理を追加します。なお、最終回ということで、今後の学習のステップとして、今まで使用を控えてきた「ライブラリ」や「カスタムクラス」についても少々触れておきましょう。

ユーザーレベル

すべて

本連載ではActionScript 3.0の初心者の方を対象に、ActionScriptを使って表現を広げるためのテクニックを紹介していきます。ActionScript 3.0初心者向けに考え方や原理を解説するという目的のため、基本的には次のようなスタイルをとります。
・フレームアクションを使う。
・ActionScriptライブラリは使わない。

第1回 スクリプトによるアニメーションの基本01
第2回 スクリプトによるアニメーションの基本02
第3回 複数のオブジェクトの制御方法
第4回 複数のオブジェクトの制御方法:スクリプトのバリエーション
第5回 複数のオブジェクトの制御方法:sin値によるアニメーションと組み合わせる
第6回 ウィンドウのリサイズに合わせてオブジェクトのレイアウトを変更する

アニメーションの処理を扱ってきたこの連載も今回で最終回となりました。最後は、前回のサンプルを踏まえて、ブラウザウィンドウのリサイズに合わせてオブジェクトのレイアウトを変更するサンプルを紹介します。

図形MCのレイアウト変更アニメーションのポイント

前回のサンプルでは、◯型のムービークリップインスタンスを複数制御しました。制御するインスタンスは全て同じムービークリップシンボルから作成したものでしたが、今回制御する図形MCは◯△□の3種類のムービークリップシンボルのインスタンスです。シンボルの種類は異なっていても処理としては全く変わりません。そのため、3種類のシンボル内に全く同じスクリプトコードを記述します。

※3種類のシンボル内に全く同じスクリプトコードを記述するというのは、メンテナンスを考えると非常に効率が悪いです。それを解消するためには、カスタムクラスを利用するといいでしょう。詳しい解説は省略していますが、カスタムクラスを利用したサンプルを用意しています(06_04.fla)。

アニメーションを開始するのは、ブラウザウィンドウのサイズが変化したときです。今回はステージサイズをブラウザウィンドウのサイズと連動して変化する設定にするので、正確にはステージサイズが変化したときとなります。ステージサイズが変化したときにはresizeイベントが発生します。resizeイベントは、サイズ変更を終えたときに1度だけ発生するのではなく、サイズ変更のドラッグ中に継続して発生します。

resizeイベントが発生するたびに、図形MCのレイアウト変更が必要になるかをチェックし、必要になった場合にのみアニメーションを開始するようにします。アニメーション実行中にレイアウト変更の要不要のチェックをし続けると、アニメーションの途中でまた新たなアニメーションを実行してしまう可能性があります。今回は処理を単純化するために、アニメーション実行中にはレイアウト変更の要不要のチェックは行わないようにします。

また、レイアウト変更の際に全てのインスタンスの位置が変わるわけではありません。移動する必要のないものはそのままで、移動する必要のあるものだけアニメーションの対象とします。以上を踏まえると、次の状態を変数で管理することになります。

  • レイアウト変更アニメーションが実行中かどうか
  • インスタンスごとにアニメーションの対象かどうか

例1:レイアウト変更アニメーション(図形MCのみ)

今回もアニメーションの管理をカスタムイベントで行います。前回の最後のサンプル(05_03.fla)と同様にカスタムイベントは AnimationEventクラスとして定義したものを使います。全体的に類似点も多いので前回の解説と合わせてご覧ください。以下、 AnimationEventクラス、図形MC内、メインタイムラインの各スクリプトコードです。まずは、図形MCのレイアウト変更アニメーションだけを 実装します。

スクリプト例1:06_01.fla AnimationEvent.asのスクリプト

package { //▼インポート import flash.events.Event; public class AnimationEvent extends Event{ //▼イベント用定数定義 public static const START:String = "start"; public static const MOVE:String = "move"; public static const MOVE_END:String = "moveEnd"; //▼MOVEイベント用sin値 public var sin:Number; public function AnimationEvent(type:String) { super(type); } } }

スクリプト例1:06_01.fla 各図形シンボル内のスクリプト

//▼プロパティ定義 var myParent:MovieClip;//親インスタンスへの参照 var pStart:Point;//現在位置 var pGoal:Point;//終了位置 var pDistans:Point;//開始位置と終了位置の距離 var moving:Boolean = false;//アニメーション中かどうか //▼処理実行 xInit();//初期化処理 //▼メソッド定義 //初期化処理 function xInit():void { //メインタイムラインをムービークリップとして取得 myParent = parent as MovieClip; //ターゲットを登録 myParent.xAddTarget(this); //初期位置調整 xSetPos(pGoal); xUpdatePosInfo(); } //目標位置設定 function xSetNewPos(p_:Point):void { if (!pGoal){ //目標位置更新 xSetGoalPosInfo(p_); }else if (!pGoal.equals(p_)){ //目標位置更新 xSetGoalPosInfo(p_); moving = true;//アニメーション用フラグ設定 myParent.xSetShapeMoving(true); }else{ moving = false;//アニメーション用フラグ解除 } } //目標位置情報設定 function xSetGoalPosInfo(p_:Point):void { pGoal = p_; } //目標位置を現在の位置に更新(移動終了後に実行) function xUpdatePosInfo():void { pStart = pGoal; } //位置設定 function xSetPos(p_:Point):void { this.x = p_.x; this.y = p_.y; } //▼カスタムイベントハンドラ //アニメーション開始時 function startHandler(eventObj:AnimationEvent):void{ if (moving){ pDistans = pGoal.subtract(pStart); } } //位置更新 function moveHandler(eventObj:AnimationEvent):void{ if (moving){ this.x = pStart.x + pDistans.x * eventObj.sin; this.y = pStart.y + pDistans.y * eventObj.sin; } } //終了時(開始位置、終了位置入れ替え) function moveEndHandler(eventObj:AnimationEvent):void { if (moving){ moving = false; xUpdatePosInfo();//目標位置を現在の位置に更新 } }

スクリプト例1:06_01.fla メインタイムラインのスクリプト

//▼定数定義 //レイアウト関連 const SHAPE_TOP:uint = 30; const SHAPE_LINE_H:uint = 120; const MARGIN_SIDE:uint = 20; const PADDING:uint = 20; //アニメーション関連 const DURATION:Number = 200;//アニメーションの長さ(ミリ秒) const START_RADIAN:Number = -Math.PI * 0.5;//開始角度(ラジアン) const END_RADIAN:Number = Math.PI * 0.5;//終了角度(ラジアン) const RANGE_RADIAN:Number = END_RADIAN - START_RADIAN;//変化範囲(ラジアン) const START_SIN:Number = Math.sin(START_RADIAN);//開始時のサイン値 const END_SIN:Number = Math.sin(END_RADIAN);//終了時のサイン値 //▼変数定義 var aTargets:Array = new Array(); var stW:Number;//ステージ幅 var stH:Number;//ステージ高 var arrShapes:Array = new Array();//図形MC管理用 var numShapes:uint;//図形MC数 var nStartTime:Number;//開始時間 var nSin:Number;//アニメーション用sin値 var shapeMoving:Boolean = false;//レイアウトアニメーション管理用 //▼処理実行 //初期化処理 xInit(); //▼メソッド定義 //初期化処理 function xInit():void { //ステージの表示関連 stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; //リサイズイベントハンドラ設定 stage.addEventListener(Event.RESIZE, resizeHandler); //図形MCを配列で管理 arrShapes.push(shape1_mc, shape2_mc); arrShapes.push(shape3_mc, shape4_mc); arrShapes.push(shape5_mc, shape6_mc); numShapes = arrShapes.length; xUpdateStageInfo();//ステージサイズ取得 xSetShapesPos();//図形MCの初期位置設定 } //ステージサイズ更新 function xUpdateStageInfo():void { stW = stage.stageWidth; stH = stage.stageHeight; } //図形MCの位置算出・設定 function xSetShapesPos():void { //最初の図形MCの位置は左上に固定 arrShapes[0].xSetNewPos(new Point(MARGIN_SIDE, SHAPE_TOP)); //1行に入る図形MC数のカウント用 var cnt:int = 1;//既に1つ入っているので1をセット //2つめ以降の位置算出 var needX:Number = MARGIN_SIDE * 2 + arrShapes[0].width; var pX:Number = MARGIN_SIDE; var pY:Number = SHAPE_TOP; for (var i:int = 1; i < numShapes; i++) { needX += PADDING + arrShapes[i].width; if (stW >= needX) { pX += PADDING + arrShapes[i - 1].width; }else{ pX = MARGIN_SIDE; pY += SHAPE_LINE_H; needX = MARGIN_SIDE * 2 + arrShapes[i].width } arrShapes[i].xSetNewPos(new Point(pX, pY)); } } //sin値を0~1に直して返す function xNormalize(sin_:Number):Number { var sinNormal:Number = (sin_ - START_SIN) / (END_SIN - START_SIN); return sinNormal; } //図形MCからのアニメーションの有無設定用 function xSetShapeMoving(b_:Boolean):void { shapeMoving = b_; } //カスタムイベント設定 function xAddTarget(targetMc:MovieClip):void { aTargets.push(targetMc);//カスタムイベントのターゲットを追加 //イベント処理 this.addEventListener(AnimationEvent.START, targetMc.startHandler); this.addEventListener(AnimationEvent.MOVE, targetMc.moveHandler); this.addEventListener(AnimationEvent.MOVE_END, targetMc.moveEndHandler); } //▼イベントハンドラ定義 //resizeイベントハンドラ function resizeHandler(evt:Event):void { xUpdateStageInfo();//ステージサイズ取得 //アニメーション中でなければアニメーションを行う必要があるかチェック if (!shapeMoving){ //目標位置更新 xSetShapesPos(); //アニメーションを行う図形MCがあればアニメーション開始 if (shapeMoving){ //アニメーション開始 nStartTime = getTimer();//開始時間取得 this.dispatchEvent(new AnimationEvent(AnimationEvent.START)); this.addEventListener(Event.ENTER_FRAME, enterFrameHandler); } } } //enterFrameイベントハンドラ function enterFrameHandler(eventObj:Event):void { var nPastTime:Number = getTimer() - nStartTime;//経過時間取得 var nTimeRate:Number = nPastTime / DURATION;//進行度を取得 if (nTimeRate > 1) nTimeRate = 1; var nCurrentRadian:Number = START_RADIAN + RANGE_RADIAN * nTimeRate; nSin = xNormalize(Math.sin(nCurrentRadian));//sin値を取得 //AnimationEvent.MOVEイベントオブジェクト生成 var moveEventObj:AnimationEvent = new AnimationEvent(AnimationEvent.MOVE); //sin値をイベントオブジェクトのプロパティとして設定 moveEventObj.sin = xNormalize(Math.sin(nCurrentRadian));//sin値を取得 this.dispatchEvent(moveEventObj); if (nTimeRate >= 1){ this.removeEventListener(Event.ENTER_FRAME, enterFrameHandler); this.dispatchEvent(new AnimationEvent(AnimationEvent.MOVE_END)); shapeMoving = false; } }

6つの図形MCのインスタンス名は「shape1_mc」~「shape6_mc」としています。図形MCの位置はそれぞれ単独で決まるのではなく、前の インスタンスの位置を基準にステージの残り幅を調べて位置を決めています。よって、シンボル内ではなくメインタイムラインの xSetShapesPos()メソッドで各図形MCの位置を算出して割り当てます。

xSetShapesPos()メソッドでは、各図形MCに目標となる座標情報を設定するだけで、即座にその位置に移動するわけで はありません。このメソッドは、コンテンツ開始時の位置設定時のほか、レイアウト変更アニメーションの目標位置設定にも使うため、移動まで実行するように はしていないのです。

レイアウトの位置の算出にはメインタイムラインに定義したレイアウト関連の定数を使用しています。各定数は次の図の値を表しています。

resizeイベントハンドラは、メインタイムラインに定義してあるresizeHandler()メソッドです。レイアウト変更アニメーション実 行中には変数shapeMovingがtrueになるようにしてあります。この変数の値によって処理を分岐し、アニメーション実行中にはレイアウト変更の 要不要のチェックは行わないようにしています。

シンボル内ではインスタンスがレイアウト変更の必要がある場合に変数movingがtrueになります。これにより、必要のあるインスタンスだけがアニメーションの処理を行います。

なお、今回のサンプルではブラウザのウィンドウサイズとコンテンツのステージサイズを合わせるために[パブリッシュ設定]の[HTML]でサイズ指定を幅、高さとも「100%」に指定しています。

例2:レイアウト変更アニメーション(図形MC+ロゴMC)

次に、右下にロゴMCを配置し、そのレイアウト変更アニメーションを追加しましょう。
ロゴMCもresizeイベントに合わせて位置を変えるという点で図形MCと類似の構造を持ちます。ただし、ステージサイズの変更にピッタリ合わせて右下に配置し続ける点が異なります。つまり、カスタムイベントで管理しているレイアウト変更アニメーションとは別構造になります。一方、ロゴシンボル内のスクリプトは、なるべく図形シンボルと同じ構造を保たせようと思います。

以下、ロゴシンボル内と、メインタイムラインのスクリプトコードです。例1との変更点について、削除部分はコメント化してグレーアウトし、追加部分は赤色表示にしてあります。

スクリプト例2:06_02.fla ロゴシンボル内のスクリプト

//▼インポート import flash.geom.Point; import flash.events.Event; import flash.display.MovieClip; //▼プロパティ定義 var myParent:MovieClip; var pStart:Point;//現在位置 var pGoal:Point;//終了位置 var pDistans:Point;//開始位置と終了位置の距離 var moving:Boolean = false;//アニメーション中 //▼処理実行 //初期化処理 xInit(); //▼メソッド定義 //初期化処理 function xInit():void { //メインタイムラインをムービークリップとして取得 myParent = parent as MovieClip; //ターゲットを登録 //myParent.xAddTarget(this); //初期位置調整 xSetPos(pGoal); xUpdatePosInfo(); } //目標位置設定 function xSetNewPos(p_:Point):void { /* if (!pGoal){ //目標位置更新 xSetGoalPosInfo(p_); }else if (!pGoal.equals(p_)){ //目標位置更新 xSetGoalPosInfo(p_); moving = true;//アニメーション用フラグ設定 myParent.xSetShapeMoving(true); }else{ moving = false;//アニメーション用フラグ解除 } */ //内容変更 if (!pGoal || !pGoal.equals(p_)){ //目標位置更新 xSetGoalPosInfo(p_); } } //目標位置情報設定 function xSetGoalPosInfo(p_:Point):void { pGoal = p_; } //目標位置を現在の位置に更新(移動終了後に実行) function xUpdatePosInfo():void { pStart = pGoal; } //位置設定 function xSetPos(p_:Point):void { this.x = p_.x; this.y = p_.y; } //▼追加メソッド //リサイズ時の移動 function xMoveAtResize():void{ xSetPos(pGoal); } /* //▼カスタムイベントハンドラ //アニメーション開始時 function startHandler(eventObj:AnimationEvent):void{ if (moving){ pDistans = pGoal.subtract(pStart); } } //位置更新 function moveHandler(eventObj:AnimationEvent):void{ if (moving){ var nSin:Number = myParent.xGetSin(); this.x = pStart.x + pDistans.x * nSin; this.y = pStart.y + pDistans.y * nSin; } } //終了時(開始位置、終了位置入れ替え) function moveEndHandler(eventObj:AnimationEvent):void { if (moving){ moving = false; xUpdatePosInfo();//目標位置を現在の位置に更新 } } */

スクリプト例2:06_02.fla メインタイムラインのスクリプト

//▼インポート import flash.display.MovieClip; import flash.events.MouseEvent; import flash.events.Event; import flash.geom.Point; import flash.display.StageAlign; import flash.display.StageScaleMode; //▼インスタンス宣言 var shape1_mc:MovieClip, shape2_mc:MovieClip; var shape3_mc:MovieClip, shape4_mc:MovieClip; var shape5_mc:MovieClip, shape6_mc:MovieClip; var logo_mc:MovieClip; //▼定数定義 //レイアウト関連 const SHAPE_TOP:uint = 30; const SHAPE_LINE_H:uint = 120; const MARGIN_SIDE:uint = 20; const PADDING:uint = 20; const MARGIN_BOTTOM:uint = 20; //アニメーション関連 const DURATION:Number = 200;//アニメーションの長さ(ミリ秒) const START_RADIAN:Number = -Math.PI * 0.5;//開始角度(ラジアン) const END_RADIAN:Number = Math.PI * 0.5;//終了角度(ラジアン) const RANGE_RADIAN:Number = END_RADIAN - START_RADIAN;//変化範囲(ラジアン) const START_SIN:Number = Math.sin(START_RADIAN);//開始時のサイン値 const END_SIN:Number = Math.sin(END_RADIAN);//終了時のサイン値 //▼変数定義 var aTargets:Array = new Array(); var stW:Number;//ステージ幅 var stH:Number;//ステージ高 var arrShapes:Array = new Array();//図形MC管理用 var numShapes:uint;//図形MC数 var nStartTime:Number;//開始時間 var nSin:Number;//アニメーション用sin値 var shapeMoving:Boolean = false;//レイアウトアニメーション管理用 //▼処理実行 //初期化処理 xInit(); //▼メソッド定義 //初期化処理 function xInit():void { //ステージの表示関連 stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; //リサイズイベントハンドラ設定 stage.addEventListener(Event.RESIZE, resizeHandler); //図形MCを配列で管理 arrShapes.push(shape1_mc, shape2_mc); arrShapes.push(shape3_mc, shape4_mc); arrShapes.push(shape5_mc, shape6_mc); numShapes = arrShapes.length; xUpdateStageInfo();//ステージサイズ取得 xSetShapesPos();//図形MCの初期位置設定 xSetLogoPos();//ロゴMCの初期位置設定 } //ステージサイズ更新 function xUpdateStageInfo():void { stW = stage.stageWidth; stH = stage.stageHeight; } //図形MCの位置算出・設定 function xSetShapesPos():void { //最初の図形MCの位置は左上に固定 arrShapes[0].xSetNewPos(new Point(MARGIN_SIDE, SHAPE_TOP)); //1行に入る図形MC数のカウント用 var cnt:int = 1;//既に1つ入っているので1をセット //2つめ以降の位置算出 var needX:Number = MARGIN_SIDE * 2 + arrShapes[0].width; var pX:Number = MARGIN_SIDE; var pY:Number = SHAPE_TOP; for (var i:int = 1; i < numShapes; i++) { needX += PADDING + arrShapes[i].width; if (stW >= needX) { pX += PADDING + arrShapes[i - 1].width; }else{ pX = MARGIN_SIDE; pY += SHAPE_LINE_H; needX = MARGIN_SIDE * 2 + arrShapes[i].width } arrShapes[i].xSetNewPos(new Point(pX, pY)); } } //ロゴMCの位置算出・設定 function xSetLogoPos():void { logo_mc.xSetNewPos(new Point(stW - MARGIN_SIDE, stH - MARGIN_BOTTOM)); } //sin値を0~1に直して返す function xNormalize(sin_:Number):Number { var sinNormal:Number = (sin_ - START_SIN) / (END_SIN - START_SIN); return sinNormal; } //図形MCからのアニメーションの有無設定用 function xSetShapeMoving(b_:Boolean):void { shapeMoving = b_; } //カスタムイベント設定 function xAddTarget(targetMc:MovieClip):void { aTargets.push(targetMc);//カスタムイベントのターゲットを追加 //イベント処理 this.addEventListener(AnimationEvent.START, targetMc.startHandler); this.addEventListener(AnimationEvent.MOVE, targetMc.moveHandler); this.addEventListener(AnimationEvent.MOVE_END, targetMc.moveEndHandler); } //▼イベントハンドラ定義 //resizeイベントハンドラ function resizeHandler(evt:Event):void { xUpdateStageInfo();//ステージサイズ取得 xSetLogoPos();//ロゴMCの位置取得 logo_mc.xMoveAtResize();//ロゴMCの位置更新 //アニメーション中でなければアニメーションを行う必要があるかチェック if (!shapeMoving){ //目標位置更新 xSetShapesPos(); //アニメーションを行う図形MCがあればアニメーション開始 if (shapeMoving){ //アニメーション開始 nStartTime = getTimer();//開始時間取得 this.dispatchEvent(new AnimationEvent(AnimationEvent.START)); this.addEventListener(Event.ENTER_FRAME, enterFrameHandler); } } } //enterFrameイベントハンドラ function enterFrameHandler(eventObj:Event):void { var nPastTime:Number = getTimer() - nStartTime;//経過時間取得 var nTimeRate:Number = nPastTime / DURATION;//進行度を取得 if (nTimeRate > 1) nTimeRate = 1; var nCurrentRadian:Number = START_RADIAN + RANGE_RADIAN * nTimeRate; nSin = xNormalize(Math.sin(nCurrentRadian));//sin値を取得 //AnimationEvent.MOVEイベントオブジェクト生成 var moveEventObj:AnimationEvent = new AnimationEvent(AnimationEvent.MOVE); //sin値をイベントオブジェクトのプロパティとして設定 moveEventObj.sin = xNormalize(Math.sin(nCurrentRadian));//sin値を取得 this.dispatchEvent(moveEventObj); if (nTimeRate >= 1){ this.removeEventListener(Event.ENTER_FRAME, enterFrameHandler); this.dispatchEvent(new AnimationEvent(AnimationEvent.MOVE_END)); shapeMoving = false; } }

前述の通りロゴMCはカスタムイベントで制御しないので、カスタムイベント処理には含めていません。また、resizeイベントに合わせて位置を変 更するので、resizeイベントハンドラ内から位置を変更するためのxMoveAtResize()メソッドを毎回呼び出す形にしています。

動作的には、予定した動きをするサンプルが完成しました。今後のために、少し発展的な内容を紹介しておきましょう。

ライブラリについて

Flashのパネルにも[ライブラリ]がありますが、ここでいう「ライブラリ」はパネルのことではありません。何らかの機能を使いやすくするために定義されたスクリプトのことで、通常、複数のカスタムクラス群として提供されています。

ライブラリは、ある程度定型化できる部分は隠して、使い勝手のよい書式を提供してくれます。例えば、トゥイーンアニメーション系で 古くから使われているライブラリに「Tweener」があります。「_mcというムービークリップインスタンスが、現在位置からx=500、y=360の 位置に1.5秒かけて等速で移動する」というアニメーションを作成する場合、Tweenerを使うと次のようなスクリプトになります。

//▼インポート import caurina.transitions.Tweener; //▼トゥイーンアニメーション実行 Tweener.addTween(_mc, {x:500, y:360, time:1.5, transition:"easeOutCubic"});

インポートでは、TweenerをFlashに認識させ使用可能にしています。sin値を使った減速アニメーションであれば、トゥイーンアニメーション実行部のtransitionの設定を次のように変更します。

//▼トゥイーンアニメーション実行 Tweener.addTween(_mc, {x:500, y:360, time:1.5, transition:"easeOutSine"});

さらに減速効果を強めたtransitionなど、transitionの種類は豊富に用意されています。

この連載ではsin値を使ったアニメーションを繰り返し使ってきました。実際に記述してみると、sin値の管理やenterFrameイベント関連の処理で案外スクリプトの量が多くなってしまいます。例2をベースに、Tweenerを使って変更したサンプル(06_03.fla)を用意しています。スクリプトを比較してみてください。アニメーション部分の処理が非常にシンプルになっているのが分かると思います。

ライブラリは非常に便利なのですが、簡単であるがために、使い方をあまり理解しないままサンプルコードをコピーして適当に値を変更して使うといったことも起こりがちです。その場合、ActionScriptのネイティブな語とライブラリで提供されている語の区別がつかないということもでてきます。そうした状況では、トラブルが発生したときにお手上げになる可能性が高いので、ある程度ActionScriptの基本的な部分を理解した上でライブラリを使うのがよいでしょう。

また、技術的な部分だけでなく、どのようなライセンスで配布されているかといった点も理解しておく必要があります。ライブラリ関連の日本のコミュニティでは「Spark project」が有名です。書籍では「ActionScript3.0ライブラリ入門」でまとまった情報を入手できます。

カスタムクラスについて

ActionScriptのサンプルコードはカスタムクラスを使うことを前提としていることが少なくありません。ライブラリも多くはカスタムクラス群として提供さているので、カスタムクラスを理解した上でライブラリを使用するといいでしょう。

カスタムクラスにはいくつかの使い方がありますが、今回はムービークリップシンボルとカスタムクラスの関連付けしたサンプル(06_04.fla)を用意しました。イメージとしては、今までシンボル内に記述していた内容をクラス定義ファイルに移す感覚です。

今回のように異なるシンボルが同じ動作をする場合、複数のシンボル内に同じスクリプトを記述するのは効率が悪いです。カスタムクラスにスクリプトを記述しておき、各シンボルとクラス定義ファイルを関連付けることで一元管理できます。

また、今回の図形MCとロゴMCのように一部共通するスクリプトを持った別シンボルがある場合には、まず共通部分をカスタムクラスとして定義しそれから派 生する形で図形MC用のカスタムクラスとロゴMC用のカスタムクラスを定義できすることもできます。サンプル(06_04.fla)は、この形で用意して あります。

シンボルとクラスの関連付けは、[ライブラリ]パネルからシンボルのプロパティを詳細表示開いてリンケージセクションで行います。

ここではカスタムクラスの詳細を学習することが目的ではないので細かい手順は省略しますが、カスタムクラスの利便性の一端を感じていただければ幸いです。