TVSet Under Repair – Stars from murejib on Vimeo.
Video-concept-art based on «TVset Under Repair» track.
Flash scripted particles building the structure out of chaos.
Composed and FX-d in After Effects.
http://www.myspace.com/tvsetunderrepair
Флеш програмированные частицы создают структуру из хаоса.
Эффекты+композинг сделаны в After Effects
Popularity: 65% [?]
2 комментария октября 15, 2009
Рано или поздно (а может и никогда) появляется необходимость перевести флеш ролик в видео формат. Возможно, Вам, как и мне, когда то давно, заказали ролик для телевидения, или Ваша анимация настолько грузит процессор (как у меня когда то) что смотреть ее можно только предварительно переконвертировав в видео. И тут Вы (как я когда то) не знаете , а как это сделать лучше всего?
Постараюсь обзорно рассказать о максимуме способов, известных мне.
Как нам всем хорошо известно, флеш-анимация бывает покадровая и программная. Более того, можно держать анимацию вложенной в графические клипы, а можно в мувиКлипы. Думаю все знают, что графические клипы отличаются от муви тем, что анимация, вложенная в них, проигрывается уже в среде разработки, независимо от того, сколько вложений было сделано. Платить за это приходится невозможностью применять к этим клипам фильтры, режимы наложения и скрипт. Все это можно делать с муви клипами, но они отображаются на временной линейке в виде застывашего первого кадра, что иногда бывает крайне неудобно. Нет идеального решения, спасибо разработчикам.
FLA в видео.
Вариант когда нам нет необходимости публиковать SWF файл.
Если Вы — честный аниматор, который работает исключительно с графическими клипами, Вам повезло. Вся твиновая анимация, вся покадровка, все вложения в графические кипы может быть спокойно экспортированы прямо из среды разработки: File / Export movie…
Остается выбрать формат — это может быть GIF, это может быть секвенция PNG, или непосредственно видео, в зависимости от вашей ОС и кодеков, которые ее населяют. Если нужно видео с альфа каналом (прозрачный фон) – самым простым решением будет экспорт PNG-секвенции (24 bit with alpha channel). Любой видео редактор примет такую секвенцию совершенно спокойно.
Если в анимации использованы мувиКлипы, а также скрипт, то единственным верным способом будет экспорт в формат QuickTime. Начиная с Версии AdobeFlash CS3 можно перевести любую анимацию довольно честно. Альфа канал так же возможен, главное не забыть отметить необходимость генерировать его при экспорте (Ignore stage color, generate alpha channel) . В видео редакторах достать альфа канал можно будет как Straight Unmatted.
Вот казалось бы и все )) Но не так все радужно. На моей практике были случаи, когда загрузка процессора во время анимации была такой серьезной, что задержка была явно видна в экспортированном видео.
SWF в видео.
Cуществует также возможность сделать видео из готового SWF ролика.
Например AfterEffects и AdobePremier примут несложный флеш-ролик со всеми его альфа-каналами. Даже кости будут приняты, что в общем то неудивительно, ведь на выходе вся кинематика конвертируется в обычные ключевые кадры. А вот скрипт будет безнадежно утерян, что тоже ясно. Во время импорта флеш ролика выполнения скрипта происходить не может, так что в дело идут только ключевые кадры.
Если Вы работаете под Windows — то для Вас создан отличный инструмент Flashants swf2video. С его помощью можно сделать видео даже из интерактивного флеш ролика. При этом он достаточно прост в настройке и управлении. Более того, он работает на основе флеш-плеера, установленного в системе, так что ему доступны все версии скрипта от ас1 до ас3.
Сейчас существует какая то его ПРО модификация, но поскольку я давно не слежу за WIN-софтом, как порядочный мак-юзер, то ничего о нем сказать не могу. Почти все что нужно есть и в этой версии.
Как видно из панели управления, нужно задать длину ролика в кадрах (это важно, если ролик весь на скрипте, например, и длинна его основной линейки всего 1 кадр)
Можно экспортировать ролик сразу с аудио, можно без аудио, и потом озвучить его в программах монтажа, можно задать экспорт без компрессии, или выбрать кодек для сжатия. Чего нельзя сделать, так это изменить глубину цвета, и экспортировать альфа канал. Полагаю, что как раз в версии ПРО эти опции должны были быть добавлены, иначе это никакое не про.
Еще одна потеря – никакие операции по подгрузке других внешних роликов или всяких там XML учтены не будут. Так что видео из сайтов с ним не сделаешь 
В остальном же это прекрасный и простой использовании инструмент. Если Вы не на маке
Если же Вы на маке, то тут придется или ставить виртуальные машины, чтобы запускать вражескую ось и из нее пользоваться swf2avi, или искать другие пути.
Существует такой софт как Macvide FlashVideo converter.
На данный момент он работает только с флешками до 9-й версии, и AS2, как сказано на оффициальном сайте.
Мне доводилось его тестировать, и я заметил, что для профессиональной работы подходит мало. Альфа-каналом и не пахнет, постоянные задержки в анимации. Возможно он будет совершенствоваться, так что я продолжу следить за его развитием, ведь на данный момент это, кажется единственная разработка в этом направлении для мака.
Экзотический, но очень действенный метод — работа с так называемыми скринкастерами, программами, которые записывают все, что происходит на экране. Если ролик тяжелый, и анимация в нем притормаживает, можно компилировать его с FPS равным 1 кадр в секунду, и такую же частоту поставить скринкастеру, попросив его сварганить на выходе PNG секвенцию, которую потом легко собрать в монтажке с нужной частотой кадров.
Если вдруг Ваш ролик должен появится в телеэфире, то надо помнить несколько вещей.
На телевидении используется построчная развертка сигнала, поэтому, если в ролике есть ровные горизонтальные линии, они будут стробить (мелькать). Слишком яркие цвета могут рвать картинку на части на старых телеках, ну и мощные контрасты тоже не всегда хорошо выглядят на старых добрых трубках.
Чтобы избавиться от строба, видео сигнал надо обраотать вертикальным блюром с силой размытия не больше одного пикселя (в некоторых редакторах можно поставить 0.5, где то только целые числа)
Полезно наложить на видео сигнал зерно. То есть обычный шум, совсем немного, чтобы картинка не выглядела слишком плоско. Только важно не переборщить ))
И самым полезным будет сужение цветового диапазона. Во многих редакторах есть специальные плагины и пресеты вроде Broadcast colors. Суть в том, чтобы не было абсолютно черных и абсолютно белых областей, так что если таких плагинов не нашлось, можно воспользоваться штатными средсвами цветокоррекции, и просто сдвинуть диапазон цвета “откусив” с каждого края хотя бы по 5%.
А в заключении хочу сказать вот что. Если Вы знаете, что делаете флеш-анимацию для того, чтобы потом перевести ее в видео — выбирайте пути решения Ваших задач, в учетом того, что потом придется сделать для конвертации ))
Popularity: 41% [?]
10 комментариев сентября 24, 2009
Тяжел и труден путь аниматора, и иногда, чтобы не было так тяжело, аниматоры придумывают как сделать жизнь еще тяжелее.
Tricot Machine || Les peaux de lièvres from Dare To Care Records on Vimeo.
Музыкальное видео снятое в технике стоп-моушн, изготовленное из более 700 связанных вручную ..ээээ… шарфиков? шапочек? В общем поэтика канадской зимы заставляет делать аниматоров немыслимые вещи ))
Director: Simon Laganière
Producer: David Valiquette
DOP: Steve Desrosiers
Knitter: Lysanne Latulippe
Popularity: 7% [?]
Один комментарий сентября 15, 2009
Я давно знал, что Артур де Пинс гениальный аниматор )
Geraldine by Arthur de Pins
Еще одно подтверждение: старая как мир история, главный герой Геральд однажды проснулся женщиной. Версия Артура де Пинса ни на секунду не позволяет отвлечься или заскучать. Моя жена, только выйдя из ванной, простояла с полотенцем на голове весь мультфильм
Popularity: 7% [?]
мая 23, 2009
По мотивам предидущего поста собрал парад персонажей.
Под катом вас ждет индюк и мегабайт анимаций.
или на Vimeo: http://vimeo.com/4784051?pg=transcoded_email&sec=4784051
И еще раз ссылка на то, как это работает в контексте сайта.
Popularity: 9% [?]
5 комментариев мая 21, 2009
Ну, вот и закончил я мега труд с волшебством )
При наведении на персонажей ожидайте магию. По клику можно приблизить картинку.
Из минусов – общая картинка напрягает процессор.
В последствии выложу персонажей отдельно, устрою так сказать выставку для посетителей блога.
Popularity: 6% [?]
Один комментарий мая 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: 23% [?]
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: 24% [?]
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: 17% [?]
3 комментария апреля 24, 2009
| Пн | Вт | Ср | Чт | Пт | Сб | Вс |
|---|---|---|---|---|---|---|
| « Июл | ||||||
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | |||