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

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 для детей (учебник в PDF на русском, текст распознан).
📓 Справочник по блокам Scratch (онлайн, русский).
📓 Справочник по блокам Scratch (онлайн wiki, английский).

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


Ещё статьи для вебмастеров, расширяющие технологический кругозор:
Памятка начинающему вебмастеру
Как работать с Flash в современное время
Спецсимволы HTML – коды около 2000 дизайнерских иконок
Blumentals WeBuilder – удобнейший редактор кода с предпросмотром
WYSIWYG Web Builder – мощный визуальный конструктор сайтов
RocketCake – лаконичный визуальный конструктор сайтов
Pinegrow – стильный визуальны конструктор сайтов
Lunacy – для макетирования интернет-страниц
Flip PDF – конвертор PDF документов в HTML5 приложение
Hi Slider – программа для создания продвинутых jQuery слайдеров
WOW Slider – программа для создания красивых HTML5 слайдеров
Amazing Slider – программа для создания HTML5 слайдшоу, галерей, альбомов
Sozi – программа для создания стильных HTML5 презентаций с перелетами между слайдами
Stencyl – игровой движок для создания 2D-игр и публикации их в веб
Moodle – практика администратора СДО
MediaWiki – как использовать для ведения и хранения документации
MediaWiki – как скачивать Wiki-страницы в PDF
MediaWiki – как подсвечивать синтаксис программного кода
Nicepage – конструктор сайтов и тем для CMS
PowerPoint в HTML5 – обзор софта конвертации
SVG – как сделать анимацию линии (имитацию рисования)
TimelineJS – библиотека для хронологических лент
TurboSite – лаконичный конструктор многостраничных сайтов
TurboWarp – продвинутый форк Scratch для создания HTML5 игр и приложений
HTTP – коротко о протоколе
OpenAPI – спецификация, визуализация, инструментарий
Camtasia Studio – видеоредактор с экспортом в интерактивный HTML5 проигрыватель
Инструменты для создания прототипов интернет-страниц: Axure и ProtoShare
Что нужно знать об электронных платежах вебмастеру интернет-магазина
Индекс цитирования сайта – что это?
Как создать интерактивный кроссворд на сайте?
Новости
От рекламы не скрыться
Начинающим аниматорам книга
Спонсориат
Миниигры
домой | живопись | графика | компьютерная графика | поделки | юные художники | темы | комментарии | перлы
конкурсы | игры | релакс | рисовалки | учиться рисовать | детские карты Москвы | детские стихи | статьи | видео | поиск | обратная связь