По мотивам предидущего поста собрал парад персонажей.
Под катом вас ждет индюк и мегабайт анимаций.
или на Vimeo: http://vimeo.com/4784051?pg=transcoded_email&sec=4784051
И еще раз ссылка на то, как это работает в контексте сайта.
Popularity: 6% [?]
5 комментариев мая 21, 2009
Ну, вот и закончил я мега труд с волшебством )
При наведении на персонажей ожидайте магию. По клику можно приблизить картинку.
Из минусов – общая картинка напрягает процессор.
В последствии выложу персонажей отдельно, устрою так сказать выставку для посетителей блога.
Popularity: 4% [?]
Один комментарий мая 21, 2009
Сегодня я обращусь к очень старому материалу )
Частенько темы для статей в этом блоге я подчерпываю из общения с людьми в профильных форумах. И вот недавно возник вопрос о том, как сделан один из моих прелоадеров.
Речь идет о незаконченном (к моему сожалению) проекте, который весь построен на покадровой анимации. Некоторые части этого проекта можно видеть у меня в портфолио.
Итак речь идет вот об этих циферках:
Неважно что это по сути: прелоадер, часы, таймер, еще какой либо счетчик. Суть в том, что есть клип (movieClip) с анимацией перехода от одной цифры в другую от нуля до девятки, зацикленную в финале снова на ноль.
В ключевых фазах (кадр в котором отрисована целая цифра) установлены кадры со скриптом:
stop(); this.value = 3;
Конечно, если сейчас в кадре отрисована цифра 2, value будет равно 2, если 8 – то value=8 и так далее.
Таким образом клип будет знать, какую цифру он сейчас отображает )
В случае с прелоадером, нам надо поместить на сцену два таких клипа: один для десятков, другой для единиц. Для часов таких клипов будет как минимум 4 (часы и минуты) или даже больше. Остановимся для простоты примера на прелоадере.
Дадим каждому соответсвенно имя des_mc и ed_mc:
Остается только написать скрипт прелоадера, который будет собирать загруженный процент всего флеш-ролика, и отделять десятки от единиц, проверять каждый клип на его текущее значение (value) и в случае, если новое найденое значение не равно текущему значению клипа (des_mc или ed_mc), запускать анимацию нужного клипа.
onEnterFrame = function():Void { var tot:Number = _root.getBytesTotal(); var ldd:Number = _root.getBytesLoaded(); var proc:Number = Math.round((ldd/tot)*100);//вычисляем процент var des:Number = Math.floor(proc/10);// выделяем десятки var ed:Number = proc-des*10;//выделяем единицы if (proc>98) { // если процент будет равен 100 то счетчик слетит в нули // чтобы этого не произошло, фиксируем максимум на девятки des = 9; ed = 9; } if (des_mc.value != des) { des_mc.play(); } if (ed_mc.value != ed) { ed_mc.play(); } if (ldd>=tot) { //скрипт запуска флешки play(); } };
Popularity: 18% [?]
2 комментария мая 16, 2009
Задача – надо анимировать линию, летящую по произвольному пути. )) Stroke эффект одним словом.
Задача 2 – анимировать процесс рисования некоей произвольной фигуры.
Если кому то много букв — смотрим видео версию.
Если кому то жалко трафика — читаем ниже.
Все может быть решено довольно просто.
1. Рисуем законченный путь нашей линии (кривая)
2. Дублируем кривую на новый слой.
3. Создаем круглый шейп и конвертируем его в графический клип.
4. Слой с дублем кривой превращаем в моушн-гайд для круглого шейпа.
5. Делаем анимацию шейпа по всему пути.
6. Выделяем фреймы с моушнГайдом и шейпом, вырезаем их и создаем новый графический символ в билиотеке, куда и вставляем вырезанные фреймы. Или пользуемся необычайно полезной штукой Layers manager, который можно найти тут: http://flash-animation.ru/category/plugins/ (Лерика, если ты это читаешь поправь линки! Прямая ссылка на пост о плагине не работает!!!)
7. Временно переводим моушнГайд в обычный слой, чтобы видеть путь в клипе маски.
8. Возвращаемся на сцену – совмещаем кривую и клип.
9. Возврашаемся в клип маски, и восстанавливаем моушнГайд для слоя с кривой.
10. Слой с клипом, в котором находится анимация превращаем в маску для слоя с изначальной кривой. Ура.
Задача 2.
1. Переводим клип с анимацией в ранг MovieClip. Дадим ему instance-имя masker.
2. Обернем masker в еще один мувиКлип с instance-name = mask_mc
3. Конвертируем кривую в мувиКлим с instance-name = line_mc
4. Пишем на таймлайне с линией и маской нехитрый код.
var mask_count:Number = 1; mask_mc.masker.stop(); onEnterFrame = function():Void { var mc:MovieClip = mask_mc.masker.duplicateMovieClip("mask"+mask_count,mask_count); mc.gotoAndStop(mask_count); if(mask_count == mask_mc.masker._totalframes) { delete onEnterFrame; } mask_count++; } line_mc.setMask(mask_mc);
5. Готово.
Popularity: 27% [?]
10 комментариев апреля 29, 2009
Сейчас я работаю над одним весьма интересным проектом — это будет всего лишь интерактивная флеш-шапка, но она будет полна анимации с алогичным волшебством: кони-рыбы, люди-фрукты и так далее ))
В процессе работы, я уверен, будет накапливатся масса интересных и полезных мелочей, коими я конечно же поспешу поделиться. Сейчас таких мелочей есть две: программный растеризатор сложного вектора. Вектора будет много, и он как пить дать убъет процессор; пришлось выдумывать хитрые вещи. Но об этом позже, сначала я должен убедиться в эффективности выбранного решения ))
Сегодня же я расскажу о колесах. Будет скрипт )) Несложный, но он даст нам чудное колесо, и оно будет вращаться в точности в соответсвии с тем, как далеко продвигается то, к чему это колесо крепится ))) Итак, под кат, там есть небольшой мультик ))
Оставим пока лошадей ) (Я намерен, кстати выложить видео запись процесса работы над этой анимацией – так сказать серия Animator at work)
Понаблюдайте за каретой. Колеса, как видите вращаются весьма правильно )) Они следуют всем законам земным и божеским. Вы думаете, я сидел с линейкой и мерял кадр за кадром – каково смещение? Нет. Я вспомнил, что в школе я неплохо разбирался в геометрии ))
Итак, каждое колесо запаковано в мувиКлип, сама карета с ее вложенной анимацией также упакавана в мувиклип.
Каждый клип колеса имеет точку регистрации ровно в его центре, чтобы колесо вращалось вокруг своей оси.
Из геометрии мы знаем формулу длины окружности L = 2PI*R, где R – радиус.
В правильном колесе радиус – это половина ширины клипа.
Рассуждаем логически: когда наше колесо повернется на 360 градусов, оно должно сместиться на расстояние L. Супер! Значит, если колесо повернется на один градус, расстояние будет равно L/360! Запомним это число, и повесим на колесо событие onEnterFrame в котором смотрим — на сколько сместилась карета (моушвтины тоже считаются!), и считаем угол поворота – дистанцию делим на L/360. Вуаля.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | init(wheel1); // обучаем первое колесо init(wheel2); // обучаем второе колесо function init(mc:MovieClip):Void { mc.radius = mc._width/2; // собрали радиус mc.baseX = mc._parent._x; // запомнили начальную позицию кареты // l = 2PI*R - ах, геометрия... mc.degreeLength = (2*3.1415926*mc.radius)/360; // смещение при повороте на один градус mc.onEnterFrame = function():Void { var distance:Number = this.baseX - this._parent._x; // на сколько сместилась карета? this._rotation = -distance/this.degreeLength; // поворачиваем колесо } } |
Popularity: 15% [?]
3 комментария апреля 24, 2009
Еще один блог о флеш-анимации. Чем больше – тем лучше, вот что я вам скажу. Доброжелательный кот обещает уроки по флеш анимации в общем, а так же о ее применении в геймдеве. Впрочем – пойдите, почитайте. И за ухом почесать не забудьте. Коты, вроде бы, это любят )
Popularity: 14% [?]
2 комментария апреля 9, 2009
Вернулся из Вологды, где 28-29 марта проходил фестиваль Мультиматограф V, а также, как выяснилось (!) RAFPUG – и всё это в одно время в одном месте )) Кто из аниматоров был не в теме – очень удивлялись, какое отношение к анимации имеет семинар Ивана Дембицкого о плагинной архитектуре )) Шире взгляд, товарищи!
В фетивальной программе мне удалось принять участие с коротким фильмом «Пупыри», выставлявшимся в номинации Мультфильм. О чудо! Работа была отмечена спец призом с формулировкой «За пупырь и хорошую анимацию» )) Теперь я могу повесить диплом на стенку и во дни тягостных сомнений убеждать себя в том, что анимация – это то, чем стоит заниматься )))
Позволю себе немного побрюзжать ))) Поскольку все участники имели возможность посмотреть все работы прошедшие преселект, мне удалось составить представление об общем направлинии и уровне работ.
Скажу сразу – все неоднозначно. Фестиваь всеобъемлющий и наряду с весьма качественной анимацией трехмерной и трех-минус-один-мерной, представлены были работы в худшем смысле слова флешовые )) – слабый сценарий, отдаленное представление об анимации как таковой, ну и слабая реализация в целом. Впрочем, все начинают, и, надеюсь, люди которые хотят всерьех заниматься анимацией, начнут искать материалы для самообразования и совершенствования. Потенциал был фактически в каждой работе. К слову сказать, свою работу я тоже могу покритиковать во многих аспектах и расцениваю ее как учебную ))
Но, возможно, в том и прелесть фестиваля, что он дает возможность показать свои работы зрителю. Когда ты делаешь свой фильм на 13,3 ” мониторе ноутбука, и вдруг видишь его на огромном экране в концертном зале ))) Ощущение просто чудесное )) Понимаешь что не единой работой жив человек, есть еще что то и во спасение души )))
Popularity: 10% [?]
13 комментариев марта 30, 2009
Ну вот и на закуску ))) еще немного персонажной анимации.
В ближайшем будущем обращу внимание на шейп-анимацию с кинематикой, и соответсвенно инструменту Bind Tool
Popularity: 12% [?]
9 комментариев января 21, 2009
Вашему вниманию видео туториал по костяшкам.
Если размер картинки Вас не устраивает – пройдите по ссылкам на мою страницу на Vimeo и скачайте исходное видео.
Flash CS4. Bone Tool from murejib on Vimeo.
Popularity: 87% [?]
21 комментарий января 18, 2009
