• Подписаться на свежие статьи на android-lamer.ru

Уроки App Inventor — первые шаги

Если вы уже изучили окно дизайна App Inentor, редактор блоков и научились подключать эмулятор или Android устройство — можно приступать к изучению небольших уроков по App Inentor.

Уроки App Inentor представлены в виде простых примеров использования компонентов и блоков для формирования различных типовых конструкций.

Добавление звуков.
 Добавление реакции на тряску Android устройства.
Движение в разных направлениях по нажатию кнопки.
Движение с помощью сенсора направления.


Добавление звуков.

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

В окне дизайна наберем компоненты:добавление-звука_-дизайн
• Image1 (изображение)
• Button1 (кнопка)
• Player1 (проигрыватель)
• Sound1 (звук)

Загрузим медиафайлы  и сделаем их источниками для соответствующих компонентов, назначив их в свойствах:

Картинку (для изображения Image)
Фоновую музыку (для проигрывателя Player)
Короткий звук (для звука Sound)

В редакторе блоков набираем  блоки:

добавление-звука_блоки

Все блоки ищем на вкладке «My Blocks» в выпадающих меню  соответствующих компонентов.

 

В результате при загрузке приложения появляется слон и кнопка «трубить!», начинает звучать музыка. Если нажать на кнопку — раздается крик слона.


Добавление реакции на тряску Android устройства.

Приложение будет состоять из текстовой строки «По-тряси меня!» и звука, который проигрывается если устройство потрясти.

Компоненты, которые мы берем в окне дизайна:звук-от-тряски-компоненты
• Label1 (текстовая строка)
• Sound1 (звук)
• AccelerometerSensor1 (акселерометр)

Загрузим звук  и сделаем его источником для компонента Sound1.
Для текстовой строки Label1 в свойстве «Text» прописываем »По-тряси меня!» Чтобы текст был посередине — в свойстве «TextAlignment»(выравнивание текста) выставим горизонтальное выравнивание «Center», в свойстве «Width»(ширина) выставим «Fill parent».

В редакторе блоков собираем конструкцию:звук-от-тряски---редактор-блоков

Все блоки за исключением number берем на вкладке »My Blocks» в выпадающих меню  соответствующих компонентов. Блок  number на вкладке «Bulit-in» в меню «math» (математика).

После запуска приложения вы увидите на экране текстовую строку «По-тряси меня!» , если вы потрясете устройство —  раздастся загруженный вами звук и устройство завибрирует.

Очевидно, что посмотреть полноценную работу приложения на эмуляторе не получится, ибо там нет акселерометра. Подключайте реальное Android  устройство по Wi-fi или USB.


Движение в разных направлениях по нажатию кнопки.

Приложение будет состоять из кнопки и маленькой кошачьей бошки, движущейся влево или вправо при нажатии этой самой кнопки.

В окне дизайна выберем компоненты:движение-влево-вправо-app-inventor
• Canvas1 (область анимации движения)
• ImageSprite1 (спрайт изображение)
• Left_Right_Button (кнопка)
• Right_move_Clock (таймер для движения вправо)
• Left_move_Clock (таймер для движения влево)

Загрузим изображение  и сделаем его источником (picture) для компонента ImageSprite1.
Для компонента Canvas1 зададим размеры — в моем случае я выбрал по ширине «Width» опцию «Fill parent» это значит заполнить родительскую — то есть на всю ширину экрана, по высоте «Height»  350 px.

Для таймеров Right_move_Clock и Left_move_Clock в свойствах снимем галочки «TimerAlwaysFires» и «TimerEnabled» и выставим «TimerInterval» 10

Хочу отметить, что если вы используете много компонентов, а также по нескольку одинаковых, то стоит их переименовывать в контексте их применения, чтобы не запутаться при создании конструкции приложения из блоков.

В моем случае я переименовал кнопку и таймеры. Каждый из двух таймеров отвечает у меня за движение влево или вправо, а кнопка переключает направление движения на противоположное.

Конструкция в редактор блоков:

Все блоки что содержат в названии:
Left_Right_Button, Right_move_Clock, Left_move_Clock, ImageSprite1  - берем на вкладке «My Blocks» в выпадающих меню  соответствующих компонентов.

Остальные блоки на вкладке «Bulit-in»:программировать-движение-app-inventor •«ifelse»  - в меню «control»
•«true/false» — в меню «logic»
•«number»- в меню «math»
•«text» — в меню «text»

Когда приложение запускается вы видите маленькую кошачью бошку и кнопку, если нажать кнопку — бошка будет двигаться вправо до края экрана, если снова нажать — движение будет влево. Надпись на кнопке соответственно будет меняться.


Движение с помощью сенсора направления.

Маленькая ракета будет летать по космосу когда вы наклоняете в разные стороны ваше Android устройство.

В окне дизайна выберем компоненты:компоненты-для-движения-по-сенсору-ориентации
• Canvas1 (область анимации движения)
• ImageSprite1 (спрайт изображение)
• OrientationSensor1 (сенсор ориентации)
• Clock1 (таймер)

Загрузим два изображения — картинку с космосом и ракету. Космос назначим в свойствах Canvas1 фоновым изображением (backgroundimage), а ракету сделаем источником (picture) для ImageSprite1.

Для таймера Clock1 в свойствах оставляем галочки «TimerAlwaysFires» и «TimerEnabled». Для OrientationSensor1 галочку «Enabled» оставляем на месте.

В редакторе блоков формируем следующую схему:

движение-по-сенсору-ориентацииБлоки у которых в названии Clock1, ImageSprite1, OrientationSensor1 - берем на вкладке «My Blocks» в выпадающих меню  соответствующих компонентов. Блок procedure, тот что в таймере , берется в меню «My Definition», он появится там только после того, как вы создадите верхний блок procedure.

OrientationSensor1.Angle — сообщает ракете в какую сторону двигаться в зависимости как расположено в пространстве ваше устройство. OrientationSensor1.Magnitude — придает ракете скорость, в зависимости от скорости ваших движений устройством.
Таймер зацикливает все действия процедуры.

Верхний блок procedure и блок number берете на вкладке «Bulit-in» в «Definition» и «Math» соответственно.

При запуске приложения появится картинка с космосом и ракета на ней, когда вы будете наклонять и всячески поворачивать устройство — ракета начнет вращаться и летать.

Посмотреть работу приложения вы сможете, естественно, только на реальном Android устройстве, ибо задействован сенсор ориентации.


Это была первая часть сборника уроки App Inventor — первые шаги, продолжение будет. В дальнейшем я вероятно не буду расписывать так подробно, что откуда брать и т.д., надеюсь освоив все уроки в этой статье вы поймете что к чему и будете неплохо разбираться сами. Я лишь буду показывать компоненты и готовые блоки, с необходимыми минимальными комментариями.

А здесь видео, где собраны эти уроки App Inventor — возможно там все будет более наглядно.

В новом посте рассмотрим следующие примеры:
рисование
создание собственного цвета
определение столкновения объектов

Не пропускйте новые статьи!

Введите свой E-mail
для уведомлений о новых статьях:

Закладка постоянная ссылка.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>