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

В этом несложном уроке я покажу работу 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.

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

Класс сохраняю в ту же папку, куда сохранял 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Таким образом, по прочтении данного урока, Вы научились работать с новыми методами тач-ввода во Флэше, использовать акселерометр под 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!

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