Программный снег (As3)

Снег, сделанный с помощью action script, совсем не такой, как настоящий. Он тёплый, нежный и совсем не прогнозируется синоптиками:) 

Сделать собственный программный снег очень просто.

Шаг 1

Рисуем прямоугольник шириной чуть больше чем ширина рабочей области (по высоте произвольный) и оборачиваем его в клип marker. Присваиваем ему Instancename c_begin. 

Располагаем его над рабочей областью. Дублируем этот клип и ему присваиваем имя c_end. Его размещаем внизу, под рабочей областью. Выделяем эти два клипа и оборачиваем ещё в один клип container.

Шаг 2

Рисуем нашу снежинку. В нашем случае это комочек снега, нарисованный с помощью OvalTool с радиальной заливкой. Оборачиваем её в клип part, отметив галочкой ExportforActionScript и назначив класс PartClass:

 

Убираем part с рабочей области.

Шаг 3

Переходим внутрь клипа container и на новом слое в первом кадре пишем код:

  1. var clip:MovieClip;
  2.  
  3. var t:Number, count:int = 0;
  4.  
  5. addEventListener(Event.ENTER_FRAME, Update)
  6. function Update(e:Event){
  7.      if(++count%5 == 0){ // Каждый 5-йкадр
  8.           clip = new PartClass(); // Создаёмобьекткласса. (вместоduplicateMovieClip as2)
  9.           clip.x = Math.random()*c_begin.width; // случайнаяпозицияпо x
  10.           clip.y = c_begin.y;
  11.           clip.speed = 5;
  12.           clip.a = 1 + Math.random() * 1; // случайнаяамплитудаколебаний
  13.           clip.t = Math.random() * 10; // случайныйначальныйаргументсинуса
  14.           clip.scaleX = clip.scaleY = 0.6 + Math.random() * 0.5; // случайныйразмер
  15.           addChild(clip);
  16.           // каждойснежинкевешаемсвойобработчиксобытия
  17.           clip.addEventListener(Event.ENTER_FRAME, ClipUpdate);
  18.      }
  19. }
  20.  
  21. function ClipUpdate(e:Event){
  22.      var clip:MovieClip = e.currentTarget as MovieClip;
  23.      clip.y += clip.speed * clip.scaleX; // заставляемснежинкупадать
  24.      clip.x += clip.a * Math.sin(clip.t); // добавляемколебанияпосинусу
  25.      // еслиснежинкадостиглаc_end, удаляемеё
  26.      if(clip.y>=c_end.y)     {
  27.           clip.removeEventListener(Event.ENTER_FRAME, ClipUpdate);
  28.           removeChild(clip);
  29.      }
  30. }

Запускаем:

Если сейчас немного раздвинуть края флешки так, чтобы были видны маркеры то увидим процесс формирования и уничтожения снежинок Smile

Заменим комочки на снежинки из новогоднего клипарта.

Внутри символа part удаляем наш комочек и размещаем по кадрам снежинки. Слоем выше пишем строчку кода, которая отвечает за случайный выбор снежинки:

gotoAndStop((int)(Math.random()*totalFrames+1));

Вот так выглядит таймлайн:

Запускаем:

Чтобы сделать вообще круто, можно заставить снежинки вращаться. В основной код в Update дописываем:

clip.r = Math.random() * 10 - 5;

в ClipUpdate дописываем:

clip.rotation += clip.r;

Получаем вот такую красоту:

 

Можно ещё поиграться с 3D поворотом и, дописав  в ClipUpdate такие две строчки:

  1. clip.z += 3*clip.a * Math.sin(clip.t);
  2. clip.rotationX = clip.rotationY = clip.rotationZ += clip.r;

получим нечто такое:

 

Ещё стоит отметить, что клип container можно крутить (в том числе и в 3D), изменять ему размер и т. д. При этом получаются красивые, неповторимые эффекты.

Исходник (Cs5) 

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

P.s. Добавлю от себя  немножко снежных картинок: зимние истории от французcкого иллюстратора и аниматора Pascal Campion.

 

flash-animated.com

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

А есть ли возможность выложить тоже самое, но под html5? Была бы очень благодарна

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

Добрый день. Прекрасный урок, спасибо. Однако у меня сложился вопрос: файл проигрывается в swf прекрасно, снег падает. Но при экспорте/публикации ролика в gif, avi и т.д. - снега нет. Подскажите пожалуйста как вывести в такие форматы, но чтобы все сохранилось!

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

Доброго времени суток.Я в этих делах-новичок.Но хочу научиться,как эту красоту делать.Вообще ничего не получается.Всё делаю,как написано,а выдаёт ошибки:
Символ "container", слой "@", кадр 1, строка 9 1120: Обращение несуществующего свойства c_begin.
Символ "container", слой "@", кадр 1, строка 10 1120: Обращение несуществующего свойства c_begin.
Символ "container", слой "@", кадр 1, строка 26 1120: Обращение несуществующего свойства c_end.

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

Не всё делаете как написано... Судя по ошибкам - просто забыли назначить клипу Instancename. Будьте внимательны!)

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

Назначила,но наверное не то что нужно.Сейчас буду снова пытаться что-то лепить.Спасибо за подсказки.

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

Если всё назначено - значит код прописали не туда.
Удачи!)

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

а куда же его тогда записывать,-эх,-всё так сложно и запутано...буду пробовать...

Аватар пользователя Руслана

Всем привет...а кто подскажет...для проги Sothink SWF Quicker какой скрипт нужен...заранее спасибо всем...

