Назад в раздел
Практическое применение программной анимации
div.main {margin-left: 20pt; margin-right: 20pt}
Практическое применение программной анимации
В последнее время я часто встречаю термин "программная анимация". Думаю, Вы тоже сталкивались с этим названием. Когда я впервые услышал это название, я подумал, что это не очень-то и нужно. Возможно, у Вас возникает такое же предположение. Если это так, тогда этот урок для Вас.
Как обычно, давайте рассмотрим полезность этого вида анимации на примере. Возможно, Вы встречали где-нибудь такой эффект: есть набор кнопок расположенных, например, вертикально, и есть некая рамка (обычно в начале она установлена на первой кнопке), когда пользователь наводит на кнопку, рамка плавно едет до этой кнопки. Давайте попробуем реализовать такой эффект, с применением программной анимации.
Как обычно делается в таких случаях, создайте новый ролик. В настройках ролика (Ctrl-M), задайте частоту кадров равную 120 т.е. максимум. Таким образом, мы достигнем наибольшей плавности анимации. Хотя это спорный вопрос…на некоторых слабых машинах анимация может дёргаться…так что оптимизацию скорости я оставляю полностью на Вашей совести. В новом ролике создадим два слоя. Первый для кнопок, второй для рамки. Первый назовём "buttons" а второй "point" у Вас должно получиться следующее:
Конечно, кадры сейчас должны быть пустыми. Создайте четыре кнопки (именно 4 кнопки, а не 4 экземпляра одной кнопки). Назовите их "b1", "b2", "b3" и "b4". Теперь создайте четыре символа типа Movie Clip с названиями "b1_mov", "b2_mov", b3_mov" и "b4_mov". Поместите символ "b1" в "b1_mov", "b2" в "b2_mov" и.т.д надеюсь, принцип понятен. После размещения всех кнопок в мувиклипы, у вас для каждой кнопки должна получиться примерно такая иерархия:
Меняются только индексы. Теперь переходите на главную сцену и поставьте все Ваши "b(n)_mov" в слой "buttons". Разместите их точно друг под другом, используя выравнивание.
В поле "Instance name" для каждой кнопки выставьте имена: "b1", b2", "b3" и "b4" имена должны соответствовать названием кнопок в библиотеке. Теперь, в каждом символе "b(n)_mov" назначим кнопкам такой action:
______________________________________ on (rollOver) { if (_root.point._y<_root.b1._y) { _root.point._y += 5; } if (_root.point._y>_root.b1._y) { _root.point._y -= 5; } } on (press, rollOut) { _root.point._y = _root.b1._y; } ________________________________________
Этим мы проверяем, где находится наша рамка (выше или ниже данной кнопки) и проигрываем соответствующую анимацию. В строках 2, 5 и 10 замените цифру у b1, на цифру для данной кнопки (надеюсь, я понятно изъясняюсь, а если нет, то на этот случай есть пример). Кроме того в символах "b(n)_mov" поставьте по два слоя и скопируйте туда уже существующие кадры, и ещё в меню "Instance name" задайте кнопке "Track as Menu Item" (ой-ой-ой!! Научите меня говорить понятно…) Если Вы всё поняли, пойдите и купите себе пиво (Вы это определённо заслужили) :-) У вас в каждом символе "b(n)_mov" должно получиться примерно так:
Теперь переходим к созданию рамки, что намного проще. Просто в слое "point" нарисуйте рамку, поставьте её на (точнее под) верхнюю кнопку и конвертируйте этот рисунок в символ типа Movie Clip, с именем "point" а на главной сцене, в поле Instance Name задай те этому символу имя "point". Теперь запустите клип и если всё работает, то я всё же не так уж и плохо объясняю или Вы очень хорошо понимаете… Если же ничего не работает, проверьте все имена или посмотрите пример. С вопросами обращайтесь на мыло или ICQ Mail: jefmk_2000@mail.ru ICQ: 121863229
*JeF*
|
Автор: © JeF Источник:
http://www.flasher.ru
|
|
|
|