Интерфейс Scratch

Введение в Scratch

Курс "Введение в Scratch" представляет собой цикл из десяти уроков по основам работы в среде программирования Scratch. Также данный цикл подспудно знакомит учащихся с некоторыми принципами парадигм программирования (структурного, объектно-ориентированного, событийного).

Курс содержит методические разработки (конспекты) уроков, адаптирован для учащихся ориентировочно 5-7 классов и предназначен для самостоятельного изучения или освоения тем под руководством педагога.

В цикле уроков "Введение в Scratch" рассматриваются: организация интерфейса среды программирования Scratch; понятие о программе (сценарии, скрипте) объекта (спрайта); система координат и направление движения; циклы и условные операторы; последовательное и параллельное выполнение команд; изменение свойств объекта; события, интерактивность и диалоговый режим выполнения программы; использование переменных и генератора случайных чисел; составление программ, рисующих на холсте; создание и изменение объектов и библиотеки объектов; создание эффекта смены сцены.

Поскольку данный курс предназначен для первого знакомства с особенностями работы в среде Scratch, ни один его урок не включает разработку законченной программы или анимации.

Язык команд и интерфейса — русский.

Версия приложения Scratch — 1.4.

Урок 1. Знакомство со Scratch

Тема: Введение в Scratch

Приложение Scratch представляет собой среду для создания программ и анимации. Среда Scratch позволяет делать очень многое. Поэтому ее интерфейс (внешний вид после запуска) достаточно сложный. Однако когда мы разберемся с принципами работы в Scratch, поймем как составлять программы и создавать несложную анимацию, то нам откроются большие просторы для самостоятельного творчества и исследования.

Интерфейс Scratch и основы работы в нем

Будем знакомиться с интерфейсом Scratch постепенно, разбирать работу лишь того, что нам потребуется на текущий момент.

После того, как программа запустилась, перед нами появляется окно, в котором можно выделить три части (три столбца). В свою очередь каждый столбец состоит как бы из двух ячеек: верхней и нижней. Все ячейки разные и каждая из них предназначена для своей конкретной цели.

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

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

Рассмотрим верхнюю ячейку второго столбца.

Здесь показаны свойства объекта, которым мы будем управлять (писать программы для него). Сейчас - это кот. Его имя написано в поле - Спрайт1. Странное имя для кота, не так ли? Спрайтами в Scratch называются все объекты по умолчанию, отличаются лишь их номера. Обычно предполагается, что мы сами их будем переименовывать и называть более адекватными именами. Например, для кота лучше в поле имени вписать кот или Вася или что-нибудь еще. Сделайте это.

Ниже поля имени отображены три свойства объекта (в данном случае, кота) — это его положение (координаты x и y) и направление. Если вы уже изучили работу в среде KTurtle, то вспомните, что направление, когда черепашка «смотрит» вверх равно 0 градусам, когда точно направо — равно 90 градусам, а полная окружность равна 360-ти градусам. Здесь то же самое. Кот смотрит направо, поэтому его направление равно 90.

Внизу мы видим три кнопки-вкладки — скрипты, костюмы и звуки. От того какая из них нажата, зависит ячейка внизу. Если нажата кнопка скрипты, то нижняя ячейка второго столбца покажет программы (скрипты) для объекта, который отображен в верхней ячейки. Сейчас нажата кнопка скрипты и мы видим пустую ячейку внизу. Это значит, что для кота пока нет никакой программы. Мы составим ее чуть позже. Кнопки костюмы и звуки позволяют настраивать и менять соответственно внешний вид объекта и издаваемые им звуки. Оставьте включенной кнопку скрипты.

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

Если зажать левую кнопку мыши над котом, а затем не отпуская ее перемещать мышь, то кот будет перемещаться. Таким образом, мы можем менять его положение на холсте. Переставьте кота в другое место и посмотрите в ячейку свойств объекта (второй столбец). Заметьте, что координаты x и y изменили свои значения.

Над холстом находятся две вот такие кнопки:

Когда для объектов (кота и других) будут составлены какие-нибудь скрипты (программы) на вкладке скрипты, то чтобы объекты начали их выполнять, надо нажать зеленый флажок. Чтобы остановить выполнение, надо нажать красный круг. Не забывайте останавливать свои скрипты!

Над флагом и кругом мы видим еще три кнопки.

Они предназначены для изменения всего окна приложения Scratch. Сейчас у нас включена вторая кнопка, поэтому окно Scratch примерно поровну разделено на три столбца. Однако если мы составляем какую-нибудь очень сложную программу и у нас получается очень большой скрипт, то лучше нажать первую кнопку. При этом второй столбец займет существенную часть окна. Третья кнопка предназначена исключительно для просмотра созданной программы-анимации. Если ее нажать, то холст занимает центр экрана, и доступными остаются только три кнопки: запуск программы (зеленый флажок), остановка программы (красный круг) и выход из режима презентации (стрелка), осуществляющий возврат к предыдущему окну. Попробуйте переключаться между режимами работы.

