はてなブックマークに追加
Facebookでシェア
Google+でシェア
Twitterでシェア
1.1 アニメーションさせるには
イメージコントロールを使ってフォーム上に配置した画像をアニメーション表示したい思ったことはありませんか?ちなみに、ここで言うアニメーションとは、ドラえもんやサザエさんのことではなく、右の図のように絵を連続で切り替えて、画が動いているように見せることを言います。

もし、何らかの理由でイメージコントロールに表示している画を素早く切り替えたいときは、表示されている画のデータ(コントロールが読み込んだデータ)を扱うためのプロパティ「PictureData」を使って画像の切り替えを行いましょう。

こちらのサンプルファイルもご利用ください。MDBファイルと画像ファイルが含まれています。
アニメーションさせる他の方法
アニメーションさせる(画像を連続で切り替える)方法には、「あらかじめ画像の種類だけイメージコントロールを配置し、Visibleプロパティを使って表示・非表示を切り替える」方法や、「Pictureプロパティを使って、イメージコントロールに表示している画像を切り替える」といった方法があります。

しかし、コントロールをたくさん配置するとmdbファイルが重くなったり、Visibleプロパティといえども数が増えるとそれだけ処理効率が落ちたりします。また、Pictureプロパティを切り替える方法では、配置するイメージコントロールの数は少なくて済みますが、画像ファイルを毎回ディスクから読み込むため処理効率が良いわけがありません。

とにかく、どちらにも共通して言えることは画像の切り替えが遅いという点です。ただし、これらの方法が悪いというわけではありません。高速で画像を切り替えたいなら、PictureDataプロパティを使う方法が最も効率がよいというだけで、どの方法を選択するかはどんな状況で使用するかによります。
基本1/画像データを変数に保存する
アニメーションさせるには、最初に使用する全ての画像データを準備(読み込み)しておかなくてはなりません。また、その画像データは変数へ保存しておきます。

まずは、使用する変数のデータ型と形式です。画像データはPictureDataプロパティから取得しますが、このプロパティから取得したデータはバイナリ形式です。というわけで、変数にはByte型(1バイトの情報を保存できる型)の変数を使用します。また、画像はたくさんの情報が集まって一つの絵になっています。そのため、画像データを保存する変数はByte型かつ配列の変数にしておきます。このとき、画像の大きさはに関わらずデータを保存できるように、変数の宣言時に配列の要素数は指定しません

変数を準備したら、PictureDataから次のように画像データを保存します。この例では、最初に保存する画像を読み込み(Pictureプロパティへ画像ファイルのパスとファイル名を設定)した後、PictureDataから画像データを変数に取り込んでいます。もちろん、事前にカラのイメージコントロールをフォーム上に配置しておきましょう。


Option Compare Database
Option Explicit

'変数の準備(Byte型で配列、ただし要素数は未指定)
Dim bytPictData() As Byte

Private Sub コマンド1_Click()

    'イメージコントロールに画像を設定
    '画像はMDBファイルと同じフォルダに配置
    Me.イメージ1.Picture = Application.CurrentProject.Path & "\pict01.bmp"

    '設定した画像データを変数へ取り込み
    bytPictData = Me.イメージ1.PictureData

End Sub
 ※このコードは、ボタンのクリックイベントへ記述した例です
基本2/画像データを番号指定で扱えるようにする
「基本1/画像データを変数に保存する」のコードを実行すると、変数bytPictDataに画像データが保存されますが、実はこのままではとても扱いにくいのです。というのも、アニメーションさせるときは複数の画像を使い、さらにそれらの画像(画像データ)を1番目の画像、2番目の画像…のように、番号で指定できたほうが便利だからです。

画像を番号で指定するときは、配列の変数を使って要素数を指定する方法が思い浮かびますが、変数bytPictDataは既に配列で、なによりByte型という各要素に1バイトしか保存できない変数です。しかし、どうしても画像を番号で指定できるようにしたいのです。そこで、bytPictDataを構造体の中へ入れてしまいます。もちろん、画像データを保存する変数の型には構造体を指定し、さらに配列にして要素数は扱う画像の数を指定します。

次の例では、構造体を使って4種類の画像を番号で指定できるようにしています。ちなみに、実際に画像データが保存されるのは、構造体のメンバPictDataの中です。

Option Compare Database
Option Explicit

