Как сделать flex air

Создание прототипов для приложений Flex и Adobe AIR

Используя панель «Страницы» и другие мощные функции Fireworks, можно быстро создавать интерактивные прототипы веб-сайтов и приложений. Чтобы преобразовать завершенный прототип в работающий сайт, просто экспортируйте его в программу Adobe Flash ® , Adobe Flex ® , Adobe AIR™ или Adobe Dreamweaver ® .

Общие советы по созданию прототипов см. в следующих статьях на сайте Центра разработчиков Fireworks (на англ. языке).

Статья Ника Майерса (Nick Myers) о проектировании интерактивных продуктов при помощи Fireworks: http://www.adobe.com/go/learn_fw_interactiveproducts_ru

Статья Дейва Кронина (Dave Cronin) о новых веяниях в области создания прототипов: http://www.adobe.com/go/learn_fw_prototypingtrends_ru

Статья Мэтта Стоу (Matt Stow) об использовании встроенных шаблонов CSS в Fireworks: Встроенные шаблоны CSS в Fireworks CS4.

Видеопособие Дейва Хога (Dave Hogue) по использованию Fireworks для проектирования взаимодействия и быстрого создания прототипов:

Использование Fireworks для информационного и интерактивного дизайна: http://www.adobe.com/go/learn_fw_infointeract_ru

Быстрое создание прототипов при помощи Fireworks: http://www.adobe.com/go/learn_fw_rapidpro_ru

Fireworks в составе комплексного процесса проектирования: http://www.adobe.com/go/learn_fw_completedesignpro_ru

Статья о дизайне приложений для веб-сайтов при помощи Fireworks: http://www.adobe.com/go/learn_fw_designwebsiteapp_en

Статья Кумара Вивека (Kumar Vivek) о дизайне содержимого для мобильных устройств при помощи Fireworks: http://www.adobe.com/go/learn_fw_designmobiledevices_ru

Видеопособие по созданию прототипов интерфейсов приложений см. на странице www.adobe.com/go/lrvid4034_fw.

На панели «Страницы» создайте нужное количество страниц или окон для начального проекта. По мере развития проекта можно при необходимости добавлять или удалять страницы.

Расположение общих элементов проекта

Расположите на холсте элементы, например, панели навигации и фоновые изображения, которые будут являться общими для страниц проекта. Чтобы выровнять элементы, используйте «быстрые» направляющие. Чтобы обеспечить максимальную гибкость, структурируйте макет с помощью CSS (см. разделы «Быстрые» направляющие и Создание макетов на основе CSS).

Общее использование элементов на различных страницах

При общем использовании изменение одного элемента приводит к автоматическому обновлению всех соответствующих страниц. Используйте главную страницу для общего использования всех элементов, содержащихся на ней, либо сделайте общими слои для копирования подмножеств элементов (см. Использование главной страницы и Общие слои).

Добавление уникальных элементов на отдельные страницы

Добавляйте на страницы уникальные элементы дизайна, навигации и форм. На панели «Общая библиотека» находится множество кнопок, текстовых полей и всплывающих меню, ускоряющих процесс разработки. Составные символы в папках «Компоненты Flex», «HTML», «Mac», «Win», «Интернет и приложение» и «Строки меню» содержат свойства, которые можно настраивать для отдельных экземпляров символов (см. раздел Создание и использование составных символов).

Моделирование пользовательской навигации с помощью ссылок

Установите ссылки на различные страницы прототипа для веб-объектов, таких как фрагменты, активные области или кнопки навигации (см. раздел Ссылки на страницы в документе Fireworks).

Экспорт завершенного интерактивного прототипа

Fireworks поддерживает различные выходные форматы прототипов, все эти форматы позволяют сохранить гипертекстовые ссылки для навигации по страницам. См. следующие статьи.

Дополнительную информацию об обеспечении для клиентов совместного доступа к гибкому прототипу на основе CSS и о продолжении редактирования в программе Adobe Dreamweaver см. в разделе Экспорт макета CSS.

Дополнительную информацию о создании обычных прототипов на основе таблиц см. в разделе Экспорт Fireworks HTML.

Дополнительную информацию о распространении PDF-версии для обсуждения или печати см. в разделе Экспорт файлов Adobe PDF.

Дополнительную информацию о создании прототипа приложения Flex см. в разделе Создание прототипов приложений Flex. Дополнительную информацию о создании приложения Adobe AIR см. в разделе Создание приложения Adobe AIR.

Создание макетов на основе CSS

Можно создавать макеты на основе CSS в документе Fireworks, а затем преобразовать их в HTML-страницы с правилами CSS, моделирующими макеты. Макеты на основе CSS обеспечивают стандартизованный подход и поддерживают код, совместимый с различными браузерами.

