Иллюстрированный самоучитель по Web-разработке на Macromedia Studio MX

Техника анимации в Fireworks MX. Соединение.

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

В Fireworks MX можно создавать эффектные ролики, которые можно разместить непосредственно в Web или экспортировать во Flash MX.

В этом разделе вы освоите технику использования графических символов и передачи их во Flash MX. Мы сфокусируем внимание на работе с объектами. Вы создадите рекламный баннер из графического символа и освоите интересный эффект.

Соединение

Соединение (tweening) – это процесс, при котором программа создает промежуточные состояния для некоторого объекта исходя из его начального и конечного состояния. Лучше всего это делать с графическими символами. Например, для того чтобы получить изображение сжимающегося объекта, вы создаете его обычное изображение и уменьшенное до 10%. Программа соединяет эти два изображения, создавая некоторое количество промежуточных. Для того чтобы создать соединение, выполните следующее.

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

Иллюстрированный самоучитель по Web-разработке на Macromedia Studio MX › Анимация в Web › Техника анимации в Fireworks MX. Соединение.
Рис. 14.14. В этом окне можно задать число кадров для анимации

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

  1. Выберите последний кадр ролика. Нажмите клавишу ALT и, удерживая ее, перетащите копию ботинка в нижний правый угол кадра.
  2. Выберите инструмент Scale и предельно уменьшите копию.
  3. Выделите маленький ботинок и щелкните, удерживая нажатой клавишу SHIFT, на ботинке, который расположен посредине рабочей области. Соедините два этих экземпляра (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. Выделите оба экземпляра, щелкнув на них и одновременно нажав клавишу SHIFT, и соедините их, как раньше. Для числа кадров установите значение 8.
  5. Щелкните на кнопке ОК и воспроизведите ролик. Сохраните файл.
Если Вы заметили ошибку, выделите, пожалуйста, необходимый текст и нажмите CTRL + Enter, чтобы сообщить об этом редактору.