Программный scale, rotate и левитация

В этот праздник ужасов (кто не помнит – 31 октября мир празднует Хэллоуин:) хотелось бы поделиться ужасно красивым эффектом, незаменимым для аниматора. Речь идёт об использовании синуса для анимации. Он, как и рандом, позволяет сделать множество интересных вещей.

Итак, возьмем уже готовую графику, и сделаем программную анимацию, используя этот нехитрый прием.

 

Страшную тыкву оборачиваем в клип и именуем его c_pump. Обязательно прописываем это имя в Instance name на панели Properties.

 Оборачиваем его ещё в один клип, внутри него, на новом слое (над тыквой) пишем такой код:

  1. var arg = 0;
  2.  
  3. addEventListener(Event.ENTER_FRAME, Update)
  4.  
  5. function Update(e:Event){
  6.  
  7.     c_pump.scaleX = 1 + Math.sin(arg+= 0.1)*0.1;
  8.  
  9.     c_pump.scaleY = 1 - Math.sin(arg+= 0.1)*0.1;
  10.  
  11.     c_pump.y += Math.sin(arg+= 0.4)*6;
  12.  
  13. <strong>}</strong>

Коротко по коду. Мы видим уже знакомую функцию Update, внутри которой творится вся магия. Так как синус с изменением аргумента принимает значения от -1 до 1, то мы можем использовать это в своих корыстных целях. Синусом можно менять всё что угодно. Мы же в этом примере меняем скейл тыквы и её положение по у.

Листик анимируем по той же схеме: оборачиваем в клип c_leaf, затем в ещё один, и пишем код внутри:

  1. var arg = 0;
  2.  
  3. addEventListener(Event.ENTER_FRAME, Update)
  4.  
  5. function Update(e:Event){
  6.  
  7.     c_leaf.rotation += Math.sin(arg += 0.5)*3;
  8.  
  9. }

Тут всё то же самое, только меняем значение rotation. Смотрим, какой праздник жизни у нас получился:

А вот, плавно левитируя, ведьма летит на шабаш. Всё аналогично. Меняется в данном случае только Y координата:

Как мы видим, все запредельно просто и неописуемо красиво. Если включить свою фантазию, то синус станет вашим верным помощником в анимации.

Исходник Cs5

Автор урока: Андрей Барвинко

Графика: flash-animated.com

Комментарии
Аватар пользователя JeanWinters

А как на счет того, что переменная arg постоянно увеличивается? Это же неправильно, говоря о правилах программирования.

Аватар пользователя Oksana

я бы с радостью это обсудила, но у автора статьи есть свой блог - можете написать ему и спросить,если для вас это крайне важно - http://flahhi.com :)

Аватар пользователя Oksana

я бы с радостью это обсудила, но у автора статьи есть свой блог - можете написать ему и спросить,если для вас это крайне важно - http://flahhi.com :)

Аватар пользователя George Kobyakov

Сделали по этому уроку скейл рыбок для своей игры, получилось очень няшно! И хоть пока сама игра не вышла, на видео хорошо видно ( золотые такие рыбки ) :

http://www.youtube.com/watch?v=PxRPDb4yHNs

Большое спасибо за урок, он оказался очень полезен!

Аватар пользователя Oksana

няшная игрушка, молодцы)

Аватар пользователя tiyotya

А у меня вообще ничего не выходит. Перепробовал все варианты, копировал из исходника - и все впустую. Наверное совсем тупой. Пишет: Символ "c_pump", слой "@", кадр 1, строка 5 1120: Обращение несуществующего свойства c_pump.

Аватар пользователя Oksana

дополнила немного урок - не забывайте прописывать Instance name на панели Properties.

Аватар пользователя LeeTovetz

мученья и труд все перетрут.
не знаю в чем проблема, но у символа кроме названия , которое ты вводишь при создании символа, в свойствах есть еще имя. к которому экшен скрипт обращается. его ручками вписывают. по изучай исходники .

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

Аватар пользователя George (Djaho) Kobyakov

Класс! Я такое только ручками делал, а оказывается есть волшебное средство =) Спасибо!

Аватар пользователя Sv

Спасибо. Теперь исходник работает в CS5.

Аватар пользователя Renderdoll

Ого, Оксана, Андрей у вас чудесный дует получился! Урок превосходный, так все понятно написано и так все красиво показано, что теперь, после прочтения вряд ли что-то не получится сделать! Огромное спасибо!!! Smile

Аватар пользователя Oksana

Спасибо, стараемся:)

Аватар пользователя Slybrowney

Ой, спасибище вам огромное! Чем больше вас читаю, тем больше вкусного и полезного появляется!

Аватар пользователя Anyoneelselikeyou

Да это просто праздник какой-то Smile Просто вот так вот взяли и осуществили все мои идеи сразу! А то я голову ломаю (и в каждом кадре 1 прибавляю и рандомность мучаю) - и тут вдруг - синус! Выходит не зря я эту муть в школе учила. Премного благодарствую, превосходный урок!

Что бы вы сделали, если бы точно знали что всё получится?...

Аватар пользователя Sv

При открытии исходника CS6 пришет, что файл сделан в CS6 и поэтому открываться не будет. Сделайте пожалуйста для CS5.

Аватар пользователя Oksana

пересохранила, попробуйте открыть

Аватар пользователя LeeTovetz

Фантастические уроки. Супер.

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

Пожалуйста, оставьте ваш комментарий. Спасибо!
Содержимое этого поля является приватным и не будет отображаться публично.
CAPTCHA
Вопрос для проверки
Заполните поле проверки