Программирование на VBasic (Image, Picture Box)

Разделы: Информатика


Цели урока:

Образовательные

  • Познакомить с компонентами Image и PictureBox их свойствами.
  • Совершенствовать навыки работы с компонентами языка VBasic.

Воспитательная

  • Способствовать формированию информационной культуры учащихся.

Развивающая

  • Содействовать развитию познавательного интереса, алгоритмического мышления, памяти, внимания.

По типу урок: комбинированный

Методы обучения: обяснительно-иллюстративный, практический, частично-поисковый.

Формы учебной деятельности: презентация, фронтальная беседа, индивидуальная работа, самостоятельная работа, работа с дидактическим материалом.

Оборудование: ПК, мультимедийный проектор или интерактивная доска, карточки (приложение 2)

План урока:

1. Организационный момент.

2. Изучение нового материала.

При создании проекта возникает необходимость сделать его наглядным – добавить рисунок. Сразу возникает вопрос “Где его взять?”

(Можно из библиотеки стандартных картинок или дисков с ClipArt’ами, можно из Интернета, а можно и самим нарисовать.)

В каком виде должен быть рисунок? (Важно, чтобы рисунок был у вас на диске в виде файла.)

В нашем распоряжении несколько приемов размещения на форме графических изображений и полей. Давайте познакомимся с ними. (Презентация – приложение 1)

Автоматический вывод изображений на форму после запуска проекта (как фон формы). (Слайды 1,2)

При создании проекта, в окне Свойства объекта для формы активизировать свойство Picture, щелкнув по значку “…” и с помощью появившегося диалогового окна Load Picture выбрать нужный графический файл. После запуска проекта на выполнение появляется форма с размещенным на ней изображением, которое размещается в верхнем левом углу формы. Если изображение больше формы, то будет видна только его часть, которая помещается на форму.

Рассмотреть пример (перейти по управляющей кнопке – приложение 3)

Вывод изображений на форму с помощью событийных процедур. (Слайды 3, 4)

Для вывода изображения на форму в процессе выполнения программы необходимо воспользоваться событийной процедурой, содержащей функцию Load Picture, которая имеет синтаксис:

Load Picture (имя файла)

  • при отсутствии имени файла функция возвратит пустую рамку;
  • если проект загружается из папки с проектом и рисунок лежит в этой папке, то можно указать только имя файла;
  • если проект загружается из среды VBasic, то нужно указывать полный путь к файлу с изображением.

Рассмотреть пример (перейти по управляющей кнопке – приложение 4)

Элементы управления для работы с изображениями (Слайд 5):

Вывод изображений на форму с использованием элемента управления Image (Слайды 6,7,8)

Элемента управления Image позволяет выводить на форму изображения из графических файлов в заданную область.

Примечание: для того чтобы подогнать размер изображения под размер элемента Image, воспользуйтесь свойством Stretch (подгонка), установив значение True.

Рассмотреть пример (перейти по управляющей кнопке – приложение 5)

Вывод изображений на форму с использованием элемента управления PictureBox (Слайды 9,10)

Элемент PictureBox (графическое окно) позволяет размещать графическую информацию их файлов различных типов в определенных участках формы. При этом графическое окно является фактически “формой внутри формы”, в которой можно помещать элементы управления, выводить текст и рисовать при помощи графических методов. Оно имеет больше возможностей, чем элемент Image, но требует больше памяти и времени на обработку.

  • Для того чтобы изображение автоматически выводилось после запуска проекта, необходимо в процессе разработки проекта воспользоваться свойством Picture элемента управления Image.
  • Для вывода изображения на форму в процессе выполнения программы необходимо воспользоваться событийной процедурой, содержащей функцию Load Picture.

Рассмотреть пример (перейти по управляющей кнопке – приложение 6)

Обобщение изученного материала

Таким образом, мы сегодня познакомились со следующими способами… (Слайд 11)

3. Закрепление

Жизнь человеческая бесценна. Но в повседневной жизни человек редко задумывается об этом. И поэтому часто подвергает себя многим опасностям. Статистика утверждает, что вследствие не соблюдения правил дорожного движения ежегодно в нашей стране погибают более 30 тыс. человек, а 275 тыс. получают увечья. К сожалению, среди них много детей. Попытаемся внести свой маленький вклад в обеспечение безопасности жизнедеятельности людей.

Задача (решается совместно с учителем): Наша задача создать на экране пособие по правилам дорожного движения для пешеходов, которое можно будет использовать на уроках в начальной школе. (приложение 7)

Пояснения: На форме компонент Image, 3 метки с текстом по правилам дорожного движения:

  • Красный свет зажегся – стой.
  • Желтый – лучше подожди.
  • На зеленый свет – иди!

Щелкая по меткам, появляется соответствующая картинка светофора.       

Решение задачи:

1. Учащиеся самостоятельно создают форму (более 5 минут), используя карточку с параметрами (свойств) элементов управления (приложение 2);

Элемент управления Свойства
1 Форма - Form Caption – Светофор

BackColor – белый

BorderStyle – 2

ControlBox – True

2 Image Picture – светофор с разными глазками света

Stretch - False

3 Метка - Label Caption – соответствующий текст

Enabled - False

BackStyle – 0 (прозрачный стиль)

 2. Ввод текста программы и ее отладка.

Private Sub Form_Load()
Image1.Visible = True
End Sub

Private Sub Label1_Click()
Img1.Picture = LoadPicture("C:\svetofor\i[15].jpg")
End Sub

Private Sub Label2_Click()
Img1.Picture = LoadPicture("C:\svetofor\i[22].jpg")
End Sub

Private Sub Label3_Click()
Img1.Picture = LoadPicture("C:\svetofor\i[30].jpg")
End Sub

Скажите, а можно ли создавать аналогичные проекты при изучении школьных предметов. Каких? (элементы таблицы Менделеева, геометрические фигуры).

Самостоятельная работа (приложение 8)

(дифференцированно – выполняется любое задание на выбор учащегося)

№1. Создайте и оформите проект, показывающий по нажатию одной командной кнопке животное с надписью (например, “Это лев”), а по нажатию другой командной кнопки – другое животное с надписью.

№ 2. Создайте и оформите проект, выводящий рисунок геометрической фигуры, а затем по нажатию на рисунок, соответствующую формулу вычисления её площади.

№3. Создайте проект “Видимость формы”, в котором по щелчку по кнопке на первой форме выводится вторая форма, и наоборот. Для различия форм разместить на них разные рисунки.

4. Домашнее задание: сформулировать 3-5 задач-пособий по правилам дорожного движения для пешеходов, которое можно будет использовать на уроках в начальной школе.