Видеопособие по созданию макетов HTML-страниц на основе CSS см. на странице www.adobe.com/go/lrvid4035_fw_ru. См. также следующие ресурсы.

Пособие по экспорту CSS и изображений из Fireworks, приведенное по адресу: http://www.adobe.com/go/learn_fw_exportcssimages_ru.

Пособие по разработке дизайна веб-страниц с поддержкой стандартов в Fireworks, приведенное по адресу: http://www.adobe.com/go/learn_fw_standardscompliantdesign_ru.

Сведения о макете страницы CSS

Fireworks предоставляет возможность проектирования страниц и одновременного экспорта их в HTML и CSS-код путем использования механизма экспорта, анализирующего расположение объектов. Кроме того, можно устанавливать выравнивание страницы и задавать повторяющееся фоновое изображение.

Можно использовать элементы HTML, находящиеся в папке HTML панели «Общая библиотека». В папке HTML содержатся такие элементы HTML, как кнопки, объекты выпадающего списка и текстовые поля. Свойства этих элементов можно отредактировать посредством панели «Свойства символа». При перетаскивании любого элемента формы на страницу механизм экспорта вставляет теги во время экспорта макета на основе CSS.

Любой текст, на который помещен фрагмент, отображается как изображение в экспортированном HTML. При необходимости отображения текста как обычного текста используйте компоненты HTML панели «Общая библиотека». Компоненты HTML включают заголовки 1-6 и элементы связи.

Правила создания макетов на основе CSS

Для достижения необходимых результатов при создании макетов на основе CSS следует ознакомиться с несколькими правилами.

Правило 1: Для экспорта текста используйте прямоугольники, для экспорта изображений — фрагменты

Механизм экспорта экспортирует текст, помещенный в прямоугольники. При необходимости экспорта изображений помещайте поверх них фрагменты, поскольку экспортируются только те изображения, на которые наложены прямоугольные фрагменты. Такие фрагменты «сообщают» механизму экспорта о наличии изображений.

Правило 2: Избегайте наложения объектов

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

Правило 3: Планируйте положение рядов и столбцов

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

Правило 4: Рассматривайте документ как двухмерный

При разработке страницы используйте прямоугольники для помещения объектов, которые необходимо рассматривать как дочерние элементы прямоугольника. Механизм экспорта распознает такие элементы. Он проверяет дочерние элементы на наличие логических рядов и столбцов, как описано в правиле 3.

В дополнение к этим правилам, примите во внимание следующее:

Механизм экспорта экспортирует только примитивные прямоугольники. Для экспорта скругленных углов прямоугольников поместите поверх них прямоугольные фрагменты.

Для экспорта обводки прямоугольников поместите поверх таких прямоугольников прямоугольные фрагменты.

Для экспорта символов поместите поверх них прямоугольные фрагменты.

Для экспорта фильтров, примененных к тексту или прямоугольникам, поместите поверх них прямоугольные фрагменты.

Экспорт макета CSS

Приложение Fireworks позволяет экспортировать макеты, созданные как файлы на основе CSS. Далее можно открыть и редактировать эти файлы в приложении Dreamweaver или другом редакторе, поддерживающем CSS.

Источник

Создание первого настольного приложения Flex AIR с помощью Flash Builder

Чтобы быстро на практике продемонстрировать, как работает Adobe® AIR®, используйте эти инструкции по созданию и упаковке простейшего SWF-приложения AIR «Hello World» с помощью Adobe® Flash® Builder.

Загрузите и установите Flash Builder, если это еще не сделано. Кроме того, следует загрузить и установить последнюю версию среды Adobe AIR, которая доступна на веб-сайте www.adobe.com/go/air_ru.

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

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

В начале для создания приложений AIR во Flash Builder или Flex Builder выполняется тот же шаг, что и при создании других проектов приложений Flex: определяется новый проект.

Запустите Flash Builder.

Выберите «Файл» > «Создать» > «Проект Flex».

Введите AIRHelloWorld в качестве имени проекта.

Приложения AIR считаются типом приложений во Flex. Существует два типа.

Веб-приложения, которые запускаются в Adobe® Flash® Player.

Настольные приложения, которые запускаются в Adobe AIR.

Выберите тип настольных приложений.

Для создания проекта нажмите «Готово».

Проекты AIR изначально состоят из двух файлов: основного файла MXML и файла приложения XML (также называется файлом дескриптора приложения). В последнем файле определены свойства приложения.

Написание кода приложения AIR

Для написания кода приложения «Hello World» выполняется правка файла приложения MXML (AIRHelloWorld.mxml), который открывается в редакторе. (Если файл не открыт, используйте навигатор проекта, чтобы открыть его.)

Приложения Flex AIR для настольного компьютера заключены в тег WindowedApplication в MXML. Тег WindowedApplication в MXML создает простое окно, включающее простейшие элементы управления окна, такие как строка заголовка и кнопка закрытия окна.

