Уроки

Новости

Статьи

Анимация

Анимация вращения блестящих предметов III

Анимация вращения блестящих предметов II

Анимация вращения блестящих предметов I

Создание анкерного колеса.

1 международный благотворительный фестиваль мультфильмов

2015-01

2014-12

2013-08

2013-03

2012-12

2012-11

2012-09

м/с "Пилот"

Аниматор.ру

От мульта

flash-animated.com

Клуб аниматоров рунета

Уроков: 19
Статей: 4
Комментариев: 68
Человек на сайте: 3

 

Яндекс цитирования   Jokerom Stock Images

Крутится-вертится шар голубой …

Автор: Игорь Романов

Дата: 2012-08-11

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



* Чтобы корректно отображались все всплывающие окна, на которые ссылаются такие кнопки,
пожалуйста, закрывайте после просмотра уже открытые окна,
иначе они будут перекрываться Вашим браузером с просматриваемой темой!


    Шаг 1. Откройте новый документ и задайте следующие параметры: ширина – 500 px. и высота – 350 px.. Частоту смены кадров, как обычно, установите 25 fps., документ сохраните в удобной для Вас директории на локальном диске компьютера под названием "Глобус". С помощью инструмента для построения прямоугольников Rectangle Tool (R) создайте на первом слое прямоугольник темно-синего цвета в размер документа и расположите его строго по центру. Это будет бескрайнее космическое пространство, на фоне которого вращается наша планета. При необходимости Вы сможете позже дополнить этот фон мерцающими звездами и прочим космическим антуражем, а пока слой назовите "Фон" и заблокируйте.


    Шаг 2.Теперь, нужно подготовить векторную карту мира. Для этого урока я использовал векторную карту, сделанную на основе трассированного скриншота с экрана компьютера на страничке "google-maps".* (Если Вы не знаете, как получить скриншот и преобразовать его в векторную форму, или под рукой не окажется готовой векторной карты мира, то можете скачать архив с готовой векторной картой). Распакуйте архив, откройте находящийся в нем файл "Карта мира", скопируйте из библиотеки этого файла одноименный графический символ "Карта мира" и вставьте его в библиотеку Вашего документа "Глобус". После этого, файл "Карта мира" можно закрыть.


Шаг 3. Над слоем с фоном создайте еще один слой, назовите его "Панорама" и расположите на нем символьный объект "Карта мира" так, чтобы в рабочем пространстве сцены его правая граница проходила через центр всего документа. Еще одну копию этого графического символа поместите на этот же слой в правую половину сцены. На этот раз левая граница копии символьного объекта "Карта мира" должна находиться над центром рабочего пространства сцены. По горизонтали обе копии должны находиться на одном уровне, а их нижние границы должны совпадать с нижним краем сцены. Выделите все содержимое слоя "Панорама" и преобразуйте в символ типа Graphic (Графика) и назовите его "Мир-дубль".


    Шаг 4. На следующем этапе создайте над слоем "Панорама" еще один слой, который будет являться маскирующим и ограничивать область видимости нижнего слоя с панорамой. Измените свойство слоя на тип Mask (Маска) и назовите его "Маска". В маскирующем слое с помощью инструмента построения окружностей Oval Tool (O) постройте круг любого цвета без контура с диаметром 320 рх. Круг расположите строго по центру рабочего пространства сцены.

Запустив тестовую анимацию (Ctrl + Enter), Вы должны увидеть подобное тому, что показано на эскизе ниже.


    Шаг 5. Перед тем, как закрутить нашу планету с востока на запад, установим символьный объект "Мир-дубль" в исходное положение, сместив его горизонтально влево. Правая граница габаритного контейнера графического символа при этом должна совпадать с правым краем окружности в маскирующем слое. Чтобы вращение планеты не выглядело сонным, но и не было слишком головокружительным, предлагаю сделать цикл панорамы 300 кадров. Продлите последовательность кадров всех слоев на временной диаграмме до трехсотого кадра (выделите трехсотые кадры всех слоев и нажмите F5).


    Шаг 6. Теперь необходимо обеспечить равномерное панорамирование, без видимого стыка при переходе от последнего кадра к первому. Для этого над слоем "Маска" создайте еще один вспомогательный слой типа Guide и в его 301 кадр временной диаграммы поместите копию первого ключевого кадра слоя "Панорама". Затем, в самом слое "Панорама" преобразуйте 301 кадр в ключевой кадр (F6). Символьный объект "Мир-дубль" в этом слое сдвигайте вправо до тех пор, пока левая копия материков не совпадет с материками правой копии этого же символьного объекта во вспомогательном верхнем слое. Это смещение лучше осуществлять, переведя отображение слоев в контурный режим.


    Шаг 7. И в завершение, оживим панораму и подчистим "хвосты". На первый ключевой кадр маскируемого слоя "Панорама", назначьте анимацию движения типа Motion Tween (Adobe Flash CS 3) или Classic Tween (Adobe Flash CS 4/CS 5). Затем выделите на временной диаграмме этого слоя трехсотый кадр и с помощью контекстного меню или нажатием клавиши F6, преобразуйте его в ключевой кадр. Ключевые кадры 301 в слоях удалите и запустите тестовую анимацию (Ctrl + Enter).
    Если Ваш результат близок к тому, что скрывается под кнопкой ниже, то вся работа была проделана правильно.


    Шаг 8. Конечно, такой результат еще слишком далек от совершенства, планета выглядит плоской и определенно не имеет атмосферы. Эти недостатки можно устранить, добавив несколько декорирующих слоев. Первым делом необходимо придать некоторый сферический объем нашей планете, для этого добавьте еще один слой под слоем "Панорама", куда скопируйте окружность из слоя "Маска" и залейте ее радиальным градиентом планетарных оттенков (светлый в центре – #024F9B и темный с краю – #001E42). Точно такой же слой, с этим же объектом расположите и над слоем "Панорама", но теперь центральный оттенок радиальной заливки должен быть абсолютно прозрачным (Alpha=0). Объект преобразуйте в символ типа Movie Clip (Видеоклип), назовите его "Сфера" и задайте ему режим смешивания Multiply (Умножать).
   Еще один слой с атмосферой должен располагаться на самом верху в палитре слоев. Используйте для этого бывший вспомогательный слой над слоем "Маска", верните ему обычный тип Normal и переименуйте в "Ореол". Постройте в нем еще один круг такого же диаметра, как все предыдущие (320 рх.), но на сей раз оставьте только контур без внутренней заливки. Контур сделайте довольно широким, не менее – 9 рх. Получившийся объект, преобразуйте в символ типа Movie Clip (Видеоклип), назовите его "Ореол" и примените к нему фильтр Blur (Размытие) с коэффициентом по обеим осям Х/Y=12 и качеством размытия – Medium (Среднее).


Цветовая модель заливки объекта "Сфера".

Нажмите кнопку ниже и наведите курсор мыши на правую часть иллюстрации, чтобы увидеть послойную модель планеты.


Подведение итогов:

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

    


    * Преобразование растрового изображения в векторный формат – урок, освещающий эту тему, можно просмотреть здесь.





   Если у Вас возникнут какие-либо затруднения в процессе выполнения этого урока, можете задавать свои вопросы непосредственно в комментариях к этой теме. Желающие поделиться своими результатами, направляйте свои анимационные миниатюры на admin@flashcinema.ru


Данный урок подготовлен для Вас командой сайта www.flashcinema.ru
Правила перепечатки материалов сайта

Просмотров: 12568

Ваша оценка: 1 2 3 4 5


Пожалуйста, оставьте свой комментарий.
Спасибо!

Комментарий добавил(а): Александра
Дата: 2012-08-11

Урок очень полезный, спасибо. Многие, у кого есть свои сайты, вполне могут применить для увеличения привлекательности своего контента.

Комментарий добавил(а): Игорь
Дата: 2012-08-11

Спасибо Вам, Александра, за добрые слова! Рад, что урок понравился)))

