§3 アニメーション 1 vb2005 プログラミング実習 [Menu]
 back next 

 画像データを切り替えて表示するアニメーションのプログラムについて学習する。
 オブジェクト:ピクチャボックス(PictureBox)、タイマー(Timer)、カウンタ(NumericUpDown)

【1】 プログラム作成の準備

(1) Windowsアプリケーションを作成するためのプロジェクトを作成する。
 プロジェクト名は「アニメーション」とする。

(2) フォーム(Form1)のプロパティを次のように設定する。

Size 800, 600
Text アニメーション

(3) プログラムを保存する。

 [ファイル(F)] → [すべてを保存(L)]

(4) 画像データを用意する。(サイズ50×50で作成しても良い。)
 画像データファイルright1.gifとright2.gifを適当なフォルダにコピーする。(テキストでは、画像データをマイドキュメントに保存する。)


right1.gif

right2.gif
DownLoad
 right1.gif  right2.gif
右クリックで[対象をファイルに保存(A)...]を選択する。

 

【2】 画像データの配置

(5) PictureBoxオブジェクトをフォーム配置する。
 ツールボックスの[PictureBox]をダブルクリックする。

(6) PictureBoxオブジェクトのプロパティを次のように設定する。

(Name) MainPict
Location 10, 50

(7) MainPict(オブジェクト)に画像データを設定する。

@ プロパティウィンドウのImageプロパティをクリックして、右端に現れる ... ボタンをクリックする。

結果 リソースの選択のダイアログが開く。

A リソースの選択のダイアログの[プロジェクト リソース ファイル(P)](@)にチェックを入れ、[インポート(M)]ボタン(A)をクリックする。

結果 開くのダイアログが開く。

B 開くのダイアログで画像データファイルright1.gifとright2.gifを選択して、[開く(O)]ボタンをクリックする。

結果 開くのダイアログが閉じて、リソースの選択のダイアログに戻る。

C リソースの選択のダイアログの[OK]ボタン(B)をクリックして、ダイアログを閉じる。

結果 MainPictに画像が表示される。

リソース登録

ソリューションエクスプローラ リソースとして登録された画像データファイルは、ソリューションエクスプローラで確認することができる。
 登録したりソースを利用する方法は、次に示す。
 このリソースとして登録した画像データファイルは、次のフォルダに保存される。

・・・\アニメーション\アニメーション\Resources\

(8) MainPictのサイズを画像に合わせる。
 ScaleModeプロパティをNormalからAutoSizeに変更する。
 AutoSizeに設定すると、画像ファイルの大きさに合わせてピクチャボックスの大きさが設定される。

 ScaleModeプロパティをStretchImage、Zoom、CenterImageにしたときの状態は次の図の通りである。
 状況に応じて使い分けると良い。

 

【3】 2つの画像データの切り替え(1)

 ボタンのクリックで画像を切り替える。

(9) ボタンを1つ追加し、プロパティを次のように設定する。

(Name) AnimButton
Location 10, 10
Text アニメ

(10) [アニメ](AnimButton)のクリックイベントに対応するメソッドを次のように作成する。

    Private Sub AnimButton_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles AnimButton.Click
        Static number As Integer = 1                '変数numberの宣言
        If number = 0 Then                                 '変数numberが0のときは
            MainPict.Image = My.Resources.right1          'right1を表示し
        ElseIf number = 1 Then                            '変数numberが1のときは
            MainPict.Image = My.Resources.right2          'right2を表示する
        End If
        number = number + 1        '変数numberに1を加算
        If number = 2 Then         '変数numberが2のときは
            number = 0                   '変数numberを0にする
        End If
    End Sub

 通常、変数宣言には"Dim"を使って「Dim number As Integer」と書くが、ここでは"static"を使って「Static number As Integer」と書いている。違いは次の通りである。

  Dim で宣言 Static で宣言
変数の有効期間 メソッドが実行中のときだけ プログラムが終了するまで

 すなわち、"Dim"で宣言するとメソッドが実行されるたびに変数が用意(初期化)され、メソッドの終了で変数は消える。"Static"で宣言すると最初にメソッドが実行されたときに変数が用意され、プログラムが終了するまで消えない。
 整数(Integer)の変数は0で初期化されるが、「Static number As Integer = 1」として、1で初期化している。

 リソースに登録した画像データは、「My.Resources.名前」で利用することができる。
 リソースに登録するデータは、画像データに限定はしない。また、リソースはプログラムの中で共通して利用することができる。

(11) プログラムを実行する。[アニメ]ボタンをクリックする。

結果 クリックするたびに画像が切り替わる。


 プログラムの1行が長いとき、記号 "_"(アンダーライン)を使って、次の行と連結することができる。例えば、メソッドの定義部(1行目)は長いが、次のように記述することができる。

  Private Sub AnimButton_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles AnimButton.Click
          ↓↓↓
  Private Sub AnimButton_Click(ByVal sender As System.Object, _
  ByVal e As System.EventArgs) Handles AnimButton.Click

 

【4】 2つの画像データの切り替え(2)

 ボタンで画像を切り替えるのでは大変である。設定した時間で画像が切り替わるようにする。

(12) タイマー(Timer1)を配置する。
 ツールボックスのコンポーネントから[Timer]をダブルクリックする。
 Intervalプロパティを300に設定する。このプロパティはイベントが発生する間隔で、単位はミリ秒である(300ミリ秒=0.3秒)。

(13) タイマー(Timer1)のイベントに対応するメソッドを次のように作成する。

    Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
        Static number As Integer = 1
        If number = 0 Then
            MainPict.Image = My.Resources.right1
        ElseIf number = 1 Then
            MainPict.Image = My.Resources.right2
        End If
        number = number + 1
        If number = 2 Then
            number = 0
        End If
    End Sub
 AnimButton_Clickメソッドのプログラムと同じなので、コピーすればよい。

(14) AnimButton_Clickメソッドを次のように変更する。

    Private Sub AnimButton_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles AnimButton.Click
        If Timer1.Enabled = True Then            'EnabledプロパティがTrueのとき
            Timer1.Enabled = False                     'EnabledプロパティをFalseにし
        ElseIf Timer1.Enabled = False Then     'EnabledプロパティがFalseのとき
            Timer1.Enabled = True                       'EnabledプロパティがTrueにする
        End If
    End Sub
Enabledプロパティは、タイマーが動作する(True)、動作しない(False)をデータとして持つ。

(15) プログラムを実行する。[アニメ]ボタンをクリックする。

結果 クリックするとアニメーションが始まる。もう一度クリックするとアニメーションが停止する。クリックするたびに開始と停止を繰り返す。



 back next 
 §3 アニメーション 1 vb2005 Copyright©2007 Hiroshi Masuda 
inserted by FC2 system