Метель и вьюга

Решил попробовать изобразить метель или вьюгу. Получилось красиво, хоть и не очень похоже) Впрочем этот эффект можно использовать и для глянцевых сайтов или рекламы.

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

0. Теория: Как это делается вообще. Существует одна функция, она затаскивает  снежинки в одну и туже точку, но запускает с разницей в два кадра. Таким образом получаем первый ряд, так как траектория одна. Если б это рисовалось вручную и смещались координаты , то траекторию пришлось бы рисовать другую для каждого элемента в ряду. Точно также ставится второй ряд, но на 3-6 пикселей левее.  Т.е. во времени и пространстве порядок старта и расположения выглядит как на картинке, только вот вертикальных рядов нет, все снежинки ряда находятся в одной точке.

1. Конечно сначала выбираем надпись, фон. Я беру свой ник, делаю к нему простенькое отражение. Саму надпись конвертируем в символ Graphic, также поступаю и  с отражением. Вдальнейшем, чтобы снежинки за надписью казались больше, нужно сделать овал с градиентной заливкой от черного с прозрачностью 60 в прозрачному. Затем выделяем все три и конвертируем в MovieClip, жмем “Advanced”, там ставим галочку рядом с “Export for ActionScript” и в поле, которое стало активным, пишем “mytext”.

2.  Теперь на самой временной шкале создаем слой, в котором рисуем снежинку. Ну так как размер ее маленький, стараться особо не стоит. Будет даже лучше использовать ассиметрию. После этого, конвертируем в символ MovieClip под именем ’sneginka_ris’. Выделяем снежинку и на панели Properties указываем имя ’sn_in’. Заходим в нее (двойным щелчком), создаем новый слой под смой снежинкой, в нем рисуем круг с заливкой от полупрозрачного синего к абсолютно прозрачному. Это для того, чтобы снежинки казались одним целым. Выходим из ’sn_in’. Снова жмем F8 мувиклипу даем имя ’sneginka’ и на панеле  Properties указываем то же самое имя. Выделяем ’sneginka’ и снова конвертируем в клип под названием ’snow’, жмем “Advanced”, там ставим галочку рядом с “Export for ActionScript” и в поле, которое стало активным, пишем тоже самое. Два раза щелкаем на нем и заходим внутрь.

3. Над слоем со ’sneginka’ в ’snow’ создаем новый слой. На всю длину надписи рисуем  направляющую линию, она должна быть непрерывна и начало ее должно совпадать с центром снежинки. В свойствах слоя выбираем Guide. Затем слой со снежинкой подтаскиваем под молоточек и отпускаем, он должен немножко сместится, а молотчек на Guide слое стать эээ. змейкой типа) Выделяем снежинку и жмем ‘Q’, проверьте чтобы белый кружочек был в центре снежинки, если он не там, то просто перетащите его. В 50 кадре на слое со снежинкой жмем F6. Между ключевыми кадрами правой кнопкой мыши щелкаем и выбираем Motion Tween. Делее по вкусу расставляем ключевые точки и прозрачности. У меня крайние точки прозрачны, в 5м кадре анимации снежинка становится полностью видна а со второй трети анимации медленно пропадать. Перед первыми кадрами на шкале добавляем пустые кадры так, чтобы основная анимация начиналась с 50 кадра.

4. Теперь у нас есть полноценное движение.  Для основного эффекта мы будем дублировать этот клип, задавая его положение и регулируя размер внутренней снежинки ’sn_in’. Но если все оставить как есть, то снежинка будет просто проходить по  синусоидальной траектории перед надписью.  Чтобы вращение вокруг текста было настоящим, нужно менять порядок слоев. Поэтому во все переходные моменты наверху и внизу будут точками когда клип будет _САМ_ себя перемещать по слоям. Создаем пустой слой и называем его Actions, там ставим ключевые точки в местах, где снежинка на пике или внизу. Затем открываем панель Actions-Frame и вписываем this.swapDepths(this.getDepth()-200); если хотим чтобы далее снежинки были _за_ надписью и this.swapDepths(this.getDepth()+200); если хотим чтобы были над ней.

5.  Теперь на главной временной шкале создаем слой “Actions” и  пишем код.