Комментарий добавил(а): Samovarnet
Дата: 2012-09-10

Я присоединяюсь к мнению Александры - урок понятный! Я сделал его в восьмой версии программы Адобе Флэш... Давно искал нечто подобное - огромное спасибо! Вопрос у меня только один: сколько тюбиков краски в Color Mixer? Слой "Сфера" над слоем "Панорама" в Color Mixer имеет значение Alpha = 0% во всех тюбиках? Еще раз спасибо!

Комментарий добавил(а): Игорь
Дата: 2012-09-10

Samovarnet, спасибо! Ответ на Ваш вопрос я проиллюстрировал в конце Шага 8, но вообще тут нет каких-то жестких ограничений, градиент можно настраивать на свое усмотрение.

Комментарий добавил(а): Samovarnet
Дата: 2012-09-21

Всем доброго времени суток! Мне интересно, а сколько весит Ваша анимация, созданная в Адобе Флэш CS3? Мой выходной SWF Size (просмотр через CTRL+Enter)11 кб Я делал эту анимацию в Адобе Флэш 8 http://samovarnet.ru/samovar-v-internete-nashel-globus/

Комментарий добавил(а): Игорь
Дата: 2012-09-21

Samovarnet, мой вариант только вращающегося глобуса с применением всех вышеуказанных слоев и фильтров весит почти 49 кб.

Комментарий добавил(а): Samovarnet
Дата: 2012-09-26

Доброго времени суток, Земляне! Игорь, получается, вес файла зависит от частоты смены кадров: у Вас 25 фреймов в секунду, а у меня - 12. Почему при создании мультфильмов рекомендуют делать 24 кадра в сек.? Хотелось бы услышать на Вашем сайте более полный и развернутый ответ. Я же у себя на блоге http://samovarnet.ru/ делаю 10 или 12 кадров в сек., преследуя одну цель - минимизировать вес файлов...

Комментарий добавил(а): Игорь
Дата: 2012-09-26

Приветствую Вас, Samovarnet! Размер файла зависит и от частоты смены кадров, и от длины временной диаграммы (Timeline) занятой последовательностью кадров. Естественно, чем выше значение частоты смены кадров, тем длиннее временная диаграмма для какого-то определенного движения. А уж, с какой скоростью должна проигрываться анимация зависит от поставленной задачи. Для минимизации "веса" файла достаточно и 10-12 fps (баннеры, некоторые онлайн игры). Если Вы снимаете кино, то ниже 24 fps делать не стоит. А при 25-30 fps любое движение персонажа становится плавным и подробным, на таких скоростях можно воплотить и разглядеть любые нюансы в движении, дополняющие характер персонажа. А 24 кадра в секунду это – скорость, с которой снимают на обычную целлулоидную пленку. А минимальная скорость на любительских кинокамерах, не считая покадровую съемку, была 8, максимальная 48 кадров в секунду. В некоторых детских центрах досуга, умудряются снимать мультики на компактные цифровые фотоаппараты и проигрывать их со скоростью 6 кадров в секунду. Тоже получается кино, но картинка слишком дерганная и уж очень похоже на быстрое слайдшоу)))

Комментарий добавил(а): Samovarnet
Дата: 2012-09-29

Час добрый, Игорь! Спасибо за развернутый ответ! Теперь у меня вопрос по символу "Сфера". Как я понял, слой "Сфера" не только придает объем, но и играет другую роль - нижний слой "Сфера" призван скрывать то, что позади него. Я вставил над слоем "Фон" новый слой "Звезды", на который вставил свое звездное небо. - Звезды видно сквозь Землю в водной глади. Как изменить параметры заливки "Instance мувика Сфера" на слое "Сфера", расположенного под слоем "Панорама" и каковы Ваши настройки градиентной заливки для данного объекта "Instance мувика Сфера" на нижнем слое "Сфера"?

Комментарий добавил(а): Игорь
Дата: 2012-09-29

