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

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に書き出すとイベントが正確に再現できません。(いずれ可能になると思いますが。)

ボタンを作成


ボタンシンボルを選択

  


ボタンシンボルの構造

  

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


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


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

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

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形式に変換したほうが正確に再現できます。)

ボタン制御

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


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

 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);
 }


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


作ってみました。ムービープレビューはすべて同じななので載せていません。
以下の場合、すべての制御を「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);
 }

広告を非表示にする