Создание прототипов для приложений 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.

• Статья Джима Баббиджа (Jim Babbage) Подборка практических рекомендаций по работе с Fireworks CS4: импорт, экспорт, символы, прототипы, масштабирование.

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

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

  • Создание интерактивных прототипов при помощи Fireworks: http://www.adobe.com/go/learn_fw_creatinginteractivepro_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, как кнопки, объекты выпадающего списка и текстовые поля. Свойства этих элементов можно отредактировать посредством панели «Свойства символа». При перетаскивании любого элемента формы на страницу механизм экспорта вставляет теги <form> во время экспорта макета на основе CSS.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание демонстрационной версии документа

Можно создать демонстрационную версию документа Fireworks, с которым вы работаете. Она открывается в браузере для демонстрации функций и позволяет перемещаться по страницам.

1. Выберите «Команды» > «Демоверсия текущего документа».

2. Выберите страницы, для которых нужно создать демонстрационный файл, и нажмите «Создать демо».

3. Выберите папку и нажмите кнопку «Открыть».

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

Процесс создания прототипа для приложения Flex похож на рабочий процесс создания веб-сайтов и интерфейсов приложений (см. раздел Рабочий процесс создания прототипов). В приложении Fireworks можно перетаскивать компоненты Flex на холст, указывать их свойства и экспортировать получившийся пользовательский интерфейс в MXML. Можно дополнительно отредактировать этот пользовательский интерфейс в приложении Flex Builder.

Создание пользовательского интерфейса Flex

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

Вставка компонентов проекта Flex в макет

Вставьте на холст компоненты Flex из папки Flex панели «Общая библиотека». Эти составные символы ведут себя определенным образом при экспорте в MXML, обеспечивая необходимый результат. При экспорте документа в MXML каждый из этих символов преобразуется в соответствующий тег MXML. Объекты, не распознанные как компоненты Flex, экспортируются как растровые изображения, связанные с MXML посредством тега <mx:Image> (см. раздел Создание и использование составных символов).

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

Использование общих компонентов Flex на нескольких страницах

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

Задание свойств для компонентов Flex

На панели «Свойства символа» («Окно» > «Свойства символа») укажите свойства и события для каждого компонента Flex, вставленного на холст.

Экспорт макета Flex в MXML

Экспортируйте макет пользовательского интерфейса Flex и откройте получившийся файл MXML в приложении Flex. Программа Fireworks экспортирует необходимые данные MXML с сохранением стилей и абсолютного позиционирования. Разработчики Flex могут использовать этот интерфейс без необходимости повторного создания макета в приложении Flex.

Редактирование свойств компонента Flex

Можно редактировать свойства и события компонентов Flex на панели «Свойства символа».

Экспорт документа Fireworks в MXML

Приложение Fireworks упрощает создание макетов многофункциональных интернет-приложений (RIA), обеспечивая экспорт ресурсов из общей библиотеки в виде известных компонентов для использования в Adobe Flex Builder. Программа Fireworks экспортирует необходимый код Flex (MXML) с сохранением стилей и абсолютного позиционирования.

Завершив создание прототипа приложения Flex, экспортируйте его в MXML для дальнейшего редактирования в программе Flex Builder. В представлении Design прототип выглядит так же, как в Fireworks, за исключением таких компонентов, как курсоры и полосы прокрутки, которые не экспортируются.

Создание и экспорт обложек Flex

Можно создавать для компонентов Flex обложки в приложении Fireworks, а затем экспортировать их для последующего использования при создании веб-сайтов и интерфейсов приложений на основе Flex.

Использование обложек для компонентов Flex

Обложки можно создавать для самых разных компонентов Flex с помощью шаблонов обложек Flex и редактировать их в Fireworks.

1. Выберите «Команды» > «Использование обложек Flex» > «Новая обложка Flex».

2. Выполните одно из следующих действий:

   • Чтобы создать обложки Flex для всех имеющихся компонентов, выберите «Несколько компонентов».

     Fireworks создаст один документ со всем доступными компонентами Flex.

   • Чтобы указать компоненты, для которых требуется создать обложки, выберите «Определенные компоненты».

     Выберите только компоненты с прикрепленным определенным стилем или выберите все экземпляры компонента.

3. Нажмите кнопку «ОК».

Экспорт обложек Flex

Ограничения экспорта MXML

Прежде чем пользоваться функцией экспорта в Flex MXML, важно знать о ее возможностях и ограничениях:

При экспорте в MXML обложки для компонентов Flex не создаются, даже если они были отредактированы в Fireworks. Функция экспорта MXML просто создает документы MXML, которые можно использовать в среде Flex. Эти документы также могут включать связанные изображения для объектов Fireworks, которые нельзя преобразовать в теги MXML. Эти изображения добавляются в документ MXML с помощью тегов <mx:Image>.

Поскольку функция экспорта в MXML служит для создания документов с тегами, которые можно использовать в среде Flex, фрагменты не учитываются при создании изображений или ячеек таблиц. Когда функция экспорта в MXML создает изображения, она использует параметры оптимизации документа для определения формата изображения и метода сжатия.

Функция экспорта в MXML создает свойства тега MXML на основе компонента Flex в Fireworks. Приложение Fireworks предоставляет набор компонентов Flex с ограниченным количеством свойств.

Свойства, распознаваемые как стили, отделяются от создаваемых тегов MXML, но сохраняются в том же документе MXML в тегах <mx:Style>. Приложение Fireworks не определяет стили как внешний файл CSS.

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

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

Adobe^® AIR™ для Fireworks позволяет преобразовывать прототипы Fireworks в приложения для настольных компьютеров. Например, некоторые страницы прототипа взаимодействуют между собой для отображения данных. Можно с помощью Adobe AIR упаковать этот набор страниц в небольшое приложение, устанавливаемое на пользовательский компьютер. Когда пользователь запускает приложение со своего настольного компьютера, приложение загружает и отображает прототип в собственном окне приложения, независимом от браузера. Пользователи могут просматривать прототипы локально, на своих собственных компьютерах, без подключения к Интернету.

См. статью Этана Айсманна (Ethan Eismann) об Adobe AIR и создании фирменных моделей взаимодействия: http://www.adobe.com/go/learn_fw_airexperiencebrand_ru.

Добавление событий Adobe AIR, связанных с мышью

Имеется возможность добавления предустановленных событий Adobe AIR, связанных с мышью, к объектам в документе. Fireworks поддерживает четыре предустановленных события, связанных с мышью: закрыть окно, перетащить окно, развернуть окно и свернуть окно.

1. Выберите на холсте объекты, к которым необходимо применить поведение события, связанного с мышью.

2. Выберите «Команды» > «События AIR, связанные с мышью» и выберите событие.

Предварительный просмотр приложения Adobe AIR

Вы можете выполнить предварительный просмотр приложения Adobe AIR, не задавая его параметры.

Создание приложения Adobe AIR

Цифровая подпись приложения Adobe AIR

Цифровая подпись гарантирует, что код приложения не был изменен или поврежден после создания автором программного обеспечения. Все приложения Adobe AIR требуют цифровой подписи и без нее не устанавливаются.