読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

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

イラストを描く

  • 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」ダブルクリック



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

イベントハンドラメソッド
  this.onLoad = function() 
   {
	this.stop();
   }
  start_btn.onRelease = function() 
   {
	play();
   }
  stop_btn.onRelease = function() 
   {
	stop();
   }
  back_btn.onRelease = function() 
   {
	gotoAndStop(1);
   }