'画像データを保存するための構造体
Private Type PictData
    Data() As Byte '←実際に画像データを保存する場所はココ
End Type

'変数の型には構造体、配列の要素数は扱う画像の数
Dim typPictData(1 To 4) As PictData

Private Sub コマンド1_Click()

    '1番目の画像を変数へ保存
    '画像はMDBファイルと同じフォルダに配置(以下同じ)
    Me.イメージ1.Picture = Application.CurrentProject.Path & "\pict01.bmp"
    typPictData(1).Data = Me.イメージ1.PictureData

    '2番目の画像を変数へ保存
    Me.イメージ1.Picture = Application.CurrentProject.Path & "\pict02.bmp"
    typPictData(2).Data = Me.イメージ1.PictureData

    '3番目の画像を変数へ保存
    Me.イメージ1.Picture = Application.CurrentProject.Path & "\pict03.bmp"
    typPictData(3).Data = Me.イメージ1.PictureData

    '4番目の画像を変数へ保存
    Me.イメージ1.Picture = Application.CurrentProject.Path & "\pict04.bmp"
    typPictData(4).Data = Me.イメージ1.PictureData

End Sub
 ※このコードは、ボタンのクリックイベントへ記述した例です
アニメーションさせてみよう
画像データを変数に保存したら、あとはデタラメな間隔なり、一定間隔なりでPictureDataプロパティへ必要な画像データを設定すればOKです。ただし、このときにフォームの再表示を行うのを忘れないで下さい。フォームの再表示をするには、DoEventsで溜まったイベントを実行するか、フォームのRepaintメソッドを実行する方法があります。フォームの書き換えだけを行いたいのであれば、Refreshメソッドを使う方が高速です。

次の例では、フォーム上のボタンを押したときに、画像を変数へ保存し、その後10秒間アニメーションさせています。

ちなみに、一定間隔で画像の切り替え(アニメーション)るにはタイマーイベントを使うと簡単ですが、ここではあえて使っていません。タイマーイベントと似た処理を強引に行っています。というのも、ゲームなんかを造るときは便利なんですよ、こっちの方法が…(爆)

Option Compare Database
Option Explicit

'画像データを保存するための構造体
Private Type PictData
    Data() As Byte '←実際に画像データを保存する場所はココ
End Type

'変数の型には構造体、配列の要素数は扱う画像の数
Dim typPictData(1 To 4) As PictData

Private Sub コマンド1_Click()

    Dim lngBeforeTime As Long '処理時刻の保存用
    Dim lngCount      As Long '処理回数制御用
    Dim i             As Long '画像番号制御用

    '1番目の画像を変数へ保存
    '画像はMDBファイルと同じフォルダに配置(以下同じ)
    Me.イメージ1.Picture = Application.CurrentProject.Path & "\pict01.bmp"
    typPictData(1).Data = Me.イメージ1.PictureData

    '2番目の画像を変数へ保存
    Me.イメージ1.Picture = Application.CurrentProject.Path & "\pict02.bmp"
    typPictData(2).Data = Me.イメージ1.PictureData

    '3番目の画像を変数へ保存
    Me.イメージ1.Picture = Application.CurrentProject.Path & "\pict03.bmp"
    typPictData(3).Data = Me.イメージ1.PictureData

    '4番目の画像を変数へ保存
    Me.イメージ1.Picture = Application.CurrentProject.Path & "\pict04.bmp"
    typPictData(4).Data = Me.イメージ1.PictureData

    i = 1
    lngCount = 0
    lngBeforeTime = 0

    'lngCountは1/100毎に1ずつカウントアップするため100が約10秒
    Do Until lngCount = 100

       '前回処理を行ったときから1/10秒経過したら処理を行う
       If GetTickCount - lngBeforeTime >= 100 Then

          Me.イメージ1.PictureData = typPictData(i).Data
          Me.Repaint

          '画像番号の更新。4を超えたら1から
          i = i + 1
          If i > 4 Then
             i = 1
          End If

          '回数の更新
          lngCount = lngCount + 1

          '処理時刻の保存
          lngBeforeTime = GetTickCount()

       End If

    Loop

End Sub
 ※エクセルスマイルの「5.1 速度調整」もどうぞ。速度調節の理屈が書いてあります。


Copyright(C) 1999-2015 結城圭介(Ver.3.51) All rights reserved