Soft School - Macromedia DreamWeaver MX
1 1.1. Macromedia DreamWeaver MX. Анімація. Частина 1.
Як уже говорилося в минулій частині, анімація застосовна лише до верств, ну ще до графіки - але принцип графічної анімації дещо інший. Що ж являє собою анімація? - якщо ви уважно читали минулу частину, то пам'ятайте, що будь-який шар задається за допомогою кількох параметрів, таких як: координати розташування на сторінці, розміри (ширина і висота), z-індекс, а також видимість шару на сторінці (або прихованість) . Так ось, будь-який з цих параметрів може змінюватись (приймати нові значення) протягом заданого інтервалу часу. Причому зміна цих параметрів не ініціює користувач, а є відповіддю на якусь подію.
Отже, почнемо. Для початку слід дати команду Window-Others-TimeLines для відображення панелі тимчасової діаграми (Мал. 1 1 .0 1 )
Тепер потрібно створити будь-який шар, для прикладу я створю простий шар з текстовим написом, який і згодом анімуватиму (Мал. 1 1 .0 3 )
Не забувайте самі надавати шарам унікальні імена. Коли шар створений, його потрібно додати до тимчасової діаграми. Для цього слід виділити його та мишкою "кинути" на тимчасову діаграму. Після чого з'явиться наступне віконце, в якому вам буде нагадано, що за допомогою цієї панелі ви зможете змінювати координати розташування шару на сторінці, розміри (ширина та висота), z-індекс, а також видимість шару в певний момент часу. (Рис. 11.04)
Натисніть кнопку "ОК" і переходьте безпосередньо на саму панель TimeLines, де ви можете побачити доданий шар у вигляді відрізка (Рис. 1 1 .05)
Тепер давайте навчимо наш шар переміщатися поДля початку розтягніть анімацію на 400 кадрів по горизонталі. На наведеному скріншоті анімація розтягнута тільки на 15 кадрів, вам же потрібно натиснути лівою кнопкою мишки на точку, яка зараз знаходиться на 15 кадрі, і не відпускаючи кнопку миші тягнути точку на 400. Коли подовжіть відрізок, то перейдіть на 100 кадр, клацніть по правою кнопкою мишки (Рис. 1 1.06)
і в контекстному меню виберіть Add KeyFrame . Після цих маніпуляцій на часовій діаграмі з'явиться ще одна ключова точка (рис. 11.07)
Далі виділіть її мишкою, потім на самій сторінці, за допомогою тієї ж мишки, перемістіть шар, який ви збираєтеся анімувати, в будь-яке місце сторінки (як переміщувати шари я писав у минулій частині). Коли шар переміщений можна побачити, що початкова і кінцева точки з'єднані відрізком (Рис. 1 1 .08)
Далі знову перейдіть на тимчасову діаграму на 200 кадр, додайте Add KeyFrame і тягніть шар в інше місце.. загалом вам потрібно встановити ключові точки на діаграмі і вказати, де в цей час повинен знаходиться анімований шар. В результаті у вас вийде приблизно наступна картина (Рис. 11.09)
Ось така ось траєкторія руху вийшла, так само не забувайте, що крім координат розміщення шару, в кожній ключовій точці вам доступні й інші параметри для зміни (які це параметри писалося в цій же частині і повторюватимусь я не буду), змінювати параметри ви можете через панель Properties.