時間の制御とボタンの作成

イラストを描く

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

制御:停止

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

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


ActionScript2.0では、

this.stop();


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


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



ActionScript2.0

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

ActionScript2.0の記述する

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


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

ボタンを作成

  • 挿入メニュー→「新規シンボル作成」



ボタンシンボルを選択

  


ボタンシンボルの構造

  

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


ボタンシンボルに文字を挿入
「静止テキスト」を選択します。

  • 「_アンダースコア」がついた文字がもっともデータが軽くなります
  • それ以外の文字を選択する場合は、「埋め込み」ボタンを押します
  • オブジェクトの「基点」を中心に合わせるには、「カット&ペースト」を使います

  • 「キーフレームの挿入」で同じ位置に複製をつくる
  • 文字色を変更する



同様に「ダウン」にも「キーフレームの挿入」します。

  • 「ヒット」には、文字の上に長方形を描画します



※「ヒット」のエリアは、CSSでいう「display:block」にあたります。


ボタンの複製

  • 「スタート」ボタンを複製し「ストップ」「バック」を作成します



  • 「ストップ」ボタンであることを確認してから文字を打ち替えます



ボタンの配置

  • 「ボタン」レイヤーを作成
  • ステージにボタンを配置
  • 「整列パネル」を使って、バランスを整えます



onハンドラ

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


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



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


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

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


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

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


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


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