Пишем приложение AIR под iOS: работаем с касаниями и акселерометром.

flash ios adobe airВ этом несложном уроке я покажу работу flash.ui.Multitouch и flash.sensors.Accelerometer на примере тестового приложения Air для iOS.
 
 
 
 
 
 
 

Доброго времени суток!


Меня зовут Роман и это мой первый (кросс)пост на FlashGameBlogs. Опыт – всего одна игрушка на Box2D, купленная Rocanten. :)

В этом уроке я напишу и скомпилирую iOS-приложение из-под Win 7, используя исключительно Adobe Flash и, соответственно, ActionScript 3 без всяких дополнений. В данной статье не рассматриваются проблемы оптимизации приложений, не проводится конверсия векторной графики в растровую и не тестируется Box2D (всё равно это бесполезно, с физикой нужно работать на Cocos2d). Однако при помощи этого урока можно создать простейшую программку под i-Девайс и сделать первый шаг к полноценной разработке приложений, используя те инструменты, которые подходят под Ваши нужды.

Оригинал статьи тут.

Внимание! Все ужатые картинки кликабельны!

В моём распоряжении джейлбрейкнутый iPod Touch четвёртого поколения ёмкостью 64 Gb, Adobe Flash CS6, липовый сертификат разработчика, а так же программка iFunBox, необходимая для установки приложения с последующим тестированием. В отличие от оригинального урока, в котором код пишется в кадрах, я иерархически разделяю приложение на несколько классов, для собственного удобства сохранённых отдельно. Первый шаг простой: запускаем Flash, кликаем Air for iOS, задаём размеры 640х960 (родное разрешение iPod Touch 4, iPhone 4.). Для тестирования на прочих устройствах, используйте 1136x640 (iPhone 5, iPod Touch 5), 1024x768 (iPad 1, 2, Mini), 2048x1536 (iPad 3, он же New и 4). Далее я сохраняю мой проект: File – Save as… – Testing.fla в папку приложения. После этого я вписываю в качестве документ-класса App и жму карандаш.

Изображение 1. Размеры и FPS.


adobe air, actionscript 3, акселерометр, касание, touch event, flash, ios

Изображение 2. Класс документа.


adobe air, actionscript 3, акселерометр, касание, touch event, flash, ios

Класс сохраняю в ту же папку, куда сохранял Testing.fla. Класс называется, естественно, App.as.

Класс App.as:

package  {
	
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.display.Stage;
	import com.testing.iosMenu; // импортируем класс менюшки
	import flash.events.TouchEvent;	 
	
	public class App extends MovieClip {
		public var menu:iosMenu; // переменная, которая создаст экран меню
		public static var stageApp:Stage; // декларируем сцену
		
		
		public function App() 
		{
			trace("App initialized, checking Menu.");
			if(stage) // если сцена уже есть, то запускаем инициализацию
			{
				init(null);
			}
			else
			{
				addEventListener(Event.ADDED_TO_STAGE, init); // в противном случае ждём, пока появится сцена
			}
		}// function
		
		public function init(event:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init); // убираем листенер
			stageApp = stage; // декларируем сцену
			menu = new iosMenu(); // создаём новую менюшку
			stageApp.addChild(menu); // добавляем её на сцену. сейчас будет кнопка плей :)
		}
	}// class
	
}//package


В App.as мы запускаем проверку наличия сцены. Если проверка пройдена, то инициализируем меню с одной кнопкой – Play. Исходники приложения с комментариями, сертификат и скомпилированное приложение можно скачать по ссылке в конце статьи.

В папке приложения создаём папку com, в папке com создаём папку testing. Далее во флэше: File – New – ActionScript 3.0 Class с именем com.testing.iosMenu. Сохраняем в каталог Приложение/com/testing/iosMenu.as. Этот класс будет отвечать за работу одной-единственной кнопки и запуск самой игры. Очень важно не забыть импортировать классы Multitouch и MultitouchInputMode!

Класс iosMenu.as:

