Здравствуйте, гость ( Вход | Регистрация )

Свернуть

Новости

Форум Лучшее из галереи Уроки и статьи
07.12.2015 Выставочный зал: кошарик - персональная выставка
31.08.2015 Интересные ссылки для рисовальщиков
21.01.2015 Выставочный зал 2: Игрушки Олеси Гавриленко

27.12.2014 Выставочный зал: кошарик - персональная выставка
17.11.2014 Дуэль "Рыбки" - победитель Лисичка
05.11.2014 Конкурс иллюстраций "Снежная королева", до 31 января
30.10.2014 Дуэль "Рыбки" до 16 ноября
14.07.2014 Мастер-класс Мини-мишка в технике фелтинга
26.05.2013 Ау! Мы ищем таланты! – приглашаем модераторов!
Bamboo
tn_gallery_5018_735_455664.jpg
Фотодуэль "Немного косметики"
© Golubeva N
06.01.2016 Виртуальный Музей: Русский живописец Василий Дмитриевич Поленов
28.12.2015 Виртуальный Музей: Нидерландский живописец Квентин Массейс
16.12.2015 Виртуальный Музей: Итальянский живописец Франче́ско Айец
17.11.2015 Виртуальный Музей: Луи Анкетен (Louis Anquetin)
11.11.2015 Виртуальный Музей: Русский живописец Алексей Иванович Корзухин
Файловый архив
06.09.2013 Прочее: Файлы к уроку "Чайная церемония"
05.09.2013 Журнал Art Tower: ArtTower Magazine #8
16.05.2013 Adobe Photoshop: Кисти: Reid Southen brush
16.05.2013 Adobe Photoshop: Кисти: Goro Fujita brush
16.05.2013 Adobe Photoshop: Кисти: Кисти для рисования в Photoshop
Блоги Новости в цифровом мире и мире дизайна
02.12.2014 Дама с каменьями: Вести с крыши 2
08.11.2014 Timenews: Вассерман: прежняя модель мировой экономики исчерпала себя
06.11.2014 Дама с каменьями: Приятные вести с крыши))) от Гаргула)
02.11.2014 Spell: Книги Дж. Кэмерон
22.10.2014 Vjaz: от ФУ до МА
25.11.2015 Комментарий от Foxx в Costa Rica Adventure Divers, Логотип для компании и рисунок на майку (maria_mer)
18.11.2015 Комментарий от maria_mer в Spellforce - майка, для фанов игры (maria_mer)
18.11.2015 Комментарий от maria_mer в Белая книга. Целитель - любительский прект (maria_mer)
09.04.2015 Комментарий от Romana в Книги Дж. Кэмерон (Spell)
08.04.2015 Комментарий от Romana в Я решил вернуться... (Элбирет)
16.03.2015 ФОТОФОРУМ-2015
01.01.2015 ARQUTE.com и ArtTalk.ru закрываются
19.01.2017 Конкурс дизайна логотипов
26.12.2016 ру/Ководство: О творческом развитии
14.10.2016 ру/Ководство: Разнообразие

 
Добавить ответ в эту темуОткрыть тему
> Крутится-вертится шар голубой …, Уроки по не программной флеш анимации, вращение планеты с помощью панорамы плоской карты.
V
flashcinema
сообщение 24.08.2012 - 15:11
Сообщение #1


Постоялец
**


Группа: Жители
Сообщений: 78
Регистрация: 15.01.2012
Из: Россия, Москва
Пользователь №: 19009



Симпатии:  9  


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

Прикрепленное изображение



    Шаг 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 (Среднее).

Прикрепленное изображение


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


Прикрепленное изображение



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

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

Прикрепленное изображение    Прикрепленное изображение



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

Прикрепленное изображение



________________________________________________________________________________


!


Урок размещен с разрешения его автора Flashcinema.ru. Оригинал доступен здесь.
Запрещается копирование и публикация урока на других сайтах без письменного согласия автора и размещения ссылок.


The original Flashcinema.ru tutorial is written by Flashcinema.ru.
No part of this tutorial can be copied/pasted on any other website without the author's express written permission.

 


--------------------
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения

Быстрый ответДобавить ответ в эту темуОткрыть тему
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0

 



- Текстовая версия форума Сейчас: 16.12.2017 - 17:58