Рабочий процесс создания прототипов

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

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

Видеопособие по созданию прототипов интерфейсов приложений см. на странице 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 предоставляет возможность проектирования страниц и одновременного экспорта их в HTML и CSS-код путем использования механизма экспорта, анализирующего расположение объектов. Кроме того, можно устанавливать выравнивание страницы и задавать повторяющееся фоновое изображение.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Выберите меню «Файл» > «Экспорт».

  2. Во всплывающем меню «Экспорт» выберите «CSS и изображения».

  3. Чтобы задать свойства страницы HTML, нажмите кнопку «Параметры».

  4. Чтобы задать фоновое изображение и мозаичное размещение фонового изображения, нажмите кнопку «Обзор»

    • Выберите «Не повторять», чтобы однократно вывести изображение на экран.

    • Выберите «Повторять», чтобы повторять (или расположить мозаичным способом) изображение по горизонтали и вертикали.

    • Выберите «Повторять-x», чтобы расположить изображение мозаичным способом по горизонтали.

    • Выберите «Повторять-y», чтобы расположить изображение мозаичным способом по вертикали.

  5. Выберите выравнивание страницы в браузере: по левому краю, по центру или по правому краю.

  6. Выберите режим прокрутки вложения как «фиксированное» или «прокрутка».

  7. Нажмите кнопку «ОК», а затем «Сохранить».

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

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

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

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

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

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

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

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

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

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

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

Примечание.

При редактировании компонента проекта Flex в Fireworks можно скопировать измененный код XML в проект Flex. Это позволяет сэкономить время, если необходимо воспроизвести поведение измененного компонента в проекте.

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

Примечание.

Фрагменты изображений, ролловеры и активные области применяются только к прототипам на основе HTML. При создании прототипов Flex следует избегать использования этих веб-объектов.

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

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

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

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

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

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

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

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

  1. Выберите компонент Flex на холсте.

  2. Откройте панель «Свойства символа» («Окно» > «Свойства символа»).

  3. Задайте свойства и события для компонента на панели «Свойства символа».

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

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

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

  1. Выберите меню «Файл» > «Экспорт».

  2. Во всплывающем меню «Экспорт» выберите «MXML и изображения».

  3. Выберите параметр «Поместить изображения во вложенную папку», если необходимо сохранить изображения в отдельной папке, а не вместе с кодом MXML.

  4. Выберите параметр «Только текущая страница», чтобы экспортировать выбранную в настоящее время страницу.

  5. Нажмите кнопку «Сохранить», чтобы завершить процесс экспорта.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  2. Выберите папку для экспорта документа Fireworks и нажмите «Открыть».

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

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

Экспорт MXML не поддерживает компоненты обложек

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

Функция MXML игнорирует фрагменты

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

Свойства 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, не задавая его параметры.

  1. Выберите «Команды» > «Создать пакет AIR» и нажмите «Предварительный просмотр».

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

  1. Выберите «Команды» > «Создать пакет AIR» и задайте следующие параметры:

    Имя приложения

    Укажите имя, которое будет отображаться в окнах установки приложения. Расширение указывает имя узла Fireworks по умолчанию.

    Идентификатор приложения

    Введите уникальный идентификатор приложения. В идентификаторе нельзя использовать пробелы или специальные символы. Допустимы только символы 0-9, a-z, A-Z, . (точка) и - (дефис). Этот параметр является обязательным.

    Версия

    Укажите номер версии приложения. Этот параметр является обязательным.

    Папка меню «Программы»

    Укажите папку меню «Пуск» в Windows, в которой требуется разместить ярлык приложения (неприменимо для Mac OS).

    Описание

    Описание, которое отображается при установке приложения.

    Авторские права

    Информация об авторских правах, которая отображается в диалоговом окне «О программе» в приложениях Adobe AIR, устанавливаемых в Mac OS. Эти сведения не используются для приложений, устанавливаемых на компьютерах Windows.

    Содержимое пакета

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

    Корневое содержимое

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

    Включаемые файлы

    Укажите, какие файлы и папки должны быть включены в приложение. Можно добавлять файлы HTML и CSS, файлы изображений и библиотек JavaScript. Для добавления файлов нажмите кнопку с плюсом (+), а для добавления каталогов — значок папки. Чтобы удалить файл или папку из списка, выделите этот элемент и нажмите кнопку со значком минус (-). Файлы и папки, которые выбираются для включения в пакет Adobe AIR, должны находиться в папке с корневым содержимым.

    Системный хром и прозрачность

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

    Ширина и высота

    Задайте размеры окна приложения при открытии в пикселях.

    Выбрать изображения значков

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

    Примечание.

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

    Цифровая подпись

    Нажмите кнопку «Задать», чтобы добавить в приложение цифровую подпись. Этот параметр является обязательным. Дополнительную информацию см. в следующем разделе.

    Файл пакета

    Укажите папку для сохранения установочного файла нового приложения (файл .air). По умолчанию используется корень узла. Чтобы выбрать другое расположение, нажмите кнопку «Обзор». В качестве имени файла по умолчанию используется название сайта с расширением .air. Этот параметр является обязательным.

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

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

  1. В диалоговом окне «Создать пакет AIR» нажмите кнопку «Установить», расположенную рядом с параметром «Цифровая подпись».

  2. Выполните в диалоговом окне «Цифровая подпись» одно из следующих действий.

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

    • Чтобы создать собственный автоматический цифровой сертификат, нажмите кнопку «Создать» и заполните поля в диалоговом окне. Параметр сертификата «Тип ключа» указывает на уровень безопасности сертификата: для «1024-RSA» используется 1024-разрядный ключ (менее безопасный), для «2048-RSA» — 2048-разрядный ключ (более безопасный). После завершения нажмите кнопку «Создать». Затем введите соответствующий пароль в диалоговом окне «Цифровая подпись» и нажмите «ОК».

      Примечание. На компьютере должна быть установлена среда выполнения Java® Runtime Environment (JRE).

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет