Приложение “Слайд-шоу”

1

Приложение “Слайд шоу”

Перед началом работы Описание приложения

Создание проекта

Разработка дизайна приложения

Программирование

Оформление приложения

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

Перед началом работы

Перед тем как создавать данное приложение, необходимо убедиться что:           На вашем мобильном устройстве установлена программа MIT

AI2 Companion App

•              Открыта страница среды MIT App Inventor  http://ai2.appinventor.mit.edu/

•              Вы изучили материал Интерфейс среды визуального программирования  MIT App Inventor

Описание приложения

Приложение  “Слайд -шоу ” позволяет пользователю создать слайд-шоу на основе фотографий.

Используемые компоненты:

•       Надпись - компонент, который используется для вывода фрагментов текста  на экран.

•       Кнопка - компонент, при нажатии на который будет проигрываться звуковой файл.

•       Изображение - компонент, в котором отображаются графические файлы

•       ГоризонтальноеРасположение - компонент позволяющий расположить объекты внутри приложения рядом друг с другом.

Приложение включает в себя один  экран  Screen1  

Раздел “Медиа” содержит 6  файлов изображений (только для данного примера приложения)

Создание проекта

                     Нажмите кнопку “Начать новый проект” и задайте имя проекта  “SlideShow”

Разработка дизайна приложения экрана Screen1

•       Выделите компонент “Screen1” и установите свойства  o ВыровнятьПоГоризонтали   -  Центр o ВыровнятьПоВертикали   -  Центр

•       Перетащите  компонент “Надпись”  на экран приложения

•       Нажмите кнопку “Переименовать”  и введите  новое название Надписи -

“НадписьЗаголовок”

Установите следующие свойства для компонента “Надпись”

o    Размер шрифта -20

o    Текст -  “Краски лета”

•       Перетащите компонент “Изображение”  в окно экрана

•       Переименуйте компонент Изображение, присвоив ему новое название ИзображениеВывод

•       Установите следующие свойства для компонента “Изображение” o Высота  - 275 o Ширина - 300

o    Источник  - ris1.png

•       Загрузите  следующие рисунки в  приложение o   ris1.png o   ris2.png o   ris3.png o   ris4.png o   ris5.png o   ris6.png

•       Перетащите в окно приложения  компонент ГоризонтальноеРасположение

•       Перетащите два компонента Кнопка в окно Горизонтального расположения

•       Переименуйте  первый компонент Кнопка в КнопкаНазад,

•       Установите следующие параметры компонента  КнопкаНазад o      текст - Назад

•       Аналогичным образом, переименуйте второй компонент Кнопка в КнопкаДалее и измените  в свойствах компонента   текст -  введите “Далее”

Программирование экрана Screen1

•       Перейдите в режим “Блоки”

•       Выделите группу блоков Переменные и перетащите в окно Просмотр блок

 Инициализировать Глобальную.  Введите в поле  имя переменной “Index”

•       Выделите блоки Математика и перетащите блок для ввода числовых значений.

•       Выделите блок Переменные и перетащите  в окно Просмотр блок  Инициализировать

Глобальную.  Введите в поле  имя переменной “Images”

•       Выделите блоки Массивы и перетащите в окно блок Создать список.

•       Выделите и добавьте в конструкцию текстовый блок. Введите имя файла изображения  ris1.png в качестве первого элемента массива.

•       Добавьте еще 5 элементов к массиву, чтобы включить в него еще 5 изображений.

•       Конструкция блоков, определяющих массив изображений, будет выглядеть следующим образом:

•       Перейдем к программированию Кнопок. Выделите компонент КнопкаДалее и перетащите блок Когда КнопкаДалее. Щелчок в окно Просмотр.

•       Выделите  блок  Управление и перетащите в окно Просмотр конструкцию  “Если...То…”

•       Добавьте в конструкцию “Если -То” элемент “Иначе”

•       Выделите блок Математика и перетащите в окно Просмотр блок сравнения.

•       Выделите блок Переменные и перетащите в конструкцию сравнения первый элемент

Получить. globalIndex

•       Во вторую часть блока сравнения перетащите блок ДлинаСписка.Список

•       Выделите блок Переменные и дополните конструкцию блоком Получить GlobalImage  

•       Измените знак сравнения переменной Index c  длиной списка наших изображений на знак  “<” ( меньше).

•       Выделите блок переменные и  перенесите в конструкцию блок  Присвоить. globalIndex

•       Выделите блок Математика и дополните конструкцию блоком “Сложение”

•       В качестве первого элемента блока Сложения задайте блок  Получить. GlobalIndex

•       В качестве второго элемента задайте числовое значение “1”

•       В область иначе перетащите блок  Присвоить. GlobalIndex

•       Дополниете конструкцию  задав   математическое  значение  равное   “1”

•       Выделите компонент “Изображение” и добавьте в конструкцию блок Присвоить.ИзображениеВывод.Изоюражение

•       Дополните конструкцию блоком  Выбрать это элемент списка - индекса

•       Добавьте в конструкцию блок Получить GlobalImage

•       Добавьте в конструкцию блок Получить GlobalIndex

•       Для программирования кнопки Назад скопируйте полученную конструкцию и измените выделенные элементы,  по ранее приведенному алгоритму.

6. Оформление приложения

•       Перейдите в режим “Дизайнер”

•       Выделите компонент Screen1  следующие свойства для   Screen1 o Название приложения ( AppName) - “SlideShow” o Иконка приложения -  “ris1.png” o Заголовок экрана - “Слайд шоу”

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

•       Загрузите  приложение  на мобильное устройство с помощью меню Построить>Приложение (Создать QR-код для скачивания .apk)

•       Появится QR-код программы

•       Для запуска программы запустите на мобильном устройстве MIT AI2 Companion App и просканируйте фотокамерой  устройства  QR-код приложения

•       Установите приложение на устройство

•       После завершения установки  открыть приложение при помощи иконки на рабочем столе или в меню «Все приложения».