package com.testing {
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.display.Stage;
	import com.testing.playButtonCl; // импортируем привязанный класс кнопки плей.
	import com.testing.gameScreenCl; // импортируем класс, в котором происходит обработка игровых событий
	import flash.events.TouchEvent; // импортируем аналог MouseEvent, чтобы обрабатывать касания пальцем
	import flash.ui.Multitouch; // импортируем обработчика TouchEvent
	import flash.ui.MultitouchInputMode; // импортируем режим касания
	
	public class iosMenu extends MovieClip {
		
		public static var playB:playButtonCl; // переменная под кнопку Плейс
		public static var gameScr:gameScreenCl; // переменная под игровой экран
		

		public function iosMenu() {
			trace("Menu initialized, waiting for Game Screen.");
			if(stage) // если сцена уже есть, то запускаем инициализацию
			{
				init(null);
			}
			else
			{
				addEventListener(Event.ADDED_TO_STAGE, init); // в противном случае ждём, пока появится сцена
			}
		}
		
		
		public function init(event:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init); // убираем листенер
			Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT; // ОБЯЗАТЕЛЬНО! Задаём тип ввода TOUCH_INPUT, иначе кнопка не будет реагировать на касания.
			
			playB = new playButtonCl(); // создаём новый экземпляр кнопки Плей
			playB.x = App.stageApp.stageWidth/2; // позиционируем прямо посередине экрана
			playB.y = App.stageApp.stageHeight/2;
			playB.scaleX = playB.scaleY = 2.0; // увеличим масштаб в два раза
			App.stageApp.addChild(playB); // добавляем кнопку на сцену
			playB.addEventListener(TouchEvent.TOUCH_TAP, startGame); // ставим слушателя на кнопку, чтобы начать игру по тапу.

		}
		
		public function startGame(event:TouchEvent):void // тип эвента - тачЭвент.
		{
			gameScr = new gameScreenCl(); // создаём новый игровой экран
			gameScr.x = App.stageApp.stageWidth/2; // как всегда по центру
			gameScr.y = App.stageApp.stageHeight/2;
			App.stageApp.addChild(gameScr); // добавляем на сцену
			playB.removeEventListener(TouchEvent.TOUCH_TAP, startGame); // убираем листенер с кнопки
			App.stageApp.removeChild(playB); // убираем саму кнопку
		}

	}
	
}


Далее создаём класс gameScreenCl. Он отвечает за добавление шарика на сцену и обработку данных акселерометра.

Класс gameScreenCl.as:

package com.testing {
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.display.Stage;
	import flash.sensors.Accelerometer; // импортируем устройство акселерометра
	import flash.events.AccelerometerEvent; // импортируем события акселерометра
	import com.testing.ballMoving; // импортируем привязанный класс шарика
	
	public class gameScreenCl extends MovieClip {
		public static var ballM:ballMoving; // переменная шарика
		public static var ipodAcc:Accelerometer = new Accelerometer(); // переменная акселерометра
		public static var tX:int = 0; // акселерометр по Х
		public static var tY:int = 0; // акселерометр по Y

		public function gameScreenCl() {
			trace("Game Screen initialized, Accelerometer Ready.");
			if(stage) // если сцена уже есть, то запускаем инициализацию
			{
				init(null);
			}
			else
			{
				addEventListener(Event.ADDED_TO_STAGE, init); // в противном случае ждём, пока появится сцена
			}
		}
		
		public function init(event:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			
			ballM = new ballMoving(); // создаём новый экземпляр шарика
			ballM.x = App.stageApp.stageWidth/2; // позиционируем как обычно посередине экрана
			ballM.y = App.stageApp.stageHeight/2;
			App.stageApp.addChild(ballM); // добавляем его на сцену
			
			this.addEventListener(Event.ENTER_FRAME, loop);	// добавляем слушатель, который будет обновлять координаты шарика	
			
			ipodAcc.addEventListener(AccelerometerEvent.UPDATE, update); // мониторим акселерометр, записывая его изменение в переменные

		}
		
		public function update(event:AccelerometerEvent):void
		{
			tX = event.accelerationX*100; // записываем изменения Х акселерометра в переменную, умн. на 100, т.к. значение очень мелкое.
			tY = event.accelerationY*100; // записываем изменения Y акселерометра в переменную
		}
		
		public function loop(event:Event):void // постоянно двигаем шарик в соответствии с изм. акселерометра
		{
			ballM.x += ((ballM.x + tX) - ballM.x)*0.3; // отражаем изменения в акселерометре на шарике.
			ballM.y += ((ballM.y - tY) - ballM.y)*0.3; // вот и всё!
		}

	}
	
}


