создаем интерактивную книгу для Андроид Android HTML5 для веб сайта

Создаем интерактивную книгу для детей (с бесплатным Construct 2)

Хотите создать интерактивную книгу на HTML5 (для веб-сайта абсолютно бесплатно!) или для других платформ (для Android, Windows, Linux и др. – возможно будет нужна платная версия), тогда выбираем конструктор Construct 2 – здесь не нужно знать программный код!

Скачать исходники для статьи можно ниже

Лучший способ привить детям любовь к чтению – это интерактивные книжки с яркими иллюстрациями, анимациями и увлекательными играми. Теперь дети смогут не только читать, но и участвовать в сюжете, помогая любимым героям.

Для создании интерактивной книги Вам также могут помочь мои статьи про конструктор Construct 2, где мы создавали игру – вот рубрика с данными статьями, кликайте и изучайте!

Первое, что нужно сделать это закачать HTML5 конструктор – Construct 2 – переходим на официальный сайт программы:

“scirra.com”

или с моего по ссылке:
“mnogoblog.ru/wp-content/uploads/2019/03/constr2.zip”

Давайте же создадим интерактивную сказку “Три поросёнка”.

Ниже Вы сможете скачать готовый файл с игрой:
Скачть zip-папку с игрой!
Разархивируйте скачанную папку и откройте её с помощью Construct 2.

Для игры понадобятся следующие картинки:

Для анимации поросенка использовал следующую картинку:

В итоге получилось 4 файла:
На листе tp1 – поросёнок рассказывает сказку – нужно кликать по поросёнку, чтобы он продолжал рассказывать.

На листе tp2 – расположена простая игра – нужно перетаскивать соломку к домику, чтобы он вырос.

1 файл tp1:

2 файл evtTp1 (лист действий к листу tp1):

3 файл tp2:

4 файл evtTp2 (лист действий к листу tp2):

Приступаем к созданию с “нуля” инерактивной сказки “Три поросенка”.

Открываем Construct 2 в верхнем меню выбираем пункт File, подпункт New:

В открывшемся окошке выбираем New empty project:

Кликаем по белому холсту левой кнопкой мышки и с помощью кнопки “-” на клавиатуре уменьшаем холст до удобных Вам размеров.

В левой панели меняем два параметра Layout Size м Margins на 1200, 800:

После в этой же левой панели кликаем на ссылку View:

И меняем параметр Windows Size на 960, 640

Полный набор картинок к сказке “Три поросенка” можно скачать по следующей ссылке: “mnogoblog.ru/wp-content/uploads/2019/03/3pig.zip”

PS: Статья в процессе написания…

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *