В мир информатики # 91 (1-15 мая).
Школа программирования

Основы программирования на Visual Basic

Н.М. Тимофеева,
г. Обнинск Калужской обл.

Постановка задачи

Разработайте программу, в которой показывается анимация — бег собаки (как вы, очевидно, знаете, анимация получается путем смены изображений).

План решения

На рис. 1 показан предлагаемый дизайн экрана:

Рис. 1

Назначение каждого элемента управления:

1) элементы Image (показанные на рис. 1 слева) содержат последовательность картинок для анимации; все отдельные изображения будут объединены в массив элементов управления;

2) элемент Image (отдельный) — для показа бегущей собаки;

3) элемент VScrollBar (горизонтальная полоса прокрутки) — для регулирования скорости анимации;

4) надписи — для вывода текста у полосы прокрутки;

5) кнопки — для выполнения следующих действий по щелчку на них:

— Пуск — для начала анимации;

— Стоп — для ее остановки;

— Выход — для завершения программы.

N–S-диаграммы для разработки процедур:

1) процедура для таймера⁵ (Timer)

2) процедура для изменения значения полосы прокрутки:

3) процедура для кнопки Пуск:

4) процедура для кнопки Стоп:

Создание интерфейса

1. Прежде чем вы начнете создавать интерфейс, вам надо будет нарисовать в графическом редакторе Paint или подобном пять простейших рисунков бегущей собаки таким образом, чтобы они немного отличались друг от друга. Например, так:

Сохраните рисунки под именами: Собака0.bmp, Собака1.bmp, Собака2.bmp, Собака3.bmp, Собака4.bmp.

2. Разместите на форме три кнопки, три надписи, горизонтальную полосу прокрутки, таймер и два элемента управления Image (см. рис. 2).

Рис. 2

Массив элементов управления должен быть сделан из одного элемента управления Image (показанного в верхнем левом углу рис. 2). Его свойства следует установить в первую очередь:

Image2

Выделите щелчком мыши это изображение.
В меню Edit выберите подпункт пункт Copy, затем Paste. В результате появится диалоговое окно с вопросом, смысл которого состоит в том, хотите ли вы создать массив элементов управления на основе элемента imgСобака.

Ответьте Yes (Да) и продолжайте копировать, пока не создадите пять элементов Image c одним и тем же именем imgСобака (они будут иметь индексы от 0 до 4).

После этого присвойте свойству Picture каждого из изображений imgСобака значение из соответствующей картинки, созданной ранее: Собака0.bmp, Собака1.bmp, …, Собака4.bmp. Заметьте, что вы будете видеть картинки на форме только в режиме проектирования, в режиме выполнения они будут невидимы.

Установка свойства

Установите следующие свойства формы и элементов управления:

Дайте заголовки надписям, как показано на рис. 3.

Рис. 3

Написание кода

Пользуясь N–S-диаграммами, напишите код для каждой процедуры.

Процедура для таймера:

Private Sub tmrБег_Timer()

Static Кадр As Integer 'Номер рисунка

'Копируем картинку из массива

imgДействие.Picture =

imgСобака(Кадр).Picture

'Увеличиваем номер рисунка на 1

Кадр = Кадр + 1

If Кадр = 5 Then

'Начинаем сначала

Кадр = 0

End If

End Sub

Горизонтальная полоса прокрутки контролирует скорость:

Private Sub hsbСкорость_Change()

tmrБег.Interval = 500 — hsbСкорость.Value

End Sub

Процедура для кнопки Старт:

Private Sub cmdСтарт_Click()

tmrБег.Enabled = True

End Sub

Процедура для кнопки Стоп:

Private Sub cmdСтоп_Click()

tmrБег.Enabled = False

End Sub

Процедура для кнопки Выход:

Private Sub cmdВыход_Click()

End

End Sub

Сохранение проекта

В папке ПРИМЕР 11 сохраните форму и проект под именами Собака.frm и Собака.vbp.

