Macromedia Fireworks

Поведения

Ну вот мы и добрались до самого пожалуй сложного в Fireworks - поведения (behaviors). Если Вы еще не совсем уверенно работаете в этой программе то пожалуй усвоение этого урока оставьте на некоторое время попозже ... Хотя каждый человек уверен в себе по своему ... Итак приступим ! Поведения , что нам было известно об этом раньше ?
Если у вас было плохое поведение в детском садике то вас могли и в угол поставить , в школе сделать неприятную запись для родителей в дневнике и тд... Но мы займемся сейчас поведениями в Fireworks.
В данном же случае поведения (behaviors) это то , как регирует определенный обьект при наведения на него курсора (клика).
Во всех последних трех версиях Fireworks (MX , 4-я и 3-я) можно настроить обьекты только на такие поведения - переворачивание (Rollover), подмена (Swap), а если Вы вдруг решили сделать большое навигационного меню , то в нем можно настроить кнопки на такие поведения - Up , Over , Down , Restore. И еще последнее поведение , которое вставляет какой-нибудь текст в статусную строку вашего броузера (Teхt of Status Bar).
Мы рассмотрим сейчас как мне кажется наиболее интересное "поведение" применяя которое можно создать очень интересную страничку ! Называется это поведение - Swap (подмена). Это когда при наведении курсора на кнопку в другом месте подменяются картинки ...
Как я уже писал выше , что-бы эффективно применить это "поведение" нужно уже достаточно уверенно ориентироватся в Fireworks. Так как работать желательно нужно с примененем слоев , фреймов , эффектов и тд... Я не буду останавливатся на графической части создания этой картинки , так основное внимание здесь уделю правильной работе с "поведением" ...

Ну вот значить немного потрудившись я сделал вот такое вот учебное меню с тремя кнопками. Условно эту картинку я разделил на три части - №1 область кнопок , указывающая область №2 , область сообщения №3. Для чего , поймете потом.
Следующим моим шагом будет то , что я открою окно для работы с фреймами и продублирую эту вот картинку еще три раза. В результате должно получится 4 совершенно одинаковых фрейма !

Первый фрейм оставим таким какой он есть на самом деле ... Он будет у нас за главного , тоесть в нем картинка будет такой , если курсор (клик) не наведен на кнопки ... Далее делаем изменения в наших остальных фреймах. Выделяем фрейм 2 и делаем картинку в нем такой , как она будет выглядеть при наведении курсора на кнопку 1. В данном случае я решил оставлять область №1 (кнопки) без изменения , а вот область №2 и №3 немного изменил ... В указывающей области я убрал эти линии от кнопок 2 и 3 и в области сообщения я вписал текст , который будет выскакивать при наведении курсора на кнопку 1. Сделали ! Запоминайте - фрейм 2 для кнопки 1.
Следущий фрейм 3, выделяем его и так же делаем изображение таким как оно будет выглядеть при наведени на кнопку 2. Здесь так же область кнопок оставляем без измнения , а вот области под номерами 2 и 3 изменим. В области №2 убираем линии от кнопок 1 и 3 , а в области №3 вписываем сообщение которое будет выскакивать при наведении курсора на кнопку 2. Уловили идею ... или же нет :-) Запоминайте - фрейм 3 для кнопки 2.
Точно такую же операцию проделаем и с последним фреймом 4 ... Область кнопок по-прежнему остается без изменения , а области №2 и №3 изменяем. В указывающей убираем линии от кнопок 1 и 2 , а в сообщающей области вписываем сообщение , которое будет выскакивать при наведениии курсора на кнопку 3. Сделали ! Запоминайте - фрейм 4 для кнопки 3.
Тут главное понять ! Схватить смысл идеи ... Ну теперь то , думаю уловили смыл произведенных мной изменений во фреймах 2, 3 и 4. Эти измененные картинки областей №2 и №3 будут подменять картинку фрейма 1 этих же областей при наведении курсора на определенную кнопку ...
Ну вот теперь вроде бы все готово для работы с поведениями , осталось только аккуратно нарезать нашу заготовку инструментом нарезки Slice Tool

