О Flash и не только
Продолжаем рисовать. Прозрачность. Градиенты. Слой-маска и маскируемый слой. Текст и текстовое поле
Другие статьи авторов
Игуана

Начинающим флэшерам и не только


Прозрачность. Градиенты. Слой-маска. Текстовое поле.

Продолжаем рисовать. Прозрачность. Градиенты. Слой-маска и маскируемый слой. Текст и текстовое поле.

(статья адресована учителям (и не только), начинающим работать со средой разработки Adobe Flash)



Прежде, чем перейти к созданию анимации, дополним полученные ранее сведения об инструментах рисования. Надеюсь, вы уже запустили среду разработки Flash, чтобы, по ходу чтения сразу применить и опробовать полученную информацию.

Изменение прозрачности
Прозрачность — свойство альфа (alpha).
Формат swf (флэш) поддерживает прозрачность графических элементов. Чтобы задать прозрачность заливки, наведите курсор на квадратик выбора цвета заливки (панель инструментов), щелкните левой кнопкой мыши. выберите нужный цвет, а затем, щелкните на окошке альфа-канал. Появится ползунок с возможностью регулировки альфа-канала от 0 (полностью прозрачный) до 100% (полностью непрозрачный). Установите значение альфа в 50% и нарисуйте круг. Расположенные в нижележащих слоях объекты будут видны сквозь заливку круга.
Подобные действия можно совершить и с линиями. Кроме того, можно задать альфа-прозрачность и экземпляру библиотечного символа, находящемуся на рабочем столе. Для этого нужно выделить его, открыть окно свойств объекта (Ctrl+F3), выбрать во вкладке цвет значение альфа. После этого рядом со вкладкой цвет появится окошко выбора степени прозрачности.

Регулировку многих параметров можно производить не только при помощи ползунка, но и путем ввода значения с клавиатуры. Например, значения цвета кодируется шестью цифрами (шестнадцатиричная система счисления), где первые две цифры кодируют насыщенность красного цвета, вторые две — зеленого, а последняя пара — голубого. Так, черный цвет кодируется как #000000, а белый #FFFFFF (F — это цифра 15 в шестнадцатиричной системе счисления, кто не знает. Можно писать и #ffffff). Следовательно, #ff0000 — чисто красный, #00ff00 — чисто зеленый, а #0000ff — голубой цвет.

Градиентные заливки
Теперь о градиентах
Откройте окно цвет (Shift+F9), выберите цвет заливки (баночка с краской), тип установите как линейный. Внизу окна вы увидите, как выглядит градиент с плавным переходом от черного к белому цвету. Нарисуйте прямоугольник и убедитесь, что он залит градиентом, причем, левый край прямоугольника ченный, а правый — белый. За цвет градиента отвечают ползунки соответствующих цветов. Щелкнув на ползунке, попробуйте изменить значение цвета, вводя числа от 0 до 255, а также попробуйте поменять значение альфа — прозрачности. Можно также смещать ползунки. Щелчком на градиентной линейке можно добавить ползунок, чтобы добавить еще один цвет (это можно делать многократно для создания сложного градиента). Попробуйте воспользоваться готовым образцом (Ctrl+F9).
Теперь выбрерите радиальный тип градиента. В этом случае левый ползунок, отвечающий за цвет, будет соответствовать центру некоей окружности, а правый — ее периферии. Нарисуйте овал и поэкспериментируйте с радиальным градиентом.

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

Слой-маска.
Создайте новый слой (щелкните на слой1 правой кнопкой мыши, если забыли). Он должен оказаться сверху (если это не так, перетащите его). Щелкнув на вновь созданном слое правой кнопкой мыши, откройте свойства и выберите маска вместо обычный.

Слой-маска и маскируемый слой
Вы увидите, что верхний и лежащий под ним слои изменили свой вид (как на скриншоте). Откройте свойства нижележащего слоя и убедитесь, что вместо обычный отмечено маскируемый. Если это не так, сделайте нижний слой маскируемым вручную, поставив соответствующую отметку в свойствах слоя.
Для чего это все нужно? Все, что мы нарисуем на слое-маске, при просмотре отображаться не будет. Изображение на слое-маске будет служить своеобразной «дыркой», сквозь которую будет видно изображение на маскируемом слое. Нарисуйте на маскируемом слое большой прямоугольник, залейте его радиальной заливкой, а на слое-маске изобразите кистью что-нибудь произвольное, например, букву или слово (любым цветом, важно только, чтобы слово было на фоне прямоугольника. Протестируйте ролик (Ctrl+Enter). Вы увидите, как сквозь написанное просвечивает градиент!

Текст. Чтобы создать текст, выберите на панеле инструментов текст (можно клавишей T). Щелкните на рабочем столе в том месте, где вы примерно хотите разместить текст. Появится прямоуголник с мигающим курсором. Введите какое-нибудь слово с клавиатуры. В окне свойств (Ctrl+F3) увидеть информацию о тексте — шрифт, размер шрифта, цвет, такие свойства шрифта как жирность (B), нормал или наклоненный (I), ориентация и т.д.. Кроме того, в окне свойств можно изменить тип текста со статического на динамический. При этом появится вкладка имя экземпляра. Это происходит потому, что для флэш динамический текст является экземпляром встроенного класса TextField (текстовое поле). Задав имя экземпляра, можно обращаться к текстовому полю из написанного вами программного кода — динамически менять написанное, например.

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

Будьте осторожнее с выбором шрифта. Если вы выберите какой-либо экзотический шрифт, который не установлен на компьютере пользователя (вы ведь не для самого себя будете творить, я надеюсь), то при просмотре флэш-ролика конечный пользователь увидит совсем не то, что вы предполагали показать. Система заменит шрифт на доступный, и, вместо готического красавца будет стандартный _sans или _serif. Чтобы этого не произошло, в свойствах текстового поля выберите внедрить. Это увеличивает размер выходного флэш-файла, так как в него будет внедрен ваш красивый шрифт. А представьте, что таких шрифтов несколько...
Как же заставить текст выглядеть так, как вы планируете? Если вы не собираетесь динамически менять надпись, то проще будет превратить текст в графику. Для этого в главном меню выберите изменить, и разделить. Если ваш текст состоит не из единственной буквы, разделить нужно дважды. Буквы превратятся в заливку и с ними можно работать как с рисунком. Если вы не хотите, чтобы при перемещении слово рассыпалось, выделите все буквы и произведите операцию изменить, группировать.

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

Евсеев Владимир, 6.11.2010


Поиск по сайту Карта сайта Главная О Flash и не только Продолжаем рисовать.