Практика создания динамических Web-узлов

Даешь динамику!

Даешь динамику!


Web-узел JCT — хороший пример для понимания сути динамического содержания. Как поставщик одежды, компания сильно зависит от быстро меняющейся моды. В самом деле, туфли, которые были в июне последним писком, в сентябре уже не выглядят современными. Поддержание такого узла и сохранение его актуальности — страшная головная боль и для разработчика, и для того, кто отвечает за обновление материала. Добавьте в список одежды новый товар, и сразу не просто меняется структура страницы, но и изменяется ее размер по мере добавления или удаления товаров.
В принципе данный Web-узел не кажется слишком сложным, однако для его функционирования приходится создавать множество служебных страниц. Например, добавление в список новой пары туфель выглядит простым заданием, но для того чтобы это было сделано правильно, нужно соблюсти несколько специфических условий. Вы должны убедиться, что соответствующий рисунок выполнен в правильном формате и имеет нужный размер, кроме того, добавление нового товара не должно менять структуру навигационных элементов не только на данной странице, но и на остальных страницах. Не забывайте также о том, что новый образец туфель должен быть добавлен в строку вместе с ценой; в общем, перед разработчиком при проектировании Web-узла, требующего постоянного обновления, возникает немало специфических трудно решаемых задач.
Для того чтобы создать Web-узел с динамически обновляемым содержанием, нужно сделать следующее.
1. Определить содержание.
2. Создать базу данных, в которой это содержание будет храниться.
3. Разработать шаблоны для хранения содержания.
4. Написать программу, которая все это сможет обработать.

Диалоговое окно для сохранения шаблона

Рисунок 13.1. Диалоговое окно для сохранения шаблона

Диалоговое окно New Editable Region

Рисунок 13.2. Диалоговое окно New Editable Region


2. Введите имя поля и щелкните на кнопке ОК. Поле приобретет голубую границу, и его имя появится на странице.
3. Если вы хотите использовать табличную структуру, создайте таблицу и выделите ее, щелкнув на ней. Вокруг таблицы появится черная граница.
4. Когда таблица будет выделена, щелкните на кнопке Editable Region и укажите имя области. Таблица преобразуется в редактируемое поле (Рисунок 13.3).

Дизайн пришлось переделать изза трудностей программирования

Рисунок 13.12. Дизайн пришлось переделать из-за трудностей программирования


Чтобы разобраться с этим, я послал Джордану сообщение с вопросом, какие рисунки ему нужны и чего он ждет от меня лично. Я хотел максимально облегчить ему работу. Джордан в ответ прислал мне .png-файл (Рисунок 13.13), в котором попытался изобразить, как он все это себе представляет.

Использование направляющих позволяет

Рисунок 13.9. Использование направляющих позволяет добиться плотного прилегания слайсов


При настройке параметров оптимизации глубина цвета, составляющая 128 цветов, может показаться слишком большой, но это не так. Дело в том, что кирпичный рисунок в фоне содержит тени и полутона, которые могут потеряться, если глубина цвета будет меньшей. С другой стороны, не стоит бороться за малый размер файла, поскольку слайсы и так имеют небольшой размер и время передачи их броузеру не должно быть слишком большим. Теперь вы можете поручить выполнить всю работу Fireworks MX — создать HTML-текст и экспортировать рисунок. Для этого выберите в меню File=> Export и откройте диалоговое окно Export. В списке Save As выберите HTML and Images. Если вы создаете только рисунки с эффектом, ролловера, не обязательно создавать страницу вместе с рисунком. Можно выбрать в списке Images и в меню диалогового окна Export выбрать Export Slices. Выберите Include Areas Without Slices в нижней части диалогового окна Export.
Перед тем как нажать кнопку Save, убедитесь, что у вас правильно создана структура папок для сохранения вашей работы. По крайней мере у вас должна быть создана папка, в которой вы сохраняете свои Web-рисунки. Создав такую папку, вы потом сможете отправить ее сотруднику, который займется собственно созданием HTML-страницы. Щелкните на кнопке Save, диалоговое окно закроется, и вы вернетесь к своему рисунку.

JCT становится динамическим

JCT становится динамическим


С самого начала концепция Web-узла JCT была статической, т.е. не предполагалось использовать какие-то базы данных или другие динамические свойства. Поэтому весь Web-узел JCT был сделан в Fireworks MX.
До сих пор нас не особенно волновали ограничения HTML или дизайна. Поскольку Web-узел был статическим, в нем не были запланированы какие-то особенные визуальные эффекты. Единственной особенностью было использование закруглений на обрамлениях (Рисунок 13.11).
Вместе с закруглениями рисунок должен был быть разделен на слайсы, экспортирован из Fireworks и вновь собран в Dreamweaver MX вместе с таблицами. Однако теперь нам пришлось принимать во внимание добавление динамики. Первоначальный дизайн пришлось пересмотреть и определить, какие свойства данного Web-узла нужно переделать так, чтобы они лучше вписывались в концепцию динамики.
Сначала пришлось отказаться от закруглений границ, поскольку эти области пришлось создавать с помощью таблиц и цветов HTML. Дело в том, что при использовании динамических данных не постоянен и размер областей для этих данных. Создание таблицы с помощью HTML намного проще, чем разделение рисунка на слайсы и манипулирование ими с помощью CSS. Новый вид обрамлений показан на Рисунок 13.12.
Поскольку обрамления теперь создаются с помощью HTML, нет нужды проделывать сложные операции с графикой в Fireworks.
После того как Крис объяснил нам все это, возникла новая проблема. Я — дизайнер узла, а Джордан отвечает за динамические функции страниц. Проблема заключается в том, что я не понимаю, что он хочет от меня для того, чтобы сделать Web-узел динамическим.

Корпоративный вид

Корпоративный вид


Первоначальный дизайн был хорош, но нам многое не понравилось из-за того, что не был выдержан общий стиль. После многочисленных дискуссий мы решили, что над этим нужно поработать, чтобы сделать страницы более последовательными и выдерживающими корпоративный стиль.
После того как мы пришли к такому заключению, необходимо было выработать новые образы. Снова взявшись за карандаш и бумагу, мы создали новую концепцию корпоративного вида, которая была зафиксирована и утверждена (Рисунок 13.5).
В это же время мы поняли, что не предусмотрели в свое время страницу, с которой можно было бы в будущем делать заказы на покупку. Мы поняли, что нужен новый дизайн в виде каталога, но выдерживающий общий стиль. На Рисунок 13.6 показан образ для раздела продаж. Здесь также отражена динамическая природа Web-узла.
После того как художественный образ создан и утвержден, дизайнер может сканировать его, поместить в отдельный слой Fireworks MX и создать страницу, используя рисунок как основу. Результаты вы видите на Рисунок 13.7, где представлены начальная страница и три страницы с конкретными товарами.
Обратите внимание, что не все рисунки были полностью переделаны. Мы использовали многое из сделанного ранее, в частности внешний вид панели навигации.

На этом рисунке Джордан изобразил

Рисунок 13.13. На этом рисунке Джордан изобразил, как должна выглядеть страница


Страница выглядит неплохо, но все равно не очень понятно, что хочет Джордан. Нам пришлось несколько раз обменяться сообщениями и поговорить по телефону, прежде чем мы поняли друг друга. Джордану нужны были рисунки; мне нужно было знать, какая часть страницы будет сделана с помощью HTML, а какая будет графикой. На Рисунок 13.14 вы видите документ, который помог нам прийти к согласию. На нем явно указано, какая часть страницы должна быть сделана в виде HTML, какая — в виде рисунка и какими эти рисунки должны быть.

Начальная страница и три страницы с товарами

Рисунок 13.7. Начальная страница и три страницы с товарами


Но заказчик хотел, чтобы навигационная панель была интерактивной. Это означало, что тексту нужно было придать свойства, характерные для кнопок. Кроме того, это означало, что нужно создать ролловерные эффекты (проявляющиеся при наведении курсора на объект) для четырех основных секций Web-узла.
Возник вопрос: "Должны ли мы создавать кнопки и соответствующий HTML-текст с помощью программы Fireworks MX?" Мы обсудили этот вопрос и решили отказаться в данном случае от использования Fireworks. Вместо этого мы решили использовать Dreamweaver MX.
При принятии этого решения существенную роль сыграл тезис о том, что нужно применять правильные средства для достижения цели. Dreamweaver более гибка в отношении того, что изменение HTML-текста кнопок не влечет за собой изменения ролловер-ных эффектов.

Новое представление корпоративного вида Webузла

Рисунок 13.5. Новое представление корпоративного вида Web-узла

Одним из интересных визуальных

Рисунок 13.11. Одним из интересных визуальных эффектов были закругления на обрамлениях

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

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


Перед тем как заняться дизайном узла, вам нужно точно определить, каково будет содержание этого узла. Для того чтобы быть уверенным в том, что ничего не упущено, вам придется потратить достаточно много времени. В случае с узлом JCT структура его содержания довольно проста, а именно: рубашки, брюки, туфли и шляпы. Но если вы ограничитесь таким очевидным выводом, ваш проект будет загублен. Определение содержания — это гораздо более сложная и ответственная задача.
Нам придется углубиться в этот вопрос, тем более что мы уже говорили об этом в главе 6. Сейчас мы определим для каждого товара более мелкие порции данных:

название;

описание;

цена.

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

цвет;

размер;

мужской;

женский;

стиль.

Здесь вы должны быть очень внимательными и предусмотреть все возможные варианты. Например, цена у вас выражена в долларах. Какие доллары имеются в виду, канадские или американские? То же самое с размерами, так как в Европе и в Америке применяются разные системы измерения. Если у вас может встретиться в продаже европейская обувь, то, может быть, нужно предусмотреть утилиту преобразования размеров? Таким образом, нужно не просто описать каждый товар как можно подробнее, но и указать тип данных, описывающих этот товар. Что это за данные? Дата ли это? Или число? Или текст? Или рисунок? На все эти вопросы нужно ответить, прежде чем приступать к созданию Web-узла.

От статики к динамике создаем Webузел JCT

От статики к динамике: создаем Web-узел JCT


Преобразование Web-узла JCT из статического в динамический позволит нам высветить распространенную проблему, с которой сталкиваются многие Web-дизайнеры, не овладевшие современными средствами разработки. Не умея обращаться с инструментами, которые должны сделать их работу более эффективной, они не знают, как преобразовать результаты своего труда так, чтобы статические данные заменились динамически формируемыми.
Как уже не раз отмечалось на страницах этой книги, создание Web-узла — это работа команды специалистов, сотрудничество которых начинается с листом бумаги и карандашом в руках, с помощью которых излагаются основные идеи и концепции узла. Точно так же мы поступали в начале работы над узлом JCT. Если вы помните, в главе 4 мы начинали свой Web-узел с того, что, обменявшись идеями, стали создавать концепцию узла, причем делали это на обычных листах бумаги.
По мере продвижения нашей работы и развития проекта нам стало очевидно, что вид нашего Web-узла должен быть немного более корпоративным. Концепция дизайна была изменена, и были созданы основные страницы. Но как раз в этот момент заказчик изменил свое мнение и мягко, но настойчиво попросил сделать Web-узел динамическим.
В этом разделе мы рассмотрим довольно распространенную ситуацию, когда нужно, сохранив созданный ранее удачный дизайн, сделать так, чтобы данные попадали на страницы в результате динамической обработки.
Дизайнеры и программисты согласились в том, что панель навигации должна быть расположена в верхней части каждой страницы. Этой панели придается такое большое значение потому, что она является общим элементом каждого раздела Web-узла, и в результате на всех страницах сохраняется и поддерживается общий стиль. Хотя благодаря различному содержанию внешний вид каждой страницы может показаться не таким, как у остальных, панель навигации остается одной для всех страниц.

Панель Optimize позволяет настроить

Рисунок 13.10. Панель Optimize позволяет настроить параметры рисунков перед выводом их в рабочую область


После того как все рисунки с красным текстом экспортированы в нужную папку, выберите инструмент Hide Slices and Hotspots в области Web панели инструментов и выделите весь красный текст с помощью инструмента Direct Selection. В панели инспектора свойств измените цвет слов на светло-коричневый (#996633), введя это число в поле ввода. Изменив цвет, выберите инструмент View Slices and Hotspots, и слайсы снова появятся.
Эта техника использования инструмента для сокрытия и отображения слайсов заслуживает внимания. Когда вы скрываете слайсы, значок, отвечающий за их видимость на слое Web, становится затемненным. Если вы щелкнете на этом значке, чтобы скрыть слой, а потом еще раз щелкните для отображения этого слоя, то значок все равно останется затемненным. Если вам нужно скрыть или отобразить все слайсы в рисунке, воспользуйтесь инструментом View Slices and Hotspots. Щелкать на значке отображения видимости слоя можно только тогда, когда вы хотите изменить видимость только некоторого конкретного слоя.
Если вы экспортируете рисунок с коричневыми слайсами, то получите много дублированных слайсов и тем самым усложните жизнь тому, кто будет создавать страницу. В Fireworks MX есть средство, позволяющее экспортировать только вновь созданные объекты.
Выделите все слова коричневого цвета и нажмите . Откроется диалоговое окно Export. Выберите папку, содержащую исходные слайсы; дайте слай-сам имя и выберите Images Only в списке Save As. В меню Slices выберите Export Slices и Selected Slices Only, снимите флажок Include Areas without Slices. В результате будут экспортированы только слова с заполнением светло-коричневым цветом. Щелкните на кнопке Save.
Теперь все рисунки должны находиться у вас в одной папке, которую вы можете отправить тому, кто будет заниматься созданием HTML-текста для страницы.

Панель Snippets в Dreamweaver

Рисунок 13.4. Панель Snippets в Dreamweaver MX содержит множество фрагментов программ


3. Здесь можно присвоить фрагменту имя, описать его действие и решить, как вставить фрагмент — обрамляя данный элемент (Wrap Selection) или вставив как блок (Insert Block). Щелкните на кнопке ОК, и фрагмент добавится в панель Snippets.
Члены команды могут совместно пользоваться фрагментами. Это может сэкономить много времени и сил команде разработчика, поскольку избавляет разных людей от многократного написания одного и того же фрагмента программы.
Для того чтобы сделать фрагмент доступным для совместного использования, выполните следующее.
1. Найдите нужный фрагмент, который вы хотите сделать совместным, в папке Configuration/Snippets. Эта папка находится в папке Application Dreamweaver MX.
2. Скопируйте его в папку, доступную для совместного использования членами вашей команды в сети.
3. Ваши коллеги, которые хотят пользоваться вашим фрагментом, должны скопировать его на свой компьютер в папку Configuration/Snippets.

Программирование

Программирование


Написание программы обычно считается задачей технарей. Вообще-то, мы займемся рассмотрением программирования для Web-узла JCT в главе 20, но сейчас нам тоже придется об этом поговорить, потому что понимание основ программирования необходимо хотя бы для того, чтобы учесть некоторые специфические требования при дизайне динамического Web-узла.
Как мы говорили в предыдущем разделе, шаблон управляет и рисунками, и HTML-текстом; об этом нужно помнить при дизайне страниц. Обязательно примите во внимание следующее.

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

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

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

Если у вас есть фрагмент программы, который постоянно повторяется на разных страницах вашего Web-узла, воспользуйтесь для его хранения новым средством Dreamweaver — Snippets.

Работа со Snippets

Работа со Snippets

Snippets (обрезки, лоскутки) — это фрагменты программ, которые можно повторно использовать на разных страницах Web-узла. В таких фрагментах может быть HTML-текст, JavaScript, CFML, ASP и пр. Эти фрагменты хранятся в панели Code программы Dreamweaver.
Фрагмент может быть вставлен в текст программы как отдельный блок, например набор заранее подготовленных элементов навигации, а может, наоборот, обрамлять некоторый объект, например создавать комментарии вокруг некоторой области на странице.
Для того чтобы вставить фрагмент, сделайте следующее.
1. Выделите объект на странице и выберите в меню Window=>Snippets. Откроется панель Snippets, которую вы видите на Рисунок 13.4. То же самое можно сделать, выбрав Panels=>Code=>Snippets.
2. Прокрутите список фрагментов в этой панели, найдите нужный и дважды щелкните на нем. После этого он будет применен к объекту. Можно также щелкнуть на фрагменте правой кнопкой мыши и выбрать в контекстном меню Insert или выделить фрагмент и щелкнуть на кнопке Insert в нижней части панели.
Для того чтобы добавить фрагмент в панель Snippets, выполните следующее.
1. Выделите часть текста программы в Dreamweaver MX в режиме программирования.
2. Щелкните на значке New Snippet в панели Snippets.

Рассуждения Криса о создании динамического Webузла JCT

Рассуждения Криса о создании динамического Web-узла JCT

Для меня самым трудным шагом оказалась передача файлов с рисунками Джордану, и не только потому, что я опасался динамических свойств Web-узла, но и потому, что я не знал в точности, что хочет от меня Джордан для того, чтобы все динамические функции работали нормально,
У меня был хороший опыт работы с программистами баз данных и интегрирования информации из базы данных в динамический Web-узел. Но во всех этих случаях мне не приходилось иметь дело с рисунками. Что такое базы данных и как ими пользуются при создании узлов, я понимал, но динамическая передача рисунков — это было мне внове.
Кроме того, определенные трудности возникали из-за нашего географического рас-"положения, Джордан живет в Канаде, а я — на востоке США, и ни один из нас не мог сесть в автомобиль, приехать к коллеге, обсудить проблемы с глазу на глаз и выяснить, что каждый из нас ожидает от другого для создания динамического Web-узла.
Трудности были у нас до тех пор, пока Джордан не прислал мне образец страницы, на (котором было указано, где дожжен быть HTML-текст, а где графика. Только тогда я понял, что от меня требуется,

Разработка для секции продаж которая

Рисунок 13.6. Разработка для секции продаж, которая задает тон для всей динамической части Web-узла

Создание базы данных

Создание базы данных


Описав содержание достаточно подробно, вы можете приступить к созданию базы данных, в которой это содержание будет храниться. Но базы данных не работают сами по себе в Web-пространстве. Для того чтобы содержание базы данных попало на страницы вашего Web-узла, нужно воспользоваться специальной системой, предназначенной для этого.
Такие системы иногда называют трехъярусной архитектурой (three-tired architecture). Термин звучит довольно устрашающе, но на самом деле имеется в виду то, как данные передаются из базы данных в броузер. При работе динамического Web-узла это происходит через три уровня.

База данных. Это место, где хранятся данные. Среди промышленно используемых баз данных самые известные — Oracle, Sybase и MySQL. В наших примерах мы используем последнюю версию базы данных Microsoft Access.

Промежуточная программа (middleware). Это приложение, расположенное на серверном компьютере и обрабатывающее запросы. Такое приложение вставляет данные, полученные из базы данных, в шаблоны, созданные с помощью Dreamweaver MX. ColdFusion MX — самое популярное из таких промежуточных приложений.

Интерфейс. Это сервер, который передает броузеру шаблоны, заполненные с помощью Dreamweaver MX.

Разобравшись с этими терминами, вы поймете, что создание динамических Web-узлов доступно каждому, кто умеет пользоваться продуктами компаний Microsoft и Macromedia. Как сказал один из авторов этой книги на семинаре печатников (см. выше): "Ничего на самом деле не изменилось. Просто теперь мы по-другому об этом говорим".
Мы, как и раньше, должны создавать страницы с помощью Dreamweaver, используя содержание, созданное в программах Word, Flash MX, FreeHand и Fireworks MX. Разница заключается только в том, где хранится это содержание.
После того как содержание ваших страниц определено и описаны все типы данных, совсем не сложно выполнить все описанное в главе 6 и создать базу данных, в которой это содержание будет храниться.
При создании базы данных вы должны помнить о том, насколько важно создать первичный ключ (primary key). Первичный ключ в базе данных — это идентификатор, который помогает быстрее найти нужную запись, причем такое ускорение может быть очень значительным. Описывая некоторое поле как первичный ключ, вы, по сути, говорите программе базы данных, что каждая запись в данной таблице уникальна.
Наконец, внося в базу данных текст, созданный в каком-либо текстовом процессоре, например в Word, не забудьте удалить все форматирование в этом тексте. Для этого нужно сохранить файл в простом текстовом формате (.txt). Потом текст можно отформатировать с помощью шаблонов.

Создание динамических Webузлов

Создание динамических Web-узлов


За последние несколько лет процесс создания Web-узлов претерпел значительные изменения. Если раньше типичный Web-узел был статическим набором информации, вроде журнала, то современный Web-узел — это динамическое приложение, работающее в реальном времени. Пакет Macromedia Studio MX содержит средства для создания таких Web-узлов.
Современные Web-узлы стали динамическими, а это означает, что в зависимости от запроса их содержание передается броузеру или Flash-приложению. Содержание динамически встраивается на Web-страницу непосредственно в процессе передачи. Это фундаментально отличается от статических Web-страниц, содержание которых встраивается дизайнером в процессе разработки.
Распространение динамических Web-узлов и развитие технологии их создания оказали влияние на команды разработчиков, создающих такие Web-узлы. В эпоху статических Web-узлов творчество команды разработчиков зависело от содержания создаваемых страниц. Члены команды, задействованные в творческом процессе, создавали рисунки, текст, разрабатывали внешний вид и управляющие элементы страницы.
Появление и развитие динамических Web-узлов перевернули всю эту модель с ног на голову. Программисты и разработчики баз данных теперь закладывают основу Web-узла. В новой модели решающую роль при создании динамического содержания играет специфика работы этих разработчиков.
В некотором отношении это разделило создателей Web-узлов на два полярных лагеря — на технических и творческих работников. Такое разделение команды разработчиков на два лагеря создает опасность попасть в неприятную ситуацию, даже можно сказать, что эта неприятность неизбежна, если не предпринять специальные меры. Рано или поздно возникнет ситуация, когда дальнейшая работа невозможна, если дизайнеры не понимают основ программирования и принципов работы баз данных, а программисты не представляют себе, как именно должно быть представлено содержание страницы.
Дизайнеры теперь уже не просто создают Web-страницы. Скорее они создают интерфейс для вывода содержания, полученного в результате работы программной части Web-узла. Работа дизайнеров теперь не статична, как раньше. Элементы дизайна перемещаются на странице и функционируют в зависимости от конкретной ситуации и содержания. Научиться этому невозможно, не понимая сути работы своих партнеров.
В этой главе мы рассмотрим процесс создания динамического Web-узла, а именно: сделаем статический Web-узел динамическим.
Когда мы начинали работу над этой книгой, в наши планы входило показать, какие инструменты созданы компанией Macromedia для решения поставленной задачи. Книга было уже наполовину готова, когда Macromedia сделала решительный поворот в своей маркетинговой политике: выпустила пакет программ MX Studio, который был совершенно конкретно направлен на создание динамических Web-узлов.
До этих пор Web-узел JCT, на примере которого мы излагали материал в предыдущих главах, был статическим. Мы знали, что в состав пакета Studio MX входит программа ColdFusion, но не упоминали ее, так как не хотели без особой нужды расширять список изучаемых программ, и без того уже не слишком маленький. Так было, пока редактор серии не спросил нас, а почему, собственно, наш Web-узел JCT остается статическим, в то время как компания Macromedia вовсю рекламирует свою программу ColdFusion как эффективный инструмент для создания динамических Web-узлов.
Двое из нас, авторов этой книги, Том и Крис, были немало озадачены. Но реакция Джордана была прямо противоположной — он решительно заявил, что давно пора поговорить о динамическом содержании. Время статики давно миновало, и Крису с Томом пришлось окунуться в мир динамики. Теперь, бросив взгляд назад, мы понимаем, что это сопротивление было сродни тому, как печатники встречали в штыки цифровые технологии в начале 1990-х годов.
В 1993 году один из авторов этой книги на семинаре печатников, посвященном внедрению цифровых технологий, сказал своей аудитории: "У вас не такой уж большой выбор. На самом деле даже очень маленький — вы должны или осваивать новые технологии, или искать другую работу". То же самое можно смело сказать о создании Web-узлов — или вы осваиваете динамическое содержание, или плететесь в хвосте без шансов на успех.

Создание эффекта ролловера

Создание эффекта ролловера

Перед тем как создавать любые виды слайсов (slices) для ролловера, нужно сначала установить эффект ролловера. В случае нашего Web-узла JCT при наведении указателя на слово цвет этого слова изменяется.
Основной цвет в каждой секции Web-узла — красный. В HTML-тексте это кодируется числом #990000. Такой цвет соответствует отжатому состоянию (Up state). Для того чтобы запомнить такие, на первый взгляд, мелкие, но достаточно важные детали, вам понадобится маленький блокнот. Им удобно пользоваться для записей, которые пригодятся вам при многочисленных изменениях Web-узла, неизбежных до того времени, когда Web-узел будет полностью завершен и сдан.

Создание навигационной панели

Создание навигационной панели


Когда мы принимали решение изменить дизайн Web-узла JCT, мы не устраивали дискуссии по поводу того, нужно ли изменять фон навигационной панели, сделанный в виде кирпичной стены. Мы хотели сохранить угловатый стиль городского граффити. Сочетание кирпичной стены со шрифтом MarkerFelt придавало Web-узлу специфический вид, и мы решили сохранить его.

Создание редактируемых полей в шаблоне

Создание редактируемых полей в шаблоне

Содержание, получаемое из базы данных, помещается в специальные области, или редактируемые поля (editable regions). Редактируемые поля на странице — это те места, в которых размешаются данные, специфические для данной страницы. Содержание редактируемых полей меняется на каждой странице.
Для того чтобы создать редактируемое поле на странице, выполните следующее. 1. На странице открытого шаблона, который вы создали или открыли, щелкните в том месте, где вы хотите создать редактируемое поле. Выберите вкладку Template на панели Insert. На вкладке вы увидите семь кнопок. Щелкните на кнопке Editable Region. Откроется диалоговое окно New Editable Region (Рисунок 13.2).

Создание шаблона в Dreamweaver MX

Создание шаблона в Dreamweaver MX

Создание шаблона — совсем не сложный процесс. У вас есть выбор: создать шаблон самостоятельно с нуля или модифицировать существующий документ.
Для того чтобы создать шаблон с нуля в Dreamweaver MX, сделайте следующее.
1. Запустите Dreamweaver MX. При этом вы можете работать с существующим узлом ил создать новый, выбрав в меню Site=>New Site. Для того чтобы создать новый HTML-документ, выберите в меню File=>New.
2. Внесите в шаблон рисунки, таблицы, текст, в общем, все то, что будет у вас повторяться на каждой странице. Все остальное из шаблона должно быть удалено.
3. Откройте окно сохранения, выбрав в меню File=>Save As Template (Рисунок 13.1). Сохраните документ как шаблон Dreamweaver MX, т.е. как файл с расширением . dwt.
4. Введите имя шаблона в текстовое поле Save As.
5. Щелкните на кнопке Save. Если для создания шаблона вы используете существующий документ, удалите из него все лишнее, т.е. то, что не будет повторяться на каждой странице. После этого выберите в меню File пункт Save As Template. Выберите в меню Site Web-узел, с которым будет связан этот шаблон, укажите имя шаблона и сохраните его.

Создание шаблонов для содержания

Создание шаблонов для содержания


Шаблоны в значительной степени помогают вам сэкономить время и силы. С их помощью можно создавать страницы одного дизайна, но с разным содержанием. Это идеально подходит для динамических Web-узлов. Хотя по-настоящему вам придется иметь дело с шаблонами в главе 20, где речь пойдет о программе ColdFusion, но понимание того, как работают шаблоны в Dreamweaver MX и что это такое, вам понадобится уже сейчас.
Шаблон — это сочетание фиксированных элементов, таких как рисунки, кнопки и т.д., с управляемыми программой ColdFusion областями, в которые попадает содержание из базы данных или других источников.
Достоинство шаблонов проявляется в том, что они ведут себя подобно хамелеону, т.е. пользователь может думать, что Web-узел состоит из десятка различно оформленных страниц, но на самом деле это все одна страница, наполненная разным содержанием, полученным из базы данных.
Шаблоны — это та область, где усилия представителей двух разных лагерей, художников и технарей, соединяются воедино.
Создавая шаблон в Dreamweaver MX, обязательно сделайте следующее.

Поместите содержание, общее для всех страниц данного Web-узла, в шаблон.

Создайте редактируемые поля в каждой области шаблона, хранящего данное содержание.

Проверьте шаблон перед тем, как приступить к созданию Web-узла.

Таблица преобразована в редактируемое поле и названа Table

Рисунок 13.3. Таблица преобразована в редактируемое поле и названа Table

Так нам пришлось указать какие

Рисунок 13.14. Так нам пришлось указать, какие части страницы представлены графикой, а какие — HTML


Теперь, когда я знал, какие рисунки я должен создать и передать Джордану, я мог открыть страницы в виде .png-файла и начать работу по оптимизации слайсов отдельных рисунков. Попросту говоря, Джордану нужны были рисунки логотипа, некоторые заголовки и рисунки конкретных товаров JCT, таких как футболки, туфли и т.д. Мои слайсы были готовы, поэтому я экспортировал их в отдельную папку, заархивировал ее в zip-файл и переслал Джордану.
Должен признаться, что для меня, как для дизайнера, самым трудным шагом оказалась именно пересылка файлов с рисунками Джордану, так как после этого я уже никак не мог вмешаться в процесс создания страниц.

В отжатом состоянии каждая кнопка будет красной

Рисунок 13.8. В отжатом состоянии каждая кнопка будет красной


Мы решили, что при наведении указателя на кнопку она должна становиться светло-коричневой. Для такого цвета соответствующее значение HTML будет #996633. Как уже говорилось выше, вам следует записать это значение на тот случай, если понадобится его изменить.
Покончив с отжатым состоянием кнопки, рассмотрим, как создаются слайсы.
Вместо того чтобы использовать инструмент Slice, можно нарисовать направляющие линии, чтобы добиться максимально плотного прилегания. В этом случае нужно воспользоваться линейками при создании направляющих. Чтобы отобразить линейки, выберите в меню View=>Rulers. После этого вытащите направляющие из линейки в рабочую область. После того как направляющие будут установлены, воспользуйтесь инструментом Slice, щелкнув на нем в панели инструментов, и тщательно придерживайтесь направляющих при создании слайсов (Рисунок 13.9).
После того как слайсы будут созданы, выделите их и откройте панель Optimize, выбрав в меню Window=>Optimize или нажав клавишу . Эта панель (Рисунок 13.10) позволяет вам установить параметры оптимизации, такие как глубина цвета или прозрачность, для всех слайсов.

При сохранении шаблона не просто

Замечание

При сохранении шаблона не просто создается файл с расширением .dwt, но и созданный шаблон добавляется к панели Assets. Для того чтобы изменить имя шаблона в панели Assets, щелкните на его имени и введите новое имя. Для того чтобы открыть шаблон для редактирования, щелкните на нем в панели Assets и выберите в меню панели Edit. Для того чтобы присоединить шаблон к открытому документу, щелкните на шаблоне в панели Assets и выберите в меню Apply. 5. Для того чтобы удалить редактируемое поле, выделите его и выберите в меню Modify=> Template=>Remove Template Markup. Поле исчезнет со страницы.

Давно известно, что заказчик любит

Замечание

Давно известно, что заказчик любит изменять свое мнение. При разработке дизайна и. вообще, при любом создании рисунков не стоит ничего выбрасывать. Можете быть уверены, что как только вы выбросите какой-нибудь рисунок, заказчик тут же вспомнит о нем и попросит его вернуть. Зачем же делать работу дважды?

Не думайте, что мы предлагаем

Замечание

Не думайте, что мы предлагаем вам отказаться от использования инструмента Button программы Fireworks. Решение использовать Dreamweaver для создания кнопок было вызвано тем, что в нашей команде был технически грамотный человек, способный быстро реагировать на изменения в программе. В конце концов, кнопки, созданные с помощью Fireworks, работали бы точно так же, как кнопки, созданные вручную с помощью Dreamweaver. Но мы помнили о том, что заказчику безразлично, каким способом выполняется работа, ему нужно, чтобы кнопки работали правильно, т.е. так, как было задумано и согласовано в проекте. После всего этого нам нужно было лишь создать кнопки и нарисовать их нажатое, отжатое и состояние "под указателем" в виде отдельных рисунков, сделанных в Fireworks MX.
В следующем разделе подробно рассказывается о том, как наш технарь делал рисунки для этих состояний и как он справился с изменениями, вызванными переходом от статики к динамике.

Анимация в Web

Анимация в Web

Анимация объектов

Анимация объектов

Как вы уже знаете, FreeHand для создания анимации использует слои. Когда файл экспортируется в виде SWF, каждый слой FreeHand превращается в отдельный кадр. Мы создадим анимацию, но вместо текста будем использовать объекты. Итак, создадим объект, движущийся по кругу и напоминающий электрон на орбите.
1. Откройте новый документ FreeHand. Выберите инструмент Ellipse и нарисуйте круг диаметром 300 пикселей. Не заливайте этот круг — это просто путь, по которому будут двигаться объекты.
2. Нарисуйте еще один круг диаметром 40 пикселей. Заполните его градиентной заливкой, выбрав в панели Fill из списка Gradient строку Radial Gradient.
3. В меню View снимите флажок Preview, чтобы была видна центральная точка кружка. Это нужно для точного расположения его на большом круге. Перетащите маленький кружок на верхнюю точку большого, точно совместив центр с окружностью.
4. Нажмите клавишу и перетащите копию маленького кружка вниз большого, точно совместив центр. Повторите все это еще два раза, размещая маленькие кружки на месте цифр 3 и 9 на часовом циферблате. У вас теперь должно быть 4 кружка.
5. Сделайте еще четыре копии, разместив их между имеющимися. Теперь у вас должно быть 8 кружков (Рисунок 14.21). Удалите большой круг.
6. Выделите все объекты и сгруппируйте их, нажав . Выберите в меню Xtras=>Animate=>Release to Layers. Когда откроется диалоговое окно, выберите в списке Animate строку Sequence и щелкните на кнопке ОК. Откройте панель Layers и убедитесь, что каждый кружок попал в свой собственный слой.

Анимация с помощью Dreamweaver MX

Анимация с помощью Dreamweaver MX


Анимация в Dreamweaver выполняется в основном программным путем. Используя динамическую разновидность языка HTML, называемую DHTML, вы можете изменять расположение объектов на странице. Dreamweaver для этого использует слои. Приятно то, что вам не обязательно быть опытным программистом, чтобы добавить элемент на страницу.
Анимация в Dreamweaver строится на шкале времени (time line), которая очень напоминает аналогичный элемент другого приложения, Macromedia Director. Располагая слои Dreamweaver на шкале времени, вы можете управлять их размерами, видимостью, позицией порядке просмотра и т.д.
Однако перед тем как начать работу со шкалой времени Dreamweaver, вам нужно узнать кое-что о шкалах времени вообще, что может оказаться необходимым.

Для этого требуется броузер 4-й версии или более новый.

Каждый анимируемый объект должен быть в своем слое, иначе Dreamweaver будет выдавать предупреждающее сообщение.

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

Анимация в Fireworks MX

Анимация в Fireworks MX


Анимация в Fireworks MX не сильно отличается от детских рисунков на страницах блокнотика, которые при быстром пролистывании создают иллюзию движения, и в результате лошадь скачет, человечки дерутся на шпагах, а спортсмен поднимает и роняет штангу. Все знают, что это — оптическая иллюзия. Рисунки сменяют друг друга быстрее, чем может уследить глаз, и в результате мы видим непрерывное плавное движение.
В Fireworks анимация работает по тому же принципу. Каждый рисунок ролика заключен в отдельный кадр, и кадры сменяют друг друга на экране с достаточной скоростью. Такую последовательность сменяющих друг друга кадров можно создать с помощью Fireworks MX.

Анимация в Web

Анимация в Web


Качество анимации в Web пока что оставляет желать лучшего. От всех этих мигающих огоньков, которыми украшают, как елочными игрушками, семейные страницы ко дню Благодарения, от примитивных мультиков, взятых из готовых коллекций в той же Internet, глаза лезут на лоб. Собираясь украсить анимацией свой Web-узел, первым делом спросите себя: "А нужно ли мне все это?"
Недостаточно продуманная анимация может перегрузить Web-узел и сделать его загрузку слишком медленной. Можете быть уверены, что плохую анимацию посетители запомнят в первую очередь. Например, в те дни, когда технология Flash только набирала обороты, почти на каждой Web-странице можно было увидеть вращающийся глобус. Именно тогда один из авторов этой книги посетил Web-узел компании из Акрона, штат Огайо, торгующей автомобильными покрышками. Занимая почти половину начальной страницы, на ней вертелся огромный глобус. Весь штат Огайо был подсвечен, город Акрон был отмечен крупной красной точкой. Но толку от этой Flash-анимации было мало: карта была нарисована довольно грубо, реально воспользоваться ею было невозможно. Гораздо уместнее здесь был бы план местности или изображение вращающейся покрышки. Если уж вы решили создать анимацию, правильно выбирайте средства для этого. Не последнюю роль в выборе средств играет бюджет, причем Flash-анимация обычно стоит на верхних позициях в шкале. Вполне возможно, что разумнее было бы воспользоваться простым анимированным Gif-файлом или сделать анимацию с помощью Fireworks MX или Dreamweaver. Если вы решили заняться анимацией, отнеситесь к планированию особенно серьезно. Ключевую роль здесь играет покадровое описание.

Анимация во FreeHand

Анимация во FreeHand


Создание анимации во FreeHand несколько отличается от создания анимации в Fireworks и во Flash. Объекты, которые вы хотите анимировать, размещаются в своих собственных слоях, и потом эти слои последовательно экспортируются в формат Flash MX для передачи в Dreamweaver MX.
В этом процессе используются сгруппированные объекты, которые заносятся в слои с помощью функции Release to Layer.

Анимированный текст

Анимированный текст


Ниже описывается, как создать блок анимированного текста. Анимация текста применяется для создания логотипов и заголовков новостей. Способов использования анимированного текста так же много, как и дизайнеров в Web.
Для того чтобы создать анимированный блок текста, выполните следующее.
1. Откройте новый документ FreeHand.
2. Выберите инструмент Text, щелкните на странице и введите свое имя. Используйте шрифт Times New Roman размером 48 пунктов.
3. Выделив текст, выберите в меню Text=>Convert to Paths и преобразуйте буквы в векторные кривые. Оставив текст выделенным, выберите Modify=>Join и преобразуйте буквы в составную кривую (composite path). Составная кривая — это объект, состоящий из нескольких кривых.
4. Выберите инструмент Direct Selection и, нажав клавишу , перетащите копию текстового блока в новое положение, справа от исходного. Снимите выделение.
5. Выделите оба объекта и выберите в меню Xtras=>CreateoBlend. Ваше имя разместится в виде нескольких копий. Теперь все эти копии можно анимировать.
6. Выберите все объекты на странице, выбрав в меню Edit=>Select=>All. Выберите вменю Xtras=> Animated Release to Layers. Откроется диалоговое окно, которое вы видите на Рисунок 14.20.
7. Выберите Sequence в списке Animate. Щелкните на кнопке ОК. Откройте панель Layers и обратите внимание на то, что в нее добавлено 25 кадров.
8. Выберите в меню File=>Expott Откроется диалоговое окно. В списке Save as Type выберите Macromedia Flash (SWF). Установите флажок Open in External Application и щелкните на кнопке Browse. Когда откроется диалоговое окно Navigate to Valid Application, выберите папку приложения FreeHand и установите флажок Macromedia Flash Player 6.
9. Щелкните на кнопке Open. Когда это диалоговое окно
закроется, щелкните на кнопке Save. Запустится приложение Flash Player, и вы увидите, как ваше имя перемещается по экрану.

Циклическое воспроизведение

Циклическое воспроизведение

Это совсем просто. Хотите ли вы, чтобы ваш ролик воспроизводился бесконечно? Например, у вас есть изображение вращающейся покрышки. Вполне естественно сделать так, чтобы она вращалась бесконечно. Вот здесь вам и пригодится циклическое воспроизведение. Ну а если ваш ролик представляет собой чертика, выскакивающего из коробки, то такой ролик имеет смысл воспроизводить только один раз, может быть, в ответ на некоторое событие.
Для того чтобы изменить цикличность воспроизведения ролика Counterforce, выполните следующее.
1. Щелкните на кнопке Looping панели Frames. Откроется диалоговое окно, которое показано на Рисунок 14.11.
2. В этом меню можно указать, сколько раз вам нужно воспроизвести ролик, или для бесконечного воспроизведения выбрать Forever. Выберите значение 2. Меню исчезнет, и рядом с кнопкой Looping появится цифра 2.
3. Воспроизведите ролик. (Он воспроизведется дважды.)
4. Сохраните ролик и оставьте открытым. Он нам скоро понадобится.

Диалоговое окно Animate

Рисунок 14.17. Диалоговое окно Animate


4. Щелкните на тексте. Все слова будут выделены как один блок. Выберите в меню Modify=>Ungroup. Теперь каждая буква в этом тексте представляет собой векторный объект. Выделите слова V is for и выберите в меню Modify=>Group.
Выделите слово Vectory и так же сгруппируйте его. Теперь у вас на холсте есть два векторных объекта.
5. Выделите слово Vectory и выберите в меню Insert=>Convert to Symbol. Откроется диалоговое окно. Назовите символ Vectory и в качестве его типа укажите Animation. Щелкните на кнопке ОК.
6. Откроется диалоговое окно (Рисунок 14.17). Установите следующие значения: число кадров — 5; Scale (Масштаб) — 125, Opacity (Прозрачность) — 0-100. Щелкните на кнопке ОК.
7. Появится предупреждающее сообщение Fireworks MX с сообщением о том, что ролик содержит больше кадров, чем вы указали. Щелкните на кнопке ОК и воспроизведите ролик.
8. Слово Vectory проявится, но остальные слова не будут видны. Дело в том, что эти слова не были в начале символом анимации. Выберите 1-й кадр в панели Frames и выделите всю фразу. Выберите в меню панели Copy to Frames и вставьте эту фразу во все кадры ролика. Воспроизведите ролик.

Диалоговое окно Export Preview

Рисунок 14.13. Диалоговое окно Export Preview

Диалоговое окно Movie Settings

Рисунок 14.22. Диалоговое окно Movie Settings позволяет вам установить параметры анимации


7. Выберите в меню File=> Export и в списке Save As выберите строку Macromedia Flash (SWF). Щелкните на кнопке Set Up. Открывшееся диалоговое окно Movie Settings (Рисунок 14.22) разделено на 3 секции — Objects, Frames и Publish. В первой секции вы задаете установки компрессии и преобразуете текст в кривые или наоборот. Секция Frames позволяет вам установить скорость и способ воспроизведения. Секция Publish позволяет установить совместимость с Flash Player.
8. Выберите в списке Animation строку Layers и задайте скорость воспроизведения 12 кадров в секунду. Щелкните на кнопке ОК, укажите имя файла, когда вернетесь в окно Export, и щелкните на кнопке Save.
Запустится Flash, и вы увидите, как шарики бегают по кругу.

Диалоговое окно Optimize

Рисунок 14.12. Диалоговое окно Optimize

Добавив ключевой кадр вы сможете

Рисунок 14.24. Добавив ключевой кадр, вы сможете создать криволинейное движение объекта

Документ описывающей содержание

Рисунок 14.1. Документ, описывающей содержание кадра, сопровождающей звук и комментирующий текст


Можно использовать и другой подход к составлению покадрового описания. На Рисунок 14.2 вы видите пример описания рекламного ролика для телевизионного шоу. В 15-ти кадрах, от свирепого террориста до титра с названием шоу, и художник, и заказчик видят, как развивается ролик. Это самое наглядное представление изменения кадров во времени.

Движение объекта

Движение объекта


Теперь, когда вы знаете, как взаимодействуют слои и кадры при создании анимации, попробуем соединить в ролик два последних кадра из клипа Counterforce (см. Рисунок 14.2). Наш ролик будет изображать оптический прицел винтовки, наведенный на слово COUNTERFORCE, причем все это будет сходиться в фокусе в последнем кадре.
В этом разделе мы преследуем цель познакомить вас с некоторыми полезными инструментами, чтобы вы приобрели творческие навыки. Анимация, которую мы создадим, будет несколько необычной, не такой, с которой вы встречаетесь прежде. Нам понадобится рабочая область размером 300x300 пикселей, и мы воспользуемся приемом, который называется blur и представляет собой расфокусированное изображение предмета. Этот ролик предъявляет серьезные требования к броузеру и компьютеру, но зато вы научитесь пользоваться многими приемами и инструментами, что и является целью настоящего раздела.

Движение по свободному пути

Движение по свободному пути

Если для вас важна точность, то добавление ключевого кадра — подходящий способ создания движения по гладкой кривой. Однако иногда бывает нужно создать движение по кривой свободной формы. Например, такое движение может вам понадобиться при имитации полета шмеля.
Чтобы создать движение по свободной кривой, выполните следующее.
1. Откройте файл FreeForm.htm из папки с упражнениями к главе 14. Ботинок уже есть в нужном слое. Выделите этот слой.
2. Выберите в меню Modify=>TimelineoRecord Path of Layer. Появится шкала времени.
3. Щелкните на слое и перетащите его по экрану по свободному пути. По мере движения за слоем будет оставаться линия, показывающая записанный путь. Отпустите кнопку, и программа запомнит путь.
4. На шкале времени будут отображены ключевые кадры (Рисунок 14.25). Каждой точке соответствует ключевой кадр. Расстояние между ними зависит от того, как быстро и по какому пути вы перетащили слой. В общем случае, чем медленнее вы перетаскиваете, тем ближе друг к другу располагаются ключевые кадры. Воспроизведите ролик.

Формат и вид

Формат и вид


Создание покадрового описания — несложная задача. Вся суть такого описания заключена в его названии. Для этого не обязательно быть выдающимся художником, достаточно иметь четкую и продуктивную идею.
Есть несколько способов создать покадровое описание. Документ среднего размера, в котором описано, что видно на экране, каким звуком и каким текстом это сопровождается, может уместиться на пространстве 4x6 дюймов. В редких случаях приходится делать документ более пространным. После этого нужно распечатать описание каждого кадра на отдельном листе бумаги. В таком виде их удобно редактировать или имитировать проигрывание клипа. По мере необходимости несложно удалить отдельный кадр.
Простейший бланк такого описания вы видите на Рисунок 14.1.

Инструменты анимации

Инструменты анимации


В Fireworks есть множество средств для создании анимации, с помощью которых можно создать несложный ролик (Рисунок 14.3).

Интересный эффект можно создать нестандартными средствами

Рисунок 14.19. Интересный эффект можно создать нестандартными средствами

Использование слоев

Использование слоев

Ваше имя приобрело подвижность и перемещается по экрану с помощью пяти кадров. Но что делать, если в вашем ролике должно быть нечто, что остается неподвижным, например некоторый фон? Это как раз тот случай, когда нам понадобится разобраться со слоями.
Для того чтобы создать в ролике неподвижный объект, выполните следующее.
1. Откройте файл Fireworks MX, который вы создали, изучая материал предыдущего раздела. Откройте панель Frames и выберите 2-й кадр. Выберите инструмент Rectangle и нарисуйте белый прямоугольник. Откройте панель Layers, и вы увидите, что белый прямоугольник находится в слое над вашим именем.
2. Щелкните на 1-м кадре ролика. Белый прямоугольник исчезнет с экрана. Обратите внимание, что 2-й кадр, в котором этот прямоугольник нарисован, также исчез. Это важный аспект в отношениях между слоями в Fireworks MX.
Каждый кадр ролика является независимым рисунком, поэтому он состоит из слоев, которые относятся только к этому кадру. В панели Layers есть контекстное меню в нижнем левом углу (Рисунок 14.5).
3. Для того чтобы сделать слой общим для всех кадров ролика, выделите прямоугольник. Откройте контекстное меню панели Frames и выберите Copy to Frames. Откроется диалоговое окно.
4. Выберите All Frames и щелкните на кнопке ОК. Если вы теперь просмотрите все кадры, то увидите, что прямоугольник виден в каждом из них на панели Layers.
5. Слои в панели Layers относятся только к выделенному кадру. Это значит, что вы можете выбрать объект в кадре и изменить его свойства, такие как цвет или позицию, причем это можно сделать для каждого кадра в отдельности. Выделите 1-й кадр. Щелкните на прямоугольнике и измените его цвет. Переместите слой с прямоугольником под слой с текстом. Повторите то же самое для 3-го кадра. Прокрутите ролик.

Используя средство Onion Skinning

Рисунок 14.9. Используя средство Onion Skinning, вы можете выбрать диапазон кадров

Экспорт анимированного GIFфайла

Экспорт анимированного GIF-файла


После того как вы создали ролик Counterforce, вам нужно его экспортировать, чтобы его можно было воспроизвести в броузере. Если вам нужно воспроизвести его в броузере, он должен быть экспортирован как GIF-файл. Если вы собираетесь использовать его во Flash, то можно экспортировать его как PNG-файл. Но анимированный GIF-файл должен быть оптимизирован перед тем, как его экспортировать из Fireworks в Dreamweaver. В этом разделе рассматривается создание анимированного GIF-файла.

Экспорт анимированного GIFфайла

Экспорт анимированного GIF-файла

Почти все параметры анимации, от частоты кадров до количества цветов, можно установить с помощью панелей Frames и Optimize, но в диалоговом окне Export Preview все параметры собраны вместе. Кроме того, качество предварительного просмотра в этом окне выше, чем в рабочей области.
Для того чтобы экспортировать файл с помощью диалогового окна Export Preview, сделайте следующее.
1. Открыв ролик Counterforce, выберите в меню File=>Export Preview. В открывшемся диалоговом окне щелкните на вкладке Animation (Рисунок 14.13).
2. Щелкните на каждом из кадров, и вы увидите его изображение в окне просмотра. Можно воспроизвести ролик в реальном времени, щелкнув на кнопке воспроизведения в нижнем правом углу.
3. Установите для каждого кадра время задержки 10 секунд, введя это значение в поле под значком секундомера в верхней части окна. Если среди кадров есть такие, которые вы не хотите включать в результирующий GIF, отключите их, щелкнув на кнопке View/Hide рядом с именем кадра. Когда все будет готово, щелкните на кнопке Export. Откроется новое диалоговое окно.
4. Выберите папку и укажите имя файла. В списке Save As выберите HTML and Images, а в меню HTML выберите Export HTML.

Элементы для анимации подготовлены

Рисунок 14.6. Элементы для анимации подготовлены


2. Откройте панель Frames и выберите 1-й кадр. Выберите в меню Duplicate Frame. Откроется диалоговое окно. Число кадров задайте равным 10 и выберите в списке Insert New Frames параметр After Current Frame. Теперь у вас есть 11 кадров. Последний из них — это тот самый, который будет в фокусе.
3. Выберите 1-й кадр и выделите все объекты на холсте. Откройте панель Effects в окне свойств и выберите Blur=>Gaussian Blur. Установите значение Blur (Размытость), равное 10. Щелкните на кнопке ОК. Повторите все то же самое для кадров 2-5, каждый раз устанавливая значение размытости на 1 меньше, т.е. 9,8,7 и 6.
4. Выберите 6-й кадр. Выделите слова и выберите в меню Modify=>Ungroup. Буквы станут векторными объектами, причем каждая попадет в свой собственный слой. Когда буквы выделены, установите для них белый цвет заливки, а для контура — зеленый (009933) толщиной в 4 пикселя. Восстановите группировку букв, нажав клавиши .
5. Как мы не раз говорили в предыдущих главах, одно из основных правил при работе с графикой — поручать программе делать все, что можно, вместо того, чтобы делать это вручную. Можно было бы повторить последнее действие для всех оставшихся кадров, но лучше пусть поработает Fireworks MX. Выберите 7-й кадр, выделите слова и удалите их. Повторите это для кадров 8-11. Выберите 6-й кадр и выделите слова. Выберите в меню Copy to Frames. В диалоговом окне Copy to Frames укажите диапазон кадров с 7-го по 11-й. Теперь в каждом кадре содержатся залитые буквы.
6. Выделите прицел и слова в 6-м кадре и создайте размытость Gaussian Blur интенсивностью в 5 пикселей. Повторите это для кадров 7-10, каждый раз уменьшая интенсивность размытости на 1; таким образом, в 10-м кадре она станет равной 1.
7. Выберите 1-й кадр и переместите прицел куда-нибудь со слов. Повторите это для всех оставшихся кадров, кроме 10-го и 11-го. Ваш ролик готов (Рисунок 14.7).

Элементы управления воспроизведением

Рисунок 14.8. Элементы управления воспроизведением расположены в главном окне и на панели Frames


Элементы воспроизведения, расположенные в окне документа, позволяют не только воспроизводить ролик от начала до конца, но и просматривать его по кадрам как вперед, так и в обратном направлении.
Когда вы щелкаете на кнопке воспроизведения, ролик воспроизводится в соответствии с установками времени, сделанными на панели Frames. По умолчанию время воспроизведения одного кадра составляет 7/100 секунды. Но его можно изменить, и речь об этом пойдет в следующем разделе.
Обратите внимание на то, что при воспроизведении кнопка Play становится кнопкой Stop. Для того чтобы остановить воспроизведение, щелкните на этой кнопке или в любом месте окна документа.

Элементы воспроизведения

Элементы воспроизведения

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

Не слишком ли высока скорость воспроизведения?

Плавно ли движутся объекты?

Уместны ли примененные эффекты и помогают ли они в достижении поставленной цели?

Кадры можно выбрать в панели Layers

Рисунок 14.5. Кадры можно выбрать в панели Layers

Меню Xrtas

Меню Xrtas

Диалоговое окно, которое открывается после выбора пунктов меню Xtras=>Animate=> Release to Layers, предлагает на выбор несколько способов распределения объектов по слоям. В частности, в списке Animate вы встретите такие варианты.

Sequence. Каждый объект попадает в собственный слой.

Build. Создает эффект накопления. Если в 1-й слой попадает первый объект, то во 2-м слое будут находиться копия первого объекта и второй объект.

Drop. Копирует объекты в слои, но пропускает один объект из последовательности в каждом слое. Например, если вы выделите три объекта, то в 1-й слой попадут первый и второй объекты, во 2-й слой — первый и третий объекты, а в 3-й слой — второй и третий объекты.

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

Кроме того, в нижней части окна есть три флажка.

Reverse Direction. Объект движется справа налево.

Use Existing Layers. Объекты распределяются по существующим слоям, причем распределение начинается с выделенного в данный момент слоя. Если этот флажок снят, то объекты распределятся по новым слоям.

Send to Back, Распределяет объекты в обратном порядке. Например, вы можете Л|щЦ. сделать так, чтобы анимация происходила позади неподвижного объекта.

Нужно всего 15 кадров для описания развития сюжета

Рисунок 14.2. Нужно всего 15 кадров для описания развития сюжета

Объекты расположены по кругу и готовы к созданию анимации

Рисунок 14.21. Объекты расположены по кругу и готовы к созданию анимации

Окно Timelines

Окно Timelines


Окно Timelines (Рисунок 14.23) очень просто в использовании. Текущий кадр всегда находится под головкой воспроизведения, и вы можете перемещаться по ролику, перетаскивая головку. Кадры перемещаются горизонтально, а их содержимое расположено по вертикали по слоям.

Оптимизация анимации

Оптимизация анимации


Первый шаг при оптимизации анимации — это установка параметров циклического воспроизведения. После этого можно заняться размерами файла, сделав его минимальным и тем самым сократить время загрузки файла в броузер.
Для того чтобы оптимизировать анимацию, выполните следующее.
1. Если у вас уже открыт ролик Counterforce, выберите в меню Window=>Optimize или нажмите клавишу . Откроется диалоговое окно, которое вы видите на Рисунок 14.12.
2. В списке Settings выберите Animated GIF, и некоторые области окна изменятся.
3. Самый простой способ уменьшить размер анимированного GIF-файла — сократить количество используемых цветов. В вашем ролике на первый взгляд используется только 3 цвета, поэтому попробуйте выбрать в списке Colors число 4. Картинка изменится до неузнаваемости. Дело в том, что в ней интенсивно используется размывка изображения, а это автоматически увеличивает число цветов. Если вы прокрутите кадры по одному, то убедитесь, что все они выглядят отвратительно. Поэтому установите 64 цвета. Этого уже достаточно для приемлемого качества.

Особый эффект в Fireworks MX

Особый эффект в Fireworks MX


В Fireworks MX существует много разных эффектов, но иногда вам может не хватить даже этого. Нужно уметь выкручиваться. Вот как можно создать эффект появления объекта из круга, несмотря на то, что в списке встроенных эффектов такого нет. Для этого вам придется воспользоваться инструментом Eraser (Ластик).
1. Откройте файл Reveal.png, который находится в папке с упражнениями к главе 14.
2. Выберите инструмент Rectangle и нарисуйте прямоугольник, размеры которого совпадают с размерами холста, т.е. 106x142 пикселя. Заполните его серым цветом (666666) и убедитесь, что у него нет обрамления.
3. Проведите горизонтальную направляющую на расстоянии 70 точек на линейке. Проведите вертикальную направляющую на расстоянии 50 точек на линейке. Инструмент Eraser не работает с векторными объектами, поэтому нужно преобразовать прямоугольник в растровое изображение (Modify=>Flatten).
4. Откройте панель Frames и выберите Duplicate Frame. Добавьте 9 кадров. Просмотрите кадры и убедитесь, что направляющие есть в каждом из них.
5. Откройте 2-й кадр и выберите инструмент Eraser. В окне свойств установите для него размер 10 пикселей, edge — 20 пикселей, форму сделайте круглой. Щелкните в точке пересечения направляющих.
6. В следующем кадре увеличьте размер инструмента Eraser на 20 пикселей. Щелкните в точке пересечения направляющих и повторите все это для следующих кадров. В 9-м кадре размер инструмента Eraser должен составлять 150 пикселей.

Перемещая объект в кадрах вы создаете иллюзию движения

Рисунок 14.4. Перемещая объект в кадрах, вы создаете иллюзию движения


7. Щелкните на кнопке воспроизведения или просмотрите все кадры по одному. Ваше имя как бы перемещается по экрану. Чтобы остановить воспроизведение, снова щелкните на кнопке воспроизведения. Сохраните файл.

Подготовка объекта к движению

Подготовка объекта к движению

Прицел винтовки и текст должны находиться в разных слоях. Кроме того, слово COUNTERFORCE заставит вас повозиться, чтобы оно было похоже на свой образец на Рисунок 14.2.
Для того чтобы создать прицел и текст, сделайте следующее.
1. Откройте документ Fireworks MX и создайте холст размером 300x300 пикселей. Цвет его сделайте черным.
2. Для создания прицела выберите инструмент Rectangle в панели инструментов Vector и нарисуйте прямоугольник. В окне свойств задайте для него такие свойства:
W - 100;
Н - 75;
Fill-None;
Stroke Color - 009933;
Stroke Thickness — 2.
3. Выберите инструмент Line и проведите линию из левого верхнего угла прямоугольника в правый нижний, а потом из правого верхнего в левый нижний.. Таким образом, вы нашли центр прямоугольника.
4. Проведите горизонтальную линию через центр прямоугольника, а потом — вертикальную, тоже через центр. Выделите диагональные линии и удалите их. Затем выделите вертикальную и горизонтальную линии и установите их свойства такими же, как у сторон прямоугольника.
5. Уменьшите число слоев. Для этого выделите все объекты и сгруппируйте их, нажав . Откроется панель Layers. Дважды щелкните на слое и назовите его Sight (Прицел).
6. Выберите инструмент Text. Щелкните на холсте и введите слово COUNTERFORCE. Щелкните между буквами R и F. Удерживая нажатой клавишу , нажмите . Вторая половина слова перейдет на следующую строку.
7. Выделите оба слова и установите шрифт Arial Black, размер 36. Если у вас нет шрифта Arial Black, используйте обычный Arial полужирного начертания. Цвет установите 009933. Выделите слово COUNTER и установите значение кернинга, равное 18.
8. Щелкните перед словом FORCE и установите значение кернинга, равное 14. Выделите буквы О, R, С и Е и установите для них значение кернинга, равное -4. Начало слова FORCE должно совпасть с краем буквы N, а конец — с концом слова COUNTER.
9. Выберите инструмент Subselection и выделите горизонтальную линию. Перетащите правый маркер этой линии к концу слова COUNTER (Рисунок 14.6).

Покадровое описание

Покадровое описание


Покадровое описание — это визуальное представление анимации. В нем указывается, что будет видно на экране, каким звуком это будет сопровождаться, какой текст, если он предусмотрен, будет все это комментировать. В таком описании должна присутствовать информация о том, какая последовательность кадров представляет данную анимацию и как эти кадры будут выводиться (с какой скоростью и пр.).
Покадровое описание нужно художнику для того, чтобы правильно спроектировать свою работу. Кроме того, это документ, который согласуется с заказчиком и подписывается им.
У неопытного проектировщика может возникнуть вопрос: "А так ли уж все это нужно?" Ниже описано несколько веских причин для создания покадрового описания.

Это описание фиксирует структуру клипа. Если описание сделано неверно, можете быть уверены в том, что и клип будет неправильным. Вернемся к истории с городом Акрон в штате Огайо — на карте он был расположен не там, где ему положено быть.

Это общий документ, с которым могут справиться все участники проекта.

Проблемы, обнаруженные на этапе составления такого описания, могут быть решены раньше и меньшими средствами.

Путь по свободной кривой записан

Рисунок 14.25. Путь по свободной кривой записан на шкале времени Dreamweaver MX

Работа с кадрами

Работа с кадрами


Все самое главное для работы с анимацией в Fireworks MX содержится в панели Frames. В каждом кадре клипа есть некоторое содержание, которым вы так или иначе управляете. Для того чтобы анимировать объект с помощью панели Frames, сделайте следующее.
1. Создайте новый документ Fireworks. Установите размер рабочей области 300x300 пикселей. Цвет фона сделайте черным.
2. Выберите инструмент Text, щелкните в верхнем левом углу рабочей области и введите свое имя. Выберите подходящий шрифт и установите белый цвет текста.
3. Перетащите панель Frames в рабочую область, захватив ее за квадрат, стоящий рядом с именем панели.

В этой главе мы рассмотрели

Резюме


В этой главе мы рассмотрели инструменты и средства программ Dreamweaver, Fireworks и FreeHand MX, предназначенные для создания анимации.
В начале главы речь шла о создании покадрового описания и о том, как это важно.
Вы узнали, что покадровое описание — это подробный план создания страницы, в котором сказано, какое содержание используется на странице, какими звуками оно сопровождается и каким текстом комментируется. Кроме того, мы говорили, что в покадровом описании должна присутствовать информация двух типов: какие кадры выводятся на экран и как они выводятся, т.е. с какой скоростью, в какой последовательности и т.п. Покадровое описание — это документ, которым художник пользуется в работе, но, кроме того, это документ, который заказчик должен принять и подписать.
Мы подробно рассмотрели функции анимации Fireworks MX, особенно остановились на использовании панели Frames, в которой приходится выполнять большую часть работы при создании анимации. Кроме того, рассказали о том, как оптимизировать и экспортировать анимацию.
Мы рассмотрели многие особые приемы, используемые в Fireworks, такие как использование символов, соединение объектов, проявление и затенение рисунков, импортирование ролика во Flash и др.
Во FreeHand есть функции для создания покадровой анимации, и мы рассмотрели их на примере анимирования текста и других объектов.
В конце главы мы рассмотрели использование шкалы времени Dreamweaver MX и научились с помощью этого средства создавать линейное, нелинейное и свободное движение объекта.
В следующей главе мы закончим знакомство с анимацией и рассмотрим, как все приложения пакета MX Studio могут работать вместе и создавать интересные ролики.

Результат воспроизведения вашего ролика

Рисунок 14.16. Результат воспроизведения вашего ролика

С помощью инспектора свойств можно

Рисунок 14.18. С помощью инспектора свойств можно изменить свойства символов анимации


Еще одна интересная черта приложения — это способность применять специальные эффекты к анимации. Например, если вы захотите применить эффект выдавливания (Effects=>Bevel and Emboss=>Inner Bevel), го он будет применен к объектам во всех кадрах ролика.

Шкала времени в Dreamweaver MX

Рисунок 14.23. Шкала времени в Dreamweaver MX

Символы анимации в Fireworks MX

Символы анимации в Fireworks MX


Символы анимации — это завершенные, предназначенные для многократного использования ролики, созданные в Fireworks MX. Некоторые дизайнеры пользуются этими символами, но большинство предпочитают создавать анимацию вручную, с помощью экземпляров, соединений и панели Frames. Все же нужно отметить, что использование символов анимации позволяет значительно сэкономить силы и время и увеличить производительность.
В нашем издательстве недавно вышла книга V is for Vectory, посвященная использованию векторной графики. Все, кто занимается созданием анимации во Flash, оценили эту книгу. В знак признания заслуг автора мы используем название этой книги для демонстрации символов анимации в Fireworks MX.
Для того чтобы воспользоваться символами анимации, выполните следующее.
1. Откройте новый документ Fireworks MX и задайте размеры холста 480x60 пикселей. Это стандартные размеры рекламного баннера в Web-пространстве. Цвет фона сделайте синим (000066).
2. Выберите инструмент Text, щелкните на холсте и введите текст V is for Vectory. Задайте шрифт Times New Roman размером 48 пунктов. Цвет текста установите 00FF##. Выделите слово Vectory и установите для него цвет FFFFFF.
3. Для того чтобы привлечь внимание посетителя Web-узла к слову Vectory, вам нужно сделать его проявляющимся. Поскольку это слово является частью текстового блока, поставленная задача оказывается не такой простой. Весь текст, включая выделенное слово, представляет собой один объект. Выделите слово Vectory, выберите инструмент Selection, выделите слово Vectory и выберите в меню Text=>Convert to Path. Преобразовав текст в кривые, вы превратили его из редактируемой формы в рисунок.

Слоистость

Слоистость

Обычно вы работаете с каждым кадром в отдельности и переключаетесь между ними для того, чтобы сравнить перемещение некоторого объекта относительно остальных кадров. Это приемлемо, но не очень удобно. Классические аниматоры для этого использовали тонкую прозрачную бумагу, на которой рисовали отдельные кадры. При совмещении нескольких листов такой бумаги было видно, как перемещается объект в нескольких кадрах. Эта техника получила название Oonion skinning (луковая кожура). Нечто похожее есть и в Fireworks MX. Если вы воспользуетесь средством Onion Skinning, то сможете просматривать несколько кадров, сравнивая внесенные изменения и редактируя один или несколько кадров.
Кнопка Onion Skinning расположена в нижней части панели Frames (Рисунок 14.9). После щелчка на этой кнопке открывается меню, которое тоже показано на Рисунок 14.9 и в котором вы можете активизировать или отключить свойство Onion Skinning и указать, какие кадры участвуют в этом. Когда это свойство активизировано, текущий кадр виден четко, а остальные кадры затенены. При воспроизведении ролика свойство Onion Skinning временно отключается.
Для того чтобы воспользоваться свойством Onion Skinning, выполните следующее.
1. Открыв ролик Counterforce, активизируйте свойство Onion Skinning и в его меню выберите Show Next Frame. Текущий кадр будет отмечен стрелочкой, направленной вниз, а кадр под ним — стрелочкой, направленной вверх. Эти стрелки соединяются линией.
2. Если щелкнуть на следующем кадре, то стрелочка переместится на него. Выберите в меню Before and After, и диапазон кадров расширится до трех. Если выбрать строку Show All Frames, то диапазон будет включать все кадры ролика.
3. Выберите в меню Custom. Откроется диалоговое окно (Рисунок 14.10), в котором можно полностью контролировать поведение функции Onion Skinning, а именно: указать, сколько кадров (и какие) участвуют в просмотре, установить их прозрачность и т.п. Введите цифру 4 в поле Show Before и 3 — в поле Show After. Поле Opacity устанавливает прозрачность каждого кадра. Значение 0 делает кадр невидимым, а значение 100 полностью проявляет его. Помните о том, что это не влияет на действительные свойства кадра при воспроизведении, а только на его поведение при использовании свойства Onion Skinning. Пока не изменяйте значение этого поля.
4. Щелкните на кнопке ОК. Теперь в вашем наборе содержится 7 кадров.

Соединение

Соединение


Соединение (tweening) — это процесс, при котором программа создает промежуточные состояния для некоторого объекта исходя из его начального и конечного состояния. Лучше всего это делать с графическими символами. Например, для того чтобы получить изображение сжимающегося объекта, вы создаете его обычное изображение и уменьшенное до 10%. Программа соединяет эти два изображения, создавая некоторое количество промежуточных. Для того чтобы создать соединение, выполните следующее.
1. Скопируйте папку с упражнениями для главы 14с Web-узла этой книги. Откройте файл Tweening.png. Там вы увидите изображение большого красного ботинка. Щелкните на этом ботинке. В нижнем левом углу рисунка появится стрелка, означающая, что этот рисунок является символом из библиотеки.
2. Скопируйте и вставьте ботинок на холст. Появится новый экземпляр ботинка, который останется выделенным. Перетащите его от оригинала и оставьте выделенным.
3. Выберите инструмент Scale и перетащите угловой маркер ботинка так, чтобы уменьшить его. Оставив его выделенным, выберите Modify=>TransfomT=>Numeric Transform. В открывшемся диалоговом окне выберите в списке Rotate и введите в числовое поле значение 270. Меньший ботинок должен повернуться. Щелкните на кнопке ОК.
4. Перетащите маленький ботинок в центр большого. Нажмите клавишу и щелкните на большом ботинке. Оба экземпляра должны быть у вас выделенными. Выберите в меню Modify=>Symbol=>Tween Instances. Откроется диалоговое окно, показанное на Рисунок 14.14.
5. Введите число 10 и установите флажок Distribute to Frames. Щелкните на кнопке ОК.
6. Откройте панель Frames и убедитесь, что теперь ваш ролик содержит 10 кадров. Воспроизведите ролик, щелкнув на кнопке Play. Ботинок должен вращаться и сжиматься.

Если вы перетащите панель влево

Совет

Если вы перетащите панель влево от группы панелей или на панель инструментов слева от рабочей области, появится цветное обрамление и панель при отпускании кнопки устанавливается к краю группы панелей или к панели инструментов слева от рабочей области. Ее размер автоматически подбирается в соответствии с размером окна. Если перетащить панель в рабочую область, то она сожмется и превратится в типичную плавающую панель, после чего ее можно перетащить куда угодно. 4. Откройте диалоговое окно Add Frame, щелкнув в меню Frame Options. Установите количество панелей, равное 4, и выберите Insert new frames: After current frame. Щелкните на кнопке ОК. Теперь у вас есть 5 кадров в панели Frames.
5. Просмотрите кадры, и вы увидите, что ваше имя есть только в 1-м кадре. Выделите ваше имя в 1-м кадре и выберите Copy to Frames в меню Frame Options. Откроется диалоговое окно Copy to Frames. Выберите All Frames и щелкните на кнопке ОК. Теперь просмотрите все кадры, и вы увидите, что ваше имя есть в каждом кадре.
6. Выберите 2-й кадр, выделите ваше имя и переместите его в новую позицию на холсте. Сделайте то же самое с остальными кадрами (Рисунок 14.4).

Есть способ сделать статические объекты

Совет

Есть способ сделать статические объекты общими для нескольких кадров. Создайте новый слой и скопируйте объекты в этот слой с помощью обычной операции копирования и вставки. Дважды щелкните на папке возле имени слоя и выберите в меню параметр Share Across Frames. Наша версия этого ролика представлена на официальном Web-узеле этой книги в разделе главы 14.
Прокрутив этот ролик несколько раз, вы можете заметить, что он воспроизводится слишком быстро. Оставьте файл открытым, в следующей главе мы рассмотрим дополнительные элементы управления анимацией.

Если вы делаете кнопку ролловера

Совет

Если вы делаете кнопку ролловера с анимированным изображением, то воспроизведение нужно сделать бесконечным. Дело в том, что разные броузеры воспроизводят GIF-файлы по-разному и, установив однократное воспроизведение, вы рискуете получить непредсказуемый результат.

При оптимизации часто приходится принимать

Совет

При оптимизации часто приходится принимать решения, которые, по сути, основаны на субъективных ощущениях. Я уверен, что найдутся дизайнеры, которых удовлетворят 64 цвета в вашем ролике, но найдутся и такие, которые буду! настаивать на 128 или 256. Необходимость оптимизации объективна, а ее оценка — субъективна. Только опытным путем вы добьетесь правильного результата.

При создании ролика для фиксирования

Совет

При создании ролика для фиксирования общей точки отсчета удобно пользоваться направляющими 7. Выберите 10-й кадр. Выделите прямоугольник и удалите его. Воспроизведите ролик (Рисунок 14.19).

Для того чтобы функции из

Совет

Для того чтобы функции из меню Extras работали правильно все объекты должны быть сгруппированы.

Создание анимации в Dreamweaver MX

Создание анимации в Dreamweaver MX

Ниже описывается, как создать ролик, в котором изображение ботинка будет перемещаться по прямой линии на странице. Позже вы узнаете, как сделать так, чтобы изображение перемещалось по дуге.
Чтобы создать анимацию в Dreamweaver MX, выполните следующее.
1. Откройте файл ShoeAnimate. htm из папки с упражнениями к главе 14, которую вы скопировали с Web-узла этой книги.
2. Щелкните на вкладке Common панели Insert, а потом щелкните на кнопке Draw Layer. Щелкните на странице и перетаскивая мышь, нарисуйте слой. Когда вы отпустите кнопку мыши, появится слой в виде белого квадрата с маркером вверху. Кроме того, в верхнем левом углу страницы появится значок этого слоя. Инспектор свойств изменится в соответствии с этим.
3. Щелкните внутри слоя и выберите в меню Insertolmage. Найдите файл Shoe.png и откройте его. В слое появится изображение бодинка. Если вы хотите изменить его размер, перетащите маркер изменения размера.
4. Откройте окно шкалы времени, выбрав в меню Window=>Others=>Timeline. Появится пустая шкала времени.
5. Выберите слой с ботинком и выберите в меню Modify=>Timeline=>Add Object to Timeline. Появится полоса анимации в первом канале, пересекающая 15 кадров.
6. Выберите 15-й кадр в первом канале шкалы времени. Перетащите слой Shoe на правую сторону страницы. Когда вы отпустите кнопку, на странице появится линия, указывающая направление и длительность перемещения объекта по странице..
7. Три стрелочки в верхней части окна шкалы времени служат органами воспроизведения. Этими стрелками можно пользоваться так же, как кнопками обычного проигрывателя. Кроме того, вы можете перетаскивать головку воспроизведения непосредственно по шкале времени. Воспроизведите ваш ролик.
Создание объекта, движущегося по дуге, не так сложно, как может показаться. Вам нужно добавить ключевой кадр к шкале времени и переместить слой к его конечной позиции на шкале. Dreamweaver MX сделает все остальное.
Для создания анимации, движущейся по дуге, сделайте следующее.
1. Щелкните правой кнопкой на 8-м кадре шкалы времени. В открывшемся контекстном меню выберите Add Keyframe. В 8-м кадре появится точка.
2. Щелкните на слое и перетащите его вниз. Появится линия, направленная вниз, как показано на Рисунок 14.24. Воспроизведите ролик.

Создание анимации

Создание анимации

Теперь, когда основные элементы для анимации подготовлены, можно приступить к созданию ролика из 11 кадров. На протяжении этих кадров изображение должно фокусироваться, а буквы заполняться белым цветом.
Чтобы создать ролик, выполните следующее.
1. Выделите слова и выберите в меню Text=>Convert to Paths. После преобразования букв в кривые их можно залить белым цветом, но сохранить цвет обрамления. После такого преобразования буквы превратятся в рисунок, утратив свойства текста.

Так выглядит законченная анимация

Рисунок 14.7. Так выглядит законченная анимация

Техника анимации в Fireworks MX

Техника анимации в Fireworks MX


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

Управление анимацией

Управление анимацией


Очень важно иметь возможность управлять анимацией, иначе вы не сможете изменить ее скорость или, например, заставить ее воспроизводиться непрерывно. В Fireworks MX для такого управления предусмотрено несколько элементов управления (Рисунок 14.8).

Кнопка Playback (Воспроизведение).

Управление задержкой кадра (Frame Delay).

Слоистость (Onion Skinning).

Циклическое проигрывание (Looping).

Управление символами анимации с помощью окна свойств

Управление символами анимации с помощью окна свойств

Новинкой Fireworks MX является способность изменять многие свойства в диалоговом окне Animate, которое появляется при создании анимационного символа.
Если вы щелкнете на символе Vectory Animation на холсте, то вид окна свойств изменится и в нем появятся новые категории (Рисунок 14.17). Фактически окно Property Inspector отобразит значения, введенные вами в окне Animate (Рисунок 14.18). Таким образом, вы можете изменить длительность, прозрачность, вращение, масштаб и другие свойства непосредственно через интерфейс Fireworks MX.

Управление задержкой

Управление задержкой

В отличие от Flash MX, Fireworks MX не воспроизводит ролик на постоянной скорости, заданной для всех кадров. Например, во Flash время показа одного кадра равно 1/12 секунды. В Fireworks можно задавать время демонстрации каждого кадра независимо от других. Например, 1-й кадр может отображаться на экране в течение 1/2 секунды, а 2-й — целую секунду.
На первый взгляд все это выглядит замечательно, но на самом деле не так все просто. Такая оценка времени довольно приблизительна. Если у вас воспроизводится GIF-файл, то фактическое время демонстрации каждого кадра зависит как от броузера, так и от компьютера, на котором он воспроизводится. В частности, Internet Explorer воспроизводит файл немного быстрее, чем Navigator, на оба броузера на быстрых компьютерах воспроизводят файлы быстрее, чем на медленных.
Для того чтобы изменить установки скорости воспроизведения ролика Counterforce, выполните следующее.
1. Откройте панель Frames.
2. Дважды щелкните на значении времени задержки 1-го кадра. Значение времени задержки — это число, стоящее справа от имени кадра. Появится контекстное меню, в котором вы можете изменить значение времени. Введите число 12 в поле Frame Delay. Если вы хотите, чтобы это же значение было сохранено в GIF-файле, установите флажок Include when Exporting. Установите точно такое же значение задержки для всех кадров.
3. Воспроизведите ролик. Теперь прицел движется медленнее. Попробуйте применить разные значения времени задержки.

В диалоговом окне Looping можно

Рисунок 14.11. В диалоговом окне Looping можно указать, сколько раз вам нужно воспроизвести ролик

В диалоговом окне Onion Skinning

Рисунок 14.10. В диалоговом окне Onion Skinning можно задать диапазон кадров и их прозрачность

В Fireworks MX есть немало инструментов

Рисунок 14.3. В Fireworks MX есть немало инструментов для создания анимации


Ниже описаны эти инструменты.

Панель Frames (Кадры). Ее можно открыть с помощью меню Window=> Frames, но обычно она расположена в правой части рабочей области. Здесь вы можете просматривать свою анимацию. Количество кадров определяет длительность анимации, и каждый кадр можно редактировать отдельно.

Панель Layers (Слои). С помощью этой панели можно распределять кадры по слоям. В слой можно поместить объекты, которые не участвуют в движении, например фон, общий для всех кадров.

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

Окно свойств (Property Inspector). Впервые появилось в Fireworks MX. С помощью этого окна можно изменять свойства объектов, участвующих в анимации, такие как скорость движения или прозрачность.

Символы анимации. Появились впервые в Fireworks 4.0. Эти символы содержат простейшие клипы, из которых вы можете составить некоторые последовательности. Свойства этих символов можно изменять с помощью окна свойств.

В этом диалоговом окне можно экспортировать

Рисунок 14.15. В этом диалоговом окне можно экспортировать ролик во Flash MX

В этом окне можно задать число кадров для анимации

Рисунок 14.14. В этом окне можно задать число кадров для анимации


Этот ролик можно отредактировать. Например, вы можете добавить логотип компании JCT и сделать так, чтобы маленький ботинок перемещался в нижний правый угол.
1. Выберите последний кадр ролика. Нажмите клавишу и, удерживая ее, перетащите копию ботинка в нижний правый угол кадра.
2. Выберите инструмент Scale и предельно уменьшите копию.
3. Выделите маленький ботинок и щелкните, удерживая нажатой клавишу , на ботинке, который расположен посредине рабочей области. Соедините два этих экземпляра (Modify=>Symbol=>Tween Instances) и установите флажок Distribute to Frames. Воспроизведите ролик.
4. Выберите 1 -и кадр и перетащите на холст символ логотипа из библиотеки. Когда логотип будет выделен, выберите Copy to Frames в панели Frames. Установите диапазон кадров с 2-го по 20-й в диалоговом окне Copy to Frames. Щелкните на кнопке ОК.
5. Воспроизведите ролик. Теперь логотип виден в каждом кадре.
Можно добавить материал и в середину ролика. Например, вам нужно, чтобы по экрану перемещалось слово Shoe. Для этого сделайте следующее.
1. Выберите 11-й кадр. Выберите инструмент Text, щелкните на холсте и введите слово Shoe. Установите шрифт Arial Black, размером 36 пунктов.
2. Щелкните на слове правой кнопкой мыши и выберите в контекстном меню Convert to Symbol. В открывшемся диалоговом окне задайте имя объекта и установите для него свойство Graphic.
3. Перетащите экземпляр слова за левый край холста. Оставив слово выделенным, скопируйте его и перетащите копию на середину холста.
4. Выделите оба экземпляра, щелкнув на них и одновременно нажав клавишу , и соедините их, как раньше. Для числа кадров установите значение 8.
5. Щелкните на кнопке ОК и воспроизведите ролик. Сохраните файл.

В этом окне можно задать поведение анимации во FreeHand

Рисунок 14.20. В этом окне можно задать поведение анимации во FreeHand

Воспроизведение ролика Fireworks MX во Rash MX

Воспроизведение ролика Fireworks MX во Rash MX

Fireworks MX полностью интегрировано с Flash MX. Вы можете с помощью одного щелчка экспортировать векторную графику, ролики, графические кнопки из Fireworks во Flash. Это дает вам большую гибкость, позволяя выполнять дизайн в Fireworks, и использовать результаты во Flash. Это особенно полезно и удобно, когда вам нужно создать векторные и растровые рисунки.
Для того чтобы воспроизвести во Flash ролик, созданный в Fireworks, выполните следующее.
1. Открыв ролик в Fireworks, щелкните на кнопке Quick Export и выберите в меню Macromedia Flash=>Launch Macromedia Flash.
2. Когда Flash откроется, выберите в меню File=>Import и найдите файл ролика. Выделите файл в диалоговом окне Import и щелкните на кнопке Open. Откроется диалоговое окно, представленное на Рисунок 14.15.
3. Настройте параметры этого окна, как показано на Рисунок 14.15. Проследите, чтобы флажок Import as a single flattened bitmap был сброшен. Щелкните на кнопке ОК.
Ролик попадет в 1-й кадр на шкале времени. Если вы откроете библиотеку символов Flash, то увидите два графических символа и папку Fireworks Objects. Ваш ролик находится в этой папке.
4. Откройте папку и дважды щелкните на ролике. Когда откроется символ, нажмите клавишу , и ролик воспроизведется.

Взаимодействие Flash MX и Freehand

Взаимодействие Flash MX и Freehand


Как вы поняли, Flash-анимацию можно создавать непосредственно во FreeHand. Это не особенно удивительно, поскольку оба эти приложения основаны на векторной графике. Но может возникнуть естественный вопрос: "А зачем использовать FreeHand, если есть Flash?"
Ответ зависит от ваших предпочтений. Да, анимацию можно создать во FreeHand, но инструменты для этого недостаточно совершенны, и не так много средств для управления каждым кадром, как во Flash MX.
С нашей точки зрения FreeHand — это хороший инструмент для создания простейших роликов, несложных баннеров и для проверки своих идей.
Кроме того, не забывайте, что вы можете передать SWF-файл во Flash, но вы не сможете его там отредактировать.
В каком же случае можно с успехом пользоваться интеграцией Flash и FreeHand? Когда вы создаете содержание Web-узла во FreeHand, а собственно анимацию делаете во Flash. Объекты, созданные в FreeHand, можно беспрепятственно передавать во Flash, то ли с помощью функции импорта, то ли простым перетаскиванием. Качество при этом не страдает. Символы, созданные во FreeHand, также можно помещать в библиотеку Flash.

При использовании средства Onion Skinning

Замечание

При использовании средства Onion Skinning вам предлагается в меню флажок Multiple Editing. Если вы установите этот флажок, то сможете редактировать некоторый объект во всех кадрах ролика одновременно. Например, можно выделить прицел в ролике Counterforce и изменить его размер во всех кадрах.

В Fireworks MX появилась новая

Замечание

В Fireworks MX появилась новая возможность. Если вы делаете оптимизацию с помощью I панелей Frames и Optimize, щелкните на кнопке Quick Export и выберите Dreamweaver^ Export HTML. Откроется диалоговое окно Export, а этап предварительного просмотра будет пропущен.

Затемнение и проявление

Затемнение и проявление


Затемнение и проявление объектов совсем не сложно выполнить в Fireworks MX. Два экземпляра объекта располагаются в точности на одном и том же месте на холсте; для одного устанавливается прозрачность 100 процентов, а для другого — 0. От того, какой из этих объектов расположен сверху, зависит, будет ли полученный эффект затемнением или проявлением.
1. Откройте файл Fade.png из папки с упражнениями к главе 14, которую вы уже должны были скопировать с Web-узла этой книги. Появится изображение талисмана компании JCT. Щелкните на этом изображении и обратите внимание, что это экземпляр символа.
2. Создайте точную копию этого изображения, выбрав в меню Edit=>Clone. В окне свойств установите для него свойство Opacity со значением 0.
3. Экземпляр становится невидимым. Выделите невидимый экземпляр и выберите в меню Modify=> Arranged Send to Back. Располагая невидимый экземпляр позади оригинала, вы делаете проявление талисмана. Это происходит потому, что сначала выводится невидимый экземпляр, а потом постепенно последовательность кадров полностью становится видимой.
4. Выделите оба экземпляра и выберите в меню Modify=>Symbol=>Tween Instances. Откроется уже знакомое диалоговое окно. Установите для числа кадров значение, равное 5, и установите флажок Distribute to Layers. Щелкните на кнопке ОК.
5. Воспроизведите ролик. Вы увидите проявление изображения талисмана. Остановите воспроизведение.
6. В панели Frames выберите последний кадр ролика, выделите изображение, сделайте его клон и установите прозрачность клона 100 процентов.
7. Выделите оба изображения и создайте соединение, как описывалось выше, из 5-ти кадров. Воспроизведите ролик. Теперь талисман проявляется и затухает.
8. Иногда вам может понадобиться убрать из ролика кадр. Например, в нашем ролике последний кадр в точности совпадает с первым. Для того чтобы удалить из ролика ненужный кадр, выделите его и щелкните на значке мусорной корзины в нижнем углу. Воспроизведите ролик.
9. Ролик воспризводится настолько быстро, что рассмотреть что-то практически невозможно. Вам нужно, чтобы он замедлялся на кадре, в котором талисман показан со 100-процентной видимостью. Выберите 7-й кадр и установите для его времени задержки значение 100 (точнее, в 100/100 секунды, т.е. целую секунду).
10. Воспроизведите ролик. Изображение должно проявиться, задержаться на 1 секунду на кадре со 100-процентной видимостью и постепенно погаснуть (Рисунок 14.16).

Создание Webстраниц с помощью Flash

Анимирование объекта

Анимирование объекта

Для того чтобы анимировать объект на сцене, вам придется воспользоваться соединением. Соединение — это автоматическое создание всех промежуточных шагов между начальным и конечным состояниями объекта; при этом изменение может быть перемещением, изменением цвета и т.п. В большинстве случаев объекты на сцене, над которыми вы будете выполнять соединение, — символы.
Для того чтобы анимировать объект во Flash, выполните следующее.
1. Добавьте ключевые кадры в 3-й, 10-й и 15-й кадры слоя Shoe. Выделите ключевой кадр в 3-м кадре. Ботинок будет выделен на сцене.
2. Выберите в меню Modify=>Transform=>Free Transform. Это позволит вам вращать ботинок. Щелкните на маркере в левом верхнем углу ботинка. Курсор превратится в курсор вращения. Если такого превращения не происходит, подвигайте мышью. Поверните ботинок носком вверх. Снимите выделение с ботинка и выделите его снова. Перетащите его к правому краю сцены.
3. Выделите ключевой кадр в 10-м кадре. Перетащите ботинок так, чтобы его носок касался левого края сцены, а подошва была в самом низу.
4. Выделите ключевой кадр в 15-м кадре и выберите в меню Modify=>Transform=>Scale. Это позволит вам точно задать масштаб преобразования. Задайте масштаб преобразования 25% и щелкните на кнопке ОК.
5. Перетащите ботинок и расположите его над словами. Щелкните правой кнопкой мыши между 3-м и 10-м ключевыми кадрами в слое Shoe и выберите в контекстном меню Motion Tween. Ваши сцена и шкала времени должны выглядеть так, как на Рисунок 15.12.

Ботинок готов свалиться на слово

Рисунок 15.12. Ботинок готов свалиться на слово


6. Передвиньте головку воспроизведения на кадр, на котором ботинок касается слова. Вставьте ключевой кадр в слой Words. Добавьте ключевой кадр в тот кадр, где ботинок накрыл слово, и в тот, где он уже не касается слова.
7. Выделите 1-й кадр, выберите в меню Modify=>Free Transform и перетащите маркер вниз так, чтобы слово начало сдавливаться.

Числовое преобразование в Fireworks

Рисунок 15.3. Числовое преобразование в Fireworks обеспечивает высокую точность


3. Переместите рисунок к правому краю холста и создайте тень с помощью функции Effects окна свойств.
4. Переместите рисунок к верхнему правому углу холста. Выберите инструмент Crop (Обрезка) и, нажав правую кнопку мыши, протащите указатель вокруг рисунка. С помощью маркеров размера установите нужный размер выделения (Рисунок 15.4). Когда все будет в порядке, нажмите клавишу .
5. Щелкните на холсте и с помощью окна свойств сделайте цвет холста прозрачным. Сохраните рисунок.

Действия управляющие анимацией

Действия, управляющие анимацией


Actionscript (описание действий) — это язык программирования для Flash. Это совершенный язык, и его описанию посвящено множество книг. Естественно, в настоящей книге мы не можем привести его полное описание, поэтому постараемся объяснить основные концепции.
Действия управляют тем, что происходит при воспроизведении ролика. Когда воспроизводится кадр, выполняется действие этого кадра. Когда вы щелкаете на объекте и что-то происходит, — это тоже выполняется действие этого объекта. Действия всегда выполняются в ответ на некоторое событие. Например, когда головка воспроизведения покидает кадр, происходит действие Stop. Действие startDrag происходит, когда пользователь щелкает на объекте и передвигает мышь. В данном случае событие, запускающее данное действие, — это не щелчок, а перемещение мыши.

Диалоговое окно Publish Settings

Рисунок 15.24. Диалоговое окно Publish Settings


5. Щелкните на кнопке Publish, сохраните ролик и выйдите из Flash MX. В результате публикации все файлы попадут в ту же папку, где находится ваш ролик Кроме того, будут созданы файлы SWF и HTML (Рисунок 15.25), которые получат те же имена, что и ролик.

Если у объекта нет градиентов

Рисунок 15.6. Если у объекта нет градиентов или размытых краев, то можно использовать прозрачный GIF для передачи рисунка во Flash MX

Формат рисунка выбирается в окне

Рисунок 15.5. Формат рисунка выбирается в окне Export Preview Для того чтобы создать прозрачный GIF-рисунок, выполните следующее.


1. Откройте рисунок Shoe.png в Fireworks MX. Выберите File=>Export Preview, открыв диалоговое окно, показанное на Рисунок 15.6.
2. Установите формат GIF и палитру WebSnap Adaptive. Выберите инструмент Eyedropper со знаком "плюс" и щелкните им на белом фоне. Фон исчезнет. Щелкните на кнопке Export, открыв диалоговое окно. Дайте рисунку имя, щелкните на кнопке Save и выйдите из Fireworks.
Вспомните о пропускной способности каналов. Наш рисунок получился весьма небольшим, поэтому время загрузки должно быть вполне приемлемым.

Импорт во Flash

Импорт во Flash

Flash может импортировать файлы самых разных форматов, таких как GIF, PNG, JPG и формат FreeHand 10. В предыдущих версиях Flash импорт 32-битового PNG был мучительным делом, при этом приходилось пользоваться многоуровневыми окнами со многими вариантами выбора. Теперь с этим покончено. Многоуровневые окна остались только для многослойных рисунков PNG.
Для того чтобы импортировать рисунок с прозрачным фоном во Flash MX, выполните следующее.
1. Откройте свою анимацию Flash, в которой нет ничего, кроме символа, покрывающего всю сцену. Откройте библиотеку, выбрав в меню Window=>Library. Выберите в списке библиотеки New Symbol. Назовите этот символ Mascot, а в качестве его свойства выберите Graphic.
2. Выберите в меню Reimport и найдите файл, который вы только что создали. Выделите его, щелкните на кнопках Add и ОК. Рисунок появится на сцене в виде символа.
3. Есть много способов импортировать рисунки из Fireworks во Flash. Можно скопировать рисунок в Fireworks и вставить его во Flash. Можно сделать это с помощью кнопки Quick Export Наш любимый способ — перетащить рисунок из окна Fireworks в окно Flash.

Экспорт файлов Flash в Dreamweaver MX

Экспорт файлов Flash в Dreamweaver MX


Экспорт Flash-файлов в Dreamweaver MX достаточно прост. Вы должны разбить страницу на слаисы, Открыть файл в Dreamweaver MX и вставить Flash-файлы в отведенное место.

Это диалоговое окна позволяет оптимизировать рисунок

Рисунок 15.19. Это диалоговое окна позволяет оптимизировать рисунок


При создании растрового рисунка Flash использует сжатие JPG. Поэтому нельзя подвергать повторному сжатию уже сжатый рисунок, так как это может ухудшить качество рисунка.
2. Наведите курсор на рисунок в окне просмотра. Когда курсор примет вид руки, рисунок можно перетаскивать. Снимите флажок Allow Smoothing в диалоговом окне Bitmap Properties. Обратите внимание на то, что пиксели вдоль внешнего края левой руки человечка стали более четкими.
3. Щелкните в поле ввода в верхней части окна. Здесь вы можете изменить имя рисунка в библиотеке, но не имя файла. Под полем ввода содержится информация о файле рисунка: путь к нему, дата создания, размер файла и глубина цвета.
В списке Compression можно указать способ сжатия рисунка, выбрав Photo (JPG) или Lossless (PNG/GIF). Сжатие JPEG лучше использовать для сложных рисунков, таких как фотографии; сжатие PNG/GIF хорошо использовать для простых рисунков, содержащих большие области чистого цвета. Но это только общие рекомендации, и вам ничто не мешает экспериментировать.
4. Снимите флажок Use Imported JPEG data, установите флажок Lossless и щелкните на кнопке Test. Обратите внимание, что размер файла уменьшился на 30%. Но если вы внимательно посмотрите на окно просмотра, то убедитесь, что заметного снижения качества изображения не произошло.
5. Выберите параметр JPEG. Введите 20% в поле Quality (Качество) и щелкните на кнопке Test. Вы заметите, что файл стал еще меньше, но качество рисунка не снизилось. Установите значение качества, равное 40%.
6. Рисунок стал лучше, но голубой цвет в рубашке несколько поблек. Установите значение качества, равное 45%, и щелкните на кнопке Test. Размер значительно уменьшился, но качество осталось приемлемым.
7. Установите значение параметра Compression в Lossless и щелкните на кнопке ОК. Это делается для сохранения качества. Сделайте то же самое с рисунком Shoe.GIF.

Кнопка Quick Export — новое средство

Рисунок 15.7. Кнопка Quick Export — новое средство Fireworks для экспорта рисунков в различные приложения


4. Импортируйте прозрачный GIF как новый графический символ. Создайте еще один символ, назвав его Shoe Words. Введите слово Shoes. Выберите шрифт Helvetica Bold размером 30 пунктов. Цвет текста сделайте белым. Сохраните работу.

Метка добавлена в 3й кадр слоя Label

Рисунок 15.15. Метка добавлена в 3-й кадр слоя Label


4. После того как текст программы введен, все должно выглядеть так, как на Рисунок 15.16. Выберите в меню панели пункт Check Syntax или нажмите клавиши . Flash проверит синтаксис программы. Если там встретится ошибка, то вы получите сообщение об этом.

На вкладке Flash вы можете указать

Рисунок 15.23. На вкладке Flash вы можете указать, как должны обрабатываться разные элементы вашего ролика

Окно Bandwidth Profiler

Окно Bandwidth Profiler


Окно Bandwidth Profiler (Рисунок 15.18) трудно переоценить. В нем вы можете не только просмотреть ролик, но и узнать, сколько байт занимает каждый кадр, могут ли возникнуть проблемы с модемом на разных скоростях и каков полный размер вашего ролика.

Оптимизация векторных рисунков

Оптимизация векторных рисунков


На скорость и эффективность воспроизведения влияют не только растровые рисунки. Векторные рисунки тоже могут создавать Если вы захотите отредактировать рисунок в Fireworks, то это можно сделать без повторного импортирования рисунка. Закончив редактирование рисунка в Fireworks, вернитесь в диалоговое окно Bitmap Properties и щелкните на кнопке Update. Рисунок обновится, приняв изменения, сделанные в Fireworks. Проверьте ролик. Изменения в нагрузке 1-го кадра получились незначительными. Причина в том, что мы хорошо подготовили этот рисунок в Fireworks.
Некоторые проблемы. Каждая точка на кривой, или узел, требует ресурсов процессора для обработки. Чем меньше узлов на ваших кривых, тем меньше нагрузка на процессор, и в результате — более плавное воспроизведение ролика.
В нашем ролике рисунок логотипа имеет немного лишнего материала. Для того чтобы оптимизировать векторный рисунок, сделайте следующее.
1. Откройте символ логотипа, импортированный из FreeHand, и разгруппируйте его. Для этого несколько раз нажмите клавиши . После чего все объекты, составляющие этот рисунок, окажутся разгруппированными.
2. Выберите инструмент Subselection и щелкните им на границе вокруг градиента. Увеличьте масштаб изображения объекта. Вы увидите множество узлов, определяющих эту кривую.
3. Дважды щелкните на кривой инструментом Selection. Выберите в меню Modify=>Smooth (Сгладить). Это приведет к уменьшению числа узлов на кривой. При этом кривая немного изменит свою форму. Уменьшая число узлов на кривой, вы снижаете нагрузку на каналы передачи, но помните, что при этом кривая становится не такой определенной, как раньше.

Оптимизация звука во Flash MX

Оптимизация звука во Flash MX


Чтобы привлечь к ролику внимание посетителя, добавим к нему звук. Но помните, что экспериментировать со звуком нужно осторожно, потому что именно звуковое сопровождение сильнее всего приводит к увеличению размера анимации Flash. Если вы надеетесь, что к ролику можно добавить кристально чистый стереозвук, то я вас разочарую.
Для создания звука Flash MX использует файлы типа .aif, mp3 или .wav. Хотя считается, что форматы .aif и .wav зависят от платформы, на самом деле это не так уж важно. Важен объем звукового файла. Например, 16-битовое стерео на частоте 44 КГц не подходит для наших целей. Пьеса продолжительностью 30 секунд в этом формате займет 2,6 Мбайт. Но измените частоту записи на 11 КГц, и объем файла снизится до 660 Кбайт, причем без заметного снижения качества.
Для того чтобы оптимизировать звук, выполните следующее.
1. Импортируйте файл stomp.aif в ролик. Он появится в библиотеке со значком динамика.
2. Дважды щелкните на значке файла. В открывшемся диалоговом окне Sound Properties (Рисунок 15.21) щелкните на кнопке Test и прослушайте звук.

Панель Actions во Flash MX

Рисунок 15.14. Панель Actions во Flash MX


Эта панель ведет себя подобно хамелеону, меняя вид и свойства в зависимости от ситуации. Например, в приведенном выше случае мы имели дело с действием кадра, и панель называлась соответственно. Если бы мы имели дело с действием кнопки, то название окна изменилось бы.
Значки в левой части этого окна имеют вид книжек, но в зависимости от действий и режима, вид этих значков изменяется. Один из них особенно важен для нас. Это значок Deprecated Actions. Здесь собраны действия, сохранившиеся из старых версий Flash, и естественно ожидать, что в последующих версиях они не будут поддерживаться. Это плохая новость. Но есть и хорошая — для всех устаревших действий создаются их современные эквиваленты.
Если вы не очень опытны в написании программ на Actionscript, возьмите себе за правило проверять синтаксис каждый раз, написав программу. Это можно сделать, выбрав в меню панели Actions пункт Check Syntax. Если в программе есть ошибка, то эта панель укажет вам, где источник проблемы, такой как пропущенная или неверно поставленная скобка.
Опытные программисты могут просто написать программу с помощью Блокнота или другого текстового редактора и вставить ее в окно редактора программ. С помощью меню панели Actions можно вставить текст программы в панель, экспортировать программы в виде текстового файла и даже вывести программу на печать. Если вам нужны эти средства, то получить доступ к ним можно только через меню панели Actions, но не через меню Flash MX. Кроме того, вы можете пронумеровать строки программы с помощью того же самого меню панели. Это особенно полезно в том случае, если вы получили сообщение об ошибке, потому что такое сообщение всегда ссылается на номер строки. Нумерацию строк лучше всегда держать включенной.

Панель Actions

Панель Actions


Если вы воспроизведете только что созданный ролик, то он будет воспроизводиться снова и снова. Мы называем такое воспроизведение циклическим. Но в данном случае это не то, что нам нужно. Нам нужно, чтобы воспроизведение остановилось на 30-м кадре и больше не повторялось. Для этого придется воспользоваться языком Actionscript.
Для того чтобы добавить в кадр действие, выполните следующее.
1. Вставьте ключевой кадр в 30-й кадр слоя Action. Если не вставить ключевой кадр, то не возможно добавить действие. Щелкните на кадре правой кнопкой мыши и в контекстном меню выберите Action, чтобы открыть окно Actionscript Editor (Рисунок 15.14).
2. Щелкните на значке Actions. Когда раскроется список, щелкните на значке Movie Control. Найдите строку Stop и дважды щелкните на ней. Теперь действие Stop применено к кадру. Если вы посмотрите на кадр, то увидите в нем маленькую букву а, — это означает, что в кадр записана программа Actionscript.
Панель Actions и редактор действий — это, пожалуй, самые сложные части Flash. В зависимости от вашего уровня подготовки вы можете непосредственно вводить команды языка с клавиатуры в режиме Expert, а можете работать с помощью мыши, щелкая и выбирая нужные варианты в режиме Normal.

Подготовка 32битового файла PNG для экспорта во Flash

Подготовка 32-битового файла PNG для экспорта во Flash

Теперь мы должны передать рисунок во Flash, сохранив при этом прозрачный фон. При этом вы понимаете, что набор подходящих форматов ограничен. Формат jpg сделает вам белый фон. Если сделать .gif с прозрачным фоном, то вокруг тени появится белое пространство. Ни то ни другое нас не устраивает.
Для того чтобы передать рисунок во Flash с прозрачным фоном, этот рисунок должен быть 32-битовым. 32-битовый рисунок — это цветной рисунок со встроенным альфа-каналом. В Fireworks у вас есть два подходящих 32-битовых формата: tiff и png. Но поскольку Flash не работает с форматом tiff, выбора у вас на самом деле нет.
Для того чтобы создать 32-битовый рисунок в формате png, сделайте следующее.
1. Выберите File=>Export Preview, чтобы открыть диалоговое окно, которое вы видите на Рисунок 15.5. Обратите внимание на размер файла и на время загрузки для модема 56К. Это важная ключевая информация.
2. Выберите PNG 32 из списка форматов и щелкните на кнопке Export. Откроется диалоговое окно.
3. Выберите Images Only из списка Save As и щелкните на кнопке ОК. Закройте Fireworks.

Подготовка Flashанимации

Подготовка Flash-анимации


Создавая анимацию во Flash, лучше не концентрировать внимание на конечном продукте, а рассматривать анимацию как последовательность отдельных составляющих частей. В нашем случае такими составляющими частями будут следующие.

Неподвижные элементы, например фон, логотип, человечек-талисман и др.

Ботинок, падающий на слово.

Ботинок, который проявляется и исчезает.

Два растровых изображения — человечек и ботинок, которые замедляют анимацию.

Ролик, который должен воспроизводиться только один раз. Для этого нужно предусмотреть остановку в последнем кадре.

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

Подготовка к экспорту проверка и оптимизация ролика

Подготовка к экспорту: проверка и оптимизация ролика


Ролик готов, и теперь настало время настоящей работы Flash. Для того чтобы ролик имел минимальный размер, необходимо удалить из него каждый байт, который можно удалить без снижения качества. К счастью, во Flash для этого есть достаточный набор эффективных средств.
Эти средства позволят вам проверить, как ролик нагружает сеть при передаче, и обнаружить все места, которые могут вызвать проблемы и снизить скорость. Вы можете оптимизировать рисунки. Цель состоит в том, чтобы как можно больше сжать файл, но без потери качества рисунка.
1. Выберите в меню Control=>Test Movie. Эта команда создает и открывает файл с расширением .SWF.
2. Когда файл откроется, нажмите клавиши . Ваш ролик будет иметь обычный размер, а не увеличенный, как в окне предварительного просмотра. Ролик автоматически начнет воспроизводиться.
3. Для повторного воспроизведения нажмите клавишу . Посмотрев ролик, выберите в меню View=>Bandwidth Profiler, чтобы открыть новое диалоговое окно.

Подготовка логотипа для Flash MX

Подготовка логотипа для Flash MX

Появление символов во FreeHand 9 привело в усилению интеграции Flash и FreeHand. Фактически теперь символы во FreeHand и Flash представляют собой одно и то же. Для того чтобы экспортировать символ из FreeHand во Flash, выполните следующее.
1. Откройте файл Logo.fh во FreeHand. Обратите внимание, что размер страницы во FreeHand меньше, чем во Flash. Типичной практикой для разработчиков является правило делать размеры объектов FreeHand немного меньше, чем размеры сцены во Flash.
1. Выберите в меню Window=>Library и откройте панель Symbol. Выделите градиентный объект, щелкнув на обрамлении вокруг градиента, и перетащите его на панель Library. Повторите то же самое с оставшимися тремя объектами — буквами JT, С и белой буквой О. Когда все объекты окажутся в библиотеке, переименуйте каждый символ, дважды щелкнув на нем (Рисунок 15.8).

Подготовка прозрачного GIF рисунка для Flash MX

Подготовка прозрачного GIF- рисунка для Flash MX

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

Подготовка рисунков Fireworks для Flash MX

Подготовка рисунков Fireworks для Flash MX


Рисунок Fireworks может представлять собой сочетание растровых и векторных объектов. Сейчас нас особенно интересуют растровые объекты. Почему? Потому что у Flash весьма сложные "отношения" с растровыми рисунками. Flash ненавидит растры. Такие рисунки перегружают каналы и увеличивают время загрузки в несколько раз. Flash может преобразовывать растры в векторный формат, но качество после этого может сильно пострадать по сравнению с оригиналом. Если дело доходит до использования растров во Flash, то правило одно: чем их меньше и чем меньше их размер — тем лучше.
Для того чтобы подготовить наш рисунок с талисманом для передачи во Flash, выполните следующее.
1. Откройте файл Mascot.png из папки с упражнениями к главе 15, выделите рисунок и запомните его размеры, указанные в окне свойств. Эти размеры больше, чем размеры нашей сцены во Flash. Кроме того, у рисунка есть белый фон, который по цвету не подходит к фону анимации, и у человечка на рисунке нет тени. Сейчас мы разберемся со всеми этими проблемами в указанном порядке.
Неприятная особенность Fireworks состоит в том, что если вы используете рисунок, больший по размеру, чем ваш холст, то рисунок обрезается. Это происходит даже в том случае, когда вы уменьшаете рисунок после уменьшения холста. Вот как можно этого избежать.
2. Выделив рисунок, обрежьте его. С помощью окна свойств установите размеры холста так, чтобы они совпадали с размерами сцены Flash MX. Вставьте рисунок через буфер обмена на холст и оставьте его выделенным. Сейчас рисунок немного больше, чем холст. Выберите в меню Modify=>Transform=>Numeric Transform и откройте диалоговое окно (Рисунок 15.3). Установите коэффициент преобразования 30% и убедитесь, что оба флажка внизу окна установлены.

Подготовка рисунков FreeHand для экспорта во Flash MX

Подготовка рисунков FreeHand для экспорта во Flash MX


Для отображения рисунков на сцене Flash использует векторы. Самое главное свойство векторов заключается в том, что векторная графика занимает очень мало места в файле. Дело в том, что это просто математическое описание кривых (так называемых кривых Безье), которые залиты определенным цветом. Вместо того чтобы выводить каждый пиксель, процессор делает то, для чего он и предназначен, — обрабатывает формулы и преобразует их в цветные фигуры. Формулы эти стандартны, и их не нужно передавать, а аргументы формул — это координаты узлов, между которыми проводятся кривые Безье. Каждый сегмент кривой определяется четырьмя числами. Это упрощенная картина векторной графики, основанной на кривых Безье, но суть ясна: числовые аргументы формул занимают во много раз меньше места, чем сами растровые изображения.
Для нашей анимации использование файла, экспортированного из Fireworks, в действительности будет неэффективным. Данный файл состоит из растрового изображения, что слишком сильно нагружает Flash. Если вы посмотрите свойства файла Logo.png в папке с упражнениями к главе 15, то убедитесь, что его размер составляет 64 К. Для сравнения мы поместили туда же файл, созданный во FreeHand, Logo.fhl0. Его размер — всего 24 Кбайт, т.е. на 60% меньше. Это существенно для нашей задачи.
Вот почему мы включили в папку файл, созданный во FreeHand MX. Конечно, мы могли бы объяснить, как сделать анимацию из файла, созданного в Fireworks, но вспомните о пропускной способности канала. Такая анимация могла бы работать, но это был бы еще один пример того, как не нужно делать. Когда речь идет об использовании Flash, очень важно применять правильные средства в конкретной ситуации, поэтому мы будем использовать векторное приложение.

Подготовка сцены

Подготовка сцены


Здесь вы имеете дело с неподвижными элементами. Кроме того, вы создаете пространство для подвижных элементов и загрузчик. Если элемент должен быть неподвижным на сцене, ваша задача состоит в том, чтобы он был расположен в правильном месте и отображался столько времени, сколько нужно.
Для того чтобы подготовить сцену анимации, выполните следующее.
1. Добавьте два новых слоя вверху шкалы времени, щелкнув на кнопке Insert Layers. Назовите эти слои Labels (Метки) и Actions (Действия). Создание таких слоев — обычная практика среди разработчиков Flash. Таким образом, вам доступны все действия, влияющие на поведение кадра, и, если воспроизведение переходит на другое место на шкале времени, вы видите имя кадра, а не его номер. Дело в том, что ролик меняется в процессе создания, кадры добавляются и удаляются. Если вы видите имя кадра, вам проще ориентироваться в том случае, когда в ролик был добавлен новый кадр или удален существующий.
Например, вы поместили вместо фотографии своего сына фотографию своей дочери. Фотография дочери была в 5-м кадре. Вы добавили новый кадр под номером 4. Для того чтобы исправить ошибку, вам придется просмотреть всю программу Actionscript и изменить все ссылки на номер определенного кадра. Это мучение. Но если кадр имеет Имя, то Понадобится лишь заменить имя кадра Son на Daughter.
2. Добавьте 4 новых слоя над слоем фона и назовите их Words, Logo, Mascot и Shoe. Они должны быть под слоем Action. Если вы все сделаете правильно, ваша шкала времени должна выглядеть так, как на Рисунок 15.10.
3. Щелкните на 30-м кадре слоя Label и перетащите его до нижнего слоя. Таким образом, кадры выделены. Выберите в меню Insert=>Frame и задайте длительность ролика 30 кадров.
4. Выделите 1-й кадр слоя Mascot и перетащите экземпляр слоя на сцену. Повторите все это с объектами логотипа, слов и ботинка. Разместите объект так, как показано на Рисунок 15.11.
5. Выделите слой фона и щелкните на точке под значком с изображением замка. Таким образом, вы блокируете слой на своем месте. Выполните эти же действия со слоями Logo и Mascot.

Покадровое описание

Покадровое описание


Нужно сказать, что создание анимации никогда не начинается во Flash. Процесс начинается с интенсивного продумывания, с мозгового штурма, потом создается покадровое описание. В нашем случае нужно было сделать что-то для демонстрации секции обуви. После долгих обсуждений мы решили обыграть логотип компании.
"Наверное, будет здорово, — подумали мы, — если слово Shoes сначала будет просто расположено на экране. Потом на него сверху спустится огромный ботинок и раздавит его. Слово подпрыгнет, отскочит от верхнего края и вернется на исходную позицию"
После такого решения мы задали себе вопрос: "Как мы объясним это заказчику, и согласится ли он с этим?" Для этого пришлось делать покадровое описание.
В данном случае покадровое описание для Flash представляет собой совсем не то, о чем мы говорили в главе 4. Покадровое описание для Flash представляет собой визуальное представление всего, что планируется разместить на сцене или в ролике. Оно включает в себя все рисунки, которые вы собираетесь разместить на Web-узле, с упоминанием того, когда эти рисунки будут выводиться. Кроме того, здесь приводятся все фрагменты текста, который будет комментировать эти рисунки. Если бюджет проекта не ограничен, такое описание может быть очень детальным, чтобы отразить особую сложность проекта. В этом случае покадровое описание само по себе занимает важное место в планировании проекта. В любом случае это описание дает каждому из участников, включая заказчика, твердую копию проекта. Твердая копия необходима, потому что в ходе словесного общения неизбежно возникает взаимное непонимание и у каждого может сформироваться своя картина Web-узла. Вспомните мозговой штурм, о котором мы говорили в начале главы. Потом откройте файл Finalshoe.swf из папки с упражнениями к главе 15 и сравните их. Похоже ли то, что сложилось в вашем представлении во время чтения, и то, что вы видите на экране?
Но, кроме того, что было сказано выше, есть еще несколько причин для создания покадрового описания.

Покадровое описание высвечивает все ошибки сценария. Если такое описание сделано небрежно, можете не сомневаться, что Flash-анимация будет не слишком впечатляющей.

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

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

Если на этом этапе обнаружена ошибка, то исправить ее гораздо проще и дешевле, чем потом. Например, что проще, вытереть рубашку, которая падает на слово Shoes вместо ботинка, и нарисовать ботинок или потратить несколько часов, удаляя ролик с рубашкой, вставляя вместо нее ботинок, и анимировать этот ботинок? Мы уже рассказывали об одном Web-узле, на котором был изображен вращающийся глобус, на котором город Акрон в штате Огайо был размещен совсем не там, где ему положено быть. Для исправления этого кому-то пришлось потратить несколько часов рабочего времени, и как вы думаете, кто заплатил за все это?

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

Публикация ролика

Публикация ролика


Выжав из ролика каждый лишний байт, который только можно было выжать, и повозившись с программой Bandwidth Profiler, мы можем заняться подготовкой ролика к передаче в Dreamweaver. Такой процесс подготовки называется публикацией.
При публикации ролик преобразуется в файл типа .swf, т.е. в сжатый Flash-файл. Этот файл может быть воспроизведен надстройкой Flash-player. Таким образом, созданный нами ролик становится объектом, который можно поместить на Web-страницу и просмотреть с помощью броузера.
Во Flash есть три команды, относящиеся к публикации: Publish Settings, Publish Preyiew, и Publish. Это может ввести в заблуждение неопытных разработчиков. Самая главная из этих команд — Publish Settings (Установки публикации). Здесь вы указываете способы и задаете установки, определяя, как файл будет взаимодействовать с броузером. Команда Publish Preyiew (Просмотр) служит для просмотра файла в программе Flash-player или для передачи его в Dreamweaver и последующего просмотра в броузере. Команда Publish (Публикация) просто создает файл на основе установок, сделанных в окне Publish Settings.

Размещение подвижных и неподвижных объектов

Рисунок 15.11. Размещение подвижных и неподвижных объектов

Результаты публикации помещаются

Рисунок 15.25. Результаты публикации помещаются в ту же пату, в которой находится ролик


Для того чтобы выполнить это, сделайте следующее.
1. Откройте файл ShoeSlice.png в Fireworks MX. Все слайсы уже находятся на своих местах. Выберите в меню File=>Export Preview. Приложение экспортирует слайсы и HTML и создаст таблицу. Щелкните на кнопке ОК.
2. Выйдите из Fireworks и откройте в Dreamweaver страницу, созданную в Fireworks. Щелкните на заполнителе Flash и удалите его.
3. Выделите слайс, в котором содержится заполнитель Flash Movie Box, и нажмите клавишу . Щелкните на пустом месте заполнителя, а потом щелкните на кнопке Flash.
4. Выберите файл, который вы создали, изучая материал предыдущего раздела. Щелкните на кнопке ОК.
Ролик Flash в данном случае изображен серым квадратом с логотипом Flash (Рисунок 15.26). Если вы хотите просмотреть ролик, щелкните на нем, а потом на кнопке воспроизведения в окне свойств. Сейчас можно изменить размеры окна ролика, введя новые значения в окне свойств. Проверьте работу ролика в броузере.

С помощью этого окна вы можете

Рисунок 15.9. С помощью этого окна вы можете импортировать все, начиная с объектов и заканчивая страницами, созданными во FreeHand

Сцена установлена Размеры сцены

Рисунок 15.2. Сцена установлена. Размеры сцены и фонового прямоугольника совпадают, объект преобразован в символ, а слой получил имя

Символы легко экспортируются из FreeHand во Flash

Рисунок 15.8. Символы легко экспортируются из FreeHand во Flash

Слайсы созданы в Fireworks и собраны

Рисунок 15.26. Слайсы созданы в Fireworks и собраны в Dreamweaver. Заменитель ролика выделен и готов к удалению


Приложение Flash, являясь векторным, очень тесно интегрировано с FreeHand. Очень мощным средством является возможность создавать объекты во FreeHand, потом сохранять их как символы и передавать во Flash.
Мы рассмотрели значительный материал, связанный с работой во Flash. Вы научились готовить сцену для создания анимации, узнали, как анимировать объекты и управлять этой анимацией с помощью языка Actionscript. Кроме того, вы узнали, как с помощью Bandwidth Profiler устранять узкие места, возникающие при загрузке ролика.
Но одно дело найти узкие места, а другое — устранить их. Оптимизируя растровые рисунки и создав простейший загрузчик, вы создали небольшой ролик, который быстро загружается и сравнительно неплохо воспроизводится. Мы поговорили об использовании звука во Flash MX и рассмотрели все, связанное с публикацией ролика.
И наконец, вы научились размещать Flash-ролик на странице Dreamweaver, причем делать это с высокой точностью.
По ходу изложения материала я дал вам много практических советов, но самый главный повторю еще раз: "Работая в приложении Flash, помните о пропускной способности каналов". В следующей главе вы не раз вспомните об этом, когда будете создавать ролик для Web-узла JCT.

Слои в анимации настроены и готовы к использованию

Рисунок 15.10. Слои в анимации настроены и готовы к использованию

Слово Shoes должно выскочить со

Рисунок 15.13. Слово Shoes должно выскочить со своего места, как указано в кадрах 13,20 и 25 слоя Words


Проявление и затенение
Следующий элемент анимации, который мы должны создать, — это затенение слова и вновь проявление его при движении по сцене. Это достигается путем изменения прозрачности объекта от 0 до 100 процентов между кадрами 15 и 20. Если объект полностью прозрачен, то про него говорят, что его альфа-значение равно 0. Когда объект становится менее прозрачным, то его альфа-значение увеличивается. Максимальное значение альфа — 100 процентов, т.е. объект полностью непрозрачен.
Для того чтобы создать изменение прозрачности, выполните следующее.
1. Вставьте ключевые кадры в 20-й и 25-й кадры слоя Shoe. Щелкните на ботинке в 20-м кадре и выберите в окне свойств в списке Color строки Colors Alpha.
2. Передвиньте ползунок в поле Alpha Amount к значению 2 процента или введите значение в поле. Рисунок затемнится. Сделайте соединение кадров (tween) между 15-м и 20-м кадрами и между 20-м и 25-м. Если вы теперь воспроизведете ролик, то изображение ботинка затемнится и снова проявится.

эффектное средство, но пользоваться им

Совет

Изменение альфа-значения — эффектное средство, но пользоваться им нужно осмотр рительно. Дело в том, что оно значительно замедляет анимацию, накладывая дополнительную нагрузку на процессор пользователя. Помните о пропускной способности. Этим средством можно пользоваться для создания плавного перехода между сценами или между отдельными роликами.

Перечисленные выше команды можно вызвать

Совет

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

вышло несколько прекрасных книг по

Совет

В Издательском доме "Вильяме" вышло несколько прекрасных книг по технологии Flash MX, с которыми вам обязательно нужно познакомиться, если вы всерьез собираетесь заняться этим делом. Например; Рейнхард Р., Дауд С. Flash MX. Библия пользователя; Гурвиц М , Мзк-Кейб Л Использование Macromedia Flash MX. Специальное издание. Наше намерение более реальное и более практическое. Мы хотим показать вам, как можно подготовить материалы в приложениях Flash, FreeHand и Fireworks, превратить их во Flash-анимацию и передать ее в Dreamweaver MX для создания Web-страниц. Это может показаться преувеличением, но сегодня в Сети полно Web-узлов, при создании которых их разработчики или забыли о том, что работают в Internet, или использовали не соответствующие инструменты, или просто хотели поумничать. В результате получаются Web-узлы, для загрузки которых в броузер требуется несколько минут, а в наши дни несколько минут — это почти вечность. Среди профессиональных дизайнеров нормой считается время загрузки 15 секунд. И если говорить честно, то анимация, которую мы создали, изучая материал предыдущей главы, тоже несколько перегружена. Поэтому в дальнейшем мы займемся ее оптимизацией, сократив объем и время загрузки до приемлемого, чтобы ее можно было воспроизводить в Сети.

То же самое можно сделать,

Совет

То же самое можно сделать, выбрав в меню ModifyoSymbol^Convert To.

Есть несколько альтернативных способов вставить

Совет

Есть несколько альтернативных способов вставить ключевой кадр. Щелкните на 5-м кадре и нажмите клавишу . В появившемся контекстном меню одной из строк будет Insert Keyframe.
Ключевой кадр — это любой кадр, в котором объект может изменяться со временем. Например, если объект должен двигаться в некотором направлении на протяжении 5-ти кадров, вставьте ключевые кадры в 1-й и 5-й кадры. Ключевой кадр легко опреде-J лить по жирной точке на шкале времени. яН 8. Выделите следующий справа ключевой кадр и перетаскивайте маркер, пока слово не станет плоским. Снимите выделение с ключевого кадра. Сделайте соединение между ключевыми кадрами в слое Words.
9. Теперь вы можете проверить, как это все работает. Перетащите головку воспроизведения на 1-й кадр и нажмите клавишу . Ботинок должен наехать на слово и сдавить его; потом, когда ботинок сожмется, слово отскочит назад. Для того чтобы оно отскочило подальше, добавьте ключевые кадры в 20-й и 25-й кадры слоя Words. Выделите экземпляр слова в 20-м кадре, переместите его к верху сцены, сожмите и поверните.
10. Сделайте соединение ключевых кадров между 15-м и 20-м кадрами, а также между 20-м и 25-м.
11. Воспроизведите ролик, нажав клавишу . Слова должны выскочить со своего места, когда ботинок отъедет от них, подскочить к верху сцены и опуститься на свое место (Рисунок 15.13). Сохраните файл.

Создание и сборка объектов во Flash MX

Создание и сборка объектов во Flash MX


Посетив Нью-Йорк несколько лет назад, один из авторов этой книги имел удовольствие побывать на семинаре для пользователей продуктов Macromedia, который вел Хилман Куртис (Hillman Curtis). Одна мысль Хилмана полностью совпадает с мнением автора. Он сказал: "Работая с программой Flash, всегда помните о пропускной способности каналов". Разумеется, речь идет о канале среднего пользователя. Всегда помня об этом, вы очень быстро приобретете привычку думать обо всех тонкостях своих разработок во Flash. Обо всех. Flash — это приложение для Web-анимации. Fireworks — приложение для создания рисунков. FreeHand — приложение для векторной графики. Вместе они составляют непревзойденную комбинацию. Но вы всегда должны помнить о пропускной способности канала.
Вот почему вы должны быть очень внимательны при создании анимации во Flash или при создании рисунков в Fireworks и во FreeHand. Размер рисунка и его формат оказывают первостепенное влияние на скорость загрузки рисунка в броузер. Поэтому нужно тщательно настраивать и оптимизировать рисунки перед тем, как передавать их из приложения, в котором они созданы, во Flash MX.

Создание Webстраниц с помощью Flash

Создание Web-страниц с помощью Flash


Если сравнить приложения, которые произвели революцию в своей области, то Flash, безусловно, окажется на первом месте. Это приложение произвело в среде Web-разработчиков эффект, подобный землетрясению, и мы до сих пор ощущаем его последствия.
Первые версии приложения не были особенно замечены, но способность создавать небольшие по объему анимационные ролики для Web-страниц или полностью интерактивные страницы произвела должное впечатление. С появлением 3-й версии все изменилось. Неожиданно для многих разработчиков появилась возможность создавать анимацию и интерактивность с помощью простого и знакомого интерфейса, и повсюду на Web-узлах стали появляться анимационные ролики. В 4-й версии появился специальный язык — Actionscript, и технология Flash стала серьезным инструментом для создания не только анимации, но и всего, что движется по экрану или как-то общается с пользователем. Фактически эта технология расширила наши представления о том, что можно делать в ограниченном пространстве Web. Повсюду появились новые игры и динамическое содержание, и возникла новая профессия — разработчик Flash.
Но прошло время, и 5-я версия Flash снова подняла Web-дизайн на новый уровень. Язык Actionscript приблизился по своему синтаксису к JavaScript, вписавшись в требования спецификации ЕСМА-262. В результате появилась еще одно новая профессия — программист на Actionscript. Теперь уже технология Flash была интересна не только дизайнерам — ей заинтересовались программисты, они закатали рукава и взялись за создание Web-приложений и Web-узлов.
Перед тем как вы начнете читать эту главу, мы должны предупредить вас, что мы не рассчитываем полностью научить вас технологии Flash, а тем более сделать специалистом. На тему Flash-дизайна и программирования на Actionscript написаны сотни книг, и будут написаны еще.

Создание загрузчика во Rash MX

Создание загрузчика во Rash MX


В нашем ролике есть два растровых изображения. Как вы знаете, растровые изображения сильно замедляют работу Flash MX. Имея это в виду, мы должны сделать так, чтобы броузер ждал, пока не загрузится 30-й кадр, чтобы ролик мог продолжать воспроизведение. В противном случае могут возникнуть проблемы, связанные с задержкой при загрузке рисунка.
При работе с языком Actionscript хорошей практикой является использование псевдокода. Псевдокод — это алгоритм, записанный на обычном языке, в котором сказано, что и когда должно произойти. Потом на основе псевдокода легко написать команды языка Actionscript.
Для нашего загрузчика псевдокод выглядит так.

Когда воспроизведение дойдет до первого кадра, проверить, все ли 30 кадров загрузились.

Если не все кадры загрузились, перейти ко 2-му кадру, а затем к 1-му.

Если все кадры загрузились, пропустить 2-й кадр и воспроизвести ролик полностью.

Теперь ясно, как писать программу. Нам нужно действие, которое будет подсчитывать количество загруженных кадров, когда закончится воспроизведение 1-го кадра. Если это количество меньше 30, то действие во 2-м кадре должно перевести воспроизведение к 1-му кадру. Если все кадры загружены, то 2-й кадр пропускается и ролик воспроизводится до конца.
Из этого следует, что 3-й кадр — особенный. Никогда не следует в программах переводить воспроизведение к кадру с указанным номером. Если вы вставите или удалите некоторые кадры, то программа после этого будет работать неправильно. На такой случай Flash позволяет вам именовать кадры, вставляя в них метки.
Ниже мы объясним, как вставить метку с именем Go в 3-й кадр ролика. В программе вы будете ссылаться на кадр Go, а не на 3-й кадр. Таким образом, вы повышаете гибкость своей программы. Представьте себе, что вы добавили 10 кадров после 2-го. Понятно, что теперь то, что раньше было в 3-м кадре, окажется в 11-м. Если ваша программа ссылается на номера кадров, то вам нужно просмотреть всю программу и заменить все ссылки на 3-й кадр. В сложных проектах это может оказаться серьезной проблемой. Если программа ссылается на метку, вам нужно просто перенести метку в 11-й кадр.
Но перед тем как писать программу, нужно научиться вставлять метку в кадр. Вот как это делается.
1. Щелкните на 3-м кадре слоя Label и вставьте ключевой кадр. Метку можно вставлять только в ключевой кадр.
2. Щелкните в поле ввода под словом Frame в окне свойств и введите Go. Нажмите клавишу . В 3-м кадре появится флажок рядом со словом Go (Рисунок 15.15).
3. Добавьте ключевой кадр в 1-й кадр слоя Action и щелкните правой кнопкой мыши на нем. В открывшемся контекстном меню выберите пункт Actions, и отобразится панель Actions. Выберите режим Expert Mode, чтобы открыть окно Actionscript Editor. В этом режиме вы можете вводить текст программы непосредственно в окно. Щелкните на пустом месте окна и введите следующий текст:

if_(framesloaded,=_totalframes){ GotoAndPlay ("Go"); }
В первой строке проверяется, равно ли число загруженных кадров frames loaded числу всех кадров ролика _total frames. Вторая строка выполняется, если выполнено условие первой строки. Если загружены все 30 кадров, то воспроизведение переходит к кадру с меткой Go. Все имена в языке Actionscript должны быть заключены в кавычки.

Текст программы введен

Рисунок 15.16. Текст программы введен


5. В данном случае мы говорим программе, что нужно, войдя во 2-й кадр, перейти к 1-му. Добавьте ключевой кадр в 2-й кадр слоя Actions. Откройте панель Actions и выберите режим Normal.
6. Выберите значок Actions и щелкните дважды на строке GoTo. Откроется диалоговое окно GoTo. Выберите в списке Туре строку Number и введите в поле Frame число 2. Редактор Actionscript изменится и станет таким, как показано на Рисунок 15.17.

Установка цвета фона

Установка цвета фона


Возможно, вы заметили, что того цвета, который вы выбрали в Fireworks, в палитре Flash нет. Это не такая серьезная проблема, как может показаться на первый взгляд. Большинство разработчиков в такой ситуации создают прямоугольник нужного цвета и размера и подкладывают его на сцену.
Есть и еще одна причина, по которой бывает удобно использовать в качестве фона цветной прямоугольник. Ведь Flash — это приложение для анимации, и иногда вам может понадобиться отвлечь внимание пользователя от каких-то происходящих на сцене изменений. В таком случае вы можете изменить цвет фона или применить другой отвлекающий эффект.
Для того чтобы создать фоновый прямоугольник, сделайте следующее.
1. Выберите инструмент Rectangle, нарисуйте прямоугольник, совпадающий по размеру со сценой, и выделите его. Не страшно, если его размеры не совпадут в точности, вы можете изменить их с помощью окна свойств. Нажмите клавишу .
2. Для того чтобы края объекта точно совпали с краями сцены, установите для его координат X и.У в окне свойств значение 0. Объект будет расположен точно в левом верхнем углу сцены. Обрамление прямоугольника удалите, а заливку сделайте тем цветом, который вы выбрали в логотипе компании.
3. Когда прямоугольник будет выделен, выберите в меню Insert=>Convert to Symbol. Это то же самое, что и создание символа в Fireworks. После этого ваш прямоугольник — это копия объекта, который находится в библиотеке Flash.
4. Назовите этот символ Background и выберите переключатель Graphic в диалоговом окне Symbol Properties. Щелкните на кнопке ОК. Дважды щелкните на вкладке Layers и назовите слой Background (Рисунок 15.2). Сохраните файл и выйдите из Flash MX. Пришло время подготовить объекты для анимации.

Установка сцены для Flash MX

Установка сцены для Flash MX


Flash-анимация всегда находится в ограниченном пространстве страницы. Понятно, что создание анимации, большей, чем страница, будет пустой тратой времени и породит больше проблем, чем достоинств. Возникает вопрос: "Какого размера и какого цвета должен быть участок экрана, предназначенный для воспроизведения ролика?" Как видно на Рисунок 15.1, для ролика оставлено пустое место. Чтобы определить размер такого места, выполните следующее.
1. Скопируйте папку с упражнениями к главе 15 и откройте файл ShoePage.png. Щелкните на пустом месте, оставленном для ролика. Его размеры можно увидеть в нижнем левом углу окна свойств (Рисунок 15.1).

Установки публикации для подготовки ролика к экспорту

Установки публикации для подготовки ролика к экспорту


Это самый важный раздел приложения. Именно здесь вы выбираете формат SWF-и HTML-файлов. Здесь вы указываете, как ролик будет передаваться через сеть, как загружаются материалы ролика, какие отчеты при этом формируются и как сжимаются растровые изображения. Кроме того, здесь же вы указываете, как обрабатывается звук. В этом разделе вы должны принять несколько важных решений относительно HTML-документа, в частности, как он выводится в начале просмотра и в какой шаблон будет внедрен SWF-файл.
Для того чтобы настроить установки публикации, выполните следующее.
1. Выберите в меню File=>Publish settings или нажмите комбинацию клавиш . Откроется диалоговое окно, которое вы видите на Рисунок 15.22.

В диалоговом окне Optimize Curves

Рисунок 15.20. В диалоговом окне Optimize Curves с помощью ползунка выполняется оптимизация кривых


4. Отмените изменения, нажав клавиши . Выберите в меню Modify=>Straighten (Выпрямить). Посмотрите, что произошло с кривыми. Отмените и эти изменения. Выберите Modify=>Optimize, и откроется диалоговое окно Optimize Curves (Оптимизация кривых).
Диалоговое окно Optimize Curves вы видите на Рисунок 15.20. Оптимизация кривых выполняется приблизительно так же, как и сглаживание, но при этом вы пользуетесь ползунком. Перетаскивание ползунка меняет количество узлов на кривой. При этом тоже происходит искажение формы кривой.
В этом окне есть два флажка Если установить флажок Use multiple passes, то оптимизация будет автоматически повторяться до тех пор, пока уже нечего будет оптимизировать.
Второй флажок служит для того, чтобы вы получали сообщения о ходе оптимизации.

В этом окне можно управлять сжатием

Рисунок 15.21. В этом окне можно управлять сжатием звука и обновить файл после повторного импортирования


В верхней части окна вы видите данные о размере файла, дате его изменения, а также путь к нему, время звучания и т.п. Волновой график в окошке — это графическое изображение самого звука.
В нижней части окна вы можете выбрать схему сжатия звукового файла. В списке Compression есть много вариантов, но самый обычный — это формат трЗ. Если вы выберете этот формат, то откроется еще несколько окон, в которых вы сможете установить параметр bit rate и выбрать качество звука.
Если вы щелкнете на кнопке Update, то Flash проверит наличие новых версий этого файла. Кнопка Import позволяет импортировать звуковые файлы во Flash. Что делает кнопка Test, вы уже знаете. Кнопка Stop, как не трудно догадаться, останавливает воспроизведение звука. Кнопка Help открывает программу справки.

В окне Bandwidth Profiler вы видите

Рисунок 15.18. В окне Bandwidth Profiler вы видите графическое представление потенциальных проблем. В данном случае пик в 1-м кадре означает, что в нем приходится загружать слишком много данных


Первый раздел этого окна, слева от графика, разбит на три секции. В верхней секции отображаются размер окна ролика, скорость его воспроизведения, размер файла ролика и скорость загрузки. В средней секции показана скорость модема, для которой вы тестируете ролик. В нижней секции приведены номер текущего кадра, количество загруженных в данный момент кадров и требования данного кадра к памяти.
График, приведенный справа, показывает для каждого кадра, как выводится его содержимое. Красная линия, движущаяся по графику, показывает, как быстро загружается каждый кадр в зависимости от выбранной скорости модема.
В данном случае вы видите влияние растрового рисунка, который содержится в 1-м кадре. Кроме того, вы можете оценить действие загрузчика. Если бы его у нас не было, то ролик застрял бы на этом месте, пока рисунок полностью не загрузился.
Для того чтобы изменить скорость модема, выберите в меню пункт Debug и установите новую скорость.
Первый кадр, как уже мы выяснили, создает "пробку" в движении. Вот как можно оптимизировать его, удалив несколько лишних байтов.
1. Закройте окно Bandwidth Profiler и откройте панель Library. Рисунок с человечком-талисманом — один из растровых рисунков. Дважды щелкните на файле Mascot.png, чтобы открыть диалоговое окно Bitmap Properties (Рисунок 15.19).

В окне свойств показаны размеры

Рисунок 15.1. В окне свойств показаны размеры места, оставленного для ролика


2. Цвет подкладки для ролика не соответствует дизайну страницы. Удачным решением был бы цвет буквы С в логотипе компании JCT. Выберите инструмент Eyedropper (Пипетка) и щелкните им на голубом цвете в логотипе. Потом щелкните на значке заливки в панели инструментов. Выбранный цвет появится в палитре цветов, и отобразится его числовое значение — ООООС8. Запомните это значение. Закройте файл и выйдите из Fireworks.
3. Откройте Flash. Когда откроется новый ролик, его размеры по умолчанию будут 550x400 пикселей. Измените их на 96x157 пикселей. Оставьте скорость воспроизведения 12 кадров в секунду и цвет подложки измените на белый. Щелкните на кнопке ОК. Если изображение кажется вам слишком мелким, щелкните на увеличительном стекле на панели инструментов, а потом на сцене.

Во 2й кадр вставлено действие GoTo

Рисунок 15.17. Во 2-й кадр вставлено действие GoTo

Воспроизведение звука

Воспроизведение звука

К сожалению, добавление звука на шкалу времени — это не такой простой процесс. Вы можете подумать, что достаточно просто перетащить экземпляр звука на шкалу, но не тут то было.
Для того чтобы добавить звук на шкалу времени Flash MX, выполните следующее.
1. Добавьте новый слой под слоем Actions, назовите его Sound и вставьте ключевой кадр в 10-й кадр.
2. Перетащите символ stomp.aif на сцену (не на шкалу времени!) и отпустите кнопку мыши. Волновая кривая на шкале времени покажет, что к ролику добавлен звук. Воспроизведите ролик. Звук должен возникнуть в нужном месте.

Выполнить обрезку в Fireworks совсем не сложно

Рисунок 15.4. Выполнить обрезку в Fireworks совсем не сложно

Наш технический редактор предлагает свой

Замечание

Наш технический редактор предлагает свой собственный тест для проверки времени загрузки. Загрузите файл из Web, откройте его на соответствующем компьютере и глубоко вздохните. Если вы успели заскучать, то страница нуждается в оптимизации.

В приведенном выше разделе мы

Замечание

В приведенном выше разделе мы преследовали цель познакомить вас с техникой изменения размеров холста и преобразования масштаба рисунка. Кроме того, мы хотели научить вас пользоваться специальными эффектами, такими как тень. Но для этого есть и более простой путь.
Выделите рисунок с помощью инструмента Subselection и сожмите его до 40%. Вырежьте его из рисунка, закройте рисунок и не сохраняйте изменения.
Откройте новый документ Fireworks и установите размеры холста 96x157 пикселей. Сделайте фон прозрачным, вставьте рисунок из буфера обмена на новый холст, сделайте тень и сохраните рисунок.

в библиотеке. Большое удобство FreeHand

Замечание

Символы FreeHand постоянно находятся в библиотеке. Большое удобство FreeHand состоит в том, что символы можно редактировать. Если символ FreeHand специально подготовлен для Fireworks, то он автоматически переместится в библиотеку Fireworks. К сожалению, обратное перемещение выполнить нельзя. 3. Откройте свой Flash-ролик и создайте графический символ Logo. Выберите в меню File=>Import, чтобы открыть диалоговое окно. Перейдите в папку, содержащую файл логотипа, выделите файл и щелкните на кнопке Open. Откроется диалоговое окно, которое вы видите на Рисунок 15.9. Щелкните на кнопке ОК.
4. На сцене появятся новые слои, а на панели Library — новые символы. Все эти символы были созданы во FreeHand и успешно экспортированы во Flash. Для того чтобы поддерживать в библиотеке относительный порядок, создайте две папки и поместите в одну логотип с его символами, а в другую — все, что было импортаровано вместе с рисунком ботинка. Сохраните файл. Дайте ему имя и поместите в папку с упражнениями к главе 15.

Одно из лучших приложений для

Замечание

Одно из лучших приложений для работы со звуком, разработанных для компьютеров Macintosh, — это, безусловно, SoundEdit16. Почему я говорю вам об этом? Да потому, что это тоже продукт компании Macromedia. Звуковой файл, который мы только что добавили в ролик, был создан с помощью этой программы. Вот так! Даже звук для этой книги был сделан с помощью продукта Macromedia.

Здесь вы можете выбрать установки

Рисунок 15.32. Здесь вы можете выбрать установки публикации для вашего ролика


2. На вкладке Formats установите флажки Flash и HTML. Если вам нужно переименовать файлы, снимите флажок Use Default Names и введите новые имена.
3. Щелкните на вкладке Flash (Рисунок 15.23). На этой вкладке вы можете указать, как должны обрабатываться разные элементы вашего ролика.
На этой вкладке представлено очень много параметров. В списке Load Order вы просто указываете, в каком порядке загружается ролик — от первого слоя до последнего или от последнего до первого. Если ваш ролик загружен материалами, то может оказаться полезным генерирование отчета о размере (флажок Size Report). В этом отчете можно увидеть, какие места в ролике создают потенциальные проблемы. Если у вас большая программа, то можно отказаться от ее трассировки и вывода окна отладки в случае возникновения проблем (флажок Omit Trace Action). Установите флажок Protect from Import, если вы не хотите, чтобы пользователь мог скопировать ваш файл на свой компьютер и модифицировать его с помощью Flash MX. Если вы установите флажок Debugging Permitted, то сможете получить доступ к панели отладчика в среде отладки или из броузера, используя надстройку Debug Player.
Кроме того, на этой вкладке вы можете изменить качество вывода ваших рисунков в ролике и установить способ обработки звука и событий, управляющих звуком. Если вы хотите это сделать, щелкните на кнопке Override Sound Settings.
4. Щелкните на вкладке HTML, и вы увидите окно, изображенное на Рисунок 15.24, самым важным элементом которого является список Template (Шаблон). Здесь каждый вариант позволяет вам публиковать предустановленный набор тегов HTML для воспроизведения ролика. Дополнительную информацию о каждом из этих вариантов можно получить, щелкнув на кнопке Info, расположенной рядом с ним.

Создание анимации для Webузла JCT

Alignment — Left

Alignment — Left.

12. Выделите слова Blading Demo и установите в окне свойств для параметра Leading значение 160%. Это сдвинет строку вниз. Выделите слова Flick Gardens и установите в окне свойств для параметра Leading значение 180%.
13. Перетащите текстовый блок вниз холста и отключите видимость слоя Locations.

Анимация танца

Анимация танца

Теперь, когда у вас есть подготовленные силуэты танцора, можно заняться созданием ролика, в котором все это будет двигаться. Для этого воспользуемся языком Actionscript и с его помощью будем управлять воспроизведением.
1. Открыв файл FlashDancer.fla, выделите все семь кадров на шкале времени. Выберите в меню Edit=>Cut Frames. Кадры будут вырезаны из ролика и помещены в буфер обмена.
2. Создайте новый подвижный символ (movie clip symbol). Для этого выберите в меню Insert=>New Symbol. Откроется диалоговое окно Symbol Properties. Выберите Movie Clip, так как нам нужно сделать движение танцора независимым от главной шкалы времени. Назовите новый клип DancingDude и щелкните на кнопке ОК. Откроется новый символ клипа для редактирования.
3. Выделите 1-й кадр на шкале времени. Выберите в меню Edit=>Paste Frames, вставив кадры с танцором в новый символ клипа на то же место, где они были на главной шкале времени. Переименуйте новый слой в клипе в Dude.
4. Создайте новый слой, щелкнув на кнопке создания слоя в окне шкалы времени. Назовите этот слой Scripts.
5. Выделите 1-й кадр в слое Scripts. После этого щелкните на кнопке Actions в окне свойств, открыв панель Actions.
6. В панели Actions найдите действие Stop и вытащите его в область программ. После этого можете закрыть панель Actions.
7. Закончите редактирование символа, выбрав в меню Edit=>Edit Document. Это снова вернет вас к редактированию шкалы времени.

Анимирование по кадрам и слоям

Анимирование по кадрам и слоям

Использование кадров и слоев при создании анимации в Fireworks MX позволяет получить некоторые интересные эффекты. Как вы узнали в главе 14, с помощью панели Layers можно редактировать каждый кадр, не воздействуя при этом на остальные кадры ролика. В этом разделе вы узнаете, как создать ролик из 12 кадров, в котором человечек и некоторый текст проявляются и блекнут.
Для того чтобы создать 12-кадровую анимацию, сделайте следующее.
1. Откройте панели Frames и Layers. Когда у вас открыты обе эти панели, вы можете легко управлять всеми аспектами создания анимации. При этом ваш экран должен выглядеть так, как на Рисунок 16.20.
2. Выделите 1-й кадр на панели Frames и выберите в контекстном меню панели Duplicate Frame. Откроется диалоговое окно.
3. Введите число 1 в поле ввода Number и выберите After Current Frame. Щелкните на кнопке ОК. Дважды щелкните на значке Frame Delay, открыв еще одно диалоговое окно. Введите задержку величиной 45/100 секунды. Нажмите клавишу .

By J C Verde

By J.C. Verde

Flick Gardens

Диалоговое окна для редактирования

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

Диалоговое окно Layer Properties

Рисунок 16.17. Диалоговое окно Layer Properties


17. Откройте панель Actions и введите следующее: Stop();
Это делается для того, чтобы прервать циклическое воспроизведение.
18. Сохраните ролик.

Для экспортирования видео в виде

Рисунок 16.33. Для экспортирования видео в виде последовательности рисунков нужно выбрать Movie to Image Sequence в списке Export

Font — Times New Roman;

Font — Times New Roman;

Weight —Bold;

Функция Onion Skin во Flash MX

Рисунок 16.7. Функция Onion Skin во Flash MX работает точно так же, как и в Fireworks MX

Градиенты в слоях настроены так что они двигаются синхронно

Рисунок 16.16. Градиенты в слоях настроены так, что они двигаются синхронно


9. Добавьте новый слой Actions и вставьте ключевой кадр в 96-й кадр слоя Actions.
10. Откройте редактор Actionscript и введите gotoAndPlay(1);
11. Таким образом, вы создали иллюзию бесконечного движения радуги. Вернитесь на главную шкалу времени ролика.
12. Переместите слой Rainbow под слой Slogan. Слова будут заполнены подвижным градиентом, а во Flash MX маскирующий слой Slogan должен быть над Rainbow — заполняющим слоем маски.
13. Щелкните дважды на значке в виде листа бумаги на слое Slogan и откройте диалоговое окно Layer Properties. Измените тип Туре, как показано на Рисунок 16.17, и щелкните на кнопке ОК.
14. Щелкните дважды на значке слоя Rainbow и откройте диалоговое окно Layer Properties. Измените тип на Mask и щелкните на кнопке ОК.
15. Заблокируйте слои Slogan и Rainbow, щелкнув на значке блокировки каждого слоя.
16. В слое Actions вставьте ключевой кадр так, чтобы он располагался над ключевым кадром маски.

Изменение свойства звука Flash

Рисунок 16.13. Изменение свойства звука Flash Dancer Loop в последнем кадре остановит воспроизведение

Эффектное завершение

Эффектное завершение

Каждое шоу должно иметь эффектное завершение. Мы сделаем так, чтобы логотип ярко высвечивался, а фигура танцора заменялась стандартным талисманом. Чтобы создать эффектное завершение, выполните следующее.
1. Вставьте под слоем Actions на главной шкале времени слои Whoosh, Dude, Color Logo, Slogan и Rainbow.
2. Выделите кадр на каждом из этих слоев'(последний в танце) и вставьте ключевой кадр. Шкала времени должна выглядеть так, как на рис* 16.14.
3. Вы будете использовать один из стандартных звуков программы Flash. Выберите в меню Window=>Common Libraries=>Sounds.fla и откройте библиотеку звуков.
4. Выделите звук Beam Scan и вытащите его на только что созданный ключевой кадр на слое Whoosh. Больше ничего вам с этим звуком делать не придется.
5. Выделите ключевой кадр, добавленный к слою Color Logo, и импортируйте файл Logo. fh10 из папки с упражнениями для этой главы. Расположите рисунок на сцене, как вам больше нравится.
6. Выделите ключевой кадр на слое Dude и импортируйте файл Flash Dude. png. Если рисунок не появляется на экране, вытащите его из панели Library на сцену. Расположите человечка на сцене, как считаете нужным.
7. Выделите новый ключевой кадр в слое Slogan. Выберите инструмент Text, щелкните на сцене и введите текст слогана. Установите шрифт Verdana Bold размером 36 пунктов. В окне свойств установите свойство этого текста Static Text. Это важно, поскольку нужно будет преобразовать этот текст в маску. Сцена и текст на ней должны выглядеть так, как на Рисунок 16.15.

Экземпляр клипа Dancing Dude Controller

Рисунок 16.8. Экземпляр клипа Dancing Dude Controller получил имя в окне свойств


1. Откройте панель Actions, выбрав в меню Window=>Actions. В верхней части окна вы увидите действия танцора (Dancing Dude) (Рисунок 16.9).
8. Переведите редактор Actionscript в режим эксперта. Программа, которую вы сейчас напишете, заставит танцора двигаться. Эта программа выполняется на каждом кадре обработчиком события onClipEvent (enterFrame). Введите этот текст в область программ редактора Actionscript:

onClipEvent( enterFrame) var theFrame = parselnt( Math.random() * 7 ) + 1; //выбираем случайный кадр this.gotoAndStop(theFrame); //и останавливаем //воспроизведение
Когда воспроизведение доходит до очередного кадра, происходит событие onCli-pEvent (enterFrame). Создается локальная переменная theFrame, и ей присваивается целочисленное значение, равное случайному числу в промежутке между 1 и 7. После этого воспроизведение переходит к кадру с этим номером и останавливается. После окончания события переменная уничтожается, так как в ней больше нет потребности.
9. После ввода текста программы проверьте его синтаксис на наличие ошибок; если их нет, вернитесь к редактированию главной шкалы времени, выбрав в меню Edit=>Edit Document.

Kerning — 0;

Kerning — 0;

Leading —130%;

Ключевые кадры добавлены в конец ролика

Рисунок 16.14. Ключевые кадры добавлены в конец ролика

Когда вы выделяете рисунок в Fireworks

Рисунок 16.1. Когда вы выделяете рисунок в Fireworks, вокруг него появляется синяя рамка с маркерами по углам

Настройка клипа Dancer

Настройка клипа Dancer

Сейчас вам нужно создать управляющую часть, или контроллер, и разместить ее на шкале времени. Этот контроллер содержит символ клипа Dancing Dude и программу, которая управляет тем, какой кадр шкалы времени выводится в данный момент на экран. Сделав этот процесс случайным, вы прекрасно смоделируете танец в стиле "хип-хоп", где никакое движение не повторяется дважды. Кроме того, выводя кадры в случайном порядке, вы создадите иллюзию того, что ваш клип гораздо длиннее, чем реальные семь кадров.
Чтобы создать такой контроллер, выполните следующее.
1. Добавьте новый слой на шкалу времени, щелкнув на кнопке Insert Layer в окне главной шкалы времени. Назовите этот слой Dancin' Dude.
2. Поместите танцора в 30-й кадр, оставив место для загрузчика. Щелкните на 30-м кадре и вставьте ключевой кадр, выбрав в меню Insert=>Keyframe. Новый ключевой кадр появится в слое Dancin' Dude.
3. Откройте панель Library, выбрав в меню Window=>Library. Выберите символ клипа Dancin' Dude и перетащите его на 30-й кадр главной шкалы времени. Разместите его так, чтобы нижний край сцены служил полом для танцора.
4. Клип выделен на сцене. Выберите в меню Select=>Convert to Symbol. При этом клип вставится в клип контроллера. Откроется окно Convert to Symbol. Выберите Movie Clip для типа символа и назовите клип Dancing Dude Controller.
5. Для того чтобы дать имя новому экземпляру символа, щелкните на текстовом поле в окне свойств, в котором находится надпись . Введите имя dudeController. Окно свойств должно выглядеть так, как на Рисунок 16.8.
6. Дважды щелкните на клипе Dancing Dude Controller, открыв шкалу времени этого символа. Выделите клип Dancing Dude, который находится в клипе контроллера. В окне свойств назовите экземпляр выделенного клипа dude.

Открыв обе панели вы получаете

Рисунок 16.20. Открыв обе панели, вы получаете доступ ко всем необходимым функциям и свойствам


4. Выделите 2-й кадр и установите прозрачность слоя Words 65%. Продублируйте 2-й кадр.
5. Выделите 3-й кадр и установите прозрачность слоя Words 75%. Продублируйте 3-й кадр.
6. Выделите 4-й кадр, уменьшите прозрачность слоя Mascot до 65% и увеличьте прозрачность слоя Words до 100%. Установите задержку кадра 15. Продублируйте кадр.
7. Выделите 5-й кадр и установите прозрачность слоя Mascot 25%. Продублируйте 5-й кадр.
8. Выделите 6-й кадр и установите задержку кадра 50. Продублируйте кадр.
9. Выделите 7-й кадр, уменьшите прозрачность слоя Mascot до 15%. Отключите видимость слоя Locations и переместите текстовый блок вниз, к нижнему краю холста. Установите задержку кадра 65. Продублируйте кадр.
10. Выделите 8-й кадр. Выделите текст слоя Location и переместите его вверх так, чтобы были видны его 4 строки. Продублируйте кадр.
11. Выделите 9-й кадр. Выделите текст слоя Location и переместите его вверх так, чтобы были видны 6 его строк. Продублируйте слой и 9-й кадр.
12. В Fireworks MX можно добавлять новые слои так, что они не будут видны в предыдущих слоях. Добавьте два новых слоя, назвав их Mask и More Info.
13. Выделите слой Mask. Выберите инструмент Rectangle и нарисуйте белый квадрат, который закрывает две последние строки слоя Location. Перетащите слой Mask так, чтобы он был непосредственно над слоем Location. Две строки текста исчезнут. Если нужно, разместите слой Mascot над слоем Mask.
14. Выделите слой More Info и разместите его над слоем Mascot Выберите инструмент Text и введите Info. Выберите шрифт Arial Bold размером 18 пунктов.
15. Выберите инструмент Circle. Нарисуйте круг на слое More Info, установив следующие параметры:
Width - 22 пикселя;
Height — 22 пикселя;
Fill —FFCC00;
Effect — Inner Bevel;
Bevel Edge Shape — Flat;
Bevel Width —3.
16. Установите задержку 10-го кадра в 10 и создайте две копии этого кадра. Если вы щелкнете на 9-м кадре, то увидите, что слои More Info и Mask не видны на панели Layers. Ваши кадры и слои должны выглядеть так, как на Рисунок 16.21.

Пакетная обработка файлов в Fireworks MX

Пакетная обработка файлов в Fireworks MX

Теперь у вас есть последовательность кадров в виде png-рисунков. Каждый из них имеет размер 320x240 пикселей, что явно слишком много для создания кнопки. Конечно, можно обработать эти файлы по одному, чтобы уменьшить их размер, но можно заставить работать программу, которая сделает все это за один проход.
Чтобы выполнить пакетную обработку файлов в Fireworks MX, сделайте следующее.
1. Выберите в меню File=>Batch Process, чтобы открыть диалоговое окно. Перейдите в папку, в которой вы сохранили файлы, созданные раньше, или воспользуйтесь файлами из папки, в которой содержатся упражнения к главе 16. Нужные файлы находятся в подпапке Batch Files.
2. Щелкните на кнопке Add All, и список рисунков появится в нижней части окна (Рисунок 16.24).

После щелчка на кнопке Add All

Рисунок 16.24. После щелчка на кнопке Add All отобразится список всех файлов, содержащихся в данной папке


3. Щелкните на кнопке Next, и откроется следующее диалоговое окно. Выберите Scale в списке Batch Options и щелкните на кнопке Add. Выберите Scale to Percentage в списке Scale. Задайте коэффициент преобразования 20. Ваши настройки должны выглядеть так, как на Рисунок 16.25. Щелкните на кнопке Next и перейдите к следующему окну.
4. Выберите Custom Location и щелкните на кнопке Browse. Откроется следующее окно. Укажите папку, в которой будут храниться обработанные рисунки. Кнопка внизу окна изменится в соответствии с выбранной вами папкой. Щелкните на этой кнопке и закройте окно. Щелкните на кнопке Batch, и начнется пакетная обработка файлов.
5. Откроется окно, отображающее процесс обработки каждого файла. Все файлы по одному будут уменьшены и помещены в соответствующую папку. Когда процесс закончится, вы получите сообщение об этом. Щелкните на кнопке ОК и вернитесь в окно Fireworks MX. Закройте программу.

Последовательность кадров Fireworks

Рисунок 16.4. Последовательность кадров Fireworks может быть экспортирована в файл SWF

Предупреждение о том что разрешения

Рисунок 16.2. Предупреждение о том, что разрешения вставляемого рисунка и холста не совпадают. Не пересчитывайте разрешение, если работаете с фотографией


6. Вам нужно удалить белую область, чтобы уменьшить размеры рисунка при экспорте его в SWF. На панели инструментов в области Bitmap выберите инструмент Magic Wand (Волшебная палочка) и щелкните им на любом месте белой области. Выделенный участок будет окружен особой линией, которую называют marching ants (марширующие муравьи).
7. Выберите в меню Select=>Similar. Выделенная область расширится, заключив в себя все места с белым цветом (Рисунок 16.3). Удалите все белые области, выбрав в меню Edit=>Clear.
8. Откройте панель Frames, щелкните на списке и выберите в нем Add Frames. Откроется диалоговое окно. Добавьте 6 кадров и щелкните на кнопке ОК. Теперь на панели Frames должно быть 7 кадров.
9. Перейдите на 2-й кадр, щелкнув на нем в панели Frames.
10. Повторите шаги 3-7, вставляя в каждый кадр новый рисунок со следующей позой танцующего человечка.
11. Когда расстановка кадров закончена, экспортируйте всю последовательность в SWF-файл, выбрав в меню File=>Export. В списке Save As открывшегося диалогового окна выберите Macromedia Flash SWF (Рисунок 16.4). Назовите файл DancerSequence.swf и щелкните на кнопке ОК.
12. Сохраните файл DancerSequence.png и выйдите из Fireworks MX.

Предупреждение об импорте последовательности

Рисунок 16.26. Предупреждение об импорте последовательности нумерованных файлов


4. Создайте символ кнопки и назовите его Vid Button. Когда откроется шкала времени кнопки, откройте панель Library и перетащите рисунок Bitmap1 на сцену в кадр Up. Выровняйте рисунок по центру сцены.
5. Вставьте ключевой кадр в область Over на шкале времени. Появится рисунок, соответствующий состоянию Up. Удалите его. Вытащите на сцену копию клипа Vid. Выровняйте его по центру сцены.
6. Вставьте ключевые кадры в кадры Down и Hit
7. Для того чтобы немного оживить видеокнопку, мы сделаем так, что цвет видео будет изменяться при нажатии кнопки. Добавьте слой на шкалу времени кнопки и вставьте ключевой кадр в кадр Down 2-го слоя.
8. Выберите инструмент Rectangle и нарисуйте прямоугольник поверх рисунка в кадре Down. С помощью окна свойств залейте прямоугольник красным цветом (FF0000). Щелкните на красном прямоугольнике правой кнопкой и выберите в контекстном меню Create Symbol. Когда откроется диалоговое окно создания символа, назовите этот символ Matte и установите для его свойства значение Graphic. Щелкните на кнопке ОК.
9. Выделив на сцене символ Matte, установите для значения Alpha 30%. Скопируйте красный прямоугольник.
10. Выделите символ в области Hit и удалите его. Выберите в меню Edit=>Paste in Place и вставьте копию красного прямоугольника в то же место на сцене, которое он занимает в кадре Down. Ваша нижняя шкала времени должна выглядеть так, как на рис: 16.27.
11. Вернитесь на главную шкалу времени, перетащите символ кнопки на сцену и проверьте, как работает ролик.

При пакетной обработке файлов

Рисунок 16.25. При пакетной обработке файлов масштаб рисунков уменьшен до 20%

Привлекающий экран

Привлекающий экран


Яркий экран, созданный на основе Flash-технологии, — это очень эффектное маркетинговое средство. Посетитель получает привлекательный обзор Web-узла, и при этом создается корпоративный стиль компании.
С точки зрения разработчика такой экран требует значительных затрат труда. Должно быть выполнено предварительное планирование, кадр за кадром, в котором расписано, что и когда видит и слышит посетитель. На этой стадии планирования можно еще раз подумать о назначении такого привлекающего экрана и убедиться, что все представленное на нем абсолютно необходимо для выполнения поставленной цели. На этом этапе вы можете составить список всех материалов, как визуальных, так и звуковых.
В нашем случае мы постараемся добиться этого, заставив нашего человечка-талисмана танцевать в полутьме и выхватывая его движения вспышками света. Все это сопровождается повторяющейся музыкой, при этом образцы товаров компании проявляются и исчезают.
Построив такую концепцию, мы можем составить список всех необходимых материалов.
Скопируйте папку с упражнениями к главе 16с Web-узла этой книги на свой компьютер. Все нужные нам материалы находятся в папке Splash.

Разные позы танцующего человечка.

Векторизованный логотип.

Изображение человечка для последнего кадра.

Рисунки товаров.

Файлы Loop.aif и Zap.aif.

Разгруппировав объект вы можете

Рисунок 16.5. Разгруппировав объект, вы можете добраться до растрового рисунка


4. Выберите инструмент Lasso на панели инструментов. В нижней части панели, в разделе Options, появятся новые варианты. Выберите инструмент Magic Wand. Удерживая нажатой клавишу , щелкните на белом фоне вокруг танцора и удалите выделенный фон.
5. Выберите в меню Edit=>Select All. Выберите инструмент Fill Bucket и щелкните на черном цвете в области Fill в окне свойств. Залейте фигуру черным цветом, щелкнув на ней инструментом Fill Bucket. При этом фигура преобразуется из растрового рисунка в векторный силуэт.
6. Выберите инструмент Eraser (Ластик) и удалите лишние концы линий. При этом вам может понадобиться увеличить масштаб изображения.
7. Если края фигуры выходят за пределы экрана, нажмите клавишу пробела. Курсор преобразуется в курсор захвата, что позволяет прокручивать рисунок так, чтобы добраться до невидимого места. Когда вы отпустите клавишу пробела, курсор вернется к прежней форме. В результате ваш рисунок должен выглядеть так, как на Рисунок 16.6.

Шкала времени с образцами товаров

Рисунок 16.12. Шкала времени с образцами товаров

Шляпа добавлена в 40й кадр главной шкалы времени

Рисунок 16.11. Шляпа добавлена в 40-й кадр главной шкалы времени


5. Выберите на панели инструментов инструмент Direct Selection. Нажав клавишу , щелкните на шляпе и на ее надписи. Преобразуйте выделенные объекты в графический символ, назвав его Hats. После такого преобразования объекты выглядят на шкале времени, как один элемент.
6. Выделите созданный символ на сцене и в окне свойств выберите Alpha в списке Color. Установите значение Alpha, равное 0.
7. В этом же слое на шкале времени выделите кадр приблизительно через 11 кадров после ключевого кадра символа Hats и вставьте новый ключевой кадр. Этот кадр появится с новым экземпляром графического символа данного товара. В окне свойств параметр Alpha по-прежнему должен быть отмеченным и иметь значение 99%.
8. Выделите кадр между двумя ключевыми кадрами в слое Hats и выберите в меню Insert=>Create Motion Tween. Это будет проявление объекта. Затенение делается точно так же, за исключением того, что значения Alpha меняются местами.
9. На том же слое выделите кадр через 4 кадра за последним ключевым кадром символа и вставьте новый ключевой кадр (приблизительно возле 55-го кадра). Новый ключевой кадр создается с новым экземпляром символа Hats. В этом же слое выделите кадр через 11 кадров и вставьте новый ключевой кадр.
10. Выделите новый ключевой кадр, щелкните на символе Hats на сцене и установите в окне свойств значение Alpha, равное 0%. Щелкните между ключевыми кадрами и вставьте Motion Tween. Если вы запустите воспроизведение между ключевыми кадрами, то увидите, что шляпа затеняется.
11. Повторите шаги 5-10 для всех остальных товаров. После этого ваша шкала времени должна выглядеть так, как на Рисунок 16.12.

Состояние панели Layers

Рисунок 16.21. Состояние панели Layers


17. Выберите в меню File=>Export Preview. Откроется диалоговое окно. Перейдите к папке, в которой собираетесь сохранить свой ролик, и установите такие параметры сохранения:
Format - Animated GIF;
Palette — Web Snap Adaptive;
Loss — 0;
Dither —No;
Colors —128.
18. Щелкните на кнопке Export. Когда откроется диалоговое окно, установите такие параметры:
Name —jct_animation_box.gif;
Save As — Images Only;
Slices — None.
Установите флажок Include Areas Without Slices
19. Щелкните на кнопке Save. Вернувшись к рисунку, сохраните его и выйдите из Fireworks MX.

Для того чтобы сохранить пропорции

Совет

Для того чтобы сохранить пропорции рисунка при изменении его размера, удерживайте нажатой клавишу . Если вы хотите выполнить преобразование с высокой точностью, можно задать его параметры в виде чисел. Для этого выберите в меню Modify=> Transform=>Scale and Rotate. Когда откроется диалоговое окно, введите значения коэффициентов преобразования 65-80%. Щелкните на кнопке ОК, а потом с помощью клавиш со стрелками переместите его так, чтобы нога касалась нижнего края сцены. 10. Повторите шаги 3-9 для всех кадров ролика. Создав все силуэты, сохраните файл под именем Flash Dancer.fla.

Для того чтобы посмотреть, правильно

Совет

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

в Normal, то можете набрать

Совет

Если вы работаете в режиме Expert, а не в Normal, то можете набрать в области программ Stop():

Всегда сохраняйте обработанные файлы не

Совет

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

Создание анимации для Webузла JCT

Создание анимации для Web-узла JCT


В данной главе рассказывается, как создать два ролика для Web-узла JCT и как с помощью Flash MX создать особые кнопки, которые воспроизводят ролик внутри себя при наведении на них курсора.
Анимация, которой мы сейчас займемся, будет служить как бы приглашением на сайт и будет воспроизводиться на каждой его странице. Создание Flash-кнопки аналогично созданию простейшей мультипликации. При воспроизведении ее выводится последовательность неподвижных рисунков, что создает иллюзию движения при наведении курсора на кнопку или после щелчка на ней.
В этой главе мы не раз повторим, что нужно много раз подумать, прежде чем приступить к созданию анимации. Такой аргумент, как "если есть инструмент, то нужно им воспользоваться", не пригоден в сегодняшнем Web-дизайне. Если вы предусмотрите в бюджете создание анимации, то будьте готовы к тому, что у вас потребуют обоснования такого решения.
В случае с нашим сайтом для JCT Flash-ролик предназначен для привлечения внимания посетителя и поддержания единого стиля всех страниц. На них будет выводиться логотип компании и воспроизводиться движение человечка-талисмана.

Создание анимированного GIFрисунка для страниц товаров

Создание анимированного GIF-рисунка для страниц товаров


Вместо того чтобы создавать анимацию с помощью Flash, мы решили создать анимированный GIF-рисунок, привлекающий внимание посетителя к странице компании. Решено, что этот рисунок будет блекнуть и проявляться.
Чтобы создать анимированный GIF-рисунок, сделайте следующее.
1. Откройте новый документ в Fireworks MX. Когда откроется диалоговое окно создания документа, установите размер холста 89x199 пикселей, а цвет фона сделайте белым.
2. Откройте панель Layers и переименуйте существующий слой в Mascot. Выберите в меню File=>Import, чтобы открыть диалоговое окно Import. Перейдите к папке Animated_GIF, вложенной в папку с упражнениями к главе 16, и выделите файл Mascot.png. Щелкните на кнопке Open.
3. Курсор изменится. Щелкните один раз, и человечек появится на холсте. Его размер несколько великоват. Выберите в меню Modify=>Transform=>Numeric Transform и откройте диалоговое окно. Выделите параметры Scale Attributes и Constrain Proportion. Введите в поле Width число 50. Это же число появится в поле Height. Щелкните на кнопке ОК. Перетащите человечка вниз холста.
4. Добавьте новый слой Logo. Выберите в меню File=>Import и импортируйте файл Logo.fh10 из папки Animated_GIF, вложенной в папку с упражнениями к главе 16. Щелкните на кнопке Open.
5. Откроется диалоговое окно, показанное на Рисунок 16.19. В этом окне представлено несколько интересных функций для изменения масштаба рисунка перед импортированием в Fireworks MX. Щелкните на стрелке возле поля ввода Scale и не отпускайте кнопку мыши. Появится ползунок. Если перемещать этот ползунок вверх и вниз, то значение в поле будет соответственно увеличиваться или уменьшаться. Отпустите кнопку мыши.
6. Ползунок — это приятная функция, но можно ввести точное значение непосредственно в поле ввода. Введите 45. Ширина будет равна 90 пикселям, а высота — 49,95 пикселя. Щелкните на кнопке ОК. Когда появится курсор импортирования, щелкните один раз. Когда логотип появится на холсте, перетащите его вверх холста. После этого добавьте тень с помощью функции Effects в окне свойств.
7. Добавьте новый слой Words. Выберите инструмент Text и щелкните на холсте. Введите Sponsored Events. В окне свойств установите такие свойства для этого текста:
Font — Arial;
Weight —Bold;
Size - 16;
Color —990033;
Kerning —4;
Leading —120%;
Alignment — Centered.

Создание анимированных рисунков во Flash MX

Создание анимированных рисунков во Flash MX


До выхода на рынок последней версии Flash MX для включения цифрового видео во Flash-ролики использовалась техника rotoscoping, описанная выше в этой главе. Это универсальная техника, и если вы овладеете ею, то это даст вам дополнительные преимущества при работе в MX Studio.
Эта техника заключается в экспортировании последовательности кадров из цифрового видео в виде отдельных рисунков. Потом вы с помощью Fireworks MX меняете размер этих рисунков и импортируете их во Flash MX. С помощью Flash вы делаете из них клип, а потом этот клип используете для создания кнопки.
В этом разделе мы рассмотрим, как можно создать видеокнопку во Flash MX.

Создание эффекта стробоскопа

Создание эффекта стробоскопа

Стробоскоп — это лампа, создающая короткие яркие вспышки света. Она часто используется на дискотеках для создания настроения, мы же сделаем это для имитации стиля "хип-хоп".
Для того чтобы создать эффект стробоскопа, выполните следующее.
1. Выделите 1-й слой на главной шкале времени и переименуйте его в Background Strobe. Щелкните на 33-м кадре слоя и вставьте в него ключевой кадр.
2. Нарисуйте прямоугольник на сцене, размеры которого совпадают с размерами сцены, т.е. 500x440 пикселей. Залейте его черным цветом и для свойства Stroke установите значение None.
3. Преобразуйте прямоугольник в графический символ (Insert=>Convert to Symbol) и назовите его Background Strobe.
4. Выделите новый символ и снова выберите в меню Insert=>Convert to Symbol. Выберите Movie Clip и назовите символ Strobe. Дважды щелкните на символе Strobe и откройте его шкалу времени.
5. Выделите символ Background Strobe в клипе Strobe. Выберите Tint из списка Color в окне свойств. Создайте темный цвет с помощью ползунков RGB в окне свойств, установив значения 0,0,6. Для ползунка Intensity установите значение 100%.
6. Выберите 4-й кадр на текущей шкале времени и вставьте ключевой кадр. Снова выберите символ Background Strobe в клипе Strobe. В окне свойств выберите Tint в списке Color. Создайте яркий свет с помощью ползунков RGB в окне свойств, установив значения 170,213,255. Для ползунка Intensity установите значение 100%.
7. Вернитесь на главную шкалу времени (Edit=>Edit Document) и сохраните файл.
Но что же это за ночной клуб без вспыхивающей неоновой надписи на заднем плане? Давайте сделаем и ее из логотипа компании JCT, которую мы создали раньше с помощью FreeHand MX.
Для того чтобы создать вспыхивающую надпись, выполните следующее.
1. Импортируйте файл VectorizedLogo.fhl0 из папки с упражнениями к главе 16, выбрав в меню File=>Import to Library.
2. Вставьте новый слой на главную шкалу времени, назвав его Logo Strobe. Вставьте ключевой кадр в 33-й кадр этого слоя. Разместите этот слой над слоем Background Strobe. В результате логотип будет помещен непосредственно за танцором.
3. Выделите логотип на панели Library и перетащите его на сцену. Он должен быть в 33-м кадре слоя Logo Strobe. Выделите логотип на сцене и преобразуйте его в графический символ, назвав его JCT Logo Outline Graphic. Выделите этот новый символ и преобразуйте его в клип, назвав JCT Logo Outline.
4. Дважды щелкните на клипе JCT Logo Outline, открыв его шкалу времени. Выделите графический символ JCT Logo Outline Graphic в клипе. В окне свойств в списке Color выберите Tint. Создайте темный цвет с помощью ползунков RGB в окне свойств, установив значения 0,26,85. Для ползунка Intensity установите значение 100%.
5. Выберите 5-й кадр на шкале времени и вставьте ключевой кадр. Выделите символ JCT Logo Outline Graphic в 5-м кадре. В окне свойств в списке Color выберите Tint Создайте яркий свет (вроде неонового) с помощью ползунков RGB в окне свойств, установив значения 0,255,61. Для ползунка Intensity установите значение 100%.
6. Закончив, вернитесь к редактированию документа и сохраните его.

Создание клипа и загрузчика

Создание клипа и загрузчика

Когда все объекты созданы и расставлены по местам, пришло время заняться программированием. Мы поступим аналогично тому, что делали раньше, для того чтобы замедлить воспроизведение анимации.
1. Добавьте слой Actions к клипу LogoZap. Выделите 1-й кадр этого слоя, откройте панель Actions и введите такую программу:
theFrame = parselnt( Math. random () * 3) +1; gotoAndPlay( theFrame);
Эта программа выбирает случайным образом кадр между 1-ми 3-м и воспроизводит его.
2. Вставьте ключевой кадр в 6-й кадр в слое Actions и введите следующее: gotoAndPlay(1);
Это возобновит воспроизведение с начала.
3. Выберите в меню Edit=>Edit Document и вернитесь на главную шкалу времени.
4. Вставьте ключевые кадры в 27-й и 32-й кадры слоя Action главной шкалы времени.
5. Выделите 27-й ключевой кадр, откройте панель Actions и введите
if (_framesloaded <_currentFrame+1) { gotoAndPlay(_currentFrame -2 ); }
Этот фрагмент проверяет, загружен ли и готов к воспроизведению следующий кадр. Если нет, то воспроизведение возвращается назад на 2 кадра и проверка выполняется вновь.
6. Введите такой же фрагмент в 32-й кадр в панели Actions.
7. Сохраните файл и проверьте ролик.

Создание кнопки во Flash MX

Создание кнопки во Flash MX

Импортировав рисунки из QuickTime Pro и изменив их размеры с помощью Fireworks MX, вы можете теперь сделать из них видеокнопку с помощью Flash MX. Обратите внимание на то, что в имени каждого рисунка присутствует цифра, соответствующая его номеру. Эти номера важны, так как Flash MX использует их для правильной обработки рисунков в нужном порядке.
Для того чтобы создать видеокнопку, выполните следующее.
1. Запустите Flash MX, создайте новый ролик и назовите его Vid. Выберите в меню File=>Import, открыв диалоговое окно. Укажите папку, в которой хранятся файлы, созданные ранее с помощью Fireworks MX. Выделите файл Subway1 и щелкните на кнопке Open. Вы увидите предупреждение Flash MX (Рисунок 16.26).
2. Это важное предупреждение. Flash MX обнаружила последовательность файлов и спрашивает вас, хотите ли вы их импортировать. Щелкните на кнопке ОК, и откроется диалоговое окно импортирования.
3. Выберите Import As a Single Flatten Bitmap и щелкните на кнопке ОК. Рисунки разместятся в кадрах ролика. Воспроизведите ролик и проверьте полученный эффект.

Создание маски

Создание маски

Создание маски во Flash MX на первый взгляд кажется непростым делом. Вы создаете маскирующий объект, преобразуете его в маскирующий слой, и все слои под маскирующим просвечивают сквозь него.

Создание танцора во Flash MX

Создание танцора во Flash MX


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

Создание танцующего человечка

Создание танцующего человечка


В пакете Studio MX есть несколько очень полезных свойств, в том числе возможность создавать Flash-анимацию из рисунков, сделанных с помощью Fireworks MX. Это здорово облегчит нам жизнь, так как рисунки представлены художником в виде растровых изображений, а нам нужно преобразовать их в векторные.
Для того чтобы создать SWF-анимацию в Fireworks MX, выполните следующее.
1. Откройте все семь рисунков с позами танцующего человечка.
2. Создайте новый файл. При этом установите размеры холста 432x475 пикселей. Цвет холста сделайте прозрачным, а разрешение рисунка — 100 пикселей на дюйм.
Когда у вас на сцене появится новый холст, сохраните файл под именем DancerSequence.
3. Выберите файл Dancel.png и щелкните на человечке. Рисунок считается выделенным, если вокруг него появилась рамка (Рисунок 16.1). Скопируйте рисунок, выбрав в меню Edit=>Copy. Закройте этот рисунок и вставьте скопированное изображение в файл DancerSequence.
4. Когда вы будете вставлять рисунок в новый файл, вы можете получить предупреждающее сообщение, которое показано на Рисунок 16.2. В этом сообщении вас предупреждают, что разрешение рисунков не совпадает. Если вы щелкнете на кнопке Resample, то рисунок будет пересчитан с увеличением или с уменьшением разрешения. Этого не следует делать при работе с фотографией, потому что в любом случае при пересчете разрешения качество фотографии будет потеряно, но в нашем рисунке присутствуют только линии, поэтому не имеет особого значения, что вы выберете.
5. Размеры выделенного рисунка значительно
превосходят размеры холста. Для того чтобы устранить это несоответствие, выберите в меню View=>Magnification 25%. Выберите на панели инструментов инструмент Scale. Вокруг рисунка появятся маркеры изменения размеров. Подгоните размер рисунка под размер холста, перетаскивая угловой маркер. При этом удерживайте нажатой клавишу , чтобы сохранить пропорции рисунка. Когда рисунок разместится на холсте, восстановите масштаб 100%.

Создание загрузчика

Создание загрузчика

Во Flash загрузчики бывают двух типов. В первом типе используется полоса выполнения, которая показывает, какая часть файла уже загружена в броузер. Второй тип ничего не сообщает пользователю о ходе процесса загрузки. В кадрах с 1-го по 32-й мы предусмотрели использование загрузчика. Во вступительной части мы решили отвлечь внимание пользователя в то время, пока ролик загружается.
Чтобы создать загрузчик, выполните следующее.
1. Под слоем Actions создайте новый слой и назовите его Logo Zap. Выделите 1-й кадр этого слоя.
2. Выделите на панели библиотеки символ JCT Logo Outline и перетащите его на сцену. Установите значение его свойства Alpha в окне свойств, равное 0%.
3. Выделите 24-й кадр слоя Logo Zap и вставьте в него ключевой кадр. Выделите символ и в окне свойств выберите Tint в списке Color. Создайте темный цвет, такой как 0, 20, 18, и установите для его свойства Intensity значение 100%. Создайте соединение Motion Tween между 1-ми 24-м кадрами, чтобы получить затемнение.
4. Вставьте ключевой кадр в 28-й кадр слоя Logo Zap. Выделите символ в этом кадре, преобразуйте символ в клип и назовите его LogoZap. Вставьте пустой ключевой кадр в 32-й кадр.
5. Дважды щелкните на клипе LogoZap, открыв его шкалу времени.
6. Вставьте ключевой кадр в 4-й кадр. Выделите символ JCT Logo Outline. В окне свойств в списке Color выберите Tint. Создайте светлый цвет, например 255, 255, 251, и установите его свойство Intensity, равное 100%.
7. Выделите символ JCT Logo Outline в 4-м кадре и скопируйте его в буфер обмена. Вставьте новый слой под текущим. Вставьте ключевой кадр в 4-й кадр нового слоя и выберите в меню Edit=>Paste in Place.
8. Разделите новый символ на части, выбрав в меню Modify=>Break Apart. Сделайте это несколько раз", пока символ не будет полностью разделен. Выберите инструмент Subselection и удалите объекты внутри контура. После этого измените цвет графики на FFFF00 в области заливки окна свойств.
9. Выберите в меню Modify=>Shape=>Soften Fill Edges и откройте диалоговое окно. Установите параметры Distance и Number of Steps по своему усмотрению, например 20 и 15. Щелкните на кнопке Expand в области Direction, а потом на кнопке ОК.
10. Преобразуйте рисунок в символ, выбрав в меню Insert=>Convert to Symbol, и назовите его Glow. Щелкните на кнопке ОК, выделите новый символ и уменьшите его значение Alpha до 15%.
11. Вставьте два новых слоя для звука. Назовите их Zap! и Zap2. Выделите 3-й кадр в слое Zap1 и вставьте ключевой кадр. Выделите 4-й кадр в слое Zap2 и вставьте ключевой кадр.
12. Выделите ключевой кадр в слое Zap1 и вытащите звук из библиотеки на сцену. Повторите то же самое для слоя Zap2.
13. Выделите звук в слое Zap1. Щелкните на Edit в окне свойств и откройте диалоговое окно Edit Envelope (Рисунок 16.18). Маркеры возле графика звука служат для управления громкостью каждого канала. Установите громкость одного канала, равную 0, перетащив его маркер в самый низ окна. Громкость второго канала сделайте несколько больше половины максимальной.
14. Повторите предыдущий шаг для второго слоя, но громкость каналов расставьте наоборот. Например, если в первом слое вы приглушили правый канал, то во втором приглушите левый.

Танцор преобразован в векторную фигуру залитую черным цветом

Рисунок 16.6. Танцор преобразован в векторную фигуру, залитую черным цветом

Управление задержкой времени

Управление задержкой времени

Сейчас мы отрегулируем время так, что образцы товаров будут оставаться на экране подольше, но при этом нам не нужно создавать лишние кадры. Чтобы создать задержку времени, сделайте следующее.
1. Добавьте новый слой Actions. Добавьте в него ключевой кадр в том месте, где шляпа заканчивает проявляться (приблизительно возле 56-го кадра).
2. Откройте панель Actions в режиме эксперта и введите такой текст: timeDelay = 12;
После этого будет создана переменная, которой присваивается значение 12.
3. Закройте редактор Actionscript. Вставьте ключевой кадр в слой Actions перед тем местом, где рисунок начинает затеняться, например в 66-й кадр.
4. В панели Actions введите такой текст:
if( —timeDelay > 0) { gotoAndPlay( _currentFrame -2);
}
Мы уменьшаем значение переменной timeDelay, пока оно не станет равным 0. Когда оно станет равным 0, воспроизведение переходит на два кадра назад и программа выполняется еще раз. Но после этого воспроизведение продолжается в обычном порядке.
5. Выполните те же действия для всех остальных товаров.
6. Выделите слой Dancin'Dude на шкале времени, перейдите к кадру, соответствующему по времени окончанию затухания последнего товара, и выделите кадр, следующий за ним. Нажмите клавишу и щелкните на последнем кадре, выделив всю последовательность.
7. Выберите в меню Insert=>Remove Frames и уменьшите количество кадров в слое Dancin' Dude. Сделайте то же самое с остальными слоями.
8. Выделите последний кадр слоя Loop и вставьте ключевой кадр. В окне свойств (Рисунок 16.13) выберите Flash Dancer Loop.aif в списке Sound и Stop- в списке Synch. Это остановит воспроизведение звука. Сохраните файл.

В этом окне можно ввести значение

Рисунок 16.19. В этом окне можно ввести значение для изменения масштаба рисунка


8. Перетащите текст под тень логотипа.
9. Выделите слой Words и установите для него прозрачность (Transparency), равную 25%.
10. Добавьте новый слой Locations. Выберите инструмент Text и введите такой текст:

Видеокнопка создана В ее состоянии

Рисунок 16.27. Видеокнопка создана. В ее состоянии Up используется статический рисунок, а в состоянии Over — когтя клипа Vid

Все белые области вокруг рисунка выделены

Рисунок 16.3. Все белые области вокруг рисунка выделены

Все элементы на месте текст отформатирован

Рисунок 16.15. Все элементы на месте, текст отформатирован Чтобы создать маску, выполните следующее.


1. Выделите новый ключевой кадр на слое Rainbow и нарисуйте прямоугольник, немного больший по размеру, чем текст.
2. Выделив прямоугольник, выберите в окне свойств палитру заливки и градиентную заливку, у которой цвет в начале и в конце совпадает. Если вы не видите подходящего градиента, можете создать его самостоятельно. Главное, чтобы цвет обоих концов радуги совпадал. Преобразуйте прямоугольник в графический символ и назовите его Rainbow Mask.
3. Выделите символ Rainbow Mask на сцене, преобразуйте его в клип и назовите Rainbow Rotation. Дважды щелкните на этом клипе и откройте его шкалу времени. При этом человечек и логотип поблекнут.
4. Выделите символ Rainbow Mask на шкале времени и скопируйте его. Вставьте новый слой и выберите в меню Edit=>Paste in Place. Это важный момент для получения цельного эффекта.
5. Выделите 96-й кадр в обоих слоях и вставьте ключевой кадр в оба слоя.
6. Вернитесь на 1-й кадр и выделите символ градиента на 1-м слое. Передвиньте этот символ так, чтобы он находился справа от графического символа во 2-м слое и был прижат к нему впритык. Создайте соединение Motion Tween.
7. Переведите воспроизведение в 96-й кадр. Выделите графический символ в 96-м кадре и передвиньте этот символ так, чтобы он находился слева от графического символа в 1-м слое и был прижат к нему впритык.
8. Воспроизведите анимацию и убедитесь, что градиенты меняются синхронно. При этом сцена и слои должны выглядеть так, как на Рисунок 16.16.

Введенный вами текст будет применен

Рисунок 16.9. Введенный вами текст будет применен к объекту dude, который находится внутри объекта Dancing Dude


Добавление музыки
Танцор без музыки — это несерьезно. Пришло время заняться звуком. Для того чтобы добавить к ролику звук, сделайте следующее.
1. Выберите в меню File=>Import и откройте диалоговое окно Import. Найдите и выделите файл Flash Dancer Loop.aif в папке с упражнениями к главе 16 и щелкните на кнопке Open. Повторите то же самое для файла Zap.aif. Оба звуковых файла должны появиться на панели Library.
2. Добавьте новый слой на главную шкалу времени и назовите его Loop. Щелкните на 33-м кадре нового слоя и вставьте в него ключевой кадр. Откройте панель Library, выделите звук Flash Dancer Loop и импортируйте его в сцену в 33-й кадр слоя Loop (Рисунок 16.10).

Выделенный фрагмент и его длительность

Рисунок 16.22. Выделенный фрагмент и его длительность определяются положением ползунков In и Out

Woodville VA

Woodville, VA

11. Выберите инструмент Text в слое Location и примените такое форматирование:

Захват кадров из видео

Захват кадров из видео

Для выполнения захвата кадров вам понадобится программа для редактирования видео. Хотя мы предпочитаем для этой цели пользоваться программами Adobe Premier и Adobe After Effects, вам мы предложим применить более дешевую и более доступную программу Quick- Time Pro. Если у вас уже есть какая-либо версия программы QuickTime, вы должны убедиться, что она подходит вам. Откройте ее в меню File и посмотрите, есть ли там команда Save. Если такой команды нет, то вам нужна профессиональная версия этой программы.
Чтобы выполнить захват кадров с помощью QuickTime Pro, сделайте следующее.
1. Запустите QuickTime. Когда программа откроется, выберите в меню File=>Open и откройте файл Subway, который находится в папке Video, вложенной в папку с упражнениями к главе 16.
" 2. Перемещайте правый ползунок выделения (ползунок Out), пока на счетчике времени не появится значение 00:00:02. Таким образом, вы выберете фрагмент фильма длиной 2 секунды.
3. Выберите в меню File=>Export, чтобы открыть диалоговое окно Save Exported File As. Перейдите в папку, в которой вы будете сохранять все это, и выберите Movie to Image Sequence в списке Export (Рисунок 16.23).
4. Щелкните на кнопке Options. Откроется диалоговое окно Export Image Sequence Settings. Выберите PNG в списке Format и установите для Frames Per Second значение 8. Щелкните на кнопке ОК, а затем на кнопке Save. Закройте Quick Time.

Когда все рирунки, будут вставлены

Замечание

Когда все рирунки, будут вставлены в свои кадры, проверьте последовательность, воспроизведя кадр окажется не на месте, то при воспроизведении это будет заметно. Поставьте его на место, перетащив куда нужно или установив в окне свойств для его координат X и Y значение 0.

Словом rotoscoping называют процесс создания

Замечание

Словом rotoscoping называют процесс создания иллюзии движения с помощью смены серии неподвижных рисунков. Чтобы создать силуэты, сделайте следующее.
1. Откройте Flash MX, создайте сцену размером 550x400 пикселей и установите цвет #FFFFFF. Импортируйте в ваш ролик файл DancerSequence.swf. Семь кадров из документа Fireworks появятся на шкале времени Flash.
2. Выделите первый кадр. Рисунок на сцене будет заключен в рамку выделения, окно свойств изменится, показывая, что выделен групповой объект.
3. Разгруппируйте этот объект, выбрав в меню Modify=>Break Apart. Возможно, вам понадобится повторить это несколько раз, прежде чем вы сможете добраться до рисунка (Рисунок 16.5).

Когда вы выбираете инструмент Eraser,

Замечание

Когда вы выбираете инструмент Eraser, то состав панели инструментов меняется в соответствии с этим, а именно: в нижней части появляются две кнопки и список. Верхняя левая кнопка, Eraser Mode, раскрывает меню настройки инструмента Eraser. Кнопка Spigot позволяет щелкнуть на контуре объекта и удалить его. Список под кнопками служит для выбора размера инструмента Eraser. 8. Выберите инструмент Direct Selection и выделите танцора. В нижней части панели инструментов выберите Smooth (Сглаживание). Это можно повторить несколько раз, прежде чем вы будете удовлетворены качеством картинки. Помните, что сглаживание рисунка приводит к уменьшению его размера и, следовательно, к снижению нагрузки на линию передачи. Только не перестарайтесь.
9. Оставив танцора выделенным, выберите инструмент Free Transform (Свободное преобразование) и измените размеры фигуры так, чтобы она помещалась на сцене. Перетащите преобразованную фигуру в центр.

и б, важны для нас,

Замечание

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

Может показаться странным, что мы

Замечание

Может показаться странным, что мы предлагаем устанавливать значение Alpha, равное 99%, а не 100%. Но дело в том, что установка 100% создает некоторые непонятные проблемы советом, а при 99% все получается нормально. Это мы установили опытным путем.

Затенение и проявление образцов товаров

Затенение и проявление образцов товаров

В описании эскиза сказано, что образцы товаров должны проявляться и затеняться во время воспроизведения ролика. Для того чтобы создать затенение и проявление, сделайте следующее.
1. Импортируйте файлы short.png, shoe.png, hat.png и jeans.png из папки с упражнениями к главе 16. Для этого выберите в меню File=>lmport to Library.
2. Перейдите к 155-му кадру на главной шкале времени. Щелкните на 155-м кадре самого верхнего слоя и протащите вниз по всем слоям, выделив этот кадр во всех слоях. Выберите в меню Insert=>Frame. На шкалу времени добавится 1 кадр.
3. Добавьте 4 новых слоя на шкалу времени и назовите их Hats, Shorts, Shoes и Jeans. Выберите слой Hats и добавьте ключевой кадр после 33-го кадра. Помните, 33-й кадр — это место, где начинается танец. Перетащите символ шляпы (Hats) из библиотеки на сцену в подходящее место.
4. Выберите на панели инструментов инструмент Text и щелкните им под шляпой. Выделите шляпу и введите слово Hats. Примените шрифт Verdana Bold размером 24 пункта с белой заливкой. Это нужно сделать в окне свойств, как показано на Рисунок 16.11.

Звук импортирован Его свойства

Рисунок 16.10. Звук импортирован. Его свойства Synch и Loop установлены в окне свойств


3. Выделите звук на шкале времени и установите его свойства в окне свойств: Synch — start; Loop — ю.
Это означает, что звук загружается однажды, но воспроизводится 10 раз. Свойство Synch нужно установить в значение Start, потому что позже вы остановите воспроизведение с помощью действия Stop в произвольный момент времени.

Создание элементов навигации

Адрес введен в событие getURL

Рисунок 17.5. Адрес введен в событие getURL. Вы можете обрабатывать несколько событий, по сейчас нам достаточно только одного


Для того чтобы добавить к кадру действие, выполните следующее.
1. Добавьте к ролику два слоя, Actions и Labels. В слое Actions мы разместим программу, которая будет останавливать воспроизведение на кадре. Если такая программа не встретится, то воспроизведение будет продолжаться бесконечно, пока не встретится действие stop. В слое Labels мы разместим метки, с помощью которых будем перемещаться по ролику.
2. Наведите курсор на 10-й кадр верхнего слоя и протащите вниз до слоя Text. Выберите в меню Insert=>Frames. Добавьте ключевые кадры в 5-й и 10-й кадры слоев Text и Actions. Добавьте ключевой кадр в 5-й кадр слоя Labels.
3. Выберите инструмент Text, щелкните на 1-м ключевом кадре слоя Text и введите Go to Frame 5. Щелкните на 5-м ключевом кадре слоя Text и введите Go to Frame 10. Щелкните на последнем ключевом кадре слоя Text и введите Go to Frame 1.
4. По очереди выделите каждый из текстовых блоков, которые вы только что создали, и преобразуйте их в символы кнопок. Для этого выделите блок и нажмите клавишу . Когда откроется редактор кнопок, дайте символу имя и определите его поведение.

Диалоговое окно Insert Flash Button

Рисунок 17.12. Диалоговое окно Insert Flash Button

Фигуры и текст созданы во FreeHand

Рисунок 17.8. Фигуры и текст созданы во FreeHand и готовы к экспортированию в Fireworks MX

Flashкнопки в Dreamweaver MX

Flash-кнопки в Dreamweaver MX


Когда компания Macromedia вывела на рынок 4-ю версию программы Dreamweaver, в этой программе была новая, но довольно эффектная функция под названием Flash Button. Эта функция позволяла создавать Flash-кнопки без использования программы Flash. Эта функция сохранилась и в версии Dreamweaver MX. Несмотря на то что размеры Flash-файлов невелики, мы предлагаем вам пользоваться этой функцией с осмотрительностью. Как вы поняли из предыдущих разделов, мы использовали символы во Flash MX для экономии ресурсов и уменьшения времени обработки. Но функция Flash Button не использует символы, поэтому она увеличивает расход ресурсов.
Функция Flash Button очень хороша, если у вас есть только одна Flash-кнопка на странице. Но если у вас их пять или шесть, то вы столкнетесь со снижением эффективности обработки, поскольку на компьютере пользователя придется использовать Flash-player для каждой кнопки. Если вы собираетесь использовать несколько кнопок на странице, то есть смысл создать их с помощью Flash MX. Но все же эта функция довольно удобна, и мы считаем необходимым рассмотреть ее использование.
Для того чтобы создать Flash-кнопку в Dreamweaver MX, выполните следующее.
1. Откройте документ Dreamweaver MX и выберите вкладку Media на панели Insert. Щелкните на пиктограмме Flash Button, чтобы открыть диалоговое окно Insert Flash Button (Рисунок 17.12).

Использование действий для перемещения по ролику

Использование действий для перемещения по ролику

Возможность загружать страницы и переходить на внешние адреса — это только один из способов применения Flash-кнопок. Но их можно использовать и для перемещения по Flash-ролику. На первый взгляд это может показаться сложным, но на самом деле это не так. Шкала времени представляет собой линейный объект, и перейти на любой ее кадр или метку кадра можно тоже с помощью определенного действия. С помощью меток кадров и программ на Actionscript пользователь сможет свободно перемещаться по ролику.

Использование кнопки созданной во Flash MX

Использование кнопки, созданной во Flash MX


Как вы уже поняли, создать кнопку с помощью Flash MX не так уж сложно. В начале этого раздела мы покажем, как можно создать простую Flash-кнопку, поместить ее в Dreamweaver MX и редактировать с помощью Flash, сделав один щелчок в Dreamweaver. В конце раздела мы покажем, как создать кнопку с помощью Fireworks, преобразовать ее в символ Flash и поместить в Dreamweaver MX.
Для того чтобы создать Flash-кнопку и экспортировать ее в Dreamweaver, выполните следующее.
1. Откройте новый документ Flash MX, установите его размер 80x60 пикселей, цвет фона сделайте белым.
2. Откройте новый графический символ и назовите его Button. Залейте его синим градиентом, установите контур #999999 (светло-серый) толщиной в 4 пикселя.
3. Выберите инструмент Oval в панели инструментов и, нажав клавишу , нарисуйте круг. Щелкните на круге инструментом Arrow, откройте, панель Info и установите радиус круга, равный 30 пикселям.
4. Откройте панель Align и расположите кнопку в центре сцены.
5. Откройте новый символ кнопки и назовите его toMacromedia. Когда появится шкала времени символа, перетащите копию рисунка кнопки в центр сцены.
6. Выберите инструмент Text, щелкните под кнопкой и введите текст ТоMacromedia. Шрифт можете выбрать любой, но размер его должен быть 12 пунктов.
7. Добавьте ключевой кадр в кадр Over. Выберите инструмент Arrow и щелкните на круге. Выберите в меню Modify=>Break Apart. В результате окружность будет отделена от заливки. Снимите выделение с объекта в кадре Over.
8. Выберите инструмент Fill Transform и щелкните им на градиенте. Когда появятся маркеры, перетащите центральную точку градиента вверх окружности. Добавьте ключевой кадр в кадр Down и снимите выделение с объекта в этом кадре.
9. Выберите инструмент Fill Transform и перетащите центральную точку вниз окружности. Снимите выделение.
10. Вставьте ключевой кадр в кадр Hit. Щелкните на градиенте, выделив его, и скопируйте градиент. Выделите все на сцене и нажмите клавишу . Выберите в меню Edit=>Paste In Place. Копия градиента будет вставлена туда, где ей положено быть.
11. Залейте градиент ярко-зеленым цветом. Ваш символ должен выглядеть так же, как на Рисунок 17.13. Если все в порядке, щелкните на кнопке Scene 1.
12. Перетащите символ Button из библиотеки на сцену. Щелкните правой кнопкой мыши на кнопке на сцене и выберите из контекстного меню пункт Actions.
13. Добавьте действие getURL и введите адрес http://www.macromedia.com. Закройте редактор Actionscript и сохраните файл.
14. После сохранения выберите в меню Edit=>Publish Settings. Поскольку вам нужно экспортировать эту кнопку в Dreamweaver MX, не обязательно публиковать ее в виде HTML, Dreamweaver сделает это автоматически. Снимите флажок HTML и щелкните на кнопке Publish. Закройте Flash MX.
15. Откройте Dreamweaver MX. Создайте Web-узел, файлы которого будут храниться в той папке, в которой находится ваш SWF-файл. Сохраните страницу. Откройте панель Files и щелкните на вкладке Site.
16. Перетащите копию SWF-файла на страницу. Щелкните на кнопке Play и проверьте работу кнопки в разных состояниях. Проверьте страницу в броузере. В Dreamweaver ваша страница должна выглядеть так же, как на Рисунок 17.14.
17. Теперь вам нужно изменить ссылку так, чтобы она указывала на Web-узел New Riders. Выделите кнопку на странице, щелкнув на ней. Если не можете выделить кнопку, щелкните на кнопке Stop в окне свойств. Щелкните на кнопке Edit в окне свойств, и запустится Flash MX.
18. Найдите файл .fla и откройте его. Откройте символ Button и измените слово Macromedia на New Riders. Щелкните на кнопке Scene1.
19. Когда вы вернетесь на главную шкалу времени, выделите экземпляр на сцене, откройте Actions из контекстного меню и измените адрес в действии getURL на http: //www.newriders.com.

Использование компонентов для создания меню во Flash MX

Использование компонентов для создания меню во Flash MX


Есть несколько способов создания меню во Flash MX, начиная с самого простого (передвижение по шкале времени) и заканчивая довольно сложным (программное создание на языке Actionscript с помощью клипа). Самый новый способ — это использование компонентов, поставляемых вместе с Flash MX.
Как мы говорили в главе 7, компоненты заменили технологию Smart Clip, которая появилась во Flash 5. Это было такое серьезное изменение технологии, что компания Macromedia изменила ее название.
В меню, которое вы создадите, будет использоваться компонент Combo Box. Во многом это меню похоже на то, которое вы создали в Fireworks MX. Естественно, во Flash MX новая технология гораздо более гибкая, чем может показаться на первый взгляд. Вы можете менять вид меню, его цвет, размер и т.д. Это важно, потому что если для вас существенно расположение меню и его размер, например ширина, то вы можете натолкнуться на ограничения HTML. Вы создадите меню, которое позволяет пользователю сделать выбор из списка цветов рубашек. Когда пользователь сделает выбор в списке, то после щелчка на другом компоненте, PushButton, выбранный элемент появится на странице.
Чтобы создать меню, выполните следующие действия.
1. Скопируйте папку FlashMenu с Web-узла этой книги на свой компьютер и откройте файл OrderShirts.fla. В нем для вас подготовлен ролик, состоящий всего из двух кадров. В первом кадре пользователь выбирает стиль рубашки, а во втором отображается рубашка, выбранная в первом кадре. Выбранный элемент передается с помощью Actionscript ролику Colors и сообщает ему, какой рисунок вывести во 2-м кадре. Ролик Colors состоит из четырех кадров и имеет метку, в которой содержится цветная рубашка для каждого кадра. Вы выводите выбранную рубашку с помощью этой метки.
2. Добавьте к ролику три новых слоя и назовите их Actions, Labels и Components. Вставьте ключевой кадр в каждый кадр слоя Labels. Назовите первую метку Info, а вторую — Show.
3. Переведите головку воспроизведения в первый кадр и выделите первый кадр в слое Components. Откройте панель Components и перетащите экземпляры компонентов PushButton и ComboBox на сцену.
4. Переместите компонент ComboBox под заголовок Pick a Style, а компонент PushButton — в нижний правый угол области Style.
5. Выделите компонент PushButton. Для того чтобы компонент правильно работал, он должен иметь некоторые свойства и имя экземпляра. Обратите внимание на окно свойств. Значок в этом окне изменяется, показывая, что вы выделили компонент, и появляется несколько дополнительных текстовых полей. Дважды щелкните в текстовом поле Label и введите Show. Нажмите клавишу , и введенное слово появится на кнопке.
6. В следующем поле ввода этого компонента в окне свойств вы должны указать, как пользователь будет взаимодействовать с этой кнопкой. Щелкните в поле ввода Click Handler и введите onClick. Щелкните в поле Instance и введите play_button. Установите ширину кнопки, равную 70 пикселям. Ваше окно свойств должно выглядеть так же, как на Рисунок 17.19.
7. Перейдите во 2-й кадр в слое компонента и вставьте ключевой кадр. Удалите экземпляры компонентов PushButton и ComboBox в этом слое. Замените их другим компонентом PushButton и введите имена метки и экземпляра Reset. Установите ширину кнопки Reset, равную 70 пикселям.

Использование правил Dreamweaver MX

Использование правил Dreamweaver MX


Правила (behavior) Dreamweaver MX — это очень мощные средства.
Правило — это комбинация события и действия. Пример события — это наведение курсора на кнопку, а действие — это то, что происходит после такого наведения. В Dreamweaver MX события бывают самые разные: от щелчка мышью до загрузки страницы во фрейм. Правила могут быть связаны с объектом на странице. По мере необходимости эта связь может быть разорвана. Когда вы связываете правило с объектом через панель Behavior, вы всегда видите с левой стороны панели событие, а с правой — связанное с ним действие.
Для того чтобы создать правило в Dreamweaver MX, выполните следующее.
1. Запустите Dreamweaver MX и откройте файл Behaviors.htm из папки с упражнениями к главе 17, которую вы скопировали с Web-узла этой книги. Нажмите клавишу , чтобы открыть панели.
2. Вы видите кнопку, созданную в Fireworks MX, в центре которой написано слово Up. Кнопки Over и Down находятся в папке Images. Мы займемся кнопкой Up. С ней связаны такие события.

Кнопка превращается в кнопку Over при наведении на нее указателя.

Она опять становится кнопкой Up, когда указатель убирают с нее.

Она становится кнопкой Down после нажатия на нее.

При отпускании кнопки на текущую страницу броузера загружается страница Macromedia.

3. Первое действие состоит в том, что кнопка превращается в кнопку Over. Выделите рисунок на странице, откройте панель Design и щелкните на вкладке Behavior. Щелкните на кнопке Add Action и выберите в списке пункт Swap Image. В открывшемся диалоговом окне щелкните на кнопке Browse и перейдите в папку Images. Выделите кнопку Over и убедитесь, что флажки Preload Images и Restore Images onMouseOut установлены. Щелкните на кнопке ОК.
На панель Behavior добавились два события — onMouseOver и onMouseOut.
4. Проверьте страницу в броузере. При наведении указателя на кнопку она превращается в кнопку Over. Закройте броузер.
5. Состояние Down создается точно так же. Выделив кнопку на странице, добавьте правило Swap Image. Но на этот раз укажите рисунок кнопки Down.
6. Выделите событие onMouseOver в панели Behavior и щелкните на стрелке между событием и действием. В раскрывшемся списке выберите событие onMouseDown. Проверьте, как это работает. При наведении указателя кнопка превращается в Over, а после щелчка мышью превращается в кнопку Down.
7. Для того чтобы после щелчка на кнопке загружался Web-узел Macromedia, вам придется еще кое-что сделать. Выделите событие onMouseDown в панели Behavior и щелкните на кнопке Remove Event. Событие onMouseDown будет удалено.
8. Щелкните на кнопке Add Action и выделите событие onClick. Щелкните на кнопке Down. Щелкните на кнопке Add Action еще раз и выберите событие gotoURL Откроется диалоговое окно. Введите строку http://www.macromedia.com и щелкните на кнопке ОК.
Если вы проверите работу кнопки на этой стадии, то после щелчка на ней вы не попадете на страницу Macromedia, потому что данное действие связано с событием beforeUnload. Это событие возникает при уходе со страницы. Вам нужно событие, которое возникает при нажатии кнопки мыши.
9. Выделите событие Go To URL в панели Behavior. Установите по умолчанию броузер 4.0 and Later и выделите событие onClick (Рисунок 17.16). Проверьте работу кнопки в своем броузере и сохраните работу.

Изменение свойства экземпляра

Рисунок 17.2. Изменение свойства экземпляра в окне свойств не влияет на остальные экземпляры этого объекта


Если вы предпочитаете делать все самостоятельно, нарисуйте кнопки во FreeHand MX, а потом импортируйте их в Fireworks и преобразуйте в символ.

Кадры созданы путем дублирования

Рисунок 17.22. Кадры созданы путем дублирования их и размещения круга на новом месте в каждом кадре


1. Отключите видимость Web-слоя. Выделите слайс над цифрой 1 и перетащите его к левому краю. Появится диалоговое окно Swap Image. Выберите 2-й кадр в списке этого окна. Повторите эти действия для остальных слайсов (Рисунок 17.23).
8. Эти слайсы могут использоваться для перемещения по Web и сайту, с их помощью можно даже загружать содержимое в нужный фрейм страницы. Выделите первый слайс и введите http://www.macromedia.com в область Link в окне свойств. Добавьте еще несколько ссылок к вашим кнопкам, расположите слайсы над рисунком и проверьте все это в броузере.

Карты изображений в Fireworks MX

Карты изображений в Fireworks MX


Дизайнеры часто считают, что если есть некоторый современный и модный инструмент, то им непременно нужно воспользоваться. В начале этой главы мы рассказали о том, как создать кнопку в Fireworks MX. Теперь речь пойдет о том, как создать рисунок, представляющий собой карту изображения, которую тоже можно использовать в качестве элемента навигации.
Мы не будем рисовать традиционную географическую карту. Мы создадим последовательность активных рисунков, которые обладают двумя свойствами — изменять вид курсора при наведении на рисунок и переходить по указанному адресу после щелчка на этом рисунке.

Кнопка экспортирована в Dreamweaver MX

Рисунок 17.14. Кнопка экспортирована в Dreamweaver MX

Кнопки на Webузле Apple

Рисунок 17.7. Кнопки на Web-узле Apple


1. Перетащите горизонтальную направляющую на отметку 0 пикселей и еще две — на отметки 20 и 38 пикселей. Это нужно для точного рисования и позиционирования фигур. Перетащите вертикальные направляющие на отметки 0, 12, 20, 62, 104, 112 и 120 пикселей. Выберите в меню View=>GuidesoSnap to Guides (Привязать к направляющим).
3. Создайте новый слой и назовите его Button. Выберите инструмент Circle и поместите указатель на точку пересечения центральной горизонтальной направляющей и вертикальной, проходящей через отметку 24 пикселя.
4. Нажмите комбинацию клавиш и нарисуйте окружность из центральной точки до левой вертикальной направляющей.
5. Щелкните на окружности, нажмите клавиши и перетащите копию окружности к правому краю области рисования. Удерживая нажатой клавишу , вы ограничиваете движение горизонтальным направлением.
6. Выберите инструмент Rectangle и поместите курсор в точку пересечения горизонтальной направляющей на отметке 20 пикселей с самой верхней вертикальной. Протащите инструментом Rectangle до точки пересечения вертикальной направляющей на 112 пикселях с самой нижней горизонтальной.
7. Выберите в меню Edit=>Select All, а затем Modify=>Combine=>Union. Три фигуры сольются в одну.
8. Залейте фигуру белым цветом и, если контур (stroke) виден, установите его в None. Скопируйте фигуру и снимите с нее выделение.
9. Добавьте новый слой и назовите его Reflect. Вставьте фигуру из буфера обмена в этот новый слой и расположите ее над исходной фигурой. Когда объект в слое Reflect все еще выделен, выберите инструмент Scale и, перетаскивая его верхние и боковые маркеры, установите размер так, чтобы объект помещался между вертикальными направляющими на 12 и 112 пикселях, а его размер по вертикали составлял 12-16 пикселей. Снимите выделение.
10. Добавьте новый слой и назовите его New Riders. Выберите инструмент Text и введите New Riders. Выделите текст и откройте панель Text, нажав клавиши . Текст на кнопках Apple набран одним из вариантов шрифта Lucida. Если у вас нет такого шрифта, выберите Arial или Futura. He используйте полужирное начертание, это будет слишком громоздко для кнопки.
11. Установите размер шрифта 18 пунктов. Нам показалось, что буквы расположены несколько широко, поэтому для букв нижнего регистра мы применили кернинг -5%, а пару Ne сделали с кернингом -9%.
12. Выберите инструмент Selection и перетащите слова вниз. Снимите выделение.
13. Добавьте новый слой и назовите его Macromedia. Выберите инструмент Text, введите и отформатируйте слово Macromedia, установите, кернинг и снимите выделение (Рисунок 17.8). Сохраните рисунок и закройте FreeHand.

Кнопки во Flash MX

Кнопки во Flash MX


Для того чтобы создать кнопку в приложении Flash MX, не нужно быть семи пядей во лбу. Кнопка во Flash — это не более чем клип из четырех кадров. Три кадра содержат изображения кнопки для каждого из состояний — Up, Down и Over. Четвертый кадр определяет активную область кнопки, т.е. то ее место, на котором курсор изменяет свой вид при просмотре в броузере.
Как и в Fireworks, любой графический объект на сцене Flash MX может быть преобразован в кнопку. Аналогично, кнопки с состояниями Up, Down и Over являются символами. В этом разделе мы поговорим о том, как создать и проверить кнопку во Flash MX. Вы узнаете, как, комбинируя приложения FreeHand, Fireworks и Flash, можно создать по-настоящему впечатляющие кнопки.
Важно понять, что во Flash MX символ кнопки имеет два назначения. Первое, очевидное назначение — это создание кнопок разных цветов, которые служат для создания интерфейса. Второе состоит в том, чтобы создать определенные удобства в использовании интерактивных кнопок. Мы знаем, что при определенных обстоятельствах кнопки реагируют на события мыши. Например, при наведении курсора на кнопку курсор изменяет вид. Это требует использования специальных свойств кнопки, и если эти свойства не задействованы, то курсор имеет обычный вид.

Окончательная версия Flashпрезентации

Рисунок 17.21. Окончательная версия Flash-презентации Для того чтобы создать карту изображения, сделайте следующее.


1. Откройте файл Imagemap.png, который находится в папке FWMenufolder, вложенной в папку с упражнениями к главе 17. Этот рисунок устроен так, что он реагирует на наведение курсора на одну из цифр, расположенных в два ряда. Когда курсор наводится на цифру, то появляется красный кружок, а после щелчка мышью происходит переход на указанный адрес.
2. Выберите инструмент Ellipse и нарисуйте круг с красным контуром, в который может поместиться цифра 1. Выберите инструмент Slice. Нарисуйте квадратный слайс, достаточно большой, чтобы накрывать и цифру, и круг.
3. Щелкните на слайсе. Наведите на него курсор и, удерживая нажатой комбинацию , перетащите копию слайса на цифру 3. Повторите эти действия несколько раз, чтобы все цифры оказались покрытыми слайсами.
4. Отключите видимость Web-слоя, выделите круг и вырежьте его из рисунка. После этого рисунок будет помещен в буфер обмена. Включите видимость Web-слоя.
5. Откройте панель Frames и выберите вкладку Frames. Выберите Add Duplicate Frame из меню панели. Введите 1 (номер дублируемого кадра) и отметьте After Current Frame. Повторяйте эти действия, пока не дойдете до кадра Frame 11. Теперь у вас есть рисунок, состоящий из 11 кадров.
6. Если вы щелкнете дважды на имени кадра, то сможете ввести собственное имя для него. В данном случае в этом нет необходимости. Отключите видимость Web-слоя. Выделите 2-й кадр и вставьте крут над цифрой 1. Выделите 4-й кадр и вставьте круг над цифрой 3. Повторите это для всех оставшихся цифр (Рисунок 17.22).

Панель Behaviors

Рисунок 17.16. Панель Behaviors

Панель стилей Fireworks MX

Панель стилей Fireworks MX

Не каждый с первого взгляда сможет оценить полезность панели Styles. Эта панель содержит набор преопределенных объектов и текстовых эффектов. В этой же панелЯ1Рч браны многие стандартные эффекты, которые вы можете применить ко всему Web-узлу. Например, некоторые кнопки сделаны с мраморной заливкой и выпуклыми краями. Вы можете создать на холсте объект с такой заливкой и краями я, выделив его, щелкнуть на кнопке New Style (Создать стиль) в нижней части панели. Откроется диалоговое окно, которое вы видите на Рисунок 17.1. Щелкните на кнопках, которые отвечают за поведение объекта, за его эффекты и текст, и дайте имя новому стилю. В панели Styles появится новый объект.
Для того чтобы удалить стиль, выделите на холсте объект, который основан на этом стиле, и щелкните на кнопке Trash в нижней части панели. Кроме того, можно щелкнуть на объекте в панели, удерживая нажатой клавишу , а затем на кнопке Trash.
Особенно полезной работа со стилями оказывается для группы разработчиков, работающих над одним проектом. Если вы создали новый стиль, или набор стилей, то можете предоставить их всей команде для совместного использования. Для этого вы должны выделить нужные стили и выбрать Export Styles в меню Options панели Styles. Дайте имя новому документу, укажите папку, в которой он будет храниться, и щелкните на кнопке Save. Fireworks создаст новый документ с расширением .stl.
Другие члены вашей команды, если они хотят воспользоваться вашими стилями, должны открыть на своем компьютере панель стилей и выбрать в ее меню Import Styles. Указав папку и имя документа, они получал новый набор стилей в своей библиотеке.
4. Выберите инструмент Text и введите букву А в верхнем регистре. Установите шрифт Arial bold размером 70 пунктов. Выберите инструмент Selection и выделите букву и квадрат.
5. Выберите в меню Modify=>Symbol=>Convert to Symbol. Откроется диалоговое окно Symbol Properties. Дайте символу имя и выберите Button в списке Properties. Щелкните на кнопке ОК. Объект появится на холсте в виде символа.
6. Щелкните на кнопке на холсте. Окно свойств изменится, показывая, что вы выбрали экземпляр символа кнопки. Удерживая нажатой клавишу , вытащите копию экземпляра кнопки рядом с исходной кнопкой. Если объект все еще выделен, то значок в окне свойств изменится в соответствии с выделением.

Правила и броузеры

Правила и броузеры

Здесь мы должны вас предупредить, что все сказанное не относится к броузерам версии 3,0 и более ранним.
Для того чтобы убедиться в этом, щелкните на кнопке Add Event и перейдите вниз списка. Щелкните на строке Show Events For и выберите 3.0 and Later Browsers. Выделите действие URL и раскройте список параметров. Вы увидите всего два варианта, поскольку событие onClick не обрабатывается броузерами версии 3.0. Выберите строку 4.0 and Later Browsers, и вы увидите гораздо более полный список вариантов, включая событие onClick. Все дело в том, что броузеры по-разному обрабатывают события.
При планировании правил необходимо, чтобы все члены команды правильно понимали важность версии броузера (обычно это бывает версия 4.0 и выше).

к форматированию текста кнопки. Не

Предупреждение

Отнеситесь осмотрительно к форматированию текста кнопки. Не все шрифты подходят для этой цели. Для того чтобы проверить, насколько хорош ваш выбор, введите текст, отформатируйте его и щелкните на кнопке Apply. 4. Параметр Bg Color (Цвет фона) может ввести в заблуждение. Он отвечает не за цвет самой кнопки, а за цвет того места, где кнопка будет расположена. Для пробы можете щелкнуть на значке и выбрать красный цвет (#FF0000) из списка. Щелкните на кнопке Apply. Вы увидите, что изменился цвет прямоугольника, в который будет помещена кнопка. Восстановите исходный белый цвет (#FFFFFF).
Как видите, этот параметр позволяет подобрать цвет фона для кнопки. Если вы не знаете, какой цвет фона применить, или используете в качестве фона рисунок, выберите из списка значение No Fill.
5. Выберите имя для кнопки и щелкните на кнопке ОК. Проверьте, как работает кнопка, выбрав в меню File=>Preview in Browser.
6. Для того чтобы изменить свойства кнопки, нужно щелкнуть на ней один раз на странице и ввести новые значения в окне свойств. Если вы хотите проверить работу кнопки, не открывая страницу New Riders, щелкните на кнопке Play в окне свойств. Кнопка Play изменится на Stop. Когда кнопка находится в состоянии Play, ее нельзя ни выделить, ни редактировать. Поэтому, если вы хотите изменить тип кнопки или ее надпись, остановите воспроизведение. Щелкните на кнопке Stop, а потом на кнопке Edit. Откроется уже знакомое вам диалоговое окно Insert Flash Button.

Работа с кнопками в Dreamweaver MX

Работа с кнопками в Dreamweaver MX


Как вы уже знаете, есть несколько способов создания кнопок. Однако все они сводятся к тому, что созданная кнопка должна быть встроена в структуру страницы. Dreamweaver MX— это мощное средство, принимающее и обрабатывающее самые разные элементы управления. И хотя Flash MX и Fireworks MX прекрасно справляются с созданием кнопок, Dreamweaver MX добавляет еще несколько инструментов в арсенал разработчика.
В этом разделе мы рассмотрим несколько функций Dreamweaver MX, предназначенных для создания кнопок. Мы начнем с того, что вставим кнопку, созданную во Flash MX, и воспользуемся для этого специальным средством Dreamweaver MX, которое называется Flash Button. Вы уже создали кнопку с помощью Flash и теперь узнаете, как одним щелчком получить доступ к Flash из Dreamweaver. Это может сэкономить вам много времени и сил, если понадобится внести некоторые изменения в кнопку. Вы узнаете, что создание кнопки во FreeHand, написание программной части во Flash и последующее экспортирование в Dreamweaver предоставляет намного больше гибкости, чем простая последовательность Flash — Dreamweaver MX. И наконец, вы создадите кнопку с помощью JavaScript, нарисовав ее в Fireworks и анимировав с помощью Dreamweaver MX.

Разные состояния кнопки созданы на ее шкале времени

Рисунок 17.4. Разные состояния кнопки созданы на ее шкале времени

Разные свойства компонента могут

Рисунок 17.19. Разные свойства компонента могут быть установлены в окне свойств


8. Переведите воспроизведение в 1-й кадр и выделите ComboBox. Теперь у вас в окне свойств отображается совсем другой набор параметров. Для того чтобы поле функционировало как меню, щелкните на Editable и выберите в списке значение False. Щелкните на свойстве Labels, а потом откройте окно Values. В этом окне вы можете ввести разные параметры меню. Щелкните на кнопке Add и введите слово Green. Добавьте еще два значения — Red и Blue. Щелкните на кнопке ОК и закройте окно Values.
9. Посмотрите в окно свойств и убедитесь, что эти значения указаны в скобках возле соответствующих меток. Назовите экземпляр shirt_color и установите для него ширину 100 пикселей. Теперь ваше окно свойств должно выглядеть, как на Рисунок 17.20.

Редактор кнопок

Редактор кнопок


Итак, мы создали кнопку. Но пока эта кнопка не выполняет никаких функций. Ни наведение курсора на нее, ни щелчок на ней ни к чему не приводят. Все эти действия задаются в редакторе кнопок.
С помощью редактора кнопок Button Editor вы можете создать символ кнопки, который имеет четыре состояния: Up (Отпущена), Over (Курсор наведен), Down (Нажата) и Over While Down (Курсор над нажатой кнопкой). Для каждого из этих состояний в окне редактора кнопок есть свое окно. Кроме того, окно редактора состоит из пяти вкладок, с помощью которых вы сможете без труда выполнить весь процесс.
Есть два способа открыть окно редактора кнопок. Если у вас на холсте пока ничего нет, выберите в меню Edit=>Insert=>New Button. Откроется редактор с окном состояния Up.
Второй способ состоит в том, чтобы нарисовать кнопку и нажать клавишу . При этом объект преобразуется в символ.
Двойной щелчок на символе в окне библиотеки тоже открывает окно редактора кнопок. Щелчок на кнопке Import a Button в нижней части окна открывает библиотеку с предопределенным набором кнопок. Если воспользоваться таким способом, то вы сразу получите все состояния кнопки.

Щелчок на кнопке в броузере открывает

Рисунок 17.11. Щелчок на кнопке в броузере открывает страницу New Riders в новом окне

Слайсы созданы URL введен в окне свойств

Рисунок 17.23. Слайсы созданы. URL введен в окне свойств


Мы также рассмотрели, как с помощью Fireworks, FreeHand и Flash MX можно создать мигающую кнопку, похожую на те кнопки, которые используются в интерфейсе операционной системы Macintosh.
Dreamweaver может использовать в интерфейсе Flash-кнопки, и мы рассмотрели не только то, как создавать такие кнопки, но и как управлять кнопками, созданными во Flash и помещенными в Dreamweaver MX.
Многие разработчики Web-узлов используют удобные средства интерфейса — раскрывающиеся меню. В Fireworks MX добавлены новые средства для создания меню, и мы тщательно изучили их.
В конце главы рассказывалось о создании карты изображения с помощью Fireworks MX. Это относительно новое средство навигации, но оно уже стало популярным среди разработчиков Web-узлов, использующих программы компании Macromedia.
В следующей главе вы узнаете, как применить все изученное на практике.

Есть еще один способ перенести

Совет

Есть еще один способ перенести объект, расположенный на холсте, в окно редактора кнопок. Откройте окно редактора, соответствующее состоянию Up. Перетащите рисунок с холста в окно редактора. Для того чтобы создать простую кнопку с несколькими состояниями, сделайте следующее.
1. Для того чтобы создать состояния Up и Over, щелкните на вкладке Over окна редактора кнопок. Щелкните на кнопке Copy Up Graphic, и рисунок состояния Up скопируется в рабочую область.
2. Выделите копию состояния Up и выберите в окне свойств Effects-Adjust Color-Brightness/Contrast. Переведите ползунок яркости на -25% и щелкните на кнопке ОК. Закройте редактор кнопок, щелкнув на кнопке Done.
3. Выберите в меню File=>Preview in Browser и проверьте в броузере свои новые кнопки.
Теперь эти кнопки стали интерактивными, но в действительности не делают ничего. Если вы добавите два оставшихся состояния, то при щелчке на кнопке будут возникать события.
4. Откройте новую кнопку в редакторе кнопок и щелкните на вкладке Down. Щелкните на кнопке Copy Over Graphic и выделите кнопку в рабочей области. Щелкните на кнопке Inner Bevel Property Info в окне свойств и установите этот эффект в значение Highlighted. Кнопка станет подсвеченной.
5. Для того чтобы создать ссылку состояния Down, щелкните на вкладке Active Area. Окно свойств изменится и будет выглядеть так, как показано на Рисунок 17.3. В поле Link введите http://www.macromedia.com и щелкните на кнопке Done в редакторе кнопок. Сохраните документ под именем Button Test и проверьте его в броузере.

Состояние кнопки Over While Down

Совет

Состояние кнопки Over While Down - это необычное состояние, и его не следует использовать для простых ролловеров. Имеется в виду, что мышь нажата на кнопке и остается нажатой некоторое время. Это состояние не используют для отдельной кнопки, оно предназначено для создания навигационных панелей. 7. Две кнопки на одной странице, ссылающиеся на один и тот же адрес, — бессмыслица. Выделите одну из кнопок на холсте и измените ее ссылку на http://www.newriders.com. Только не делайте это в редакторе кнопок, потому что в этом случае изменения скажутся на всех экземплярах кнопок. Внесите изменения в поле Link окна свойств для каждой из кнопок.

Для того чтобы проверить разные

Совет

Для того чтобы проверить разные состояния кнопок, выберите в меню Control=>Enable Simple Button или нажмите клавиши . Наведите курсор на каждую из кнопок и щелкните мышью на них. Посмотрите, как изменяются кнопки. Эта функция хотя и полезна, но не очень удобна, так как включив ее, вы не сможете выделить кнопку на сцене. Нужно все время следить за тем, чтобы не отключить эту функцию после очередной проверки кнопок. 7. Дважды щелкните на рисунке символа в панели Library. Откроется окно Button Symbol Editor. Измените цвет обоих состояний и щелкните на кнопке Scene 1. Таким образом, вы перейдете на главную шкалу времени. Выделите 1-й кадр в главной шкале времени и перетащите экземпляр кнопки Macromedia к слову Macromedia на сцене. Повторите то же самое для кнопки New Riders.

и понятные имена. Например, имя

Совет

Старайтесь давать символам описательные и понятные имена. Например, имя ТоМacromedia говорит больше, чем Button 1. 5. Щелкните на ключевом кадре в 5-м кадре слоя Labels. Введите имя метки в окне свойств и нажмите клавишу . На ключевом кадре появится маленький красный флажок.
6. Для того чтобы останавливать воспроизведение на каждом ключевом кадре, нужно вставить в этот кадр действие stop. Щелкните правой кнопкой мыши на нужном кадре и выберите в контекстном меню пункт Actions. Когда откроется редактор Actionscript, выберите пиктограммы Actions и Movie Control и дважды щелкните на действии Stop.
7. Щелкните на 5-м кадре слоя Actions и дважды щелкните на действии Stop. Повторите то же самое для 10-го кадра. Закройте редактор Actionscript.
8. Верните воспроизведение в 1-й кадр. Выделите кнопку Text на сцене и выберите в контекстном меню пункт Actions.
9. Дважды щелкните на пункте GoTo пиктограммы Movie Control и измените событие на Press. Щелкните в тексте программы на строке GoToAndPlay, и вы перейдете на кадр с меткой Frame 5.
10. В верхней части окна редактора выберите в списке Туре пункт Frame Label. В поле ввода Frame вы можете указать метку, к которой нужно перейти, двумя способами. Можно ввести имя этой метки или нажать кнопку мыши справа от поля ввода и удерживать ее нажатой. На экране отобразится список всех существующих меток, из которого вы можете выбрать нужную. Выберите метку, и ее имя появится после слов GoToAndPlay, как и положено, в кавычках.
11. Перейдите к 5-му кадру и выделите кнопку Text. Откройте редактор Actionscript и дважды щелкните на GoToAndPlay. В данном случае вам нужно перейти на кадр с определенным номером. Выберите Frame Number в списке Туре и введите число 10.
12. Выделите кнопку в 10-м кадре и перейдите к 1-му кадру.
13. Закройте редактор. Ваша шкала времени должна выглядеть так же, как на Рисунок 17.6.

Редактор Actionscript занимает довольно много

Совет

Редактор Actionscript занимает довольно много места на экране. Возьмите себе за правило закрывать его каждый раз перед тем, как проверять работу программы. 14. Опубликуйте ваш ролик и проверьте его работу в броузере.

В среде разработчиков Flash принято

Совет

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

у вас нет особых соображений

Совет

Если у вас нет особых соображений по поводу выбора имен для слоев, можете поручить это программе. Для этого вам нужно перетащить копию слоя Button на значок нового слоя, который расположен внизу панели. Появится новый слой с именем Buttonl. Повторите это еще раз, и у вас будут две копии слоя с автоматически созданными именами. 5. Блик на кнопке должен затеняться по направлению к центру кнопки. Для того чтобы создать этот эффект, увеличьте масштаб изображения. Откройте слой Reflect и перетащите значок рисунка на значок New Bitmap в нижней части панели. Это создаст копию рисунка точно над оригиналом.
6. Выделите новый рисунок. Залейте его линейным градиентом, переходящим от белого к черному. Для этого выберите инструмент Paint Bucket и перетащите маркеры так, чтобы квадратный маркер был над рисунком, а круглый — под рисунком.
7. Выделите оба рисунка и выберите в меню Modify=>Mask=>Group as Mask. Отключите видимость слоев Button и New Riders. Теперь блик на кнопке становится темнее по направлению к низу кнопки.
8. Для того чтобы создать иллюзию искривления текста вместе с кнопкой, перетащите слой New Riders под слой Reflect и поместите текст под маской. Можете проверить полученный эффект. Дважды щелкните на инструменте Magnifying =>Glass, установив масштаб 100%.
9. Выберите слой Button2, выделите объект и отключите его видимость. Выберите в меню Modify=>Transform=>Numeric Transform=>Scale. В открывшемся диалоговом окне Scale снимите флажки Scale и Constrain Proportions.
10. Установите коэффициент преобразования по горизонтали 90%, а по вертикали — 40%. Щелкните на кнопке ОК и выберите в окне свойств цвет заливки #CCFFFF.
11. Выделите фигуру в слое Button 1. Установите коэффициент преобразования по горизонтали 95%, а по вертикали — 60%. Цвет заливки сделайте #330099. Выделите оба объекта и сгруппируйте их.
12. Примените к объекту эффект Gaussian blur радиусом в 8 пикселей, выбрав его из меню Effects в окне свойств. Выберите в меню Effects=>Brightness/Contrast и установите ползунок яркости в значение 40, а контраста — в 25.
13. Установите для прозрачности сгруппированного объекта значение 90%.
14. Создайте тень от букв. Выберите слой New Riders и выделите текст. Щелкните на кнопке Effects в окне свойств и выберите Effects=>Shadow and Glow=>Drop Shadow. Установите значение Offset, равное 6 пикселям; прозрачность — 50%; Softness — 7; и Angle — 270. Теперь кнопку можно экспортировать во Flash (Рисунок 17.9).

Правильно расположить экземпляр объекта не

Совет

Правильно расположить экземпляр объекта не так уж сложно. После того как вы поместили экземпляр графического символа кнопки в 1-й кадр, добавьте ключевой кадр во 2-й кадр, соответствующий состоянию Over, и выделите новый экземпляр символа кнопки. Перейдите в окно свойств, установите флажок Swap и щелкните на символе Movie Clip. Flash заменит графический символ клипом. Не забудьте заменить в окне свойств тип на Movie Clip.
12. Выделите экземпляр на сцене и добавьте к нему действие getURL. Введите URL http: //www newriders.com. Закройте редактор Actionscript и сохраните клип. Выберите в меню File=>Publish.
13. Выйдите из Flash и проверьте кнопку в броузере. Если вы щелкнете на ней, откроется страница New Riders, как показано на Рисунок 17.11.

Если вы закроете страницу, на

Совет

Если вы закроете страницу, на которой есть Flash-кнопка, а позже откроете ее опять, то может получиться так, что на месте кнопки вы увидите пиктограмму Flash Content. Для того чтобы отобразить кнопку, дважды щелкните на этой пиктограмме. 8 открывшемся диалоговом окне Insert Flash Button щелкните на кнопке Apply, а затем на кнопке ОК. Обратите внимание на кнопку More Styles в этом окне. После щелчка на ней вы попадете на Web-узел Macromedia, откуда сможете загрузить дополнительные Flash-кнопки.

Если вы экспортируете документ FreeHand,

Совет

Если вы экспортируете документ FreeHand, в котором есть только одно состояние кнопки, Up, то во Flash MX попадет именно такой странный символ. Кроме того, FreeHand всегда создает в библиотеке папку Brush Tips. Обязательно удаляйте эту папку перед тем, как экспортировать работу из FreeHand в Fireworks или во Flash MX.

Противоположно направленные градиенты создают иллюзию

Совет

Противоположно направленные градиенты создают иллюзию того, что один из них растворяется в другом. 6. Откройте новый документ Flash MX и установите сцену 120x130 пикселей. Фон сделайте белым. Импортируйте документ FreeHand во Flash MX. Если на шкале времени образовалось несколько лишних слоев, удалите их.
7. Откройте новый символ кнопки. Перетащите символ состояния Up на сцену и расположите по центру. Вставьте ключевой кадр в кадр Over.
8. Удалите символ на сцене и перетащите из библиотеки экземпляр символа Over. Выровняйте его по центру сцены и вставьте ключевой кадр в кадр Down.
9. Удалите кнопку на сцене, перетащите экземпляр кнопки Down и расположите его по центру (Рисунок 17.15). Вставьте ключевой кадр в кадр Hit.
10. Выберите инструмент Oval. Нарисуйте приблизительно такой же круг, как и внутренний, и установите его контур в значение None. Залейте его зеленым цветом. Расположите его поверх внутреннего круга. Щелкните на кнопке Scene1.
11. Перетащите символ Button на сцену, выберите инструмент Text и щелкните один раз под кнопкой. Введите текст ТоMacromedia. Установите размер шрифта 18 пунктов.
12. Измените действие getURL так, чтобы оно переводило вас на адрес http: //www.macromedia.com. Проверьте ролик, сохраните файл и опубликуйте .SWF-файл без HTML. Выйдите из Flash MX.
13. Откройте Dreamweaver MX. Создайте новую страницу и откройте панель Insert, выбрав в меню Window=>Ilnsert.

Создание функций кнопки

Создание функций кнопки


С появлением версии Flash MX кодирование кнопок стало, вообще говоря, легче, но в некоторых случаях труднее. В предыдущих версиях приложения, когда вы открывали панель редактора Actionscript в Normal режиме и выделяли кнопку, вы могли выбирать отдельные события, связанные с этой кнопкой. Теперь все не так. Когда к кнопке добавляется действие, то появляется событие по умолчанию, как правило, отпускание кнопки.
Одна из самых распространенных ошибок начинающих разработчиков состоит в том, что они вставляют программу кнопки в символ, вместо того чтобы вставить ее в экземпляр конкретной кнопки на сцене. Не повторяйте эту ошибку.
Для того чтобы добавить к кнопке действие, выполните следующее.
1. Щелкните правой кнопкой мыши на кнопке Macromedia на главной шкале времени, чтобы открыть контекстное меню.
2. Выберите в контекстном меню строку Action, чтобы открыть редактор Actionscript. Слева в окне редактора расположены синие квадратики со стрелками. Их называют книжками (books). Откройте меню Options редактора Actionscript и перейдите в режим Normal.
Наша цель состоит в том, чтобы после щелчка на кнопке Macromedia перейти на Web-узел компании Macromedia. Таким образом, событие в нашем случае — это нажатие кнопки мыши (press), а действие — переход на другую страницу.
3. Щелкните на пиктограмме Actions. Когда она откроется, щелкните на пиктограмме Browser/Network, открыв панель Actions. Дважды щелкните на действии getURL.
Правая часть окна активизируется. В верхней части окна введите адрес Web-узла, на который вы хотите перейти, а в нижней части укажите окно или рамку, в которую вы хотите загружать содержимое этого Web-узла.
Адрес можно вводить как абсолютный, так и относительный. В нашем случае лучше ввести http: //www.macromedia.com. При вводе адреса обратите внимание на то, что он вводится в кавычках.
4. Проверьте введенный текст программы, и вы увидите, что еще одну вещь нужно изменить. По умолчанию вам предлагается событие on (release)(отпускание кнопки), но нам нужно, чтобы страница выводилась после щелчка на кнопке. Щелкните на слове release, и в панели окна выведется список других событий.
5. Выделите событие press и снимите выделение со слова release (Рисунок 17.5). Если все в порядке, закройте редактор Actionscript. Повторите все действия для кнопки New Riders. Введите адрес http: //www/newriders.com.
Если вы сейчас проверите работу ролика, то убедитесь, что после щелчка на кнопке вы перейдете по новому адресу.

Создание элементов навигации

Создание элементов навигации


В этой главе описывается, как с помощью пакета Studio MX создать кнопки: круглые, квадратные, мигающие и др. Кроме того, мы займемся созданием меню — выпадающих, разворачивающихся, и даже таких, которые с виду похожи на кнопки.
Мы рассмотрим множество способов создания кнопок, но сначала вы должны осознать, как много зависит от того, хорошо ли сконструированы кнопки вашего Web-узла. Ведь кнопки и другие элементы навигации — это то, с чем в первую очередь сталкивается посетитель вашего узла, и если разобраться в назначении той или иной кнопки ему не удается сразу, то он может и не продолжать попыток, а просто уйти с вашего узла. Нам всем приходилось встречать коммерческие Web-узлы, на которых кнопка передачи была выполнена так, что посетителю оставалось только закрыть страницу и поискать другой узел. Если кнопка передачи сделана правильно, то пользователь должен понять, что ему нужно щелкнуть на ней и его заказ будет передан куда следует и немедленно обработан. Обычно такая кнопка выделена на экране тем или иным образом, и курсор изменяет вид при наведении на нее, или как минимум кнопка сделана в виде голубой подчеркнутой ссылки. Но бывают кнопки передачи, которые не позволяют посетителю сделать заказ. Надпись на такой кнопке обычно непонятна — что-нибудь вроде слова "купить". Бывает, что трудно даже признать в этой конструкции кнопку, она может выглядеть как текстовый блок или слово с указывающей на него стрелкой. Если посетитель узла не сможет сразу разобраться, что к чему, он покинет этот узел.
Конструируя кнопку или меню, всегда старайтесь сделать так, чтобы их функция была интуитивно понятна.

Дизайн кнопок должен сохраняться на всех страницах данного Web-узла. Если кнопки будут неожиданно менять свой стиль на каждой странице, то это наверняка введет посетителя в заблуждение.

Надпись на кнопке должна быть понятной.

Расположение меню должно быть одинаковым на всех страницах. Если на одной странице оно расположено вверху, а на следующей — внизу, то это может сбить посетителя с толку.

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

Не думайте, что ваши кнопки и меню будут сразу понятны всему человечеству. Спрашивайте друзей, знакомых и сотрудников. Пусть они попробуют разобраться без ваших подсказок, а вы потом проверьте, правильно ли они вас поняли.

Создание кнопки Aqua Interface

Создание кнопки Aqua Interface

Когда компания Apple представила на рынок свой новый продукт OS X, все группы новостей и форумы вдруг оказались заваленными вопросами о том, как создать эффектные голубые мигающий кнопки, которые получили название Aqua buttons.

Создание кнопки во Flash MX

Создание кнопки во Flash MX


После того как вы узнали, что кнопкой может быть что угодно, перед вами открываются неограниченные возможности. Текст может изменять цвет, объекты могут выглядеть утопленными, а в специальных случаях могут даже появляться в другом месте экрана. Кроме того, можно импортировать рисунки, созданные в Fireworks или во FreeHand. Таким образом, если вам не хватает художественных средств Flash, можете воспользоваться более мощными средствами других программ.
Для того чтобы создать кнопку во Flash MX, сделайте следующее.
1. Откройте новый документ Flash MX и установите белый цвет сцены. Добавьте слой и назовите его Text.
2. Выделив этот слой, выберите инструмент Text и введите слово Macromedia. Шрифт выберите по своему усмотрению, а размер — 24 пункта. Снимите выделение со слова, еще раз выберите инструмент Text и введите New Riders. Разместите слова на сцене одно над другим и оставьте место для круглой кнопки над каждым словом.
3. Выберите в меню Insert=>New Symbol или нажмите клавиши . Откроется диалоговое окно Create New Symbol. Назовите символ Macromedia и выберите в списке Properties пункт Button. Для редактирования откроется шкала времени кнопки.
Шкала времени кнопки отличается от обычной шкалы времени. В этой шкале есть всего 4 кадра: Up, Down, Over и Hit. Последний кадр отвечает за формирование области, при наведении на которую указателя происходят события мыши.
4. Добавьте ключевой кадр в кадр Up, нарисуйте синий круг и выровняйте его по центру сцены. Добавьте ключевой кадр в кадр Over. Появится символ Up. Измените его цвет на красный и добавьте ключевой кадр в кадр Down.
5. Появится символ Over, измените его цвет на зеленый. Добавьте ключевой кадр в кадр Hit, и появится символ Down. Можете нарисовать квадрат на этом символе для определения активной области, а можете оставить как есть. В зависимости от этого активная зона будет квадратной или совпадать со всей кнопкой.
6. Ваша кнопка должна выглядеть так, как на Рисунок 17.4. Выделите кнопку в панели Library и выберите в списке Library пункт Duplicate Symbol. Назовите символ New Riders.

Создание кнопок в Fireworks MX

Создание кнопок в Fireworks MX


Как правило, прежде чем создавать Web-страницы, разработчики и художники тратят значительное время на создание разных вариантов кнопок для разных состояний. Но с помощью Fireworks MX эту работу можно сделать за 5 минут.
В Fireworks MX можно создавать кнопки как символы, т.е. любой рисунок или текстовый объект может быть преобразован в кнопку, которой потом можно пользоваться многократно. И что особенно важно, так это то, что такие символы можно редактировать. Например, предположим, что вы создали выпуклую кнопку с некоторой надписью. Перетащив эту кнопку на холст, вы создаете экземпляр кнопки. Теперь, если вам понадобится изменить надпись на ней, то вам уже не нужно разрывать сложные объектные связи между кнопкой на холсте и ее "предком" в библиотеке. Таким образом, на панели кнопок можно использовать множество экземпляров одной и той же кнопки из библиотеки.

Создание механизма перемещения

Рисунок 17.6. Создание механизма перемещения по шкале времени требует тщательного планирования. Всегда пользуйтесь метками, но не номерами кадров


Пример такой кнопки вы найдете на Web-странице http: //www.apple.com/macosx/ technologies/aqua.html и увидите на Рисунок 17.7. Если вы внимательно рассмотрите рисунок, то увидите, что кнопка состоит из нескольких фигур. Главная фигура представляет собой капсулу кнопки. В верхней части кнопки сделан блик, а в нижней — затенение. Кроме того, сделана тень под текстом и тень под самой кнопкой.
Для создания такой кнопки нужно создать несколько фигур. Первая фигура — это сама кнопка, вторая — это область, создающая блик, и третья — текст. Мы создадим эти фигуры во FreeHand, потом экспортируем их в Fireworks MX, а затем во Flash MX, где и будет создано ее свойство менять вид при наведении курсора.
Подготовка кнопки во FreeHand
В принципе, кнопку можно было бы создать и с помощью Fireworks, но FreeHand предоставляет некоторые средства для работы с текстом, которые значительно упрощают этот процесс.
Для того чтобы создать кнопку во FreeHand, сделайте следующее.
1. Создайте новый документ FreeHand и установите режим просмотра Keyline. Установите масштаб отображения 200%. Режим отображения Keyline удобен для того, чтобы концентрировать внимание на форме линий, не отвлекаясь на толщину линий или заливку, если придется ее применить. Выведите горизонтальную и вертикальную линейки, выбрав в меню View=>Page Rulers=>Show.

Создание раскрывающихся меню в Fireworks MX

Создание раскрывающихся меню в Fireworks MX


Раскрывающиеся меню — это удобный элемент интерфейса. Стоит щелкнуть на элементе меню, и пользователю предоставляется последовательность подменю. Эта техника была реализована в Fireworks 4 и усовершенствована в Fireworks MX. Раскрывающиеся меню предоставляют возможность перемещаться по сложным структурам.
В этом разделе мы рассмотрим, как создать такие меню, но важно то, что рисунки для них мы создадим в Fireworks и во FreeHand MX.
Мы создадим меню, которое будет использоваться не только для перемещения по страницам Web-узла JCT, но и для осуществления контактов с сотрудниками компании JCT по электронной почте.
В категории продуктов меню разработано следующим образом. Когда пользователь наводит указатель на категорию рубашек, перед ним раскрывается подменю мужских и женских рубашек. При наведении указателя на эти подменю раскрываются дополнительные подпункты, в которых можно выбрать размер и цвет рубашки.
Важно помнить, что меню — это элемент, управляемый программой. Когда вы разрабатываете меню, очень полезно создать серию слайсов, в каждом из которых содержится категория меню.
Для того чтобы создать раскрывающееся меню в Fireworks MX, сделайте следующее.
1. Откроите файл menu.png, который вы найдете в папке FWMertu, вложенной в папку с упражнениями к главе 17. В этом файле содержится последовательность слайсов.
2. Откройте панель Layers, затем слои Web и Layer 1. Элементы обоих слоев имеют идентичные имена. Группе разработчиков будет намного проще и удобнее сотрудничать, если они возьмут за правило давать элементам слоя Web и слоям с рисунками одинаковые имена.
3. Выделите Shirts в слое Web. Щелкните правой кнопкой мыши на фигуре в центре оверлея. Выберите Add Pop-Up Menu из контекстного меню. Откроется диалоговое окно редактора. В четырех вкладках, расположенных вверху окна, можно выбрать вид меню и его расположение в окне броузера.
4. Щелкните на вкладке Command, в которой содержаться четыре категории.

Text — текст кнопки;

Link — ссылка, связанная с кнопкой;

Target — назначение URL

5. Дважды щелкните на ячейке Text и введите слово Men's. Дважды щелкните на ячейке Link и введите shirts.htm. Это приведет к тому, что при щелчке на кнопке Men's будет открываться страница Shirts Web-узла JCT.
6. В меню Men's предусмотрены два подменю— Color и Size. Для их создания придется немного поработать. В области Content редактора меню отображается иерархия меню в классическом виде. Введите слово Colors под словом Men's, и в меню добавится новый пункт. Это значит, что если пользователь наведет указатель на пункт Shirts, то отобразятся пункты Men's и Colors.
7. Щелкните на кнопке Add Menu и дважды щелкните в области Text. Когда появится текстовый курсор, введите слово Colors. Щелкните на кнопке Indent Menu и установите отступ для введенного слова.
8. Добавьте подпункт Sizes в меню Men's. Щелкните на кнопке Add Menu, дважды щелкните в области Text и введите слово Women's. Добавьте пункты Colors и Sizes в меню Women's. Ваш редактор меню должен выглядеть так же, как на Рисунок 17.17.

Создание символа кнопки и редактирование ее экземпляра

Создание символа кнопки и редактирование ее экземпляра


Процесс создания кнопки в Fireworks MX начинается с создания символа Button. После объявления объекта символом Button откроется окно Button Editor, в котором создаются разные состояния кнопки. Когда символ перетаскивается на холст, автоматически создаются слайсы, и вы можете работать с экземпляром.
Для того чтобы создать символ кнопки, выполните следующее.
1. Откройте новый документ Fireworks MX. Размеры холста установите 200x200 пикселей, цвет фона сделайте белым. Щелкните на кнопке ОК.
2. Выберите инструмент Rectangle и нарисуйте квадрат размером 70x70 пикселей.
3. Выделив нарисованный квадрат, откройте панель Assets (Материалы) и щелкните на вкладке Styles (Стили). Вы увидите множество заготовленных стилей кнопок. Щелкните в верхнем ряду на синем квадрате.

Создание свойств меню Указав значение

Рисунок 17.20. Создание свойств меню. Указав значение False для поля Editable, вы запретите вводить текст в компонент СоmbоВох


10. Итак, все элементы находятся на своих местах. Теперь нужно наладить интерактивность с помощью языка Actionscript. Откройте редактор Actionscript. Перейдите в режим Expert и введите такой текст:

initValues(); // Если щелкнули на кнопках Show или Reset function onclick(btn) { if (btn == play_button) { setShirts() ; gotoAndStop("show"); } else if (btn == reset) { gotoAndStop("info") } } function setValues() { shirt_color.setValue(color_value); } function setShirts() { color_value = shirt_color.getSelectedltem().label; }
Рассмотрим каждую часть этой программы.

initValues() ; function onClick(btn) { if (btn == play_button) { setShirts(); gotoAndStop("show"); } else if (btn == reset) { gotoAndStop("info") } }
Здесь устанавливаются начальные значения всех объектов ролика. Кроме того, эта часть программы обрабатывает две кнопки — play_button и reset, которые являются экземплярами компонента PushButton, т.е. здесь проверяется, на какой из кнопок был сделан щелчок, и выполняется переход к соответствующему кадру.

function setValues() { shirt_color.setValue(color_value); }
Компонентам нужно сообщать, что они должны делать. В этой части компоненту ComboBox сообщается, что нужно взять выбранный цвет и записать его в переменную color_value.

function setShirts() { color_value = shirt_color.getSelectedltem().label; }
Эта переменная затем передается в ролик Colors, который используется во 2-м кадре ролика.
11. Откройте ролик Colors и добавьте следующую программу в 1 -и кадр слоя Actions:
if (_root.color_value == "Green") { gotoAndStop("Green"); } else if(_root.color_value == "Blue") { gotoAndStop("Blue"); } else if(_root.color_value == "Red") gotoAndStop("Red"); }
Когда воспроизведение попадает в 1-й кадр ролика, проверяется переменная color_value на главной шкале времени (_root.). Если значение переменной совпадает с одним из критериев, то воспроизведение переходит к соответствующему кадру.
Главная шкала времени должна выглядеть так, как на Рисунок 17.21. Если все в порядке, сохраните ролик и проверьте его.

Созданы разные состояния топки

Рисунок 17.13. Созданы разные состояния топки. Обратите внимание на положение центральной точки градиента, выбранное с помощью инструмента Fill Transform


20. Щелкните на кнопке Done над шкалой времени. Flash MX закроется, и вы снова окажетесь в Dreamweaver MX. Если вы теперь щелкнете на кнопке Play в окне свойств, то увидите результат внесенных изменений.

Создать новый стиль совсем не

Рисунок 17.1. Создать новый стиль совсем не сложно, если воспользоваться окном New Style


7. Две одинаковые кнопки с одинаковыми именами собьют с толку кого угодно. Выделив новую кнопку, измените в текстовом поле окна свойств ее надпись А на В и нажмите клавишу . Текст надписи изменится только на новой кнопке. Старая кнопка и символ будут иметь прежние надписи (Рисунок 17.2).

Ссылка добавляется в окне редактора

Рисунок 17.3. Ссылка добавляется в окне редактора кнопок, а ее текст вводится в окне свойств


6. Откройте редактор кнопок и щелкните на вкладке Over While Down. Щелкните на кнопке Copy Down Graphic. В области Inner Bevel Effects в окне свойств установите значение Inset.

Так должна выглядеть ваша кнопка

Рисунок 17.15. Так должна выглядеть ваша кнопка


14. Щелкните на кнопке Flash MX панели Insert, укажите файл, который вы только что создали, и щелкните на кнопке ОК. Кнопка будет вставлена на страницу. Щелкните на кнопке Play в окне свойств и проверьте разные состояния кнопки. После этого проверьте кнопку в броузере.

Так должны выглядеть слои

Рисунок 17.9. Так должны выглядеть слои

Для того чтобы экспортировать кнопку во Flash MX, ее нужно тщательно подготовить. Поскольку Flash MX может принимать рисунки с Alpha-каналом, вам не нужно беспокоиться о потере деталей; которая обычно происходит при преобразовании рисунка в прозрачный GIF. Пока рисунок все еще представляет собой растровое изображение, а это, как мы знаем, может привести к значительному снижению скорости воспроизведения во Flash MX. Для того чтобы экспортировать кнопку, сделайте следующее.
1. Выберите инструмент Crop и обрежьте лишние области рисунка. Щелкните на холсте и установите для его цвета в окне свойств значение None. Это сделает холст прозрачным.
2. Выберите в меню File=>Export Preview и выберите в списке форматов строку PNG 32.
3. Щелкните на кнопке Export. Дайте файлу имя и укажите папку, в которой он будет сохранен. В области Save As флажок Images Only должен быть установлен. Щелкните на кнопке ОК. Сохраните файл и закройте Fireworks MX.
Создание мигающей кнопки во Rash MX
Для того чтобы сделать кнопку мигающей, нужно выполнить три этапа. Сначала необходимо импортировать кнопку во Flash MX, затем вставить этот символ в клип, в котором происходит мигание. И наконец, вставить клип в символ Button. Добавление клипа к символу Button приводит к тому, что кнопка начинает мигать при наведении на нее курсора.
Для создания пульсирующей кнопки сделайте следующее.
1. Откройте новый документ Flash MX и выберите в меню Insert=>New Symbol. В открывшемся диалоговом окне задайте имя символа и установите переключатель Behavior в положение Graphic. Когда символ откроется, импортируйте в него кнопку, созданную в Fireworks, и расположите ее в центре сцены.
2. Выберите в меню Insert=>New Symbol, в открывшемся диалоговом окне дайте имя новому символу, например ButtonMC, и установите переключатель Behavior в положение Movie Clip.
3. Когда символ откроется, перетащите копию кнопки на сцену и расположите ее в центре.
4. Нам нужно сделать, чтобы кнопка мигала довольно часто. Добавьте ключевые кадры в 5-й и 10-й кадры шкалы времени. Переведите воспроизведение к 5-му кадру. Выделите кнопку на сцене (не на шкале времени) и выберите в окне свойств Color=>Brightness. Переведите ползунок яркости в значение -30. Сделать кнопку темнее можно только в том случае, если вы работаете с экземпляром символа Button.
5. Щелкните между 1-ми 5-м кадрами и выберите в меню Insert=>Create Motion Tween. Между 1-м и 5-м кадрами появится стрелка. Сделайте то же самое с 5-м и 10-м кадрами. Если вы нажмете , то увидите, что кнопка мигает. Добавьте новый слой и назовите его Actions.
6. Вставьте ключевой кадр в 10-й кадр слоя Actions. Добавьте в ключевой кадр действие GoToAndPlay, указав в качестве кадра, к которому нужно перейти, 1-й кадр (Рисунок 17.10).
7. Для того чтобы проверить эффект мигания, щелкните на кнопке Scene 1 и перетащите копию клипа Button на сцену. Выберите в меню Control=>Test Movie. Закончив проверку, закройте тестовое окно.
8. Создайте новый символ кнопки. Вытащите экземпляр символа Button на сцену и расположите его в центре. Добавьте ключевые кадры в кадры Over, Down и Hit.
9. Щелкните на кнопке в кадре Over и удалите ее, нажав клавишу . Вытащите на сцену экземпляр символа Button и расположите его в центре.
10. Выделите кнопку на сцене в кадре Down и уменьшите ее яркость в окне свойств до -40. Щелкните на кнопке Scene 1. Удалите клип на сцене и замените его новым символом кнопки.
11. Проверьте клип. Кнопка должна мигать при наведении на нее курсора и темнеть после щелчка на ней. Закройте окно.

Так выглядит шкала времени мигающей кнопки

Рисунок 17.10. Так выглядит шкала времени мигающей кнопки

Вкладка Appearance редактора меню

Рисунок 17.18. Вкладка Appearance редактора меню


Результаты вашего выбора отобразятся в окне вкладки Advanced. Щелкните на кнопке Next.
12. На вкладке Position вы можете задать положение главного меню и его подменю. Варианты здесь простые. Щелкните на Set Menu Position to the bottom of Slice в области Menu Position. При этом значение координаты X будет равно 0, а координаты Y — 26. .13. Вручную установите положение подменю, введя для координаты X значение — -67, а для координаты Y— 21. Щелкните на кнопке Done и нажмите клавишу , чтобы проверить меню в броузере.
14. Меню Contact создается точно так же. Но только в текстовом поле вы должны ввести свое имя и почтовый адрес.
15. Проверьте работу меню в броузере. Если все в порядке, экспортируйте слайсы меню в виде серии рисунков .рng. Сохраните меню тоже в виде рисунка .рng на случай, если понадобится внести изменения. Выйдите из Fireworks и откройте Dreamweaver MX.
16. Откройте страницу Menu.htm, которую вы только что создали, и проверьте ее работу в броузере. Можете открыть страницу Shirts.htm и вставить в нее ссылку на страницу меню.

Введите слова в область Text чтобы создать меню и подменю

Рисунок 17.17. Введите слова в область Text, чтобы создать меню и подменю


9. Щелкните на вкладке Appearance. .Эта область редактора отвечает за ориентацию, стиль текста, его цвет и вид самой кнопки. Щелкните на кнопке HTML и выберите в списке Orientation пункт Horizontal menu. Выбор кнопки HTML позволяет управлять видом меню программно, что приводит к уменьшению размера файла. После выбора пункта Horizontal пункты меню располагаются один возле другого, а не друг под другом.
10. Выберите шрифт, размер и цвет текста. Если ваше окно редактора выглядит так, как на Рисунок 17.18, щелкните на кнопке Next или вкладке Advanced.

Взаимодействие FreeHand MX Flash MX и Dreamweaver MX

Взаимодействие FreeHand MX, Flash MX и Dreamweaver MX


Средства рисования Flash MX довольно примитивны по сравнению со средствами FreeHand. Вы только что создали кнопку, использовав для этого один из стандартных градиентов Flash MX. В данном разделе мы рассмотрим, как создать аналогичную кнопку, но более совершенную.
Для того чтобы создать кнопку во FreeHand, выполните следующее.
1. Откройте FreeHand и нарисуйте инструментом Oval круг диаметром 40 пикселей. Залейте его линейным градиентом, который начинается с синего (000066) и заканчивается белым (FFFFFF). Установите угол градиента, равный 40 градусам. Внизу круга заливка должна получиться синего цвета, а вверху — белого. Если у круга есть контур, удалите его, щелкнув на вкладке Stroke и выбрав в списке Stroke значение None.
2. Создайте копию окружности, выберите инструмент Scale и, удерживая нажатой клавишу , уменьшите копию окружности приблизительно до 75% оригинала. Щелкните на вкладке Fill и установите угол градиента, равный 270 градусам. Совместите центры окружностей, сгруппируйте их, преобразуйте в символ и назовите его Up.
3. Откройте библиотеку, выделите символ Up, скопируйте его (Duplicate) и назовите новый символ Down.

Если несколько кнопок являются общими

Замечание

Если несколько кнопок являются общими для всех страниц Web-узла, то можно сделать их доступными для всех участников рабочей группы. Создайте все кнопки со всеми состояниями в многослойном документе Fireworks и сохраните его в виде PNG-файла. Все участники рабочей группы должны импортировать этот документ на свои панели Library. Можно поступить еще проще. Участники группы должны скопировать этот файл в свои папки (Fireworks MX Configuration=>Libraries). После этого файл становится доступным из меню EditoLibraries, и его содержимое появляется в диалоговом окне Import A Button. Можно импортировать все кнопки сразу или только необходимые в данный момент.

В принципе, мы могли бы

Замечание

В принципе, мы могли бы сделать заливку фигур во FreeHand, но дело в том, что палитра этой программы не позволяет создавать цвета на основе числовых значений. Поэтому мы решили только создать фигуры во FreeHand, но окончательно все доделать в Fireworks MX. Сборка кнопок в Fireworks MX
Опять вспомним не раз повторявшийся совет: "Правильно выбирайте инструмент". Fireworks MX — это специальное приложение, и поэтому рисунок может быть оптимизирован с его помощью для использования в Web-пространстве. Используя слои, управление прозрачностью, множество эффектов и фильтров, рисунок может быть экспортирован в формате .PNG во Flash MX.
Для того чтобы сделать кнопку Aqua Button в Fireworks MX, выполните следующее.
1. Откройте новый документ Fireworks и в диалоговом окне создания документа установите для него следующие параметры: ширина — 200 пикселей; высота — 150 пикселей; разрешение — 100; цвет фона — белый. Щелкните на кнопке ОК.
2. Выберите в меню File=>Import и укажите папку, в которой хранится кнопка, сделанная с помощью FreeHand. Дважды щелкните на файле в окне импорта.
^ Откроется диалоговое окно Vector Options. Флажки Antialias Paths и Text должны быть установлены. В списке Text Options выберите значение Crisp. Это нужно для того, чтобы текст при импорте не утратил четкости. Щелкните на кнопке ОК.
3. Наведите курсор на левый верхний угол холста и щелкните один раз. Рисунок появится на сцене, и откроется панель Layers.
4. Выделите форму кнопки на холсте и залейте ее цветом 0000СС. Перетащите область блика на ее место на кнопке. В панели Layers создайте две копии слоя Button. Дайте им осмысленные имена, например Buttonl и Button2. Отключите видимость всех слоев, кроме слоя Reflect.

в именованный документ. Если вы

Замечание

Flash-кнопку можно вставить только в именованный документ. Если вы откроете новый документ, программа попросит вас сохранить его перед тем, как вставлять Flash-кнопку, Есть еще два способа вставить Flash-кнопку в документ. Можно перетащить значок Flash-кнопки на страницу из панели Insert или выбрать в меню Insert=>Interactive Images=>Flash Button. 2. В области Style выберите из списка значение Chrome Bar. Введите New Riders в текстовое поле Button Text и выберите шрифт и размер для текста кнопки.
3. В области Link введите абсолютный адрес ссылки — http: //www. newriders.com. Если вы хотите вставить ссылку на страницу на своем Web-узле, щелкните на кнопке Browse и укажите нужную страницу.

Первые версии программы FreeHand создавались

Замечание

Первые версии программы FreeHand создавались во времена печатных технологий, поэтому, когда приходится выбирать цвет, инструменты для этого напоминают те книжки с образцами цветов, которыми пользуются художники и печатники. Во FreeHand MX нет такой палитры цветов, как в Fireworks, во Flash и в Dreamweaver, но компания Macromedia обещает исправить этот недостаток в будущих версиях программы. 4. Сделайте еще одну копию символа Up и назовите его Over. Дважды щелкните на рисунке символа Over и откройте редактор Symbol Editor. Щелкните на кнопке, выделите ее и выберите в меню Modify=>Ungroup.
5. Выделите внутреннюю окружность, щелкните на вкладке Fill и установите угол градиента, равный 0 градусам. Откройте символ Down и разгруппируйте окружности. Установите угол градиента внутренней окружности, равный 90 градусам, а внешней — 270. Закройте редактор и поместите три экземпляра кнопок на холст и удалите папку Brush Tips из библиотеки символов. Сохраните документ.

Мы рассмотрели много способов взаимодействия

Замечание

Мы рассмотрели много способов взаимодействия Flash и Dreamweaver. Но при этом мы имели дело только с конкретными кнопками. Запомните — если вы можете создать одну кнопку и настроить ее работу, вы можете сделать то же самое и с десятью кнопками. Главное достоинство Flash-кнопок состоит в том, что они не очень требовательны к ресурсам.

Если вам нужно создать подпункт

Замечание

Если вам нужно создать подпункт меню Colors, щелкните два раза на кнопке Indent Menu.

Если щелкнуть на кнопке Image,

Замечание

Если щелкнуть на кнопке Image, откроется серия кнопок, которые отвечают за вид данного пункта. Если вам кажется, что данных средств недостаточно, примените собственный стиль, создав цвет, заливку и контур самостоятельно. Кроме того, можно создать стиль во FreeHand и экспортировать его в Fireworks MX. 11. На вкладке Advanced редактора меню можно управлять размером ячеек меню, расстоянием между ячейками, отступами текста, установить, сколько времени должно пройти до исчезновения меню, и т.д. Для вашего меню мы рекомендуем такие установки:
Cell Width - 65;
Cell Height - 18;
Cell Padding - 0;
Text Indent - 5;
Cell Spacing - 2;
Menu Delay - 1,000 ms;
Pop-Up Border - Selected;
Border Width - 1;
Shadow — #666666;
Border Color - FFFFFF;
Highlight - FFFFFF.

Этапы

Динамические страницы во Flash MX

Динамические страницы во Flash MX


Ранние версии Flash позволяли разработчику создавать динамические страницы, но для этого он должен был использовать специальное приложение — Generator.
Во Flash MX есть возможность создавать динамические страницы непосредственно, и это открыло для разработчиков новый мир. Но как случается со всяким новым средством, оно не только создает новые возможности, но и порождает новые проблемы.
Динамические Web-страницы во Flash нужны тем клиентам, которые должны постоянно обновлять содержание своих Web-узлов. Во Flash MX для этого есть широкий набор средств, которые позволяют не только генерировать динамический текст, как это было в ранних версиях, но и создавать динамически рисунки и даже звук МРЗ.
Главное преимущество состоит в том, что размер файлов SWF стал меньше, уменьшилось время загрузки, и многие элементы страницы теперь могут загружаться на лету, незаметно для пользователя. Если вы правильно спланировали свой узел, то пользователь сможет смотреть Flash-ролик почти сразу после подключения. А если подойти к этому творчески, то пользователю может казаться, что каждый раз он просматривает новый ролик.
Второе важное преимущество состоит в использовании баз данных и обработке полученных данных. Нет сомнения в том, что через некоторое время Flash MX станет самым популярным Internet-приложением. Теперь пользователям не нужно переходить со страницы на страницу при работе с Web-приложением. Хотя классические Web-приложения были большим шагом вперед, все же они не полностью использовали возможности современных компьютеров.
Flash MX сделало в этом смысле большой шаг вперед. Пользователь может оставаться на одной и той же странице, вызывая различные ресурсы в фоновом режиме. Он может делать покупки в сети, при этом не переходя со страницы на страницу, как приходилось ему делать на обычных HTML-узлах. Новые свойства Flash позволят пользователю рисовать на экране, причем все нарисованное может быть сохранено и впоследствии превращено в ролик Flash. Короче говоря, возможности его безграничны. Мы, наконец, приблизились к тому, чтобы работать с настоящим приложением, вместо того чтобы загружать последовательность страниц, как это было раньше.

Достоинства и недостатки элементов

Достоинства и недостатки элементов навигации, созданных во Flash MX


Мы вполне могли бы создать нашу панель навигации с помощью Flash MX. Мы много говорили об этом в самом начале работы над проектом, но, в конце концов, отказались от этого, и в этом разделе Джордан попытается объяснить, почему мы приняли именно такое решение.
Я создал две панели навигации на основе графики, которой пользовался КРисунок Эти файлы вы можете найти в папке с упражнениями к главе 18 на Web-узле этой книги. Конечно, эти панели не закончены.
В первом файле, FlashNavl, используется рисунок, импортированный из Fireworks MX. Для того чтобы добиться того же эффекта, что и у Криса, файл бы растеризован, и в результате был получен файл приблизительно того же размера, что и GIF-рисунок Криса. Естественно, там не было ни символов, ни ссылок, так как иначе размер файла увеличился бы довольно значительно.
Второй файл, FlashNav2, использует импортированную из Fireworks MX графику, но с сохраненным свойством редактирования. Большая часть эффектов Криса сохранена в виде векторов. Хотя это помогло уменьшить размер файла, все же это ухудшило его качество. Я думаю, что можно найти золотую середину, но все равно, вряд ли размер файла может быть значительно меньше, чем у GIF-файла.
Кроме того, сыграл свою роль урбанистический вид рисунка. Вы помните, что для нас это было очень важно. Не имеет большого значения, если мы сэкономим несколько килобайт. Если при этом мы потеряем нужный вид, то лучше пожертвовать объемом. Вся борьба за снижение объема будет пустой тратой сил, если заказчик останется недовольным рисунком.
У обоих экспортированных файлов есть общая проблема: кирпичи выглядят слишком гладкими. Это одна из причин, по которой Крису пришлось отказаться от использования JPG. Если мы откажемся от сжатия, размер файла значительно увеличится. Если мы применим сжатие без потери информации, то все равно размер останется слишком большим. И даже при таком сжатии качество кирпичей не достаточно высоко. Только GIF-файл дает нам шероховатые кирпичи, но во Flash MX мы этого не добьемся.
Если бы мы сделали весь узел во Flash MX, то он имел бы совсем другой вид. Он слишком напоминал бы мультипликацию. Поэтому, пытаясь добиться реалистичного вида кирпичной стены, нам пришлось делать ее в Fireworks MX.

Две версии панели навигации Для

Рисунок 18.1. Две версии панели навигации. Для полноценного сравнения вы можете посмотреть их на Web-узле этой книги


Мой взгляд притягивается к нижнему рисунку. Версия JPG выглядит так, как будто на ней есть легкая вуаль. Красные элементы слов выглядят более резко на рисунке в формате GIF. Аналогично, голубой цвет выглядит более чистым. И вообще, рисунок в формате JPG кажется грязноватым.
Но, кроме всего сказанного, между этими двумя форматами есть еще несколько очень тонких, на первый взгляд незаметных различий. Эти тонкие различия показаны на Рисунок 18.2. Я специально выделил несколько фрагментов в разных форматах, чтобы показать разницу. Эти фрагменты обозначены буквами А, В, С и D.

Художественные соображения

Художественные соображения

Как ни странно, но решение использовать формат GIF было подкреплено еще и соображениями художественного плана. Если вы вспомните обсуждение планирования узла, приведенное в главе 1, то там было сказано, что наш Web-узел должен иметь урбанистический вид, быть выполненным в стиле "хип-хоп", напоминать городское граффити и т.п. Сохранение рисунков в формате GIF делает их более резкими и четким, что вполне укладывается в наш художественный замысел и придает им особый стиль.
Крис, наш художник, говорит, что выполненные им рисунки были созданы под впечатлением городского граффити. Он говорит, что в некоторых районах Вашингтона можно встретить рисунки на стенах, которые отличаются от остальных. И хотя основной массе Вашингтонского граффити далеко до Нью-Йоркского, все же можно встретить рисунки, при взгляде на которые становится жалко, что эти парни тратят время и силы на вандализм.
Кроме того, здесь есть еще один интересный эффект. Если установить высокую степень сжатия GIF-рисунка, то некоторые пиксели начинают как бы распадаться на отдельные точки. В результате мы получили то, что художники называют счастливой случайностью, или даже озарением. Неумышленно мы создали в рисунке именно нужный нам эффект. При общем взгляде на рисунок отделенные друг от друга точки создают особое восприятие поверхности, и она начинает выглядеть резкой и четкой. В логотипе эффект GIF-сжатия тоже создает эффект разделения, что с точки зрения художника напоминает рисунок мелом.
Это и есть одна из тех редких ситуаций, когда формальное снижение качества рисунка приводит к тому, что он выглядит лучше с точки зрения художника, особенно по сравнению с плавным стилем, который так хорошо передает фермат JPG-рисунка. В этом случае резкие края и слишком сильно сжатые пиксели — это совсем не плохо.

Этапы

Этапы


Мы рассмотрели много вопросов, связанных с созданием разных элементов страниц, начиная с планирования содержания и заканчивая созданием графических рисунков. В оставшейся части книги мы рассмотрим, как собрать материалы в динамические Web-страницы; таким образом, наша работа подошла к некоторому важному этапу.
На этом этапе работы нам не помешает взглянуть на проделанный путь. Мы можем оценить принятые ранее решения и подумать о том, не могли ли мы сделать это более эффективно. До сих пор мы много внимания и сил уделяли созданию средств навигации. Панель навигации появляется у нас практически на каждой странице Web-узла JСТ. Мы приняли несколько важных решений относительно этой панели, но теперь хотим повторить эти размышления вместе с вами.
Нельзя не вспомнить о том, что само появление и дальнейшее развитие пакета Macromedia Studio MX представляют собой этапный момент в технологии создания Web-узлов — переход от статических Web-страниц к динамическим. Web-узел JCT по своей природе является статическим и фактически представляет собой набор нескольких десятков страниц. На каждую из них можно попасть с помощью некоторого элемента навигации, кнопки или меню, с которым связана заданная наперед ссылка. Динамическая часть нашего узла представляет собой всего три страницы, на которых с помощью элементов навигации мы сообщаем серверу, какое содержание нам нужно, и это содержание попадает из базы данных в заданное место на странице. В этой главе мы также поделимся с вами своими соображениями и об этом.
В предисловии к этой книге мы вспоминали знаменитую фразу "Мы больше не в Канзасе, Тотошка". Эту фразу произносит девочка Элли, когда ее домик, подхваченный ураганом, оказывается заброшенным в неведомую страну. Во многих отношениях бизнес разработчиков Web-узлов претерпел похожий перелом. Мы занимались созданием статических узлов, но изменились запросы потребителей, изменился рынок, и теперь мы создаем динамические Web-узлы в новых, незнакомых нам условиях. Изменилась технология, появились новые средства, возникли новые роли в команде разработчиков, изменилось также отношение к этому процессу как заказчиков, так и разработчиков.
Все это породило множество новых интересных вопросов, которые мы не раз обсуждали на страницах этой книги. Двое из авторов этой книги уже некоторое время занимаются созданием динамических Web-узлов и поэтому не раз пытались вынести на обсуждение вопросы, связанные с распределением ролей, взаимодействием с заказчиком, а также проблемы сложности, повторного использования и управления динамическим содержанием.

JPG или GIF

JPG или GIF


Все рисунки, которые мы использовали в панели навигации Web-узла JCT, могли бы быть рисунками в формате JPG. Решение сделать их в формате GIF было вызвано борьбой за малый размер файла.
За исключением фона в виде кирпичной стены и градиента в логотипе, все остальные детали выполнены в простых цветах и прекрасно поддаются сжатию в формате GIF. В частности, ботинки и брюки человечка-талисмана — это главные кандидаты на то, чтобы сжать их в формате GIF, потому что они сделаны в одном цвете. В отличие от этого, кирпичи в стене не подойдут для GIF-сжатия, поскольку они имеют неподходящую ориентацию. Дело в том, что GIF-сжатие хорошо выполняется в том случае, когда пиксели одного цвета повторяются в одной строке рисунка (по горизонтали). Кирпичи в стене, с их изменяющимся по горизонтали цветом, представляют трудно разрешимую задачу для сжатия в формате GIF. Подробное обсуждение проблемы сжатия рисунков вы найдете в главе 21, посвященной оптимизации рисунков.
Понятно, что нет смысла применять в одном рисунке разные системы сжатия; это не приведет к успеху в борьбе за размер файла.
Кирпичный фон, логотип и большая часть талисмана будут лучше и четче выглядеть в формате JPG. В общем случае, при работе с рисунками вроде фотографии, такими как кирпичи с их сложно меняющимися цветами, формат JPG дает лучшие результаты, чем сжатие в формате GIF.

Новый стиль работы

Новый стиль работы


Вы рано или поздно столкнетесь с ситуацией, с которой столкнулись мы, работая над этой книгой. 'Заказчик изменит свое мнение, и все придется менять вслед за ним. Но теперь данные на Web-узле стали динамическими. Он стал гибче, но и сложнее, после того, как мы перешли от многих статических страниц всего лишь к трем динамическим.
Как вы узнаете из последующих глав, содержание Web-узла выводится в табличную структуру. Пожалуй, единственное, что не претерпело существенных изменений, так это панель навигации в верхней части страницы. Но все равно, теперь эта панель не переводит пользователя со страницы на страницу, а загружает нужные данные в созданные заранее шаблоны. Это очень эффективный метод создания Web-страниц.
Но самое главное для нас, разработчиков, состоит в том, что изменился порядок и способ работы.
Теперь дизайнеру недостаточно разрабатывать узел с помощью набора рисунков, приходится также создавать и базу данных. Мы поговорим об этом подробнее в следующей главе. Но для нас оказалось неожиданностью, насколько легко дизайнер воспринял эту перемену и стал мыслить категориями содержания, попадающего в табличную структуру.
На первый взгляд могло показаться, что теперь Джордан, программист, указывает Крису, дизайнеру, как создавать рисунки. Ниже Крис и Джордан объясняют, что на самом деле их роли не изменились, но возникли новое понимание и новый способ взаимодействия.
Говорит Джордан: "На самом деле роль Криса не изменилась. Он, как и раньше, создает рисунки для узла. Просто эти рисунки не появляются на экране, пока программа их не вызовет. Главное изменение произошло с панелью навигации. Она появляется на каждой странице. Панель навигации осуществляет ссылку на страницу, но я отвечаю за то, чтобы в нужный момент эта страница существовала".
Крис соглашается с этим: "Моя роль, действительно, не изменилась. Я по-прежнему разрабатываю модель узла с новым динамическим содержанием и делаю для этого рисунки. Гораздо больше меня занимает проблема физической удаленности. Хотя это и не очень сложно, но иногда мешает. Если бы мы с Джорданом работали в одном офисе, многие проблемы мы могли бы обсудить за чашкой кофе".

Отличия меню Fireworks и Flash

Отличия меню Fireworks и Flash


Возможность создавать выпадающие меню во Flash и в Fireworks — большое преимущество обоих приложений. Но у вас может возникнуть вопрос: зачем использовать Flash, если это можно сделать с помощью Fireworks (и наоборот).
Создание меню во Flash достаточно удобно, если вам нужно простое стандартное меню. Кроме того, они имеют еще некоторые преимущества, которые мы обсудим в главе 23.
Flash-меню очень хороши, если вы предусмотрели на своей странице достаточно места, чтобы эти меню могли развернуться. Если места на странице мало, то меню будут обрезаны.
Flash-меню используются так же, как и обычные меню. Вы, скорее всего, сгруппируете подобные пункты в одном меню, как и ожидает от вас пользователь. Это диктуется здравым смыслом, и так принято делать в любом интерфейсе.
Создание меню с помощью Fireworks MX имеет некоторые преимущества, главным из которых является то, что в этом случае не требуются надстройки. Кроме того, вам не придется резервировать лишнее место на странице, как пришлось бы делать в случае использования Flash.
Пункты меню в Fireworks являются слоями изображения на экране. В отличие от Flash-меню, они располагаются поверх содержимого страницы. Эти меню создаются быстро и легко, намного легче, чем во Flash MX.
Однако тут есть один нюанс, и это касается слоев вообще: если у вас в области содержания есть SWF-файл, или QuickTime, или Real Media, или Windows Media Player, или форма, то меню в этом месте обрезается. Перечисленные выше файлы имеют преимущество на экране, так как их содержимое динамически обновляется. Броузеры постоянно обновляют их содержимое, поэтому все, что вы пытаетесь вывести поверх, затирается.
Выпадающие меню в Fireworks создавать очень легко, но делать это нужно осторожно. Если вам удастся убедить вашего клиента в том, что нет никакой беды, если выпадающее меню закроет на некоторое время часть содержимого страницы, то вы сможете сэкономить много места на экране, организовав интерфейс в виде меню. И в самом деле, в последнее время меню все чаще встречается на современных Web-узлах.
И, наконец, помните об общих правилах создания меню. Мы сами убедились, в том числе и на собственных ошибках, что самое лучшее меню должно быть коротким и понятным. Если под названием категории раскрывается слишком длинный список с элементами выбора, то таким меню пользоваться неудобно.

Почему мы не сделали человечка во Freehand

Почему мы не сделали человечка во Freehand


Крис хочет объяснить, почему мы не воспользовались FreeHand для создания образа человечка-талисмана. Итак, говорит КРисунок
Ох, друзья, на эту тему можно было бы написать отдельную книгу.
Прежде всего, талисман был нарисован в традиционном стиле художников, т.е. я не достаточно ловко управляюсь с табло для рисования, поэтому делал все с помощью бумаги, пера, красок и сканера.
Я знаю многих художников-иллюстраторов и мультипликаторов, которые довольно ловко управляются с таким табло, но лично я не считаю его удобным инструментом. Поэтому я пользуюсь технологией, вызывающей сегодня у многих улыбку, — я рисую вручную, потом сканирую все это и помещаю в Photoshop. Там я разделяю рисунок на слои и раскрашиваю его. Я освоил эту технику, еще когда работал в газете и выполнял для нее цветные рисунки-карикатуры. Я так много лет провел за этим занятием, что сегодня не вижу смысла отказываться от привычного стиля, кроме того, он прекрасно себя оправдывает.
В главе 11 мы подробно рассмотрели технику раскрашивания рисунка с помощью Fireworks MX. Это объясняет, почему у меня вошло в привычку работать в таком стиле, и, кроме того, я вполне доволен результатами.
Если бы мы решили делать наш узел на основе Flash, то, наверное, я бы импортировал рисунок во FreeHand и раскрашивал его там. Но я не сделал этого, потому что не люблю простых цветов.
Если бы раскрашивали рисунок для Flash, то я бы избегал сложных переходов цвета и теней. Тогда нам можно было бы воспользоваться для раскрашивания Flash MX.
Есть старый трюк, позволяющий обходить цветовые ограничения, присущие Flash MX. Если вы обратите внимание на старые мультипликации, то заметите, что в них мало персонажей, имеющих цветные тени. В большинстве своем они выполнены в виде ограниченных областей чистого цвета.
Пожалуй, если бы с самого начала мы решили оставаться в рамках Flash, то я бы именно так и сделал: нарисовал человечка как набор фигур из чистого цвета, и результат был бы, пожалуй, не хуже. Но все же мне больше по душе тонкие переходы цвета, которые мы создали в Fireworks MX. А в следующий раз я обязательно попробую поэкспериментировать.

Распределение обязанностей

Распределение обязанностей

Сделать статический Web-узел динамическим — не такая простая задача. Если вы занимаетесь планированием узла, то важно своевременно сделать правильный выбор модели — статической или динамической, — что лучше подходит для вашей задачи. Принимайте это решение во время планирования, тогда вам удастся избежать многих проблем. На этом этапе еще можно достичь тонкого баланса между дизайном и программированием, когда дизайнер и программист могут разговаривать друг с другом непосредственно.
С точки зрения программиста и разработчика базы данных правильное распределение ролей требует полного понимания намерений дизайнера. Джордан говорит об этом так: "Крис может не согласиться со мной, но мне кажется, что моя роль в этом процессе сложнее. Я должен так написать программу, чтобы она как бы не существовала для пользователя. Для пользователя все должно выглядеть так, как будто Web-узел представляет собой набор HTML-страниц. Поэтому я должен приспосабливать свои программы к дизайну Криса. Это не так просто, особенно если речь идет о создании Web-приложения. Очень часто нам (разработчикам базы данных и программистам) приходится сначала делать программу, а потом нам дают рисунки, к которым мы должны эту программу приспособить. Это не облегчает нашу задачу".
Крис возражает: "Это в значительной степени зависит от того, на какой стадии процесса мы находимся. Я понимаю, что Джордану было нелегко. Я тоже сталкиваюсь с подобными проблемами, потому что все мои заказчики имеет огромные Web-узлы, связанные с базами данных. Выбрать способ, как соединить все это вместе, я имею в виду красивые картинки и информацию из базы данных, — очень сложная задача. И ее решение зависит от того, с какой стороны ее рассматривать, с точки зрения дизайнера или программиста. И то и другое может быть очень трудным. Поэтому Джордан, наверное, прав в том смысле, что его работа была тяжелее моей, поскольку ему приходилось подстраивать динамические данные под мой дизайн".

Реализация решения использовать GIFформат

Реализация решения использовать GIF-формат


В книгах, подобных этой, всегда приводится много советов типа "сделай то, сделай это", но не всегда приводится обоснование таких советов.
Как вы видели, было много технических и эстетических причин использовать формат GIF, но главное слово все же оставалось за художником, который сидит за компьютером и рисует то, что считает нужным. В этом разделе наш художник Крис хочет объяснить, как он принял решение использовать именно этот формат.
Как уже говорилось, было достаточно причин, по которым я решил использовать GIF-формат. Мне хотелось бы подробно рассказать, как я пришел к этому решению. Для этого я сделаю сравнение двух версий панели навигации Web-узла JCT, выполненных в разных форматах.
На Рисунок 1-8.1 вы видите примеры обеих панелей навигации. Верхняя была сделана в формате JPG с коэффициентом качества 75%. Нижняя — это рисунок в формате GIF с использованием 128 цветов.

Создание панели навигации для JCT

Создание панели навигации для JCT


Соберите в одной комнате трех разработчиков Web-узлов, и вы получите три разных мнения о вашей работе. Обычно каждое высказывание начинается словами: "А я бы это сделал не так..." и развивается у всех по-разному.
Это же можно сказать и о панели навигации JCT, которую можно было бы сделать как в виде GIF-, так и в виде PNG-рисунка.
Когда создается художественный рисунок или фотография, художнику неизбежно приходится думать о том, на каком устройстве это будет воспроизводиться. Для художника, работающего с печатными изданиями, выбор не так уж велик, поскольку существуют всего два формата, предоставляющие высокое качество для печатной продукции, — TIF и EPS. Если рисунок предназначается для использования в Web-пространстве, у вас тоже есть всего два варианта — GIF или JPG, — но в этом случае результаты предсказать немного сложнее.
Когда Web-художник готовит рисунок, на его решение влияют

качество изображения на экране;

размер файла.

Как правило, с этим противоречием приходится сталкиваться всем дизайнерам. Представьте себе рычажные весы. На одном плече — качество, на другом — объем файла.
На концах рычагов находятся сверхвысокое качество и неприемлемо большой файл. Сдвиньте немного объем файла к центру весов, и на столько же сдвинется качество в сторону ухудшения. Аналогично, при изменении качества изменяется объем файла. Самое трудное в работе дизайнера — найти этот баланс между объемом и качеством. И, кстати, это проявляется не только в рисунках.
Нам не раз приходилось встречать заказчиков, которые считают, что знают про Web довольно много. Но, как правило, эта их вера основана только на том, что они умеют рассматривать Web-страницы. Они смотрят на чей-то Web-узел и говорят разработчику: "Ну почему бы вам не сделать вот так же для нас?" или "Вот это то, что нам нужно!" Но они не понимают, что за привлекшей их простотой стоит много труда, иногда даже больше, чем за сайтом с интенсивным использованием Flash-анимации или видео QuickTime. Качество Web-узла не возрастает с увеличением интенсивности медиа-приколов. При этом увеличиваются только количество затраченного времени и объем информации.

Управление содержанием

Управление содержанием

Более современный подход к разработке Web-узлов, естественно, порождает у команды разработчиков новые проблемы управления содержанием. Во многих отношениях способность менять содержание в зависимости от обстоятельств является одновременно и преимуществом, и недостатком. Джордан занимается этим уже много лет, и он хочет поделиться своими соображениями.
Дизайнеры — народ очень специфичный. Они раздражаются, когда кто-то пытается вмешиваться в их работу. Они начинают нервничать, когда клиент говорит, что хотел бы иметь возможность менять текст страницы в любой момент и с минимальными затратами. Трудно винить их за это. Некоторые дизайнеры пытаются рационализировать свою работу и решить данную ситуацию, вручив заказчику копию программы Dreamweaver MX. Трудно придумать более пагубное заблуждение.
Нет ничего страшнее, чем заказчик, который решил, что может сам заняться дизайном только потому, что раздобыл соответствующую программу. Хуже может быть только заказчик, который решил заняться программированием по той же самой причине.
Давайте рассмотрим Web-приложение Content Management System (CMS), которое предназначено для того, чтобы изменять содержимое Web-узла, не влияя на его дизайн.
Приложение для управления содержанием должно работать в согласии с дизайном, а не разрушать его. Дизайнер работает с CMS аналогично тому, как он работает со статической страницей.
Динамическое содержание не должно в принципе отличаться от статического текста. Клиент должен иметь возможность изменять содержание своих страниц с максимальной легкостью. Если он решил что-то обновить на своем Web-узле, то изменения должны быть видимы немедленно после щелчка на кнопке Update.
Если вы имеете дело с графикой, то сделайте так, чтобы клиенту нужно было копировать рисунки только в одно место на Web-узле. Если вы используете ColdFusion MX, защитите это место с помощью файла Application. cfm так, чтобы каждый, кто пытается изменить этот файл, был немедленно перенаправлен в другое место.
Если удастся, скройте от клиента физическое расположение этого места. Кроме того, не рассчитывайте на то, что ваш клиент знает язык HTML. Дизайнер сам должен позаботиться о форматировании текста, даже если он позволяет клиенту вводить текст самостоятельно. Использование CSS очень удобно в этом смысле, потому что вы можете задать формат обычным образом, и при этом нет существенной разницы между статическим и динамическим содержанием.
Создавайте систему на основе модулей и держите содержание подальше от элементов, определяющих способ вывода. При этом дизайнеру нет нужды иметь дело с программами.
Для модульного программирования очень удобно приложение ColdFusion. Самые разные элементы Web-узла можно сохранить в одном файле Application.cfm. Этот файл загружается каждый раз при обращении к странице ColdFusion MX.

Увеличив масштаб отображения мы видим разницу в рисунках

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


То же самое можно сказать о тенях. Тени в формате GIF выглядят резкими, и в них как бы появляется некоторая текстура. В версии JPG тени выглядят мягкими, и это плохо ассоциируется с граффити, которое обычно выполняется баллончиком с краской.
Кирпичный фон во фрагменте В также не соответствует стилю.
Вы когда-нибудь пробовали на ощупь край кирпичной стены? Если пробовали, то знаете, какой он шероховатый и жесткий. В нем определенно присутствует текстура. В версии JPG-рисунка это не ощущается. Но в GIF-версии возникает ощущение текстуры, особенно вдоль диагональных линий.
С другой стороны, версия JPG фактически напоминает своей мягкостью рисунок пастелью. В ней не ощущается жесткой текстуры, которая присуща кирпичной стене. Если погладить ее руками, то кажется, что рукам это будет приятно. Но это не должно быть так. Кирпичная стена должна быть жесткой, такой, чтобы хотелось держать руки от нее подальше.
На принятие решения также повлияли блики во фрагменте С. Я уже говорил, что цвета в GIF-файле выглядят не так, как в файле JPG. Это хорошо видно во фрагменте С. В файле JPG красные части имеют некоторый налет бордового, что делает весь рисунок темным. И хотя мы старались придать всему рисунку стили городского граффити, мы не хотели делать рисунок грязным. Для этой цели лучше всего подходил формат GIF.
А как насчет желтого ореола вокруг букв? Опять таки, шероховатость формата GIF работает здесь на нас. Желтый ореол в версии GIF выглядит слишком мягким, напоминающим пастельные краски. А нам нужен стиль росписи из баллончика с краской, нечто резкое и созданное как бы на лету.
Несмотря на то что в баллончике тоже содержится краска и сжатый воздух, рисунки, выполняемые с его помощью, выглядят не так, как сделанные пульверизатором. При быстром проведении линий рисунок баллончиком имеет повышенную насыщенность в середине линий и резкие концы. В JPG-рисунке желтый ореол выглядит так, как будто он сделан пульверизатором. Он имеет мягкий фон, и кажется, что на его создание было потрачено много времени. Но это совсем не то, что зритель привык видеть в искусстве граффити.
Файлу формата GIF присущи все свойства, которые мы привыкли видеть на рисунках, выполненных с помощью баллончика, — края резкие, штрихи обрывистые. Это особенно заметно во фрагменте В.
Говоря о человечке-талисмане, я, вместо того чтобы делать сравнение разных версий файла, просто перечислю элементы (в порядке убывания важности), которые, на мой взгляд, делают формат GIF особенно предпочтительным.

Яркие тона лучше передаются в GIF-формате. Файл формата JPG получается немного сдвинутым в сторону желтого цвета.

Его ботинки имеют ярко-красный цвет в GIF-файле, как и должно быть, в то время как в JPG-файле они бордового цвета.

Складки на его джинсах более четкие в формате GIF, а в формате JPG они сливаются с голубым.

Его джинсы более яркие в GIF-формате, а в JPG они несколько темные.

Пряжка пояса в формате GIF ярко-желтая, а в JPG — почти белая.

В масштабе 100% разница почти незаметна

Рисунок 18.2. В масштабе 100% разница почти незаметна


На первый взгляд разницу заметить очень трудно. Рисунки действительно похожи. Но так это выглядит только при рассматривании их в масштабе 100%. Вот почему я никогда не сравниваю результаты работы в таком масштабе.
Но если вы увеличите масштаб изображения, то разница становится заметной. Я буду сравнивать эти рисунки именно в таком увеличенном масштабе.
Фрагмент А вверху выглядит идеально для JCT, так как переход красного, оранжевого и желтого градиентов выглядит более плавно, чем в соответствующем фрагменте GIF-формата внизу. GIF-версия кажется шероховатой, а переходы цвета в градиенте — грубыми.
Так почему же я не сохранил логотип JCT в JPG-файле?
Версия логотипа JCT в формате JPG выглядела недостаточно в стиле граффити, и это не соответствовало моим целям. Обычно мне не нравится грубый переход цветов в формате GIF, и я сохраняю файлы в формате JPG. Однако в данном случае мы решили придерживаться стиля граффити, а для этих целей нам нужно было создать стиль меловой росписи.

Создание динамических страниц в Dreamweaver MX

Диалоговое окно Insert Table приложения

Рисунок 19.5. Диалоговое окно Insert Table приложения Dreamweaver MX служит для создания таблиц


9. Выделите верхнюю левую ячейку таблицы и убедитесь, что панель Assets отображается на экране.
10. На панели Assets выберите файл jct_corner_logo.gif и щелкните на кнопке Insert. Перетащите рисунок из панели Assets в верхнюю левую ячейку таблицы.
11. Выделите следующую по счету ячейку в верхнем ряду таблицы и выберите элемент навигации, который предназначен для этой ячейки. Если вы получили перекрывающиеся рисунки, выберите для этой ячейки темно-красный элемент (recl_shoes.gif).
12. Заполните последующие ячейки элементами футболок, кепок, джинсов и талисманом. Вставка этих элементов производится из панели Files методом перетаскивания в соответствующие ячейки верхнего ряда таблицы. Когда все верхние ячейки будут заполнены, рисунок должен выглядеть так же, как на Рисунок 19.6. Не обращайте внимание то, что между отдельными рисунками видны разделители. С этим вопросом мы вскоре разберемся отдельно. Сохраните получившуюся страницу в файле navbar.html.
13. Во второй строке таблицы нам потребуется заполнить всего одну ячейку — для адресной строки. Выделите всю строку ячеек и щелкните на кнопке Merge (Объединить) в окне свойств Property. В качестве альтернативы можно выбрать команду меню Modify=>Table=>Merge Cells. Все шесть ячеек второй строки объединятся в одну длинную ячейку, простирающуюся по всей ширине таблицы.

Диалоговое окно New Document приложения

Рисунок 193. Диалоговое окно New Document приложения Dreamweaver MX позволяет выбрать тип создаваемой страницы

Для динамической загрузки рисунков

Рисунок 19.19. Для динамической загрузки рисунков на страницу используйте области размещения (image placeholder)


9. В среднюю строку ячеек нужно ввести текст. Начните со второй слева ячейки. Первая ячейка останется пустой, так как она будет использоваться для рисунка. Введите такой текст:
10. Product (Продукт)
11. Description (Описание)
12. Price (Цена)
13. Выберите в меню пункт File=>Save as. Сохраните данную страницу как шаблон ColdFusion, выбрав соответствующее значение в списке типов файлов Save As Туре. Присвойте файлу имя productlist.cfm. Закройте шаблон.
Работу с этим шаблоном мы закончим в следующей главе, когда будет описано соединение с сервером ColdFusion MX.

Добавление в шаблон ColdFusion MX каскадной таблицы стилей

Добавление в шаблон ColdFusion MX каскадной таблицы стилей

Настанет время, когда в редактируемой области понадобится отобразить текст. В этом случае нужно будет изменить стиль текста. Поэтому целесообразно создать для этой области каскадную таблицу стилей (CSS). Так как таблица стилей должна содержаться в шаблоне, ее придется сделать внутри самого шаблона, а не в отдельном файле CSS.
Для того чтобы добавить в шаблон ColdFusion каскадную таблицу стилей, выполните следующие действия.
1. Откройте панель CSS Styles, выбрав пункт меню Window=>CSS Styles.
2. Щелкните на кнопке New CSS Style в нижней части этой панели. Откроется диалоговое окно CSS Style.
3. В области Туре (Тип) установите переключатель в значение Redefine HTML Tag.
4. В области Define In установите переключатель в значение This Document Only.
5. В текстовом поле Tag введите td (Рисунок 19.16) или выберите этот дескриптор из списка. Мы выберем дескриптор td, чтобы определить формат для текста, используемый по умолчанию в ячейках таблицы. Щелкните на кнопке ОК. Откроется диалоговое окно CSS Style Definition (Определение стиля CSS).

Фрагменты панели навигации были

Рисунок 19.7. Фрагменты панели навигации были вставлены в соответствующие ячейки таблицы

К документу Dreamweaver MX применен

Рисунок 19.18. К документу Dreamweaver MX применен шаблон, который был выбран в диалоговом окне New From Template. После щелчка на области Templates окно изменится с New Document на New From Template


2. Когда создается новая страница из шаблона, его имя отображается в правом верхнем углу страницы. В поле заголовка страницы введите Product Listing (Список продукции). Теперь мы создадим место для рисунка в области pageContent. Эта область будет заполняться динамически при соединении с сервером. Также нужно создать область для списка продукции, в которую будут выводиться результаты запроса к базе данных Access.
3. Переместите курсор на панель навигации. Он примет вид перечеркнутой окружности. Это значит, что данная область является заблокированной. Щелкните еще раз на области pageContent, выделите слово pageContent и щелкните на кнопке Delete (Удалить).
4. Выберите в меню пункт Insert=>Table. Откроется диалоговое окно Insert Table. Создайте таблицу, состоящую из четырех столбцов и трех строк, занимающую 100% ширины страницы и не имеющую отступов и рамок. Щелкните на кнопке ОК. В области pageContent будет размещена таблица с заданными характеристиками.
5. Нажав клавишу , щелкните на каждой из ячеек таблицы верхнего ряда и выберите в меню пункт Modify=>Table1=>Merge Cells (Объединение ячеек). Теперь верхний ряд будет представлять собой единую широкую ячейку.
6. В верхней ячейке создайте область для рисунка, выбрав в меню команду Inserts Image Placeholder. Откроется одноименное диалоговое окно.
7. Присвойте рисунку имя productpict и установите размеры этой области 158x121 пикселей.

Каскадная таблица стилей td добавлена

Рисунок 19.16. Каскадная таблица стилей td добавлена в редактируемую область шаблона ColdFusion


6. В списке категорий (Category) диалогового окна CSS Style Definition выберите пункт Туре.
7. Выберите шрифт-, его размер и прочие необходимые параметры текста. Поля параметров, которые вы не намерены изменять, оставьте пустыми. Новый подход к определению стилей используется вместо старых дескрипторов в связи с применением стандартов W3C. Эти стандарты гарантируют постоянство стилей в ячейках вашей таблицы. Установите те параметры, которые показаны на Рисунок 19.17.

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

Рисунок 19.15. Название редактируемой области в шаблоне выделено синим цветом в соответствующей ячейке таблицы


4. Щелкните на выносном маркере таблицы, выделив ее. Окно свойств изменит свой вид, отображая информацию о настройке таблицы.
5. Установите ширину таблицы, равную 600 пикселям. Это соответствует ширине панели навигации, созданной в Fireworks MX. Отцентрируйте таблицу, выбрав пункт Align меню окна Property.

Панель навигации созданная в Fireworks

Рисунок 19.13. Панель навигации, созданная в Fireworks MX, отображена в верхней ячейке таблицы шаблона ColdFusion MX. Вставленный файл HTML был экспортирован из Fireworks MX

Параметры стиля шрифта для каскадной

Рисунок 19.17. Параметры стиля шрифта для каскадной таблицы стилей, присоединенной к шаблону ColdFusion MX


8. Установив все параметры, щелкните на кнопке ОК. Слова внутри редактируемой области, а также само название этой области изменятся и будут соответствовать только что созданному стилю.
9. Теперь шаблон можно считать готовым. Сохраните его и закройте.

Порядок работ при использовании Studio MX

Порядок работ при использовании Studio MX

Fireworks MX и Dreamweaver MX можно рассматривать как сиамских близнецов. Вы создаете карты рисунков и фрагменты в первом из них, а затем перемещаете их во второе приложение; а для редактирования следует перенести их в первое. Программа на языке HTML, создаваемая Fireworks MX, безусловно, будет работать и в Dreamweaver MX. Таким образом, эти два приложения создают в комплексе простую среду для командной работы над редактированием, оптимизацией и размещением страниц HTML в Dreamweaver MX.
В случае динамических данных можно поместить обрамление (placeholder) рисунка Fireworks на странице Dreamweaver MX. Таким образом, в шаблоне создаются области, в которые будут помещаться создаваемые в Fireworks MX рисунки. После этого с помощью приложения ColdFusion можно поместить эти рисунки в шаблоны Dreamweaver MX.
Создание динамических узлов предполагает четкую согласованность производственного процесса. На первый взгляд кажется, что распределение ролей в этом процессе четко определено: программисты, дизайнеры, Flash-программисты, разработчики баз данных. Однако на самом деле это не совсем так. Каждый из членов команды должен координировать свою работу с другими и уметь понять проблемы своих коллег.
Для того чтобы организовать рабочий процесс, примите во внимание следующее.

Тщательно комментируйте свою работу (с помощью Design Notes). Эти комментарии отображаются в окне файлов Fireworks и имеют расширение .mno. В эти комментарии обычно помещается информация о файлах, экспортируемых из Fireworks MX. При вставке или редактировании такого рисунка или таблицы в Dreamweaver MX эта информация используется для обнаружения файла PNG.

Используйте Fireworks MX в качестве основного редактора изображений в параметрах Dreamweaver MX. Это позволит быстро переходить между данными приложениями.

После того как рисунки завершены и утверждены, переместите их из рабочей области или узла клиента в папку узла Dreamweaver MX.

Ознакомьте всех членов команды с соглашением об именах файлов. Совсем несложно по ошибке сохранить файл Dreamweaver MX в формате страницы HTML, в то время как следовало бы использовать формат шаблона ColdFusion.

После щелчка на кнопке Full Path

Рисунок 19.4. После щелчка на кнопке Full Path панели Files список файлов будет отсортирован по полному пути, а не по именам файлов

Реакция панели навигации на действия

Рисунок 19.11. Реакция панели навигации на действия пользователя устанавливает рисунки перекрытия только одной кнопки


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

Рисунку со словом Shoes назначена

Рисунок 19.9. Рисунку со словом Shoes назначена реакция на действия пользователя


В этом разделе мы научимся создавать панель навигации методом Studio MX. Всю работу по созданию этой панели, включая обработку действий пользователя, мы выполним в Fireworks MX. После этого созданная панель навигации будет использована в Dreamweaver MX при создании шаблона ColdFusion MX.
Чтобы создать панель навигации в Fireworks MX, выполните следующие действия.
1. Откройте файл JCT New Corporate Nav Bar.png в папке Chapter 19 Exercise, расположенной на рабочем столе. Обратите внимание, что данный файл уже был разбит на отдельные фрагменты.
2. Откройте панель Frames, выбрав команду меню Window=>Frames и пункт Duplicate Frame в контекстном меню Frame.
3. После того как откроется диалоговое окно Duplicate Frame, в текстовом поле Number введите число 1 и установите переключатель в значение After Current Frame. Если диалоговое окно выглядит так же, как на Рисунок 19.10, можете смело щелкнуть на кнопке ОК.
4. На панели Frames выберите кадр с номером 2. Откроется рисунок второго кадра, но он не будет отличаться от первого, так как было использовано простое копирование кадра.
5. Нашей целью является изменение фона каждого из пунктов меню на более светлый. Этот эффект и будет реакцией на перемещение курсора мыши пользователем. Вместо того чтобы выполнять вручную эти действия для каждого из рисунков панели, заставим приложение выполнить их за нас. Нажав клавишу , щелкните на каждом из пунктов меню панели навигации.
6. В окне свойств щелкните на значке цвета. В открывшейся цветовой палитре выберите более светлый цвет (например, #996633). Все пункты меню изменят свой цвет.
7. Снова выберите первый кадр и выделите фрагмент со словом Shoes. В окне свойств задайте для этого кадра имя Shoes. В поле ссылки введите имя файла shoes.cfm. После экспорта страницы ссылка будет автоматически подставлена в программу HTML. Повторите эти действия для оставшихся фрагментов панели навигации.

S Фрагмент Shoes получил

Рисунок 19.S. Фрагмент Shoes получил свое название в текстовом поле Image и страницу перехода shoes.cfm в поле Link


3. Повторите шаг 2 для рисунков Hats, T-shirt и Jeans.

Рисунок в рабочей области копируется

Рисунок 19.10. Рисунок в рабочей области копируется с помощью диалогового окна Duplicate Frame


8. Откройте палитру Behaviors (выбрав в меню команду Window=>Behaviors или нажав комбинацию клавиш ). Нажав клавишу , щелкните на всех фрагментах с названиями продукции.
9. Щелкните на знаке "плюс" на панели Behaviors. Откроется список реакций системы. Выберите реакцию с названием Nav Bar Over. Откроется диалоговое окно, показанное на Рисунок 19.11. Чтобы применить эту реакцию ко всем фрагментам, щелкните на кнопке ОК.
10. Выполните экспорт рисунка (выбрав пункт меню File=>Export. Когда откроется диалоговое окно Export, выполните следующее.
11. В списке Save As выберите пункт HTML and Images. В списке HTML выберите пункт Export HTML file. В списке Slices выберите пункт Export Slices.
12. Установите флажок Put Images In Subfolder (поместить рисунки в подкаталог). Для рисунков обычно этот флажок установлен по умолчанию, так что оставьте его на месте.
13. Присвойте файлу экспорта имя JCT_navbar.htm.
14. Щелкните на кнопке Save и закройте Fireworks MX.

С помощью команды меню Insert=>Template

Рисунок 19.14. С помощью команды меню Insert=>Template Objects=>Editable region в шаблон добавляется редактируемая область


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

Сборка панели навигации из заранее

Сборка панели навигации из заранее заготовленных графических фрагментов


Одной из наиболее сложных работ, встречающихся при создании узла, является сборка из отдельных фрагментов панели навигации. Один из авторов сравнил этот процесс со сборкой из маленьких кусочков большого рисунка. В нашем примере этот рисунок будет представлять собой панель навигации.
Сборка панели навигации усложняется еще и тем, что разным фрагментам рисунка нужно назначить разную схему взаимодействия с пользователем. Как уже было показано в предыдущих главах, для одной кнопки требуются три или четыре разных рисунка. Для нашего Web-узла компании JCT нам потребуются четыре кнопки в верхней части, т.е. 12 ("нажата", "отпущена", курсор находится над кнопкой) или 16 (если к вышеназванным добавить еще положение, когда курсор находится над нажатой кнопкой, что часто используется для иерархических меню) разных рисунков.
При создании отдельных кнопок навигации важно, чтобы весь их набор выглядел как единая графическая композиция (Рисунок 19.1).

Если количество рисунков, используемых на

Совет

Если количество рисунков, используемых на странице, чрезвычайно велико, их можно отсортировать в списке согласно полному пути. Для этого в верхней части списка материалов щелкните на кнопке Full Path, и все рисунки сгруппируются вместе (Рисунок 19.4).

и ссылку выбирают так, чтобы

Совет

Обычно имя рисунка и ссылку выбирают так, чтобы в них содержалось имя категории. Не советуем использовать название T-shirt со знаком дефиса. Лучше это слово написать слитно — tshirts, — а страницу ссылки назвать tsirts.cfm. 4. Откройте панель Design и щелкните на разделе Behaviors (или выберите в меню пункт Windows=>Behaviors). Выделите на странице рисунок со словом Shoes.
5. Для того чтобы создать реакцию кнопки (behavior), щелкните на знаке "плюс". Откроется соответствующее меню. Выделите строку Set Nav Bar Image, и откроется одноименное окно.
6. Щелкните на кнопке Browse в строке Over Image. Откроется диалоговое окно файла рисунка. Найдите в папке navbar_images файл brown_shoes. gif. Убедитесь, что в диалоговом окне Set Nav Bar Image установлен флажок Preload Images. Когда это окно примет вид, показанный на Рисунок 19.9, щелкните на кнопке ОК.
7. Повторите шаги 4-6 для остальных элементов навигации.
8. Сохраните файл. Протестируйте полученную страницу в броузере, нажав клавишу или выбрав команду меню File=>Preview in Browser.

в Fireworks MX есть кнопка

Совет

Не забывайте, что в Fireworks MX есть кнопка быстрого экспорта — Quick Export. Вместо того чтобы выбирать в меню File команду Export HTML, можно щелкнуть на пункте Export HTML в контекстном меню Dreamweaver MX, после того как сделан щелчок на кнопке Quick Export. Откроется диалоговое окно Export. После того как файл экспортирован, с помощью щелчка на кнопке Launch Dreamweaver MX можно открыть это приложение.

Если не установлено значение переключателя

Совет

Если не установлено значение переключателя удаления файла в диалоговом окне Insert Fireworks HTML, файл HTML, отвечающий за панель навигации, не будет утерян. Если случайно будет вставлен неверный файл, в этом случае всегда можно будет вернуться в Fireworks MX и снова экспортировать файл в формат HTML. 7. Откроется окно с предупреждением о том, что данный шаблон не содержит редактируемых областей. Их мы добавим немного позже. А сейчас щелкните на кнопке ОК.
8. Откроется запрос на сохранение только что созданного шаблона. Назовите его main. Ранее созданная в Fireworks MX таблица с панелью навигации будет вставлена в верхнюю ячейку новой таблицы. В результате таблица будет иметь вложенную структуру (Рисунок 19.13).

Для того чтобы вы могли

Совет

Для того чтобы вы могли менять рисунки динамически, они должны иметь одинаковые размеры. 8. Щелкните на кнопке ОК. Место для рисунка будет помечено так, как показано на Рисунок 19.19.

Создание динамических страниц на основе шаблонов ColdFusion

Создание динамических страниц на основе шаблонов ColdFusion


Теперь на базе шаблона можно создать динамическую страницу ColdFusion. Список возвращенных результатов, соответствующих результатам запроса к базе данных, чаще называют hit list. Эта страница используется для отображения списка выбранных продуктов в редактируемой области только что созданного шаблона. Сам список продуктов определяется запросом к базе данных, о котором речь пойдет в главе 20.
Для того чтобы создать такую динамическую страницу, выполните следующие действия.
1. Выберите в меню команду File=>New. Откроется диалоговое окно New Document. Щелкните на области Templates (Шаблоны) и установите переключатель в значение New From Template (Создать из шаблона). В появившемся списке узлов (Рисунок 19.18) выберите ранее созданный Web-узел JCT Dynamic Site. Список шаблонов отобразится в средней области окна, а на панели предварительного просмотра появится эскиз самого шаблона. Выберите только что созданный шаблон main и щелкните на кнопке Create (Создать).

Создание динамических страниц в Dreamweaver MX

Создание динамических страниц в Dreamweaver MX


Как уже говорилось в главе 13, при использовании шаблонов процесс создания страниц узла протекает более гладко. Одним из главных достоинств, с точки зрения дизайнера, является то, что шаблон представляет собой заблокированную страницу.
На странице можно создать редактируемые области и определить список лиц, имеющих к ним право доступа, — редакторов, дизайнеров, писателей, программистов и др.
Для нашего Web-узла JCT мы создадим "скелет", на основе которого будут создаваться страницы узла.
Как вы уже догадались, шаблон определяет компоновку страницы. Различие между шаблоном и обычной страницей HTML довольно расплывчатое. Например, Web-узел JCT впоследствии может обрасти страницами, посвященными носкам, украшениям, скейтбордам и роликовым конькам. Если страницы делать статическими, для каждой группы товаров придется создавать ее конструкцию с нуля, каждый раз наполняя ее ссылками на другие страницы. Естественно, такой процесс будет достаточно утомительным и малоэффективным.
Конструкции, созданные на шаблонах, позволяют масштабировать узел, оставляя для конструктора свободу действий. При этом в конструкцию шаблона можно внести изменения, которые сразу же отобразятся на всех страницах, использующих данный шаблон. Если узел изменится, достаточно будет внести соответствующие правки в заблокированные области шаблона.
Можно создать два типа шаблонов: для клиента и сервера.
В этой главе речь пойдет о том, как создать шаблон для клиентской части. Как уже отмечалось в главе 13, такие шаблоны используются для создания последовательного внешнего вида страниц в пределах всего узла с помощью языка HTML. Содержание таких страниц загружается в броузер. Серверные же шаблоны размещаются на Web-сервере, при этом содержание загружается на страницы динамически, в зависимости от выбранного пользователем раздела узла. Такой шаблон мы научимся создавать в следующей главе.

Создание панели навигации методом Studio MX

Создание панели навигации методом Studio MX


Итак, мы только что рассмотрели хорошо известный способ создания страницы в виде таблицы, содержащей множество отдельных фрагментов. Этот способ все еще остается актуальным, так как многие разработчики предпочитают создавать собственную обработку на странице, а также использовать шаблоны Dreamweaver MX. В главе 13 один из авторов, Крис, уже говорил, что создал серию фрагментов в Fireworks, ввиду того, что другой программист, Джордан, предпочитает обработку действия пользователя делать в Dreamweaver MX.

Создание панели навигации

Создание панели навигации


Мы создадим одно и то же меню навигации двумя разными способами. В первом случае мы воспользуемся заготовленными фрагментами изображения, поместив их в таблицу и применив к ним сценарии реакции на действия пользователя. Во втором случае мы создадим таблицу в Fireworks MX. Таким образом, мы охватим два стиля рабочего процесса — старый и новый, появившийся в пакете Studio MX.
И в том и в другом случае панель навигации будет помещена в шаблон ColdFusion MX, а содержание страницы будет загружаться в область под этой строкой меню.

Создание панели навигации

Создание панели навигации


В списке файлов рисунков панели навигации на панели Assets видно, что общий рисунок состоит из четырех пунктов меню, логотипа и талисмана. Исходя из этого будет не сложно скомпоновать эти шесть фрагментов. При этом также окажется, что существуют и вертикальные фрагменты, так как в центре страницы находится адрес, а ноги талисмана выступают вниз.
Чтобы создать панель навигации, выполните следующие действия.
1. Вставьте на страницу таблицу (выбрав пункт меню Inserts Table или щелкнув на кнопке Table в разделе Common панели Insert). В открывшемся диалоговом окне Insert Table установите следующие параметры таблицы (Рисунок 19.5):
2. количество строк — 3;
3. количество столбцов — 6;
4. отступ между столбцами — 0;
5. расстояние между ячейками — 0;
6. толщина границы — 0;
7. ширина — 100% (это заметно облегчит вашу работу).
8. Когда все значения будут введены, щелкните на кнопке ОК. На странице отобразится пустая таблица с шестью ячейками по горизонтали и тремя по вертикали.

Создание шаблона ColdFusion MX

Создание шаблона ColdFusion MX


Все страницы Web-узла JCT были созданы на основе одного шаблона ColdFusion MX. Благодаря этому для узла требуется создать всего три страницы: сводную, посвященную категории продуктов, а также содержащую подробное описание конкретного продукта. Остальная часть узла создается динамически, что будет описано в следующей главе.
Из главы 13 вы уже в общих чертах знаете, как в Dreamweaver MX создавать шаблоны. Для того чтобы добавить в такой шаблон контекст, выполните следующие действия.
1. Запустите на выполнение Dreamweaver MX и создайте новый шаблон, выбрав в меню команду File=>New. Откроется диалоговое окно New Document (Рисунок 19.12). В разделе категорий выберите пункт Template Page. Список подкатегорий изменится и будет содержать список страниц-шаблонов. В этом списке выберите пункт ColdFusion Template и щелкните на кнопке Create. На экране отобразится новый шаблон. Пока не обращайте внимание на имя этого документа — "Template" Untitled 2, — мы его изменим немного позже.
2. На панели инструментов щелкните на кнопке Insert Table. После того как откроется диалоговое окно Insert Table, вставьте таблицу, сформированную из двух строк и одного столбца, без границы и отступов между столбцами и строками, шириной, равной 100% размера страницы. Щелкните на кнопке ОК. В шаблоне сразу же отобразится новая таблица. Верхняя ее строка предназначена для элементов навигации, а нижняя — для информационной части.
3. Выберите в этой таблице верхнюю ячейку. В нее мы добавим созданную ранее в Fireworks MX панель навигации.

Создание страницы Flashзаставки

Создание страницы Flash-заставки

Загрузка узла начинается с анимированного танцующего талисмана, созданного в главе 16. После того как анимация завершится, броузер загружает первую страницу, созданием которой мы сейчас займемся.
Чтобы создать страницу для вводной анимации, выполните следующие действия.
1. Откройте новый документ (File=>New) или создайте его из шаблона. Откроется диалоговое окно New Document (или New from Template). Перейдите в раздел Template и из списка узлов выберите JCT Dynamic Site. В средней части окна отобразится список шаблонов. Выберите в нем шаблон main и щелкните на кнопке Create.
2. Щелкните в поле заголовка новой страницы и ведите ее название — Welcome to JCT.
3. Щелкните в области pageContent этого шаблона и выберите в меню пункт Insert=>Table. Откроется диалоговое окно New Table. Введите соответствующие данные для таблицы, состоящей из одного столбца и одной строки, занимающей 100% страницы. Ширину границы и отступы установите равным 0. Щелкните на кнопке ОК. В области pageContent отобразится новая таблица.
4. Щелкните в созданной таблице. В окне свойств щелкните на значке цвета фона и выберите в предложенной палитре черный цвет.
5. В окне свойств установите выравнивание по горизонтали в значение Center, а выравнивание по вертикали — в значение Middle.
6. Выделите ячейку, подготовленную для размещения анимации. Выберите в меню пункт Insert=>Media=>Flash или щелкните на кнопке Flash в разделе Common панели Insert. Откроется диалоговое окно выбора файла..
7. Перейдите к файлу анимации flashdancer.swf, созданному в главе 16, или используйте версию, которая хранится в папке Chapter 19 Exercise на рабочем столе. Файл анимации будет вставлен в одноклеточную таблицу по центру страницы.
8. Для просмотра вступительной анимации щелкните на странице на файле SWF, а затем — на значке воспроизведения в окне свойств.
9. Сохраните файл под именем index.html. Вводная страница готова.

Создание страницы с описанием продукции в ColdFusion MX

Создание страницы с описанием продукции в ColdFusion MX

Теперь мы займемся созданием страницы с описанием продукции в ColdFusion. На этой странице будет отображаться не только информация о продукте, выбранном на предыдущей странице. Эта страница будет также служить картой покупки, которую пользователь сможет использовать для оформления заказа.
Чтобы создать страницу с информацией о продукте, выполните следующие действия.
1. Выберите в меню пункт File=>New. Откроется диалоговое окно New Page (Новая страница) (или страница New from Template, если в качестве источника был выбран шаблон). Выбрав раздел Template, выберите в списке узлов созданный нами JCT Dynamic Site. В средней части окна отобразится список шаблонов. Выберите шаблон main, после чего щелкните на кнопке Create.
2. После того как откроется новая страница, в поле Title введите ее название — Product Details.
3. Щелкните на редактируемой области страницы. Выделите и удалите слово page-Content. Откройте диалоговое окно Insert Table, выбрав пункт меню Insert=>Table. Введите следующие параметры новой таблицы: 2 строки, 2 столбца, ширина 100%. Для ширины границы и отступов введите нулевые значения. Щелкните на кнопке ОК. В области pageContent отобразится созданная таблица.
4. Выделите в новой таблице правый столбец и объедините в нем ячейки (Modify=>Table=>Merge Cells). В правом столбце сформируется единая большая ячейка.
5. Щелкните на правой ячейке. В параметрах вертикальной разметки в окне свойств выберите пункт Тор. Вся информация в ячейке будет смещена к ее верхней границе, независимо от ее размера.
6. В правой ячейке создайте таблицу, состоящую из двух столбцов и трех строк и занимающую 100% ширины данной ячейки. Как обычно, для ширины границы и отступов установите значение 0.
7. Откройте панель Image Assets. Если она не отображается при данной компоновке окон, выберите в меню пункт Window=>Assets. В папке рисунков узла найдите три файла: shopcart_blue_finger.gif, shopcart_red_finger.gif и shopcart_yellow_finger.gif.
8. Щелкните на первом из этих файлов — shopcart_blue_finger.gif — и перетащите его в верхнюю левую ячейку только что созданной таблицы размером 2x3.
9. Щелкните на втором файле — shopcart_red_finger.gif — и перетащите его в ячейку под первым рисунком.
10. Щелкните на третьем файле — shopcart_yellow_finger.gif — и перетащите его в нижнюю левую ячейку (под красным указателем).
11. Щелкните в правой верхней ячейке и введите Your Security (Ваша безопасность).
12. Щелкните в правой средней ячейке и введите Exchange Policy (Политика обмена информацией).
13. Щелкните в правой нижней ячейке и введите Your Gift Packages (Призовые товары).
14. Выберите файл jct_animated events.gif и перетащите его под внутреннюю таблицу. Щелкните в ячейке, содержащей анимацию, и выберите выравнивание по горизонтали по правой границе. Сохраните страницу под именем productdetails.cfm. Сохраненный файл будет иметь формат шаблона ColdFusion.
15. Выделите верхнюю левую ячейку во внешней таблице в редактируемой области pageContent и вставьте область изображения размером 151x128 пикселей. Присвойте этой области имя productPic. Сохраните созданную страницу (Рисунок 19.20) и закройте ее.

Страница с информацией о продукте

Рисунок 19.20. Страница с информацией о продукте до добавления в нее динамических данных


Итак, страница готова. В следующей главе вы узнаете, как добавить на нее динамическое содержание.

В папке navbarjmages содержатся

Рисунок 19.2. В папке navbarjmages содержатся все фрагменты панели навигации, которую мы разместим в корневой папке узла


4. Для того чтобы облегчить работу по созданию страницы, откройте панель Assets, выбрав в меню пункт Window=>Assets или нажав клавишу . Когда панель Assets откроется, щелкните на значке Image на панели Files, чтобы появилось окно предварительного просмотра рисунков.

В списке шаблонов диалогового

Рисунок 19.12. В списке шаблонов диалогового окна New Document приложения Dreamweaver MX выбран пункт ColdFusion Template


4. Выберите в меню команду Insert=>nteractive ImageoFireworks HTML или щелкните на кнопке Fireworks HTML в разделе Common на панели Insert. Откроется диалоговое окно Insert Fireworks HTML.
5. Щелкните на кнопке Browse, чтобы открыть диалоговое окно File Selector. Выберите созданный ранее файл Fireworks MX и щелкните на кнопке Open. В диалоговом окне Insert Fireworks HTML отобразится полный путь к данному файлу.
6. Проверьте, не установлен ли случайно флажок Delete File After Insertion (Удалять файл после вставки). Если да — снимите его, после чего щелкните на кнопке ОК.

Верхний ряд ячеек содержит элементы

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


14. Выберите рисунок nav_bar_address.gif на панели Files и перетащите его во вторую строку таблицы. Не обращайте внимание на то, что отдельные рисунки панели навигации разделены интервалами.
15. Выделите правую нижнюю ячейку таблицы и вставьте в нее рисунок jct_dude_feet.gif из панели Files (Рисунок 19.7).
16. Теперь мы займемся интервалами между рисунками, вернее, пусть само приложение займется этой работой. Выделите всю таблицу. Окно Property изменит свой вид и будет содержать параметры таблицы. Щелкните на кнопках Clear Column Width и Clear Row Heights панели свойств таблицы, и рисунки в ячейках приблизятся друг к другу. Сохраните файл.

Во избежание недоразумений ответственный

Рисунок 19.1. Во избежание недоразумений ответственный за сборку страницы должен иметь перед глазами ее общую компоновку графики


Итак, приступим к созданию панели навигации Web-узла JCT.
1. Скопируйте папку Chapter 19 Exercise с Web-узла книги на рабочий стол. Создайте папку, которая будет использоваться в качестве корневого каталога узла, и скопируйте в нее подкаталог navbar_images с Web-узла книги.
2. Запустите на выполнение Dreamweaver MX и создайте в нем новый узел JCT Dynamic Site. Откройте представление узла и обратите внимание на то, что справа в представлении локального узла отображена папка navbar_images (Рисунок 19.2).
3. Создайте новую страницу, выбрав в меню команду File=>New или нажав комбинацию клавиш . Когда откроется диалоговое окно New Document, в разделе подкатегорий Basic Page выберите пункт HTML (Рисунок 19.3). Щелкните на кнопке Create, после чего откроется новая страница HTML. Именно на ней мы и будем собирать панель навигации.

Вставка перекрывающих рисунков и ссылок навигации

Вставка перекрывающих рисунков и ссылок навигации


Итак, у нас уже есть панель навигации, собранная вручную, либо имеется единый рисунок, разбитый на части в Fireworks MX.
Собрав панель навигации, для создания перекрывающихся рисунков и ссылок выполните следующие действия.
1. Если это необходимо, откройте страницу navbar.html, созданную ранее в Dreamweaver MX.
2. Выделите рисунок со словом Shoes в верхней строке панели навигации. В окне Property отобразятся свойства этого рисунка. Задайте в его текстовом поле имя для данного рисунка. Для этой ссылки (так как мы заранее знаем, что в следующей главе будем использовать приложение ColdFusion) мы установим страницу перехода shoes. cfm в текстовом поле Link (Рисунок 19.8).

Вставка редактируемых областей в шаблон ColdFusion MX

Вставка редактируемых областей в шаблон ColdFusion MX

Теперь мы займемся созданием редактируемой области в шаблоне ColdFusion MX. Как уже говорилось в главе 13, редактируемая область является единственной, в которую можно поместить динамическое содержание.
Для того чтобы в шаблоне ColdFusion создать редактируемую область, выполните следующие действия.
1. Выберите нижнюю ячейку в только что созданной таблице.
2. Выберите команду меню InsertoTemplate Objects=>Editable region. Откроется диалоговое окно New Editable Region (Новая редактируемая область) (Рисунок 19.14).

Связь с ColdFusion MX

ColdFusion и пользователи компьютеров Macintosh

ColdFusion и пользователи компьютеров Macintosh

Несмотря на свою природу, связанную с Java, сервисы ColdFusion нельзя запустить на платформе Мае. Это — один из тех редких случаев, когда приложение оказывается специфичным для конкретной платформы.
Если вы — пользователь компьютера Мае, для тестирования материала, предлагаемого в этой главе, вам потребуется одно из следующего.

Провайдер, у которого запущено приложение ColdFusion MX. Такой вариант приемлем, однако при этом вы не сможете использовать локальный сервер. К тому же, если вы не оплатите провайдеру дополнительный виртуальный хостинг, тестирование вам придется проводить на рабочем Web-сервере.

Отдельный компьютер на платформе PC, на котором установлено ColdFusion. Это — оптимальный вариант, так как этот компьютер можно будет использовать в качестве отдельного тестового сервера, локального по отношению к вашей сети. Этот вариант рекомендован для тех случаев, когда ColdFusion MX запущено на PC под управлением Windows NT или ранних версий этой операционной системы.

Совмещение. На компьютере Мае можно запустить эмулятор виртуального PC и на нем развернуть ColdFusion MX. Однако работа системы при этом замедлится до скорости черепахи.

Без установленного приложения ColdFusion MX пользователи Мас не смогут просматривать динамические данные или использовать серверную обработку, так как и то и другое предполагает наличие в сети установленного приложения ColdFusion MX.
В этой ситуации максимум, что можно сделать, — это просмотреть ColdFusion MX, не видя результатов работы, так как предварительный просмотр в броузере все равно будет невозможен.

Диалоговое окно Cfinclude

Рисунок 20.12. Диалоговое окно Cfinclude


Используя дескриптор , вы указываете приложению ColdFusion обработать страницу productlist.cfm, так как она является составной частью страницы shoes.сfm. Возможность включения файлов позволяет приложениям ColdFusion иметь модульную структуру.
12. Теперь страницу можно протестировать, щелкнув на значке молнии в шапке окна. Она должна выглядеть аналогично тесту, проведенному в конце предыдущего раздела при создании страницы. Сохраните страницу shoes. cfm.

Для параметров всегда следует указывать их значение

Рисунок 20.10. Для параметров всегда следует указывать их значение

Для параметров всегда следует указывать их значение

Рисунок 20.10. Для параметров всегда следует указывать их значение

Добавление в базу данных рисунков и текста

Добавление в базу данных рисунков и текста

После того как мы переключились в представление Datasheet, перед нами открылся список продуктов с их идентификационными номерами и незаполненными областями, предназначенными для адресов URL рисунков и описаний товаров. Порядок продуктов для нас сейчас не имеет значения. Для связи с таблицей Product мы используем поле идентификатора ProductTypelD. Заполненными в настоящий момент должны быть поля с названиями типов продукции — T-shirt (Футболки), Hats (Кепки), Shoes (Обувь) и Jeans (Джинсы), — а также соответствующие им идентификационные номера типов.
Нам остается добавить в свободные поля ссылки на рисунки и описания типов продуктов.
1. В поле GraphicURL в строке для обуви введите shoe_shopcart_image. gif.
2. В поле GraphicURL в строке для джинсов введите j eans_shopcart_iinage. gi f.
3. В поле GraphicURL в строке для футболок введите tshirt_shopcart_image. gi f.
4. В поле GraphicURL в строке для кепок введите hat_shopcart_image. gi f.
5. В каждом из полей описания продукции введите собственный произвольный текст. Возможно, вы получите удовольствие, открыв однажды каталог магазина одежды и увидев в описании продукции некоторые из своих идей. Законченная таблица должна напоминать приведенную на Рисунок 20.3. Оставьте таблицу пока открытой — нам она еще потребуется для справки об идентификационных номерах групп товаров.
6. Откройте таблицу Product. Введите данные о файлах рисунков отдельных товаров, а также описания этих товаров. Примером могут служить различные товары категории "обувь", предлагаемые компанией JCT.
7. В соответствующее поле добавьте имена файлов рисунков. Рисунки расположены в папке /images/shoppingcart_images/hitlist_images/. По своему усмотрению вы монете изменить размещение файлов графики, но при этом потребуется скорректировать все поля базы данных. Если вам необходимо изменить размещение всего нескольких позиций, гораздо проще будет скорректировать Web-страницу. Введите в поле GraphicURL следующие имена файлов рисунков (сверху вниз):
8. Limegreen_drkgreen_shoe.gif
9. Blue_red_shoe.gif
10. Yellow_liteblue_shoe.gif Л
11. Oceanblue_yellow_shoe.gif
Добавьте новые товары, введя названия, соответствующие идентификационному номеру типа товаров. При этом за справкой можно обратиться к пока еще открытой таблице ProductType. Записи вводятся в следующем порядке: поля ProductTypelD, Product, Description, Price, GraphicURL. Введите данные, показанные на Рисунок 20.4, в соответствующие поля.

Доступ к информации* базе данных

Рисунок 20.6. Доступ к информации* базе данных осуществляется с помощью создания набора данных (т.е. запроса) в окне Recordset


11. По очереди щелкните на полях Product, Description, Price и Graphic URL, не забывая щелкнуть на кнопке SELECT (Выбрать).
12. Сверните таблицу Product в области Database Items, щелкнув на знаке "минус" рядом с ее названием. После этого разверните таблицу ProductType.
13. Щелкните на поле ProductType в одноименной таблице и выберите это поле (кнопка SELECT). Обратите внимание, что в области FROM запроса отобразилось имя и этой таблицы.
14. Сверните таблицу ProductType.
15. Перейдите к строке, следующей за FROM в области SQL, и введите следующий текст.

WHERE ProductType.ProductTypeID= Product.ProductTypelD AND ProductType.ProductType='Shoes'
Первая описанная строка связывает две таблицы базы данных по их общему полю — ProductTypeID. В результате мы можем получить для товара наименование его группы.
Вторая строка устанавливает фильтр. В данном случае мы хотим получить записи, соответствующие группе товаров "Shoes" (Обувь).
После выполненных действий окно Recordset должно выглядеть так же, как на Рисунок 20.7.

Изображение молнии на пиктограмме

Рисунок 20.9. Изображение молнии на пиктограмме означает, что рисунок является динамическим


Создание динамических текстовых полей Flash
Рисунки являются не единственными элементами, которые можно сделать динамическими. Сейчас мы создадим динамическое текстовое поле Flash. При этом интересно то, что само текстовое поле остается пустым — текст, отображающийся в описании продукта, будет запрашиваться из базы данных Access.
Для того чтобы создать динамическое текстовое поле во Flash, выполните следующие действия.
1. Откройте Flash MX и установите размер документа 300x50 пикселей.
2. На панели Tools выберите инструмент вставки текста. Щелкните на рабочей области (Stage) и протащите текстовое поле так, чтобы оно заняло всю ширину рабочей области.
3. Щелкните еще раз внутри этого поля и введите пробел (для того, чтобы поле не было пустым).
4. В окне свойств установите тип текста Dynamic Text (динамический), а переменную имени — TextBox.
5. Установите выравнивание по левому краю, а размер и тип шрифта, напоминающие граффити (например, MarkerFelt). Если шрифта MarkerFelt у вас нет, установите вместо него любой шрифт с понравившимися вам характеристиками (в Internet сейчас можно найти множество шрифтов). Установите такой размер,
чтобы по вертикали была занята вся рабочая область. В случае использования вами шрифта MarkerFelt подходящим размером будет 43 точки.
6. В окне свойств щелкните на кнопке Character и в открывшемся диалоговом окне Character выберите пункт All Characters. Щелкните на кнопке ОК.
7. Щелкните на пятом кадре и нажмите клавишу , чтобы добавить новый кадр. Добавьте новый слой и задайте для него имя Scripts.
8. Выберите пятый кадр в слое Scripts и нажмите клавишу , чтобы сделать данный кадр ключевым. Выделите этот кадр в слое Scripts и откройте панель Actions.
9. В списке режимов работы выберите Expert Mode и введите в область ввода следующий текст: root.ourTextBox=_root.theText
Это укажет текстовому полю на текст, поступающий во время генерации страницы из ColdFusion.
10. Сохраните файл под именем flashtext. f la и опубликуйте его.
11. Закройте Flash MX. Материал динамического текстового поля уже готов для размещения на странице.
12. Вернемся к файлу productlist. cfm, открытому в Dreamweaver MX.
13. Вставьте новое текстовое поле Flash в ячейку, расположенную рядом с динамическим рисунком. Выделив материал Flash, щелкните в окне свойств на кнопке Parameters. Откроется диалоговое окно параметров поля.
14. В текстовом поле окна Parameters введите theText. Это будет именем параметра.
15. Для того чтобы присвоить параметру значение, щелкните на значке молнии рядом с только что введенным параметром. Откроется диалоговое окно Dynamic Data Sources (Источники динамических данных).
16. В списке наборов данных раскройте список Recordset (getProductType), выберите поле RecordType и щелкните на кнопке ОК (Рисунок 20.10).
17. Установите текстовое поле Flash в позицию, показанную на Рисунок 20.11, а его размеры — по своему усмотрению.

Перемещение программ с одной страницы на другую

Перемещение программ с одной страницы на другую

Только что созданную программу можно использовать на странице узла productlist.cfm, завершив, таким образом, динамическую компоновку. Вместо того чтобы повторять все ранее описанные действия по созданию двух наборов данных, можно скопировать сгенерированную программу на страницу списка продукции.
Для того чтобы перенести программу с одной страницы на другую, выполните следующие действия.
1. На странице shoes. cfm выберите в меню пункт View=>Code. Текст программы с двумя созданными наборами данных отобразится на странице. Выделите все строки этого текста и скопируйте их в буфер обмена.
2. Откройте панель Files и дважды щелкните на странице productlist. cfm, чтобы открыть ее.
3. Когда страница откроется, откройте представление Code and Design (View=>Code and Design).

Подготовка к размещению динамического содержания

Подготовка к размещению динамического содержания


В главе 6 рассказывалось, как интегрировать Dreamweaver MX и ColdFusion MX. В настоящей главе вы узнаете еще немного о базах данных, их создании для использования в режиме реального времени и о том, как связать ColdFusion MX с этими базами. В главе 6 уже описывалось, как создавать страницы ColdFusion MX в Dreamweaver MX, просматривая в них информацию из базы данных. В этой главе мы продолжим тему, начатую в главе 6, и будем использовать страницы, созданные при изучении материала главы 19. Если вы еще не создали то, что было рекомендовано в главе 6, настоятельно рекомендуем вернуться к этой главе, прежде чем продолжить чтение текущей.
Проверьте свои установки администратора для пароля RDS и соединения с источником данных ODBC, а также установки узла для тестирования URL-сервера. Dreamweaver MX будет использовать эти установки совместно с ColdFusion MX для просмотра динамических данных.
И снова подчеркнем: если вы не уверены в установках ColdFusion MX и Dreamweaver MX, вернитесь к главе 6 и перепроверьте установки узла, связанные с функциями динамического размещения данных.

Будьте предельно внимательны, выполняя нижеописанные

Предупреждение

Будьте предельно внимательны, выполняя нижеописанные действия! Во избежание вероятных ошибок создайте резервную копию рассматриваемой страницы. Если появится какая-либо ошибка, всегда можно будет воспользоваться сохраненной копией и начать весь процесс заново. . Для того чтобы преобразовать страницу списка товаров в формат серверного шаблона, выполните следующие действия.
1. Откройте панель Server Behaviors и выберите набор записей getProductType.
2. Нажмите клавишу со знаком "минус", чтобы удалить этот набор записей. Появится предупреждение, что имеются и другие записи, зависящие от данной. Согласитесь с предложением продолжить работу, щелкнув на кнопке ОК.
3. Выберите набор записей RecordSet (productList).
4. Нажмите клавишу со знаком "минус", чтобы удалить и этот набор данных. Как и в предыдущем случае, согласитесь с предложением продолжить работу, несмотря на наличие записей, зависящих от данной (т.е. щелкните на кнопке ОК).
5. Сохраните страницу, после чего закройте ее. У вас получился серверный шаблон, который можно использовать на всех страницах с перечисленными товарами. Загрузите шаблон product list. с fin на тестовый сервер.
6. Щелкните на кнопке с именем тестового сервера в диалоговом окне Site Definition, после чего щелкните на кнопке Connect (Соединиться).
7. Выделите ваши файлы и щелкните на кнопке Put Files.
8. Если это необходимо, откройте файл shoes.сfmи измените представление в окне Dreamweaver на совмещенное (View=>Code and Design View).
9. Щелкните в конструкторской области, и в области текста программы будет автоматически выделен фрагмент, соответствующий данному элементу дизайна.
10. Перейдите в область текста программы и щелкните на строке, следующей за последним дескриптором .
11. Выберите в меню пункт Insert=>ColdFusion Basic Objects=>CFINCLUDE. В открывшемся диалоговом окне Cfinclude (Рисунок 20.12) в текстовом поле Template введите имя шаблона, productlist.cfm, после чего щелкните на кнопке ОК.

Предварительный просмотр страницы списка товаров

Рисунок 20.14. Предварительный просмотр страницы списка товаров

Преобразование страницы со списком

Преобразование страницы со списком товаров в серверные шаблоны


Вы только что создали динамическую страницу для списка товаров, отображающую категорию обуви. Однако нельзя забывать, что на Web-узле JCT должна отображаться информация и о других группах товаров. Проще всего было бы сделать копии созданной страницы для каждой из оставшихся категорий. Однако это решение является самым малоэффективным, так как при этом нужно было бы компоновать все эти страницы. Более эффективным решением будет использование единой страницы компоновки для списков всех категорий товаров. Таким образом, любые изменения, внесенные на этой странице компоновки, будут сразу же отражаться на всех страницах, ее использующих. Такая страница компоновки называется серверным шаблоном (server template). Серверный шаблон при этом будет включаться на все страницы товаров, которые должны запрашивать данные из базы данных для своей категории товаров. Единственное, что будет при этом изменено, — запрос SQL в дескрипторе CFQUERY.

Расширение свойств базы данных Access

Расширение свойств базы данных Access


База данных, созданная нами при рассмотрении главы 6, еще находится в "зародышевом" состоянии. Несмотря на то что мы можем извлечь текст из различных полей этой базы на страницу Dreamweaver MX, это все еще не позволяет нам добавить на страницу рисунки и связаться со страницами, о которых рассказывалось в главе 19.
Отображение рисунков дает конечному пользователю иллюзию того, что он просматривает совершенно различные страницы. База данных не может хранить рисунки, и этому есть две причины: рисунки увеличивают размер базы и создают дополнительные сложности с ее обслуживанием. К тому же вы не сможете обновить рисунок в базе данных, не переписав все ее данные. Так что в базе данных мы будем хранить только имена файлов рисунков.
Для того чтобы внедрить на Web-узел динамические рисунки, используя при этом базу данных, выполните следующие действия.
1. Скопируйте папку Chapter 20 Exercise на рабочий стол и откройте базу данных jet .mdb. В работе, согласно рекомендациям из главы 19, лучше использовать завершенные файлы рисунков из папки примеров к этой главе или с Web-узла настоящей книги. Они — часть работы, которую предстоит осилить в настоящей главе.
2. Дважды щелкните на файле Product в списке, чтобы открыть таблицу Product.
3. Перейдите в режим Design, выбрав в меню пункт View=>Design View. Дважды щелкните на пустой ячейке под ценой в столбце Field Name и добавьте новое поле. Введите следующую информацию.

Имя поля (Field Name) — Graph! cURL (в этом поле будет храниться имя файла рисунка).

Тип данных (Data Type) — Text.

Разрешение нулевой длины (Allow Zero Length) — Yes.

Если ваш экран похож на Рисунок 20.1, сохраните изменения и закройте текущее окно.

Расширенный запрос к базе данных

Рисунок 20.7. Расширенный запрос к базе данных позволяет с большей точностью отобразить требуемую информацию на динамической странице


16. Если вы хотите протестировать запрос SQL, щелкните на кнопке Test. Откроется окно тестирования с результатами запроса (Рисунок 20.8).
17. Щелкните на кнопке ОК, и окно Recordset закроется. Набор данных productList отобразится на панели Behaviors.

Щелкнув на кнопке Test можно протестировать

Рисунок 20.8. Щелкнув на кнопке Test, можно протестировать созданный запрос в открывшемся окне с результатами запроса


4. Щелкните на первой строке в верхней части окна в месте, предшествующем дескриптору .
5. Вставьте из буфера обмена скопированную программу и нажмите клавишу (или на компьютерах Мае). В первых восьми) строках представления программы отобразится текст ранее созданного запроса.

Достоинством текста Flash является возможность

Совет

Достоинством текста Flash является возможность изменения его размеров и других свойств. Если вы хотите изменить какие-либо характеристики анимации Flash, всегда можно щелкнуть на кнопке Edit и перемещаться между Flash и Dreamweaver. Однако помните, что это может повлиять на все страницы, так как создаваемая страница предназначена стать серверным шаблоном.

Достоинством текста Flash является возможность

Совет

Достоинством текста Flash является возможность изменения его размеров и других свойств. Если вы хотите изменить какие-либо характеристики анимации Flash, всегда можно щелкнуть на кнопке Edit и перемещаться между Flash и Dreamweaver. Однако помните, что это может повлиять на все страницы, так как создаваемая страница предназначена стать серверным шаблоном.

Создание динамических текстовых полей Flash

Создание динамических текстовых полей Flash


Рисунки являются не единственными элементами, которые можно сделать динамическими. Сейчас мы создадим динамическое текстовое поле Flash. При этом интересно то, что само текстовое поле остается пустым — текст, отображающийся в описании продукта, будет запрашиваться из базы данных Access.
Для того чтобы создать динамическое текстовое поле во Flash, выполните следующие действия.
1. Откройте Flash MX и установите размер документа 300x50 пикселей.
2. На панели Tools выберите инструмент вставки текста. Щелкните на рабочей области (Stage) и протащите текстовое поле так, чтобы оно заняло всю ширину рабочей области.
3. Щелкните еще раз внутри этого поля и введите пробел (для того, чтобы поле не было пустым).
4. В окне свойств установите тип текста Dynamic Text (динамический), а переменную имени — TextBox.
5. Установите выравнивание по левому краю, а размер и тип шрифта, напоминающие граффити (например, MarkerFelt). Если шрифта MarkerFelt у вас нет, установите вместо него любой шрифт с понравившимися вам характеристиками (в Internet сейчас можно найти множество шрифтов). Установите такой размер,
чтобы по вертикали была занята вся рабочая область. В случае использования вами шрифта MarkerFelt подходящим размером будет 43 точки.
6. В окне свойств щелкните на кнопке Character и в открывшемся диалоговом окне Character выберите пункт All Characters. Щелкните на кнопке ОК.
7. Щелкните на пятом кадре и нажмите клавишу , чтобы добавить новый кадр. Добавьте новый слой и задайте для него имя Scripts.
8. Выберите пятый кадр в слое Scripts и нажмите клавишу , чтобы сделать данный кадр ключевым. Выделите этот кадр в слое Scripts и откройте панель Actions.
9. В списке режимов работы выберите Expert Mode и введите в область ввода следующий текст: root.ourTextBox=_root.theText
Это укажет текстовому полю на текст, поступающий во время генерации страницы из ColdFusion.
10. Сохраните файл под именем flashtext. f la и опубликуйте его.
11. Закройте Flash MX. Материал динамического текстового поля уже готов для размещения на странице.
12. Вернемся к файлу productlist. cfm, открытому в Dreamweaver MX.
13. Вставьте новое текстовое поле Flash в ячейку, расположенную рядом с динамическим рисунком. Выделив материал Flash, щелкните в окне свойств на кнопке Parameters. Откроется диалоговое окно параметров поля.
14. В текстовом поле окна Parameters введите theText. Это будет именем параметра.
15. Для того чтобы присвоить параметру значение, щелкните на значке молнии рядом с только что введенным параметром. Откроется диалоговое окно Dynamic Data Sources (Источники динамических данных).
16. В списке наборов данных раскройте список Recordset (getProductType), выберите поле RecordType и щелкните на кнопке ОК (Рисунок 20.10).
17. Установите текстовое поле Flash в позицию, показанную на Рисунок 20.11, а его размеры — по своему усмотрению.

Создание страниц для остальных

Создание страниц для остальных категорий товаров (Hats, T-Shirts и Jeans)

Создав страницу для обуви, можно приступить к странице для кепок. Для того чтобы создать вторую страницу узла, выполните следующие действия.
1. Откройте файл shoes. cfm и выберите в меню пункт File=>Save As (Сохранить под другим именем). Задайте новое имя файла — hats .cfm — и щелкните на кнопке Save. Большая часть работы будет выполнена системой. Вам остается лишь применить фильтрацию к другой категории товаров (изменить shoes на hats).
2. Откройте диалоговое окно поиска и замены, выбрав пункт меню Edit=>Find and Replace.
3. Выберите пункт Current Document (Текущий документ), в списке области поиска — Source Code (Текст программы). Введите в поле Search For строку поиска — Shoes. В текстовом поле замены (Replace With) введите слово hats, после чего щелкните на кнопке Replace All (Заменить все вхождения).
4. Откройте любую из страниц, shoes.cfm или hats. cfm, и сохраните ее под другим именем — t shirt s. с f m (команда меню File=>Save As).
И снова, все, что нужно сделать, — это применить фильтрацию к футболкам (T-shirts). Для этого, в зависимости от того, какая страница была открыта, нужно выполнить поиск и замену в тексте программы слова shoes или hats на Т-shirts. После сохранения этой страницы эти же действия нужно выполнить для последней страницы, посвященной джинсам. Итак, вы создали все страницы со списками товаров разных категорий. Благодаря дескриптору CF1NCLUDE мы всего лишь один раз сослались на страницу productlist. cfm.
5. Откройте страницу productdetails. cfm, после чего отобразите панель Server Behaviors.
6. Добавьте реакцию сервера RecordSet (Query). В открывшемся окне Recordset щелкните на кнопке Advanced.
7. Введите в поле Name имя набора данных — getProductDetails.
8. Разверните подпункт Tables в списке Database Items. Откройте таблицу Product.
9. Щелкните в поле Product и выберите его, щелкнув на кнопке SELECT.
10. Повторите эти же действия для полей Description, Price и GraphicURL.
11. Сверните таблицу Product и разверните таблицу ProductType.
12. Щелкните в поле ProductType и выберите его, щелкнув на кнопке SELECT.
13. Повторите эти же действия для поля ProductDescription.
14. Сверните таблицу ProductType и вручную введите под областью запроса FROM следующий текст:
WHERE ProductType.ProductTypelD= Product.ProductTypelD AND Product.ProductID=#ProductID#
В первой строке вы связали две таблицы по их общему полю. В данном случае таким общим полем является идентификатор типа товаровProductTypeID этом для выбранного товара можно определить название категории и ее описание. Во второй строке устанавливается фильтрация по переменной # ProductID#. Эта переменная передается на URL со страницы, на которой размещен список товаров.
15. В разделе параметров страницы (Page Parameters) щелкните на знаке "плюс". Когда откроется диалоговое окно, введите в текстовом поле Name название ProductID, а в поле Default Text (Текст по умолчанию) — нуль. Щелкните на кнопке ОК.
16. Последнее действие будет гарантировать то, что если при вызове страницы не будет передан идентификатор товара, то это значение автоматически установится в нуль, не вызвав сбой загрузки страницы.
17. Щелкните на ОК.
18. Выберите область рисунка productPict, откройте панель Bindings и разверните набор данных getProductDetails.
19. Щелкните на связи GraphicsURL и перетащите ее в область рисунка. Рисунок при этом станет динамически загружаемым.
20. В окне свойств добавьте путь images/shoppingcart_images/ hitlist_images и установите выравнивание по левой границе. Оставаясь на странице, добавьте поле динамического текста Flash.
21. С помощью команды меню Insert=>Media=>Flash вставьте /на страницу файл flashtext.swf. В диалоговом окне File Selector щелкните на кнопке Parameters. Откроется окно параметров.
22. Введите имя параметра — theText.
23. При задании значения щелкните на значке молнии и откройте диалоговое окно выбора источников данных.
24. Раскройте список набора записей getProductDetails и выберите поле ProductType. Щелкните на кнопке ОК, после чего — на кнопке Choose (Выбрать).
25. Перейдите к следующей строке в ячейке, нажав комбинацию клавиш (или на компьютерах Мае). Снова выберите файл flashtext.swf и повторите все действия, описанные в шагах 20-23, только выбирая на этот раз в наборе данных getProductDetails поле Product.
26. Перетаскивая любой из углов рамки поля, измените размер нижнего поля текста Flash так, чтобы оно было меньше верхнего. Установите выравнивание этих полей в ячейке по своему усмотрению.
27. Перейдите в панель Bindings и перетащите связь ProductDescription в нижнюю левую ячейку страницы.
28. Создайте на странице новый абзац, нажав клавишу (или на компьютерах Маc). Таким образом, текст описания продукта не будет выглядеть "обломком" Flash-текста.
29. Перетащите связь Description в левую нижнюю ячейку страницы.
30. Снова создайте на странице новый абзац.
31. Перетащите связь Price непосредственно под связь Description.
32. На панели Bindings, щелкнув на двунаправленной вертикальной стрелке, установите формат для связи Price в значение Currency, Dollar. Установите выравнивание для этой ячейки по вертикали в значение Тор.
33. Выделите всю таблицу в редактируемой области pageContent и добавьте реакцию сервера "повторяющейся области". В качестве имени введите getProductDetails и щелкните на кнопке ОК.
34. Сохраните полученную страницу (Рисунок 20.13).
Теперь можно осуществить предварительный просмотр только что созданной динамической страницы. Главным отличием между ней и страницей списка товаров является то, что при создании запроса используется идентификационный код товара (Рисунок 20.14). В данном случае странице в качестве параметра передается переменная ProductID.
Введите в текстовом поле ProductID=l и щелкните на кнопке Refresh (Обновить).
Только что с помощью всего трех Web-страниц вы создали целый динамический узел.

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

Рисунок 20.5. Создание текстового документа


4. Откройте панель Server Behaviors, выбрав сначала панель Application, а затем вкладку Server Behaviors. Щелкните на кнопке со знаком "плюс" и в предложенном списке выберите значение Recordset (Набор данных). Откроется диалоговое окно Recordset
5. В различные области этого диалогового окна следует ввести следующую информацию: Name (имя) — введите getProductType; Data Source (источник данных) — jct (Dreamweaver отобразит сообщение о том, что это предполагает использование схемы JCT, т.е. открытие всех таблиц в базе данных); Table (таблица) — Product Type; Columns (поля) — Аll.
6. Внизу диалогового окна вы увидите четыре вопроса о том, как вы хотите получать записи из базы данных. В окне Recordset установите фильтр следующим образом.
В списке Filter выберите значение ProductType.
В поле справа от списка Filter выберите знак равенства.
В списке под списком Filter выберите значение Entered Value (Введенное значение).
В списке, расположенном под предыдущим, введите слово Shoes.
Итак, мы установили параметры поиска в базе данных. Если вы следовали инструкциям по заполнению области ввода, то все сделанное можно описать одной простой фразой: "Если тип продукта есть "обувь", сделать нечто".
7. В окне Recordset (Рисунок 20.6) щелкните на кнопке ОК, и созданный запрос будет записан на страницу ColdFusion. Созданный набор данных теперь будет отображаться в списке Server Behaviors.
8. Следующий набор данных, который нам следует создать, будет более сложным. Щелкните на знаке "плюс" в панели Server Behaviors. Когда откроется окно Recordset, щелкните на кнопке Advanced. Откроется окно конфигурирования набора данных.
9. В текстовом поле Name введите productList. Из списка источников данных (Data Source) выберите jct. Система выведет сообщение о загрузке вышеуказанной схемы. Когда это сообщение закроется, в разделе Database Items в нижней части окна отобразится структура базы данных jet.
10. В области Database Items щелкните на знаке "плюс" (рядом со значком Table). Обратите внимание на то, что в базе данных JCT созданы две таблицы. Откройте таблицу Product, щелкнув на знаке "плюс" рядом с ее названием. В отобразившемся списке полей выберите ProductID и щелкните на кнопке SELECT. В области SQL окна Recordset отобразятся две строки запроса.

Страница готова к публикации

Рисунок 20.13. Страница готова к публикации

Связь Dreamweaver MX и ColdFusion MX

Связь Dreamweaver MX и ColdFusion MX


Благодаря включению приложения ColdFusion MX в PC-версию пакета MX Studio пользователи могут создавать динамические страницы даже без серьезных знаний Web-дизайна. Теперь динамические страницы можно создавать даже с помощью средств, установленных на личных компьютерах.

Связь с ColdFusion MX

Связь с ColdFusion MX


Предполагается, что вы уже ознакомились с основами создания динамических страниц, описанными в главе 6. Используя три страницы, созданные на основе шаблонов ColdFusion MX, в этой главе будет показано, как загрузить на них динамическое содержание из базы данных, создание которой также описывалось в главе 6.
Эта глава продолжает тему, начатую в предыдущей главе. В настоящей главе будет показан стиль работы, характерный для пакета Studio MX.
Если вспомнить, с чего начиналась Internet, то окажется, что она изначально создавалась как механизм передачи данных, позволяющий ученым обмениваться научными работами. Тогда Web представляла собой статичное информационное средство; для нее были характерны страницы, содержащие текст. Каждая страница была обособленной и не связывалась с другими страницами Web-узла. По мере роста популярности Web-пространства возникла потребность в совершенно ином, более современном механизме хранения информации. Результатом этого стал громоздкий и длительный процесс, основанный на постоянном обновлении и изменении страниц с целью внесения в них изменений, что привело к зарождению хранения информации в базах данных и представлению этой информации на динамических Web-узлах. Такие узлы были способны отображать критичное во времени содержание в формате, легком для понимания и оснащенном средствами навигации.
Необходимость соединения с базами данных привела к появлению в коллективе Web-разработчиков специалиста по базам данных, что можно считать знаковым явлением современной эпохи развития Web. Повсеместное засилье электронной коммерции и служб новостей, таких как CNN и ВВС, не могло бы стать явью без связи с базами данных.
Важность такой связи стала очевидной особенно после событий 11 сентября 2002 года, когда торговый центр в Нью-Йорке подвергся беспрецедентной террористической атаке. Поток запросов к узлу CNN был настолько велик, что привел к перегрузке серверов компании. Такая же участь постигла и других крупных средств массовой информации, присутствующих в Web-пространстве. Особенно знаменательным фактом в этом событии было то, что люди поняли, что в современном мире именно Internet становится первичным источником информации, ведется ли речь о новой кепке из магазина JCT или о видеорепортаже из горячей точки. И все это не было бы возможным без переноса информации из базы данных непосредственно на Web-страницу.
В этой главе вы узнаете, как поместить содержание Web-узла JCT в базу данных Microsoft Access и как извлечь его оттуда с помощью ColdFusion MX в заранее заготовленные в Fireworks MX редактируемые области шаблонов. Описываемый здесь процесс помещения информации в базу данных и ее извлечения на Web-узел не отличается от используемого такими крупными компаниями, как Amazon и CNN.

Связывание содержимого базы данных со страницей ColdFusion

Связывание содержимого базы данных со страницей ColdFusion


Добавив запросы к базе данных к тексту страницы, можно приступить к связыванию редактируемых областей шаблона с базой данных Access. Для этого нужно выполнить следующие действия.
1. Дважды щелкните на названии области productPict в шаблоне. Откроется диалоговое окно Select Image.
2. Щелкните на кнопке Data Source и разверните набор данных getProductType.
3. В открывшемся списке полей выберите GraphicURL и вставьте перед ним в текстовом поле префикса следующий путь: images /shoppingcart_iniages/.
4. Щелкните на кнопке ОК. Теперь рисунок на странице будет отражать рисунок текущей выбранной записи базы данных. На прототипе страницы данное поле отмечается значком молнии.
5. В представлении Code, в нижней части окна, выберите строку таблицы (дескриптор ). Выбранная строка будет подсвечена
6. Откройте панель Server Behaviors, щелкните на знаке "плюс" и в списке Behaviors выберите значение Repeated Region (Повторяющаяся область). Задайте в диалоговом окне Repeated Region для этого поведения имя getProductiype и диапазон All Records (Все записи), после чего щелкните на кнопке ОК.
7. Щелкните на кнопке Bindings (Связывание) и откройте список RecordSet (getProductType).
8. Выберите из этого списка поле Product Description и перетащите его на страницу рядом с рисунком productPict. Выделите рисунок ProductPict и в окне свойств установите для него выравнивание по левой границе (Align to Left) (Рисунок 20.9).

Текстовое поле Flash помещено

Рисунок 20.11. Текстовое поле Flash помещено в подобающее ему место. При этом его размеры были изменены


Связывание данных
Связывание данных (data binding), попросту говоря, является материалом баз данных, используемым на динамических страницах. Оно определяет источники содержания динамических элементов, содержащихся на странице.
Для того чтобы создать связывание данных для таблицы Product Listing, выполните следующие действия.
1. Откройте панель Bindings (Window=>Bindings) и раскройте список набора данных ProductList.
2. Перетащите поле Product в ячейку, расположенную под заголовком Product (Товар).
3. Поместив поле Product, его нужно связать со страницей описания товара. Выделите связанное поле Product и щелкните на значке папки в области Link окна свойств. Откроется диалоговое окно Select File.
4. Выберите файл productdetails. cfm и щелкните на кнопке Parameters. Откроется диалоговое окно Parameters.
5. В поле имени введите ProductID и нажмите клавишу табуляции, чтобы перейти в поле значения. Щелкните на значке молнии, чтобы открыть диалоговое окно Data Source (Источник данных). Теперь к полю Product применена ссылка.
6. Разверните набор данных productList, щелкните на поле ProductID и на кнопке ОК. В открывшемся диалоговом окне Select File щелкните на кнопке ОК.
7. Перетащите поле Description в ячейку под заголовком Description (Описание).
8. Перетащите поле Price в ячейку, расположенную под заголовком Price (Цена).
9. Открепите от границы панель Application, позволив ей свободно перемещаться по окну. Разверните панель Bindings, переместив ее правую границу вправо. Теперь перед вами откроется область форматирования, расположенная на этой панели.
10. Щелкните на ссылке Price, выделив ее. Установите для этого поля тип форматирования Currency, Dollar. Этот формат соответствует представлению цены в долларах и центах США.
11. Выделите левую нижнюю ячейку и выберите в меню команду Insertolmage. Откроется диалоговое окно Select Image Source (Выбор источника рисунка).
12. Щелкните на кнопке Data Source, и откроется диалоговое окно выбора источника данных.
13. Разверните набор данных productList и щелкните на поле GraphicURL. В текстовом поле URL введите префикс с путем к файлам— images/ shoppingcart_images/hitlist_images/.
14. Щелкните на кнопке ОК, и на странице отобразится динамическая область рисунка.
15. Выделите строку таблицы, содержащую связанные данные, откройте панель Server Behaviors и вставьте повторяющуюся область productList.
Перед тем как сделать созданную страницу серверным шаблоном, ее можно протестировать. Щелкните на значке молнии в верхней части страницы. На экране отобразится все, за исключением текста Flash. Это вполне нормально. Для того чтобы протестировать текст Flash, нажмите клавишу и просмотрите тестовую страницу в броузере.

Текстовое поле Flash помещено

Рисунок 20.11. Текстовое поле Flash помещено в подобающее ему место. При этом его размеры были изменены


Связывание данных
Связывание данных (data binding), попросту говоря, является материалом баз данных, используемым на динамических страницах. Оно определяет источники содержания динамических элементов, содержащихся на странице.
Для того чтобы создать связывание данных для таблицы Product Listing, выполните следующие действия.
1. Откройте панель Bindings (Window=>Bindings) и раскройте список набора данных ProductList.
2. Перетащите поле Product в ячейку, расположенную под заголовком Product (Товар).
3. Поместив поле Product, его нужно связать со страницей описания товара. Выделите связанное поле Product и щелкните на значке папки в области Link окна свойств. Откроется диалоговое окно Select File.
4. Выберите файл productdetails. cfm и щелкните на кнопке Parameters. Откроется диалоговое окно Parameters.
5. В поле имени введите ProductID и нажмите клавишу табуляции, чтобы перейти в поле значения. Щелкните на значке молнии, чтобы открыть диалоговое окно Data Source (Источник данных). Теперь к полю Product применена ссылка.
6. Разверните набор данных productList, щелкните на поле ProductID и на кнопке ОК. В открывшемся диалоговом окне Select File щелкните на кнопке ОК.
7. Перетащите поле Description в ячейку под заголовком Description (Описание).
8. Перетащите поле Price в ячейку, расположенную под заголовком Price (Цена).
9. Открепите от границы панель Application, позволив ей свободно перемещаться по окну. Разверните панель Bindings, переместив ее правую границу вправо. Теперь перед вами откроется область форматирования, расположенная на этой панели.
10. Щелкните на ссылке Price, выделив ее. Установите для этого поля тип форматирования Currency, Dollar. Этот формат соответствует представлению цены в долларах и центах США.
11. Выделите левую нижнюю ячейку и выберите в меню команду Insertolmage. Откроется диалоговое окно Select Image Source (Выбор источника рисунка).
12. Щелкните на кнопке Data Source, и откроется диалоговое окно выбора источника данных.
13. Разверните набор данных productList и щелкните на поле GraphicURL. В текстовом поле URL введите префикс с путем к файлам— images/ shoppingcart_images/hitlist_images/.
14. Щелкните на кнопке ОК, и на странице отобразится динамическая область рисунка.
15. Выделите строку таблицы, содержащую связанные данные, откройте панель Server Behaviors и вставьте повторяющуюся область productList.
Перед тем как сделать созданную страницу серверным шаблоном, ее можно протестировать. Щелкните на значке молнии в верхней части страницы. На экране отобразится все, за исключением текста Flash. Это вполне нормально. Для того чтобы протестировать текст Flash, нажмите клавишу и просмотрите тестовую страницу в броузере.

Теперь на странице отображается описание продукта

Рисунок 20.2. Теперь на странице отображается описание продукта

В базу данных введены дополнительные

Рисунок 20.4. В базу данных введены дополнительные товары. Обратите внимание на связь полей ProductTypelD в таблицах Product и ProductType

В таблицу Product было добавлено

Рисунок 20.1. В таблицу Product было добавлено новое поле для хранения имени файла рисунка


Добавив поле для имени файла рисунка, имеет смысл добавить также еще одно поле для хранения описания продукта, отображаемого под рисунком. Чтобы добавить поле для рисунка и описания в таблицу типов продукта, выполните следующие действия.
1. Откройте таблицу ProductType и перейдите в режим Design.
2. Добавьте новое поле, используя следующие значения.

Имя поля (Field Name) — GraphicURL (в этом поле будет храниться имя файла рисунка).

Тип данных (Data Type) — Text.

Разрешение нулевой длины (Allow Zero Length) — Yes.

3. Добавьте еще одно поле с другими данными.

Имя поля (Field Name) — ProductDescription (в этом поле будет храниться описание продукта).

Тип данных (Data Type) — Memo.

Разрешение нулевой длины (Allow Zero Length) —Yes.

После выполнения всех действий окно программы должно выглядеть так же, как на Рисунок 20.2.

4. Откройте представление Datasheet (View=>Datasheet View) для открытой таблицы и сохраните изменения.

В заполненной таблице ProductType

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


Теперь мы обеспечены достаточным количеством данных для создания в приложениях Dreamweaver MX и ColdFusion MX динамического узла. Сохраните изменения и закройте Access.

Для поля ProductDescription мы установили

Замечание

Для поля ProductDescription мы установили его тип в значение Memo. Поле Memo аналогично текстовому. Основным различием является то, что поле Memo имеет переменную длину и может хранить до 64000 символов, в то время как текстовое резервирует и сохраняет определенное при настройке базы данных фиксированное количество символов. В данном случае мы не знаем заранее длину поля описания продукта, поэтому используем поле типа Memo. Текстовое поле удобно использовать для информации заранее известного размера, например для "телефонных номеров или индексов городов.

Одна страница шаблона может служить

Замечание

Одна страница шаблона может служить для описания множества продуктов. Создание единого шаблона для нескольких страниц уже описывалось в главе 19, Преимущества данного метода заключаются в том, что компоновка выполняется всего один раз, и изменения, внесенные в шаблон, сразу же отражаются на всех страницах, созданных на его основе. Для того чтобы создать динамическую страницу средствами Dreamweaver MX и ColdFusion MX, выполните следующие действия.
1. Откройте Dreamweaver MX и создайте новый узел JCT Dynamic, использовав для его размещения подкаталог JCT site папки Chapter 20 Exercise рабочего стола.
2. Создайте новый текстовый документ, выбрав в меню пункт File=>New. Когда откроется диалоговое окно New Document, выберите раздел General. В нем в области Category выберите значение Other, а в области Other — значение Text (Рисунок 20.5). Щелкните на кнопке Create. Откроется пустая страница с цветной полоской вдоль левой границы. В этом типе документа может отображаться только текст.
3. Вначале поработаем с заранее подготовленной категорией продукции — обувью. Сохраним новый текстовый документ под именем shoes.сfm. При этом страница останется пустой страницей ColdFusion. На этой странице вы ничего не увидите, так как она создается исключительно для хранения программы ColdFusion. На этой странице будет храниться шаблон, содержащий компоновку динамического содержания.

в то время как сам

Замечание

Дескриптор мы поместили в разделе программы, в то время как сам шаблон productlist.cfm упоминается в разделе дизайна. Важно, чтобы этот дескриптор стоял именно в последней строке программы. В противном случае страница будет отображена еще до того, как для нее будут получены данные. Естественно, данные нужно получить в первую очередь.

Оптимизация рисунков и пакет Studio MX

Чтобы увидеть опорные точки рисунка

Рисунок 21.3. Чтобы увидеть опорные точки рисунка, лучше всего сбросить флажок Preview меню View и щелкнуть на объекте

Диалоговое окно Simplify используется

Рисунок 21.4. Диалоговое окно Simplify используется для удаления лишних точек и сглаживания рисунка


2. Для того чтобы удалить лишние точки, нужно проанализировать геометрию объекта. Например, большая гладкая кривая в верхней части объекта имеет шесть точек, хотя ей достаточно было бы и трех — в начале, в середине, где она изменяет направление, и в конце.
3. Существуют два способа удаления точек из объекта. Можно выбрать инструмент Subselect, щелкнуть на точке и нажать клавишу . Точка будет удалена, а линия переформируется в соответствии с новым составом опорных точек.
В качестве альтернативы можно выбрать в меню команду Modify=>Alter Palh=>Simplify. Откроется диалоговое окно Simplify (Упрощение), показанное на Рисунок 21.4. Перемещение ползунка вправо или влево увеличивает количество изменений, вносимых в выделенный рисунок. Щелкните на кнопке ОК, чтобы применить изменения. Если изменения слишком сильно повлияли на форму объекта, отмените их и снова откройте диалоговое окно Simplify.

Для получения этой разбивки Крис

Рисунок 21.10. Для получения этой разбивки Крис перетаскивал слайсы на отдельную страницу и перемещал их по ней


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

Гамма приемлемая для всех платформ в приложении Fireworks MX

Гамма, приемлемая для всех платформ, в приложении Fireworks MX


Наряду с возможностью предварительного просмотра файла перед его экспортом Fireworks MX позволяет увидеть, как этот файл будет выглядеть на различных платформах. Это выполняется за счет отображения яркости и гаммы монитора, принятой по умолчанию на другой платформе. Операционные системы семейства Windows используют установку гаммы, равную 2.2; платформа Macintosh —1.8. Результатом этого различия станет то, что рисунок на компьютере Мае будет выглядеть намного ярче, чем на компьютере PC. Просматривая чужую гамму, можно избежать потенциальных сюрпризов. Например, применяя на компьютере Мае гамму для Windows, можно обнаружить, что рисунок выглядит намного более темным, чем это планировалось.
Для того чтобы просмотреть гамму Мае на компьютере PC, выберите в меню пункт View=>Macintosh Gamma. Все четыре рисунка в окне 4-Up резко посветлеют. Снимите отметку Macintosh Gamma в окне просмотра. Для того чтобы просмотреть гамму PC на компьютере Macintosh, выберите в меню пункт View=>Windows Gamma. Все четыре рисунка в окне 4-Up резко потемнеют. Снимите отметку Windows Gamma в окне просмотра.
Будьте внимательны при просмотре гаммы других платформ. Самое лучшее, что может предложить приложение, — это аппроксимацию того, как рисунок будет выглядеть на другой платформе. Если вы почувствуете, что разница в отображении слишком велика, скорректируйте параметры яркости и контрастности в области Adjust Color раздела Effects окна свойств. Даже если вы внесете небольшие изменения, перед тем как продолжить работу, повторно сравните результат коррекции на обеих платформах.

Использование панели Optimize для растровой графики

Использование панели Optimize для растровой графики


Основные действия по оптимизации графики сконцентрированы на панели Optimize. Эта панель содержит все элементы управления, используемые для экспорта рисунка. Наибольшим ее достоинством является возможность сравнения различных настроек для принятия окончательного решения относительно качества рисунка до того, как он будет экспортирован.
Для того чтобы воспользоваться панелью Optimize, выполните следующие действия.
1. Откройте рисунок талисмана mascot, png из папки Chapter 21 Exercise. Когда отобразится рисунок, откройте панель Optimize в панели группировки. Если в панели группировки данной панели нет, выберите в меню пункт Window=>Optimize или нажмите клавишу .
2. Щелкните на вкладке 4-Up в верхней части окна Document. Рабочая область разобьется на четыре панели, содержащие рисунок талисмана. Каждая из панелей позволяет установить индивидуальные параметры оптимизации для рисунка, содержащегося в ней. Также можно перемещать рисунки внутри панелей для сравнения различных областей рисунка.
3. Поместите курсор на панель, содержащую исходный рисунок. (Обычно для этого выбирается левый верхний фрагмент окна.) Нажмите клавишу пробела и сместите мышью рисунок так, чтобы фрагмент на панели содержал лицо талисмана. При этом будут одновременно смещаться рисунки и на других панелях.
4. Выберите лупу в нижней части панели инструментов, поместите ее над носом талисмана и щелкните один раз мышью. Во всех рисунках на панелях выбранный фрагмент будет увеличен.
5. Оставив выбранной лупу, нажав и удерживая клавишу , щелкните дважды на этой же панели. Изображения на всех панелях отдалятся.
6. Выберите на панели инструментов значок указателя (или нажмите клавишу ). Выберите рисунок на панели, расположенной под исходным изображением. Вокруг выбранной панели появится рамка, указывающая на активный рисунок.
7. На панели Optimize установите следующие параметры:
Web File Format — GIF;
Indexed Palette - WebSnap Adaptive;
Colors — 64;
Loss - 0;
Dither-0%;
Transparency — No Transparency.
Информация под рисунком изменится. В данном случае размер рисунка составит 30,84 Кбайт, что при скорости соединения 56 Кбит/с обеспечит его загрузку примерно за 4 секунды. Также в нижней части панели отобразятся все выбранные на панели оптимизации значения параметров.
8. Выберите рисунок справа от панели с исходным изображением. Для него на панели Optimize установите следующие параметры:
Web File Format - GIF;
Indexed Palette - WebSnap Adaptive;
Colors-25 6;
Loss - 0;
Dither - 0%;
Transparency — No Transparency.
Обратите внимание, что размер файла увеличился в связи с увеличением количества цветов в рисунке. При этом также удвоилось время его загрузки.
9. Выделите оставшуюся панель. Для нее установите следующие параметры оптимизации:
Web File Format - GIF;
Indexed Palette — webSnap Adaptive;
Colors-128;
Loss — 0;
Dither-0%;
Transparency — No Transparency.
Обратите внимание, что размер файла теперь равен разности размеров для вариантов с 64 и 256 цветами. Разница во времени загрузки рисунков с 256 и 128 цветами совсем незначительна.
Если говорить о качестве рисунков, то разница между ними заметна. Приблизьте лицо талисмана, как показано на Рисунок 21.7, и сравните область тени с правой стороны лица. Можно сделать следующий вывод: при уменьшении количества цветов уменьшается и детализация. Если бы палитра состояла из 64 цветов, то результат получился бы вообще неудовлетворительный. Таким образом, предстоит сделать выбор между 128 и 256 цветами. Решение в этом вопросе целиком субъективно, значит, можно выбрать то, которые вам больше понравится.

Использование различных форматов

Использование различных форматов файлов для уменьшения их размеров


Существует еще один метод уменьшения размера файла во FreeHand. Сохраните файл в формате, занимающем меньше места. Двумя самыми лучшими форматами являются GIF и PNG.
Если рисунок FreeHand сохраняется в формате PNG, имейте в виду, что векторы не будут доступны в Fireworks. FreeHand конвертирует файл в растровый рисунок PNG. Если вам все же нужно продолжать работать с векторами, используйте способ перетаскивания или импорта рисунка, которые уже были описаны в этой книге.
Для того чтобы конвертировать файл FreeHand в формат PNG, выполните следующее.
1. Выберите в меню пункт File=>Export, чтобы открыть диалоговое окно экспорта.
2. Из списка типов файлов (Save as File Type) выберите формат .png, после чего введите имя файла.
3. Укажите для файла его место размещения и щелкните на кнопке ОК.

Изменение пространства цветов во FreeHand

Изменение пространства цветов во FreeHand


Вы, вероятно, уже сталкивались со следующей ситуацией: в компанию приходит клиент и приносит компакт-диск с логотипами и иллюстрациями из печатной брошюры, и просит разместить их на его Web-узле.
Проблема обычно заключается в следующем: файл размером 500-750 Кбайт слишком велик для Web-пространства.
Самый быстрый способ уменьшить размер файла — это изменить его пространство цветов. Допустим, что устройством вывода Web-информации является обычный монитор. Для отображения изображения на экране монитора обычно использует цветовую схему, использующую всего три цвета — красный, зеленый и синий (RGB). FreeHand, уходя своими корнями в область полиграфии, использует четыре цвета — циан, магента, желтый и черный (CMYK). To, что представлено в пространстве цветов CMYK, предназначено для печати на бумаге. Простое преобразование цветовой схемы из CMYK в RGB уменьшает размер файла приблизительно на 25%, так как для представления информации требуется уже на один канал меньше.
Для того чтобы изменить пространство цветов рисунка FreeHand, выполните следующие действия.
1. Скопируйте папку Chapter 21 Exercise с Web-узла книги на свой рабочий стол. Откройте в этой папке файл LogoPrint.
2. Рисунок выглядит вполне приемлемым. Но это не совсем так: дизайнер для цветов использовал Pantones. Щелкните на значке градиента и откройте панель заполнения Fill. Обратите внимание на цвета линейного градиента в нижней части этой панели.
3. Щелкните на желтом значке. Откроется панель Swatches, отобразив цвета, используемые в рисунке. Поместите курсор над желтым образцом, и вы получите информацию о том, что он представляет собой Pantone Process Yellow CVC (Рисунок 21.1).
4. Щелкните в меню Swatch и выберите пункт Color Cube. Откроется панель RGS/Hex Swatch, используемая в приложениях MX Studio. Выберите желтый цвет (FFFF00).H щелкните на нем. При этом цвет Pantone изменится на цвет RGB.
5. Откройте снова панель Swatches и перетащите желтый цвет градиента из панели Fill на панель Swatches. Когда вы увидите маленький знак "плюс" под данным цветом, отпустите кнопку мыши. Теперь новый RGB-цвет добавлен на панель Swatch.
6. Нам больше не нужен цвет Pantone Yellow. Выделите его на панели Swatches, после чего выберите пункт Remove из списка Options. После этого панель Swatches будет выглядеть так же, как на Рисунок 21.2.

Экспорт из представлений 2Up и 4Up

Экспорт из представлений 2-Up и 4-Up

Получив четыре наилучших набора установок оптимизации, я тщательно изучил каждый из них, стремясь найти тот, который реализует наилучший баланс между качеством и скоростью. И я его нашел и выделил.
После того как я остановился на своем выборе, я щелкнул на вкладке Preview окна документа и посмотрел на полноэкранное изображение выбранного варианта, Я снова изучил рисунок на предмет его соответствия моим критериям качества и скорости, после чего принял окончательное решение.
После этого я открыл диалоговое окно Export Preview (File=>Export Preview). Это окно предоставляет последнюю возможность проанализировать рисунок перед его экспортом. Здесь можно обрезать изображение, применить прозрачный фон и уменьшить количество используемых цветов. Как правило, эти возможности я игнорирую и щелкаю на кнопке Export, чтобы открыть диалоговое окно экспорта.

Крис о форматах jpg и gif

Крис о форматах .jpg и .gif

Считается, что стандартом для сжатия фотографий является формат JPG. Как уже говорилось в этой главе, данный выбор был сделан в основном из-за того, что в этом формате сохраняются все оттенки и полутона.
Фотография, оптимизированная в формат GIF, приведет к нестандартным результатам в связи с потерей существенных деталей. Растровая графика (или, в данном случае, рисунок талисмана для Web-узла JCT) хорошо оптимизируется в формат GIF благодаря тому, что все большие области рисунка закрашены монотонно.
Естественно, следует обратиться и к опыту Web-дизайнеров. Все мы имеем собственные мнения относительно оптимизации. Однако все они основываются на поддержании баланса между качеством изображения и скоростью его загрузки.

Логотип составлен из цветов Pantone

Рисунок 21.1. Логотип составлен из цветов Pantone, которые используются для публикации печатной продукции, но не для Web-дизайна

На попет Objects диалогового окна

Рисунок 21.5. На попет Objects диалогового окна Preferences приложения FreeHand можно установить внешние редакторы для множества форматов файлов

Никогда не сжимайте уже сжатые

Рисунок 21.8. Никогда не сжимайте уже сжатые изображения jpg. Искажение изображения будет не столь значительным, если сжатие применяется впервые


5. Закройте рисунок и не сохраняйте изменения. Для проверки эффекта повторного сжатия уже сжатого файла откройте файл Obatanga. jpg из папки Chapter 21 Exercise.
6. После того как рисунок откроется, измените представление на 4-Up и установите параметр качества для трех панелей соответственно в70%, 60%и40%.
Небо в верхнем левом углу (см. Рисунок 21.7) начало искажаться уже при 70%. При 60% повысилась зернистость рисунка, а при 40% его можно просто выбросить из-за его полной неприглядности.

Оптимизация панели навигации Webузла JCT

Оптимизация панели навигации Web-узла JCT


Мы завершаем эту главу сведением воедино множества концепций, представленных в ней и в главах 9 и 11. Вместо того чтобы оформить выводы как общее руководство (How-To), мы решили предоставить слово нашему художнику Крису Флику. Поэтому речь далее, в основном, будет вестись от его имени. Он сделает экскурс по всем стадиям процесса фрагментации и оптимизации изображения.
В рассматриваемом примере будут обсуждаться не только общие вопросы создания слайсов (slice) панели навигации. В нем автор поделится с вами своим опытом, накопленным за многие годы работы. В этом обсуждении Крис подчеркнет некоторые функции Fireworks MX, которые сделают вашу работу с ним более продуктивной.
Начнем мы обсуждение с того момента, когда команда получила утверждение клиентом работы, показанной на Рисунок 21.9. С этой точки и начинается описание стратегии создания и оптимизации слайсов, а также их подготовки к сборке в Dreamweaver MX.

Оптимизация рисунков и пакет Studio MX

Оптимизация рисунков и пакет Studio MX


Сегодня перемещение по Web-пространству так же естественно для конечного пользователя, как и пользование телефоном или телевизором. Однако при этом от пользователя остается скрытой та часть работы (о которой велась речь в этой книге), которая касается работоспособности Web-узла на различных используемых , сегодня платформах.
Исключением из этого правила не является и адаптация рисунков к работе на различных платформах. Оказывается, что не все пользователи смогут увидеть созданные вами прекрасные рисунки. И здесь не поможет то, что вы ограничились всего тремя основными графическими форматами: GIF, JPG и PNG. Даже в этом случае только форматы GIF и JPG будут приемлемыми для всех. Формат PNG появился слишком поздно, и станет общепризнанным только после того, как вышедшие до его появления броузеры будут выброшены на свалку истории Internet. К тому же формат PNG может получить не столь широкого распространения по той причине, что в нем сохраняется информация, доступная только в приложении Fireworks MX, такая как векторы и дополнения, связанные с ними.
Web-дизайнеры не могут оставаться безучастными и к тому факту, что среднестатистический пользователь Internet использует до сих пор коммутируемые соединения на скорости 28,8 Кбит/с. Для Internet это бесконечно медленная скорость, которую можно сравнить разве что с фонтаном, подключенным к пожарному шлангу. Обнадеживающей тенденцией является рост подключений по протоколу DSL (Digital Subscriber Line), пo кабельным сетям телевидения и прочим быстродействующим каналам. Через некоторое время такие соединения повысят среднестатистическую скорость.
Если вы имеете в своем распоряжении два вышеуказанных формата в условиях низкой пропускной способности, то работа по оптимизации рисунков становится особенно критичной. Чтобы ваш рисунок смогли увидеть все, его нужно сохранить в подходящем формате, после чего добиться наименьшего из возможных размеров файла.
В этой главе мы рассмотрим средства оптимизации, содержащиеся во FreeHand и в Fireworks MX. После этого мы пройдем все шаги оптимизации на примере панели навигации Web-узла JCT. Лейтмотивом в тексте этой главы проходит мысль: "Добивайся меньшего размера".

Оптимизация рисунков JPG

Оптимизация рисунков JPG


При оптимизации рисунков GIF мы уменьшаем размер файла за счет сокращения количества используемых цветов. Сжатие JPG действует более грубо. Оно базируется на удалении информации об отдельных пикселях, основываясь на установленном пользователем значении качества, и называется сжатием с потерей качества (lossy).
И все же, при работе с фотографиями лучше использовать именно такое сжатие. Причина заключается в том, что изображения JPG способны отображать больше 16 миллионов цветов, что позволит передать все оттенки на фотографии. Это хорошо. А плохо то, что в отличие от рисунков GIF здесь не могут существовать области прозрачности. Например, если для рисунка требуется прозрачный фон, единственным вариантом выбора будет формат GIF.
Формат также является критичным вопросом, когда речь заходит об использовании рисунков JPG во Flash: При создании Flash-файла SWF, содержащего фотографии, последние сжимаются в формат JPG. Повторное сжатие ранее сжатых файлов является фатальной ошибкой. Качество такого рисунка экспоненциально падает. Если рисунок предназначен для использования во Flash MX, установите качество рисунка в Fireworks MX в 100% (т.е. отсутствие сжатия). Пусть Flash MX самостоятельно выполняет нужное сжатие. Вот почему, получая от клиентов фотографии для узла, требуйте от них предоставления их в формате TIF. Этот формат не использует сжатия, при этом работу по сжатию вы сможете выполнить сами, учитывая все факторы, влияющие на снижение качества изображений.
Если рисунок должен быть видимым при загрузке, его следует сохранять в Fireworks MX как файл Progressive . jpg. И даже в этом случае нельзя гарантировать, что Internet Explorer клиента будет совместимым с этим форматом. Если это не так, данный файл будет расцениваться как обычный JPG и соответствующим образом отображаться на экране.
Для того чтобы сжать фотографию в формат JPG, выполните следующие действия.
1. Откройте файл Obatanga.tif из папки Chapter 21 Exercise в Fireworks MX. Щелкните в окне Document на кнопке 4-Up, чтобы отобразить рисунок на четырех панелях. Откройте панель Optimize.
2. Выделите панель под исходным рисунком и установите на панели Optimize следующие параметры:
Export File Format — JPEG;
Quality- 100%.
При этом размер файла уменьшится с 900 до 118 Кбайт.
3. Выделите панель справа от исходного изображения. Установите на панели Optimize следующие параметры:
Export File Format — JPEG;
Quality-50%.
Файл уменьшился почти на 900 Кбайт. Обратите внимание, что левый верхний угол фотографии приобрел зернистость и на нем появились чужеродные элементы (artitact) (Рисунок 21.8). Это — первый признак искажения данных.
4. Выделите оставшуюся панель и установите следующие параметры:
Export File Format - JPEG;
Quality-30%.
Теперь размер файла уменьшился еще больше и составляет меньше 10 Кбайт. К сожалению, рисунок стал очень зернистым и наполнился искажениями. При использовании указанных параметров при экспорте рисунок будет "мертворожденным".

Оптимизация рисунков не разбитых на слайсы

Оптимизация рисунков, не разбитых на слайсы

Не все рисунки, с которыми мне приходилось работать, были разбиты на слайсы. В этом случае я открывал панель Optimize, после выбирал представление 4-Up (Рисунок 21.15). Прелесть этого представления заключается в том, что можно сравнивать качество рисунков при различных настройках. После того как был выбран наилучший из возможных вариантов (т.е. обеспечивающий наилучшее качество при наименьшем времени загрузки), можно заняться его экспортом.
Щелкните на любой из панелей Preview (какая именно панель выбрана, можно узнать по синему контуру, обрамляющему слайс). В данном случае меня заинтересовал второй слайс. Об этом изображении я узнал следующую важную информацию,

Это — документ .gif.

Его текущий размер — 49,30 Кбайт.

Если загружать его через модем со скоростью 56 Кбит/с, то загрузка займет 7 секунд.

В палитре Adaptive он имеет 0% зернистости (dither).

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

Оптимизация рисунков в Fireworks MX

Оптимизация рисунков в Fireworks MX


Процесс оптимизации рисунков подразумевает поддержание баланса между качеством рисунков и размером файла. С повышением качества изображения размер файла увеличивается. И наоборот, с уменьшением размера файла качество падает. К счастью, приложение Fireworks MX значительно упрощает вашу работу.
Ниже приведены советы, которыми можно воспользоваться при оптимизации рисунка для размещения в Web.

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

Используйте тот формат файла, который лучше всего подойдет для конечного предназначения рисунка. Для фотографий используйте формат JPG, а для растровой графики — GIF.

Удалите все цвета, которые не используются в рисунке. Чем меньше набор цветов, тем меньше размер файла.

При создании рисунков в формате JPG обратите внимание на ползунок качества. С уменьшением показателя качества уменьшается размер файла, но одновременно увеличивается уровень искажения рисунка.

Оптимизация рисунков в формат GIF

Оптимизация рисунков в формат GIF


Самым простым способом оптимизации рисунков для применения сжатия GIF является включение в них как можно большего количества областей, окрашенных монотонно. Если при переходе от одного пикселя к другому цвет изменяется, сжатие не принесет желаемого эффекта. Это и является причиной того, что большинство рисунков GIF не имеет переходных полутонов. Применение градиента автоматически увеличивает размер файла. Вот почему большие области нашего GIF-рисунка талисмана (брюки, тенниска, волосы и кепка) окрашены в монотонные цвета.
Одним из способов подготовки рисунка для перевода в формат GIF является монотонное закрашивание преимущественно горизонтальных областей, а не вертикальных. Это вызвано идеологией метода, которым выполняется сжатие GIF. Пиксели считываются и сжимаются по горизонтальным строкам, слева направо. Подумайте, что более эффективно: чтение каждого синего пикселя на области брюк и запоминание его координат или замена всего этого одной строкой кода, сообщающей, что "здесь размещено 600 синих пикселей"?
Еще одной техникой подготовки рисунка для сжатия GIF является удаление "висячих" пикселей. Их можно не заметить, если просматривать рисунок в масштабе 100%. Однако при приближении изображения можно заметить на фоне сплошного тонирования отдельные небольшие области из нескольких пикселей, отличающихся от соседей на пару полутонов. Чаще всего такие пиксели появляются, если клиент перед передачей вам компакт-диска с растровой графикой конвертировал ее в формат JPG. Конечно, клиент думает, что оказал вашей компании услугу и облегчил вам работу. Но это далеко не так.
Для того чтобы удалить "висячие" пиксели, выполните следующие действия.
1. Откройте рисунок, выберите инструмент лупы, приблизьте любую область на рисунке и поищите скопление неоднородных пикселей на монотонно закрашенных областях.
2. Найдя такое скопление, выберите на панели инструментов инструмент Eyedropper. Выбрав захват цвета (Stroke Swatch) на панели инструментов или
в окне свойств, щелкните на монотонно закрашенном участке выбранной области. Этот цвет будет принят как основной.
3. Выберите инструмент Pencil (Карандаш). В зависимости от увеличения, установите диаметр карандаша 1-2 пикселя. Щелкните на инородной области и замените ее пиксели основным цветом.

Оптимизация рисунков во FreeHand

Оптимизация рисунков во FreeHand


Учитывая то, что FreeHand предназначена для работы с векторной графикой, у читателя может сложиться ошибочное мнение, что созданные в нем рисунки не нуждаются в оптимизации. На самом деле, если вы создавали рисунки для печати, оптимизацией вы занимались всегда. Векторная графика, прежде чем быть конвертированной в матрицу печати, преобразовывается в растр посредством Raster Image Processor (RIP). Для того чтобы время обработки этим процессором было минимальным, художники были вынуждены удалять векторные точки и сглаживать линии, уменьшая, таким образом, сложность файла. Тот же подход применим и в отношении Web.
Ключом к уменьшению размера файла служит учет ограничений, налагаемых пропускной способностью каналов доступа в Internet, и упрощение рисунков, сокращающее время обработки рисунков на компьютере пользователя.

Оптимизация слайсов

Оптимизация слайсов


После того как созданы слайсы, их нужно оптимизировать для Web. Когда речь заходит об оптимизации, ее цель можно выразить очень просто: "Получить самое высокое качество изображения при минимально возможном размере файла". В идеальном мире можно было бы не заботиться о размере и добиться максимального качества. Однако при наличии известных ограничений, связанных с пропускной способностью каналов, пользователи такой подход просто не поймут. Им нужно одно — чтобы страница загружалась максимально быстро.
Для достижения поставленной цели можно воспользоваться панелью Optimize (Рисунок 21.12), которая представляет неоценимую возможность просматривать результат принятых решений, не влияния на сам рисунок.
Обратим сейчас внимание на одно существенное изменение. В версии Fireworks MX в нижней части панели Optimize появилась кнопка Rebuild (Перестроить). После щелчка на ней будет перестроена таблица цветов рисунка, при этом цвета отобразятся в палитре экспорта документа. Эта кнопка должна была находиться в верхней части раздела Color Table. Сама команда Color Table была удалена из текущей версии приложения, а ее различные подкоманды и функции были встроены в панель Optimize.

Оптимизация векторов во FreeHand

Оптимизация векторов во FreeHand


Упрощенно говоря, векторная графика состоит из прямых и кривых линий, которые соединяют статичные точки объекта. Направляющие точки вносят кошмар в ваше существование, поскольку чем больше их содержит рисунок, тем большая вычислительная мощность требуется от процессора компьютера пользователя. Это происходит потому, что линии, соединяющие точки, являются результатом математических вычислений.
Компьютер должен идентифицировать каждую из опорных точек, выполнить математические операции, после чего сформировать линию. Поэтому векторные рисунки должны содержать как можно меньше таких точек.
Чтобы оптимизировать векторный объект, выполните следующие действия.
1. Откройте файл LogoPrint и в меню View снимите флажок предварительного просмотра (Preview). После этого на рисунке останутся только линии, составляющие форму рисунка. Щелкните на объекте градиента. На рисунке станут видны опорные точки (Рисунок 21.3).

Панель Optimize можно использовать

Рисунок 21.13. Панель Optimize можно использовать для оптимизации отдельных слайсов, используя для каждого из них разные уровни сжатия

Панель Optimize можно также использовать

Рисунок 21.14. Панель Optimize можно также использовать для оптимизации всех слайсов одновременно, используя для них одинаковые уровни сжатия

Alt. Позволяет задать для графики альтернативное имя.

Target. Позволяет управлять действиями JavaScript данного рисунка.

Каждый из слайсов можно экспортировать индивидуально, используя при этом для задания .свойств каждого из слайсов окно свойств. Когда все слайсы оптимизированы и все свойства установлены, можно выбрать пункт меню File=>Export. Когда откроется диалоговое окно, убедитесь, что установлен флажок Selected Slices Only (Только выбранные слайсы). После этого выберите папку, в которую будут помещены выбранные слайсы, и щелкните на кнопке Export.

Панель Optimize позволяет оптимизировать

Рисунок 21.12. Панель Optimize позволяет оптимизировать различные слайсы панели навигации


Окно Optimize позволяет подойти к задаче оптимизации двумя путями. Можно оптимизировать отдельные слайсы, как показано на Рисунок 21.13. Это позволит применить к каждому из них собственные настройки оптимизации. Достоинством такого подхода является то, что слайсы, содержащие большие области монотонных цветов, могут иметь большее сжатие.
Также можно выбрать несколько слайсов (Рисунок 21.14) и применить к ним всем одинаковые параметры оптимизации. Преимуществом этого подхода является равномерность сжатия во всем множестве слайсов.
Панель Optimize также позволяет легко переключать настройки и форматы файлов оптимизированных рисунков. Для этого нужно выделить слайс и выполнить соответствующие корректировки на панели Optimize.
Одним из самых заметных изменений в Fireworks MX стало удаление окна палитры Objects. Теперь все параметры оптимизации отображаются в окне Property. Щелкните на любом слайсе, и параметры окна свойств изменятся, отображая все объекты прежней оптимизации, в том числе Alt, Link и Target.
Все перечисленные ниже параметры остались на месте.

Туре. Указывает на тип выделения (текст HTML или рисунок).

Color Box. Позволяет изменить цвет выделенного слайса.

Clamp Tool. Показывает, какой тип сжатия применен к данному рисунку.

Link. Позволяет установить ссылку на адрес URL, вызываемый после щелчка на данном рисунке.

После запуска Fireworks из FreeHand

Рисунок 21.6. После запуска Fireworks из FreeHand красный фон рисунка был удален

Представление 4Up позволяет экспериментировать

Рисунок 21.15. Представление 4-Up позволяет экспериментировать с настройками оптимизации и выбрать вариант, обеспечивающий наилучшее качество и наименьшее время загрузки


Оптимизация — это искусство компромисса. И это было показано на примере оптимизации рисунков в приложениях FreeHand и Fireworks MX.
Во FreeHand размер файла уменьшался после преобразования пространства цветов CMYK в RGB. Было также показано, как оптимизировать рисунки, удаляя лишние и "висячие" точки. В дополнение было показано, как отредактировать документ Fireworks, помещенный в Fire Works, не выходя из последнего. Раздел, посвященный FreeHand, мы завершили описанием экспортирования рисунка в форматы GIF и PNG и рассказали, как можно немедленно после экспорта вызвать на выполнение приложение Fireworks.
Формат GIF является одним из двух возможных вариантов сохранения рисунков в Web. Было показано, как использовать панель Optimize и представление 4-Up окна документа для применения различных параметров оптимизации и одновременного сравнения результатов. Используя эти техники, мы смогли найти наилучший баланс между временем загрузки и качеством изображения. Было также показано, как проверить отображение рисунка на платформах PC и Маc.
После этого описывался процесс создания рисунка JPG. При этом использовались панели просмотра для сравнения времени загрузки и качества при различных показателях качества JPG на панели Optimize. Объяснялось, почему нельзя применять повторное сжатие JPG к рисунку JPG.
Завершил эту главу Крис Флик, который поделился своим опытом фрагментации и оптимизации панели навигации Web-узла JCT. Он также рассказал, как создавать слайсы, используя guide, инструменты Slice, Pen и контуры. Кроме того, он рассказал об экспорте содержимого одной из панелей просмотра представления 4-Up рабочей области приложения Fireworks MX.
Изучив методы оптимизации визуальных элементов Web-страницы, нужно также ознакомиться с оптимизацией невизуальных элементов. В следующей главе мы обсудим ряд способов оптимизации программ, управляющих работой Web-страниц.

При уменьшении палитры цветов

Рисунок 21.7. При уменьшении палитры цветов формата GIF с 256 до 64 цветов качество рисунка заметно ухудшается

Цвет RGB/HEX yellow

Рисунок 21. 2. Цвет RGB/HEX yellow добавлен на панель Swatches, а цвет Pantone Yellow удален

Слайсы созданные с помощью инструмента Slice

Рисунок 21.11. Слайсы, созданные с помощью инструмента Slice


Еще одним хорошим инструментом для разбивки рисунка на слайсы является Polygon Slicing. Его можно выбрать, удерживая нажатой кнопку инструмента Slice и выбирая Polygon Slicing из предлагаемого списка. Этот инструмент хорош для выделения слайсов нерегулярного рисунка. Например, если бы было желание использовать слайсы талисмана JCT для перекрытия рисунков (т.е. для формирования элементов навигации), но при этом не хотелось бы разбивать его на массу "кирпичиков", можно было бы воспользоваться именно этим инструментом.
Если речь идет о точных слайсах, не забывайте, что можно нарисовать контур вокруг объекта нерегулярной формы с помощью обычного инструмента Реп. При этом будет создана векторная граница вокруг выбранного объекта. После этого можно выбрать пункт меню Edit=>Insert=>Hotspot и конвертировать выделенную область в слайс, выбрав в меню команду Edit=>Insert=>Slice.

с другими точками. Если рисунок

Совет

Хорошей практикой является идентификация и удаление на рисунке "висячих" точек, т.е. тех, которые не связаны с другими точками. Если рисунок предназначен для размещения на Web-странице, эти точки будут перемещаться вместе с рисунком, загружая пропускную способность канала и увеличивая время обработки рисунка.

Если вы хотите после сохранения

Совет

Если вы хотите после сохранения файла PNG сразу запустить приложение Fireworks, 1 установите в диалоговом окне флажок Open in External Application. После того как вы щелкнете на кнопке OK, FreeHand обратится к списку внешних редакторов, перечисленных в диалоговом окне Preferences, найдет там соответствие формата PNG прилов жению Fireworks MX и запустит его на выполнение. Для того чтобы конвертировать файл FreeHand в формат GIF, выполните следующие действия.
1. Выберите в меню пункт File=>Export. Откроется диалоговое окно экспорта.
2. Из списка типов файлов выберите формат .gif, после чего введите имя файла.
3. Укажите для файла его место размещения и щелкните на кнопке ОК.
Если после выполнения этих действий вы посмотрите на размеры всех файлов, окажется, что исходный документ FreeHand занимает 20 Кбайт, документ PNG — 8 Кбайт, а файл GIF — всего 4 Кбайт.

Создание слайсов

Создание слайсов


Теперь, когда окончательный вариант панели навигации Web-узла JCT утвержден заказчиком, будут даны рекомендации по разбитию его на отдельные слайсы. Основная цель сводится к тому, чтобы количество слайсов было минимальным. При этом каждый из слайсов в верхней части рисунка (имеются в виду названия групп товаров) должен оставаться способным принять поведение, применяемое к нему в Dreamweaver MX.
Оказалось, что для этой задачи вполне подходит инструмент Slice, однако он не дает достаточной точности и свободы действий, которые можно получить при переносе отдельных слайсов на страницу вручную. Применяя такой подход, можно визуально разбить рисунок и выявить потенциальные проблемы, такие как маленькие области букв или рисунков, появляющиеся одновременно на двух различных слайсах. Окончательный порядок полученных слайсов показан на Рисунок 21.10.

Связь между приложениями Freehand и Fireworks

Связь между приложениями Freehand и Fireworks


Из этой книги вы уже узнали множество способов перемещения рисунка FreeHand в Fireworks. Существует также и способ вызова Fireworks из FreeHand для редактирования рисунка в формате PNG или рисунка в формате GIF, который был создан в Fireworks.
Для того чтобы отредактировать рисунок Fireworks во FreeHand, выполните следующие действия.
1. Откройте пустой документ FreeHand. Выберите в меню Edit=>Preferences, чтобы открыть диалоговое окно предпочтений. Выберите в этом окне вкладку Object.
2. В разделе External Editors (Внешние редакторы) этой вкладки в списке Object выберите тип PNG Image. Из списка редакторов (Editor) выберите Fireworks MX. Если в этом списке нет приложения Fireworks MX, щелкните на кнопке Browse, после чего в диалоговом окне Choose an External Editor укажите местонахождение исполняемого файла этого приложения и щелкните на кнопке ОК (Рисунок 21.5).
3. Повторите шаг 2, на этот раз указав внешний редактор Fireworks MX для другого формата файлов — GIF.
4. Выберите команду меню File=>Import и импортируйте файл Logo.png из папки Chapter 21 Exercise в документ. Когда курсор изменит свой вид, щелкните мышью один раз. Логотип вместе с красным фоном переместится на страницу.
5. Щелкните правой кнопкой мыши (или <Сontrol+щелчок> — на компьютерах Мае) на рисунке. Из открывшегося контекстного меню выберите пункт External Editor. В открывшемся окне предупреждения Launch Edit щелкните на кнопке ОК.
6. Откроется окно предупреждения Editing in Progress (Идет процесс редактирования). Пока ничего не предпринимайте, позволив загрузиться Fireworks.
7. Когда рисунок откроется в Fireworks, установите белый цвет рабочей области (фона). Сохраните рисунок и закройте Fireworks MX.
8. На странице FreeHand отобразится рисунок логотипа, но уже на белом фоне (Рисунок 21.6). Щелкните на кнопке Done в диалоговом окне Editing Progress, после чего изменения сохранятся.

Утвержденный рисунок готов к оптимизации

Рисунок 21.9. Утвержденный рисунок готов к оптимизации

Для удаления точек обычно используют

Замечание

Для удаления точек обычно используют оба метода.

Оптимизация узла и программ

Диалоговое окно Clean Up HTML/XHTML

Рисунок 22.5. Диалоговое окно Clean Up HTML/XHTML можно использовать для уменьшения размеров файла страницы и повышения эффективности программы HTML

Если вы обновите таблицу стилей

Рисунок 22.2. Если вы обновите таблицу стилей, эти изменения коснутся всех страниц узла, ее использующих


12. Сохраните шаблон. Если в шаблон были внесены какие-либо изменения, откроется диалоговое окно Update Template (Рисунок 22.2). Это диалоговое окно можно использовать для обновления страниц узла, использующих данный шаблон.
13. Щелкните на кнопке Update. Откроется диалоговое окно Update Pages (Рисунок 22.3). В нем отобразится протокол изменений, внесенных на отдельных страницах.
Как мы видим, группировка общих элементов разных страниц, таких как стили, дает очевидные преимущества. Главным из них является уменьшение времени загрузки страниц. Групповые элементы, такие как стили, кэшируются, поэтому необходимость в их повторной загрузке с сервера отпадает. Вторым достоинством является упрощение обслуживания. Если нужно изменить стиль, это нужно сделать всего в одном месте, а не на всех страницах узла.

Использование BBEdit

Использование BBEdit

Существует множество версий этого известного редактора HTML для компьютеров Macintosh. Чтобы использовать любую из них, выполните следующие действия.
1. Откройте приложение BBEdit с помощью команды меню Edit=>Edit with BBEdit.
2. Внесите в текст программы изменения или дополнения.
3. Щелкните на кнопке Dreamweaver панели инструментов редактора, чтобы вернуться в Dreamweaver MX.

Использование HomeSite Plus

Использование HomeSite Plus

При установке приложения HomeSite Plus оно автоматически интегрируется в Dreamweaver MX. Чтобы воспользоваться этим приложением, выполните следующие действия.
1. Откроите приложение HomeSite с помощью команды меню Edit=> Edit with HomeSite.
2. Введите текст программы или внесите в него изменения. Сохраните изменения.
3. Для того чтобы вернуться в Dreamweaver MX, на панели редактора щелкните на кнопке Dreanweaver/UltraDev.

Использование внешних редакторов программ с Dreamweaver MX

Использование внешних редакторов программ с Dreamweaver MX


Dreamweaver MX позволяет вызывать для работы с текстами программ внешние текстовые или HTML-редакторы. Преимуществом такого поведения является возможность переключения в Dreamweaver MX и работы в графическом интерфейсе сразу после написания фрагмента программы. По возвращении в Dreamweaver MX сразу же проверяется наличие изменений, внесенных во внешних программах. Если таковые будут обнаружены, вам будет предложено перезагрузить документ.
Существуют два типа редакторов, которые можно использовать. Можно использовать встроенный редактор, такой как HomeSite Plus (PC) или BBEdit (Mac), или обычные текстовые редакторы, например Notepad (PC) или SimpleText и TextEdit (Mac).

Использование внешних редакторов

Использование внешних редакторов

Когда вы используете внешние редакторы, изменения в тексте, внесенные в них, не синхронизируются автоматически с Dreamweaver MX. Если изменения будут обнаружены последними, вам будет предложено заново открыть данный документ.
Чтобы выбрать внешний редактор, выполните следующие действия.
1. Откройте диалоговое окно Preferences с помощью команды Edit=>Preferences. В колонке категорий выберите пункт Types/Editors.
2. Если вы работаете на компьютере Мае, снимите флажок Enable BBEdit Integration.
3. Щелкните на кнопке Browse. Откроется диалоговое окно Select External Editor (Выбор внешнего редактора). Перейдите к месту размещения вашего текстового редактора. Выделите его и щелкните на кнопке Open. Вы вернетесь в диалоговое окно Preferences.
4. Выберите способ, которым Dreamweaver MX будет вас информировать об изменениях. Для этого выберите нужный вариант в списке Reload Modified Files.
5. Для регулирования поведения Dreamweaver MX при вызове внешнего редактора выберите одно из трех значений в списке Save On launch.
6. Чтобы закрыть диалоговое окно Preferences, щелкните на кнопке ОК.
7. Чтобы вызвать выбранный редактор, выберите в меню Edit=>Edit With. Выбранный вами внешний редактор будет добавлен в конец названия пункта меню. Например, если в качестве внешнего редактора вы выбрали Code Warrior, элемент меню будет называться Edit With CodeWarrior.

Исправление кнопок Flash

Исправление кнопок Flash


Flash является прекрасным инструментом, однако с ним часто обращаются неправильно. Использование неправильных материалов Flash в неверном месте и в ненужное время добавляет излишнюю нагрузку на память, уменьшает производительность и перегружает канал соединения с Internet.
Если вы решили добавить больше одной кнопки Flash и создать их с помощью инструмента Flash Button приложения Dreamweaver MX в файле productdetails.сfin, это решение нужно тщательно взвесить.
Каждая кнопка Flash, созданная с помощью этого инструмента, существует сама по себе, поэтому она добавляет дополнительную нагрузку на канал. Все кнопки генерируются по отдельности миниатюрной версией генератора, встроенного в Dreamweaver MX.
Также не забывайте, что если вы используете версии Flash старше 5-й, вы не имеете возможности редактировать шаблоны Flash Buttons, так как генератор включен в состав Flash MX исключительно из соображений совместимости с предыдущими версиями.
Для оптимизации кнопок Flash можно использовать два метода.

Неплохой метод. Создайте динамическую кнопку Flash (аналогично динамическому текстовому полю; см. главу 20) и введите адреса URL и отображаемый текст. Создание только одной кнопки позволит уменьшить нагрузку на канал в Internet. Однако при этом уменьшится и производительность за счет загрузки нескольких экземпляров программы воспроизведения Flash.

Самый лучший метод. Можно использовать несколько кнопок Flash в одном фильме. Преобразуйте кнопки в символы и используйте их в фильме несколько раз. Дополнительная нагрузка будет измеряться размерами всего одной кнопки, сколько бы раз она ни использовалась. Программа воспроизведения Flash окажет меньшую нагрузку на производительность и канал в Internet, так как кнопка используется только один раз.

Оптимизация узла и программ

Оптимизация узла и программ


Чаще всего Web-дизайнеры, пользующиеся автоматической генерацией HTML-кода в пакете MX Studio, жалуются на то, что Fireworks MX и Dreamweaver MX создают программы-заготовки (ugly code). Этим термином они хотят подчеркнуть, что создаваемые программы являются сложными и слишком длинными.
Хорошей иллюстрацией данного высказывания является код, создаваемый другим приложением от Macromedia— Macromedia Director. Это приложение имеет собственный язык управления интерактивностью, называемый Lingo. Если мы хотим переместить головку воспроизведения к определенному кадру фильма, достаточно следующего фрагмента программы на этом языке:

On ExitFrame me Go to Frame 2 End
Эта программа достаточно проста и понятна. Те же, кто мало знаком с приложением Director, могут пользоваться языком Lingo с помощью связывания встроенных в приложение фрагментов кода. Ниже приведен пример вышеописанного действия, реализуемого с помощью фрагмента сгенерированной приложением программы.

on GetBehaviorDescription me return \ "Go To Frame X" & RETURN & RETURN & \ "Moves the playback head to the chosen frame when the user clicks on the sprite" & RETURN & RETURN & \ "Permitted Member Types:" & RETURN & \ "Graphic Members" & RETURN & RETURN & \ "Parameters:" & RETURN & \ "Go to which frame on MouseUp?" end BehaviorDescription on GetBehaviorTooltip me return \ "Use with graphic members." & \ "Moves the playback head to the specified frame on MouseUp"" end Get BehaviorTooltip
И так далее для остальных 22 строк. А вот фрагмент, выполняющий реальные действия:

on MouseUp me go MyTargetFrame end MouseUp
Эти строки скрыты в самой глубине сгенерированной программы. С первого взгляда кажется, что код избыточен. На самом деле это не так. Можно задать простой вопрос: "Как человек, который не знает языка, может создать команду, переводящую головку к заданному кадру?" Для этого и создается программа, фрагмент которой приведен выше и которая предвидит все потенциальные сценарии.
Вместо того чтобы отвергать код за его избыточность, задайте себе вопрос: "Выполняет ли команда то, что от нее требуется?"
Практически всегда ответ будет положительным. Для клиента самое главное, чтобы программа работала, а избыточен код или нет, его обычно мало волнует. Клиент практически всегда задает разработчику вопрос: "Программа работает?" Редко когда от него вы услышите вопрос о том, как она работает.
Другим аспектом этого вопроса являются объекты, обслуживаемые программой. В их числе специализированные объекты интерфейса, такие как кнопки и ссылки, а также общий вид дизайна страницы. Здесь фигурирует все тот же вопрос: "Выполняют ли элементы те функции, для которых они создавались?"
Когда же дело доходит до оптимизации, можно принять в расчет три ее уровня.

Статическая. Узел представляет собой набор страниц HTML, использующих языки HTML, JavaScript и др. для реализации своих функций.

Динамическая. Узел представляет собой набор шаблонов, в которые информация попадает с помощью программ среднего уровня, таких как ColdFusion. Такие узлы обычно отличаются сложностью, а их оптимизация требует высокого профессионализма программиста.

Косметическая и функциональная. Это — самая простая область процесса, и поэтому странно, что ее часто обходят вниманием при оптимизации узла. Пользователи всегда хотят пользоваться Web-узлом без необходимости постоянного принятия решений. Нет ничего хуже узла, для работы с которым нужно руководство пользователя. Кнопки всегда должны выглядеть как кнопки, а не что-то другое. Ссылки должны быть интуитивно понятны. Общий дизайн страницы должен быть оформлен как шаблон, а часто используемые элементы страницы по необходимости должны быть занесены в библиотеку.

Существует множество способов оптимизации функций узла, а также программ, их реализующих.

Преимущества взаимосвязи Fireworks MX и Dreamweaver MX

Преимущества взаимосвязи Fireworks MX и Dreamweaver MX


Пакет MX Studio позволяет с помощью одного щелчка мышью из Dreamweaver MX открыть Fireworks MX, отредактировать в нем рисунок и вернуться в исходное приложение, чтобы посмотреть, как изменилась страница. Этот процесс часто называют круговым редактированием (round trip editing). Мы добавим под панелью навигации лозунг. Так как панель навигации была создана в Fireworks MX, имеет смысл в нем же вносить и изменения.

При изменении таблицы стилей CSS

Рисунок 22.3. При изменении таблицы стилей CSS создается протокол изменений


Щелчок на кнопке Edit в окне Property Dreamweaver MX позволяет перейти в Fireworks MX. Все изменения рисунка, выполненные в последнем, сразу же отображаются на странице Dreamweaver MX.
Чтобы добавить лозунг в панель навигации, выполните следующие действия.
1. Откройте шаблон Dreamweaver MX с названием main и щелкните на одном из слайсов меню навигации.
2. Щелкните на кнопке Edit в окне Property. Запустится Fireworks MX, в котором откроется графика панели навигации. Если вы используете файлы из папки примера, приложение в первый раз может попросить вас указать файл PNG. Впоследствии Fireworks при обращении к этому рисунку будет использовать именно этот файл.
3. На панели Tools выберите инструмент Text. Щелкните в пустой области документа.
4. Введите лозунг We got yer back.
5. С помощью окна Property скорректируйте шрифт, его размер и цвет. Рекомендуем использовать шрифт MarkerFelt (или другой, который вам нравится больше) размером 38 пунктов. Заполните текст линейным градиентом, добавьте оттенки распылителем и установите в окне Property выравнивание по центру. Установите флажок Fill Over Stroke, чтобы текст отображался поверх границы.
6. Создайте новый слайс, выбрав инструмент Slice на панели Tools и выделив область, показанную на Рисунок 22.4.
7. Добавив слайс, щелкните на кнопке Done в верхней части окна документа. Таблица слайсов будет обновлена и оптимизирована Fireworks MX. После этого Fireworks закроется, так как сеанс работы с ним считается законченным. Все внесенные изменения отобразятся в шаблоне Dreamweaver MX.
8. Сохраните шаблон. Откроется окно, запрашивающее, хотите ли вы применить изменения ко всем остальным страницам узла. Ответьте положительно, щелкнув на кнопке Update.

Работа с автоматически сгенерированными

Работа с автоматически сгенерированными программами в Dreamweaver MX и Fireworks MX


Причиной того, что программисты называют код, автоматически сгенерированный Dreamweaver MX и Fireworks MX, программами-заготовками (ugly code), является то, что эти программы обобщают все возможные сценарии работы пользователя. Естественно, размер программ при этом увеличивается.
Примером может служить такой вот код, обслуживающий обычную операцию замещения (rollover):

function MM_findObj (n, d) //v4.01 var p, i, x; if (!d) d=document; if ((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p); if(!(x=d[n]&&d.all) x=d.all[n]; for (i=0; !x&&i Попросту говоря, функция MM_SwapImage () получает список аргументов, содержащих данные в форме адресов URL, имен файлов рисунков или пустых строк. Например, искомые данные при помещении курсора мыши над объектом будут выглядеть следующим образом:

onMouseOver = "MM_swapImage('shoes', '', 'images/shoes_f2.gif', 'hats','','images/hats_f2.gif',!)")
Проблема состоит в том, что в функции не используется последний оператор If. Вместо этого функция проходит в цикле по всем наборам данных и исследует в поисках объекта весь документ.
После этого адрес URL старой графики сохраняется, если используется функция swaplmageRestore (), а сам адрес URL изменяется и указывает уже на новый рисунок.
Все это немного напоминает использование атомной бомбы для жарки барбекю. Естественно, барбекю поджарится, но при этом будет израсходована масса излишней энергии.
В данном примере не только содержится избыточный код, но и несколько излишних циклов процессора, так как для поиска объекта используется рекурсивная функция (древоподобная функция, сохраняющая вызовы на каждой ветви обработки, пока поиск проводится на всех дочерних ветвях).
Само замещение можно представить всего одной строкой: onMouseOver="this.src= ' images/shoes_f2.gif ' "
где this — текущий объект, вызвавший событие onMyuseOver. В данном случае это — наш рисунок. Когда курсор мыши помещается над объектом, эта строка программы указывает свойству src (это свойство аналогично атрибуту SRC дескриптора Щ€>) Щ1 новый рисунок.
Еще одной характеристикой программы-заготовки является вставка приложением Dreamweaver MX на страницу ненужных дескрипторов. Например:


Обратите внимание, что в данном случае отсутствует текст, а в наличии имеется только рисунок. И хотя ошибок нет, избыточный код засоряет страницу и увеличивает время ее загрузки.
Еще один пример программы-заготовки создан для сервера (ColdFusion) и обслуживает команду вставки записи (insert Record):

INSERT INTO ProductType (ProductType, GraphicURL, ProductDescription) VALUES ( 1 #FORM. product-Type" NULL ' 1#FORM.graphicURL*' NULL ' 1#FORM.productDescription#' NULL }
Этот фрагмент программы ищет параметр с именем MM_InsertRecord, передаваемый из формы f orml. Если имя формы — f orml, этот фрагмент создает запрос на вставку и проверяет все элементы формы не только на предмет их существования, но и не содержат ли они пустую строку. Если удовлетворены оба условия, значение из формы используется для запроса, в противном случае функция возвращает значение NULL.
После этого страница перенаправляет вас на новую страницу.
В чем же избыточность этого фрагмента? Форма является своей же страницей ответа. Такой механизм не является наилучшим.
Немногим более эффективный механизм может быть заложен в программе страницы ответа и выглядит следующим образом:
ccfparam name="productType" default=""> INSERT INTO ProductType (ProductType, GraphicURL, ProductDescription) VALUES (#productType#, tproductDescription#, #graphicURL#)
Дескрипторы cfparam являются удобным способом определения значений по умолчанию для того случая, когда элементы формы не существуют. В данном случае проверяется факт существования элементов; в случае отсутствия таковых они создаются и им присваиваются значения по умолчанию. Если не предоставить значения атрибутов по умолчанию, страница вызовет ошибку. Это аналогично проверке выполнения некоторого условия в каком-либо фрагменте программы.
После этого дескриптор с fquery вставляет значения в базу данных либо из элементов формы, либо из значений, установленных по умолчанию.
Таким образом, можно сделать вывод, что оптимизацией кода должны заниматься профессионалы.

Работа с JavaScript и HTML

Работа с JavaScript и HTML


Как Dreamweaver MX, так и Fireworks MX для создания роловеров и других эффектов используют язык JavaScript. Знание того, какие из конструкций JavaScript лучше всего работают в каждой конкретной ситуации, основывается чаще всего на интуиции, вследствие чего решение иногда принимается неправильное.
Роловеры хороши только тогда, когда они просты. Поскольку они создавались исключительно для замещения одного рисунка другим, их не следует использовать для замещения множественных слайсов.
То же касается и использования функции Swap Image Restore. Она запоминает только последний рисунок, замещенный с помощью функции Swap Image, Если вы замещаете два рисунка, можно восстановить только последний из них. В этом случае лучше использовать функцию замещения нескольких рисунков. При создании панелей навигации лучше взять на вооружение функцию Set Nav Bar Image приложения Fireworks MX. Она более действенна для вышеописанного случая, чем другие упомянутые механизмы, так как позволяет иметь больше двух состояний.
Не занимайтесь комбинированием различных функций. Их программы оптимизированы и проверены. Часто разработчики сосредоточивают внимание на опрятности кода и не задают себе вопрос: "Будет ли это работать?"
Не корректируйте программы функций вручную. Все внесенные вами изменения будут аннулированы Dreamweaver MX и Fireworks MX. Оба приложения запоминают состояние страницы, в том числе связанные с ней программы, и восстанавливают в исходное состояние все, что может как-то повлиять на ее работу.
Если говорить конкретно об оптимизации HTML, использование таблиц CSS существенно сокращает количество возникающих вопросов оптимизации. Как вы уже знаете, таблицы CSS используются очень широко, и причина этому довольно проста: страницы читают не только броузеры, но и люди. Вы уже видели, какие конкретные преимущества предлагают разработчику таблицы стилей. Очень простые изменения, такие как увеличение размера шрифта, применяются сразу ко всему узлу.
Еще одним вопросом оптимизации программ является поиск излишних дескрипторов. Откройте главный шаблон. Отобразите дескрипторы заголовка, выбрав в меню команду View=>Head Content.
В шаблоне обратите внимание на дескриптор Style Sheet, который сместился влево, после того как был удален дескриптор стиля TD. В дескрипторе Style Sheet уже нет необходимости, так как мы используем внешнюю таблицу стилей. Его можно выделить и удалить.
Dreamweaver MX можно заставить подчистить и оптимизировать страницы автоматически. Это выполняется с помощью команды Clean Up HTML. Для инициирования процесса очистки необходимо выполнить следующие действия.
1. Выберите в меню команду Commands=>Clean Up HTML. Откроется диалоговое окно Clean Up HTML/XHTML (Рисунок 22.5).
2. Для того чтобы удалить дескрипторы, не содержащие программ, установите флажок Empty Container Tags в разделе Remove этого диалогового окна.
3. Для того чтобы избавиться от дескрипторов, повторяющих один и тот же фрагмент программы, установите флажок Redundant Nested Tags в разделе Remove.
4. Для удаления комментариев, созданных не Dreamweaver MX, для таких элементов, как библиотека или шаблон, установите флажок Non-Dreamweaver HTML в разделе Remove. Для того чтобы определить, какие конкретные дескрипторы необходимо удалить, установите флажок Specific Tag(s) и перечислите их в текстовом поле.

Решения CSS в Dreamweaver MX

Решения CSS в Dreamweaver MX


Таблицы CSS (Cascading Style Sheet) являются прекрасным инструментом оптимизации. Образно говоря, таблицы CSS — это набор форматов стилей, которые определяют внешний вид отдельных страниц и всего узла в целом. Таблицы CSS все чаще используются вместо дескрипторов форматирования HTML, так как эти стили для применения в масштабах всего узла достаточно определить всего один раз. Для описания областей применения таблиц CSS может потребоваться отдельная книга. Если вас заинтересовала эта тема, рекомендуем ознакомиться с книгой Эрика Мейера (Eric Meyer) CSS: Mastering the language of Web Design, вышедшей в издательстве New Riders. Те таблицы, которые влияют на узел в целом, лучше хранить во внешних файлах; в противном случае обслуживание этих таблиц превратит вашу жизнь в сплошной кошмар.
Чтобы создать внешнюю таблицу CSS, выполните следующие действия.
1. Запустите Dreamweaver MX и откройте динамический узел JTC, с которым мы работаем в настоящей книге.
2. Выберите в меню команду File=>New, и откроется диалоговое окно New Document. В списке категорий выберите пункт Basic Page, а в его разделе — пункт CSS. После этого щелкните на кнопке Create. Откроется новый документ CSS.
3. Сразу сохраните файл, чтобы его можно было связать с шаблоном. Присвойте ему имя jct.css и закройте файл, как только он будет создан. Теперь таблицу стилей можно установить непосредственно из шаблона.
4. Откройте панель Files, выбрав в меню пункт Window=>Assets и щелкнув на значке Templates. На панели Files отобразятся шаблоны. В нашем узле должен присутствовать один шаблон — main.dwt.cfm. Откройте этот шаблон, дважды щелкнув на его имени.) Или же откройте папку шаблонов в представлении Site и дважды щелкните на этом файле.
5. Для того чтобы просмотреть стили CSS, откройте панель CSS Styles, выбрав вкладку CSS Styles на панели Design.
6. Щелкните на кнопке Attach Style Sheet в нижней части панели CSS Styles. Откроется диалоговое окно Link External Style Sheet.
7. Щелкните на кнопке Browse, и откроется диалоговое окно выбора файла Select Style Sheet File. Также имя файла можно ввести непосредственно в текстовом поле. В данном случае лучше воспользоваться первым способом, так как с использованием шаблона связана адресация. В поле File Selector выберите файл jet.ess и щелкните на кнопке ОК. Убедитесь, что в диалоговом окне Link External Style Sheet переключатель установлен в положение Link. Щелкните на кнопке ОК.
8. Щелкните на кнопке Edit Styles в верхней части панели CSS Styles, чтобы вывести список таблиц стилей, присоединенных к текущему документу. В данном случае в списке будет только один элемент — td. Выберите этот стиль.
9. Откройте параметры панели и в списке выберите пункт Duplicate. Откроется диалоговое окно Duplicate CSS, показанное на Рисунок 22.1.
10. Установите переключатель в положение Redefine HTML tag и в списке Define In выберите файл jet. ess. Щелкните на кнопке ОК. На панели CSS Styles под стилем jct.ess появится дескриптор.
11. На панели CSS Styles выберите элемент, расположенный под main.dwt.cfm. Щелкните на значке корзины. Этот стиль будет удален из шаблона, но сохранится во внешней таблице стилей. По необходимости к внешнему стилю можно добавить и другие стили. Теперь любая страница, присоединенная к этой таблице стилей, будет иметь предопределенный их набор.

С помощью команды Duplicate панели

Рисунок 22.1. С помощью команды Duplicate панели CSS Styles можно дублировать таблицы стилей

Текст был добавлен к рисунку отформатирован

Рисунок 22.4. Текст был добавлен к рисунку, отформатирован и выделен в отдельный слеше

Хорошим кандидатом для удаления могут

Замечание

Хорошим кандидатом для удаления могут стать все эти надоевшие рождественские узлы с мерцающими буквами. Удалите дескриптор мерцания, и эти несносные огни отключатся, 5. Для объединения двух и более дескрипторов шрифта, управляющих форматированием одного и того же фрагмента текста, установите флажок Combine Nested Tags when Possible в разделе Options.
6. Чтобы просмотреть внесенные при оптимизации изменения, установите флажок Show Log on Completion в разделе Options.
7. Щелкните на кнопке ОК и сохраните шаблон.

Лучше всего проверять страницы вручную.

Замечание

Лучше всего проверять страницы вручную. Хотя команда Clean Up HTML и выполняет большую работу, она не способна учесть все нюансы.

Избавляемся от ошибок и выпускаем Webузел в свет

Альфатестирование

Альфа-тестирование


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

Бетатестирование

Бета-тестирование


Бета-тестирование является последней проверкой узла перед его выходом в свет. К началу бета-тестирования уже должны быть решены вопросы, связанные с удобством, функциональностью и дизайном Web-узла.
Это тестирование обычно проводится на площадке клиента или в подкаталоге сервера, на котором, вероятнее всего, будет размещен Web-узел.

Что искать

Что искать


Чаще всего сама команда лучше знает, что искать. Можно в поиске проблем быстро просмотреть узел (что не рекомендуется) или останавливаться на всех его элементах, от рисунков до программ (это гораздо лучше). Ниже предлагается обобщенный список элементов, в которых нужно проводить поиск ошибок.

Выполняйте поиск ошибок на более низком уровне, чем на это способен клиент. Все ли ссылки ведут туда, куда нужно? Все ли замещения отображают правильные рисунки?

Убедитесь, что страницы выглядят однообразно во всех современных броузерах. В последних версиях броузеров Internet Explorer и Netscape они должны выглядеть практически идентично.

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

Используйте функции именно для того, для чего они создавались. Например, зачем применять состояние Over While Down к кнопке, которая не имеет подчиненного меню?

Убедитесь, что конструкция не привязана жестко к каким-либо условиям. То, что хорошо смотрится на 21-дюймовом мониторе, может не работать на 17-дюймовом.

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

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

Проверьте эффективность выражений SQL. Например, не рекомендуется выбирать из таблицы всю ее информацию. Это только замедляет процесс обработки запроса.

Проверьте, не используется ли JavaScript там, где более уместным было бы использование программ заднего плана. Очень многие для выполнения действия в форме используют конструкцию mailto:URL. Проблема здесь состоит в том, что не все могут использовать формы таким образом. Вместо такой конструкции лучше использовать дескриптор ColdFusion CFMAIL

Что искать

Что искать


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

Работает ли конструкция так, как планировалось? Заставьте дизайнеров еще раз пройтись по страницам узла в поиске размещенного в неподходящем месте текста или рисунка, допускающего неверную трактовку. Это нужно выполнить на компьютерах PC и Мае.

Выполняет ли программа HTML то, для чего создавалась? Проверьте наличие неправильно состыкованных таблиц, ссылок, которые нельзя идентифицировать как ссылки, и т.п. Эту операцию также следует выполнить на компьютерах PC и Мае.

Работает ли узел? Все ли функции, заложенные в Web-узел, соответствуют своей технической спецификации, определенной в начале производственного процесса? Если вы работаете над динамическим узлом, разместите его на сервере, на котором он предположительно будет опубликован.

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

Существует ли кто-либо на стороне клиента, кто способен препятствовать подписанию акта приемки узла? У каждого Web-дизайнера есть своя история о том, как был создан громадный по объему узел, который не был принят только потому, что исполняющий обязанности начальника отдела маркетинга его не хотел утверждать. А все произошло потому, что до последнего момента никто не знал, что последнее слово будет именно за ним.

Диалоговое окно Check Browser

Рисунок 23.2. Диалоговое окно Check Browser позволяет проверить версию броузера пользователя и перенаправить его к странице, совместимой с ним


6. Введите в поле URL адрес страницы, созданной на шаге 1 для броузера версии 4.0. Введите в поле Alt URL адрес страницы, созданной на шаге 2 для броузера версии 3.0.
7. Щелкните на кнопке ОК. Приложение сгенерирует текст программы, направляющей пользователя на заданные страницы, в зависимости от используемого им броузера.
8. Если данная пустая страница должна стать домашней, сохраните ее под именем index. htm или под тем именем, который ваш Web-сервер использует по умолчанию.
После того как создана программа-шлюз, возникает следующая проблема: мы ведь работаем в Web, и пользователь потенциально может войти на узел с любой его страницы. Это может свести на нет всю ценность шлюза.
Чтобы справиться с этой ситуацией, выполните следующие действия.
1. Откройте страницу для версии 4.0, откройте панель Behaviors и включите функцию Check Behavior.
2. В открывшемся диалоговом окне Check Browser в поле Alt URL введите адрес страницы для версии 3.0.
3. В списке в области броузера в верхней части окна выберите пункт Stay on This Page. Сделайте то же и для другого броузера. Щелкните на кнопке ОК и сохраните файл.
4. Откройте страницу для версии 3.0 и также включите функцию Check Browser. В данном случае в поле Alt URL нужно ввести адрес страницы для версии 4.0. Также для обоих броузеров нужно выбрать в списке пункт Stay on This Page.
5. Когда закончите, закройте страницу.

Dreamweaver MX и вопросы доступности

Dreamweaver MX и вопросы доступности

Если вы создаете официальные государственные Web-узлы, важно, чтобы они были доступны любому пользователю. Страницы должны читаться с помощью различных типов программ — броузеров, программ чтения с экрана и т.п. Вопрос доступности стал настолько важным, что компания Macromedia встроила в Dreamweaver MX множество функций доступности.

FTPутилиты Dreamweaver MX

FTP-утилиты Dreamweaver MX


При отправке Web-узла на сервер используется протокол FTP (File Transfer Protocol). С его помощью файлы можно переместить с локальной машины на сервер и наоборот. Для этой цели многие используют специализированные программы, такие как WS_FTP, Fetch и Vicomsoft FTP. Эти программы чудесно справляются с задачей перемещения файлов из одного места в другое, но совершенно не приспособлены для работы в группе отслеживания версий и обновления файлов.
Окно Site Dreamweaver MX является инструментом, имеющим все достоинства функций, встроенных в данное приложение, среди которых следующие:

регистрация (check in) и получение (check out);

перемещение с помощью метода drag and drop;

способность проверять ссылки во всем узле;

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

Кнопки Get Files и Put Files оформлены в виде двух стрелок и размещены в верхней части окна Site. Одна из них направлена вниз (Get Files), другая — вверх (Put Files). Можно сказать, что это — две самые важные кнопки данного окна. Кнопка Get Files позволяет получить выделенные файлы и папки с сервера, а кнопка Put Files — переместить файлы с локального компьютера на сервер. Разработчику открывается возможность выполнить изменения и протестировать их до того, как узел будет размещен в Web.
Для перемещения файлов между сервером и локальной машиной существует несколько способов.

В окне Site выделить файлы, подлежащие перемещению, и перетащить их мышью из панели Local Files на панель Remote Files или наоборот.

Выделить перемещаемые файлы и выбрать в меню команду Site=>Get или Site=>Put, в зависимости от направления перемещения. Также можно нажать комбинацию клавиш .

Выделить файлы и щелкнуть на кнопке Get Files или Put Files панели Site.

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

Не слишком удивляйтесь, если пересылка застрянет в каком-либо месте. Это может произойти из-за того, что FTP-сервер решил "передохнуть".

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

Иногда FTP-сервер не различает текстовую и двоичную загрузку. Это может стать причиной ошибок, особенно при загрузке программ CGI, так как сервер ожидает только текст.

Мудрый разработчик всегда имеет под рукой отдельную программу клиента FTP. Существует множество бесплатных, условно-бесплатных и коммерческих программ FTP. Лучшие рекомендации относительно того, какую из них выбрать, даст вам ваш поставщик услуг Internet (ISP). Он-то на собственном опыте знает, какое из этих приложений лучше всего работает с его сервером.

Исправление ошибок

Исправление ошибок


Если бета-тестировщики будут выполнять свою работу тщательно, они завалят вас списками ошибок в работе элементов (от очевидных до самых непонятных). Естественно, невозможно устранять ошибки последовательно, в порядке их поступления. Здесь нужно мыслить категориями машины, назначая поступающим замечаниям приоритеты.
Самый большой приоритет следует отдавать явным ошибкам, например, такой: после щелчка на некоторой кнопке Internet Explorer всегда завершает работу в состоянии ошибки. С другой стороны, среди ошибок могут быть и такие, которые исправлять не нужно, так как они возникают только у одного пользователя. Классическим примером могут служить ссылки, которые на странице не подчеркнуты, поскольку у пользователя не установлен в настройках броузера соответствующий флажок. Такие факты просто нужно брать на заметку.
После того как вы разберетесь со всеми пунктами списка ошибок, повторно протестируйте ошибочные ситуации. Не удивляйтесь, если одну и ту же ошибку вам придется исправлять несколько раз.

Избавляемся от ошибок и выпускаем Webузел в свет

Избавляемся от ошибок и выпускаем Web-узел в свет


Итак, Web-узел можно считать готовым. Теперь перед командой встает естественный вопрос: "А работает ли он?" Ответ на него не так очевиден, как кажется на первый взгляд. Может, вы и тестировали страницы по мере их создания в Fireworks и Dreamweaver MX с помощью броузера, однако полноценным тестированием узла это назвать нельзя.
Во многих отношениях тестирование узла знаменует собой возврат к точке зрения на лес, а не на отдельные деревья в нем. До этого момента мы концентрировали внимание на отдельных фрагментах узла. Нас мало интересовало, как из них складывается общая картина. Теперь пришло время протестировать узел в целом и убедиться, что все в нем (именно все!) работает так, как планировалось.
Тестирование отнимает много времени. Оно нужно для выявления и исправления орфографических ошибок, ссылок, которые ведут в "никуда" или в неверное место, рисунков и анимации, не вписывающихся в общую картину узла, и т.п. Однако это — самая легкая часть процесса. Гораздо тяжелее искать и исправлять ошибки. Среди них — разбитые таблицы, функциональные ошибки, такие как неправильный шрифт в таблице стилей CSS, рисунки, которые не загружаются, функции, которые не обрабатываются старыми версиями броузеров и поэтому вызывающие сбой в их работе, — в общем, все, что работает совсем не так, как изначально предполагалось.
После того как вы внесете все эти исправления, нужно будет повторить тестирование, чтобы перед выпуском узла в свет убедиться, что все работает согласно своей спецификации. Затраченное на эту работу время бесценно, и на него в бюджете нужно отвести не меньше 10% общего времени проекта.
Первая реакция на эту цифру обычно следующая: "Вам легко говорить..." Естественно, это сложно объяснить клиенту, который всегда хотел бы, чтобы Web-узел увидел свет еще вчера. Как ему объяснить важность этого этапа? Если вы испытываете сильное давление клиента и неожиданно столкнулись с проблемой, вся ее тяжесть и расходы, связанные с ее устранением, ложатся исключительно на ваши плечи. Вполне понятно, что время, запланированное на эту работу, используется в проекте как запасное. Ни один проект не способен вписаться в исходный план, и часто дополнительное время на отдельные этапы Выкраивается за счет сокращения времени на тестирование, так как откуда-то его все равно нужно было взять.

Кому поручить тестирование

Кому поручить тестирование


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

Кому поручить тестирование

Кому поручить тестирование


На данном этапе команда делает шаг назад и снова привлекает к работе клиента. Его задача — убедиться в работоспособности узла, концентрируя внимание на вопросах удобства.
Задача команды — прислушиваться к мнению клиента и устранять замеченные недостатки.
Когда клиент информирует команду об обнаруженных дефектах, его отчет может быть технически некорректным. Он может сообщить нечто следующее: "Когда я щелкнул на этой кнопке, произошло то-то и то-то, а я ожидал совершенно другого". Вы можете услышать даже фразу типа "Я ничего не могу найти". Вместо того чтобы втягиваться в техническую дискуссию, попробуйте переформулировать его замечание на своем языке. После этого задайте ему несколько уточняющих вопросов. Иногда клиент просит исправить совсем не то, о чем вы подумали сразу.
Например, делая замечание: "Я ничего не могу найти", клиент совершенно не задумывается о том, как работает база данных. Да и не должен. Его волнует только то, чтобы результаты поиска конкретного элемента были правильными.
Следует также отличать исправление ошибки от обеспечения дополнительных возможностей. На этом этапе в программы узла не должно быть добавлено ни одной строки, которая не была бы связана с исправлением ошибки.

Настройка узла для людей с физическими

Рисунок 23.8. Настройка узла для людей с физическими ограничениями выполняется в диалоговом окне Accessibility Preferences


Тестирование доступности узла
Лучшей гарантией доступности узла для самых широких категорий пользователей является его соответствие разделу 508 акта U.S. Rehabilitation Act (Акт о реабилитации) от 1998 года. Информация об этом важном аспекте создания узлов содержится на Web-узлах http://www.w3.org/WAI/ и http://www.section508.gov.
Чтобы подготовить отчет о доступности страницы, выполните следующие действия.
1. Откройте проверяемый документ.
2. Выберите в меню команду Commands=>Accesibility, и отчет отобразится на панели Site reports.

Определение возможностей поставщика услуг хостинга

Определение возможностей поставщика услуг хостинга


Теперь пришло время узнать, все ли нужные вам возможности предлагаются поставщиком услуг хостинга. Решение относительно выбора поставщика услуг хостинга должно быть принято задолго до начала работ над Web-узлом.
Все дело в том, что отдельные поставщики из соображений безопасности отключают некоторые дескрипторы ColdFusion. Среди них могут оказаться такие, как file, ftp и др. Если знать об этих ограничениях до начала работ, их можно учесть при написании программ и не размещать такие дескрипторы, чтобы потом их же удалять или заменять. Зачем нужны дополнительные затраты? Вот несколько советов, которые можно учесть при работе с сервером поставщика услуг хостинга.

Любой пользователь может загрузить файл с сервера на собственный компьютер, чтобы в дальнейшем использовать ваши наработки в собственных целях. Это можно предупредить, не извещая конечного пользователя о месте размещения файлов. Еще один способ защиты предполагает создание файла Application.cfm на странице, которая перенаправляет пользователя к реальному месту размещения узла, или хранение файлов в зоне, недоступной на Web-сервере.

На Web-сервере можно хранить практически все типы файлов.

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

Узнайте, какая версия программ среднего уровня используется на сервере. Например, не используйте функции, специфичные для ColdFusion MX на сервере, на котором развернут ColdFusion 5.

Практически все серверные функции Dreamweaver MX имеют обратную совместимость и поэтому не могут стать источником проблем.

Поиск "висячих" ссылок

Поиск "висячих" ссылок


Поиск "висячих" ссылок (broken links) может отнять много сил и времени. Это связано с тем, что сложные узлы могут состоять из сотен страниц, связанных как между собой, так и с внешними узлами. Еще одной проблемой являются брошенные (orphan) файлы (т.е. те, которые существуют в узле, но на которые не существует ссылок с других страниц), так как они занимают дополнительное место на сервере и могут стать источником недоразумений в команде.
Dreamweaver MX содержит функцию, которая ищет "висячие" ссылки и брошенные файлы. Чтобы воспользоваться ее услугами, выполните следующие действия.
1. Откройте ранее сохраненную страницу и выберите в меню команду File=>Check Page=>Check Links. На панели Report откроется панель Link Checker.
2. В списке Show этой панели выберите нужный отчет. Вариантами могут быть Broken Links ("Висячие" ссылки), External Files (Внешние файлы) и Orphaned Files (Брошенные файлы). Выберите первый из вариантов, и в отчете будут показаны "висячие" ссылки.

Понятие процесса тестирования

Понятие процесса тестирования


Процесс тестирования может выполняться несколькими членами команды; его можно также поручить сторонней компании. Однако независимо от своей формы он является обязательным.
На первом шаге нужно убедиться, что все страницы можно просмотреть в броузере. Здесь подразумевается тот факт, что разработчик мог адресовать страницы каким-то определенным версиям броузеров. Однако каждая версия и тип броузера предлагают множество все более новых и впечатляющих функций, что поднимает свои вопросы совместимости. В современных условиях нужно рассчитывать на работу со следующими броузерами.

Броузеры версий 5.0 и выше, которые удовлетворяют стандартам W3C, однако могут их реализовывать по-своему.

Броузеры от того же производителя, которые интерпретируют программы по-разному, в зависимости от того, для какой платформы они созданы — для PC или Мае.

Поколение броузеров второго уровня, от I-cab до Opera.

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

Различные версии AOL. Например, версия AOL 4.0 основывается на броузере Internet Explorer 4.0, однако имеет существенные от него отличия.

Преобразование страниц в Dreamweaver MX

Преобразование страниц в Dreamweaver MX


Если вы используете слои и таблицы стилей CSS, вы имеете потенциальные проблемы. Их попросту не поймут броузеры версий 3.0 и ниже. Несмотря на свои прекрасные инструменты, Dreamweaver MX не предусматривает использования старых броузеров, так как большинство заложенных в нем функций просто не будет в них работать. Однако это приложение может облегчить создание страниц, совместимых с этими броузерами.
Dreamweaver MX не может сделать доступными для версий 3.0 и ниже те функции, которые предназначены для версий 4.0 и выше. Вместо этого создается отдельная страница для версии 3.0, основанная на материалах страницы для версии 4.0. После того как создание страницы завершено, можно использовать функцию Check Browser, чтобы имитировать чтение страниц старыми версиями броузеров.

Преобразование страницы

Преобразование страницы

Когда страница готова к преобразованию, можно выполнить три варианта действий: преобразовать стили CSS, или слои, или и то и другое. Для того чтобы конвертировать страницу, выполните следующие действия.
1. Откройте страницу в Dreamweaver MX и выберите в меню команду File=>Convert=>3.0 Browser. Откроется диалоговое окно Convert to 3.0 Browser Compatible (Рисунок 23.1).
2. Сделайте свой выбор и щелкните на кнопке ОК.
Dreamweaver MX начнет преобразование файла. Если при этом возникнут какие-либо проблемы, приложение проинформирует вас о них с помощью диалогового окна. Единственным способом обойти проблему является повтор преобразования с самого начала.

При конвертировании документа

Рисунок 23.1. При конвертировании документа в стандарт 3.0 существуют три варианта действий

Проверка размера узла и времени загрузки

Проверка размера узла и времени загрузки

Fireworks MX и Flash MX позволяют оптимизировать рисунки и анимацию относительно выбранной пропускной способности канала. Аналогичную функцию предлагает и Dreamweaver MX.
Чтобы выбрать время загрузки и размеры узла, выполните следующие действия.
1. Выберите в меню команду Edite Preferences (или Dreamweaver MX=>Preferences в версиях для операционной системы OS X компьютеров Мае). Откроется диалоговое окно Preferences.
2. В колонке категорий в левой части окна выберите пункт Status Bar. Откроются настройки строки состояния, показанные на Рисунок 23.7.
3. В списке Window Size выберите размер страницы, а в списке Connection Speed — предполагаемую скорость канала в Internet. Самой распространенной скоростью все еще остается 28,8 Кбит/с. Если узел разрабатывается для корпоративной сети, можно выбрать наибольшее значение — 1500 Кбит/с.
4. Щелкните на кнопке ОК.

Проверка закончена и на панели

Рисунок 23.4. Проверка закончена, и на панели Results отображены выявленные проблемы

Работа с устаревшими броузерами

Работа с устаревшими броузерами


Как бы мы того ни хотели, но старые броузеры еще не выброшены на свалку истории и продолжает свое существование. Несмотря на то что броузеры распространяются бесплатно, отдельные личности не утруждают себя обновлением их версий.
Как это ни больно осознавать, но то, как броузер представляет страницу на экране, зависит исключительно от механизма, в нем задействованного. В отличие от текстовых процессоров, где интерфейс выглядит и работает аналогично во всех их моделях и версиях, функции броузера ограничены только теми, которые в него изначально встроены. Это вынуждает программистов при разработке своих Web-узлов принимать некоторые интересные решения. Стоит ли встраивать функции, которые работают только в последних версиях броузеров? Если да, то что делать тем, у кого имеется только старая версия броузера?
В основном этот вопрос касается броузеров, которые несовместимы со стандартом W3C. Например, они могут работать только со старыми версиями языка HTML (в настоящее время уже используется его 4-я версия), в которых еще не использовались таблицы стилей CSS.
До того как появились стандарты, основные производители броузеров создавали собственные дескрипторы HTML, которые могли читаться только их броузерами. Это было бесконечным источником разногласий между разработчиками и производителями броузеров, такими как Microsoft и Netscape. Разработчики имели вполне обоснованное желание использовать один и тот же набор дескрипторов, который бы использовался всеми броузерами, независимо от их производителя. Так и появились стандарты W3C, которые существуют по сегодняшний день.

Работа с "висячими" ссылками

Работа с "висячими" ссылками

Идентифицировав "висячие" ссылки и брошенные файлы, можно заняться устранением этих проблем.
1. На панели Link Checker дважды щелкните на одном из пунктов списка ошибок. Dreamweaver MX откроет страницу, содержащую данную ссылку. Выделите эту ссылку и проверьте путь и имя файла в поле ссылок окна Property.
2. Исправьте ссылку или путь соответствующим образом.

Страница динамической

Рисунок 23.3. Страница динамической версии Web-узла JCT проверяется относительно множества профилей броузеров


Панель Target Browser Report достаточно обширна и имеет заметные отличия от аналогичных панелей в предыдущих версиях Dreamweaver MX. Работа с этой панелью осуществляется с помощью значков, расположенных в ее левой части (Рисунок 23.4).

Зеленая стрелка. Запускает проверку страницы или узла относительно выбранных броузеров.

More Info. Открывает окно, содержащее' тот же текст, который содержится в области Description панели Report.

Save Report. Значок с изображением диска. Открывает диалоговое окно Save, позволяющее сохранить результаты проверки в текстовом или XML-формате.

Browse Report. Значок с изображением земного шара. Открывает отчет в броузере (Рисунок 23.5), из которого его можно вывести на печать.

Совет
Совет

Эти же функции доступны и в списке Options панели Report. Имейте в виду, что после закрытия панели Results отчет удаляется.

Шлюз к броузерам

Шлюз к броузерам

Так как существует множество разновидностей броузеров, каждая из которых, в свою очередь, имеет несколько версий, в среде Web-разработчиков стало хорошей традицией создавать для каждого броузера свои версии страниц и с помощью программ на языке JavaScript определять тип броузера пользователя и направлять его к соответствующей странице. Такая программа формально называется шлюзом.
Если вы собираетесь использовать эту технику, вначале создайте три страницы: для броузеров версии 4.0 и выше; для броузеров версии 3.0 и пустую страницу, которая будет использоваться в качестве домашней для шлюза. Шлюз реализуется с помощью функции Check Browser, которая выполняется в ответ на событие onLoad пустой страницы. Это значит, что пустая страница никогда не отображается на экране.
Чтобы создать шлюз с помощью функции Check Browser, выполните следующие действия.
1. Создайте страницу для броузеров версий 4.0 и выше, в которой используются слои и таблицы CSS.
2. Выберите в меню пункт File=>Convert=>3.3 Browser Compatible. Сохраните новый файл под тем же именем, дополнительно добавив к нему соответствующий суффикс или префикс. Например, если исходная страница называется 3LostSouls, преобразованную страницу можно назвать 3LostSouls3 0.
3. Создайте новую страницу HTML, выбрав в меню команду File=>New. Когда откроется пустая страница, выберите команду меню Window=>Behaviors или нажмите комбинацию клавиш . Откроется панель Behaviors. Для достижения того же эффекта можно щелкнуть на вкладке Behaviors панели Design.
4. Щелкните на знаке "плюс" на панели Behavior и выберите в списке реакций пункт Check Browser.
5. Откроется диалоговое окно Check Browser (Рисунок 23.2). Ключевыми полями в нем являются адреса URL, которые будут введены в текстовые поля URL и Alt URL в нижней его части.

Несмотря на свою широту, это

Совет

Несмотря на свою широту, это список остается не более чем списком профилей. Ничто не может заменить реальный броузер. Наиболее полный список броузер, который мы видели в сети, содержится на узле http: //browsers.evolt .erg. Для того чтобы проверить совместимость броузера с конкретной страницей, выполните следующие действия.
1. Откройте страницу и выберите в меню команду File=>Check Page=>Check Target Browsers. Откроется диалоговое окно Check Target Browsers (рис 23.3)
2. Выберите броузеры, относительно которых следует проверить страницу.
3. Щелкните на кнопке Check.
4. После окончания теста его результаты будут выведены в области Target Browser Check панели Results (Рисунок 23.4). В результатах будет показано, какие строки имеют проблемы, и описана сущность этих проблем.

Не выбирайте пункт Orphaned Files,

Совет

Не выбирайте пункт Orphaned Files, так как он доступен только в случае проверки ссылок в пространстве всего узла. 3. Проверив страницу и просмотрев "висячие" ссылки, можно с помощью панели Reports проверить и весь узел. В параметрах этой панели выберите вариант поиска Check Links Sitewide или щелкните на зеленой стрелке и выберите в списке тот же вариант.
4. Ссылки в пространстве всего узла можно проверить и с помощью панели Site. Для этого в списке узлов панели Site выделите нужный и выберите в меню панели команду Site=>Check Links Stewide (Рисунок 23.6).
5. Выберите в списке Show панели Link Checker тип отчета. После окончания проверки отчет можно сохранить, а также открыть в броузере для последующего вывода на печать.

Во время конвертирования страницы слои

Совместимость страниц с версией 3.0

Во время конвертирования страницы слои преобразовываются во вложенные таблицы, а стили CSS — во внутренние стили страниц. Все это Dreamweaver MX выполняет автоматически. Однако перед этим следует удовлетворить некоторые условия.

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

Слои не должны пересекаться. Если пересечения все же существуют, во время преобразования появится соответствующее предупреждение. Чтобы ликвидировать пересечение слоев, воспользуйтесь командой меню Modify=> Arranged Prevent Layer Overlaps.

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

Тестирование броузером всего узла

Тестирование броузером всего узла

В Dreamweaver MX тестирование всего узла не сложнее тестирования отдельной страницы. При этом Dreamweaver MX проверяет все файлы, содержащиеся в корневой папке узла, независимо от того, используются они в узле или нет.
Для того чтобы протестировать весь узел, выполните следующие действия.
1. Откройте панель Check Target Report и выберите в списке действий пункт Check Target Browsers for Entire Site. Также можно щелкнуть на кнопке с изображением зеленой стрелки панели Report и выбрать пункт Check Target Browsers for Entire Site. Откроется диалоговое окно Check Target Browsers.
2. Выберите из списка те броузеры, относительно которых будет производиться проверка, и щелкните на кнопке Check. Dreamweaver MX просмотрит все файлы, содержащиеся в заданной папке, и выведет в окне Target Browser Report обнаруженные проблемы.

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

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

Все страницы должны быть протестированы с помощью настолько большого количества разнообразных броузеров, насколько это возможно. Один из основных тестов — программный — можно провести непосредственно в Dreamweaver MX. Броузеры имеют свойство игнорировать дескрипторы, которые они не понимают. В зависимости от точки зрения на данный вопрос, это можно расценить как хорошее или плохое их свойство. Например, броузер Internet Explorer "понимает" дескриптор объекта файла SWF, если тот помещен на странице, а броузер Netscape — нет. Последний использует для этого дескриптор Embed. Именно поэтому Flash генерирует программу с использованием обоих этих дескрипторов.
Функция Browser Targeting приложения Dreamweaver MX позволяет проверить страницу относительно множества броузеров. Вот список броузеров, которые знакомы приложению Dreamweaver.

Internet Explorer 2.0

Internet Explorer 3.0

Internet Explorer 4.0

Internet Explorer 5.0

Internet Explorer 5.5

Internet Explorer 6.0

Netscape Navigator 2.0

Netscape Navigator 3.0

Netscape Navigator 4.0

Netscape Navigator 6.0

Opera 2.1

Opera 3.0

Opera 3.5

Opera 4.0

Opera 5.0

Opera 6.0

Интересным свойством этой функции Dreamweaver MX является то, что она позволяет выбрать профиль, соответствующий как одному конкретному броузеру, так и всем броузерам сразу.

В диалоговом окне Preferences

Рисунок 23.7. В диалоговом окне Preferences приложения Dreamweaver MX можно установить размер страницы и планируемую скорость загрузки


Компания Macromedia стремилась обеспечить доступ к информации в Web людям с различными видами недееспособности. С помощью Dreamweaver MX можно создавать страницы, которые будут доступны такой категории пользователей.
Люди с ослабленным зрением, как правило, пользуются программами чтения с экрана. Предположим, что такой посетитель зашел на Web-узел компании JCT. Этот узел — достаточно красочный и наполнен визуальными эффектами, так что если мы хотим сделать его доступным для самых широких масс, мы должны сопроводить рисунки описаниями типа "Красные мужские кроссовки, размеры 7-13". Когда откроется рисунок, программа чтения с экрана загрузит этот текст, воспроизведет с помощью синтезатора речи описание, после чего даже пользователю с ослабленным зрением станет понятно, что изображено на экране.

Возможность открыть отчет в броузере и вывести его на печать

Рисунок 23.5. Возможность открыть отчет в броузере и вывести его на печать

Выбрав в меню Site одноименной

Рисунок 23.6. Выбрав в меню Site одноименной панели пункт Check Links Sitewide, можно проверить на наличие "висячих" ссылок весь узел


Совет
Совет

Если ссылка, указывающая на рисунок, имеет не соответствующие ему размзры, измените в окне Property его ширину и высоту или щелкните в этом окне на кнопке Refresh.

Выпускаем Webузел в свет

Выпускаем Web-узел в свет


Завершив бета-тестирование, исправив все ошибки и получив все необходимые согласования, пришло время выпускать узел в свет, т.е. разместить его на сервере в Web.
Размещение узла на удаленном сервере обычно осуществляется с помощью протокола FTP (File Transfer Protocol). Перед этим узел проходит отладку на тестовом сервере! Эта отладка не прекращается до окончательного запуска Web-узла в рабочем режиме. Все тесты, проведенные на отладочном сервере, должны быть повторно выполнены и на рабочем.
При этом одной из первоочередных задач является проверка установки соединения с источником данных ColdFusion MX. Следует также обеспечить защиту базы данных. Безопасность лучше проверять из места, внешнего по отношению к размещению Web-сервера. Если это сделать невозможно, протестируйте систему безопасности базы данных в защищенной области Web-узла из области, соответствующим образом сконфигурированной в сервере домена.

Весьма странно, что броузер, который

Замечание

Весьма странно, что броузер, который в наиболее полной мере отвечает стандартам W3C (Netscape 6.x), сегодня используется реже всех остальных. Возможно, это временное явление, так как компания AOL адаптирует Netscape в качестве своего стандартного броузера. И еще одна странность: компания AOL приобрела Netscape, но в настоящее время использует Internet Explorer и его стандарты. Еще одним предметом разногласий является язык JavaScript. До появления стандартов существовали две версии этого языка — Jscript, используемый продуктами компании Microsoft, и версия, используемая компанией Netscape. Разработчики столкнулись с ненадежностью JavaScript в том, что сценарии, работающие в Netscape, не работали в Internet Explorer (и наоборот). И здесь недовольство разработчиков привело к появлению в 1997 году резолюции, составленной всеми заинтересованными сторонами и утвердившей стандарты этого языка.
Оригинал стандартов находится в Швейцарии в Ассоциации производителей компьютеров, ЕСМА (European Computer Manufacturers Association). Естественно, стороны не пришли к согласию относительно лицензирования названия JavaScript, поэтому было введено новое название — ECMAScript. Язык сценариев приложения Flash MX, Actionscript, является производным от ECMAScript.

У одного из авторов этой

Замечание

У одного из авторов этой книги, Джордана Чилкотта, имеется совет для тех разработчиков, которые столкнулись с требованием клиента относительно совместимости узла электронной коммерции со старыми версиями броузеров. "Тепло поздравьте его с новым тысячелетием и покажите более новые или, по крайней мере, более совместимые броузеры". Можно при этом сослаться на то, что срок действия сертификатов безопасности, используемых в версии 3.0, истек 1 января 2000 года. Таким образом, все броузеры этой версии уже не могут подключиться по защищенному каналу сервера (SSL), что делает соединение небезопасным. Видите, хоть какая-то польза от магии числа 2000 есть.

в HTML, все специфичные для

Замечание

Когда таблица CSS преобразовывается в HTML, все специфичные для CSS функции (например, междустрочный интервал) теряются. Аналогично, размеры шрифта, более крупного, чем 36 точек, преобразовываются в самый большой размер HTML — 7.

Перед тем как заняться вопросами

Замечание

Перед тем как заняться вопросами доступности узла, необходимо ознакомиться с технологиями доступности, такими как программы чтения с экрана. У одного из авторов этой книги есть приятель с ослабленным зрением, компьютер которого подключен к Internet. Первое, что привлекло внимание автора при его посещении, это то, что монитор был выключен. Когда приятель автора начал бороздить Internet с помощью программы чтения с экрана, текст воспроизводился настолько быстро, что пришлось даже уменьшить скорость. Для того чтобы добавить на страницу функции доступности, выполните следующие действия.
1. Откройте диалоговое окно Preferences, выбрав в меню команду Edit=>Preferences.
2. В списке категорий выберите пункт Accessibility и установите необходимые параметры доступности (Рисунок 23.8). Щелкните на кнопке ОК.
3. Для каждого выбранного параметра при вставке каждого нового элемента на страницу Dreamweaver MX будет запрашивать ввод соответствующих атрибутов.



    Бизнес в интернете: Сайты - Софт - Языки - Дизайн

• Киберсантинг
  
• Киберсантинг как бизнес
  
• Виды Киберсантинга
  
• Создание игр
  
• Дизайн как бизнес
  
  
• Dreamweaver
  
• PHP
  
• Homesite
  
• Frontpage
  
• Studio MX
  
  
• Сайтостроительство
  
• Citrix MetaFrame
  
• Стили сайта
  
• ActiveX на сайте
  
• HTML как основа сайта
  
  
• Adobe GoLive
  
• Что такое WEB
  
• Мобильные WAP сайты
  
• 3D графика на сайтах
  
• 3DS MAX графические решения
  
  
• Графика в 3D Studio MAX и на сайте
  

---

---