... Режем аккуратно , желательно использовать сетку (Grid). Разрезаем область кнопок на 5 частей по горизонтали. Тоесть на кнопки и пространства между ними. Указывающую и сообщающую области режем цельными кусками ...

Далее открываем окно с поведениями - Вehaviors. Там Вы увидете значки с плюсом и минусом

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

Начнем пожалуй по порядку - с первой кнопки. Наводите на него курсор и щелчком выделяйте. Следующим вашим шагом будет , то что нужно щелкнуть по кнопке с плюсом окне Вehaviors. Откроется окно , где нужно выбрать нужное вам поведение. Если Вы еще не забыли мы собирались работать с поведением Swap (подмена). Наводим курсор на Swap Image (подменить картинку) и щелкаем по нему. После этого открывается окно в котором схематично будет показана вся ваша срезка и еще так же в этом окне нужно указать , какая именно картинка поменяется при наведении курсора на выделенный вами в срезке обьект. Это ключевое предложение урока !

Красным я выделил срезанную кнопку 1. Когда откроется окно там она будет уже выделена. Вам нужно навести курсор на срезанную область №2 и выделить ее. Тем самым Вы укажите подмену при наведениии курсора на кнопку 1. Ниже так же нужно указать номер фрейма и которого должна подмениться картинка. Автоматически вседа будет указан фрейм 2. В данном случае мы работаем с кнопкой 1 , значить берем срезку области №2 из фрейма 2. Сделав выделение области №2 щелкаем ОК ... Итак мы задали поведение для подмены области №2 из фрейма 2.

Теперь зададим поведение подмены для области №3. Щелкаем снова по значку плюса. Снова откроется окно со схемой срезки и снова автоматически будет выделена срезка кнопки 1. Я ее опять выделил красным. Нужно снова навести курсор на срезанную область №3 и выделить ее. Ниже так же нужно указать номер фрейма из которого должна подмениться картинка. Задав поведение для подмены области №3 из фрейма 2 щелкаем ОК .И последнее , как закончите с поведением зайдите в окно Object и задайте выделенной там кнопке ссылку ALT и прочее ...

В Object так же можно отменить автоматическое присвоение имен и тд... Смотрите сами !
Дальше точно же таким манером задаем подмену картинок и остальным кнопкам 2 и 3. Хочу обратить ваше внимание , на типичную ошибку у новичков при работе с этим поведением. Когда переходят например к следующей кнопке 2 , то задавая ей поведение обычно забывают сменить номер фрейма. Автоматически программа всегда задает фрейм 2. Не забывайте об этом ! Выделив срезанную кнопку 2 , щелкайте по значку плюса. Потом укажите область которая должна выскочить при подмене картинок и укажите номер следующего фрейма 3 .
Задав поведение кнопке 2 , переходите к кнопке 3. Опять же еще раз напоминаю , не забудьте указать кнопке 3 смену картинки из фрейма 4 ... Fireworks любезно напишет скриптик и вам только останется умело вставить его в вашу страницу. После того , как задали поведения , открывем Edit > Copy HTML Code ... Повторятся не буду - устал ... Дальше делаем вставку кода в Dreamveaver. Кто не знает , как это делать смотрите урок Fireworks и HTML. Если поймете , как делать это поведение , то остальные (Rollover и тд...) вам покажутся просто пустяком !
Применять это поведение можно с успехом в различных вариантах ! Число областей можно задать сколько хотите ... Тут уж вам нужна только фантазия , но только не забывайте о тех кто будет смотреть ваш сайт и не любит долго ждать загрузки ... Не перегружайте сайт большим количеством подменяемых картинок ! Ну вот и все ! Мы познакомились с одним из самых интересных поведений ... Удачи вам в его применении. Как получилось у меня можете посмотреть ниже ...

***