Scratch — среда для обучения программированию детей. Платформа разработана в Массачусетском технологическом институте (MIT Lab) и ориентирована на создание визуальных креативов: игр, мультфильмов и анимации. Любой проект в среде программирования Scratch собирается по принципу Lego: есть цветные блоки, которые уже содержат готовые фрагменты кода, и их нужно соединить.

В нашей статье мы расскажем, как с помощью несложной программы на визуальном языке программирования Scratch сделать виртуальную поздравительную открытку. Своим уроком на эту тему делится школа программирования и робототехники для детей Pixel.

Шаг 1. Рисуем открытку

Нарисуем открытку, которая при нажатии на кнопку-триггер будет открываться. Для этого переходим на вкладку «Фоны» и кликаем на инструмент «Прямоугольник».

Выбираем цвет открытки и убираем заливку.

Рисуем в правой части поля с помощью выбранного инструмента прямоугольник. Эта фигура и будет нашим первым костюмом. Напомним, что костюм — это один из вариантов внешнего оформления объекта (спрайта). Далее дублируем этот костюм.

После дублирования костюма слева появится еще один фон с таким же прямоугольником. Чтобы было видно, что это странички открытки, меняем цвет новой фигуры на более светлый.

Копируем наш второй костюм и располагаем его так, чтобы левая грань обеих фигур была на одной линии. Делаем это с помощью инструмента изменения точек. Если непонятно, посмотрите на картинку. Вы легко поймете, что нужно сделать.

Сейчас мы начнем покадрово изменять вид более светлого прямоугольника. Он будет постепенно отклоняться, и на экране мы увидим открытку в развороте.

Переносим точки правой грани светлого прямоугольника постепенно влево, пользуясь инструментом изменения точек. Каждый раз, когда мы отодвигаем точки прямоугольника влево, мы создаем новый костюм. Выглядит это примерно так: копируем костюм №2, двигаем точки верхней странички немного влево, копируем следующий костюм и снова двигаем правую грань немного влево.

Не забывайте каждый раз, когда перемещаете точки правой грани, создавать новый костюм. Когда мы окажемся на внутренней стороне открытки, выделим линию сгиба, чтобы она отличалась от страничек. Для этого скопируем правый прямоугольник, сделаем его темнее, уменьшим до размеров линии и переместим в нужное место.

Результат, который должен получиться, — на скриншоте.

Продолжаем двигать левую страничку, постепенно смещая ее грань влево. Получится еще 3-4 костюма, а всего — около 12. Вот что у нас выходит:

Далее непосредственно приступим к визуальному программированию.

Шаг 2. Программирование открытки в Scratch

Перейдем в режим программирования по вкладке «Код» и напишем первую команду путем соединения блоков: «Когда флажок нажат» и «Переключить фон на фон 1». Соответственно, в выпадающем списке второго блока нужно выбрать «Фон 1».

Шаг 3. Выбираем спрайта и пишем для него скрипт

Дальше выбираем спрайта — персонажа, который будет разговаривать. Это может быть любой персонаж из библиотеки спрайтов. В нашем примере — это парень Ди.

У этого персонажа есть 5 костюмов, которые мы расставили по порядку их появления. Для удобства обращения лучше переименовать эти костюмы согласно их порядковым номерам: от 1 до 5.

Чтобы задать движение персонажа, переходим в скрипт для Ди:

1. «Когда флажок нажат»;
2. «Показаться»;
3. зададим команду «Перейти в х=65 у=-13» — это будет начальное положение персонажа на обложке открытки;
4. «Изменить костюм на 1»;

Шаг 4. Добавляем кнопку-триггер и программируем ее

Теперь сделаем кнопку-триггер, при нажатии которой будет открываться открытка. Для этого создаем новый спрайт с кнопкой из галереи спрайтов. Размер меняем на 20% и переносим кнопку в угол обложки.

Первая команда для кнопки выглядит так:

1. «Когда флажок нажат»;
2. «Перейти в х=125 у=-109»;
3. «Показаться».

Пропишем новую команду:

1. «Когда спрайт нажат»;
2. «Спрятаться»;
3. «Передать сообщение».

Результат: когда на кнопку будут нажимать, она пропадет и передаст сообщение.

Шаг 5. Пишем скрипт для открытки

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

1. «Когда я получу сообщение 1»;
2. ставим цикл «Повторять 11 раз», а внутри цикла — «Ждать 0,5 секунд» и «Следующий фон». Цикл нужно повторить 11 раз, так как костюмов у нас 12, и первый из них уже включен.

Шаг 6. Дописываем скрипт для Ди

Перейдем к Ди. Мы закончили на строчке «Изменить костюм на 1». Продолжим писать скрипт для программирования спрайта со Scratch:

1. начнем с блока «Ждать 0.5 секунд»;
2. после задержки 0,5 секунд выбираем блок «Изменить костюм на 2»;
3. делаем так, чтобы герой говорил: «Привет!» в течение 2 секунд. Для этого выбираем соответствующий фиолетовый блок и редактируем его;
4. добавляем блок ожидания, время — 1 секунда;
5. следующий блок — «Изменить костюм на 3»;
6. ставим блок «Говорить «Что это за кнопка» n секунд», время ожидания — 2 секунды;
7. повторить пункт 1;
8. добавить «Изменить костюм на 4».

Что должно получиться: после того, как мы нажали кнопку-триггер, открывается поздравительная открытка, а Ди перемещается в ее левую часть.

Посмотрите, как выглядит первая команда, и напишите вторую, собрав скрипт по примеру ниже:

Когда оба скрипта готовы, можно заполнить внутренность открытки.

Шаг 7. Пишем скрипты для внутренней стороны открытки

В коллекции спрайтов мы уже выбрали балерину, которая будет прыгать и поздравлять с днем рождения. Поместим ее по центру открытки и напишем для нее первый скрипт, всего их будет два. Для первого скрипта выбираем блок «Когда флажок нажат», а затем — «Спрятаться».

Опишем второй скрипт:

1. «Когда фон сменится на фон 12»;
2. «Показаться»;
3. зададим координаты балерине, чтобы она начинала движение с одного места: «Перейти в х=74 у=-48»;
4. добавляем «Включить звук» — переходим в библиотеку звуков, где находим звук «Birthday» («С днем рождения») и ставим его;
5. переключаем костюм на первый;
6. ставим бесконечный цикл «Повторять всегда» и добавляем в него 2 блока: «Ждать 0,5 секунд» и «Следующий костюм».

Как выглядят скрипты для балерины:

Последнее, что нам осталось, — написать «С днем рождения». Для этого создаем новый спрайт и с помощью инструмента «Текст» пишем поздравление. Мы сделали надпись, скопировали ее, поменяли цвет и продублировали два раза.

Остался небольшой скрипт для надписи. Для первой команды выбираем блоки «Когда флажок нажат» и «Спрятаться», а для второй — «Когда фон сменился на фон 12» и «Показаться».

Попробуйте поэкспериментировать: изменить персонажей или другие элементы среды программирования Scratch.

Чтобы быстро овладеть основами программирования в Scratch и научиться делать разные проекты, записывайтесь на занятия в онлайн-школу программирования «Пиксель».