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

Создание анимации в Dreamweaver MX



Создание анимации в Dreamweaver MX

Ниже описывается, как создать ролик, в котором изображение ботинка будет перемещаться по прямой линии на странице. Позже вы узнаете, как сделать так, чтобы изображение перемещалось по дуге.
Чтобы создать анимацию в Dreamweaver MX, выполните следующее.
1. Откройте файл ShoeAnimate. htm из папки с упражнениями к главе 14, которую вы скопировали с Web-узла этой книги.
2. Щелкните на вкладке Common панели Insert, а потом щелкните на кнопке Draw Layer. Щелкните на странице и перетаскивая мышь, нарисуйте слой. Когда вы отпустите кнопку мыши, появится слой в виде белого квадрата с маркером вверху. Кроме того, в верхнем левом углу страницы появится значок этого слоя. Инспектор свойств изменится в соответствии с этим.
3. Щелкните внутри слоя и выберите в меню Insertolmage. Найдите файл Shoe.png и откройте его. В слое появится изображение бодинка. Если вы хотите изменить его размер, перетащите маркер изменения размера.
4. Откройте окно шкалы времени, выбрав в меню Window=>Others=>Timeline. Появится пустая шкала времени.
5. Выберите слой с ботинком и выберите в меню Modify=>Timeline=>Add Object to Timeline. Появится полоса анимации в первом канале, пересекающая 15 кадров.
6. Выберите 15-й кадр в первом канале шкалы времени. Перетащите слой Shoe на правую сторону страницы. Когда вы отпустите кнопку, на странице появится линия, указывающая направление и длительность перемещения объекта по странице..
7. Три стрелочки в верхней части окна шкалы времени служат органами воспроизведения. Этими стрелками можно пользоваться так же, как кнопками обычного проигрывателя. Кроме того, вы можете перетаскивать головку воспроизведения непосредственно по шкале времени. Воспроизведите ваш ролик.
Создание объекта, движущегося по дуге, не так сложно, как может показаться. Вам нужно добавить ключевой кадр к шкале времени и переместить слой к его конечной позиции на шкале. Dreamweaver MX сделает все остальное.
Для создания анимации, движущейся по дуге, сделайте следующее.
1. Щелкните правой кнопкой на 8-м кадре шкалы времени. В открывшемся контекстном меню выберите Add Keyframe. В 8-м кадре появится точка.
2. Щелкните на слое и перетащите его вниз. Появится линия, направленная вниз, как показано на Рисунок 14.24. Воспроизведите ролик.







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