Как создать флэш приложение
Чтобы создать flash приложение, необходимо иметь о нем конкретное представление. Это значит, что вы должны продумать хотя бы приблизительный сценарий приложения. После этого можно начинать работать непосредственно во flash-редакторе.
Для начала вам необходимо определить размеры будущего приложения. К примеру, если это будет стандартный баннер, его размеры составят 468 мм на 60 мм. Укажите эти параметры в разделе Movie Properties в полях Width и Height – они обозначают ширину и высоту соответственно. Затем выбирайте цвет основного фона flash приложения. Чтобы завершить установку параметров, в поле Frame Rate укажите количество кадров в секунду.
Cоздать flash приложение вам поможет специальная программа
Сразу после завершения установки параметров нажимайте левой клавишей мыши на кнопку ОК. Теперь в работу вступает непосредственно сам flash-редактор, который и поможет вам создать flash приложение.
Начинаем создавать анимированное изображение приложения – к примеру, движущуюся надпись. Для этого выбирайте инструмент Text и открывайте панель настройки – Window Panels Characters. В появившемся меню Font щелкайте по панели Characters и выбирайте какой-либо шрифт, к примеру, Times New Roman. Установите его цвет и нужный размер, например, 26-й, напишите им какое-либо слово или предложение. Базовая основа вашего flash приложения готова!
Сделать flash приложение можно в анимированном виде
После этого можно заняться и анимацией. Для этого необходимо преобразовать написанный вами текст в символ. Используйте для этого команду Insert Convert to Symbol. Также присвойте ему какое-либо имя, чтобы впоследствии сохранить на жестком диске.
После этого выделяйте кадр №20 на линейке Timeline и вставляйте самый первый, так называемый ключевой кадр командой Insert Keyframe. При этом с левой стороны от нового кадра вы увидите серую полоску, идущую по направлению от ключевого кадра.
Теперь вам осталось сделать flash приложение активным. Для этого снова вернитесь в первый кадр и перемещайте сделанную вами надпись за пределы его границы в произвольно место за правый край. Затем, не убирая выделения с первого кадра, открывайте панель Window Panels Frame и сразу же переключайтесь на закладку Frame.
Все, что вам осталось сделать, – выбрать в меню Tweening необходимый вам тип анимации. Сразу после этого серая полоса, разделяющая ключевые кадры, приобретет голубой цвет. Вот и все, несложное flash приложение готово!
Эта программа, разработанная компанией Adobe, является, пожалуй, самым известным инструментом для создания флеш-приложений, мультфильмов и анимированных веб-объектов. Отличается большим количеством функций, одной из которых является возможность программирования команд на языке Action Script.
Adobe Flash Builder
Флеш Билдер представляет собой мощный редактор исходного кода приложений с функциями отладки. Может работать как самостоятельный инструмент для разработки программ, так и как вспомогательное средство для редактирования проектов, созданных в Adobe Flash Professional.
KoolMoves
Отблагодарите автора, поделитесь статьей в социальных сетях.
Язык ActionScript 3.0 можно использовать в нескольких средах разработки приложений, включая инструменты Flash Professional и Flash Builder, а также любой текстовый редактор.
В этом примере рассмотрены этапы создания и модернизации простого приложения ActionScript 3.0 с использованием инструмента Flash Professional или Flash Builder. Создаваемое приложение является простой моделью использования внешних файлов классов ActionScript 3.0 в инструментах Flash Professional и Flex.
Проектирование приложения ActionScript
В этом примере приводится стандартное приложение ActionScript, которое называется «Hello World» и имеет простую структуру.
Приложение называется HelloWorld.
В нем отображается одно текстовое поле со словами «Hello World!»
В приложении используется один объектно-ориентированный класс Greeter. Такая структура позволяет использовать класс в проекте Flash Professional или Flex.
В этом примере сначала создается базовая версия приложения. Затем добавляются функции, чтобы пользователь мог ввести свое имя, а приложение проверило наличие имени в списке известных пользователей.
После этого краткого определения можно приступать к созданию приложения.
Создание проекта HelloWorld и класса Greeter
В проектном задании для приложения Hello World говорится, что его код должен допускать простое повторное использование. Чтобы достичь этой цели, в приложении используется один объектно-ориентированный класс Greeter. Этот класс используется в приложении, создаваемом в инструменте Flash Builder или Flash Professional.
Создание проекта HelloWorld и класса Greeter в Flex
Введите HelloWorld в поле «Имя проекта». Убедитесь, что в качестве типа приложения выбрано значение «Web (выполняется в Adobe Flash Player)», а затем нажмите «Готово».
Flash Builder создает проект и показывает его в окне проводника пакетов. По умолчанию проект содержит файл с именем HelloWorld.mxml, который открывается в редакторе.
В диалоговом окне «Новый класс ActionScript» в поле «Имя» введите Greeter в качестве имени класса и нажмите кнопку «Готово».
Теперь появится окно редактирования нового файла ActionScript.
Чтобы создать класс Greeter в инструменте Flash Professional, выполните следующие действия:
В инструменте Flash Professional выберите «Файл» > «Создать».
В диалоговом окне «Создать документ» выберите файл ActionScript и нажмите кнопку «ОК».
Теперь появится окно редактирования нового файла ActionScript.
Выберите команды «Файл» > «Сохранить». Выберите папку для размещения приложения, присвойте файлу ActionScript имя Greeter.as и нажмите кнопку «ОК».
Добавление кода к классу Greeter
Класс Greeter определяет объект Greeter , который используется в приложении HelloWorld.
Добавление кода к классу Greeter
Введите следующий код в новом файле (часть кода может быть уже добавлена):
Класс Greeter включает один метод sayHello() , который возвращает строку с фразой «Hello World!».
Класс Greeter теперь готов для использования в приложении.
Создание приложения с использованием кода ActionScript
Класс Greeter, который был только что создан, определяет самодостаточный набор программных функций, однако он не представляет собой законченное приложение. Для использования класса необходимо создать документ Flash Professional или проект Flex.
При создании кода необходимо использовать экземпляр класса Greeter. Ниже описана процедура использования класса Greeter в приложении.
Чтобы создать приложение ActionScript с использованием инструмента Flash Professional, выполните следующие действия.
В диалоговом окне «Новый документ» выберите «Файл Flash (ActionScript 3.0)» и нажмите кнопку «ОК».
Открывается окно создания документа.
Выберите команды «Файл» > «Сохранить». Выберите папку, в которой находится файл класса Greeter.as, присвойте документу Flash имя HelloWorld.fla и нажмите кнопку «ОК».
В палитре инструментов Flash Professional выберите инструмент «Текст». Перетащите его в рабочей области, чтобы определить новое текстовое поле шириной приблизительно 300 пикселов и высотой 100 пикселов.
На панели «Свойства» при все еще выделенном в рабочей области текстовом поле задайте тип текста как «Динамический текст» и введите mainText в качестве имени экземпляра текстового поля.
Щелкните кнопкой мыши первый кадр временной шкалы. Откройте панель «Действия», выбрав меню «Окно» > «Действия».
На панели «Действия» введите следующий сценарий:
Чтобы создать приложение ActionScript с использованием инструмента Flash Builder, выполните следующие действия.
Откройте файл HelloWorld.mxml и добавьте код в соответствии со следующей распечаткой:
Этот проект Flex включает четыре тега MXML:
Тег <s:Application> определяет контейнер приложения.
Тег <s:layout> определяет стиль компоновки (вертикальная компоновка) для тега Application.
Тег <fx:Script> включает некоторую часть кода ActionScript.
Код в теге <fx:Script> определяет метод initApp() , который вызывается при загрузке приложения. Метод initApp() задает текстовое значение текстовой области mainTxt для строки «Hello World!», возвращенной методом sayHello() только что созданного класса Greeter.
Публикация и проверка приложения ActionScript
Разработка программного обеспечения — это интерактивный процесс. После написания кода его необходимо компилировать и редактировать до тех пор, пока он не будет полностью соответствовать поставленным задачам. Необходимо запустить скомпилированное приложение и проверить, что оно выполняет задачи, описанные в задании. Если нет, необходимо редактировать код, пока не будет получен нужный результат. В средах разработки Flash Professional и Flash Builder предусмотрено несколько способов для публикации, проверки и отладки приложений.
Ниже приводятся основные этапы проверки приложения HelloWorld в каждой из упомянутых сред.
Чтобы опубликовать и проверить приложение ActionScript с использованием инструмента Flash Professional, выполните следующие действия.
Если при тестировании приложения в окне «Вывод» отображаются ошибки и предупреждения, исправьте эти ошибки в файле HelloWorld.fla или HelloWorld.as. Затем повторно проверьте приложение.
При отсутствии ошибок компиляции приложение Hello World появится в окне Flash Player.
После успешного создания простого, но законченного объектно-ориентированного приложения ActionScript 3.0, можно приступить к Модернизация приложения HelloWorld.
Чтобы опубликовать и проверить приложение ActionScript с использованием инструмента Flash Builder, выполните следующие действия.
Приложение HelloWorld будет запущено.
Если при тестировании приложения в окне «Вывод» отображаются ошибки и предупреждения, исправьте эти ошибки в файле HelloWorld.mxml или Greeter.as. Затем повторно проверьте приложение.
При отсутствии ошибок компиляции приложение Hello World появится в открывшемся окне обозревателя. На экране должен отображаться текст «Hello World!»
После успешного создания простого, но законченного объектно-ориентированного приложения ActionScript 3.0 можно приступить к Модернизация приложения HelloWorld.
Модернизация приложения HelloWorld
Чтобы сделать приложение более интересным, можно ввести в него подтверждение имени пользователя после сверки с заданным списком имен.
Прежде всего нужно обновить класс Greeter, расширив его функциональные возможности. Затем следует обновить приложение, чтобы оно могло использовать новые функции.
Обновление файла Greeter.as
Откройте файл Greeter.as.
Измените содержимое файла следующим образом (новые и измененные строки выделены жирным шрифтом):
Класс Greeter имеет теперь новые свойства:
В массиве validNames содержится список разрешенных имен пользователей. При загрузке класса Greeter в массиве устанавливается список из трех имен.
Метод sayHello() принимает имя пользователя и изменяет приветствие в зависимости от определенных условий. Если имя пользователя userName задано пустой строкой ( "" ), свойство greeting устанавливается на запрос имени пользователя. Если имя пользователя принято, приветствие выглядит так: "Hello, userName ." И, наконец, при невыполнении предыдущих двух условий переменная greeting устанавливается таким образом: "Sorry userName , you are not on the list." («Извините, [имя пользователя], Вас нет в списке»).
Метод validName() возвращает истинное значение true , если введенное имя inputName найдено в массиве validNames , и возвращает ложное значение false , если имя не найдено. Инструкция validNames.indexOf(inputName) сверяет каждую строку массива validNames со строкой введенного имени inputName . Метод Array.indexOf() возвращает положение указателя первого экземпляра объекта в массиве. Он возвращает значение -1, если объект не найден в массиве.
Затем необходимо изменить файл приложения, в котором существует ссылка на этот класс ActionScript.
Чтобы изменить приложение с использованием инструмента Flash Professional, выполните следующие действия.
Откройте файл HelloWorld.fla.
Измените сценарий в Кадре 1 так, чтобы пустая строка ( "" ) перешла в метод sayHello() класса Greeter:
Выберите инструмент «Текст» в палитре инструментов. Создайте два новых текстовых поля в рабочей области. Расположите их рядом друг с другом под существующим текстовым полем mainText .
В первом новом текстовом поле, которое является меткой, введите текст Имя пользователя:.
Выберите другое текстовое поле и установите его тип в инспекторе свойств как «Вводимый текст». В качестве типа строки выберите Single line (отдельная строка). Введите textIn в качестве имени экземпляра.
Щелкните кнопкой мыши первый кадр временной шкалы.
На панели «Действия» добавьте следующие строки в конце имеющегося сценария:
Новый код добавляет следующие функциональные возможности:
Первые две строки просто задают границы для двух текстовых полей.
Настраиваемая функция keyPressed() проверяет, будет ли нажата именно клавиша Enter. Если требуемая клавиша нажата, метод sayHello() объекта myGreeter передает текст из текстового поля textIn в качестве параметра. Этот метод возвращает строку приветствия на основе переданного в него значения. Возвращенная строка затем назначается свойству text текстового поля mainText .
Полный сценарий для Кадра 1 выглядит следующим образом:
Чтобы изменить приложение с использованием инструмента Flash Builder, выполните следующие действия.
Откройте файл HelloWorld.mxml.
Затем измените тег <mx:TextArea> , чтобы показать пользователю, что текст используется только для отображения. Измените цвет фона на светло-серый и задайте для атрибута editable значение false :
Теперь добавьте следующие строки непосредственно после закрывающего тега <s:TextArea> . Эти строки создают компонент TextInput, который позволяет пользователю вводить значение имени пользователя:
Атрибут enter определяет действия, которые выполняются при нажатии пользователем клавиши Enter в поле userNameTxt . В этом примере код передает текст, введенный в поле, в метод Greeter.sayHello() . Приветствие в поле mainTxt изменяется соответственно.
Файл HelloWorld.mxml имеет следующий вид:
Сохраните отредактированный файл HelloWorld.mxml. Выберите «Выполнить» > «Выполнить HelloWorld» для выполнения приложения.
Вы не задумывались, что скрывается за красивой анимацией баннеров в интернете? Или за новомодными мультиками, созданными с помощью компьютерных технологий? Чаще всего в их основе лежит « плоть », точнее так переводится с английского название технологии Flash . Сегодня мы поговорим о флеш анимация для сайта:
Технология Flash
Область современного применения Adobe Flash :
- Создание веб-приложений – достаточно новое направление. Подразумевает полное или частичное применение Flash для создания сайтов. При частичном применении с помощью данной технологии создаются отдельные элементы дизайна: различные интерактивные меню, анимированные кнопки и т.д.
По сравнению с обычными ресурсами на основе html флеш-сайты обладают некоторыми особенностями, ограничивающими их применение. Сюда можно отнести большую стоимость разработки, требовательность к серверным ресурсам, долгое время загрузки при медленном соединении с интернетом и некоторые другие аспекты:
- Реализация мультимедийных возможностей – для прослушивания аудио и воспроизведения видео на сайтах часто используют медиа плееры, созданные на основе Flash . Их разработка включает в себя использование одного из скриптовых языков ( чаще JavaScript ):
- В средствах интернет-рекламы – чаще всего технология используется для создания анимированных баннеров. Они подразумевают не только проигрывание мультимедийной рекламы, но и некое взаимодействие с пользователем на игровой основе.
Основы и инструментарий для разработки Flash
Для создания флеш анимации чаще всего используется традиционный инструментарий от Adobe :
- Adobe Flash Professional – программа для создания интерактивной анимации ( аниматор );
- Adobe Flash Builder – среда для создания интерфейса веб-приложений;
- Adobe Flash Player – интегрируемый в браузер плеер для воспроизведения Flash .
Кроме него воспроизводить мультимедийное содержимое такого типа может ряд сторонних приложений. Наиболее популярными из них являются Gnash , QuickTime и некоторые другие:
Данная технология позволяет отображать любой тип графики ( растровую, векторную, 3D ). А также поддерживает потоковую ретрансляцию аудио и видео данных. Специально для мобильных устройств была разработана облегченная версия Flash Lite .
Основным стандартом для флэш-файлов является расширение SWF . Аббревиатура расшифровывается как Small Web Format . Видео, записанное в Flash , имеет файловые расширения FLV , F4V .
В основе разработки интерактивной анимации на флэш лежит векторная графика. Именно благодаря этому удалось реализовать поддержку мультимедийной платформы и независимость качества анимации от разрешения экрана.
Размер файла флэш приложения одинаков для всех пользователей независимо от технических характеристик экрана ( разрешения ).
Интерактивная анимация на Flash основана на морфинге ( векторного типа ), при котором происходит медленное перетекание между ключевыми кадрами. Для воспроизведения данных используется флэш-плеер, работа которого во многом схожа с работой виртуальной машины JavaScript . Программная составляющая технологии реализована с помощью языка ActionScript .
К недостаткам технологии можно отнести следующие моменты:
- Сильная нагрузка на центральный процессор клиентской машины. Это связано с низкой эффективностью виртуальной машины флэш, встраиваемой вместе с проигрывателем в браузер пользователя;
- Высокая вероятность возникновения ошибок – проигрывание флэш анимации может происходить с высокой вероятностью возникновения ошибок. Причем сбои в проигрывании Flash негативно влияют на работу всего клиентского приложения ( браузера ). Это связано это с недостаточным контролем отказоустойчивости программного кода при создании флэш-приложений;
- Невозможность индексирования – весь текстовый контент, отображаемый в содержимом Flash , не участвует в процессе индексации. Данное ограничение особенно проблематично для тех ресурсов, которые созданы на основе этой технологии.
Обзор стороннего программного обеспечения для создания Flash
В качестве опытного образца приложения, на котором мы будем демонстрировать основы создания Flash , был взят Sothink SWF Quicker . По мнению многих профессионалов, программа является наиболее понятной и простой для изучения.
Кроме создания и редактирования флэш редактор « умеет » работать со всеми остальными видами веб-анимации ( GIF , HTML и другие стандарты):
После инсталляции заходим в дружественный интерфейс программы. К сожалению, после блуждания по всем закоулкам переключателя языка интерфейса мы не нашли.
Для того чтобы понять, как сделать флеш анимацию в этом приложении, воспользуемся встроенными шаблонами. Диалоговое окно « New From Template » появляется сразу после запуска программы. Кроме того его можно вызвать через пункт главного меню « File ». Среди предлагаемых вариантов мы выбрали создание баннера:
В следующем окне мастера из выпадающего списка нужно выбрать шаблон, по которому будет происходить создание анимации. Под ним находится небольшой фрейм, в котором проигрывается выбранный шаблон:
На следующих этапах нужно задать размеры баннера и ввести 5 фраз текста, которые будут проигрываться в анимации. Кроме того необходимо указать адрес ресурса, на который пользователя приведет клик по баннеру:
После компиляции проекта и закрытия окна мастера можно просмотреть получившийся ролик во встроенном проигрывателе. Для этого нужно нажать на зеленую стрелку вверху:
После закрытия проигрывателя давайте более подробно изучим интерфейс приложения. Обратите внимание, что он состоит из двух основных окон: верхнее предназначено для редактирования временного промежутка ролика, а нижнее представляет собой обычный графический редактор. Каждый из элементов расположен на отдельном слое, который доступен для изменения с помощью стандартных инструментов, расположенных на боковой панели:
Созданную флеш анимацию для сайта можно опубликовать. Способ публикации можно выбрать, нажав вверху на кнопку « Publish ». Предлагается на выбор три варианта, в том числе и вставка в html код. Детальная настройка этого процесса доступна в отдельном окне « Publish Settings »:
Для ознакомления предоставляется бесплатная версия программы сроком на 30 дней. Полная стоимость Sothink SWF Quicker составляет 85$:
Ближайшие конкуренты приложения:
- SwishMAX ;
- Alligator Flash Designer .
В заключение хотелось бы отметить, что выбор программы является важным, но не основным аспектом. Для создания Flash вам потребуется не только проверенное и надежное приложение, но и знание основ веб-программирования. Так что для начала нужно « приобрести » нужный багаж знаний, а уже потом заняться выбором специализированного программного обеспечения.
Внимание: Перед прочтением данной статьи, посетит эту. Что бы изначально убедиться, что Ваш телефон/планшет поддерживает Adobe Air.
Если вы уже ранее работали в среде разработки Flash, то вы наверное задавали себе вопрос о том, как попробовать написать приложение под AS2. Данный язык скриптов очень удобен, но увы практические не реализуем на платформе Android. Связанно это с тем, что AS2 формально устарел, и на его место пришел более совершенный и гораздо быстрый язык AS3. В некоторых аспектах, он намного превосходит своего старшего, сдавшего позиции собрата в плане удобства программирования. Но об этом чуть попозже.
Сейчас же я предлагаю открыть приложение Adobe Flash CS6 или другую версию поддерживающую AS3.
Открываем программу Flash:
После открытия программа предлагает нам выбрать один из создаваемых шаблонов. Раз уж мы будем разрабатывать приложение под android, соответственно выбираем нужную категорию из списка "AIR for Android".
После запуска программы, я бы посоветовал вам расставить все инструменты в удобную вам позицию. Лично для меня обычно привычен интерфейс прошлых версий флеша, но вы можете настроить так как будет вам удобно. Так же обязательно после создания приложения, не забудьте сохраниться т.к. компилируемый файл для android не сможет создаться без прописания места сохранения основного файла.
Также обратите внимание, на правой панели есть вкладка свойства, где изначально приписано разрешение экрана в компилируемом приложении, и частота кадров. В этой панели вы можете установить нужные вам размеры. Скажем специально для Galaxy Tab 2 10.1 можно установить разрешение 1200 на 800, и частоту кадров 35 и т.д. Также стоит упомянуть, что не надо думать, что с такими настройками это приложение не запустится на других планшетах или смартфонах(у которых разрешение отлично от нашего). Чудо вектора (основной вид графики в Flash) заключается в том что это математический массив данных, состоящий из геометрических примитивов (точка, линия, кривая, овал и т.д.). Для нас же это значит что вся графика, запускаемая в приложении Flash - автоматически будет подгоняться под размеры экрана устройства на котором запущенно. Так что с этими параметрами можно смело экспериментировать.
Cначала попробуем изменить разрешение нашего приложение на 400x400. Для этого нажмем на числовые показатели и за место них введем другие значения.
Выполнив эту операцию вы должны заметить, что в вкладке свойства начали отображаться данные созданного нами текстового поля.
. и нажать "Тень".
Как видите, наш текст очень неплохо преобразился.
Ну а теперь, дело за малым - скомпилируем наше приложение на Android. Если у вас ещё стоит выделение на тексте, нужно его снять, что бы увидеть свойства приложения. Обычно это делается на панели инструментов простым переключением на инструмент "Стрелку".
После этого нам откроются те самые заветные настройки свойства приложения. а также вкладка "Опубликовать". Именно с этих настроек и начинается компиляция.
Нажмите на иконку гаечного ключа, напротив значения списка "AIR 3.2 for Android".
Перед нами появилось Настройки AIR for Android, и начинаем мы с "Общих параметров":
Файл вывода - обычное имя выходного файла.
Имя приложения - имя приложения после установки в системе Android.
Идентификатор приложения: - точно не скажу, но вроде это системное имя файла.
Ну а остальные значения думаю пояснения не требуют. Скажу только что вы можете выставить их по своему усмотрению. Или установить их так, как показано на примере.
Далее у нас идут настройки "Развертывание":
Тут настройки сертификата, т.е. вы как владелец данного приложения заполняете всю информацию о себе как производителе. Создать приложение без сертификата нельзя, так что давайте заполним все данные и создадим новый сертификат. Данные заполнять можно свои, можно произвольные. хотя если вы серьёзно настроены на создание приложения для последующего его размещения на google market - вводите адекватные данные.
По завершению заполнения сертификата, не забудьте создать ему пароль и указать место сохранения. Операцию эту мы проводим только один раз, при последующих компиляциях мы будем только указывать адрес сертификата и вводить его пароль для подтверждения.
Снова возвращаемся в настройки "Развертывание": сертификат создан, вводим его пароль для подтверждения. Далее хотелось бы сказать о таких интересных настройках как среда выполнения AIR. Что бы запустить приложение написанное на AIR, данная программа должна быть установлена на планшет или смартфон. но есть одно НО, эту программу не обязательно ставить, если вписать сам проигрыватель в приложение, однако это чревато увеличению размера нашего приложения на 6-8 мегабайт (телефоны которые не поддерживают по своим характеристикам AIR - с внедренным проигрывателем, всё равно не смогу его запустить). Как раз выбор о том, что бы внедрить или не внедрять проигрыватель в своё приложение и устанавливается в разделе "Среда выполнения AIR".
Далее радостно жмём кнопку "Опубликовать".
Если всё сделано правильно, программа выдаст что apk файл успешно собран. В случае если он выдаст ошибку, попробуйте сохранить приложение в отдельную папку (если вы ещё не успели это сделать в самом начале), или же сохранить файл таким образом, что в имени файла были только латинские символы.
Теперь можно переместить собранный apk на карту памяти телефона/планшета и установить.
Читайте также: