Уроки WEB дизайна




 Маски Macromedia Flash MX


На этом уроке мы продолжим изучение приемов маскирования и создадим несколько роликов, где в качестве маски используется текст. Создадим, например текстовый заголовок, в котором буквы будут переливаться всеми цветами радуги. Выберем инструмент Текст на панели Properties подберем подходящий шрифт, размер, начертание и напишем что-нибудь на сцене.
В целях экономии времени я вставлю заготовленный текстовый блок из буфера обмена. Цвет текста в данном случае роли не играет, поскольку мы планируем использовать заголовок в качестве маски. Дадим единственному пока слоя имя Mask. Анимация расчитана примерно на 40 кадров, поэтому выделим 40 позицию шкалы
и клавишей F5 вставим цепочку простых кадров. Создадим новый обычный слой и сразу перетащим его вниз, так как маска должна быть расположена выше маскируемого слоя. Заблокируем слой маски.
Выберем инструмент Прямоугольник,
сбросим цвет контура,
и определим линейную многоцветную заливку из стандартного набора WEB-палитры.
Нарисуем прямоугольник такого размера, чтобы он перекрывал наш текст. Напомню, что градиентную заливку нельзя использовать как маску, но с успехом можно применить в качестве маскируемого элемента. Нажмем клавишу V и инструментом Стрелка выделим фигуру. Сочетание CTRL+G сгруппируем ее.
Далее скопируем заливку в буфер обмена
и выполним команду Edit-Paste in Place,
создав ее копию в том же месте. Не снимая выделение, переместим копию влево настолько, чтобы два прямоугольника оказались состыкованы друг с другом. Затем выполним команду Modify-Transform-Flip Gorizontal
- Отразить по горизонтали. Удерживая клавишу Shift выделим оба прямоугольника и нажмем клавишу F8.
Установим тип Graphic и щелкнем по кнопке ОК. Теперь в нижнем слое можно создавать раскадровку движения. Выделим 20 кадр и клавишей F6, создадим здесь ключевой кадр. То же самое сделаем в последнем 40 кадре анимации. Снова перейдем в 20 кадр и при помощи клавиши со стрелкой сместим символ заливки максимально вправо, но только, чтобы он не вышел за рамки текста. Теперь щелкнем правой кнопкой мыши и установим в 20 кадре
раскадровку движения. Ту же операцию проделаем в первом ключевом кадре. Подвигаем маркером вдоль шкалы и посмотрим как перемещается градиентная заливка относительно текста. И последнее, что нам осталось, так это сделать верхний слой Маской. Щелкнем по нему правой кнопкой мыши и в контекстном меню выберем пункт Mask.
Протестируем ролик и посмотрим результаты работы. Буквы заголовка непрерывно меняют свой цвет, чего мы собственно и добивались. Закроем тестовое окно. Хочу таже отметить,что в качестве маскируемого элемента, вы с таким же успехом можете использовать и любое растровое изображение. При этом картинку можно оставить неподвижной, а анимировать сам текст, предварительно преобразовав его в символ. Давайте коротко проанализируем готовый подобный файл, который у меня уже открыт в программе. Для его отображения воспользуемся командой меню Window и сделаем активным файл Garden - Сад. Здесь также имеются два слоя: слой маска и маскируемый слой. В нижнем слое находится неподвижное растровое изображение,
отображаемое цепочкой простых кадров. В слое маске расположена текстовая строка, преобразованная в графический символ. Экземпляру символа применена раскадровка движения с изменением масштаба и поворотом объекта на один поворот по часовой стрелке. В результате протестировав ролик, мы увидим следующий эффект. Закроем тестовое окно и в заключении этого урока приведем еще один, чуть более сложный пример текстового эффекта с использованием маски. Создадим новый ролик
и отмасштабируем рабочую область сочетанием CTRL+2. С помощью инструмента Текст создадим какую-нибудь надпись подходящего размера и цвета. Я же вставлю заготовленный текстовый блок из буфера. Для улучшения контрастности, с помощью панели Инспектора Свойств изменим цвет полотна
на черный. Создадим новый слой, который в дальнейшем будем использовать в качестве маски. Выделим текст в нижнем слое и скопируем его в буфер обмена. Сделаем текущим верхний слой и вставим в него содержимое буфера командой Edit-Paste in Place Вставить на место. Заблокируем нижний слой. В маске будем применять раскадровку формы, поэтому необходимо преобразовать строку в заливку в виде текстовых символов. Для этого выполним команду Modify-Break Apart
Разбить. Первоначально редактор разбивает текстовую строку на отдельные символы, поэтому не снимая выделения, выполним ту же самую команду еще раз. Теперь мы получили то, что нужно для реализации морфинга. Выделим на шкале 12 позицию и клавишей F6 скопируем туда первый ключевой кадр. Перейдем в первый кадр и с помощью модификатора Scale Масштаб сильно сожмем графику по вертикали, а затем с помощью клавиатуры, немного подымем ее так, чтобы она не касалась текста в нижнем слое.
На панели Properties установим анимацию формы. Далее выделим 18 позицию на шкале и нажмем клавишу F5. Для выравнивания слоев по длительности выделим также 18 позицию нижнего слоя
и вставим туда обычные кадры клавишей F5. Теперь осталось только сделать верхний слой маской. Для этого щелкнем по нему правой кнопкой мыши и выберем пункт
Mask. Протестируем ролик и посмотрим, что у нас получилось. Создается впечатление, что пустая текстовая форма, постепенно заполняется цветной жидкостью. В заключении хотел бы отметить, что показанные в данной главе примеры, далеко не исчерпываю возможности использования слоев масок. Маски например часто применяются для реализации эффектов печатной машинки, линзы и многих других. Разобравшись с принципом действия масок, вы сможете теперь самостоятельно воплотить в жизнь всои собственные идеи. Вообще говоря самый лучший способ найти интересные идеи, путешествие по Flash-сайтам с целью увидеть, понять как это делается и взять на вооружение интересный прием. При этом никто н обвинит вас в плагиате. Что касается текстовых эффектов, то иногда не стоит повторно изобретать велосипед. Если вам понадобилься какой-либо творческий текстовый эффект, то можно воспользоваться программами сторонних компаний, живущих за счет таких именно разработок. Из наиболее известных продуктов подобного рода следует отметить
программу SWFx, позволяющую создавать, в настоящее время, более 250 текстовых эффектов. И программу FLAx имеющую 25 типов различных текстовых эффектов, которые к тому же поддаются самым разнообразным видам пользовательской настройки. Эти программы позволяют создавать файлы в формате *.SWF, которые вы можете использовать самостоятельно или импортировать в среду Flash. Давайте коротко взглянем на интерфейс программы FLAx. В указанном списке выбирается нужный эффект, который в реальном масштабе времени отображается на экране. Остальные опции, расположенные на трех панелях, позволяют настроить каждый эффект индивидуальным образом и сделать его уникальным. Например, вот так. На этом текущий урок закончим.

Карта сайта Реклама
На нашем сайте Вы сможете найти любую информацию о программах 3D Max, Macromedia Flash MX, Corel Draw 12, Adobe Illustrator и многих других. Вы не найдете на данном сайте различные серийники, ключи, активацию, русификаторы, кряк, crack, keygen, серийные ключи и кейгены для этих программ. Для приобретения или скачивания программ воспользуйтесь ссылками на официальных сайтах производителей.
учетную запись партнера из питера в хельсинки - подробности на нашем сайте