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

Создание анимированного GIF-рисунка для страниц товаров

  1. В Fireworks MX можно добавлять новые слои так, что они не будут видны в предыдущих слоях. Добавьте два новых слоя, назвав их Mask и More Info.
  2. Выделите слой Mask. Выберите инструмент Rectangle и нарисуйте белый квадрат, который закрывает две последние строки слоя Location. Перетащите слой Mask так, чтобы он был непосредственно над слоем Location. Две строки текста исчезнут. Если нужно, разместите слой Mascot над слоем Mask.
  3. Выделите слой More Info и разместите его над слоем Mascot Выберите инструмент Text и введите Info. Выберите шрифт Arial Bold размером 18 пунктов.
  4. Выберите инструмент Circle. Нарисуйте круг на слое More Info, установив следующие параметры:
    • Width – 22 пикселя;
    • Height – 22 пикселя;
    • Fill – FFCC00;
    • Effect – Inner Bevel;
    • Bevel Edge Shape – Flat;
    • Bevel Width – 3.
  5. Установите задержку 10-го кадра в 10 и создайте две копии этого кадра. Если вы щелкнете на 9-м кадре, то увидите, что слои More Info и Mask не видны на панели Layers. Ваши кадры и слои должны выглядеть так, как на рис. 16.21.

    Иллюстрированный самоучитель по Web-разработке на Macromedia Studio MX › Создание анимации для Web-узла JCT › Создание анимированного GIF-рисунка для страниц товаров
    Рис. 16.21. Состояние панели Layers

  6. Выберите в меню File › Export Preview. Откроется диалоговое окно. Перейдите к папке, в которой собираетесь сохранить свой ролик, и установите такие параметры сохранения:
    • Format – Animated GIF;
    • Palette – Web Snap Adaptive;
    • Loss – 0;
    • Dither – No;
    • Colors – 128.
  7. Щелкните на кнопке Export. Когда откроется диалоговое окно, установите такие параметры:
    • Name – jct_animation_box.gif;
    • Save As – Images Only;
    • Slices – None.

    Установите флажок Include Areas Without Slices.

  8. Щелкните на кнопке Save. Вернувшись к рисунку, сохраните его и выйдите из Fireworks MX.
Если Вы заметили ошибку, выделите, пожалуйста, необходимый текст и нажмите CTRL + Enter, чтобы сообщить об этом редактору.