Урок по созданию векторного окна в Flash CS

Вашему вниманию алгоритм рисования окона во флеше, в данном случае деревянного(как и геймплей в моих играх).
Такие окна можно создавать за 1-2 мин.
Окно созданное мной в данном уроке занимает 8.8 кб.

Наш финальный результат



Для начала нам нужно создать внешнюю рамку.
(1)Создадим квадрат с (2)сглаженными углами.(3)Убираем заливку.


Добавим круг


Теперь настроим толщину линии


Превращаем линию в заливку


Задаем цвет


Превращаем это дело в символ(MovieClip) и ставим х:0 у:0


Далее нам нужно текстурировать рамку. Ищем в гугле нужную нам текстуру по запросу «texture wood». Если хотите сэкономить память то вырежьте(Photoshop) для себя только одну доску, (я обычно вырезаю четверть, потом клею все в один длинный кусок).

Скачанная текстура


Наш оптимальный вариант, импортируем его в наш проэкт Ctrl+R


Заходим в только что созданный нами символ рамки.
Дублируем слой, и превращаем верхний слой в маску.


Теперь добавим еще один слой для нашей текстуры. Я назвал его «texture». Он должен быть по середине.
Заблокируйте все слои кроме среднего («texture»).
Набросаем на этот слой нашых «досок». Тянем одну с библиотеки на сцену ( если доска большая уменьшите ее ) а потом клавишами Alt+Shift делаем копии доски.


Видно что доски очень похожи друг на друга, поэтому надо провести с ними манипуляции(некоторые растянуть, некоторые уменьшить по длине или высоте, отразить с лева на право Modify-> Transform-> FlipHorizontal). Впрочем этот шаг можете пропустить.
После этого превратите все доски в один символ MovieClip.
В свойствах этого символа поставте Alpha (прозрачноть) на 50% и Blending на «Overlay»


Работа внутри рамки закончена, поднимаемся на уровень выше


Приступим к созданию внутренней части окна
1.Создадим на сцене еще один слой, и сдвинем эго вниз. Это слой для внутреней части окна.
2.Найдите нашу рамку в библиотеке и сделайте дубликат под названием «inside».

Заблокируйте первый слой. На второй слой бросаем «inside» и ставим ему координаты х:0 y:0

Заходим внутрь символа «inside».
1.Удаляем все из самого верхнего слоя, слоя — маски.
2.Скрываем второй слой («texture»).


1.Заливаем цветом область внутри нашей рамки.(я закрасил рамку черным цветом для наглядного примера)
2.Удаляем рамку.
3.Теперь нам нужно все что в слое «Layer 1» выделить, нажать Ctrl+C, перейти на саммый верхний слой — маску «Layer 1 copy» и нажать Ctrl+Shift+V.


Робота внутри символа «inside» закончена, поднимаемся на уровень выше.

Сделаем нашу внутренюю часть(«inside») немного теменне набросив на нее Tint, и два Фильтра


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


Это должно было быть финалом, но результат меня не устроил.
Я зашел в «inside», создал еще один слой под маской и нарисовал в нем пару черных и белых линий с альфа каналом(прозрачных) 35%


Окно готово.

Экспериментируйте с формами рамки, фильтрами, и материалами(железо, дерево, камень, ткань)




Исходник