[目次|前回|次回|Reference]

タイムライン/イメージとサウンドの利用

Time-stamp: "2009-12-05 Sat 12:48 JST hig"

イメージを使おう!

ActionScript で絵を描くのは大変です. Flash IDE で絵を描くのは, それに比べれば楽とはいえ, 大変です. ここでは, カメラ, ペイントツールなど外部で用意したイメージをFlash で使うことを試しましょう.
  1. 携帯のカメラで写真を撮ってメールに添付で送る, または, Webから適当なイメージをダウンロードする(フリー, 素材, 画像などで検索しましょう) ことによって, 画像ファイルを用意します.
  2. アプリケーション>プレビューを利用して, 適当な部分を切り出し, 適当なサイズ, 解像度で保存します. 形式は JPEGまたはPNGにしましょう(他の形式でうまくいくかどうか試してみてもいいでしょう)
  3. .fla を用意します.
  4. イメージをMovieClip(の材料)として使ってみましょう.
    1. Flash → ファイル > 読み込み > ライブラリに読み込みで画像ファイルをライブラリに読み込みます.
    2. ステージにドラッグした後, 「シンボル化」します. 後はふつうのMovieClipとしてライブラリに登録したのと同じ状況になります. インスタンス名をつけてイベントハンドラを登録したり, リンケージの識別子をつけてattachMovieしたりできます.
    3. ステージに読み込みでもかまいませんが, 同一のイメージを何度も使うときはライブラリに読み込んだ方がファイルサイズの節約になります.
  5. イメージを背景として使ってみましょう.
    1. 同様にライブラリに読み込みます
    2. 1フレーム目にいることを確認して, ステージにドラッグします. この際, 新しい背景専用のレイヤーを作って, そのレイヤーにドラッグする方がいいでしょう.
    3. 別のフレームに別の画像を置くとどうなるでしょう?
    4. MovieClipの場合と同様, ステージに直接読み込む選択肢もあります.

課題

ブロック崩し零号機で, ボールと背景に画像を使おう.

サウンドを使おう! --BGM

  1. 自分で用意したサウンドファイルを使用することもできますが, ここではFlash→ウィンドウ>サンプルライブラリ>サウンドに収録されているものを使用しましょう. ひとつを選んで, ライブラリにドラッグして登録します.
  2. タイムライン上のフレームをひとつ選んで選択します
  3. プロパティのサウンドでサウンドを選択します

サウンドを使おう! --イベントサウンド

  1. 上と同様に, ライブラリにサウンドを用意します.
  2. サウンドのプロパティで, 識別子名(例としてsample_soundとしましょう)を指定して, ActionScriptに書き出します.
  3. ActionScript側からは, まず最初に一度だけ次のように用意します.
    var a:Sound = new Sound();
    a.attachSound("sample_sound");
    a.setVolume(30);
    
    そして, 何かが起きたときに再生されるように, イベントハンドラに次を書きます.
    a.start();
    

課題

ブロック崩し零号機で, BGMと反射音を入れよう.

組み込みの衝突判定

メソッドhitTestを使うと簡単に当り判定ができる場合があります. 使い方は2通り. ball1,ball2をともにMovieClipオブジェクトだとしましょう.

シンタックス1:hitTest(mc)


onEnterFrame=function(){
  if(ball1.hitTest(ball2)){
///
  }
};
ball1,ball2が衝突したかどうかの判定です. 実際には, ball1,ball2の境界ボックスの間の衝突を判定しています.

シンタックス2:hitTest(x,y,true/false)


onEnterFrame=function(){
  if(ball1.hitTest(10,20,true){
///
  }
};
ball1が(そこにオブジェクトがあるかどうかは問わず)点(x,y)と重なったかどうかの判定です. 第3引数がfalseの場合は, シンタックス1同様にball1の境界ボックスを利用して判定します. trueの場合はball1の形を真剣に考えて判定します.

課題

自分のプログラムで, 当り判定をこのメソッドをつかってやってみよう.

タイムラインとレイヤーを使おう!



button1.onRollOver =function(){
	gotoAndStop("frame_kamo");
}
button2.onRollOver =function(){
	 gotoAndStop("frame_pinga");
}
button3.onRollOver =function(){
	 getURL("http://hig3.net");
}

stop();

.fla ファイルのほうは次のように用意します.

  1. フレーム1に上のフレームアクションを書く.
  2. レイヤー1のフレーム1,2にそれぞれイメージを配置
  3. フレーム1,2にラベルの名前 frame_kamo, frame_pinga を与える.
  4. レイヤー2にボタン3個を配置, インスタンス名をbutton1,button2,button3とする
  5. レイヤー3に別のイメージを配置.
ボタンはステージの外に配置してしまうとフォーカスされなくなる. ボタンが見えないようにするには, 下層のレイヤーに置くか, _alphaを0とした上で, フォーカスの際に描かれる黄色い長方形を

button1._focusRect = false;
によって無効化するとよい.