Добавьте атрибут title к компоненту WindowedApplication и назначьте ему значение «Hello World» :

Добавьте в приложение компонент Label (поместите его внутрь тега WindowedApplication). Задайте для свойства text компонента Label значение «Hello AIR» и установите ограничения макета, чтобы обеспечить центрирование элемента, как показано на следующем рисунке:

Добавьте следующий блок стиля сразу после открытия тега WindowedApplication и перед тегом только что введенного компонента Label.

Эти настройки стиля применяются ко всему приложению и визуализируют фон окна в немного прозрачный серый цвет.

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

Далее будут изменены некоторые настройки в дескрипторе приложения, позволяющие обеспечить прозрачность в приложении:

На панели навигатора Flex найдите файл дескриптора приложения в исходном каталоге проекта. Если проект назван AIRHelloWorld, этот файл будет называться AIRHelloWorld-app.xml.

Дважды щелкните файл дескриптора приложения, чтобы отредактировать его в среде Flash Builder.

В коде XML найдите закомментированные строки для свойств systemChrome и transparent (в свойстве initialWindow ). Удалите комментарии. (Удалите разграничители комментариев » и «—>» .)

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

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

Проверка приложения AIR

Чтобы проверить написанный код приложения, выполните его в режиме отладки.

Нажмите кнопку «Отладка» на главной панели инструментов

Также можно выбрать в меню «Запуск» > «Отладка» > AIRHelloWorld.

Полученное приложение AIR должно выглядеть, как показано в следующем примере:

С использованием свойств horizontalCenter и verticalCenter элемента управления Label текст размещается в центре окна. Перемещайте или изменяйте размер окна также, как в любом другом приложении для настольного компьютера.

Упаковка, подписывание и выполнение приложения AIR

Теперь можно упаковать приложение «Hello World» в файл AIR для распространения. Файл AIR — это архивный файл, содержащий файлы приложения, к которым относятся все файлы в папке bin данного проекта. В этом простом примере такими файлами являются SWF- и XML-файлы приложения. Пакет AIR распространяется среди пользователей, которые затем используют его для установки приложения. Обязательным шагом в этом процессе является цифровая подпись приложения.

Убедитесь, что приложение правильно скомпилировано и работает как предполагалось.

Выберите «Проект» > «Экспорт сборки выпуска».

Убедитесь, что указан проект AIRHelloWorld и приложение AIRHelloWorld.mxml.

Выберите «Экспорт в виде подписанного пакета AIR». Нажмите кнопку «Далее».

Если имеется существующий цифровой сертификат, нажмите «Обзор», чтобы перейти к нему и выбрать его.

Если необходимо создать новый самозаверяющий цифровой сертификат, выберите «Создать».

Введите необходимую информацию и нажмите «ОК».

Нажмите кнопку «Готово», чтобы создать пакет AIR с названием AIRHelloWorld.air.

Теперь можно установить и запустить приложение из навигатора проектов в среде Flash Builder или из файловой системы, дважды щелкнув соответствующий файл AIR.

На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Источник

Создание первого настольного приложения AIR с использованием пакета Flex SDK

Для быстрого и наглядного представления принципов работы Adobe® AIR® используйте эти инструкции по созданию простого SWF-приложения AIR «Hello World» с помощью пакета Flex SDK. В данном учебном пособии описаны процедуры компиляции, тестирования и упаковки приложений AIR с помощью инструментов командной строки, включенных в пакет Flex SDK (Flex SDK содержит AIR SDK).

Для начала необходимо установить среду выполнения и настроить Adobe® Flex™. В этом пособии показано использование компилятора AMXMLC, средства запуска AIR Debug Launcher (ADL) и инструмента AIR Developer Tool (ADT). Эти программы находятся в каталоге bin среды Flex SDK (см. раздел «Настройка Flex SDK»).

Создание файла дескриптора приложения AIR

В этом разделе описаны принципы создания дескриптора приложения, представляющего собой XML-файл со следующей структурой:

Создайте XML-файл HelloWorld-app.xml и сохраните его в каталоге проекта.

Последний сегмент пространства имен (2.7) задает версию среды выполнения, которая требуется для приложения.

samples.flex.HelloWorld Идентификатор приложения однозначно идентифицирует приложение в сочетании с идентификатором издателя (который AIR извлекает из сертификата, используемого для подписи пакета приложения). Рекомендуемым форматом является обратная запись строки DNS с использованием точки в качестве разделителя, например «com.company.AppName» . Идентификатор приложения используется для установки, обращения к частному каталогу хранилища файловой системы приложения, доступа к частному зашифрованному хранилищу и взаимодействия между приложениями.

1.0 Помогает пользователям определить, какую версию приложения они устанавливают.

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

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

HelloWorld.swf Определяет корневой SWF-файл приложения AIR для загрузки.