Тестирование приложения

Запустите программу. Убедитесь, что программа выполняет все, что было задано.

Взгляд назад

Задний план рисунка с анимацией можно сделать более интересным. Будьте изобретательны, создайте собственную анимацию.

Пояснения

1. Массив элементов управления может быть создан путем копирования и вставки существующего элемента управления. По этой причине некоторые свойства устанавливаются раньше остальных для того, чтобы каждый элемент массива имел те же свойства. Одно свойство, которое отличается у каждого элемента, — это свойство Index. В этом примере мы создали массив из пяти элементов управления Image: imgСобака(0), imgСобака(1), imgСобака(2), imgСобака(3), imgСобака(4).

2. Как указывалось в предыдущей публикации, очень часто для обработки массивов используются операторы цикла. В этом примере они не используются — о повторении процедуры “заботится” таймер (Timer). В этом примере переменная с именем Кадр была объявлена с помощью оператора Static, который позволяет ей увеличиваться каждый раз, когда происходит событие Timer. Благодаря этому обращения были сделаны к разным элементам массива:

'Копируем картинку из массива

imgДействие.Picture =

imgСобака(Кадр).Picture

'Увеличиваем номер рисунка на 1

Кадр = Кадр + 1

3. Без массива элементов управления Image изображение собак нужно было бы копировать из пяти отдельных элементов управления. Тогда бы код выглядел так:

Select Case Кадр

Case 0

imgДействие.Picture = imgПозиция0.Picture

Case 1

imgДействие.Picture = imgПозиция1.Picture

Case 2

imgДействие.Picture = imgПозиция2.Picture

Case 3

imgДействие.Picture = imgПозиция3.Picture

Case 4

imgДействие.Picture = imgПозиция4.Picture

End Select

Кадр = Кадр + 1

Видно, что использование массива значительно сокращает объем необходимого кода.

4. Благодаря тому, что переменная целого типа Кадр объявлена с помощью оператора Static, она, приняв начальное значение 0, последовательно увеличивается на 1 всякий раз, когда запускается процедура.

5. Когда изменяется значение полосы прокрутки, происходит событие Change и поэтому запускается процедура hsbСкорость_Change(). Чем больше значение полосы прокрутки, тем меньше значение свойства Interval таймера, которое, в свою очередь, ускоряет анимацию.

Вопросы и задания для проверки знаний

1. Как часто меняются картинки анимации, когда значение свойства Interval таймера равно 500?

2. Какое свойство различно у разных элементов в массиве элементов управления?

3. Чему по умолчанию равно значение индекса у первого элемента массива в массиве элементов управления?

4. Допустим, что на форме расположен массив кнопок с именем cmdКнопка и индексами от 1 до 5. Напишите оператор цикла с параметром, который будет присваивать свойству Enabled каждого элемента значение False.

5. Как можно было бы использовать операцию определения остатка (знак операции — Mod) вместо условного оператора в следующем фрагменте кода?

If Кадр = 5 Then

'Начинаем сначала

Кадр = 0

End If

6. В чем состоит сходство элементов массива и пунктов списка?

7. В чем заключается преимущество использования массива в рассмотренном примере программирования?

8. В этом примере код был написан не для какого-то события, связанного с массивом изображений. Однако если вы дважды щелкнете по одному из изображений, являющемуся элементом массива, то появится шаблон процедуры для события по умолчанию (Click). Какой аргумент используется в этом шаблоне?

9. До знакомства с массивами вы рассматривали пример программирования № 7, в котором имитировалось бросание игрального кубика. Очевидно, что то приложение могло использовать массив элементов управления. Разработайте улучшенную версию соответствующей программы. Внешний вид приложения должен быть тем же, что и у примера программирования № 7, но с более элегантным дизайном.

10. Разработайте компьютеризированную версию детской игры “Камень, ножницы, бумага”. При создании интерфейса используйте массив элементов управления. Где-то на форме должен указываться победитель каждой игры.

Продолжение