Для начала нам нужен сам рисунок (в данном случае – текстовая надпись) для анимации. Создать красивую рукописную надпись можно и самому, если вы владеете навыками каллиграфии. Но, проще, конечно же, взять готовый шрифт, благо, таких очень много.
Итак, берем подходящий рукописный шрифт. Если такого нет, то ищем в сети. Для примера, хороший ресурс с множеством бесплатных шрифтов dafont.com. Большой плюс – на сайте шрифты можно сразу протестировать в режиме Preview, что неимоверно облегчает поиск.
Хорошо в такой анимации будут смотреться шрифты со всевозможными завитками: чем больше разных загогулинок, тем красивее будет смотреться результат.
На второй страничке нахожу шрифт, который меня сразу привлекает своим душевным названием – Shit Happens. Хороший шрифт, забираем его.
Шаг 1. На рабочей области пишем слово, которое будем анимировать. Сохраняем нашу надпись в символ (F8) (лучше не делать такую анимацию сразу на таймлайне, а разместить в символе).
Саму надпись разбиваем, трансформируем в заливку (Ctrl+B).
Шаг 2. Заходим в символ text и создаем дополнительный слой для маски.
В нем и будет создаваться сама анимация. Чтобы создать маску, кликаем правой по слою – Mask). Маску можно создавать и в конце, но лучше это сделать сразу, чтобы проверять по ходу, ничего ли мы не упустили из виду, и тестировать анимацию на промежуточных этапах.
Шаг 3. Будем создавать покадровую анимацию, когда прорисовывается кадр за кадром (frame by frame animation).
В каждом новом кадре дорисовываем кистью новый кусочек маски. И обязательно тестируем время от времени результат. Поскольку вся маска у нас идет в одном слое, то ошибившись где-то на каком-то этапе – придется исправлять многое, а лишняя работа нам не нужна. Можно каждую букву анимировать маской по отдельности, но тогда будет множество слоев на таймлайне.
Вот так приблизительно выглядит сам процесс:
И на таймлайне:
Как видим, это несложно, но есть некоторые нюансы, о которых нужно помнить:
1) Перед началом анимации сразу определяем направление и порядок анимации, что и за чем анимируем.
Мысленно разделяем каждую букву на фрагменты.
2) Кончик маски должен быть полукруглым, нужно следить, чтобы он не был плоским. Поэтому стараемся следить за его округлостью.
3) Очень аккуратно нужно рисовать маску в местах стыков частей буквы на пересечениях. Если сделать их кое-как, то появятся некрасивые куски по бокам.
4)Чтобы анимация не выглядела однообразной и однотонной, делаем так: в самом начале и в конце анимацию замедляем за счет прорисовки большего количества промежуточных кадров (рисунок ниже). Таким образом, наша анимация как бы промелькивает от начального до конечного кадра.
Сам процесс создания анимации достаточно простой. Но спешить не стоит: чем аккуратнее отрисуем маску, тем лучше будет результат.
А вот и сам результат:
Таким же образом можно анимировать различные декоративнее элементы – завитки, морозные и цветочные узоры.
А я просто стираю, с конца, само слово . , а потом применяю обратное движение... но сейчас попробую с Маской ..Спасибо!
Почему, когда я добавляю второй кадр мой текст (символ) на этом кадре исчезает? Вроде всё сделал как описывалось: написал текст, создал из него символ, вошел в символ, создал новый слой и сделал из него маску.
Расскажите более подробно что вы делаете и какие клавиши нажимаете.?
Маска сверху - слово снизу. От начала до конца анимации слово не изменяется. Поэтому оно растянуто F5 клавишей.
А над ним покадрово рисуется маска.
моя радость тут ))) http://leetovetz.deviantart.com/gallery/
У способа с маской существует один недостаток - вес. Количество ключевых кадров с уникальными шейпами в итоге получается внушительным.
лично я предпочитаю другой способ, намного более экономичный и быстрый — сначала я тонкой линией отмечаю места разрезов, а затем, выделяя шейпы по ходу аниимации, группирую их (cmd+g), после чего стираю линии разрезов. Дальше остается только раскидать группы по слоям (distribute to layers) и выстроить кадры лесенкой. Так на каждом ключевом кадре будет лежать всего одна группа. В случае же с маской на каждом ключевом кадре лежат шейпы с определенным количеством опорных точек, и с каждым кадром их становится все больше.
Можешь выложить пример такой анимации? На сколько вес меньше?
Вес отличается почти в два раза.
Классическая покадровка (9кб):
http://murejib.com/feedback/keyframe.swf
Покадровка с группировкой )) 5 кб:
http://murejib.com/feedback/keyframe_g.swf
спасибо, возьму на заметку. не делала так ранее
Оксана, спасибо получилось клёво.
Оксана, а как эту превратить в мувик?
Заранее пасибки.
хм, анимация делается в мувиклипе (в самом начале надпись сохраняется в символ), если я правильно поняла вопрос про мувик.
спасибки, оч оч все нравится.
Пасибо. Тоже часто пользуюсь таким эффектом письма.
моя радость тут ))) http://leetovetz.deviantart.com/gallery/
А, вьехал))) Я просто искал здесь глубокий сакраментальный смысл Спасибо!
Спасибо! Одного не понял:
// Кончик маски должен быть полукруглым
Это с чем связано?
Спасибо! Одного не понял: // Кончик маски должен быть полукруглым Это с чем связано?
исключительно из эстетических соображений, чтобы идущая линия не была с тупым концом.