Простейшая
анимация
Вооружившись знаниями из предыдуших уроков. Попытаемся сделать в Fireworks сделать что-нибудь анимированное или по русски говоря мультик :-) Сначало я расскажу , как буквально за минуту , не мудрствуя лукаво можно сбацать классную анимированну кнопку со стандартным размером 88 на 31 пиксела . Надеюсь , что Вы усвоили , как открывать новый документ и писать в Fireworks. Поэтому не будем повторятся ...
Открыли документ размером 88 на 31 пиксела , цвет произвольный . Открываем редактор текста и пишем ПРОБА , так что бы это слова поместилось в заданные размеры . Тут подскажу одну хитрость , иногда бывает трудно отцентровать текст в маленький по размеру документ и что бы не испытывать проблем с этой неприятностью я всегда делаю так ... Щелкаю View > Zoom In , после этого документ увеличится в два раза. Расширяю окно , что-бы нормально видеть нашу кнопку ... Можно и проще сделать. Щелкаем КЛИКОМ по кнопке с изображением лупы в панели инструментов и потом щелкаем по документу . Он увеличится , а используя значек открытой ладони можно прокручивать документ в окне ... В дальнейшем же , что бы обратно уменьшить документ , нужно щелкать View > Zoom Out .
Ладно центруем текст . Ну вот , все получилось красиво ... Далее открываем Commands > Animation > Rotate and Scale (там есть еще один вариант - просто вращение Rotate). Но мелочиться не будем , выбираем вращение и изменение ... и все мультяшная кнопка готова. Скрипт от Fireworks сам создаст все эти изменения , Вам же можно предварительно просмотеть , как там все вертится и крутится , нужно только воспользоваться панелью контроля фреймов (The frame controls) для просмотра анимации. Этот проигрыватель расположенный в нижнем правом углу . Вот как получилось у меня , неплохо для начала и все очень быстро ... Как же сохранить анимацию напишу ниже , когда расскажу о примере посложней , где нужно будет все делать вручную ...
Сразу скажу , то приведенный ниже пример так же не сложный. Прочитав о нем попытайтесь осмыслить эту информацию и потом уж , дай Бог Вам побольше фантазии ...
Создадим новый документ , цвет произвольный , а размер возьмем стандартного баннера 470 на 60 пикселей . Открываем сразу два нужных нам в этом деле окна: Window > Optimize - окно оптимизации обьекта и Window > Frame - окно контроля фреймов .Теперь призадумаемся , а что бы такого нам сделать. Да так , что бы ...
Начнем пожалуй с оптимизаии ... и козе понятно , что анимацию нужно делать в GIF формате , значит так и выставляем в Optimize ... Однако шутки в сторону ... приступим к делу ! Щелкаем в панели инструментов по кнопке А , переводим КЛИК в поле нового документа и еще раз щелкаем , открывается редактор текста , пишем уже много раз испытанное нами слово ПРОБА . Размер выставляем такой , что бы это слово заняло треть площади баннера .И сразу одсказываю один быстрый способ как быстро отцентровать обьект в вашем документе. Щелкаем - Commands > Document > Centеr in Document. И все !
Основная цель , которую я сейчас преследую , что бы Вы поняли. Как создавать и редактировать фреймы , а так же и сохранять анимацию. Ведь когда я сам вооруженный умной книжкой о Fireworks 3 (на английском) решил с наскока понять это , то скажу честно получилось не сразу ... Нервы потрепал себе порядочно ... Ладно я кажется отвлекся . После того , как мы написали слово , отцентровали его и придали ему нужный размер , выделим его Pointerом (слово должно выделиться) и только потом обратим наше внимание на окно Optimize .
Переходим в Stroke , там выбираем категорию строки Stroke category - нефть Oil. Следущее имя строки Stroke name - Textured Bristle. Дальше выбираем текстуру Texture - грунт Grain. Назначаем цвет - красный #CC3300 . После этого , как мы таким образом разукрасили наше заветное слово обратим внимание на окно с фреймами. Там уже автоматически появился первый фрейм - Frame 1 . Наводим КЛИК на эту строку , где написано Frame 1 и прижимаем левую кнопку мыши , вместо КЛИКА должен появится такой значек в виде странички с загнуты правым краем и черной стрелочкой и не отпуская переводим этот значек в нижнюю часть окна , там где изображен значек в виде прямоугольника (справо второй New Frame).
Как только Вы наведете на него , этот значек должен прижаться , все отпускайте левую кнопку мыши ... Поздравляю , Вы создали новый фрейм ! Он будет называться Frame 2 , наведите на строчку , где он находится КЛИК и щелкните. Он должен выделится , отлично ! Теперь Pointerом выделяем снова наше многострадальную ПРОБУ (это очено важно) и обращаемся к окну оптимизации. Там в категории строки Stroke category меняем значени Oil , выставляем None и после этого все эти выкрутасы , которые мы сделали с ПРОБОЙ отменятся , оно снова должно принять первоначальный вид , как мы его написали . Далее перейдем в этом же окне оптимизации в раздел наполнитель (заливка) Fill . Наверняка у Вас там в категории наполнителя Fill category будет выставлено значение сплошной Solid , выставим же линейный Linear и тогда буквы слова окрасятся в два цвета - цвет строки Stroke и цвет наполнителя Fill .
Далее в очередной раз обратим внимание на окно с фреймами и проделаем еще раз операцию по созданию следущего фрейма , как мы делали это , когда создавали Frame 2 . Так же наводим КЛИК на строку с Frame 2 и переводим на значек нового фрейма - теперь у нас есть Frame 3 . Сразу же КЛИКОМ выделим его , потом наводим Pointer на слово ПРОБА и снова выделим его . Опять же обращаемся к окну оптимизации и в разделе Fill category отменяем Linear , выставляем значение сплошной Solid . Думаю , что остановимся на трех фреймах.
Посмотрите вниз , где там Ваш проигрыватель фреймов , щелкните по пуску и посмотрите , как там все крутится . Еще можно отредактировать время , через которое фреймы будут пробегать . Смотрим на окно с фреймами . Там за значком о помощи в виде вопросительного знака , есть так же еще один значек.
Щелкним
по нему , откроется меню . В самом низу находим Properties , щелкаем
и откроется окошко , где можно выставлять время через которое фреймы будут
пробегать . По умолчанию там всегда будет стоять значение 20. Я не буду
ничего трогать , а Вы выделив нужный Вам фрейм можете заменить это время
... Ну вот и все , теперь перейдем к заключительной части наших стараний . Нужно сохранить наш анимированный баннер и сделать это можно так . Так как такие баннеры обычно не должны "весить" больше 12-14 Kb то лучше воспользоваться такой штукой , как Export Wizard . Щелкаем File > Export Wizard , в открывшемся окне ставим галочку напротив Target export file format , ниже выставляем нужный нам обьем файла 12 Kb . Щелкаем по Continue , снова открывается окно. Там должно быть нескольно значений , но нам важно , что бы там было отметка только в Animated GIF , дальше щелкаем по Continue и откроется окно с предосмотром , где можно убрать лишние цвета и посмотреть на сколько вытянуло Ваше творение . После того , как все настроили , проверили фреймы смело щелкайте по Export .
Ну вот кажется и все ... устал , у меня вот какой получился баннер , а у Вас ? Очень надеюсь , что мой урок станет тем же , чем стало для Архимеда обыкновенное купание в ванне , когда он увидев выплеснувшуюся воду и радосто воскликнул - ЭВРИКА , так и Вы , может быть радостно подпрыгните на стуле прочитав эти строки ... Удачи в изучении этой замечательной программы Fireworks компании Macromedia . Кроме этого можно посмотреть на сайте Webclass , как делать анимацию , если конвертировать обьект в Symbol.
***
