effective_AdobeFlashCS3

31

Создайте новый слой с названием actions. Переместите его наверх, перейдите в 1КК слоя actions, F9 – открывая панель Действия. Отключите помощник по сценариям, наберите

stop();

Сверните панель действий. Выберите кнопку. Разверните панель. Включите помощник по сценариям. «+», Глобальные функции, Средство управления фрагментами роликов, выбрать

on

В разделе событие указаны события по которым возможно задавать действие на кнопку.

«+», Глобальные функции, Элемент управления временной шкалой, gotoAndPlay.

Номер кадра поставьте 2

Чтобы самолет в конце полета остановился, лкм по 10 кадру слоя actions, F6, развернуть панель действий, уберите помощник по сценариям и напишите stop();

проверьте работоспособность проекта – Управление, тестировать ролик. Сохраните проект.

32

Интерактивные галереи

Создайте новый файл, задайте ему темно-серый цвет фона. Файл, Импорт, Импортировать в библиотеку. Найти папку с примерами в которой находятся файлы: Angela, Kaysar, Kaysar2, kuntal, kuntal2, michael, выделите их.

Нажмите Открыть.

Импортированные объекты помещаются в библиотеку.

Переходя по пунктам, просмотрите импортированные файлы. Переименуйте слой в thumbnail. Инструментом Прямоугольник без линий окантовки с

33

белым цветом заливки без выбранной опции «рисование объектов», нарисуйте прямоугольник.

Инструментом прямоугольник синего цвета без линий контура нарисуйте квадрат. И поверните его при помощи инструмента Свободное преобразование на 45 градусов (с клавишей Shift поворот будет осуществлен четко на 45 градусов). Перенесите квадрат на угол нарисованного ранее прямоугольника, лкм по свободной части сцены, снова выберите квадрат и оттащите его в сторону.

Таким образом создастся засечка на углу прямоугольника. Удалите квадрат. Создайте новый слой с названием images. Выделите и скопируйте полученный объект, заблокируйте слой thumbnail

Переедите в слой images и выполните Редактирование, Вставить на месте. Преобразуйте вставленный объект в символ с именем thumbnail1 и типом ФР.

Войдите в режим редактирования символа, создайте новый слой с именем image . Перетащите изображение с именем michael в этот слой. Переместите этот слой на задний план (в панели времени это нижняя позиция).

34

При помощи инструмента Свободное преобразование, задайте новые размеры для импортированного графического объекта.

Разместите их таким образом, чтобы верхние края импортированной графики и нарисованного объекта совпадали. По верхнему слою щелкните пкм и выберете Маска.

Вернитесь на сцену. Продублируйте полученный результат – удерживая клавишу Alt переместите объект.

35

Войдите в режим редактировании одного из объектов и уберите блокировку слоев. После этого выберите графический объект. Из Angela из библиотеки. Вернитесь на сцену. Н всех экземплярах один и тот же рисунок. Перейдите в режим редактирования символа и удалите картинку Angela. Перейдите на сцену. Пкм по второму экземпляра символа, Дублировать символ, задать имя thumbnail2.

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

Выбрать Angela, Ок. Аналогично с оставшимися экземплярами, продублировать и заменить графику. Переставить слой images вниз. Разблокировать слой thumbnail. Преобразовать нарисованный объект в кнопку, продублировать и разместить над графическими объектами из слоя images. Войти в режим редактирования кнопки. Создайте все состояния кнопки.

Удалите состояние прохождений. Состояние Вверх, преобразуйте в символ ФР с именем alphatn. Задайте для него прозрачность около 40%. Вернитесь на сцену. Протестируйте проект, сохраните его.

Придание динамики графическим изображениям

Откройте 013.fla. создайте новый слой с именем pattern, расположенный между слоями background и interface. Инструментом прямоугольник, заливка черная, без контуров с включенной опцией рисование объектов, нарисовать прямоугольник по размеру сцены, за исключением верхнего баннера. В панели цвет, выберите тип – растровое изображение. Можно попробовать использовать уже импортированную заливку. Нажмите Импорт, в открытом окне, выберите diagonal, затем scanline. Задайте текстуру в виде косых линий

36

для прямоугольника в слое pattern. Преобразуйте прямоугольник в ФР с именем rpattern. В панели свойств задайте режим смешивания Осветлить, посмотрите на результат, затем выберите Перекрытие, посмотрите на результат. Измените параметры Цвет – Альфа – 47%.

Войдите в режим редактирования символа и замените заливку на линейную. Перейдите на сцену, измените режим наложения на Умножение, поменяйте прозрачность на 14%. Посмотрите на результат. Сохраните результат.

Создание баннера для Веб с использованием готовой графики

Создайте новый файл, задайте проекту параметры – размер 600 на 100 пикселов.

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

Кэширование растровой графики

Откройте 015.fla. Запустите проект на просмотр. Уберите замок на слое bg и выделите содержимое сцены, после чего удалите. При помощи инструмента прямоугольник нарисуйте прямоугольники нескольких цветов в левом верхнем углу сцены. Инструментом перо нарисуйте замкнутый контур. Выделите их и преобразуйте в символ ФР. В панели свойств поставьте галочку в пункте Применить кэширование растрового изображения времени выполнения. Данная опция оптимальна в случае, когда графика не меняет свою форму при анимации. Посмотрите снова на проект в действии.

Размытие при движении

Откройте 016.fla. поставьте отображение соя feet. При помощи ползунка времени просмотрите проект и то как он меняется со временем. Перейдите в слой person. Откройте библиотеку, из которой из папки images, вынести на сцену – kaysar-web_Curves 1.png. Выровняйте его по сцене. Преобразуйте его во ФР, назовите его person.

Лкм по 14 кадру слоя person, F6. Задайте анимацию движения между 1КК и 2КК в слое person. Перейдите в 1КК слоя person, передвиньте объект вправо, таким образом, чтобы персонаж пропал со сцены. Лкм по 60 кадру в слое person, F5. Перейдите в 1КК этого слоя. Выберите персонажа, в панели свойства, задайте Цвет, Альфа – 40%. Просмотрите результат анимации. Перейдите на 1КК, выберите персонажа, зайти в панель Фильтры, нажмите на «+», Размытие, отменить симметричность размытия, задать размытие по х=0, по у=20. Просмотрите результат анимации.

37

Перейдите в 1КК слоя person, в панели свойств поставьте параметр Замедлить равное 72. Просмотрите результат анимации.

Создайте КК в 15 и 16 кадрах слоя person. В 3КК выберите объект. В панели свойств выберите Цвет, Яркость 58%.

Проведите аналогичные манипуляции с анимирующимся текстом.

Анимированный переход между экранами

017.fla, перейдите в layer 3, инструментом прямоугольник белого цвета без контуров с включенной опцией Рисование объектов, нарисуйте прямоугольник.

Пкм по layer 3, Маска, посмотрите на то как изменилось отображение слоев. Ухватив лмк слой bg перенести его в область маски.

Посмотрите на изменение вида слоев и на изменение картинку на сцене. Отмените блокировку верхнего слоя (лкм по замочку) в слоя layer 3. Посмотрите, что картинка приобретает иной вид, но на просмотре все равно будет картинка, как в заблокированном состоянии, просто программа не в состоянии отобразить динамически изменения маски.

Инструментом стрелка передвиньте прямоугольник и снова поставьте блокировку слоя – снова отобразится картинка, которая будет на выходе проекта.

Удалите прямоугольник При помощи инструмента прямоугольник нарисуйте квадрат белого цвета

без обводки в левом верхнем углу сцены. Вертикальна сторона квадрата равна ширине верней полосы на расположенном ниже объекте. Инструментом стрелка выберите нарисованный квадрат.

Вставить, Эффекты временной шкалы, Помощники, Копирование на линии сетки.

Воткрывшемся окне поставьте 20 колонок и 10 строк, нажмите на кнопку Обновить изображение для предварительного просмотра. Передвиньте диалоговое окно в сторону и посмотрите на результат. Полученный результат не полностью закрывает сцену. Поставьте значения 25 колонок и 14 строк и снова нажмите на кнопку предварительного просмотра Если результат заполнения оказался удачным, то нажмите на кнопку Ок.

Набор из квадратиков заполняет содержимое сцены на layer 3.

Впанели Библиотека рассмотрите, что была создана специальная папка, в которую были помещены созданные Вами объекты. В папке Папка Эффекты содержится изначальный квадрат под названием EffectSymbol, а вся сетка из квадратов находится в символе Копирование на линии сетки. Преобразуйте символ квадрата с которого все и началось в ФР – пкм по символу в библиотеке, свойства, установить точку в разделе ФР.

38

Через библиотеку войдите в режим редактирования символа. Пкм по символу в библиотеке, Редактировать ИМЛИ Редактировать на месте. Лкм по 25 кадру, F6. пкм по 1КК, Создание анимации движения. Перейдите в 2кк, инструментом Стрелка выберите квадрат, выберите инструмент Свободное преобразование и увеличьте размер квадрата примерно на 25%. Перейдите в 1кк, выберите квадрат и при помощи инструмента Свободное преобразование, уменьшите квадрат примерно в 4 раза и поверните на 45 градусов (это логично выполнить в режиме отображения 400% на экране). При помощи ползунка времени посмотрите полученную анимацию, и убедитесь в ее корректности.

Вернитесь на сцену.

Задайте тип символа Копирование на линии сетки в ФР. Удалите экземпляр символа со сцены. Войдите в режим редактирования символа Копирование на линии сетки. При возможный вопросах программы – согласитесь с ней Продлите время существования слоев до 25 кадра лкм по 25 кадру нижнего слоя F5, аналогично с верхним слоем.

Ползунком времени просмотрите полученный эффект.

Создайте КК в 25 кадре верхнего слоя. Перейдите во 2КК верхнего слоя и разверните панель Действий. Отключите помощник по сценариям и напишите:

stop();

Сверните панель и перейдите на сцену. Перетащите измененный символ из библиотеки на сцену.

Создайте маску слоя и переместите нижний слой в зону маскирования (см. начало урока).

Присмотрите итог анимации.

Лого

018.fla

Создайте новый слой и назовите его gradient. Уменьшите процентное отображение информации на экране. Нарисуйте прямоугольник с линейным градиентным от черного к белому цветом заливки, без контуров с отключено опцией Рисование объектов. Размер прямоугольника по высоте примерно совпадает с размерами сцены, по горизонтали примерно в 3-4 раза шире и закрывает собой сцену.

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

При помощи панели Цвет, модифицируйте градиент задав большее число градиентных переходов от черного к белому (4-5 переходов).

39

С использованием инструмента преобразования градиента, поверните градиент на 40-45 градусов.

Инструментом стрелка выделите полученный объект с заливкой, F8, ФР, задайте имя sheen.

В панели свойств выберите режим наложения Перекрытие, Жесткий свет, Слой, выберите лучший вариант.

Лкм по 40 кадру слоя gradient, F6. инструментом стрелка передвиньте градиент таким образом, чтобы правая часть градиента совпадала с правой границей сцены.

Лкм по 1КК слоя gradient и в панели свойств задайте анимацию движения. Лкм по 40 кадру слоя Layer 1, F5.

При помощи ползунка времени, просмотрите полученную анимацию Для более плавной анимации увеличьте время анимации до 60 кадров, для

этого выделите по одному кадру в обоих слоях и нажимая на клавиатуре клавишу F5 добейтесь дину временной дорожки в 60 кадров.

Войдите в режим редактирования символа sheen и при помощи панели Цвет задайте более резкие приходы градиента.

Вернитесь на сцену.

Посмотрите анимацию и сохраните файл.

Создание металлического интерфейса с бликом

Откройте файл 019.fla. создайте новый слой с названием glint. Сделайте его самым верхним. Перейдите в этот слой. Приблизьте левый верхний угол интерфейса. Инструментом Овал белого цвета без заливки, с отключенной опцией рисование объектов, нарисуйте маленький круг.

Инструментом Стрелка, выделите его, Изменить, Форма, Смягчить каря заливки.

В диалоговом окне, выберите значение 12 пикселов за 12 шагов, расширение идет наружу.

Снимите выделение и посмотрите результат (очень схож с размытием по Гауссу в других графических пакетах).

При помощи инструмента Свободное преобразование, уменьшите размер (при необходимости)

Вернитесь кт 100% отображения на экране и снова просмотрите результат.

40

Выделите круг, F8, ФР с именем glint. Передвиньте его как показано на рисунке:

Пкм по слою glint, и выберите Добавить путеводитель (или нажмите на кнопку Добавить путеводитель в панели слоев.

Появляются направляющий слой, в котором можно нарисовать незамкнутую траекторию для движения объектов. Перейдите в этот слой, заблокируйте слой glint. Инструментом Перо с толщиной 1 и обведите верхний край контура интерфейса (важно при рисовании не прерывать рисование и не разрывать кривую) В дальнейшем эту кривую можно будет скорректировать. Продлите время существования всех слоев до 12 кадра. Для этого выделите 12-е кадры во всех слоях и нажмите F5 после этого необходимо задать 2 положения блика в слое glint. Для этого, перейдите в 12кадр слоя glint и нажмите F6.

Инструментом стрелка переместите блик таким образом, чтобы центр блика в первом ключевом кадре находился в начале кривой-траектории, во втором КК – в конце.

Щелкните пкм по кадру в промежутке между 1КК и 2КК в слое glint и выберите Создать анимацию движения. Протестируйте и сохраните проект. Чтобы не было постоянного мелькания, можете продлить время существования первых двух слоев до 40 кадра.

Имитация написания рукой

020.fla. лам по 40 кадру, F6. Выберите инструмент Резинка. Лкм по 38 кадру F6. Резинкой сотрите часть надписи. Выделите 2 КК (это 38 кадр) перетащите его на 2-3 кадра левее, и удерживая клавишу Alt, отпустите мышку – кадр дублируется. Резинкой сотрите еще кусок надписи. И т.д. пока не сотрется вся надпись (в самом начале анимации).