Пупыри
Ну вот, а пока лежал блог, я трудился над философской притчей ))
Вашему вниманию короткий флеш-мультфильм:
Пупыри (1.7 Мб)
Popularity: 4% [?]
3 комментария октября 30, 2008
Повышение уровня пафоса.
Попал в список “Лучшие флеш-аниматоры рунета”Несколько удивлен был сначала, но потом подумал – все таки есть анимационные работы, которыми можно гордиться ) Теперь могу смело задирать перед заказчиками нос и не уступать ни цента за работу )))
Однако теперь буду стараться соответсвовать и искать время на новые проекты в этом направлении )) Благо идей полно )
Popularity: 3% [?]
4 комментария июля 2, 2008
Viva, UAFPUG#3 !
Свершилось ) Итак, я посетил свой первый FPUG ) До сих пор произошедшее будит во мне массу положительных эмоций и впечатлений, посему я не готов сколь-нибудь рационально описать все, что было )) Да и не буду ) Отчеты написаны Ростом (Гуру! Гуру и крестный отец флеш-блогосферы пост-советского пространства, победитель Жоржей и источник позитивной кармической энергии)), Kresteleff (Вот с кого надо брать пример: эмоционально, по существу и с фотофактами — пять баллов!) Кто еще? Комментируйте оставляйте ссылки!
Организация — пять баллов. Лерика и со-товарищи — так держать! На протяжении всей встречи-поездки чувствовал себя беззаботно ) Задержка на час из-за тех-сложностей — еще одно подтверждение — первое слово дороже второго )) Сказали сразу, что начало в час — все — против кармы не попрешь ) В час и начали ) Но вы не думайте — я не замечание делаю )) Организация все-равно супер. Онлайн трансляция, тематический чат, все удобства, и свободное течение масс на afterparty ))) — все легко и непринужденно.
С интересом послушал доклад Александра Колесника из Тунгуру, наверное наиболее актуальный для меня доклад. Денис “Хитри” Романко и Олег “Animefish” Акимов тоже подготовили отличные доклады, отличные презентации, но для меня это было скорее не новое знание, но хорошее повторение пройденного и усвоенного материала. Однако в любом случае всегда любопытен опыт коллег, их приемы и способ мышления. Унция дегтя: для себя отметил некую сумбурность повествования — надо бы детальнее прорабатывать именно подачу материала, чтобы мысль докладчика точнее достигала своей цели, поменьше нырять с головой в мониторы, не терять связь с аудиторией и не дублировать то, что и так понятно из толково сделанных презентаций.
Донецк. Отличный город. Сказочный город. Ухоженный, какой то прозрачный что-ли — просторный. Я понимаю что я видел только несколько главных улиц —но это и хорошо ) Приятнее оставить о городе хорошее впечатление, чем искать изъяны. Не такое уж и плохое место, чтобы застрять в нем… 
Фоток от меня не будет (фотоаппарат забыл(( ) — их опубликуют другие участники (ребятки, оставляйте линки в комментариях, пожалуйста;) ) — но зато я выложу видео с afterparty, (снятое и смонтированное на свежеприобретенном макбуке, ура) эксклюзив еще тот, наглядно иллюстрирующий, что флешер — это больше чем… В общем, это Широкие Люди, скажу я вам ))
UAFPUG Gathering BAND – Calling on the Great Animator.
14.4 мегабайт
Popularity: 4% [?]
10 комментариев июля 1, 2008
Имитация изометрии.
Старый, но приятный трюк: анимация изометрического изображения.
Такая штуковина очень проста в изготовлении.
Надо только сообразить, что мувиклипы с двойным дном таят в себе скрытые возможности ))
Если к примеру клип, который вращается вокруг своей оси, поместить в клип, который сжат по вертикали (_yscale = 75) то мы получим имитацию вращения изометрического изображения.
А если несколько изображений положить друг на другом как блины – получится объемное изометрическое изображение которое можно крутить, как душе угодно )
Самое забавное в этом методе – это моделирование модели.
Делается это на таймлайне. 1 кадр – это дно, последний кадр – вершина нашей блинной скульптуры.
Вот, к примеру – как выглядит клип из которого нарезается приведенная выше анимация:
Алгоритм построения прост:
- Создать общий контейнер для всей фигуры;
- Создать в нем N пустых контейнеров(N=_totalframes клипа, составляющего фигуру) с _yscale = 75 (варируется) ;
- В пустой контейнер N аттачится клип-фигура и останавливается на кадре N+1;
А вот собственно совершенно простой код:
// на сцену нужно в нужном месте положить клип под именем holder var distance:Number = 1; // дистанция между "кусками" var speed:Number = 5; // скорость вращения var scaleFactor:Number = 75; // масштабирование по Y var slices:Number; // количество кусков (определим позже) // функция, создает контейнер для куска, и вставляет в него // клип-фигуру с установкой нужного кадра. // n = порядковый номер куска function attachSlice(n:Number):Void { var slice:MovieClip = holder.createEmptyMovieClip("slice"+n,n); // в библиотеке символ, из которого делим фигуру снабдить linkage=sculpture slice.attachMovie("sculpture","gfx",0); slice.gfx.gotoAndStop(n+1); slice._yscale = scaleFactor; slice._y = -n*distance; } // В начале, создадим первый кусок (дно) и заодно узнаем, // сколько в нем кадров, чтобы установить значение slices attachSlice(0); slices = holder.slice0.gfx._totalframes; // выкладываем все остальные куски for(var i=1; i < slices; i++) { attachSlice(i); } // вращение фигуры // (тут можно определить и другое поведение - вращение от клавиатуры, мыши и т.д.) holder.onEnterFrame = function():Void { for(var i=0; i < slices; i++) { this["slice"+i].gfx._rotation += speed; } }
Можно получить вполне грациозную табуретку
Или вот такое подобие сканирования человека ))
Popularity: 6% [?]
5 комментариев мая 15, 2008
Имитируем Blend Path.
Набор графических инструментов Flash скуден, как небезосновательно считает огромное число дизайнеров, привыкших к Corel, Illustrator и FireWorks.
Да скуден. Но нам дан таймлайн и мозг. Сегодня мы сымитируем известный эффект (даже не знаю как он правильно называется)) Вот такой.
Все это нарисовано исключительно на flash. Никаких импортов и копипейстов. Ни один редактор векторной графики, кроме Flash, использован не был.
1. Рисуем кривую с помощью PenTool (P).Рисуем аккуратно, чтобы не было ни одной лишней опорной точки.
2. Ставим ключевой кадр (в моем примере 20) и задаем между первым и последним Shape Tween (можно с easing для пущего эффекта).
3. Включаем режим OnionSkinOutlines, выделяем все 20 кадров и переходим на 20 кадр. Выбираем Subselection Tool (A) и начинаем двигать наши опорные точки. Преимущество метода на лицо – редактируя положение точек мы сразу видим конечный результат – это очень удобно. Если где то что то перекутили не так – сразу видно, что шейптвин сбивается.
4. Теперь Разбиваем анимацию на ключевые кадры. Включаем режим EditMultipleFrame, вырезаем всю графику (сначала выделить все control+A, потом вырезать cоntrоl+X), удаляем кадры анимации и вставляем вырезанное на место.
Можно было, кстати, к шейпу формы применить и шейп цвета. Но мы раскрасим нашу абстракцию по другому.
5. Положите под кривые полностью прозрачный прямоугольник и сконвертируйте все это в MovieClip. На панели PropertyInspector назначьте BlendMode = alpha.
6. Нарисуйте прямоугольник с потрясающей воображение градиентной заливкой и также сконвертируйте ее в MovieClip, но положите этот клип под клип с линиями.
7. Теперь выделите оба клипа – и снова – в муви клип. Этому мувиклипу задайте режим blend Mode = Layer (или любой другой режим, если хотите. В самой первой картинке статьи, к примеру, использован Add).
8. Вернувшись на сцену вы увидите результат. Осталось навести под этой красотой тематический восторг и вы – народный умелец, доказавший, что классические дизайнерские абстракции можно с легкостью творить и в Flash IDE.
Popularity: 15% [?]
4 комментария апреля 29, 2008
Баннер, хочешь похудеть? Спроси меня – как.
В баннеростроении есть особая прелесть — оптимизация. Для меня эта задача сродни с хорошей логической игрушкой.
Сегодня в очередной раз меня спросили об изготовлении баннеров, — редкий случай, когда заказчик интересуется заранее – а разве вообще можно в такие размеры вписать что то приемлемое. Низкий поклон и моя благодарность. Такой интерес – это редкость.
Написал в ответ письмо, и подумал – хорошо бы это письмо прочитало как можно большее количество заказчиков.
Поэтому, публикую свои мысли о баннерах.
Баннер – особый жанр. Его основа – лаконичность и эффектность (с посылом в эффективность) И горе флеш-разработчику, если о лаконичности не позаботилась ни креативная команда, ни дизайнер. Зачастую заказчик не знает, да и не должен знать с какими трудностями и ограничениями приходится сталкиваться, ему нужен результат. Но задача исполнителя проекта (креативная кманда/дизайнер/менеджер/флешер в конце концов) – зная подводные камни предложить заказчику такое решение задачи, при котором все будут довольны – будет красиво блестеть и прыгать, продажи клиента вырастут до небесных чертогов, а количество матерных слов сказанных флеш-разрабочиком сведется к нулю.
Из чего состоит флеш-баннер? Из картинок и буковок. И все это движется и меняет свои размеры и цвет.
Исходя из этих нехитрых нужд выводим основных потребителей драгоценных килобайт:
- Растры.
Не стоит думать, что если растр большой (я имею в виду геометрические размеры – ширину и высоту), то он заранее плох для баннера. Конечно это важно, но не стоит и забывать о том, что сложный растр, с большим количеством мелких деталей также опасен непомерным весом. А при оптимизации (компрессии) эти детали все равно теряются или искажаются до безобразия. Лично я не люблю жестко скомпрессированый грязный растр. Он портит картинку, дешевит ее. Растр должен присутствовать в разумных количествах. Логично использовать небольшие растры в тех местах, где нельзя обойтись вектором, или когда аналогичный вектор весит больше растра.
ХИТРОСТИ ДЛЯ РАЗРАБОТЧИКОВ:
- для облаков можно использовать небольшие растры, увеличивать их в баннере (облако все равно расплывчатое, лишний блюр не повредит), и можно компрессировать такой растр достаточно жестко (вплоть до 15 – 20%) после чего не забыть на клип с таким облаком повесить эффект brightness = 100. Все погрешности компрессии скроются и мы получим милое растровое облако при минимуме веса
- если какой-то большой кусок растра кадрируется (обрезается) и при любых движениях никогда целиком не входит в кадр – смело режьте те участки, которых никогда не будет видно. Нам не нужны лишние килобайты, не участвующие в процессе. - Векторные картинки.
Они тоже имеют свой вес – каждая ключевая точка – плюс к общему весу. Кривая весит больше прямой – обычная математика. Для описания одного отрезка используется две точки, для описания одной кривой – три, как минимум. Сложный, неоптимизированый вектор часто бывает даже тяжелее растра. Учитывая рендер флешовой картинки некоторые мелкие детали стоит сразу исключать или упрощать, ибо они все равно будут смазаны, вес увеличится, а красоты и гармонии не прибавит. Если борьба с весом идет не на жизнь, а на смерть — в ход идет все, убираем все лишние опорные точки, где можно меняем кривые на прямые, участки близкие по цвету упрощаем или вообще объединяем, градиенты сбрасываем на свалку истории. Не забывайте, зачастую картинка находится в кадре очень мало, и на мелкие детали зритель просто не успевает обратить внимание.
Вот перед вами весы. Слева – красивые, детально отрисованные – их вес 4 килобайта. Справа – давайте без придирок, ни чуть не хуже. Немного не такие, но не хуже. 1,8 килобайт.
Теперь прокликайте по сцене и сравните их в увеличенном состоянии. Ужасающее зрелище. Но во время ролика, эти весы присутствуют на сцене менее секунды, при этом треть времени фейдятся из белого. И зачем мне более 2-х лишних килобайт когда лимит – 15?
ХИТРОСТИ ДЛЯ РАЗРАБОТЧИКОВ
- Используйте символы. Два одинаковых рисунка отнимут больше килобайт, чем два символа. - Тексты.
Тексты бывают сглаженные и не сглаженные. С последними очень просто иметь дело – с ними ничего нельзя сделать, да и не нужно. Весь вес уходит только на строку, которую вы пишете. Сглаженные шрифты требуют внедрения глифов (это, кто не в курсе – векторное изображение буквы). К счастью, внедряются не все буквы по отдельности, а только те, которые участвуют в ролике. Для слова МАМА нужно всего два глифа. Конечно, если вы создали динамическое поле и внедрили в него все буквы русского алфавита, то тут уже сами виноваты. Для слова МАМА весь алфавит и не нужен.
ХИТРОСТИ ДЛЯ РАЗРАБОТЧИКОВ:
- Если уже совсем невмоготу и вы не знаете откуда брать эти несчастные десятые килобайта – вспомните, что некоторые латинские буквы равны русским.
- В некоторых случаях помогает злобный ход. Допустим тексты использованы в графике как элемент. Причем элемент достаточно мелкий. Такой, что в общем то детально буквы нельзя разобрать. Я в этих случаях выбираю три четыре буквы, которые наиболее обобщенно представляют весь алфавит и заменяю ими текст. Белиберда получается страшная, но в итоге этого никто не видит.
Вот посмотрите. Страница слева весит 5.8 кб, справа 3.1 кб
- Анимация.
Основные пожиратели драгоценных килобайт …. ключевые кадры и твины. Парадоксально, но именно с удаления лишних твинов и ключевых кадров нужно начинать оптимизацию. Почему? Потому что это результат труда флеш-разработчика, о котором никто не знает и не должен знать – мы видим анимацию а не количество кадров. И именно ляпы с лишними кадрами могут отнять драгоценные пару килобайт от качества картинки, кропотливо созданной дизайнером.
За годы борьбы с баннерами я разработал тактику максимального уменьшения веса анимации и эта тактика – программная анимация. В самом страшном случае, можно свалить все символы на сцену и завести всего два слоя – для графики – один большой кадр, и для кода, на ключевых кадрах которого мы и будет прописывать когда показать или спрятать, и куда привести клип. Конечно это затрудняет разработку, но увы – таковы правила игры – баннер должен вписаться в лимиты размеров.
Более того. Сейчас я сдам вам нехитрый кусок кода, на котором я строю все свои баннеры. Он, конечно, неоптимален. В нем не реализованы анимации цвета (пока было без надобности), но это работает и спасает мне килобайты. Если вам по душе такая идея – модифицируйте скрипт, пишите свой собственный – боритесь за свои килобайты !!!//всего три функции для анимации. // animate - линейное движение от знаения к значению // easeOut - плавное прибытие в точку // easeIn - плавный уход со сцены // испольование: // Перед тем как применить одну из функций к клипу, // создается соответсвующий объект, в котором указывается // какие свойства клипа надо анимировать - // альфу, _x или _y, _xscale и т.д // animate. Пример использования //анимация _x с шагом 0.3 // анимация _alpha с шагом 1 // mc.animate = {_x:0.3,_alpha:1}; // animate(mc); function animate(mc) { mc.onEnterFrame = function () { if(!_paused) { for (var props in this.animate) { this[props] += this.animate[props]; } } } } // обычно используется для того чтобы клип плавно // приехал в нужную точку. Начально положение задается // или скриптом, или в среде разработки - куда положим // оттуда и приедет. //mc.easeout = {_x: 20,_y:20}; //easeOut(mc); easeOut(prize0); function easeOut(mc) { mc.onEnterFrame = function () { if(!_paused) { for (var props in this.easeout) { var delta = this.easeout[props] - this[props]; this[props] += delta/3;// 3 - скорость передвижения } } } } //эту функцию я использую чтобы плавно выкинуть клип со сцены // поэтому обекту easein я передаю начальный шаг, // а не конечную точку. // с каждым кадром шаг перемножается на 2, что дает // прирост в скорости. Когда значения выходит за рамки // -3000 3000, анимация останавливается. // ПРИМЕР: // mc.easein = {_x:0.5,_alpha:-1}; // easeIn(mc); function easeIn(mc) { mc.onEnterFrame = function () { if(!_paused) { for (var props in this.easein) { this[props] += this.easein[props]; this.easein[props] *= 2; if(Math.abs(this[props])>3000) this.easein[props] = 0; } } } } //// А ВОТ ТУТ ВНИМАНИЕ! // Существет плавило, по которому пользователь имеет право // остановить баннер кликнув на stop в контекстном меню. // Чтобы наша программная анимация соображала когда ее // остановили - существует постоянная проверка на равенство // текущего кадра предидущему. var _paused = false; var cf; onEnterFrame = function() { if(_currentframe == cf) _paused = true; else _paused= false; cf = _currentframe; }
Вот пожалуй и все, что я пока хотел сказать о баннерах.
Если вам известны какие-то хитрости и способы по борьбе с лишним весом – комментируйте, делитесь )))
Popularity: 18% [?]
9 комментариев апреля 28, 2008
Покадровая анимация синусоиды.
Навеяно сегодняшней статьёй из хитрого блога.
Автор справедливо заметил, что порой покадровая анимация спецэффекта способна сохранить ресурсы процессора для более важных процессов.
Мне вспомнился метод, которым я пользовался, если мне нужно было отрисовать покадровую анимацию некоей развевающейся субстанции (хвост, щупальце и т.д.)
В основе всего — один графический клип, который колеблется из стороны в сторону – для этого есть motion tween с EaseIn и EaseOut (а в восьмой версии также можно управлять easing-ом вручную)
1. Итак, создаем клип.
Конвертируем его в graphicClip. Снова конвертируем полученный клип в графику и внутри делаем анимацию колебания. Для этого я создаю 10 и 20 ключевые кадры. в 10-м смещаю клип на нужное мне расстояние (максимум амплитуды).
Получаем вот такую анимацию (на основной линейке необходимо добавить столько кадров, сколько длится анимация клипа – здесь 20).
2. Далее я просто дублирую этот клип несколько раз (10 в примере), и каждому из них задаю способ проигрывания loop (по умолчанию) и в качестве первого кадра задаю смещение на N кадров для каждого последующего клипа (В примере: 1 клип – 1 кадр, 2 клип – 3 кадр, 3 клип – 5 кадр … 10 клип – 19 кадр)
Получаем отличную живую синусоиду.
3. Теперь, допустим, мне нужно один конец синусоиды зафиксировать.
Для этого я собираю все 10 клипов, конвертирую их в графический клип в 20 кадров.
После этого на основной сцене я делаю анимацию этого клипа – аналогичную первой: 10 и 20 кадр ключевые, в 10-м кадре нужно вернуть съехавшую первую точку в начало (guide lines в помощь ).
После этого нужно отредактировать easing точно так же, как и для первого клипа – замедление в начале и в конце, и ускорение в середине.
У нас готова отличная болванка. Ее можно сохранить и использовать от случая к случаю.
4. Теперь осталось использовать это. В данном примере я кладу болванку на GuideLayer и по ней покадрово анимирую щупальце. Все легче, чем пытаться представить себе колебания самостоятельно (Хотя с практикой и это приходит )
Получаем такое щупальце.
Дублируем щупальце несколько раз, пару тройку фильтров и трансформаций, смещение первого кадра для каждого щупальца и получаем преотвратное существо.
Например такое:
Popularity: 10% [?]
4 комментария апреля 25, 2008
ScrollRect. Дубль 2.
Как показывает практика, многие избегают использования scrollRect (я писал об этой чудесной возможности в одной из статей) по той простой причине, что не понимают, как работать с координатами. Действительно, после использования маски с клипом, где каждый участник процесса имеет свои понятные иксы и игреки, переход на scrollRect бывает труден.
Сегодня я еще раз попробую обратить вас в свою веру )).
Основная, бесспорная причина, по которой стоит использовать scrollRect вместо прямоугольных масок – производительность.
10 масок убьют CPU намного быстрее, чем 10 scrollRect-ов. Даже в хелпе сказано, что при использовании scrollRect используется попиксельное копирование участка клипа, а не полная его перерисовка.
Вторая причина – (вытекает из первой) можно маскировать НЕ внедренные шрифты, которые, как мы знаем, пропадают при маскировании обычным способом.
Также для меня лично плюсом является то, что мне не надо плодить новые клипы, только для того чтобы замаскировать контент.
Теперь о том, как это работает.
В процессе участвует MovieClip и объект Rectangle.
Когда к клипу применяется scrollRect – то на экран выводится только тот участок клипа, который КАК бы лежит под заданным прямоугольником. Координаты прямоугольника при этом задаются в системе координат маскируемого клипа – то есть от его точки регистрации. Хотим увидеть квадрат 20х20 левого верхнего угла клипа – задаем
mc.scrollRect = new Rectangle(0,0,20,20);
Заметьте, если вы начинаете сдвигать координату прямоугольника – координаты клипа остаются неизменными, хотя визуально кажется, будто он движется под маской. Еще раз напомню – происходит попиксельное копирование участка клипа.
Пример 1. Левый клип замаскирован scrollRect-ом. Перемещая рамку над правым – меняем x и y scrollRect-а.
Пример 2. Прокрутка большого клипа в окне заданного размера.
Координаты Rectangle изменяются в зависимости от координат мыши.
Пример 3. Комбинация перемещения клипа + перемещение scrollRect дает забавный эффект.
Попробуйте перевесить картину )
Пример 4. Покрутите ручки сами.Некоторые свойства Rectangle:
x, y – координата левого верхнего угла прямоугольника;
width, heigth – ширина, высота прямоугольника;
left – координата левой стороны. Изменяя это свойство мы меняем сразу и width, и x;
right -координата правой стороны. Изменяя это свойство мы изменяем также и width;
top – координата верхней стороны. Изменяя это свойство мы меняем сразу и height, и y;
bottom -координата нижней стороны. Изменяя это свойство мы изменяем также и height;Покрутив ручки MovieClip вы увидите разницу между перемещением клипа и перемещением прямоугольника scrollRect.
Интересный факт. Изменяя width прямоугольника мы меняем _width клипа (это логично). Но если мы при scrollRect начнем изменять непосредственно _width (_height) клипа – то клип начнет искажаться, тогда как scrollRect останется при своем _width.
Крутите ручки – экспериментируйте.
Popularity: 24% [?]
4 комментария апреля 24, 2008
Хитрый блог.
Недавно посетил отличный блог. Конечно посвящен Flash, но не бесконечным шаманским заклинаниям RIA, AIR, SDK, IDE и прочими, а простым и понятным вещам, связанными с анимацией. Да, да. Вы еще не забыли что флеш – это анимация?)))
Отмечу, что некоторые хинты, о которых говорит автор с удивлением для себя открывают не только новички, но уже и прожженые покадровкой проффи и волки моушн-твина. Чувствуется рука хорошего иллюстратора и аниматора. Настоятельно рекомендую: http://xitri.com
Popularity: 3% [?]
апреля 16, 2008