В testing.fla Insert – New Symbol с вот такими параметрами:

Изображение 3. Создание символа ballMoving.


adobe air, actionscript 3, акселерометр, касание, touch event, flash, ios

Это будет шарик-кружок, управление которым производится с помощью акселерометра i-Девайса. Обязательно пропишите класс мувиклипа! В символе ballMoving рисуем вот такой кружок 100х100. Позиционируем его строго по центру.

Изображение 4. Рисунок в символе ballMoving.


adobe air, actionscript 3, акселерометр, касание, touch event, flash, ios

Далее создаём новую кнопку с именем playButtonGraphics и привязкой к классу com.testing.playButtonCl. Естественно, сохраняем по вложенным путям.

Изображение 5. Простая кнопка Play.


adobe air, actionscript 3, акселерометр, касание, touch event, flash, ios

На данный момент иерархия приложения выглядит вот так:

Изображение 6. Структура папок и классов.


adobe air, actionscript 3, акселерометр, касание, touch event, flash, ios

Возвращаемся в testing.fla. В окне Properties возле надписи Air 3.2 for iOS нажимаем на гаечный ключ – заходим в настройки Air for iOS Settings.

Изображение 7. Вызов настроек Air.


adobe air, actionscript 3, акселерометр, касание, touch event, flash, ios

Приводим их к следующему виду:

Изображение 8. Общие настройки Air.


adobe air, actionscript 3, акселерометр, касание, touch event, flash, ios

Пароль сертификата 1234. Ставим галку Remember password for this session.

Изображение 9. Настройки публикации .ipa.


adobe air, actionscript 3, акселерометр, касание, touch event, flash, ios

Теперь настало время подготовить иконки приложения. Нам потребуется только три штуки: 29х29, 57х57 и 512х512. Процесс создания иконок описывать нет смысла, а готовые файлики лежат в архиве.

Изображение 10. Настройки иконок .ipa.


adobe air, actionscript 3, акселерометр, касание, touch event, flash, ios

Изображение 11. Выбираем готовые иконки для .ipa.


adobe air, actionscript 3, акселерометр, касание, touch event, flash, ios

Вернёмся в testing.fla. В окошке Properties жмакаем Publish settings и приводим их к такому виду:

Изображение 12. Настройки публикации приложения.


adobe air, actionscript 3, акселерометр, касание, touch event, flash, ios

Далее жмакаем гаечный ключ возле ActionScript 3.0 и выходим в настройки. Так как багов в коде нет, я снял галки Strict Mode и Warnings Mode для более шустрой компиляции.

Изображение 13. Настройки ActionScript3.


adobe air, actionscript 3, акселерометр, касание, touch event, flash, ios

После сохранения настроек снова забегаем по гаечному ключику Air. Зайдя в раздел Deployment вводим пароль 1234 (если не сохраняли), нажимаем Publish и ждём.

Изображение 14. Процесс публикации приложения.


adobe air, actionscript 3, акселерометр, касание, touch event, flash, ios

Мой файл получился размером 4.45 мегабайта. Довольно много для флешки, но i-Девайсы бывают минимум от 8 гигабайт, поэтому волноваться о размере .ipa незачем. :)

Устанавливаем приложение через iFunBox.

Изображение 15. Заливка на девайс.


adobe air, actionscript 3, акселерометр, касание, touch event, flash, ios

Любуемся на иконку, запускаем. Скриншоты с самого устройства:

Изображение 16. У иконки автоматически скруглены углы и добавлен блик.


adobe air, actionscript 3, акселерометр, касание, touch event, flash, ios

Как видно по следующему скрину, на картинке есть артефакты. Скорее всего, это вызвано изменением масштаба кнопки. Возможно, в AIR вектор самостоятельно конвертируется в растр, а изменение масштаба сработало только после кэширования.

Изображение 17. Менюшка удачно запустилась.


adobe air, actionscript 3, акселерометр, касание, touch event, flash, ios

