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

Создание анимированного 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.



Содержание раздела