Создаем, программируем, шлифуем и раскручиваем web-caйт. Серия Быстро и легко - Алексеев Ю.М.
Скачать (прямая ссылка):
слой, который стал активным.
: Как мы уже упоминали в предыдущей главе, программа Macromedia Fireworks поддержи- вает объекты, которые хранятся в библиотеке и многократно используются созданием их копий. При этом для них можно указать, например, величину смещения объекта между кадрами, что позволяет быстро создавать анимацию. Такие называются анима-
ционными символами. Для данного символа вы можете создать изображение, указать число кадров в ролике, угол поворота при вращении рисунка, изменение размера и дру-
¦ гие параметры. Анимационные символы воспроизводятся независимо. Эти символы можно сравнить с актерами на сцене.
136
Быстро и легко создаем, программируем и рскручиваем Web-сайт
Эффект-Последовательно го затенения букв названия фирмы АТЛАНТ мы создадим с
ПОМОЩЬЮ прямоугольника, который будет перемещаться по слову на рисунке. Создадим
'а ¦• анимационный символ с нужным прямоугольником.
t ¦ ¦ ¦ ¦•'•:.>';-:•
¦:¦'.¦> Выберите команду меню Edit • Insert * New Symbol (Правка* Вставить* Новый символ). На экране появится диалог Symbol Properties (Свойства символа) (Рис. 4.27).
Eli
Name: [ Syrnbol ............______
Type: G Graphic
I-OK-1
О Animation С Button
Cared I
¦ ... ...'..-.v..
Рис. 4.27. Диалог Symbol Properties (Свойства символа) > В поле ввода Name (Имя) введите имя анимационного символа mySymbol (Мой символ).^
>• В группе элементов управления Туре (Тип) установите переключатель Animation (Анимация), чтобы создать анимационный символ.
> 'Нажмите кнопку OK, чтобы закрыть Symbol Properties (Свойства символа). На экране появится окно Symbol (Символ) для подготовки анимационного символа (Рис. 4 28).
¦ P
'І
' " Рис. 4.28. Окно Symbol (Символ) Лч,.-,-
При работе с анимационными символами полезно использовать панель Library (Библиотека).
> Если на экране нет панели Library (Библиотека), то выберите команду меню Window ¦ Library (Окно ¦ Библиотека). На экране появится группа панелей Assets (Средства) с открытой панелью Library (Библиотека) (Рис. 4.29).
В верхней части панели Library (Библиотека) отображается изображение выбранного анимационного символа, а в нижней части - список созданных символов. ¦¦"--*+-
ГЛАВА 4 .Анимация с помощью Macromedia Fireworks
137
Нарисуем прямоугольник в окне Symbol Символ).
> ' Нажмите КнопкуТЦЗна панели Tools (Инструменты). При перемещении над окном Symbol (Символ) указатель мы-¦*-'¦•'> ши будет принимать вид +.
>¦ Подведите указатель мыши к левому верхнему углу рабочего поля окна Symbol (Символ).
Library
> Нажмите и удерживайте левую кнопку мыши.
> Не отпуская левую кнопку мыши, перемещайте мышь ¦вправо и вниз. На рабочем поле появится рамка синего рис 4.29. Панель Library цвета, который показывает размеры создаваемого прямо- (Библиотека) угольника.
> Выбрав такой размер прямоугольника, чтобы в нем помещалась одна буква баннера, отпустите левую кнопку мыши. В окне Symbol (Символ) появится прямоугольник.
Нажмите кнопку на панели Tools (Инструменты) и переместите прямоугольник
так, чтобы перекрестие в окне Symbol (Символ) оказалось примерно в середине прямоугольника.
Теперь нужно указать параметры заливки прямоугольника в панели Properties (Свойства) (Рис. 4.30).
Wife!-] Х:рП
EdO»: ІАПВ-АІК ДО Щ
3l°jb
? Г7РТ1Е.
t«*jt»!|&am Що [pi
Rectangle roundness: [0_^\
Рис. 4.30. Панель свойств прямоугольника
> Щелкните мышью на значке ГЦ справа от значка (ф> для выбора цвета заливки нашего прямоугольника. На экране появится палитра цветов (Рис. 4.31), а указатель мыши изменится на .
,riyiVt -ihn
Рис. 4.31. Палитра цветов
> Щелкните мышью на квадрате желтого цвета в палитре цветов. Палитра закроется, а значок п закрасится желтым цветом. Это означает, что текущий цвет заливки будет
желтым. Прямоугольник в окне Symbol (Символ) также закрасится желтым цветом.
\
138
Быстро и легко создаем, программируем и рскручиваем Web-сайт
> В открывающемся списке справа от значка О выберите тип заполнения Solid ¦ -"(Сплошной), чтобы внутренняя часть прямоугольника заливалась пикселами выбранного цвета. „ • ¦ ¦
При заливке иногда используют текстуры, т.е. изображения, созданные с помощью специальных алгоритмов.
> В открывающемся списке Texture (Текстура) выберите тип текстуры Опух (Оникс).
.>• В поле ввода, расположенном справа от списка Texture (Текстура), введите интенсивность текстуры 100%.
> Установите флажок Transparent (Прозрачность), чтобы заливка была частично прозрачной.
Настройка параметров заливки завершена, и новый библиотечный символ готов к использованию.
> Нажмите кнопку (X] в правом верхнем углу окна Symbol (Символ), чтобы закрыть окно. В окне документа с логотипом появится выделенный маркерами прямоугольник желтого цвета со значком [T]. Это созданный анимационный символ.
Давайте переместим прямоугольник в начальное положение для анимации на рисунке..