Аватар пользователя Ирина 8

Урок классный,спасибо)
У меня вопрос, мои снежинки падают только с правой стороны,как сделать так ,что бы снежинки падали равномерно?))))

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

Здравствуйте!
Без исходника трудно сказать в чём проблема. Начальное положение снежинки задаётся в этой строчке clip.x = Math.random()*c_begin.width; и зависит от размеров клипа c_begin.
Надеюсь у вас всё получится. С наступающими праздниками!)

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

Спасибо за урок, у меня 2 вопроса. 1 Как увеличить количество снежинок появляющихся за кадр. 2 При низкой скорости снежинки разлетаются конусом, как уменьшить нижнюю часть конуса, заранее спасибо

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

Если Вас не затруднит записать видео как сделать этот урок,я буду очень благодарен...
Просто я только начинаю работать с адоб флеш...

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

Здравствуйте.
Вряд ли сейчас получится записать видео. Попробуйте разобраться так, ведь тут понятно написано, плюс есть исходник.

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

1) Уберите условие if(++count%5 == Innocent. Если нужно ещё больше - выполняйте в цикле эту функцию (Update) несколько раз.
2) Не совсем понял каким конусом) Снежинки колеблются по синусу. Поиграйтесь с числовыми значениями, возможно вы имели ввиду амплитуду clip.a = 0.2 + Math.random() * 0.2; ?

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

Я могу вам как ни будь файл отправить? Вы бы увидели и все поняли. И второй вопрос, как сделать что-бы снежинки появлялись не сверху контейнера, а по всей площади.

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

Ну так залейте на какой нибудь файлообменник или в облако и скиньте ссылку.
Для того, чтобы изначально заполнить экран снежинками нужно написать отдельную функцию по типу Update, только случайное заполнение нужно делать и по x и по y, а потом в цикле выполнить эту функцию, скажем 1000 раз.

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

http://yadi.sk/d/_56BssWRBqop4 образец, по задумке это будет пыль в объемном свете. Да забыл сказать я в программировании не очень хорошо разбираюсь, точнее не разбираюсь совсем.

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

Ну если не хотите разбираться, то наложите просто маску на клип с пылинками и всё) Но, как не странно, у меня снежинки нормально летят, не разлетаясь по сторонам. Вот, смотрите)

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

От скорости зависит, чем ниже тем больше разлет. Так и сделал, спасибо за помощь.

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

А, ой, упустил этот момент) На здоровье)

Аватар пользователя Прохожий

извиняюсь, а как снежинки из клипарта вставить? Они в архиве, там еще какие-то папки внутри...

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

чтобы их открыть вам нужно установить иллюстратор (файлы в .ai  и .eps). а затем копипастом во флеш перенести

Аватар пользователя Антон Василевский

Очень неплохие примеры. Чем-то напомнило мне это - http://flashmaster.org.ua/post/104. Хотя выглядит несколько иначе. Кстати не знал про случайные вывод снежинки как в том примере.

Аватар пользователя e.artem.volga

Всё, разобрался сам=)

NiTRoEx

Аватар пользователя e.artem.volga

Урок конечно хороший, но не могу понять куда сам код вставить?

NiTRoEx

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

Здраствуй народ! Скажите где можно скачать программу AS3, но новичок в этом деле! Искал в интернете, но не нашел!

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

as3 - язык программирования в  программе adobe flash

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

http://ru.wikipedia.org/wiki/ActionScript
значит плохо искали
сначала разберитесь, что Вы ищете

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

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

Спасибо! Очень познавательная статья.

Хотел спросить по поводу параметров клипа:
clip.speed
и
clip.a
Разве у MovieClip существуют такие параметры! В коде мы их нигде не определяем. Откуда они берутся?

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

Прекрасный вопрос.
Это чудесное свойство AS3, которое я открыл для себя не так давно. Если коротко: класс, назначенный объекту - генерируется автоматически. И если мы его не сохранили в папку с проектом, то все новые поля добавятся по мере их поступления)) Программисты рекомендуют сохранять файл с классом на диск и прописывать нужные поля, чтобы не возникало таких вот вопросов.

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

Не знал этого. Теперь все понятно. Спасибо.

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

Все гораздо сложнее.
В доках к MovieClip написано следующее:

public dynamic class MovieClip

Тут ключевое слово dynamic -- оно означает что мы можем добавлять произвольные свойства к объекту, компилятор не будет ругаться на это, а в момент выполнения программы нам за это ничего не будет (не будет эксепшинов)
Если в описании класса нет этого слова, то компилятор нам не даст скомпилировать данный код. Если же мы "хаками" (myClassInstance["myUnknownProperty"] = 1) попытаемся обратится к такому свойству в момент выполнения программы, то поймаем эксепшин.

Например Sprite описан как public class Sprite. И с ним такие трюки не пройдут.

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

Ага, с не динамическими классами не пробовал. Спасибо за бдительность!

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

Ах, какие картинки! Нет слов.

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

Красота неописуемая. Супер. Спасибочки.

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

Аватар пользователя Алексей

Здорово)
Только в 1 и 22 строчках нет пробела между словами (varclip).
Так что у кого выдаёт ошибку, исправьте на: var clip

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

спасибо большое, поправила!

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

О, Спасибо за подробный код! Это ж сколько всего можно сделать: заменить снежинки на всёчтоугодно_дажесанимацией, поменять направление, скорость... Спасибо пребольшое!

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

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