Проект "Мурлыкающий котёнок"

Цель: Создать простое интерактивное приложение, в котором при касании изображения котёнка будет воспроизводиться звук мурчания.

Этот проект научит вас работать с изображениями, звуками и обрабатывать события касания на экране. Идеально подходит для начинающих пользователей MIT App Inventor.

Чему вы научитесь:

  • Добавлять и настраивать изображения
  • Работать со звуковыми файлами
  • Обрабатывать события касания
  • Создавать простые интерактивные приложения
1
Подготовка ресурсов
2
Создание интерфейса
3
Программирование
4
Тестирование

Шаг 1: Подготовка ресурсов

  • Откройте MIT App Inventor и создайте новый проект с названием "PurringKitten".
    • Создать приложение
  • Для этого проекта нам понадобятся два ресурса:
    1. Изображение котёнка - привлекательное изображение котёнка для главного экрана
    2. Звук мурчания - аудиофайл с мурчанием котёнка
  • Скачайте необходимые ресурсы из нашего центра загрузок в разделе "Ресурсы и материалы".
    1. Найдите и скачайте ZIP-архив "kitten_resources.zip", в котором содержатся все необходимые файлы для проекта
    2. Распакуйте архив - внутри вы найдёте файл изображения "kitten.png" и звуковой файл "purr.mp3"
    3. Теперь эти файлы готовы для загрузки в ваш проект MIT App Inventor
  • Загрузите скачанные файлы в ваш проект MIT App Inventor:
    1. В правой панели "Media" (Медиа) нажмите кнопку "Upload File..." (Загрузить файл...)
    2. Выберите и загрузите сначала файл "kitten.png"
    3. Повторите процесс для файла "purr.mp3"
    • Загрузка медиа-файлов
  • После загрузки вы увидите оба файла в списке медиа-ресурсов вашего проекта.
Совет: Если у вас нет возможности скачать ресурсы, вы можете использовать любое подходящее изображение котёнка и звук мурчания. Просто убедитесь, что изображение имеет формат .png или .jpg, а звук - формат .mp3 или .wav.
Важно: Убедитесь, что имена загруженных файлов совпадают с именами, которые будут использоваться в проекте (kitten.png и purr.mp3). Если имена файлов отличаются, вам нужно будет соответствующим образом изменить их в блоках программирования.

Шаг 2: Создание интерфейса приложения

  • Создадим простой и привлекательный интерфейс для нашего приложения. Начнем с основного контейнера:
    1. В разделе Layout (Макет) найдите компонент VerticalArrangement (Вертикальное расположение)
    2. Перетащите его на экран приложения
    3. В свойствах установите Width (Ширина) и Height (Высота): Fill parent (Заполнить родителя)
    4. В BackgroundColor (Цвет фона) выберите приятный светлый цвет (например, светло-голубой или светло-розовый)
    5. Установите AlignHorizontal (Горизонтальное выравнивание) и AlignVertical (Вертикальное выравнивание) в значение Center (По центру)
    • Добавление вертикального расположения
  • Добавим заголовок приложения:
    1. Из раздела User Interface (Пользовательский интерфейс) перетащите компонент Label (Надпись) в VerticalArrangement1
    2. В свойствах установите Text (Текст): "Погладь котёнка!"
    3. Установите TextColor (Цвет текста): контрастный цвет (например, тёмно-синий)
    4. Установите FontSize (Размер шрифта): 22 и FontBold (Жирный шрифт): True (Да)
    5. Установите Width (Ширина): Fill parent (Заполнить родителя) и TextAlignment (Выравнивание текста): Center (По центру)
    • Добавление заголовка
  • Теперь добавим изображение котёнка:
    1. Из раздела User Interface (Пользовательский интерфейс) перетащите компонент Image (Изображение) в VerticalArrangement1 под заголовком
    2. В свойствах Picture (Изображение) выберите загруженный файл "kitten.png"
    3. Установите Width (Ширина) и Height (Высота): 300 пикселей (или подходящий размер)
    4. Убедитесь, что свойство Clickable (Кликабельность) установлено в значение True (Да)
    • Добавление изображения котёнка
  • Добавим невидимый компонент для воспроизведения звука:
    1. В разделе Media (Медиа) найдите компонент Sound (Звук)
    2. Перетащите его на экран (он появится в разделе "Non-visible components" (Невидимые компоненты))
    3. В свойствах Source (Источник) выберите загруженный файл "purr.mp3"
    4. Установите MinimumInterval (Минимальный интервал) в значение 500 (это предотвратит слишком частое воспроизведение звука при быстрых повторных касаниях)
    • Добавление компонента звука
  • Для более привлекательного интерфейса добавим пояснительный текст под изображением:
    1. Перетащите еще один компонент Label (Надпись) в VerticalArrangement1 под изображением
    2. В свойствах установите Text (Текст): "Коснись котёнка, чтобы услышать мурчание"
    3. Установите FontSize (Размер шрифта): 16 и TextColor (Цвет текста): серый цвет
    4. Установите Width (Ширина): Fill parent (Заполнить родителя) и TextAlignment (Выравнивание текста): Center (По центру)
    • Готовый интерфейс приложения