Читайте также:  Ведро снеговика как сделать

true Сразу делает окно видимым.

400 Задает ширину окна (в пикселах).

200 Задает высоту окна.

Сохраните файл. По завершении файл дескриптора приложения должен иметь следующий вид:

В этом примере устанавливается всего несколько возможных свойств приложения. Полный набор свойств приложения, которые позволяют указывать такие аспекты как хром окна, размер окна, прозрачность, каталог установки по умолчанию, связанные типы файлов и значки приложения, см. в разделе «Файлы дескриптора приложения AIR».

Написание кода приложения

Как и во всех приложениях Flex, в приложениях AIR, созданных в среде Flex, содержится основной файл MXML. В приложениях AIR для настольных компьютеров в качестве корневого элемента используется компонент WindowedApplication, а не компонент Application. Компонент WindowedApplication предоставляет свойства, методы и события для управления приложением и его начальным окном. На платформах и в профилях, для которых AIR не поддерживает несколько окон, следует использовать компонент Application. В мобильных приложениях Flex можно также использовать компоненты View и TabbedViewNavigatorApplication.

Следующая процедура позволяет создать приложение «Hello World»:

В текстовом редакторе создайте файл HelloWorld.mxml и добавьте следующий код MXML:

Далее добавьте компонент Label в приложение (поместите его внутрь тега WindowedApplication).

Задайте для свойства text компонента Label значение «Hello AIR».

Установите ограничения макета, чтобы он всегда располагался по центру.

В следующем примере показан код на данном этапе:

Компиляция приложения

Перед выполнением и отладкой приложения скомпилируйте код MXML в SWF-файл с использованием компилятора amxmlc. Компилятор amxmlc находится в каталоге bin пакета Flex SDK. При необходимости можно включить каталог bin пакета Flex SDK в переменную среды для пути на компьютере. Настройка пути делает выполнение утилит в командной строке более простым.

Откройте командную среду или терминал команд и перейдите к папке проекта приложения AIR.

Введите следующую команду:

При выполнении компилятора amxmlc создается файл HelloWorld.swf , содержащий скомпилированный код приложения.

Проверка приложения

Чтобы выполнить и протестировать приложение из командной строки, используйте инструмент AIR Debug Launcher (ADL) для запуска приложения с помощью соответствующего файла дескриптора приложения. (Инструмент ADL находится в каталоге bin пакета Flex SDK.)

Получившаяся программа AIR должна выглядеть примерно так:

С использованием свойств horizontalCenter и verticalCenter элемента управления Label текст размещается в центре окна. Перемещайте или изменяйте размер окна также, как в любом другом приложении для настольного компьютера.

Дополнительные сведения см. в разделе «AIR Debug Launcher (ADL)».

Создание файла установки AIR

Если приложение успешно запущено, можно использовать утилиту ADT, чтобы упаковать приложение в файл установки AIR. Файл установки AIR — это файл архива, в котором содержаться все файлы приложения, которые можно передавать другим пользователям. Перед установкой такого упакованного файла AIR необходимо установить Adobe AIR.

Чтобы обеспечить защиту приложения, все файлы установки AIR должны содержать цифровую подпись. С помощью ADT или другого инструмента генерации сертификатов можно создать простой, самозаверяющий сертификат, используемый в целях разработки. Можно также приобрести коммерческий сертификат подписи кода в коммерческом центре сертификации. Если пользователь устанавливает файл AIR с самозаверяющим сертификатом, то в ходе процесса установки показывается «неизвестный» издатель. Это объясняется тем, что самозаверяющие сертификаты гарантируют лишь то, что файл AIR не изменялся с момента своего создания. Ничто не сможет помешать злоумышленнику сделать файл AIR с самозаверяющим сертификатом и представить его как ваше приложение. Поэтому в выпускаемых для широкого использования файлах AIR рекомендуется использовать обеспечивающие возможность проверки коммерческие сертификаты. Краткие сведения о проблемах системы защиты AIR см. в разделе Система защиты AIR (для разработчиков ActionScript) или Система защиты AIR (для разработчиков HTML).

Создание самозаверяющих подписывающих сертификатов и пары ключей

В этом примере используется минимальный набор атрибутов, которые могут быть установлены для сертификата. Ключ должен иметь тип 1024-RSA или 2048-RSA (см. раздел «Подписание приложений AIR»).

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

Будет выдано предложение ввести пароль для файла ключей. Введите пароль и нажмите клавишу Enter. Символы пароля не отображаются с целью обеспечения безопасности.

Аргумент HelloWorld.air — это файл AIR, создаваемый ADT. HelloWorld-app.xml — это файл дескриптора приложения. Последующими аргументами являются файлы, используемые приложением. В этом примере используются только три файла, но можно включить любое число файлов и каталогов.

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

Источник