Первая программа

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

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

У нас есть программа для кота, состоящая из одной команды. По идее при нажатии на кнопку запуска (зеленый флаг) она должна срабатывать. Но на самом деле этого не произойдет. Чтобы программа запускалась при нажатии флажка, надо в ее начало поместить специальную команду, которая связана с кнопкой контроль. На ней написано когда щелкнут по и изображен зеленый флажок. Если взять эту команду, перетащить в поле скриптов и соединить с командой иди 10 шагов, то программа станет запускаться при нажатии на кнопку запуска. Сделайте это.

Обратите внимание на то, как соединяются между собой команды: как блоки в конструкторе Лего. В каких-то случаях это может служить своего рода подсказкой. Какие-то команды можно соединять между собой, а какие-то не соединяются, и, значит, мы составляем не очень правильную программу.

Чтобы разорвать блоки, надо потянуть за нижнюю команду, чтобы переместить весь блок - за самую верхнюю. Попробуйте и затем верните все на место.

Сделаем некоторые выводы. Наш код даже не шагает, а просто прыгает на 10 точек вперед и останавливается. Конец программы. Хорошо бы было, чтобы он все-таки шагал и проделывал путь несколько больше. Самое первое, что может прийти в голову, — это увеличить количество шагов, например, до 100. Для этого надо в команде иди 10 шагов щелкнуть по числу 10 и вписать в поле число 100. Переместите кота ближе к левой границе холста, поменяйте число шагов и запустите программу.

Теперь кот шагает больше. Но разве это похоже на шаги? Он просто скачет на большее расстояние. Поэтому вернем число 10 и подумаем над другим решением.

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

Продолжим улучшать и видоизменять нашу первую программу. Допустим, мы не знаем, сколько раз надо повторять шаги. Мы хотим, чтобы объект двигался всегда, пока мы не нажмем кнопку остановки (красный круг). Для этого надо поступить так: вытащить команду иди 10 шагов из цикла повтори ..., убрать цикл повтори ... (перетащить его в левый столбец), взять команду всегда и собрать такую программу:

Теперь программа должна работать вечно, пока не будет остановлена. Так и происходит. Если нажать кнопку запуска, то зеленый флажок будет гореть до тех пор, пока не будет нажат красный. Это значит, что программа не может сама остановиться. Но посмотрите, что происходит с котом. Он останавливается, достигнув границы холста. Программа работает, а кот стоит. Тут что-то не так. Останавливаем программу! Возвращаем кота на место.

С кнопкой движение связана такая команда как если край, оттолкнуться. Если ее поместить в цикл всегда, то объект уже не остановится достигнув края, а оттолкнется от него и пойдет в другую сторону. Составьте вот такой скрипт и посмотрите, как он работает.

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

В левой части этой ячейки есть три маленькие кнопки: со скругленной стрелкой, двуголовой стрелкой и квадратной точкой. По умолчанию нажата первая кнопка и поэтому объект при столкновении поворачивается так, как мы наблюдали. Если нажать вторую кнопку, то он будет поворачиваться так, как нам надо в данный момент (слева направо). Третья кнопка вообще запрещает какие-либо повороты. Нажмите вторую кнопку и посмотрите, как ходит кот. Не забудьте после этого остановить программу.

Посмотрите на изображение кота в ячейке свойств. У него есть какой-то синий отрезок. Зажав на нем мышь, его можно поворачивать. При этом меняется значение направления. Это означает, что объект при запуске программы будет двигаться в установленном таким образом направлении. Поэкспериментируйте с выбором направления движения кота.

Самостоятельная работа

Составьте вот такую программу, испытайте (протестируйте) ее и попытайтесь объяснить, как она работает.

Вопросы к самостоятельной работе:

1. Сколько циклов в программе? Назовите их.
2. Какой цикл является вложенным, а какой внешним?
3. Какие команды содержит цикл повтори ...?
4. Какие команды содержит цикл всегда?
5. Сколько всего шагов делает кот, прежде чем останавливается на 3 секунды?

Урок 2. Управление несколькими объектами

Тема: Введение в Scratch

Координаты

Когда окно Scratch только открылось, мы видим, что кот стоит в центре холста. Посмотрим теперь на его координаты x и у в ячейке свойств объекта. Там написано, что x: 0 и y: 0. Почему так? Если вспомнить приложение KTurtle, с помощью которого мы изучали язык Logo, то точка с координатами (0,0) должна быть в верхнем левом углу холста. Теперь придется забыть об этом. В Scratch начало системы координат - это центр холста. От центра вправо значение х увеличивается, влево — уменьшается (становится минусовым, отрицательным). Аналогично с осьюy. По направлению вверх идут положительные значения, вниз — отрицательные. Чем дальше от центра, тем больше абсолютное значение числа. Переместите несколько раз кота по холсту и отметьте, как меняются значения x и y в ячейке свойств объекта.