Совет по дизайну: Для более приятного визуального эффекта вы можете добавить небольшие отступы между элементами, настраивая свойство Margin (Отступ) для каждого компонента. Также можно добавить компонент HorizontalArrangement (Горизонтальное расположение) с невидимым фоном для создания дополнительного пространства между элементами.

Шаг 3: Программирование интерактивности

  • Перейдите во вкладку Blocks (Блоки) для программирования логики приложения.
    • Переход на вкладку Blocks
  • Программирование реакции на касание изображения котёнка:
    1. В левой панели найдите компонент Image1 (Изображение1)
    2. Выберите блок when Image1.Click (когда Изображение1.Нажатие) - это событие, которое будет происходить при касании изображения
    3. Перетащите этот блок в рабочую область
  • Воспроизведение звука мурчания:
    1. В левой панели найдите компонент Sound1 (Звук1)
    2. Выберите блок call Sound1.Play (вызвать Звук1.Воспроизведение)
    3. Перетащите этот блок внутрь блока when Image1.Click (когда Изображение1.Нажатие) под блоком анимации
    • Блок обработки касания изображения
Совет по улучшению: Вы можете сделать приложение еще более интерактивным, добавив несколько разных звуков и случайный выбор между ними при каждом касании. Для этого создайте список звуков и используйте блок random integer (случайное целое число) для выбора случайного звука из списка.
Важно! Если вы используете звук с другим именем файла, убедитесь, что указали правильное имя в блоке set Sound1.Source to (установить Звук1.Источник как). Также убедитесь, что свойство Clickable (Кликабельность) для изображения установлено в значение True (Да), иначе обработчик Click не будет работать.

Шаг 4: Тестирование приложения

  • Протестируйте ваше приложение:
    Чтобы проверить работу приложения "Мурлыкающий котёнок", воспользуйтесь одним из способов тестирования, описанных в нашем введении в MIT App Inventor:
    1. Подключите реальное Android-устройство через Wi-Fi или USB
    2. Используйте эмулятор
    3. Создайте APK-файл и установите его на устройство
  • Как проверить работу приложения:
    1. Запустите приложение на устройстве или эмуляторе
    2. Убедитесь, что изображение котёнка отображается корректно
    3. Коснитесь изображения котёнка
    4. Проверьте, что происходит анимация (лёгкое подпрыгивание изображения)
    5. Убедитесь, что воспроизводится звук мурчания
    6. Проверьте, работает ли приложение при повторных касаниях
    • Тестирование приложения
Совет по отладке: Если звук не воспроизводится, проверьте следующее:
  1. Убедитесь, что звук правильно загружен в проект
  2. Проверьте, что имя файла в блоке set Sound1.Source to (установить Звук1.Источник как) точно соответствует имени загруженного файла
  3. Убедитесь, что на устройстве включен звук и установлена достаточная громкость
Поздравляем! Вы успешно создали приложение "Мурлыкающий котёнок"! Это простое, но интерактивное приложение демонстрирует основные принципы работы с изображениями, звуками и обработкой пользовательских действий в MIT App Inventor. Теперь вы можете расширить его, добавив больше функций или создать собственное приложение на основе полученных знаний.

Скачать проект

Если у вас возникли сложности, вы можете скачать готовый файл проекта в нашем центре загрузок:

Перейти в центр загрузок