Маска-сегмент в Flash

Технология использования маски во Flash предоставляет богатые возможности для реализации самых неожиданных фантазий. Вспомним основные термины.

Термины. Маска – это слой с "дыркой". Маскирующий слой (Mask) – всегда верхний и один. "Дырка" в этом слое – заливка, и инструменты, соответствующие заливке (например, кисть - Brush Tool) – все штрихи и контуры игнорируются. Маскируемый слой (Masked) – ниже маскирующего слоя (Mask) – может быть несколько, и содержать всё что угодно.

Маскирующий слой (Mask) может содержать анимацию любого типа, в том числе и движение по заданной траектории. Какой бы рисунок не был в маскирующем слое, он воспринимается как заливка (потому что это "дырка", прорезь, вырез в листе бумаги). Нельзя применять "маску к маске" – маскирующий слой всегда один (но символ с маской можно тоже "накрыть" маской). В качестве маски можно использовать готовый клип. Также можно использовать ActionScript, чтобы создать маскирующий слой из клипа.

Маскируемый слой (Masked), как уже упоминалось, может содержать всё, что угодно, никаких ограничений. При этом слоёв, накрытых маской, может быть сколько угодно.

Для создания сцены с использованием маски надо иметь хорошее воображение и (!) – хороший план (сценарий).

Идея, представленная здесь, заключается в следующем:

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

Создаём сегменты

Задача (цель). Итак, надо взять фигуру, заполняющую некоторую площадь, и разбить её на одинаковые сегменты. В данном контексте нас интересует симметрия. Хотя это условие и не является обязательным. Всё определяется Вашим планом (сценарием).

Решить задачу можно разными способами (впрочем, как и любую другую(). Представлены лишь некоторые варианты фигур, разбитых на сегменты.

Безусловно, этот ряд можно продолжить. Дополнить фигурами с более сложной сегментацией и т. д. и т. п.

Теперь надо выделить один сегмент выбранной фигуры. Конвертировать его в символ (или сразу – в новом символе). Затем разместить экземпляры символа на Рабочем столе, изменяя поворот и координаты. Вот и всё.

Возьмём (как самый простой пример) шестиугольник. Центральный угол – 60 градусов. Сегменты – правильные треугольники. Эта фигура обладает множеством симметрий. Одно неудобство – треугольники правильные, можно легко ошибиться! Нам понадобиться только один сегмент из шести. Какой именно – это зависит от удобств последующих размещений, возможностей Вашего воображения и способности анализа увиденного. Предположим, для начала, нас всё это пока не интересует! Итак, приступим к созданию заготовки.

1. Откроем Flash. Создадим новый файл. Сохраним его в папе с проектами.

2. Нажмем Ctrl+F8 – создадим новый символ. Пусть с именем по умолчанию Symbol 1 и Movie Clip.

3. Аккуратно щелкнем мышкой треугольник у инструмента Rectangle Tool и выберем PolyStar Tool.

4. В Properties щелкнем кнопку Options и в появившемся окне Tool Settings установим в строке Style ( polygon; в строке Number of Sides ( 6; и нажмем кнопку ОК.

5. Выберем любого приемлемого цвета контур и заливку и, удерживая клавишу Shift, нарисуем правильный шестиугольник.

6. Теперь выберем инструмент Line Tool и соединим противоположные вершины, чтобы разбить шестиугольник на "дольки". Делать надо аккуратно и точно. При достижении соответствующей точки у курсора должен появляться кружочек.

7. Теперь выбираем инструмент Selection Tool (стрелка) и последовательно, выделяя линии и заливки, удаляем (клавишей Delete) всё, кроме заливки одного сегмента.

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

9. Теперь переходим на основную сцену. Переносим наш символ на Рабочий стол (создаём экземпляр символа).

10. Зададим размер и координаты в Properties. Ширина (W) пусть будет 200 (высота сама установится - 173,2), а координаты (125, 0)

11. Теперь вытащим на рабочий стол второй экземпляр. Пока в произвольное место, чтобы только не мешал.

12. Нам понадобиться окно инструментов Transform. Вызов – Window ( Design Panels ( Transform или Ctrl+T. Удобно его перенести туда же, где Library, Components и т. д.

13. Выделим наш второй экземпляр символа и в Transform ( Rotate установим угол 600 и нажмём Enter.

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

15. Теперь создаём (вытаскиваем на Рабочий стол) третий, четвёртый, пятый и шестой экземпляры. Углы поворота, соответственно, задаём 120, 180, 240 и 300 градусов (можно вместо 180( -180, вместо 240( -120, вместо 300( -60)

16. Без шестого выглядит примерно так:

Итак, заготовка "калейдоскопа" готова.

Строим "калейдоскоп"

Все остальные операции, вообще говоря, не связаны с данным контекстом. Редактируем Symbol 1, анализируем результат, и вновь редактируем! Важно понять и осмыслить закономерности.

1. Войдём в редактирование Symbol 1. Вставим новый слой. Переместим его вниз. Первый слой (с треугольником) сделаем маской (Mask). Выберем режим контура и повесим на него "замок". Со второго слоя "замок" снимем и выберем первый кадр второго слоя.

2. Щёлкнем правой кнопкой мыши 20 кадр во втором слое и выберем в раскрывшемся меню Insert Keyframe. Аналогично для 40 кадра.

3. Щелкнем правой кнопкой мыши 40 кадр первого слоя и выберем в раскрывшемся меню Insert Frame.

4. Щелкнем левой кнопкой мыши первый кадр второго слоя. Если инструмент Rectangle Tool остался в режиме PolyStar Tool, то выберем его (или установим этот режим).

5. Установим "без контура" и заливку, например, радиальную – жёлтый и красный. В Properties кнопкой Options установим треугольник и нарисуем его. Примерно так (использован инструмент Free Transform Tool):

6. Щёлкнем левой кнопкой 20 кадр второго слоя. С помощью инструмента PolyStar Tool нарисуем, например, восьмиугольник.

7. Щёлкнем левой кнопкой 40 кадр второго слоя. С помощью инструмента PolyStar Tool нарисуем, например, пятиугольник.

8. Теперь осталось щёлкнуть мышкой 19 кадр второго слоя и в Properties выбрать Tween ( Shape. Аналогично с 39 кадром. На Timeline должны появиться стрелочки на зелёном фоне.

9. Можно смотреть на результат. Нажать Ctrl+Enter.

Можно продолжить добавление кадров и фигур во втором слое (не забывая добавлять Frame в первый слой(). Можно менять имеющиеся. Можно добавить поворотов (и к маске тоже). И, вообще, можно столько, что перечислять бессмысленно!

Важно научится анализировать! И получать запланированное поведение, а не то, которое случайно получится! Интересная иллюзия получается, когда внешние грани вращаются в одну сторону, а внутренняя область – в противоположную. Во второй слой (маскируемый) можно вставить видеоклип – лучше *. mov, но и любой другой подойдёт. На основной сцене можно весь коллаж "накрыть" маской.

Поработав немного "ручками" и поняв суть, можно с помощью ActioScript значительно облегчить работу!

Некоторые примеры.

Удачи!!!