Сцена

Чтобы было легче ориентироваться в координатах, проделаем кое-какие манипуляции с холстом - наложим на него картинку с системой координат. Но сначала рассмотрим ячейку, которую мы пропустили на прошлом занятии.

Эта нижняя правая ячейка окна Scratch предназначена для работы с объектами текущего проекта. Здесь можно добавлять новые объекты и переключаться между теми, которые у нас уже имеются. У нас пока существуют только кот и сцена. Переключаться между ними можно, щелкая по ним левой кнопкой мыши. При этом меняется ячейка свойств объекта. Например, если щелкнуть по картинке Сцена, то ячейка свойств будет выглядеть так:

Теперь самое интересное. Мы хотим поменять фон холста. На вкладке фоны есть кнопка Импорт. Если ее нажать, появляется возможность добавить картинку, которая будет служить фоном холста. Нам нужна картинка xy-grid, на которой изображены оси координат. После этого следует снова переключиться на кота, щелкнув по его изображению в нижней ячейке третьего столбца окна Scratch и переключиться на вкладку скрипты. Добавьте фон для сцены, затем снова вернитесь на вкладку скрипты кота.

Повторение программы

Вспомним программу, которую мы составили на прошлом занятии. Снова составим ее, добавив лишь точные координаты начального положения кота с помощью команды идти в x: ... y: .... Эта команда установит объект в указанную точку. Пусть это будет точка с координатами (-220, -110), т.е. кот окажется внизу. Соберите такой скрипт:

Не забудьте указать правильное направление поворота для кота с помощью соответствующей кнопки в ячейке свойств объекта.

Новые объекты

Теперь предположим, что на сцене у нас будет бегать помимо кота еще какая-нибудь живность. Как в Scratch добавить новые объекты? Следует нажать на вторую кнопку в ряде кнопок под холстом:

После чего перед нами открывается диалоговое окно, где из папок Animals (животные), Fantasy (фантазия), Letters (буквы), People (люди), Things (вещи) и Transportation (транспорт) можно выбрать любой объект. Давайте пока ограничимся только папкой Animals и добавим на холст какое-нибудь животное, птицу или насекомое. Сделайте это.

Объект добавляется в центре холста. Теперь дайте ему соответствующее имя в ячейке свойств объекта.

Хорошо бы, чтобы второй объект тоже как-нибудь двигался. Поскольку мы уже запрограммировали кота, то можно не составлять новый скрипт, а скопировать программу кота и перенести копию на новый объект. Делается это так. Переключаемся на кота ? щелкаем правой кнопкой по скрипту и в контекстном меню выбираем команду дублировать ? перемещаем курсор мыши с прилипшей к нему копией на иконку второго объекта в нижней правой ячейке (будьте внимательны: при этом вокруг иконки должна появиться серая рамка!) и щелкаем мышью.

Теперь если переключиться на второй объект, то мы здесь увидим новый скрипт. Его следует немного подправить, чтобы кот и мышь (например) двигались по-разному:

Сделайте это.

Добавим третий объект, но программу для него не будем копировать. Пусть третий объект стоит на месте в центре холста и всегда поворачивается ко второму объекту. Поскольку второй объект постоянно бегает по холсту, то и третий объект постоянно будет вертеться. Добавьте третий объект и соберите для него такой скрипт:

Команда повернуться к ... заставляет объект, к которому она применяется поворачиваться в направлении того объекта, который выбран в раскрывающемся списке этой команды. Цикл всегдаздесь также необходим. Иначе объект повернется только один раз в самом начале. Поскольку второй объект у нас постоянно двигается, то и следить за ним надо всегда.

Нажмите кнопку запуска и посмотрите получившуюся анимацию. Все три объекта начинают свое движение одновременно, но двигаются по-разному, т.к. каждый из них управляется собственным скриптом.

Слои

Обратите внимание, какой из объектов при движении находится сверху, как бы перекрывает другие. Скорее всего, это будет третий объект. Второй объект при перемещении как бы проходит под ним и в тоже время, если вы заметили, находится выше первого. Получается, что на холсте есть как бы три слоя, и каждый объект двигается только по своему. Что же делать, если надо, чтобы третий объект находился ниже второго? Для этого достаточно взять второй объект (зажав левую кнопку мыши, когда курсор находится над ним) и положить его сверху третьего. Проделайте это и посмотрите анимацию. Отметьте, какой из объектов находится ниже. Остановите выполнение, теперь положите третий объект на второй. Снова запустите программу и отметьте разницу.

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