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

Эскиз содержания. Утилиты Macromedia.

Покадровая анимация во Flash

Создание анимации во Flash не так сложно, как это кажется. В основе ее лежат действия, происходящие между кадрами. В нашем сценарии буква С должна вытеснить букву Т на последнее место в строке. По мере того как С продвигается по сцене, символ Shoes перемещается в свою конечную позицию рядом с логотипом. Итак, чтобы создать такую анимацию, выполните следующие действия.

  1. Щелкните на 5 кадре уровня Shoes и сделайте этот кадр ключевым с помощью команды меню Insert › Keyframe. Аналогичным образом сделайте ключевыми кадры 15 и 20 слоя Shoes. Таким же способом создайте ключевые кадры слоя С – 5, 6, 15 и 20.

    Замечание
    Можно также добавить ключевые кадры, щелкнув правой кнопкой на кадре и выбрав в контекстном меню пункт Keyframe. Пользователи компьютеров Мае могут закрыть контекстное меню с помощью клавиши Control и щелчка мышью
    .

  2. Мы создали ключевые кадры, и теперь можем создать движение. Щелкните на кадре 5 слоя Shoes и перетащите этот символ на рабочую область, пока он не коснется буквы С, после верните ему горизонтальное положение (как было описано ранее). Когда что-то ударяется о другое, последнему объекту передается кинетическая энергия и он приводится в движение. В нашем случае буква С начинает свое перемещение в верхний левый угол.

    Совет
    Существует еще один способ поворота объектов. Чтобы вернуть слову shoes горизонтальное положение, выберите в меню команду Window › Transform, щелкните на символе shoes и ведите значение 0 в соответствующем поле панели Transform
    .

  3. Выберите букву С в кадре 6. Выберите инструмент Free Transform, щелкните на срединной метке левой границы символа и переместите ее влево. Количество движения выберите сами.
  4. Щелкните на ключевом кадре 15 слоя С и переместите его в середину рабочей области. Выберите объект Shoes и переместите его справа от буквы С.
  5. Щелкните на ключевом кадре 20 слоя С и перетащите символ, чтобы он находился между символами J и Т. Символ Т в 20 кадре переместите вправо так, чтобы С занял позицию, не пересекающуюся с остальными буквами. Щелкните на символе Shoes и переместите его в среднюю точку левой части рабочей области.
  6. Будем считать, что ключевые кадры созданы. Остается создать анимацию с помощью Flash. На слое Shoes щелкните между кадрами 1 и 5. Выберите в меню команду Insert › Create A Motion Tween. Между кадрами появится стрелка. Теперь создайте промежуточные действия для всех неключевых кадров слоев. Щелкните на любом промежуточном кадре между 6 и 15 слоя С и также создайте промежуточный кадр. Добавьте все остальные промежуточные уровни слоя С. Если запустить последовательное выполнение всех кадров, вы увидите анимацию.

Создание проявляющегося символа во Flash не составляет труда. Когда речь идет о прозрачности, во Flash используют термин Alpha. Применяемый уровень выражается в процентах, т.е. полная прозрачность соответствует 100%. Будьте аккуратны с этой техникой, так как она увеличивает объем файла и может замедлять его выполнение на маломощных компьютерах.

Если в анимации используются примитивные формы, добавление любого эффекта на поверхности оживит ролик. Если какой-либо эффект определен как ненужный, это лучше предугадать, чтобы на его создание и последующее удаление не затрачивались средства и время. Для создания эффекта проявления символа (fade in) выполните следующие действия.

  1. Откройте библиотеку и перетащите экземпляр символа Mascot в верхний правый угол рабочей области 1 кадра. После этого отметьте кадр 10 как ключевой.
  2. Выделите талисман в 1-м кадре, щелкнув на нем мышью в рабочей области (stage). Выберите в списке Color окна свойств значение Alpha и установите для уровня прозрачности значение 0. Талисман исчезнет.
  3. Щелкните на любых двух промежуточных кадрах между 1 и 10 слоя Mascot и добавьте промежуточные кадры. Если теперь прокрутить ролик от 1 до 10 кадра, талисман будет постепенно появляться.
  4. Добавьте 15 ключевой кадр слоя Shoes и перетащите экземпляр символа Shoes в кадр. Добавьте 20 ключевой кадр на слой Shoes.
  5. В слое 20 установите для прозрачности символа Shoes значение 0 и создайте промежуточные кадры.

Когда все будет готово, воспроизведите созданный ролик, нажав клавишу Enter. Сценарий воспроизведен в точности. Если вы хотите поместить его сразу же на страницу в Web, то это будет выглядеть смешно, так как сценарий будет периодически повторяться до бесконечности. Чтобы это исправить, выполните следующие действия.

  1. Добавьте ключевой кадр 25 на слое Actions.
  2. Щелкните правой кнопкой на этом кадре и выберите в контекстном меню пункт Actions, или выберите в меню Window › Actions, или нажмите клавишу F9. Откроется панель Frame Actions.

    Замечание
    Действия во Flash представляют собой программу, которая выполняется, когда в кадрах заданы заголовки
    .

  3. В левой части панели находится набор значков, в котором на всех кнопках изображены книги со стрелками. Щелкните на книге Actions, после чего в конце клипа дважды щелкните на слове Stop. В пустой области появится строчка программы. Она и генерирует прохождение всех кадров ролика и последующую его остановку. Теперь закройте панель Actions, и вы увидите на 25 кадре слоя Actions маленькую букву а, выделенную курсивом.

На данном этапе вы можете протестировать клип или сразу опубликовать его в Internet, поскольку вам предоставляется возможность определить узкие места проигрывания клипа в Internet. Тестирование видеоклипов подробно описано в главе 15. Публикация позволяет создать фрагмент HTML, равно как и отдельный файл .swf, который помещается в Dreamweaver. Так как мы создаем только эскиз ролика, достаточно будет сохранить и опубликовать его с помощью команды меню File › Publish (или комбинации клавиш SHIFT + F12).

После того как создана анимация Flash, самое время поместить созданный файл SWF в Dreamweaver MX. Для того чтобы добавить программу HTML и файл SWF, созданный во Flash, выполните следующие действия.

  1. Завершите работу приложения Flash и откройте новый документ Dreamweaver MX.
  2. Вставьте созданную анимацию с помощью команды меню Insert › Media › Flash или комбинации клавиш Control+ALT + F.

    Существует и другой способ добавления анимации в документ Dreamweaver MX: откройте страницу, сгенерированную Flash, в Dreamweaver MX.

  3. Протестируйте анимацию в браузере. После воспроизведения ролика закройте браузер и вернитесь в Dreamweaver MX.
  4. Выбрав элемент Flash на странице, щелкните на кнопке Flash Edit в окне свойств. Загрузится приложение Flash, и будет показана папка, в которой расположен искомый файл.
  5. Откройте файл Flash (с расширением .fla). Когда запустится Flash, в верхней части окна вы увидите надпись Editing from Dreamweaver MX.
  6. Откройте символ С, разгруппируйте (break apart) его с помощью комбинации клавиш CTRL + B и измените его цвет на красный. Щелкните на кнопке Done.

Flash повторно экспортирует файл, и когда вы его протестируете в браузере, символ С будет красным.

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