Мы научились вырезать снежинки из бумаги, узнали много нового и подготовили украшения. Настало время заняться программированием на компьютере. И поможет нам в этом визуальная среда Scratch, в которой каждый может быстро сделать первые шаги в программировании, творческом!
Давайте создадим анимацию, которая похожа на такую, как в видео.
Примеры более простых проектов можно открыть на сайте Scratch и изучить их изнутри, перейдя по ссылкам: https://scratch.mit.edu/projects/464453532/ и https://scratch.mit.edu/projects/466444039/
Краткий алгоритм создания анимации мы разместили в формате инфографики. Но он понятен лишь тем, кто уже программировал в Scratch.
Детальный (уточнённый) алгоритм со скриншотами (для начинающих программистов и аниматоров) в формате инфографики можно заказать на сайте АЭЛИТ.
Для самых юных программистов и всех тех, кому краткое описание алгоритма не совсем понятно, далее мы рассматриваем каждый шаг создания проекта более подробно, иллюстрируя его копиями экрана (скриншотами).
Шаг 1. Перейти в папку для выбора шаблона.
Шаг 2. Выбрать понравившийся шаблон. Например:
Шаг 3. Нажать правую кнопку мыши на выбранном изображении и скачать картинку на свой компьютер:
Шаг 4. Перейти на сайт Scratch: https://scratch.mit.edu/ и создать новый проект, нажав на большую кнопку Создавай в правом верхнем углу.
Шаг 5. Загрузить из файла шаблона (который только что скачали) спрайт (шаги 5.1 – 5.3):
Шаг 5.1. Нажать на кнопку Загрузить спрайт в редакторе Scratch (в правом нижнем углу):
Шаг 5.2. Выбрать файл шаблона на диске своего компьютера (из папки, в которую на шаге 3 загрузили картинку):
Шаг 5.3. После этого в проекте Scratch появится новый спрайт, который сразу можно увидеть и на сцене:
Шаг 6. Удалить спрайт Кота, кликнув по нему мышью и далее по кнопке с изображением урны в правом верхнем углу от спрайта.
Шаг 7. Задать имя спрайту снежинки (хоть это необязательно, но так проект оформлен более аккуратно, а к хорошему лучше привыкать сразу):
Шаг 8. Перейти на вкладку Костюмы спрайта создаваемой снежинки:
Шаг 9. Создать костюмы для снежинки, выполняя следующие шаги (9.1 – 9.9):
Шаг 9.1. В растровом редакторе затереть ластиком лишние линии. НО: рекомендуем оставить немного у острия снежинки. Это центр снежинки, и лучше, если мы будем его видеть. Так потом легче будет собирать все остальные костюмы.
Шаг 9.2. Чтобы далее было удобнее работать, можно (при желании) переключиться в режим векторной графики, нажав на синюю кнопку Конвертировать в векторную графику внизу холста редактора костюмов:
Шаг 9.3. Взять инструмент Выбрать векторного редактора:
и зажав мышью изображение сектора снежинки, перетащить его так, чтобы оставленный уголок центра снежинки разместился в центре листа редактора:
Если не очень хорошо видно, можно использовать кнопку с изображение лупы со знаком плюс в правом нижнем углу для увеличения отображения редактора:
Шаг 9.4. Если это слишком трудно, можно этот пункт пропустить.
Можно обрисовать сектор снежинки с помощью инструментов рисования линий векторного редактора, выбрав желаемый цвет и толщину линии. Так снежинка получится ещё красивее.
Шаг 9.5. Примечание: Если контур не рисовали, этот пункт пропустить.
Если обрисовали контур сектора снежинки, сейчас стоит взять инструмент Выбрать, обвести зажатой кнопкой мыши оба изображения (то, которое загрузили из шаблона и которое только что нарисовали):
… и сгруппировать с помощью кнопки Группировать:
Шаг 9.6. Кликнуть правой кнопкой мыши по костюму снежинки и выбрать пункт Дублировать:
В результате мы получим два одинаковых костюма:
Шаг 9.7. Теперь на втором костюме надо создать второй сектор снежинки и должным образом его разместить. Для этого нам необходимы инструменты Выбрать, а также Копировать и Вставить:
В результате должно получиться два одинаковых сектора из шаблона снежинки.
Шаг 9.8. Второй сектор нам необходимо сначала отразить по горизонтали:
Получится что-то вроде этого:
Затем необходимо повернуть и переместить 2-й сектор так, чтобы оба сектора соприкоснулись точно в центре и образовали следующую часть снежинки (для поворота зажимаем левую кнопку мыши на инструменте с двумя стрелочками под голубой рамкой вокруг изображения):
Итак, 2-й костюм готов:
Шаг 9.9. Теперь необходимо создавать следующие костюмы снежинки аналогичным образом (по п.9.5 — 9.8), каждый раз выполняя следующие шаги:
- продублировать последний костюм
- скопировать один сектор снежинки
- (если надо) отразить скопированный сектор по горизонтали
- переместить и повернуть, чтобы он соприкоснулся с предыдущим сектором и образовал частично дорисованную снежинку
Вот, например, первые 4 костюма спрайта для нашей анимации:
Последний, 12-й костюм спрайта — это уже целая снежинка!
Подумайте, почему получилось 12 костюмов? Может ли быть другое количество костюмов? Сколько, например, и в каких случаях?
Размещаем снежинку в центре сцены:
Шаг 10. Для анимации снежинки пишем простой скрипт смены костюмов:
Шаг 11. Чтобы в центре не было видно чёрных кусочков, можно установить темный фон со звездным небом.
Для этого (11.1 – 11.2):
Шаг 11.1. Щёлкнуть мышкой по кнопке Выбрать фон в правом нижнем углу редактора Scratch:
Шаг 11.2. Пролистать галерею и найти фон в именем Stars, затем щёлкнуть по нему мышкой:
На сцене сразу отобразится выбранный фон:
Примечание: можно ещё немного потрудиться, разгруппировав в каждом костюме сектора шаблона снежинки и удалив исходный шаблон. Но это работа для самых аккуратных и усидчивых! Не будем это описывать.
Итак, проект готов!
Смело нажимаем на зелёный флажок в левом верхнем углу сцены и смотрим анимацию (чтобы увидеть её в полном окне браузер, нажмите на кнопку «Полноэкранный режим» в виде черытёх расходящихся стрелок в верхнем правом углу над сценой):
Теперь мы знаем, как рисовать и анимировать снежинку на основе шаблона и можем браться за проекты с более сложными шаблонами, чтобы получить ещё более красивые снежинки! А можно продублировать созданный спрайт, переместить на сцене (и даже перекрасить в другой цвет), уменьшить и получить много похожих снежинок.
Какие ещё подобные объекты (не снежинки) можно нарисовать и создать красивые мультфильмы? Уверены, примеров можно привести множество! Делитесь в комментариях своими идеями и ссылками на ваши проекты!
Автор урока: Ольга Елисеева.
Ещё больше бесплатных увлекательных уроков на сайте «Scratch – творческое программирование для детей и взрослых!» - http://scratch.aelit.net/
Записывайтесь на индивидуальные онлайн уроки с наставником, чтобы научиться создавать самые разные мультфильмы и игры в Scratch!