Заставляем синус и косинус работать на нас
12.04.2008, автор Stormit, рубрики: ActionScript, АнимацияОчень часто анимацию, которую люди привыкли делать твинингом во флэше, можно заменить скриптами. Это полезно для как для баннеров (файл весит меньше), так и для игр (повышается контроль над движением, можно использовать как игровой момент).
Ни о чем таком сложном я говорить не буду - есть простые вещи, знакомые всем еще со школы. Это функции синуса и косинуса, которые во флэше доступны как Math.sin() и Math.cos(). Для их осознанного использования, достаточно понимать, что они имеют колебательный характер (как маятник - внизу ускоряется, по бокам - замедляется), принимают всего один параметр - число(момент времени) и возвращают результат в этот момент времени (от 0 до 1). Обычно нет разницы что использовать, sin или cos, отличаться будет только начальное состояние.
(шепотом, 3cbc8ca6613ce62cc455d8ac747fc112.)
Главное, что можно результат, возвращаемый функциями присваивать любому свойству. Если делать это каждый кадр, то свойство будет колебаться. На примере ниже, я меняю таким образом _x, _y, _width, _height, _rotation. Еще ниже есть Actionscript для каждого случая.
Код просто вешаем на клип.
1) Просто меняется свойство _y для самолета
onClipEvent (load) { y0 = _y; t = 0; onEnterFrame = function(){ _y = y0 + Math.sin(t += .15)*4; } }
2) Меняем для каждой пчелы _x и _y. У каждой своя переменная времени, которая изменяется с разным шагом. Это рассинхронизирует движение по осям, если шаг одинаковый, то будет движение - восьмерка.
onClipEvent (load) { x0 = _x; y0 = _y; tx = Math.random()*10000; ty = Math.random()*10000; onEnterFrame = function() { _x = x0 + Math.sin(tx += .3) * 15; _y = y0 + Math.sin(ty += .4) * 25; } }
3) Меняем свойство _rotation для кораблика
onClipEvent (load) { t = 0; onEnterFrame = function () { _rotation = Math.sin(t += .1) * 5 - 3; }; }
4) Меняем свойство _rotation для лампы, дополнительно смещаем нижний ореол света (символ light) по _x.
onClipEvent (load) { t = 0; x0 = _parent.light._x; onEnterFrame = function(){ var k = Math.sin(t+= .05)*5; _rotation = k; _parent.light._x = x0 - k*3;//множитель подбирается } }
5) Эффект Stretch and Squash. Изменяем свойства _width и _height (внимание, разные знаки)
onClipEvent (load) { y0 = _y; t = 0; onEnterFrame = function(){ t += .5; _xscale = 100 + Math.sin(t)*30; _yscale = 100 - Math.sin(t)*30; } }
6)Имитация гравитации. Изменяем _y, но значение синуса берем по модулю.
onClipEvent (load) { y0 = _y; t = 0; onEnterFrame = function(){ _y = y0 - Math.abs(Math.sin(t += .2))*70; } }
7)То же самое, но добавил растяжение-сжатие.
onClipEvent (load) { y0 = _y; t = 0; onEnterFrame = function(){ _y = y0 - Math.abs(Math.sin(t -= .2))*70; _xscale = 100 + Math.sin(t*2)*20; _yscale = 100 + Math.cos(t*2)*20; } }
8)То же, плюс _rotation и _x.
onClipEvent (load) { y0 = _y; x0 = _x; t = 0; onEnterFrame = function(){ _y = y0 - Math.abs(Math.sin(t -= .2))*70; _x = x0 + Math.sin(t + Math.PI / 2)*30; _rotation = Math.sin(t + Math.PI / 2)*10; _xscale = 100 + Math.sin(t*2)*20; _yscale = 100 + Math.cos(t*2)*20; } }
Как видно из примеров, многое можно сделать таким способом. Это быстро и просто - идеальный случай для несложных задач. Сам регулярно использую 
Интересно на 17%
да, это отличный приём. простой, как 5 копеек, но очень эффективный.
сама часто его использую :о)
А таким способом реально анимировать птиц, которые находятся далеко (черные точечки)?
А почему нет?
Хотя, смотря что ты имеешь ввиду - крыльями так не помашешь
.. Ну если крыльям rotate приписать, сдалека не видно, что крылья не сгибаются!
Я в программинге не очень. Куда именно вешать этот код? Создаю mc, в нем два слоя. Один с кодом, второй с анимируемым объектом. Все работает, но выскакивает ошибка «Clip events are permitted only for movie clip instances». Заранее спасибо.
Этот код нужно писать не в кадр а “вешать” на клип - писать в окошке Actions при выделенном клипе
Подскажите кто-нибудь!
Вешаю на клип
onClipEvent (load) {
y0 = _y;
t = 0;
onEnterFrame = function(){
tank._y = y0 + Math.sin(t += .15)*4;
}
}
мне пишут
**Error** Scene=Scene 1, layer=Layer 6, frame=1:Line 1: Clip events are permitted only for movie clip instances
onClipEvent (load) {
Total ActionScript Errors: 1 Reported Errors: 1
Что не так?
Так ты по ошибке код в кадре прописал, а нужно на клип “вешать” (когда нужный MovieClip выделен)
Спасибо
Протупил чего-то
Мне нравится способ представления статей в блоге, доступно и интересно! Что касается самого колебания - спасибо, как раз имеется место , где можно применить это колебание вместо моего самодельно-топорного.
Stormit, вот тут Math.sin(t += .15) я не понимаю, что означает точка перед 15, объясни, плиз!
.15 == 0.15
можно писать и так и так
просто некоторые нолик не пишут в начале, я тоже.
Спасибо, не знал что так можно
что означает вешать на клип обесните плиз!
Выделяете клип, нажимаете F9 и пишете код в окошке (в левом верхнем углу окошка будет написано ACTIONS - MOVIE CLIP)
генеально большое спасибо стормит!
ой, прошу прощения но как и какой вы делить клип? я совершенно не умею работать в програме.
Тогда вам нужно сначала освоить азы программы. Это блог о разработке флеш-игр и он подразумевает что у пользователей есть базовые навыки. В двух словах этого не объяснить.
Объясните пожалуйста как такое же сделать в AS3
Уже не надо разобрался. Надо на фрейм добавить action:
имя объекта.addEventListener(Event.ENTER_FRAME,myFunction);
var y0 = circle.y;
var t = 0;
function myFunction(event:Event) {
имя объекта.y = y0 + Math.sin(t += .15)*4;
}
mcFax:
Не рекомендовал бы в АС3 вешать на фрейм что либо вообще. Пользуйтесь главным классом (и классами в общем), а на кадры лично я вешаю не больше чем stop();
как я приручил параболу)
Сам в школе ни когда не изучал синус и косинус и ни как не мог понять как он работает даже при прохождении всей книги Delphi, вот все понял разобрал, записал в тетрадь, а синус и косинус тупо на обум, а тут я наконец разобрался как это работает. +1. Сейчас во флэш я начинающий. Пытаюсь находить пути решения разных фиговин и попутно изучаю книгу по аs2, называется наиболее полное руководство. На этом блоге я нашел много интересного, что поможет мне наконец таки сделать первый флэш ролик, рисую я ужасно, анимирую еще ужаснее, но надеюсь с помощью интервала функции и модификаций найденых здесь обрывков кода я наконец смогу что-то сделать.
Очень большая просьба, не могу и все я справиться с анимацией ног, которые должны быть как у реального человека. Я даже перересовал анимэшного персонажа, хатя для меня это адский труд, переделал по другому и получился мой. Но не могу справиться с ногами.
Кстати больше всего впечатлил кораблик)) Классно выглядит.
Спасибо! Подправил под AS3 и добавил в сниппеты.
PS: а всё же, что такое “3cbc8ca6613ce62cc455d8ac747fc112″ ? Я заинтригован, а поисковик молчит.. )
Хороший сайт . Круто) спасибо)