Первая страница

Scratch

визуальный редактор кода
Онлайн: РИСОВАЛКИ | ИГРЫ | РЕЛАКС программы

О программе

Scratch – это язык программирования в полном смысле визуальный. Вы составляете программу из блоков, как конструируется модель Лего. Имеет значение последовательность блоков, их совместимость, вложенность. У некоторых блоков есть окошко, в которое вписывается параметр. Если проводить аналогию с полноценными языками программирования, то блоки Scratch представляют функции, методы, циклы, условные операторы. Язык придуман для обучения детей программированию, но и взрослый человек может получать удовольствие от работы с конструктором Scratch. Возможна конвертация проекта в HTML5, чтобы ваше запрограммированное произведение можно было посмотреть в интернете в любом браузере.

Scratch / интерфейс

Как тут кодить

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

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

Закладка КОСТЮМЫ
На этой закладке редактируется спрайт или фон (смотря, что выбрано). У одного спрайта может быть несколько состояний, называемых костюмами. В процессе исполнения кода можно запрограммировать смену костюма по какому-то событию. В реакторе можно костюм подкорректировать: что-то дорисовать, изменить цвет…

Закладка ЗВУКИ
Здесь пользователь работает со звуком, который можно записать прямо в интерфейсе программы, добавить с диска или добавить из библиотеки. В редакторе звука доступны функции обрезания, нарастания, затухания, изменения громкости звука.

Окно СПРАЙТ
Постоянно следите за этим окном, в нем ваши объекты сцены. Именно к выделенному объекту будет относиться код, костюмы, звуки. А как же в коде осуществить взаимодействие между объектами, например, когда Объект_1 идет и натыкается на Объект_2, и Объект_2 должен отреагировать? Это делается через сообщения. Есть блок "Передать сообщение" (вставить в код Объекта_1) и есть блок "Когда я получу сообщение" – его вставить как событие для начала действия Объекта_2.

Окно СЦЕНА
Это фоновые изображения, которых можно наклепать несколько, а потом в коде между ними переключаться по вашей логике. В этом окошке отображается текущий фон и кнопка для добавления из библиотеки или с диска нового фонового изображение в массив фонов. Есть блок кода "Переключить фон на" в категории "Внешний вид". В этом блоке можно выбрать фон из загруженных. Если выделить заголовок этого блока "Сцены", то на закладке "Костюмы" вы увидите все ваши фоны.

Как экспортировать

В поставку Scratch, скачанного с сайта разработчика, не входит инструмент публикации вашей программы на локальный компьютер. Но он есть. Это htmlifier-offline.html – просто html-файл со встроенным в него javascript, который конвертирует файл проекта *.sb3 в файл *.html. Этот файл можно открыть по адресу https://sheeptester.github.io/htmlifier/ а также скачать на ваш компьютер по кнопке [Download offline version]. Я скачал и вложил в папку Scratch в его портабельную версию, которая ниже предлагается к скачиванию.
Запустив htmlifier-offline.html надо сначала по кнопке [Обзор] указать путь путь к файлу проекта на вашем компьютере, а потом нажать кнопку [HTMLify]. После конвертации файл result.html будет загружен на ваш компьютер – его можно запускать в браузере.

Еще существует проект TurboWarp (следующая ступень развития Scratch), у которого есть компилятор проектов Scratch в разные ипостаси. Так вот, результат его компиляции в html-файл весит в два раза меньше, чем после htmlifier.

Еще есть проект Leopard, с помощью которого можно сконвертировать файл *.sb3 в приложение HTML5 с html, css, js и медиа файлами. Весит еще меньше, т.к., в отличие от двух предыдущих способов не запихивает медиа в html в формате base64. Но работает корявенько. Тем не менее, может пригодиться тому, кто разбирается в веб-технологиях и может подправить код.

Примеры

Пример 1. Посмотрите презентацию простого Scratch проекта, в которой подробно разобран код спрайтов:

Во время просмотра презентации вы можете нажать кнопку паузы, чтобы успеть прочитать комментарий.

Пример 2. Это уже работающий проект, выполненный в Scratch. Запустите его по кнопке START и управляйте касаткой, водя мышкой по холсту.
Есть управляющие клавиши: 1 - сделать фон моря; 2 - сделать изображение расплывчатым, как приведение.

Пример 3. Это уже работающая игра, выполненная в Scratch. Запустите ее по кнопке START и переливайте жидкость из пробирки в пробирку так, чтобы в итоге вся жидкость одного цвета оказалась в одной пробирке.
Сначала кликните на пробирку, откуда выливать. Потом кликните на пробирку, куда выливать. Выливается только одна цветная фракция.

Пример 4. Это викторина для детишек, которые изучают английский язык. Надо мышкой перетащить фигурку животного в свой ареал обитания. В коде используются звуки, переменные, сообщения.
Вот ССЫЛКА, по которой игра откроется в новой закладке на всё окно.

Скачать, читать, смотреть

🌐 Вообще-то скачивать не обязательно. Есть онлайновая версия Scratch, которая ничем не отличается от десктопной.
📥 Я лично предпочитаю версию для ПК, поэтому, предлагаю к скачиванию портативную сборку Scratch 3.29.1 (пароль для распаковки архива newart.ru). Проверял на Windows 10.
📥 Неудовлетворенный двумя предложенными вариантами пользователь может посетить страницу загрузки Scratch на сайте разработчика и скачать еще версии под macOS, ChromeOS и Android.

📕 Scratch для детей (учебник по Scratch 2 в PDF на русском, текст распознан).
📕 Scratch 3 для юных программистов (учебник по Scratch 3 в PDF на русском, текст распознан).
📓 Справочник по блокам Scratch (онлайн, русский).
📓 Справочник по блокам Scratch (онлайн wiki, английский).

Видео:
📺 Введение в Scratch (10 минут на русском).
📺 Канал продвинутого скретчера griffpatch на ЮТубе (подробно и профессионально разбираются сложные и интересные сценарии создания приложений).


Ещё конструкторы игр, викторин и приложений вообще для веба:
ActivePresenter – для интерактивных анимационных презентаций, тестов и скринкастов
Articulate Storyline – конструирование онлайновых презентаций, викторин и обучающих курсов
Clickteam Fusion – конструктор 2D-игр под различные платформы
Construct 2 – игровой движок для создания 2D-игр и публикации их в HTML5
GDevelop – игровой движок c редактором в вебе, на мобильных и ПК платформах
Google Web Designer – конструктор HTML5 баннеров и приложений
Hippani Animator – удобная анимационная студия с экспортом в HTML, video, анимированный gif
Saola Animate – программа для быстрого и удобного создания анимации в HTML5
Stencyl – игровой движок для создания 2D-игр и публикации их в веб
TurboWarp – продвинутый форк Scratch для создания HTML5 игр и приложений
WYSIWYG Web Builder – мощный визуальный конструктор сайтов
Новости
От рекламы не скрыться
Начинающим аниматорам книга
Спонсориат
Миниигры
домой | живопись | графика | компьютерная графика | поделки | юные художники | темы | комментарии | перлы
конкурсы | игры | релакс | рисовалки | учиться рисовать | детские карты Москвы | детские стихи | статьи | видео | поиск | обратная связь