Flash : Остров в океане.

Дождливая летняя погода за окном, навевает мечты об отдыхе в тропическом раю. На каком-нибудь острове с кокосовыми пальмами. Или вам просто захотелось создать заставку для позитивного сайта.

Создадим проект нужного разрешения. Выбираете проект с поддержкой Action Script 2.0 и переходите к редактированию проекта
Modify – Document

Я выбираю размеры 953х600 пикселей и скорость 25 кадров в секунду, для большей плавности анимации.

Небо

Самый нижний слой будет небо.

Создание нового символа.
Insert – New Simbol

Назовите его – Небо, а тип выберите  Movie Clip.
Поднимите голову и взгляните на небо. Прямо над головой оно синее. Опускайте взгляд к горизонту и наблюдайте, как синева постепенно бледнеет. Для имитации неба нам нужно нарисовать прямоугольник, синий сверху и голубой снизу, с градиентным переходом цветов.
Выберите примитив прямоугольник и создайте примитив на рабочем столе.

Чтобы залить прямоугольник градиентом выберите  инструмент  Paint Busket Tool

В настройках заливки выберите приблизительно такие цвета как на рисунке и тип заливки Linear.

Как вы уже заметили, градиент расположен справа налево. А нам надо повернуть его сверху вниз.

Чтобы отредактировать градиент, нажмите в меню на значок Free Transform  и выберите Gradient Transform
Выбрав градиент, поверните его на 90 градусов по часовой стрелке.

Чтобы получилось, нечто похожее на это.
Вокруг неба остался контур в виде бордюра. Чтобы рамка не мешала восприятию, ее надо удалить.

Удаление бордюра
Для этого выберите инструмент  Selection Tool. Щелкните 2 раза подряд на области градиента и перетащите ее вправо или вниз, чтобы отделить от контура.

Выделите контур и удалите его нажатием на кнопку Del или выбрав в меню пункт Edit – Clear

Совместите левый верхний угол прямоугольника с крестиком центра объекта. В настройках установите размер квадрата как 953х300 пикселей.

Солнце

Создайте новый слой в символе Небо и назовите его Солнце.

Создайте новый символ.
Insert – New Simbol
Назовите его Солнце, а тип выберите  Movie Clip.

Выберите инструмент овал и нарисуйте нечто похожее на круг.

Залейте круг градиентом со следующими настройками.

Совет:
Как вы заметили, в градиенте появился новый порог цвета. Чтобы его добавить – достаточно щелкнуть левой кнопкой мыши на линейке градиента. Если понаставили лишнее, нажмите Cntrl и щелкните левой кнопкой мыши по лишнему порогу.

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

Выделите объект Солнце и нажмите правую кнопку мыши. Выберите – Convert to symbol
Преобразуйте в Movie Clip. Теперь стала доступна закладка с фильтрами.

Нажмите на знак + и выберите фильтр Blur. Увеличьте размытие до 31 пикселя.
Перенесите символ Солнце на слой Солнце символа Небо.

Теперь над океаном светит по настоящему жаркое солнце, глядеть на которое невыносимо.

Двигающиеся облака

Скачайте из Интернета фото облаков. Создайте новый символ
Insert – New Simbol
Назовите его Облако 1, а тип выберите  Movie Clip.
Скопируйте рисунок на нижний слой. Над ним создайте новый слой и обведите рисунок по контуру. Залейте области в тон облака. Удалите нижний слой с рисунком.
Повторите операцию еще два раза, для создания двух других  типов облаков.

Нарисованные вами облака могут отличаться от моих облаков.
Уменьшите  символы облаков до 100 – 160 пикселей и разместите их на слое Облако в символе Небо.

Выделите каждое облако и уменьшите его непрозрачность до 50%
Назовите облака  в поле <Instance Name> как oblako1, oblako2 и oblako3
Выше слоя Облако, создайте слой Action. Напишите слово Action слева от прямоугольника и преобразуйте в Movie Clip

Визуально облака и скрипт расположены так.

Совет:
Нажмите - Window – Actions, чтобы открылось окно редактирования скрипта.

Выделите символ Action. Вставьте в окно редактирования скрипта следующий текст:

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

В моем случае это: _level0.instance1.oblako2
Если у вас путь выглядит иначе, откорректируйте скрипт перемещения трех облаков, заменив _level0.instance1 на тот уровень, который будет выведен у вас.
Не забудьте удалить потом скрипт отладки с символа Облако.

После выполнения всех упражнений символ Небо, проекта Остров состоит из 4 слоев.

Перенесите Символ Небо на слой Небо проекта Остров.

Океан

Создайте новый слой над слоем Небо и назовите его Океан

Создайте новый символ по аналогии с символом небо.
Insert – New Simbol
Назовите его Океан.
Цвет изменяется к горизонту на более светлый.
В настройках установите размер квадрата как 953х300 пикселей.

Блики

Создайте новый символ
Insert – New Simbol
Назовите его Блик 1

Используя инструмент   Pen Tool, нарисуйте нечто типа этого.
Залейте светло желтым цветом.
Выберите тип Movie Clip (по умолчанию - Graphik)
Поставьте на 30 кадре ключевой кадр.
Для этого щелкните правой кнопкой мыши на 30 кадре и выберите - Insert Keyframe
Повторите вставку ключевого кадра на 15 кадре.
Откорректируем немного форму блика и его непрозрачность  на 15 кадре.
Уменьшите его размер наполовину Modify – Transfom – Scale

Выделите блик и выбрав Alfa уменьшите  непрозрачность до 30%

Создадим циклическое изменение формы блика.

Вставка ключевого кадра
Нажав правую кнопку на 8 и 22 кадре  мыши, выберите - Create Motion Tween

Разместите несколько символов Блик 1 на переднем плане, выбрав размер блика в 100 пикселей по горизонтали.
Несколько дальше к горизонту разметите блики размером 60 пикселей. И совсем далеко – размером 30 пикселей.
Чтобы блики мерцали не так одинаково, создадим еще один блик, мерцающий в противофазе.

Создайте новый символ
Insert – New Simbol
Назовите его Блик 2

Откройте символ Блик 1 и выделите его 15 кадр. Нажмите на объекте правую кнопку мыши выберите – Copy
Откройте символ Блик 2 и выделив 1 кадр нажмите правую кнопку мыши выберите Paste. Передвигая объект, совместите его центр в виде кружка с крестиком на рабочем поле.
Перейдите в свойства объекта и увеличьте непрозрачность (Alpha) до 100%
Обратите внимание, что свойство прозрачности доступно только для Movie Clip
Перейдите на временную шкалу и поставьте на 30 кадре ключевой кадр - Insert Keyframe.
Перейдите на временную шкалу и поставьте на 15 кадре ключевой кадр - Insert Keyframe.
Удалите на 15 кадре объект.
Откройте снова символ Блик 1 и выделите его 1 кадр. Скопируйте объект: Нажмите на объекте правую кнопку мыши выберите – Copy
Откройте символ Блик 2 и выделив 15 кадр нажмите правую кнопку мыши выберите Paste.

Совместите центр объекта с крестиком.
Выделите объект, выберите  Alfa и уменьшите его непрозрачность до 30%
На рабочей шкале, нажмите правую кнопку мыши  на 8 и 22 кадре  и выберите - Create Motion Tween

Откройте символ Океан и разместите символ Блик 2  шириной 30, 20 и 10 пикселей подобно Бликам 1, размещенным ранее. Ширина блика меньше, потому что в 1 кадре размер Блика 2 меньше.

По окончании работы над символом Океан проекта Остров, на нем будет 2 слоя.

Перенесите символ Океан на слой Океан проекта Остров.

Остров

Создайте над слоем Океан проекта – новый слой и назовите его Остров
Создайте новый символ
Insert – New Simbol
Назовите его Остров

Нарисуйте нечто овальное и залейте его песочным цветом. Используйте радиальный  градиент (как в символе солнце), чтобы центр острова был немного более темным.
Создайте новый слой выше, назовите его Прибой  и на нем создайте область голубого цвета и оконтурите остров по ближней к вам линии, используя инструмент  Pen Tool.

Поставьте ключевой кадр для этой области на 30 кадре. Залейте область светло голубым цветом.
Вставьте  15 кадр  как ключевой и немного отредактируйте кривую.

