Adobe flash эффект свечения
Обновлено: 07.07.2024
Чтобы следующий пост в блоге не был посвящен светлому дню Пасхи, разбиваю череду поздравлений небольшой заметкой о фильтрах:) Урок для начинающих флешеров, а так же для тех, кто попросту не обращал внимание на эту примочку в разделе Properties.
Немного о свойствах: фильтры применимы лишь к мувиклипам, кнопкам и тексту. К объекту типа графика (graphic) не применяются. В версии flash cs5 фильтров аж 7. Не буду копипастить теорию, сразу покажу, как их можно применить на практике. А научиться работать с фильтрами очень просто:)
За основу возьму персонажа, которого я когда-то рисовала для флеш-игрушки. Итак:
1. Drop shadow – возможность применить эффект тени к флешовому объекту. Наверное, самый популярный фильтр. Для большей реалистичности, если объект находиться на светлом фоне, как в примере, лучше выбирать для тени не угольно-черный цвет, а серый – светло-серый, возможно даже с цветным оттенком (1). Если добавить к этому эффекту еще контурный эффект свечения (о нем более подробно в следующем пункте), то можно получить такой себе эффект наклейки (2-3) (не знаю, как называется такое дизайнерское решение, но смотрится эффектно и используется часто:)
2.Glow - свечение.
1.обычное свечение, его цвет можно установить на свой вкус. Часто используют для текстовых надписей.
2. непропорциональное – показатели по x или y разные.
3.с помощью эффекта Glow во флеше можно создать четкий контур. Чтобы добиться четкости обводки, нужно выставить максимальный показатель straighten =1000. И низкое качество качество – Law. В высоком качестве все-таки остается блур по краям. Если применить фильтр дважды, то можно сделать двойной разноцветный контур.
3.Bevel, Gradient Bevel. Позволяют создавать эффект псевдо-объема. Очень редко использую их, как по мне, немножко они корявенькие. Чтобы добиться красивого эффекта, надо хорошенько покрутить все параметры. В фотошопе подобный фильтр выглядит значительно лучше.
4.Blur – размытие. Можно использовать при быстром движении объекта, фона и т.д. Или применять к дальним планам фонов. С помощью этого эффекта можно сделать тень.
5.Gradient Glow – то же свечение, только с применением градиента.
Функция knockout в некоторых фильтрах – оставляет видимым лишь контур, а сам объект исчезает. Позволяет создавать загадочные таинственные силуэты в темноте:)
6.Adjust color – позволяет перекрасить объект, изменяя оттенок (hue), яркость и контраст. Полезное свойство этого фильтра - возможность перевести цветное изображении в черно-белое. (Saturation = -100).
И напоследок можно вздохнуть и подытожить:
Плюсы фильтров.
- позволяют создавать красивые эффекты, такие как тень, свечение, блур доступные ранее лишь в более продвинутых графичеcких редакторах – фотошопе и иллюстраторе.
- фильтры можно применить к анимированным объектам и анимировать.
Минусы фильтров.
- немного глючат. Во время анимации с фильтрами нередко происходили неожиданные чудеса: то исчезал эффект, то вновь появлялся. В последнее версии флеша во время редактирования объекта, к которому уже применен фильтр, флеш говорит «до свидания» и выключается.
- по сравнению с фильтрами в фотошопе, они хуже по качеству. Не получилось у меня во флеше добиться нужного эффекта, применяя аналог фотошоповских эффектов. Возможно, не хватило каких-то знаний.
Исходя из собственного опыта, хочу поделиться маленькими хитростями, которые помогут в рисовании. Флеш всего-лишь инструмент для художника, но, овладев им, можно существенно облегчить работу над созданием персонажей и иллюстраций.
1.Рисовать во флеше можно и не имея графического планшета. На выручку приходит инструмент перо (Pen Tool). Но эскиз лучше нарисовать на бумаге и отсканировать.
2.Несложные персонажи очень просто сложить из примитивов, как конструктор.
3.Для отрисовки эскизов удобно использовать опцию Onion skin на таймлайне. Это своего рода инструмент-калька – позволяет просматривать предыдущие кадры. Итак, эскиз помещаем в первый кадр, а рисуем во втором, активировав Onion skin.
4.Рисовать желательно при увеличении рабочей области (zoom in). Где-то когда-то прочитала совет увеличивать рабочую область до 400 %. Не совсем понимаю почему именно 400, беру и больше:) Считается, что таким образом линии получаются более ровными и гладкими.
5.Кисть во флеше имеет свою особенность - она меняет свой размер по мере приближения и отдаления области рисунка. Чем дальше изображение, тем она толще, а чем ближе - тем тоньше соответственно.
6.Важно освоить инструменты коррекции линий Smooth и Straighten Tool на панели инструментов в графе Options. Smooth смягчает контуры, а Straighten - делает их жестче, прямее. И в этом случае флеш имеет особенность: сглаживание при разном масштабировании рабочей области происходит по-разному. При приближении объекта к нам оно более плавное и незаметное, при отведении – более грубое. Увеличивая – уменьшая рабочую область, можно регулировать степень сглаживания, чтобы добиться наилучшего результата. Желательно каждую линию, будь-то овал лица, контур волос, глаза прочее редактировать по-отдельности, так будет проще контролировать процесс сглаживания.
7.Карандаш. Чаще всего обращают внимания на его 3 режима на панели инструментов Options - Smooth (сглаживание), Straighten (выпрямление), Ink (чернильная линия), но реже упоминают о более полезном свойстве на панели Properties - соединение сегментов линий и форма окончания линии. Они могут быть скругленными, острыми и со скосом (bevel).
Пользуясь этими настройками, можно существенно изменить общий вид картинки, если рисунок выполнен карандашом.
8.Оbjects drawing на панели инструментов – полезная опция, чтобы части рисунка не слипались, а существовали как отдельные объекты. Это позволяет редактировать картинку в будущем.
9.Чтобы уменьшить вес графики, используем функцию оптимизации. Это важно для банеров, ведь требования к банерам часто жесткие - до 15-25 кб, например. А в голову уже не приходит, что еще можно выбросить, чтобы втиснуться в нужный размер. То же касается и онлайн флеш-игр, в некоторых случаях графику нужно максимально упростить (уменьшить количество точек и кривых). В таких случаях оптимизируем графику: modify – shape – optimize. Если включить превью,можно наблюдать, как оптимизация отражается на внешней форме объекта.
10.Растровые картинки, линии и текст можно преобразовать в форму для дальнейшего редактирования.
– текст и растр – с помощью разбивки Ctrl+B:
– карандашные линии – путем преобразования линии в заливку : modify – shape – convert lines to fills. Если объект покрылся сеточкой – значит, процедура прошла успешно:) И можно делать с ним все, что угодно.
В данной статье будет рассмотрен интересный эффект свечения текста. Текст будет постепенно, буква за буквой появляться и при этом одновременно с этим по появляющимся буквам будет проходить свечение, как-будто буквы текста будут появляться благодаря этому свету.
Для этого урока я использовал программу Adobe Flash CS5.
1 Создаем новый документ с нужными параметрами, эффект свечения текста будет лучше смотреться на темном фоне, поэтому я выбрал черный цвет фона.
3 Далее выбираем написанный текст и нажимаем комбинацию кнопок "Ctrl+C", чтобы скопировать текст, затем создаем новый слой, называем его "Текст_2" и находясь на нем нажимаем комбинацию кнопок "Ctrl+Shift+V", чтобы вставить на этот слой ранее скопированный текст, после чего отменим видимость и заблокируем слой "Текст", пока он нам не пригодится, он пригодится, когда мы будем создавать эффект пробегающего свечения у текста.
4 Затем разбиваем текст на отдельные буквы, для этого выбираем текст, кликаем по нему правой кнопкой мыши и из выпадающего списка выбираем "Разделить".
5 Теперь нам надо поместить каждую букву текста на отдельный слой, для этого опять кликаем правой кнопкой мыши по тексту и из выпадающего списка выбираем "Разделить по слоям", в результате каждая буква будет помещена на отдельный слой с соответствующим ей названием, после чего слой "Текст_2" можно удалить, он нам больше не нужен.
6 Далее над каждым слоем с буквой создадим еще слой, он нам понадобится, чтобы размещать на нем пробегающий луч света для каждой буквы, чтобы не запутаться его можно переименовать в "Свет" и создадим простые кадры на 100 кадре всех слоев.
7 Теперь создадим луч свечения, который будет исходить от букв текста. Луч мы будем использовать один и тот-же для каждой буквы, просто в зависимости от размеров буквы по высоте мы будем изменять и параметры луча света. Для этого для начала увеличте рабочую сцену в несколько раз, чтобы было удобней работать, перейдите на слой "Свет" над слоем с первой буквой текста, в моем случае этот слой будет находиться над слоем с буквой "F" и находясь на нем инструментом "Линия (N)" с любым цветом обводки рисуем контуры луча свечения буквы, потом заливаем контур белым цветом и удаляем его линии обводки.
8 Выбираем наш нарисованный луч света и задаем ему линейный градиент от белого к прозрачному, чтобы луч постепенно угасал от буквы.
9 После того, как вы сделаете луч, преобразуйте его в ролик, под названием "Свечение".
10 Теперь приступим непосредственно к анимации. Для начала сместим центр ролика луча света, для этого выбираем инструмент "Свободное преобразование (Q)", выбираем им ролик пучка света, зажимаем его центр и перетаскиваем его в начало появления луча света.
11 Затем нам надо поместить этот луч света на каждый слой "Свет", для этого пока ролик пучка света все еще выбран копируем его нажимая комбинацию кнопок "Ctrl+Shift+V" и вставляем его на каждый слой "Свет" нажимая комбинацию кнопок "Ctrl+C".
12 Теперь включите видимость слоя "Текст", благодаря ему мы находясь на любом кадре временной шкалы будем видеть весь написанный текст, затем перейдите на слой с первой буквой, зажмите его первый ключевой кадр и перетащите его на 15 кадр временной шкалы, после перейдите на вышележащий слой "Свет" и перетащите его ключевой кадр на 10 кадр временной шкалы.
13 Далее находясь на томже 10 ключевом кадре слоя "Свет" перетащите пучек света, чтобы он исходил из центра первой буквы, затем создаем ключевой кадр на 20 кадре того-же слоя "Свет" и находясь на нем инструментом "Свободное преобразование (Q)" сужаем наш луч света примерно в 5-6 раз и создаем "Классическую анимацию движения между двумя ключевыми кадрами.
14 Перейдем к свечению второй буквы, для этого выбираем слой с соответствующей буквой и перетаскиваем его ключевой кадр на 17 кадр, что на 2 кадра дальше, чем у первой буквы, затем выбираем слой "Свет" над второй буквой и также перетаскиваем его ключевой кадр на 12 кадр, что также дальше на 2 кадра, чем для свечения у первой буквы.
15 Находясь на 12 ключевом кадре слоя "Свет" над второй буквой перетаскиваем луч света к центру второй буквы и так как до середины моего текста шесть букв, а потом направление свечения должно изменить направление, то и лучи света надо равномерно уменьшать шесть раз, поэтому сужаем пучок света на 1/6 от исходного размера и при необходимости изменяем его размеры по вышине, затем создаем ключевой кадр на 22 кадре тогоже слоя и находясь на нем опять сужаем луч света примерно в 5-6 раз и создаем "Классическую анимацию движения между этими ключевыми кадрами.
16 Аналогично проделываем и со свечением для остальных букв, а начиная с седьмой буквы, тоесть середины текста свечение изменит свое направление, в результате должно получиться что-то вроде этого:
17 Теперь нам надо удалить лишние кадры на каждом слое "Свет" после анимации свечения букв, чтобы после появления букв озаряющий их свет пропадал и заодно удаляем слой "Текст", он нам больше не нужен.
18 Также для более красивого эффекта свечения текста можно отредактировать ролик свечения, например добавить ему продольных полос с каким-нибудь другим цветом и прозрачностью градиента, или закруглить свечение, вообщем поэксперементируйте.
В этой статье мы рассмотрим, как применить фильтр свечения к любому изображению с помощью кода AS. Вы можете использовать этот эффект для некоторых флэш-кнопок или баннеров. Из этого урока вы узнаете, как преобразовать любое изображение в символ фрагмента ролика, как дать разрешение на выполнение кода на нем и многие другие приемы.
Создайте новый флэш-документ. Нажмите Ctrl + J на клавиатуре ( Свойства документа ), установите частоту кадров 30 и нажмите ОК.
Теперь выберите File> Import> Import to Stage (Ctrl + R) и импортируйте любое изображение в сцену flash.
Пока изображение все еще выделено, нажмите клавишу F8 ( Преобразовать в символ ), чтобы преобразовать его в символ видеоклипа
Пока только что созданный фрагмент ролика все еще выделен, перейдите на панель свойств под сценой. На левой панели вы увидите Имя экземпляра в поле, назовите это изображение фрагмента ролика, как показано ниже:
Вызов текущего слоя image. Дважды щелкните его имя по умолчанию ( Слой 1 ), чтобы переименовать его. Когда вы закончите вводить новое имя, нажмите Enter.
Создайте новый слой над изображением слоя и назовите его действие
Выберите первый кадр действия слоя и перейдите на панель сценария действий (F9). Затем введите этот код в разделе действий:
var gf: GlowFilter = new GlowFilter (0x70A146, 15, 18, 14, 3, 3, истина, ложь);
var ds: DropShadowFilter = новый DropShadowFilter (2, 35, 0x70a146, 5, 5, 5, .8, 3, false, false, false);
image.filters = [gf, ds];
image.onRollOver = function () <
this.onEnterFrame = function () <
gf.blurX + = (80-gf.blurX) / 5;
gf.blurY = gf.blurX;
image.filters = [gf, ds];
>;
>;
image.onRollOut = function () <
this.onEnterFrame = function () <
gf.blurX + = (20-gf.blurX) / 5;
gf.blurY = gf.blurX;
image.filters = [gf, ds];
если (gf.blurX
удалить this.onEnterFrame;
>
>;
>;
Читайте также: