時間の制御

イラストを描く

Illustratorでの作業

Flashにコピー＆ペースト
シンボルに変換

制御：停止

Flashは「自動再生」が基本です。

ですから、「止める」設定がされていない場合、繰り替えし再生し続けることになります。
「タイムライン」パネル「１」フレームを選択し、「アクション」パネルに記述します。

this.stop();

のみで、OKです。
「空白キーフレーム（白丸）」の上に「a」のマークがつきます。

「１」フレームに記述してあるということは、再生する瞬間に「１」フレームで停止することを意味します。
途中（１フレーム以外）で「停止」を設定する場合は、

ActionScript2.0

現在では市販本もActionScript3.0のみになっていますが、Webの勉強をするのにはActionScript2.0から始めるメリットがあります。

ActionScript2.0の記述する

以下の３種類に記述できます。

タイムライン上のフレーム
ムービークリップ
ボタン

ActionScript3.0とActionScript2.0での「イベントハンドラメソッド」では、フレームアクションのみになります。
現時点で、フレームアクションからHTML5に書き出すとイベントが正確に再現できません。（いずれ可能になると思いますが。）

ボタンを作成

ボタンシンボルを選択

ボタンシンボルの構造

アップ：マウスが外れている時
オーバー：マウスが乗っている時
ダウン：マウスが押された瞬間
ヒット：マウスの反応をうける面積

ボタンシンボルに文字を挿入

基本的に「静止テキスト」を選択します。

「_アンダースコア」がついた文字以外は「埋め込み」ボタンを押すこと。

「キーフレームの挿入」で同じ位置に複製をつくる

onハンドラ

「アクションツールボックス」で支援機能を利用する。

ボタンを選択する
「グローバル関数」→「on」ダブルクリック
「release」を選択する
「{」で改行
「this」を入力
「. ドット」を入力
「タイムラインコントロール」→「stop」ダブルクリック

この記述により、ボタンが押されると「時間軸が停止」します。

イベントハンドラ メソッド

この記述は、「クラス」を使った記述になるため、ActionScript3.0への準備といっても良いでしょう。
この例は、「車」を動かしているわけではなく、車のキャラクターがのったタイムラインを制御しています。

タイムライン「１」に、ActionScript2.0を記述します。（ボタンには記述しません。）
ボタンにインスタンス名をつけています。
「start_btn」「stop_btn」「back_btn」
記述の内容は、以下のとおりです。

ステージ全体の時間軸を止める
スタートボタンで、時間軸をタイムラインにそって動かす
ストップボタンで、時間軸を止める
バックボタンで、時間軸を「１」に戻す

 this.onLoad = function() 
 {
	this.stop();
 }
 start_btn.onRelease = function() 
 {
	play();
 }
 stop_btn.onRelease = function() 
 {
	stop();
 }
 back_btn.onRelease = function() 
 {
	gotoAndStop(1);
 }

わかりやすさとしては、授業で記述した「onハンドラ」でボタンに記述することです。
しかし、現在はその方法は利用することは少なくなっています。
（しかし、iPhoneやiPadで見せる場合には、その古い記述をHTML5形式に変換したほうが正確に再現できます。）

ボタン制御

ここでの説明は「onRelease」についてです。

ボタン制御ですが、ボタンにアクションは記述していません。
タイムライン：フレーム「１」に記述しています。

 var openButton:Button;
 var boxMovie:MovieClip;

 openButton.onRelease = function() 
 {
	boxMovie.play();
 }

もう少し正確な記述にすると

 var openButton:Button; //変数宣言var Button型
 var boxMovie:MovieClip; //変数宣言var MovieClip型

 openButton.onRelease = openBox; //ボタンが押されたときのイベントに「openBox」という名の関数を割り当て

 function openBox():Void //openBoxという名前の関数で戻り値なし
 {
	boxMovie.play(); //ムービークリップを再生
 }

しかし、ここには「停止」の記述がありません。
どこに記述してあるかというと、箱のムービークリップのタイムラインにです。
「ムービークリップ」は、そのキャラクターがどんな動きをするのかを制御できます。

箱が読み込まれた瞬間に「停止」し、ボタンが押されて動きがはじまり最後までいったところで、また「停止」するように記述されています。

なぜ下の方が正確な記述かというと、voidは、「空」という意味で、戻り値がない場合は「Void（戻り値無いですよ）を使いましょう」という規則に準じているからです。

つまり、車をボタンで制御するムービーの内容をActionScript2.0でより正確に記述しようとすると以下のようになります。

 this.onLoad = stopTime
 function stopTime(): Void 
 {
	this.stop();
 }

 var start_btn:Button;
 var stop_btn:Button;
 var back_btn:Button;

 start_btn.onRelease = startCar
 function startCar(): Void
 {
	play();
 }
 stop_btn.onRelease = stopCar
 function stopCar(): Void
 {
	stop();
 }
 back_btn.onRelease = backCar
 function backCar(): Void
 {
	gotoAndStop(1);
 }

ここでは、車の動きをムービークリップ内で動かしていないので、その部分が記述されていませんが、車の動きをムービークリップにした場合は、車の「インスタンス名」を変数宣言する必要があります。

作ってみました。ムービープレビューはすべて同じななので載せていません。
以下の場合、すべての制御を「１」フレームの記述でおこなっています。

 var start_btn:Button; //変数start_btnを宣言 Button型
 var stop_btn:Button; //変数stop_btnを宣言 Button型
 var back_btn:Button; //変数back_btnを宣言 Button型
 var car_mc:MovieClip; //変数car_mcを宣言 MovieClip型

 this.onLoad = stopTime //ムービーがロードされてた時点で処理する関数「stopTime」
 function stopTime(): Void
 {
     car_mc.stop();
 }
 start_btn.onRelease = startCar //スタートボタンが押された時点で処理する関数「startCar」
 function startCar(): Void
 {
     car_mc.play();
 }
 stop_btn.onRelease = stopCar //ストップボタンが押された時点で処理する関数「stopCar」
 function stopCar(): Void
 {
     car_mc.stop();
 }
 back_btn.onRelease = backCar //戻るボタンが押された時点で処理する関数「backCar」
 function backCar(): Void
 {
     car_mc.gotoAndStop(1);
 }

Webサイト制作科 - 作品紹介