Здравствуйте, Samovarnet! Поскольку слой "Звёзды" в моем примере выполняет чисто декоративные функции, то я не стал сильно мудрствовать, и просто не размещал "под" планетой никаких звездочек. Поэтому у меня была возможность дважды использовать один и тот же символьный объект "Сфера". Сделал так из соображений - зачем создавать то, что не должно быть видимым и не несет никакой функциональной и смысловой нагрузки?
Но если Вы хотите сделать панорамное смещение слоя "Звезды" и чтобы он не просвечивался сквозь планету, то:
1. Разместите над звездами маскирующий слой прямоугольной формы в размер рабочего окна сцены. А под планетой проделайте дырку в маске с таким же диаметром, что и символьный объект "Сфера".
2. Просто примените к нижнему слою "Сфера" команду контекстного меню Break Apart (Ctrl + B) и перезалейте его радиальным градиентом с непрозрачными тюбиками.

Комментарий добавил(а): Samovarnet
Дата: 2012-09-29

Доброе время суток, Игорь! Ваш подход взял на вооружение - так и сделаю... Это нужно для того, чтобы шар земной, например, передвигался по сцене. Я подумал, что его можно преобразовать в символ - все слои кроме фона, причем нижний слой с непрозрачными тюбиками... А на основной сцене разместить слои "фон" и звездное небо. С библиотеки перетянуть символ земного шара - пущай летает:))) Сейчас попробую! Спасибо!

Комментарий добавил(а): Samovarnet
Дата: 2012-10-09

Вот, посмотрите, на летающий глобус   

Комментарий добавил(а): Игорь
Дата: 2012-10-10

Samovarnet, очень достойный результат! Все летит и мерцает))) Единственное, что меня немного смущает это - цвет оранжевых материков и, больше всего, слишком темная синева водной поверхности. Из-за темной воды, планета на самом дальнем плане теряет объем и выглядит "дыркой" с оранжевыми пятнами.

Комментарий добавил(а): Samovarnet
Дата: 2012-10-10

Игорь, по поводу оранжевой земли - у самовара окрас ближе к желтому тяготеет, поэтому такой цвет выбрал... А по жанру - параметр Brightness пробовал на 20%, вроде нормально... А ты как дальний план делаешь?

Комментарий добавил(а): Игорь
Дата: 2012-10-10

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

Комментарий добавил(а): Samovarnet
Дата: 2012-10-11

Игорь, вращение Земли у меня в мувике,где все слои, кроме фона..., а на основной сцене - движение мувика по сцене, под которым звезды и фон... В этой анимации я к мувику никаких эффектов Color не применял, после в программе параметр Brightness на 20% пробовал, вроде нормально... А ты так же дальний план делаешь?

Комментарий добавил(а): Игорь
Дата: 2012-10-11

Samovarnet, никак не возьму в толк, про какой дальний план Вы меня спрашиваете, если в моем примере глобус вращается только вокруг своей оси, и не по какой орбите, с переднего на задний план, не перемещается.

Комментарий добавил(а): Samovarnet
Дата: 2012-10-12

Игорь, извини... Я хотел узнать "как ты делаешь дальний план?" вообще... У тебя будет урок по дальнему плану? Я в изо-искусстве полный ноль и законов жанра не знаю... Я пробовал к летающему глобусу вышеуказанный параметр...

Комментарий добавил(а): Игорь
Дата: 2012-10-12

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

Комментарий добавил(а): Samovarnet
Дата: 2012-10-12

Значит, обучающий курс о создании многоплановой анимационной сцены уже в разработке! А когда можно его приобрести?

Комментарий добавил(а): Игорь
Дата: 2012-10-12

Samovarnet, как всем известно, скоро сказка сказывается... Но обещаю, подписчики на нашу рассылку узнают об этом событии самыми первыми!

Комментарий добавил(а): Samovarnet
Дата: 2012-10-12

Ok, жду!


Введите результат вычислений:

Поисковый запрос не должен
быть менее 4-х символов!