Ну вот акселерометр и заработал на нас:

Изображение 18. Три скрина работы приложения в один ряд.


adobe air, actionscript 3, акселерометр, касание, touch event, flash, ios

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

Таким образом, по прочтении данного урока, Вы научились работать с новыми методами тач-ввода во Флэше, использовать акселерометр под i-девайсы, а так же компилировать свою собственную тестовую приложеньку.

В завершение урока хотелось бы немного подробнее описать типы сенсорного ввода.

Элемент управления MultitouchInputMode.TOUCH_POINT указывает на то, что Air обрабатывает события мышки и тапов по экрану, а вот MultitouchInputMode.GESTURE обрабатывает мышку и жесты, но не тапы. В стандартном MultitouchInputMode.NONE Air обрабатывает только события мыши.

Обработка мультитач-событий достаточно обширна:

TOUCH_BEGIN – начало прикосновения.
TOUCH_END – конец прикосновения.
TOUCH_MOVE – перемещение точки прикосновения (игрок водит пальцем по экрану).
TOUCH_OVER – точка прикосновения переместилась в пределы интерактивного объекта. В отличие от TOUCH_ROLL_OVER, данное событие распространяется на все дочерние элементы объекта.
TOUCH_OUT – точка прикосновения переместилась за пределы интерактивного объекта. В отличие от TOUCH_ROLL_OUT, данное событие распространяется на все дочерние элементы объекта.
TOUCH_ROLL_OVER – точка прикосновения переместилась в пределы интерактивного объекта.
TOUCH_ROLL_OUT – точка прикосновения переместилась за пределы интерактивного объекта.
TOUCH_TAP – обычный тап пальцем.

Кроме того свойства события прикосновения включают в себя такой параметр как pressure (0.0… 1.0). Как нетрудно догадаться, он определяет силу нажатия, но поддерживается не на всех устройствах. Так же, у класса Sprite появилось два новых метода, позволяющие пользователю таскать спрайт пальцами: startTouchDrag и stopTouchDrag.

Есть три типа событий, относящихся к жестам: GestureEvent, PressAndTapGestureEvent и TransformGestureEvent. Обработка жестов включает в себя следующие пункты:
 
GestureEvent.GESTURE_TWO_FINGER_TAP – тап двумя сложенными пальцами.
GesturePressAndTap.GESTURE_PRESS_AND_TAP – игрок, удерживая один палец, тапнул вторым.
TransformGestureEvent.GESTURE_ROTATE – игрок вращает объект на экране двумя пальцами.
TransformGestureEvent.GESTURE_SWIPE – свайп = зачеркивание строки или скролл.
TransformGestureEvent.GESTURE_ZOOM – игрок двумя пальцами приближает изображение.

Скачать исходник + .ipa + сертификат разработчика!

Stay tuned!

Оригинал статьи тут.
  • +15

Комментарии (12)

+1
Автор конечно молодец, но дико информация устарела. Как минимум Можно использовать Adobe AIR 3.5 ибо 3.2 не работает с iOS6
0
Учту. :)
0
Flash CS6 с последним апдейтом может ставить приложение напрямую в девайс без других программок )
+1
Обычно при работе с акселерометром, его показатели прогоняют через фильтр низких частот.
Это позволяет игнорировать очень маленькие(ложные) колебания.
0
А вообще здорово и полезно. Вроде бы ничего сложного, но у меня руки так и не дошли разобраться (хотя все собирался), а тут все на блюдечке.
0
Спасибо, рад, если пригодится.
+3
Имеется здоровенный урок в двух частях почти годовалой давности по созданию простой игры для android.
FlashDevelop + AIR SDK, с акселерометром, локальным хранением настроек, native extention.
Рассчитан урок в первую очередь на тех, кто умеет работать с as3, но с air, особенном мобильным, дела не имел.
Если кому-то интересно, могу запостить урок на этом сайте с доработками и исправлениями.
+1
Конечно, интересно, с удовольствием бы прочитал! :)
0
Присоединяюсь к romaniac. Очень интересно. Обязательно публикуйте.
0
Неплохо было бы.
0
Очень хотелось бы почитать!
+1
Вижу, интерес есть. Так тому и быть. Скоро опубликую.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.