В данном случае, чтобы изменялась форма кривой, выберите Create Shape Tween.
Чтобы в процессе анимации не пропадал сам остров, на слое Остров поставьте на 30 кадре кадр -  Insert Frame.

Остров с полоской мелководья.

Пальма

Создайте новый символ
Insert – New Simbol
Назовите его Пальма

Назовите слой Ствол и нарисуйте  на нем ствол дерева. Сделайте на стволе характерные изгибы пальмы и  немного трещин в изгибах.

Создайте новый слой символа Пальма и назовите его Кокосы

Создайте новый символ
Insert – New Simbol
Назовите его Кокос

Нарисуйте овал (также как символ Солнце) и залейте его градиентом с радиальной заливкой.

Для реалистичности нанесите на слой выше имитацию волосатости кокоса.
Разместите два кокоса на вершину ствола пальмы на слое Кокосы.

Уменьшите ширину кокоса в настройках объекта, отключив  фиксацию пропорций.
И после этого включите снова.
Скопируйте получившийся кокос и вставьте в этот же слой. Поверните второй кокос, на 45 градусов
Modify – Transform – Rotate and Skew

Создайте новый символ
Insert – New Simbol
Назовите его Листья.

Нарисуйте форму листа.

Залейте лист радиальным градиентом. Выберите режим редактирования градиента и отредактируйте его так, чтобы лист посередине отдавал в желтизну, а по краям был зеленый.
На шкале анимации вставьте ключевой кадр в 60 и 30 кадры.
В 30 кадре измените форму листа.

Перенесите лист на слой Листья, символа Пальма.
Скопируйте лист и вставьте в этот же слой. Отобразите его зеркально по горизонтали.
Для этого используйте - Modify – Transform – Flip Gorizontal.
Вставьте еще одну копию листа и поверните ее поперек относительногоризонтальных листьев. Измените форму листа с учетом перспективы.
Для поворота и изменения формы используйте - Modify – Transform – Free Transform
Скопируйте повернутый лист и зеркально отобразите его по вертикали.
Чтобы зеркально отобразить по вертикали используйте  - Modify – Transform – Flip Vertical
Осталось мелочь. Вертикально ориентированные листья расположены над  горизонтальными. Выделите лист снизу и выполните - Modify – Arrange – Bring to Front
Лист поднимется на самый верхний слой. Повторите для второго горизонтального листа.
Готовую пальму перенесите на новый слой символа Остров, который назовите – Пальма.

Мужчина

Вполне уместно будет нарисовать на острове мужчину.
Создаете новый символ с именем Мужчина.
Находите в Интернете фотографию мужчины сидящего на пляже и размещаете ее на слое символа.
Создаете новый слой выше и обводите фото по контуру. Слой с фото удаляете.
Выделите все и нажав правую кнопку мыши конвертируйте в новый символ под другим именем.
Перенесите символ – Мужчина на слой Мужчина символа – Остров.

Скопируйте его еще раз в этот же слой и примените к нему фильтр Drop Shadoy

Не забудьте поставить в настройках тени галочку Hide object.
После этого вы сможете корректно преобразовать форму тени - Modify – Transform – Free Transform.
Если скопированный слой тени случайно оказался выше слоя мужчины, то вы можете опустить его ниже - Modify – Arrange – Bring to Back
Немного высветлите тень,  уменьшив уровень непрозрачности Properties – Color - Alfa до 50%

По аналогии сделайте тень у пальмы.
Обратите внимание, что колышущиеся листья двигаются и на тени.

Готовый символ пальма состоит из 4 слоев.

Яхта

Чтобы создать в кадре напряженность нужно внести конфликт. Погода стоит жаркая, остров затерян в океане. Добавим яхту на горизонте, и появится интрига. То ли мужчина приплыл на яхте искупаться, то ли он на острове уже давно и никак не может его покинуть.
Создаем новый символ, который называем Яхта. На первый слой копируем изображение яхты найденное через поиск картинок на Яндексе или Гугле. Создаем слой выше и обводим контур яхты. Потом выполняем любимое занятие этого урока – заливка.

Когда яхта будет готова, слой с картинкой удаляем. Перенесите символ – Яхта на слой Яхта, проекта.

И наконец слои проекта Остров.

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

vassago