Excel VBAで絵を動かすで基本がわかり、更に興味が湧いた方、今度は少し凝った絵が現れる Excelアニメーション マクロ（プログラム）を作ってみませんか？ 単なる線や形でに比べ、絵が表示できるようにになると面白味がグッと上がります。
「絵が浮き出る」 Excelアニメーション の実際の動画
「絵が浮き出る」 Excelアニメーションの実際の動画はこちらです！
左上から右下に干支の馬の絵を表示した後、下段で左から右に一気に文字を出すようにしています。プログラムとてしては意外に単純です！では始めましょう。
絵の準備
実は絵の準備の方が時間がかかったりします（なので、ちょっと覚悟を）。絵は自分の好きなものを選んでください。自作でもフリーの素材から持ってくるのでもよいです。
【ステップ1】Excelのマス目を用意
絵を Excel に描き込む際は、下の図のように、マス（セル）のサイズが正方形に揃えておいた方が絵を描きやすいです。
ただ、より精密な絵にしたい場合は、解像度を上げるのと同様、これらのセルのサイズをできるだけ小さくする必要があります。もちろん、自分の手操作でできるのですが、意外に面倒だったりします。
そこで、一瞬でこのセルサイズを調整するマクロを用意しましたので、是非お使いください。
セルの縦、横のサイズはマクロの中で数字を変えれば簡単に調整できます。
これができましたら、用意した絵をエクセルに移していきます。絵を横にして、Excelマス目を自分で塗っていくのでもいいのですが、絵の創作自体にはあまり興味がない人は次ような方法を使ってみてください。
【ステップ2】Excelシートに絵を貼る
用意した絵を、ペイント系のアプリケーションソフトウェアで開いておきます。下図は、Windows標準で付いているペイント
で開いたものです。
この絵はPNG形式になっているので、馬の周りは格子状になっています。今回のドット絵の場合は、他の形式でも大丈夫です。絵が開けましたら、メニューから「コピー」を選んで、絵全体をクリップボードにコピーしておきます。
Excelに戻って、コピーした絵を貼り付け（ペースト）ましょう。こんな感じです。
【ステップ3】絵をトレースして、セルを塗っていく
トレース画はご存じでしょうか？絵を下に置き、薄目の紙を重ねて、下から光を当てて絵をなぞっていく技法のことです。
Excelドット絵でも似た感じでこの技法が使えます。絵に沿ってセルに色を付けて（塗っていく）いけばよいのです。ただ貼り付けた絵がExcelシートより上になっている状態なので、そのままだと作業が大変やりにくい。そこで、貼り付けた絵を次のように細工してみます。
- 貼り付けた絵を右クリックし、「図の書式設定」を選択します。
- 画面右側に、「図の書式設定」設定画面がでます。上部の４つのアイコンの右の図
をクリックします。 - 図の透明度のメニューを開けます。透明度を設定するバー
があります。 - これを右にずらしてみましょう。
貼った絵が薄くなっていますね。この状態で、セルを塗りつぶしていけば、元絵の形できれいにトレースすることができます。マウスでセルを選ぶより、矢印キーを使ってセル範囲を指定して、コピー＆ペースト（Ctrl-C、Ctrl-V）を繰り返していく方が楽なのでお勧めです。
こんな感じに仕上がりました。
細かいところは、ズームインをして行うといいですよ。また、曲線はどうしてもセルのサイズが大きいとカクカクしてしまいますので、どこまで精度を上げたいか考えてサイズを決めるとよいと思います。
【ステップ4】塗りつぶしたセルに数字を一括で入れる
絵が仕上がったところで、いよいよVBAマクロでこの絵を浮き出す、というプログラム作りに入りたいところですが、その前に、より制御しやすくするために、黒く塗りつぶしたセルが、それとわかるように、セル内に数字を入れるようにしておきます。
といっても、手で逐一、「1」と打ち込むのでは気が遠くなりそうです。大丈夫です。一括でセットできる簡単な方法があります。（ただ、失敗したときに備えて、一度今の状態でファイルを保存、コピーをとっておきましょう。）
Ctrl-Hを押し、「検索と置換」のウィンドウを出します。
ここで、「検索する文字列」の「書式」を選んでください。
「書式の検索」画面から、「塗りつぶし」のタグを選び、背景色で、絵を塗りつぶした色を指定します。この絵の場合は「黒」を選びました。
「検索する文字列」の書式セットに黒色がセットされました。続いて、「置換後の文字列」のフィールドに、「１」を指定します。書式セットは「塗りつぶしなし」を選びます。この状態で、「すべて置換」ボタンをクリックしてみましょう。
「置換した」メッセージが現れました。拡大すると下のように色を付けていたセルに１が入っているのがわかります。見えない方は、セルの字の色が白等になっていないか、確認してしましょう。
この状態になったところで、プログラミング前の準備は一旦、完了です。
【ステップ5】プログラム（コード）を書き込む
準備が整いましたので、プログラムの本体を書き込みます。
メニュー「開発」から「マクロ」を選び、マクロ名を入れてください。マクロ名は、なんでも構いませんが、下のコードに合わせるならHorseAnimationにしてください。「作成ボタン」をクリックしてください。
表示されたエディター画面に下のコードを貼り付けてください。
このプログラムは、シート上のセルを左上から右下に向けて1つずつチェックし、数字の「1」を見つけると、その場所を黒く塗りつぶしていく仕組みになっています。なお、動画の最後にある題字の表示についてはこのコードでは割愛しています。
貼り付けのコツ
下の黒枠内のコードをすべてコピーし、 VBE の画面にそのまま貼り付けるだけでOKです。
Sub HorseAnimation()
' === 設定エリア（ここを変えると動きが変わります） ===
Dim max_size As Integer: max_size = 110 ' 描画する範囲
Dim wait_seconds As Double: wait_seconds = 0.1 ' 待ち時間（秒単位。0.5 や 1 なども可）
Dim target_color As Long: target_color = RGB(0, 0, 0) ' 塗る色（黒）
Dim i As Integer, j As Integer
' 画面を最新の状態に更新する設定
Application.ScreenUpdating = True
' === メイン処理：右下に向かって進むループ ===
For i = 1 To max_size
' 1. 対角線上のセルをチェック
If Cells(i, i).Value = 1 Then
Cells(i, i).Interior.Color = target_color
Cells(i, i).Font.Color = target_color
End If
' 2. 現在のセル(i, i)から「上」と「左」にあるセルを同時にチェック
For j = 1 To (i - 1)
' 上方向のチェック
If Cells(i - j, i).Value = 1 Then
With Cells(i - j, i)
.Interior.Color = target_color
.Font.Color = target_color
End With
End If
' 左方向のチェック
If Cells(i, i - j).Value = 1 Then
With Cells(i, i - j)
.Interior.Color = target_color
.Font.Color = target_color
End With
End If
Next j
' 3. アニメーションを滑らかに見せるための処理
DoEvents ' Excelが固まらないようにするおまじない
' 修正ポイント：秒数をシリアル値に変換して足し算
Application.Wait Now + (wait_seconds / 86400#)
Next i
MsgBox "アニメーションが完了しました！"
End Subこんなイメージです。作った絵のサイズによって描画する範囲を変えてください。また、塗りつぶしの色を黒以外で使用した場合は、RGB(0, 0, 0)の数字を変える必要がありますので、ご自分で内部の数値をお調べください。
【ステップ6】プログラムを実行する
さて、それでは実行です。
- VBE（エディタ）の画面を表示します。横に、Excelの画面を並べておくとわかりやすいです。
- 貼り付けたプログラム（Sub スクロールしながら色塗() 〜 End Sub）の内側ならどこでも良いので、マウスで一度クリックしてカーソルを置きます。
- 画面上部にある [▶]（右向きの三角ボタン） をクリックします。
上のように、じわじわと１の入ったセルに色がついていきましたでしょうか？
もう一度見たい場合は、シートの左上から全セルを選択して、セルの色を「塗りつぶしなし」にすればよいです。
【ステップ7】セル数字を隠す
動作が安定しましたら、マクロ実行前のシートにうっすら見えるセル内の数字も見えなくしてしまいましょう。
シートの左上から全セルを選択して、数字の色を「白」にすればよいです。
セルが黒くなる際に、数字が浮き出そうですが、実はコード中の下記でセルと同じ色になるようにしています。
With Cells(i - j, i)
.Interior.Color = target_color
.Font.Color = target_color
End With数字を隠せてしまうと、あたかも、「何もない状態のシートから絵が浮き出る」というような演出ができますね。
また、今回は「左上から右下」というような展開にしてみましたが、「上から下」、「真ん中から広げる」のようにも、少しループの処理を変えるだけで可能です。
ぜひ、その絵ならではの演出を考えてみてくださいね！
参考
「やはり、絵を作るのが大変・・・」と思った方は、是非次の記事をお読みください。きっと感動します。。
コメント