stop();
//счетчик для уникаьности имен снежинок
var f = 0;
_root.createEmptyMovieClip(’main_action’,0);
main_action.attachMovie(’mytext’,'mytext’,0,{_x:200, _y:150});
//три раза вызываем функцию создания метели с разными параметрами положения и шага
metel(’snow’,50,25,10,0);
metel(’snow’,49,20,8,2);
metel(’snow’,49,15,10,4);
//собственно сама функция
function metel(mcname:String, nst:Number, xstart:Number, delt:Number, ydelt:Number) {
//эта переменная будет определять кадр с которого начнется движение снежинки
n = nst;
//первая пятерка
for (i=1; i<=5; i++) {
//затаскиваем клип из библиотеки, задаем положение
main_action.attachMovie(mcname,mcname+f+i,main_action.getNextHighestDepth(),{_x:xstart, _y:200+ydelt});
//размер будет уменьшатся с каждым следующим экземпляром
main_action[mcname+f+i].sneginka.sn_in._xscale = 50+50/i;
main_action[mcname+f+i].sneginka.sn_in._yscale = 50+50/i;
//и прозрачность тоже
main_action[mcname+f+i].sneginka.sn_in._alpha = 50+50/i;
//чтобы не было очень четко видно движения убрать такоей эффект расчески ширину самого ’snow’ немножко колеблим
main_action[mcname+f+i]._xscale = random(5)+95;
//задаем кадр с которого должно начатся проигрывание
main_action[mcname+f+i].gotoAndPlay(n);
n -= 2;
f++;
}
n = nst-2;
for (i=1; i<=6; i++) {
main_action.attachMovie(mcname,mcname+f+i,main_action.getNextHighestDepth(),{_x:xstart-delt, _y:200+ydelt});
main_action[mcname+f+i].sneginka.sn_in._xscale = 45+48/i;
main_action[mcname+f+i].sneginka.sn_in._yscale = 45+48/i;
main_action[mcname+f+i].sneginka.sn_in._alpha = 45+48/i;
main_action[mcname+f+i]._xscale = random(5)+95;
main_action[mcname+f+i].gotoAndPlay(n);
n -= 2;
f++;
}
n = nst-4;
for (i=1; i<=7; i++) {
main_action.attachMovie(mcname,mcname+f+i,main_action.getNextHighestDepth(),{_x:xstart-delt*2, _y:200+ydelt});
main_action[mcname+f+i].sneginka.sn_in._xscale = 40+50/i;
main_action[mcname+f+i].sneginka.sn_in._yscale = 40+50/i;
main_action[mcname+f+i].sneginka.sn_in._alpha = 40+50/i;
main_action[mcname+f+i]._xscale = random(5)+95;
main_action[mcname+f+i].gotoAndPlay(n);
n -= 2;
f++;
}
n = nst-6;
for (i=1; i<=7; i++) {
main_action.attachMovie(mcname,mcname+f+i,main_action.getNextHighestDepth(),{_x:xstart-delt*3, _y:200+ydelt});
main_action[mcname+f+i].sneginka.sn_in._xscale = 35+50/i;
main_action[mcname+f+i].sneginka.sn_in._yscale = 35+50/i;
main_action[mcname+f+i].sneginka.sn_in._alpha = 35+50/i;
main_action[mcname+f+i]._xscale = random(5)+95;
main_action[mcname+f+i].gotoAndPlay(n);
n -= 2;
f++;
}
n = nst-8;
for (i=1; i<=8; i++) {
main_action.attachMovie(mcname,mcname+f+i,main_action.getNextHighestDepth(),{_x:xstart-delt*4, _y:200+ydelt});
main_action[mcname+f+i].sneginka.sn_in._xscale = 30+50/i;
main_action[mcname+f+i].sneginka.sn_in._yscale = 30+50/i;
main_action[mcname+f+i].sneginka.sn_in._alpha = 30+50/i;
main_action[mcname+f+i]._xscale = random(5)+95;
main_action[mcname+f+i].gotoAndPlay(n);
n -= 2;
f++;
}
n = nst-10;
for (i=1; i<=8; i++) {
main_action.attachMovie(mcname,mcname+f+i,main_action.getNextHighestDepth(),{_x:xstart-delt*5, _y:200+ydelt});
main_action[mcname+f+i].sneginka.sn_in._xscale = 25+50/i;
main_action[mcname+f+i].sneginka.sn_in._yscale = 25+50/i;
main_action[mcname+f+i].sneginka.sn_in._alpha = 25+50/i;
main_action[mcname+f+i]._xscale = random(5)+95;
main_action[mcname+f+i].gotoAndPlay(n);
n -= 2;
f++;
}
}

Вроде всё ) Если что не так пишите, исправлю:) Кстати, кто хочет развлечься, предлагаю игровые автоматы в интернете, мне очень понравились.