1

Санкт-Петербургский государственный университет

информационных технологий, механики и оптики

Кафедра компьютерных образовательных технологий

Д.Г. Штенников

Эффективная работа в Adobe Flash CS3

Учебно-методическое пособие

Санкт-Петербург

2008

2 УДК 681.3

Штенников Д.Г. Эффективная работа в Adobe Flash CS3.

Учебно-методическое пособие. – СПб., 2008. – с.

Рецензенты: Л.С. Лисицына, к.т.н., доцент, зав. каф. КОТ СПбГУ ИТМО

А.В. Белозубов, к.т.н., доцент каф. КОТ СПбГУ ИТМО

Учебно-методическое пособие предназначено для использования в учебном

курсе «Информатика» по ряду специальностей и направлений подготовки

студентов университета, а также для поддержки курсов повышения

квалификации работников образования по программе «Основы ИКТ для

применения в образовательной деятельности» по заказу Комитета по

образованию Санкт-Петербурга.

Печатается по решению УМС факультета ИТиП СПбГУ ИТМО

© Санкт-Петербургский государственный

университет информационных технологий

механики и оптики, 2008

3

Оглавление

Оглавление __________________________________________________________________ 3

Символы ____________________________________________________________________ 5

Кадры и ключевые кадры _____________________________________________________11

Простая анимация движения (Motion) _________________________________________12

Простая анимация формы ___________________________________________________14

Экземпляры символов________________________________________________________15

Вложенная анимация ________________________________________________________18

Анимация фильтров _________________________________________________________21

Флеш для СД и ДВД __________________________________________________________23

Интерфейс в силе Хай Тек ____________________________________________________26

3Д кнопка __________________________________________________________________30

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

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

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

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

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

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

Лого _______________________________________________________________________38

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

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

Движение по траектории ____________________________________________________41

Разворачивание рисунка. _____________________________________________________42

Эффект векторного рисунка _________________________________________________43

Эффект с контуром _________________________________________________________44

Эффект с контуром 2 _______________________________________________________44

Оптимизация растровой графики _____________________________________________45

Псевдо 3Д во Флеш __________________________________________________________46

Дым и туман _______________________________________________________________47

Отражение _________________________________________________________________48

Использование управляемого замедления или ускорения анимации ________________48

Катящийся шар _____________________________________________________________51

Падение предмета __________________________________________________________51

Движение персонажа ________________________________________________________51

4 Продвинутые кнопки ________________________________________________________51

Прелоадер __________________________________________________________________54

Пользовательский курсор ____________________________________________________55

Перетаскивание объектов ___________________________________________________56

Фото галерея _______________________________________________________________57

Сайт на Флеш ______________________________________________________________58

Создание графической оболочки для загрузки страниц ___________________________59

Использование фокуса _______________________________________________________60

Слайдер ____________________________________________________________________60

Выпадающее меню __________________________________________________________62

Работа с видео ______________________________________________________________64

Видео эффект ______________________________________________________________68

Векторное видео ____________________________________________________________68

Эффект старого кино _______________________________________________________71

Здание внешнего вида для компонент _________________________________________73

Добавление звука к кнопке ___________________________________________________74

Зацикливание музыки ________________________________________________________78

Использование переменных ___________________________________________________80

Кнопки с запоминанием действий _____________________________________________80

XML фотогаллерея __________________________________________________________81

Прокрутка для текста ______________________________________________________81

MP3 проигрыватель _________________________________________________________82

Форма для отправки e-mail ___________________________________________________82

Использование AS3 __________________________________________________________83

Связь с ФР __________________________________________________________________83

Использование функций ______________________________________________________84

События на мышку __________________________________________________________86

События на клавиатуру _____________________________________________________87

Действия на кадр ___________________________________________________________88

Действия на кнопкие ________________________________________________________88

Таймер _____________________________________________________________________89

Классы _____________________________________________________________________89

Использование условий _______________________________________________________93

Циклы______________________________________________________________________95

5

Символы Для начала необходимо разобраться с таким основополагающим понятием, как символы. Откройте файл 001.fla, расположенный в папке Lessons. Файл, Открыть, найти папку Lessons и найти в ней файл 001.fla

6

Выбрать файл 001 (в зависимости от настроек ПК рядом с названием может отображаться расширение .fla) На экране отображаются три заготовки под символы. Во Flash существуют три основных типов символов – Графика (Г), Кнопка (К), Фрагмент ролика (ФР) (в различных вариантах можно встретить перевод как Ролик, Муви Клип). Каждый из типов символов представляет из себя объект, обладающий набором свойств и обладающий специфичными возможностями. Выделите первый круг, для этого щелкните по нему левой клавишей мыши (лкм) (поскольку у данного объекта отсутствуют линии контура, если бы контуры присутствовали, пришлось бы щелкнуть лкм 2 раза). Выделенная часть объекта отмечается «сеткой»

В меню Изменить, Преобразовать в символ, на экране появляется диалоговое окно, в котором можно выбрать тип символа и при необходимости задать параметры для совместного использования с ActionScript (AS) (встроенным языком программирования). Дополнительные

7 параметры для использования с AS можно увидеть, если нажать на кнопку «Дополнительно»

Переход в обратный режим осуществляется нажатием на кнопку «Основные». Также возможно выбрать точку регистрации, относительно которой, будет происходить изменение масштаба, поворотом и движение символов. Выберите «Графика» и нажмите Ок. При этом стоит обратить внимание, что, для символов типа Графика невозможно использование с элементами AS (видно, что заблокирован пункт Экспортировать для ActionScript) Таким образом, может быть получен символ типа Графика, просмотреть это можно в панели Свойства.

8

В данной панели виден тип символа – Графика, указано, то рисунок, отображаемый на экране, является экземпляров Символ 1 из библиотеки, там же в панели свойств можно увидеть ширину (Ш), высоту (В), координаты объекта X и Y, отсчитанные от левого верхнего угла сцены. Для символов типа Г доступна корректировка цвета:

Яркость – изменение яркости для объекта Тон – изменение оттенка для объекта Альфа – изменение прозрачности для объекта Дополнительно – комбинация эффектов В тоже время, видно, что Смешать – заблокирован и нет возможности использовать эффекты смешивания (как в Photoshop) так, же для объектов (символов) этого типа недоступны эффекты.

Изменилось и отображение объекта на экране:

Вместо «сетки» вокруг объекта появляется рамка, в верхнем углу крестиком отмечена точка регистрации.

9 Выделите второй круг и щелкните по нему правой клавишей мыши (пкм), Преобразовать в символ. Выберите «Фрагмент ролика» ФР, Новое название для помещения в библиотеку дается автоматически (Символ 2). Данный символ можно использовать совместно с AS. Если отметить пункт Экспортировать для ActionScript, то данному символу будет возможность задать еще одно имя для скриптового извлечения из библиотеки.

Для скриптового извлечения из библиотеки дается еще одно имя для ФР, которого может не совпадать с именем в библиотеке, также существует возможность для задания класса для создания программных элементов.

В панели свойств видно, что выбран ФР, он является экземпляром символа 2 из библиотеки, экземплярам типа ФР можно задавать имена для более

10 удобно работы с AS – «Имя экземпляра», также для ФР можно применять цветовые эффекты и режимы смешивания, а также фильтры. Выделите третий круг, F8, и выберите Кнопка. Для кнопки возможны почти те же возможности, что и для ФР. К возможностям добавляется возможность создавать просто кнопки или создавать элементы меню

Редактирование каждого из символов ограничено – им можно менять оттенки, задавать смешивание цветов, менять масштаб, но использовать новые градиентные заливки, редактировать контуры невозможно. Это можно делать только в режиме редактировании символов. Отличия между ними значительнее, чем видимы на экране. Каждый из созданный Вами символов, отображается в библиотеке.

Щелкните 2лкм по ФР, вы увидите новую линейку времени, которая находится внутри каждого ФР и может не совпадать с действиями, совпадающими на основной сцене.

В панели времени видно, что вы находитесь в режиме редактирования Символа 2, который находится на сцене 1. Перейти обратно на сцену можно щелкнув лкм по светло-голубой стреле рядом с названием сцены или 2лкм по фоновой части сцены. В режиме редактирования символов существует возможность редактировать конуры и заливки объектов, а также менять их позиционирование. Вернитесь на сцену 1 и 2 лкм по кнопке, в символах этого типа отсутствует привычная временная линейка.

11 По умолчанию в кнопках присутствуют 4 состояния, и они все равны состоянию Вверх. Вверх – состояние не нажатой кнопки Прохождений – курсор мыши наведен на кнопку Вниз – кнопка нажата Попаданий – область реакции кнопки Создайте все состояния индивидуальными (F6 3 раза или перетягиванием состояния с нажатой клавишей Alt), создать все состояния анимированными и разрывными, кроме того, эти состояния по местоположению могут не совпадать по местоположению друг с другом. Вернитесь на сцену и сохраните файл: Файл, Сохранить.

Кадры и ключевые кадры Откройте файл 002.fla. На экране отображается панель времени, в которой присутствуют 2 слоя

В слое waves присутствует один заполненный ключевой кадр (КК) – обозначенный черной точкой, содержимое этого кадра не меняется с 1 по 35 кадры. Отмечается окончание этого статичного ключевого кадра белым прямоугольником. Для того чтобы случайно не переместить содержимое этого слоя или не создать в нем новых элементов слой заблокирован – об этом говорит значок в виде замка в атрибутах слоя. При необходимости можно этот слой можно сделать невидимым – для этого щелкнуть лкм по черной точке, находящейся под символом «глаз». В слое Finnie находятся 2 КК, в первом КК располагается первое положение рыбки, во втором КК располагается конечное положение рыбки. Для того чтобы продлить время существования нижнего слоя (waves) необходимо или щелкнуть лкм по 40 кадру и нажать клавишу F5 (Вставить, Временная шкала, Кадр), можно пкм по 40 кадру, вставить кадр. С экрана рыбка пропадает, т.к., рыбка существует 35 кадров, а море 40 кадров. Чтобы вставить КК на слое Finnie, щелкните лкм по 40 кадру данного слоя и нажмите F6 (можно, Вставить, Временная шкала, Ключевой кадр) или пкм, Вставить ключевой кадр.

12 Над временной шкалой находится ползунок красного цвета, передвигая который можно увидеть, как меняется содержимое на сцене. Перейдите в 1КК слоя Finnie, Выберите рыбку и в панели Свойства, в которых, задайте параметр Альфа 0% или 18%

Перейдите во 2КК этого слоя и обратите внимание, что во 2КК рыбка непрозрачна, передвигая ползунок времени, можно увидеть, как рыбка не только меняет свое положение, но и меняет прозрачность. Щелкните лкм по 19 кадру слоя Finnie, нажмите F6, создавая новый КК, выберите рыбку и в панели Свойства задайте Тон, цвет тона и процентное применение этого эффекта, например синий цвет и 100% эффекта.

Посмотрите, как меняется рыбка со временем. Вернитесь во 2КК, выберите рыбку и задайте применение эффекта 10%. Инструмент «Свободное преобразование», поверните рыбку на 45 градусов и снова посмотрите на результат анимации. Дополнительно хотелось бы отметить, что не только применение того или иного эффекта и местоположение объектов может быть различно в разных КК, но и программные действия могут быть различны. Сохраните файл.

Простая анимация движения (Motion) Откройте 003.fla. посмотрите, на временной линейке отображаются параметры времени для данного проекта:

1 – номер кадра, в котором Вы находитесь 12.0 кадров/с – скорость проигрывания анимации (задается в свойствах документа) 0.0 с – время, прошедшее со времени анимации Создайте 2КК в слое Finnie через 3 секунды после начала анимации, для этого щелкните лкм по 36 кадру в слое Finnie и нажмите F6

13

Прокручивая ползунок времени, обратить внимание как меняется время в панели времени. Необходимо создать море по всему времени существования верхнего слоя с рыбкой. Если просто взять мышкой за 1КК в слое waves и перетянуть его на 36 кадр(лкм по кадру, а затем нажать на выделенный кадр и перетянуть его правее), то в панели времени появится:

Видно, что вид 1КК изменился – в нем пропала черная точка – такая форма говорит о том, что данный КК пустой, передвигая ползунок времени, можно это проверить. По этому, этот способ не подходит, отмените действие(я) Ctrl+Z или Редактирование, Отменить Переместить кадры. Щелкните лкм по 36 кадру waves и нажмите F5

Перейдите во 2КК слоя Finnie (а 2КК есть только в нем), выберите рыку и передвиньте ее по горизонтали (удерживая клавишу Shift). Таким образом, в 1КК:

А во 2КК:

14

Перейдите в 1КК слоя с рыбкой и в панели Свойства, выберите Анимация, Движение

Панель Свойств изменят свой вид:

Кадры в слое Finnie, так же меняют свой вид:

Стрелка в кадрах показывает, что анимация с точки зрения программы, задана, корректна, сиреневый цвет кадров – о том, что задана анимация Движения. Аналогично, можно было добавить анимацию движения: Пкм по кадру, расположенному между двумя ключевыми кадрами, Создать анимацию движения Или: Вставить, Временная шкала, Создать анимацию движения. Сохраните файл.

Простая анимация формы Файл, Создать, //Инструмент Овал, задать параметры лини окантовки и заливки,

15 Проверить, чтобы не рисовались примитивы Инструмент текст, Статик текст, цвет, тип шрифта, размер 96, лкм, по сцене, написать букву, выделить ее посмотреть различные размеры для буквы, вернуться к размеру 96, для большего увеличения размера ввести значение 160 в качестве размера буквы. Разбить букву на кривые, снять с нее выделение и инструментом Стрелка модифицировать одну из сторон буквы, затем выделить букву и перенести ее в другую часть листа. Отменить изменения контуров и положения на сцене. Лкм по 5 кадру, F6. Выберите инструмент прямоугольник и нарисуйте прямоугольник поверх буквы. Передвигая ползунок времени, проверить, что буква превращается в прямоугольник скачкообразно. Лкм 1КК – панель Свойств Tween Shape . Ползунком времени проверить, что переход из буквы в прямоугольник происходит равномерно. Лкм 10к, F6. Изменить цвет прямоугольника на зеленый (это можно сделать заливкой или в панели свойств). Выберите инструмент Эллипс и нарисуйте эллипс поверх прямоугольника. Лкм 2кк, Свойства, Tween Shape, Просмотреть, что анимация происходит плавно. Сохранить файл с называнием 004.fla

Экземпляры символов Создайте новый файл, назовите его 005.fla в этом файле создайте несколько одинаковых объектов при помощи инструмента Овал. Выдержать одинаковые размеры затруднительно. Один из способов получать одинаковые по размеру объекты – использовать экземпляры символов. Выделите один из объектов, нажмите F8 и выберите Кнопка.

Нажмите Ок, Символ помещается в библиотеку, и внешний вид объекта меняется – появляется рамка вокруг объекта, в точке регистрации помещается крестик, в центре символа – окружность.

16

Нажмите Delete, удаляя объект со сцены, но данный объект остается в библиотеке. Перетащите символ из библиотеки на сцену.

В панели свойств будет указано Экземпляр: Символ 1 – т.е. - экземпляр символа 1, находящегося в библиотеке. Выберите Символ 1 в библиотеке, щелкните пкм и выберите Переименовать, после чего введите название Ball.

(или нажмите на кнопку Свойства в панели Библиотека, после чего переименуйте символ).

После этого, символ в библиотеке меняет название и в панели свойств меняется информация:

Из библиотеки перетащите несколько экземпляров символа Ball и расположите их на сцене.

17

Войти в режим редактирования символа (2лкм по символу), после чего получаете возможность редактировать контуры и цвет заливки символа.

Задайте новый цвет заливки для символа

Автоматически с этим все символы, находящиеся на сцене меняют цвет. Вернитесь на сцену. Выберите один из символов и разбейте его на части (Ctrl+B или Изменить, Разделить). Таким образом, объект снова преобразуется в кривые. Выберите один из символов, войдите в режим редактирования и измените цвет. Все экземпляры изменят цвет, кроме того,

18 который был разбит на части и перестал ассоциироваться с символом из библиотеки. В панели Свойств, можно изменить свойства символа.

Измените объект на ФР, и задайте Имя Экземпляра ball1

Изменил состояние только один из экземпляров, все остальные объекты продолжают оставаться кнопками. Но если поменять заливку одного из экземпляров, то изменится и заливка ФР, поскольку все экземпляры ссылаются на символ в библиотеке. Выберите символ в библиотеке и выберите его свойства при помощи одноименной кнопки. Поменяйте тип объекта на ФР.

После чего символ в библиотеке приобретает иную пиктограмму

Все дальнейшие объекты, которые будут перенесены из библиотеки - ФР. Разнообразить внешний вид символов можно при помощи применения фильтров, эффектов цвета или смешивания.

Вложенная анимация Откройте 006.fla. В библиотеке 3 символа, все они являются ФР.

19

Перенесите chopper на сцену

Затем перенесите rotor и tail-rotor. Выделите все символы, находящиеся на сцене и выберите инструмент Свободное преобразование. Удерживая клавишу Shift, за угловой маркер отмасштабируйте объекты.

Для более удобной работы приблизьте объекты при помощи инструмента Масштаб. Инструментом Стрелка выберите ротор (rotor).

20 2лкм по ротору на сцене или в библиотеке – зайдите в режим редактирования символа. Рассмотрите не то, как создан объект. Щелкните лкм по 5 кадру и нажмите F6. Между двумя ключевыми кадрами щелкните пкм и выберите Создать анимацию движения.

Ротор вертолета автоматически преобразовался в символ Графика, это можно проверить в панели Свойства. Перейдите во 2КК, Инструмент Свободное преобразование, уменьшить размер ротора по горизонтали.

Лкм по 10 кадру, F6, создавая 3КК, между 2КК и 3КК создайте анимацию движения.

Увеличьте ротор до первоначального размера. Вернитесь на сцену. Войдите в режим редактирования символа tail-rotor. Выделите элементы винта, F8, Графика. Лкм по 6 кадру, F6, лкм по 1КК, в панели Свойств выберите Анимация Движение.

В панели Свойств, задайте Вращение 1 раз по часовой стрелке.

Нажмите Ctr+Enter, чтобы проконтролировать движение винтов. Закройте просмотр. Выберите инструмент стрелка, лкм по сцене, в панели Свойств задайте 24 кадра в секунду.

Выберите trail-rotor, панель Фильтры, нажать на +, выбрать Размытие, поставить высокое качество и размер размытия 4-5 пикселов.

21

Выделите все символы на сцене и преобразуйте их в ФР. Щелкните лкм на 70 кадре, F6. Передвиньте вертолет и винты в противоположную часть сцены. Между ключевыми кадрами задайте анимацию движения. Сохраните файл.

Анимация фильтров Как существует возможность анимировать движение объектов, также существует возможность анимировать фильтры, точнее их процентное их применение. Откройте файл 008.fla. Измените масштаб отображения сцены таким образом, чтобы она была видна полностью.

Выберите 1КК, в нем выберите вертолет. При помощи инструмента Свободное преобразование, увеличьте размер объекта примерно на 10-20%. Инструментом Стрелка, выберите вертолет на 1КК, в панели свойств, задайте ФР в качестве типа экземпляра символа.

После этого, становятся доступными фильтры. Перейдите в панель фильтров. Нажмите на «+» и выберите фильтр тень, задайте параметры тени. Размытие примерно 15-20, Качество высокое, расстояние 100-150.

За вертолетом помещается тень.

22

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

2лкм по названию слоя и задайте название sun слоя, для фиксации названия нажмите Enter.

Щелкните лкм по 1КК слоя sun.

Инструментом Овал с желтым цветом заливки и отсутствием обводки нарисует солнце.

В 1КК слоя sun должна появиться черная точка, а на сцене – солнце от которого будет падать тень на вертолет. Инструментом Линия красного цвета проведите линию от солнца в направлении вертолета. Инструментом Стрелка выберите вертолет и в панели Фильтры скорректируйте угол падения света на вертолет.

23

Перейдите в 2КК первого слоя, выберите вертолет и придайте ему тип экземпляра символа – ФР. В слое sun, инструментом линия, нарисуйте еще одну линию, при помощи которой будет направлена тень на вертолет во втором КК. Настройте тень для вертолета во 2КК.

Флеш для СД и ДВД 009.fla, просмотрите проект в работе Ctrl+Enter. Закройте окно предварительного просмотра, откройте настройки публикации (Файл, Параметры публикации или в панели Свойства, нажать на кнопку Параметры). Откройте закладку Форматы и выберите Windows Projector (.exe) будет создан файл для запуска из од операционной системы Windows. Macintosh Projector создаст файл для OS X.

24

Для публикации в указанных форматах нажмите Опубликовать. Закройте окно публикации и зайдите в папку с примером, помимо файла в формате fla, появились файлы в форматах swf – для встраивания в другие проекты, например в html, exe, app. Посмотрите файл .exe, затем вернитесь во Flash. Layer 41 переименуйте в actions, перейдите в 1КК слоя actions и разверните панель действий (F9 или Окно, Действия).

25 В панели действий нажмите кнопку Помощник по сценариям для перехода в облегченный режим ввода скриптовых действий.

Панель Действия разделена на 2 части – в левой части показаны скрипты, разбитые по категориям и объекты – КК, ФР, кнопки на которые можно применить скрипты. Выберите категорию Глобальные Функции, в ней подкатегорию – Браузер/Сеть.

2 лкм по fscommand, действие добавляется в список скриптов, исполняемых на КК

26

В специальных полях высвечиваются возможные параметры данного действия (для AS3 подсказки подобного вида отсутствуют)

В списке команд для автономного проигрывателя, выбрать fullscreen, автоматически выбирается со значением true (истина). Затем добавьте команды allowscreen – для удержания оригинальных размеров проекта, затем showmenu с параметром false – для отключения меню. Сверните или закройте панель действий. Снова опубликуйте проект и посмотрите результат. Вернитесь во Flash, создайте слой с названием exit. Зайдите в этой слой, с использованием инструмента Текст – напишите слово Exit, или любое слово. Затем выберите инструмент Стрелка, нажмите F8 и преобразуйте слово в кнопку. Раскройте панель действий и снова добавьте fscommand.

Действие добавляется, но не просто, над действием появляется on(release) – по отпусканию лкм. В списке команд выбрать quit. – таким образом, будет сделан вариант для выхода из проекта. Опубликуйте проект и посмотрите на его работоспособность.

Интерфейс в силе Хай Тек Задайте размер сцены 750х400, цвет сцены сделайте синим. Выберите инструмент прямоугольник, задайте ему сглаживание углов 10 пунктов, цвет заливки – темно-серый, обводка отсутствует. Для проверки действия инструмента нарисуйте 3 прямоугольника таким образом, чтобы они пересекались.

27 Выберите инструмент Стрелка, выделите нарисованный объекты и переместите их в центр сцены. Объекты воспринимаются как единое целое. Удалите объект. Выберите инструмент прямоугольник, в качестве опции данного инструмента укажите опцию Рисование объектов Нарисуйте 3 прямоугольника таким образом, чтобы они пересекались Выберите инструмент Стрелка и переместите объекты в центр сцены. Каждый из объектов воспринимается по отдельности. Выделите и удалите все объекты. При помощи инструмента прямоугольник нарисуйте прямоугольник со сглаженными углами таким образом, чтобы он занимал большую часть сцены, расстояние от левой, правой, нижней границ сцены примерно одинаковое, расстояние от верхней границы – 0.33 от размеров нарисованного прямоугольника. Выберите инструмент Стрелка. Скопируйте и вставьте прямоугольник в первоначальный координаты 2 раза. Переместите верхний прямоугольник под созданный ранее (он выходит за пределы сцены) Переместите второй прямоугольник примерно на 20 пикселов по x и на 20 пикселов по y. Выберите оригинальный прямоугольник (он был нарисован первым) и задайте ему белый цвет заливки. Последнему прямоугольнику задайте черную заливку. Совместите белый и черный прямоугольник таким образом, чтобы черный закрывал белый с разницей в 2-4 пиксела. Переместите серый прямоугольник таким образом, чтобы частично были видны черный и белый прямоугольники. Создайте новый слой и назовите его main Переместите слой таки образом, чтобы он стал нижним. Выберите инструмент прямоугольник и задайте нулевое сглаживание углов, задайте ему градиентный цвет заливки от черного к белому, уберите опцию Рисование объектов Поставьте замочек на первом слое, чтобы при редактировании не затронуть него. Перейдите на слой main. Нарисуйте прямоугольник, закрывающий почти всю сцену, оставив пикселов по 10 по краям. Выберите инструмент преобразования заливки, лкм по градиентному прямоугольнику. За маркер переверните градиент на 90 градусов против часовой стрелки. Посмотрите на результат. Сузьте заливку до размеров прямоугольника. Посмотрите на результат.

28 Сузьте заливку до размеров 20 пикселов и переместите полосу градиента к верхнему краю прямоугольника. Посмотрите на результат. Выберите инструмент стрелка и выделите фигуру, после чего зайдите в Панель Цвет, выберите Образцы , в нем выберите черный ползунок и задайте ему светло-серый цвет. Посмотрите на результат, затем задайте серый цвет. Хорошо видна импровизированная тень и хорошо виден светлый край ранее нарисованного объекта. Поставьте замочек на слой main. Создайте новый слой и назовите его navbar, переместите его наверх. Перейдите в этот слой. Выберите инструмент пипетка и щелкните лкм по серому прямоугольнику, находящемуся в слое 1. курсор мышки изменится и примет форму ведерка с замочком. Проверьте, чтобы не была выставлена опция Рисование объектов Выберите инструмент прямоугольник и нарисуйте прямоугольник таким образом, чтобы он находился внутри контуров прямоугольника из слоя main и не перекрывался с прямоугольником из слоя 1. (логичнее всего расположить его выше прямоугольника со слоя 1). Выберите зеленый цвет заливки, нарисуйте квадрат за пределами сцены, размером примерно 50 на 50 пикселов, при помощи инструмента свободная трансформация, поверните его на 45 градусов. Инструментом стрелка, выберите фигуру и переместите ее таким образом, чтобы она закрывала левый верхний угол навигационной панели. Снимите выделение с прямоугольника, выделите его снова, перенесите на правый верхний угол навигационной панели, снимите выделение. Выделите еще раз и перенесите за пределы сцены. У полученной навигационной панели обнаружатся скошенные углы. Для дальнейшей работы включите отображение линейки (Вид, Линейка) затем ухватитесь за горизонтальную линейку и удерживая лкм нажатой, переместите курсор ниже – у вас появится направляющая, по которой можно выставить модификацию нижней части навигационной панели. Поставьте линию примерно на 25 пикселов выше нижней грани навигационной панели. При помощи ранее нарисованного квадратика зеленого цвета сделать засечки на нижней границе навигационной панели (примерно по 50-70 пикселов слева и справа) Создайте еще две направляющие, но на этот раз – вертикальные и по направляющим выделите часть панели навигации, удалите выделенный фрагмент. Удалите направляющие путем перетаскивания их обратно на линейку. Выделите полученную фигуру F8, преобразуйте ее в символ Графика, назовите ее nav

29 Скопируйте полученный символ и вставьте два раза в исходные координаты. Раздвиньте экземпляры символов, чтобы они были видны по отдельности. Цвет символам не задается при помощи заливки, по этой причине разбейте на кривые нижний символ и задайте ему черный цвет заливки, передвиньте сверху второй символ, добейтесь позиционирования с точностью 2-4 пиксела, разбейте на части верхний этот символ и задайте ему белый цвет, поставьте верхний символ таким образом, чтобы были видны и белая и черная части расположенных ниже объектов. (Аналогично можно было выполнить данную операцию, задавая оттенки объектам в панели свойств). Выберите инструмент Линия и создайте новый слой с именем lines. Выберите черный цвет линий. Перейдите в новый слой и нарисуйте горизонтальную линию, расположенную на 10 пикселов ниже скошенного края навигационной панели и равную ей по длине. Скопируйте линию, поставьте на пиксель ниже и задайте белый цвет линии. Выделите обе линии и преобразуйте в символ Графика с названием lines. Скопируйте и вставьте символ, сдвиньте копию на 2-5 пикселов. Разблокируйте main, выделите прямоугольник, задающий фон интерфейсу и преобразуйте его в символ графика с названием bg. Переедите в панель фильтров и добавьте фильтр – тень с размытием 9-10, силу эффекта можно уменьшить до 30-40%. Создайте папку для слоев и назовите ее interface. Перетаскиванием переместите в нее слои с интерфейсом. Поставьте замок на папке слоем. Создайте новый слой, если этот слой попал внутрь папки слоев interface, вытащите его из нее. Назовите слой button. Инструментом прямоугольник без линий контуров, с белым цветом заливки, нарисуйте прямоугольник, находящийся над навигационной панелью. Проверьте, чтобы во время рисования, не была выбрана опция Рисование объектов. Выберите зеленый цвет заливки и нарисуйте небольшой квадрат (по высоте 0.5 от прямоугольника). Поверните квадрат на 45 градусов при помощи инструмента свободное преобразование. Инструментом Стрелка переместите его таким образом, чтобы квадрат накладывался на правый верхний угол прямоугольника. Снимите выделение (лкм по пустой части сцены) и затем выделите зеленый квадратик и удалите его. Скопируйте и вставьте в те же координаты полученный объект, задайте ему черную заливку и на 2-4 пиксела передвиньте в сторону. Задайте черный цвет заливки для объекта. Вставьте еще раз объект в изначальные координаты. Задайте темно-зеленый цвет и передвиньте, чтобы были видны и черная и белая части.

30 Выделите его и преобразуйте в кнопку (F8, кнопка) с именем button. Продублируйте кнопки по всей навигационной панели. При помощи панели Выравнивание – выровняйте их.

3Д кнопка Открыть 011.fla. Инструмент Овал, без контуров, заливка – радиальный градиент от красного к черному, возможна опция Рисование объектов. Удерживая Shift, нарисовать круг. Инструмент преобразование градиента, лкм по нарисованному кругу.

Уменьшить радиус заливки, передвинуть ее центр ближе к левому верхнему углу

При необходимости скорректировать результат. Выбрать инструмент стрелка. Преобразовать в символ button, тип символа – кнопка. 2лкм по созданному символу. Удерживая клавишу Alt, перетащите состояние Вверх на остальные состояния или нажмите три раза F6. В состоянии Прохождений выберите объект и задайте заливку от зеленого к черному. Вернитесь на сцену. Управление, Разрешить использование простых кнопок – проверить действие кнопок на сцене, повторить операцию, отменив разрешение на использование простых кнопок. Создайте слой с именем plane. Перенесите на него ФР plane из библиотеки. Лкм по 10 кадру слоя plane, F6. Передвиньте самолет по горизонтали, перейти в 1кк слоя plane, задать анимацию движения. Просмотрите анимацию, передвигая ползунок времени во временной линейке. Лкм по 10 кадру в Layer 1, F5 – продлевая время существования слоя до 10 кадра.

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 пикселов. Файл, Импорт, Импортировать в рабочую область, в окне выбрать файл PSCD-600x100, прокручивая ползунок времени, просмотрите вставленную графику. Посмотрите содержимое библиотеки. Сохраните проект.

Кэширование растровой графики Откройте 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, отпустите мышку – кадр дублируется. Резинкой сотрите еще кусок надписи. И т.д. пока не сотрется вся надпись (в самом начале анимации).

41 Перейдите в последний КК, откройте панель действий Отключите помощник по сценариям и напишите stop();

Движение по траектории Лкм по 25 кадру слоя waves, F5, лкм по 25 кадру слоя Finnie, F6. Щелкните пкм по кадру в промежутке между 1КК и 2КК в слое Finnie и выберите Создать анимацию движения. 2КК слоя переместите рыбку к левому краю сцены. Просмотрите анимацию. Пкм по слою Finnie, и выберите Добавить путеводитель (или нажмите на кнопку Добавить путеводитель в панели

слоев. . Перейдите в этот слой. И инструментом Перо, прочертите кривую по которой должна проплыть рыбка. Совместите точку регистрации в 1КК с окончанием кривой, а в 2КК с началом кривой. При помощи ползунка времени просмотрите анимацию. В 1КК при помощи инструмента Свободное преобразование поверните рыбку по направлению к траектории. Во 2КК также поверните рыбку по траектории. Чтобы рыбка была полупрозрачная, в панели свойств задайте наложение: Смешать – умножение. Создайте слой и назовите его action. Сделайте его верхним. лкм по 25 кадру слоя actions, F6. Разверните панель действий и запишите stop(); Перейдите в 1кк слоя Finnie, в панели свойств нажмите на кнопку Редактирование

Появляется окно при помощи которого можно задавать ускорение или замедление.

42

Лкм по середине кривой - отмечается точка, при помощи направляющих создайте точку перегиба на графике. Ок, просмотрите результат анимации.

Разворачивание рисунка. 022.fla. Из библиотеки перетащите графический объект на сцену. Лкм по 15 кадру слоя image, F6. Создайте слои с именами actions, scroll, mask. Лкм по 15 кадру слоя actions, F6. Разверните панель действий, напишите stop(); Перейдите в слой mask.инструментом Прямоугольник черного цвета без линий контуров с отключенной опцией Рисование объектов нарисуйте прямоугольник правее графики, помещенной на сцену. Лкм по 15 кадру слоя mask, F6. Инструментом Свободное преобразование, растяните прямоугольник на размер всей сцены. Пкм в этом слое, Задать анимацию формы. Просмотрите результат анимации. Пкм по названию слоя mask, Маска. Просмотрите результат анимации. Перейдите в слой scroll, нарисуйте прямоугольник черного цвета размер и позиция которого совпадали с размерами прямоугольника, нарисованного ниже. Задайте этому прямоугольнику линейную градиентную заливку от серый-белый-серый. Преобразуйте данный объект в символ – ФР. Лкм по 15 кадру слоя scroll, F6. Перенесите объект к левому краю сцены и задайте между ключевыми кадрами анимацию движения. Во 2КК слоя scroll уменьшите ширину символа – превратив его в полоску. Можете передвинуть ключевые кадры в слоях scroll &mask на 14 кадр.

43 Лкм по 15 кадру слоя scroll – Shift+F5 – удалите кадр. Отмените блокировку слоя image, выделите графический объект – преобразуйте его в символ – ФР. В панели Эффектов задайте эффект – тень с параметрами 5,5, 26%. Выполните разворачивание рисунка при помощи не вертикального объекта.

Эффект векторного рисунка 023.fla. Выделите картинку на сцене, Изменить, Растровое изображение, Векторизация.

Пороговое значение цвета отвечает, за то сколько цветов отсутствует в рассмотрении при векторизации, Наименьшая область – за минимальный размер вектора, подгонка кривой отвечает за предварительную форму векторов, пороговое значение угла – за то, как кривая будет изогнута. 80,8, Обычный, Обычный. Снимите выделение с объекта. Посмотрите на изменившийся рисунок. Выделите весь рисунок, F8, ФР с именем vector. Создайте новый слой и переметите его на задний план. Уберите видимость со слоя 1. Из библиотеки вновь перенесите оригинал на сцену. Включая и выключая глазик на слое 1, просмотрите оригинал и полученное изображение. Лкм по 40 кадру слоя 2 (он внизу), F5. Лкм по 25 кадру слоя 1, F6. Лкм по 1КК слоя 1, задайте анимацию движения Для объекта задайте 0% видимости. Выделите все кадры слоя 1 и придвиньте их таким образом, чтобы 2 КК слоя совпадал с 40 кадром временной линейки. Удерживая клавишу Alt, передвиньте второй кК на позицию первого – в первом КК должно появиться содержимое. Создайте слой actions. В нем создайте 2КК на позиции 40 кадра, в панели действий запишите: stop(); Просмотрите анимацию.

44

Эффект с контуром 024.fla. Создайте слой с названием car.перенесите в него из библиотеки картинку с именем car_fg. Заблокируйте этот слой. Создайте слой с именем outline и слой с именем mask. Выберете слой outline и пером белого цвета с толщиной линий 1-3 пиксела проведите обводку машины, затем при необходимости скорректируйте кривую. Перейдите в слой mask, удерите видимость у слоя car. Используя инструмент прямоугольник, нарисуйте квадрат зеленого цвета без обводки, расположенного в стороне от контура машины, затем выделите его и преобразуйте в ФР. Разместите его на одной из точек контура. Лкм по 4 кадру слоя mask, F6, передвиньте квадрат по прямой линии, между кадрами задайте анимацию движения. Задайте параметры проекта с 24 кадрами в секунду. Продлите время выполнения двух нижних слоев до 60 кадров. Работая в слое mask создавая ключевые кадры и перемещая квадрат по прямой лини, добейтесь полного обхода по кривой контура. Пкм по названию слоя mask, Маска. При помощи ползунка времени, посмотрите полученный результат анимации. Продлите время существования слоя outline на 1-2 кадра нова просмотрите анимацию. Разблокируйте слой car. Переместите ключевой 1КК слоя car на 32 кадр. Задайте эффект объекту на этом слое – Свойства, Цвет, Тон, белый, 100%. Создайте в слое car КК в 35 кадре, меду 32 и 35 кадрами задайте анимацию движения. И в 35 кадре уберите эффект оттенка до 26%. Лкм по 44 кадру, F6, между 35 и 44 кадрами задать анимацию движения, в 44 кадре уберите цветовые настройки у объекта. Для большей плавности в 32 кадре, выберете объект и ф панели эффектов задайте размытие – 19, 0. Создайте новый слой, лкм по 60 кадру нового слоя, F6, в панели действий указать stop();

Эффект с контуром 2 025.fla. Выделите картинку на сцене, Изменить, Растровое изображение, Векторизация. Задайте Пороговое значение 100. Снимите выделение с объекта. Снова выделите весь объект и задайте в панели инструментов черный цвет заливки. При помощи инструмента Чернильница задайте красный цвет внешнего контура. Выделите заливку и удалите ее, контур задайте черным. Создайте еще один слой и поставьте его на задний план. Из библиотеки перенесите в него автомобиль.

45 И теперь повторите предыдущий эффект но уже с контуром, полученным новым путем.

Оптимизация растровой графики 026.fla. Перенесите картинку Angela на сцену, снимите с нее выделение. Панель Свойства, выберете кнопку Параметры. В закладке Flash присутствует ползунок, отвечающий за сжатие картинки JPEG – качество JPEG. Закройте окно. 2лкм о названию картинки в библтотеке и отрываются свойства картинки.

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

46 Задайте параметры для фотографии Kaysar. Откройте панель Истории: Окно, Другии панели, Журнал:

Проверьте, что в данной панели отображаются все Ваши действия. При помощи кнопок вы можете сохранять или копировать наборы ваших действий. В панели выделите действие по заданию параметров растра для картинки. Лкм по кнопке со стрелкой вниз в данной панели, Сохранить как команду.

Задайте имя команды optimize60 и нажмите Ok. Теперь при выборе пункта меню Команды, будет появляться Ваше действие. При помощи Редактирование, Сочетание клавиш, задайте сочетание клавиш для данной операции которую применять можете и далее.

Псевдо 3Д во Флеш 027.fla. Войдите в режим редактирования ролика, расположенного на сцене. Посмотрите содержащуюся в нем информацию при помощи ползунка времени. Перейдите в слой image seq. Файл, Импорт, Импортировать в рабочую область. Выбрать папку 3Dsequence, выбрать первую по счету картинку, нажать на кнопку Открыть. В диалоговом окне (которое спрашивает о том, хотите ли вы импортировать всю последовательность картинок) скажите Да. При помощи ползунка времени просмотрите полученный результат. Выделите все кадры после последнего КК в слое image seq, Shift+F5 – удалите лишние кадры со статическим изображением. Выделите кадры с импортированной графикой в слое image seq, щелкните по ним пкм, Копировать кадры (или Редактирование, Временная шкала, Копировать кадры). Перейдите в первый свободный кадр слоя image seq,

47 пкм, Вставить кадры (или Редактирование, Временная шкала, Вставить кадры). Посмотрите полученный эффект. Переедите в 1КК слоя image seq, удерживая клавишу Shift, лкм по последнему ключевому кадру этого слоя – выделяются все кадры, пкм, Копировать кадры. Перейдите в первый свободный кадр слоя image seq, пкм, Вставить кадры. Посмотрите результат анимации. В конце анимации присутствует пустой кусок который необходимо заполнить. Для этого перейдите в 1КК слоя image seq, нажимая F5 добавьте необходимое количество кадров. Лкм по 1КК слоя image seq, выделите импортированную картинку, F8, ФР, Ок. создайте КК в 14 кадре слоя image seq, между 1КК и 2КК задайте анимацию движения. В 1КК, выберите ФР и в панели свойств задайте параметр Цвет, Альфа, 0. Просмотрите полученный результат.

Дым и туман 028.fla. Создайте новый слой с названием steam. Перенесите из библиотеки графику cloud на сцену. Затем преобразуйте графику в ФР с именем cloud1. Инструментом Свободное преобразование измените линейные размеры (например, непропорционально уменьшите в 2-3 раза). В панели свойств задайте Смешать, Осветлить. Войдите в режим редактирования символа cloud1. Снова выделите графический объект и преобразуйте его в ФР internal1. В панели свойств задайте Смешать, Перекрытие или Осветлить (последнее желательно для более светлой картинки). Лкм по 50 кадру, F6, пкм между КК, создать анимацию движения. В 1КК поставьте полученное облачко внизу сцены, во 2КК – облачко в верхней части сцены и задайте дополнительный параметр – Альфа 0%. В 1КК можно задать Альфа примерно 40% для объекта. Вернитесь на сцену. Разместите ФР за нижней гранью сцены. Просмотрите анимацию. Создайте новый слой с именем steam2. Перенесите в него cloud из библиотеки. При помощи инструмента Свободное преобразование, сузьте объект примерно в 4 раза, уменьшите высоту в 2 раза и перенесите в левый нижний угол сцены. Преобразуйте графику в ФР с именем cloud2. В панели свойств задайте Смешать, Осветлить. Войдите в режим редактирования, снова выделите графический объект и преобразуйте его в ФР internal2. В панели свойств задайте Осветлить. Задайте Альфа 60%. Лкм по 40 кадру, F6, пкм между КК, создать анимацию движения. В 2КК переставьте объект на верхнюю часть сцены, и увеличьте объект по ширине, Альфа 0%. Вернитесь на сцену и просмотрите анимацию. Создайте новый слой с именем steam3. Перенесите в него cloud из библиотеки. Преобразуйте графику в ФР с именем cloud3, измените размеры

48 символа, В панели свойств задайте Смешать, Осветлить. Войдите в режим редактирования, снова выделите графический объект и преобразуйте его в ФР internal3. В панели свойств задайте Осветлить, задайте Альфа 60%. Лкм по 60 кадру, F6, между кадрами задать анимацию движения. Разместите пар в 1КК внизу в правом углу сцены, в 2КК вверху в правом углу сцены, и задайте Альфа 10%.

Отражение 029.fla. выделите графический объект и преобразуйте его в ФР с именем banner. Скопируйте объект в буфер обмена. Создайте слой с именем reflection. Заблокируйте нижний слой, а в верхний слой поставьте копию символа. Переверните его относительно горизонтальной оси и сместите вниз. Заблокируйте слой. Создайте слой mask в котором нарисуйте прямоугольник черного цвета, закрывающий содержимое слоя reflection. Измените заливку прямоугольника на черно-белую линейную, причем у черного цвета поставьте Альфа 50%, а у белого 0%. Сузьте ширину градиентного перехода и поверните его на 90 градусов. Лкм по 1КК слоя reflection, в панели Действий записать: reflection.setMask(mask); Посмотрите на результат анимации. Зайдите в режим редактирования ФР –mask. Задайте цвет заливки черный – Альфа, 75%, а белый на половине градиента. Снова посмотрите на эффект. В дальнейшем можете для отражения задать наложение – умножение.

Использование управляемого замедления или ускорения анимации 001_1.fla. Создайте анимацию движение между ключевыми кадрами. Просмотрите анимацию. Лкм по 1КК в панели свойств задайте параметр Замедлить – 100. Посмотрите анимацию, затем поставьте Замедлить – -100 и снова посмотрите на результат анимации. Верните значение 0. Нажмите на кнопку Редактировать. Появляется возможность редактировать кривую замедления или ускорения движения. Если стоит галочка в пункте Использовать один параметр для всех свойств, то ко всем свойствам если эту галочку отменить, то можно задавать отдельно кривые для положения, поворота, масштаба, цвета, фильтров. Также в это панели есть кнопки при помощи который можно просмотреть или остановить движение. Измените кривую (лкм по точке и за направляющую поменять кривую):

49

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

Просмотрите анимацию. Добавьте новую точку: лкм по кривой и перенесите ее:

50

Ок. сохраните проект 001_2.fla. Задайте анимацию движения между ключевыми кадрами, просмотрите анимацию. Нажмите на кнопку Редактировать, задайте форму кривой:

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

51

Катящийся шар 002_1.fla. Просмотрите анимацию. Выделите кадры с 7 по 14 в каждом из слоев, F5 – добавьте кадры. Лкм по 7 кадру в слое 1, F6, лкм по 20 кадру в слое 1, F6. В 20 кадре выберите шар и при помощи инструмента свободного преобразования задайте объекту сдвиг влево. Между 2 и 3 КК и 3 и 4 КК в первом слое задайте анимацию движения. Просмотрите анимацию. В 3КК задайте параметр замедление – 100, а в 2КК замедление 100. Просмотрите анимацию.

Падение предмета 003.fla. Просмотрите изначальное движение предмета. Задайте анимацию движение между 1КК и 2КК анимацию движения, параметр Замедлить – -100. Лкм по 2КК во втором слое, F6 – создавая новый КК. Перейдите в этот КК, выберите объект, при помощи инструмента свободного преобразования увеличьте объект по горизонтали и уменьшите по вертикали (сплюсните объект). Переместите его таким образом, чтобы он нижней границей касался поверхности. Лк по 16 кадру, создайте ключевой кадр и еще немного сплюснете объект. Задайте анимацию движения между 3КК и 4КК. Лкм по 19т кадру, F6, уменьшите объект по горизонтали и увеличьте по вертикали объекта. Задайте анимацию движения между 5КК и 6КК. Затем задайте анимацию движения с параметром замедление – 100 между предпоследним и последним КК. Просмотрите анимацию.

Движение персонажа 004.fla. Просмотрите анимацию. 2лкм по объекту для того, чтобы просмотреть из чего состоит объект. Посмотрите на анимацию внутри символа при помощи ползунка времени. Рассмотрите, как двигаются все части персонажа. Увеличьте ширину шага (например, при помощи инструмента свободное преобразование). По аналогии нарисуйте своего

Продвинутые кнопки 005.fla. Выделите объект на слое buttons. Сдублируйте объект, F8 – кнопка. 2лкм по кнопке, удерживая Alt, перенесите содержимое ключевых кадров в соседние состояния (или можно наживать клавишу F6). В состоянии Прохождений измените цвет объекта на малиновый. Посмотрите на проект в действии. Вернитесь на сцену и удалите кнопку. Расположите заготовку под кнопку напротив действия home. Преобразуйте заготовку в ФР с именем buttons.

52 Войдите в режим редактирования символа. Переименуйте слой в buttons. Создайте слои с названиями: animation, labels, actions. Выделите 15-е кадры во всех слоях, F5. Лкм по 8 кадру в слое labels, F6. В панели в панели свойств задайте параметр метки кадра – out.

В 1КК укажите метку in.

Метки в кадрах обозначаются флажками. В слое animations, инструментом прямоугольник синего цвета без линий обводки, нарисуйте прямоугольник, закрывающий изначальный объект. При помощи панели Цвет – задайте градиентную заливку данному объекту – линейную, состоящую из цветов – 255,255,255,0; 255,255,255,100; или 255,255,255,0; 255,255,255,100; 255,255,255,0. Можете сдвинуть центральный ползунок вправо. Преобразуйте градиентный прямоугольник в ФР с именем grad. Лкм по 8 кадру в слое animations, F6. Задайте анимацию движения между КК. В 1КК передвиньте градиент влево от кнопки. Просмотрите анимацию при помощи ползунка времени. Лкм по 15 кадру, F6, задайте анимацию движения, в 3КК перенесите градиент влево. Создайте слой с именем mask, расположите его над слоем animations, перенесите в него содержимое из слоя buttons (например, удерживая клавишу Alt). Пкм по названию слоя mask, Маска. Просмотрите результат анимации. Переедите в слой actions, в панели действий, укажите stop(); Лкм по 7 кадру слоя actions, F6. в панели действий, укажите stop(); Выделите 10-е кадры в каждом из слоем и нажмите F5 2-3 раза для создания асимметричности анимации. Вернитесь на сцену. Перемесите объект в примерные координаты home. Укажите ему имя экземпляра home.

53

В 1КК слоя actions запишите: home.onRollOver=function(){ this.gotoAndPlay(“in”); } Посмотрите результат. В панели действий допишите следующее: home.onRollOut=function(){ this.gotoAndPlay(“out”); } Посмотрите результат. Доработайте символ buttons: вернитесь в слой buttons, 2лкм по символу, в слое actions, лмк по последнему кадру, F6. F6. в панели действий, укажите gotoAndStop(1); Вернитесь на сцену. Посмотрите результат. Удерживая клавишу Alt, разместите объекты в слое buttons под словами: gallery, words, contact. Поменяйте имена экземпляров на: gallery, words, contact. В слое actions добавьте: gallery.onRollOver=function(){ this.gotoAndPlay(“in”); } gallery.onRollOut=function(){ this.gotoAndPlay(“out”); } words.onRollOver=function(){ this.gotoAndPlay(“in”); } words.onRollOut=function(){ this.gotoAndPlay(“out”); } contact.onRollOver=function(){ this.gotoAndPlay(“in”); } contact.onRollOut=function(){ this.gotoAndPlay(“out”); } Посмотрите результат. Заставим одну из кнопок «работать», в панели действий в 1КК слоя actions допишите:

54 home.Release=function(){ bio.gotoAndPlay(1); } Как только появится клип с именем bio, он будет проигран с первого кадра.

Прелоадер 007.fla. Перейдите на 2КК в слое content, посмотрите на содержании проекта. В 1КК слоя actions запишите скрипт: stop(); Лкм по 2 кадру в слое actions, F6, запишите в панели действий: stop(); Лкм по 1КК слоя preloader. Из библиотеки перенесите logo на сцену. При помощи инструмента Свободное преобразование, увеличьте символ. Войдите в режим редактирования символа, создайте 2 слоя. Слой с логотипом назовите logo, второй слой – mask, третий слой – outline. Инструментом Чернильница создайте черный контур для логотипа, выделите его, Редактирование, Вырезать. Лкм по 1КК слоя outline, Редактирование, Вставить. Отключите и снова включите видимость нижнего слоя, чтобы проверить насколько хорошо получилась операция вырезания и вставки. Заблокируйте слои logo & outline. В слое mask нарисуйте прямоугольник темно-серого цвета без обводки с включенное опцией рисования объектов, закрывающий логотип. Выделите его, F8, ФР с именем mask. Задайте имя экземпляра mask. Пкм по названию слоя mask, Маска. Вернитесь на сцену. Инструментом Текст, с выбранной опцией – Динамический текст, создайте текстовое поле (нарисуйте).

Задайте имя текстового поля – myText.

В 1КК слоя actions запишите: myInterval=setInterval(preloader,10); function preloader(){ if(getBytesLoaded()>=getBytesTotal()){ play(); clearInterval(myInterval); } myText.text=(getBytesLoaded()/getBytesTotal()*100);

55 } Проверьте работу. Измените строку с заданием текста: myText.text=Math.round(getBytesLoaded()/getBytesTotal()*100)+”%”; Проверьте работу. В действиях добавьте еще: bar.mask._yscale= getBytesLoaded()/getBytesTotal()*100; проверьте работу. Назовите символ bar Проверьте работу.

Пользовательский курсор Создайте новый файл. Инструментом Овал нарисуйте круг с градиентной от черного к красному заливкой. Выделите его, F8, ФР с именем pointer. В диалоговом окне нажмите Дополнительно:

56

Поставьте галочку в «Экспортировать для ActionScript». Удалите объект со сцены. Лкм по 1КК, в панели действий запишите: function onEnterFrame(){ attachMovie(“pointer”, “pointer”, 100); pointer._x=_xmouse; pointer._y=_ymouse; } Проверьте работу. Уберите курсор Мыши – допишите внутри функции: Mouse.hide(); Проверьте работу.

Перетаскивание объектов 009.fla. Перенесите nyc из библиотеки на Сцену. F8, image. Создайте слой imaget. Скопируйте ФР и вставьте его в новый слой. Заблокируйте слой imaget. Создайте слои mask и actions. В слое mask, инструментом oval темно-серого цвета, с отключенным контуром и отключенной опцией рисование объектов нарисуйте круг. Выделите его, Изменить, Форма, Смягчить края

57 заливки – 14, 6. Снимите выделение, посмотрите результат. Заблокируйте слой image. Выделите круг, F8, mask. Задайте ему имя экземпляра – mask. Заблокируйте слой. Разблокируйте слой imaget, символу на этом слое задайте имя экземпляра – img, заблокируйте слой. Разблокируйте нижний слой. Уберите видимость слоя imaget. Выделите объект на слое image. Задайте яркость объекту – -70. Перейдите в слой actions, лкм по 1КК, в панели действий запишите: mask.onPress=function(){ this.startDrag(); } Проверьте действие. Допишите скрипт. mask.onRelease=function(){ this.stopDrag(); } Проверьте действие. Допишите скрипт. Img.setMask(mask); Проверьте действие. Для оптимизации разблокируйте слой с маской, выберите символ и поставьте галочку в пункте «Применить кэширование…» аналогично на символах картинок. Проверьте действие.

Фото галерея 010.fla. Запустите проект на просмотр, наводите курсор мыши на иконки, понаблюдайте на изменение картинок, понажимайте лкм. Лкм по первой кнопке, задайте имя экземпляра btn1, у второй кнопки – btn2, у третьей – btn3, у четвертой – btn4. Перенесите растровое изображение Angela на сцену, выделите его, преобразуйте в ФР с именем angela_mc, точка регистрации- левый верхний угол. Удалите экземпляр символа со сцены. В библиотеке это символ остался. Перенесите Kaysar-а, преобразуйте в символ с именем kaysar_mc, удалите со сцены. Перенесите kuntal, преобразуйте в символ с именем kuntal_mc, удалите со сцены. Перенесите michael, преобразуйте в символ с именем michael_mc, удалите со сцены. Проверьте библиотеку, все символы должны были остаться. Пкм по angela_mc, Связывание, поставить галочку в пункте «Экспортировать для ActionScript», пкм по kaysar_mc, Связывание, поставить галочку в пункте «Экспортировать для ActionScript» пкм по kuntal_mc, Связывание, поставить галочку в пункте «Экспортировать для ActionScript», пкм по michael_mc, Связывание, поставить галочку в пункте «Экспортировать для ActionScript». Создайте слой с именем script. Лкм по 1КК слоя script, в панели действий укажите: btn1.onRelease=function(){

58 attachMovie(“michael_mc”,”michael",0); michael._x=20; michael._y=120; } Запустите проект и проверьте действие кнопки. Если все работает, допишите скрипт. btn2.onRelease=function(){ attachMovie(“angela_mc”,” michael ",0); michael._x=20; michael._y=120; } btn3.onRelease=function(){ attachMovie(“kuntal_mc”,” michael ",0); michael._x=20; michael._y=120; } btn4.onRelease=function(){ attachMovie(“kaysar_mc”,” kaysar ",0); kaysar._x=20; kaysar._y=120; } Запустите проект и проверьте действие кнопки.

Сайт на Флеш 011.fla. Откройте и просмотрите содержимое проекта. Поставьте видимость всех слоев. Оставьте видимость только у слоя home, выберите символ, находящийся на сцене и войдите в режим редактирования символа. Войдите в режим редактирования символа, находящегося внутри символа home, посмотрите содержимое символа. Вернитесь на сцену. Оставьте видимость только у слоя contact, выберите символ, находящийся на сцене и войдите в режим редактирования символа. Вернитесь на сцену. Оставьте видимость только у слоя info,затем у portfolio. Верните видимость всем слоям. Передвиньте КК в слое portfolio на кадр вправо, в слое info на 2 кадра вправо, в слое contact на 3 кадра вправо. Получится «лесенка» из кадров, причем в каждый текущим момент времени будет виден только один из слоев с содержимым. Разверните папку interface, выделите все 4-е кадры из слоев в этой папке, F5. интерфейс появляется все время проекта. Сверните папку interface. Проверьте проект в работе. Лкм по 1КК в слое actions, напишите: stop(); Проверьте проект в работе.

59 Лкм по первой кнопке, укажите имя экземпляра btn1, по второй кнопке, укажите имя экземпляра btn2 по третьей кнопке, укажите имя экземпляра btn3 по четвертой кнопке, укажите имя экземпляра btn4. Лкм по 1КК в слое labels, выделите кадры с 2 по 4, F6 – создавая КК под метки. Лкм по 1КК в слое labels, задайте метку home, лкм по 2КК в слое labels, задайте метку portfolio, лкм по 3КК в слое labels, задайте метку info, по 4КК в слое labels, задайте метку contact. Лкм по 1КК в слое actions, напишите: btn1.onRealease=function(){ gotoAndStop(“home”); } Проверьте действие скрипта, если все ок, допишите скрипт: btn2.onRealease=function(){ gotoAndStop(“portfolio”); } btn3.onRealease=function(){ gotoAndStop(“info”); } btn4.onRealease=function(){ gotoAndStop(“contact”); } Проверьте действие скрипта.

Создание графической оболочки для загрузки страниц 012.fla. Откройте и просмотрите содержимое проекта. Разверните папку interface, посмотрите ее содержимое. Посмотрите отдельно содержимое следующих файлов: contact.swf, home.swf, info.swf, portfolio.swf. Вернитесь в проект. Лкм по первой кнопке, укажите имя экземпляра btn1, по второй кнопке, укажите имя экземпляра btn2 по третьей кнопке, укажите имя экземпляра btn3 по четвертой кнопке, укажите имя экземпляра btn4. Лкм по 1КК слоя loader, Вставка, Новый символ, cloader_mc, если при создании символа Вы автоматически перешли в режим редактирования символов, то вернитесь на сцену. Передвиньте символ (он будет в виде кружочка с крестиком) в левый верхний угол сцены. Задайте имя экземпляра символу – loader_mc. Переставьте слой loader вниз. Лкм по 1КК слоя actions, запишите скрипт: btn1.onRelease=function(){ loader_mc.loadMovie(“home.swf”); }

60 Проверьте действие скрипта, если все ок, допишите скрипт: btn2.onRelease=function(){ loader_mc.loadMovie(“portfolio.swf”); } btn3.onRelease=function(){ loader_mc.loadMovie(“info.swf”); } btn4.onRelease=function(){ loader_mc.loadMovie(“contact.swf”); } Проверьте действие скрипта. Вернитесь на 1КК слоя actions, в панели действий допишите кусок скрипта: onLoad=function(){ loader_mc.loadMovie(“home.swf”); } Проверьте действие скрипта.

Использование фокуса 013.fla. Откройте и просмотрите содержимое проекта. Лкм по первому ящику, F8, ФР, ibr, лкм по второму ящику, F8, ФР, ibg, лкм по второму ящику, F8, ФР, ibgr, лкм по второму ящику, F8, ФР, ibgre. Войдите в режим редактирования символа ibr. Вернитесь на сцену. Лкм по первому ящику, F8, кнопка btn1, по второму ящику, F8, кнопка btn2, по третьему ящику, F8, кнопка btn3, по четвертому ящику, F8, кнопка btn4. Войдите в режим редактирования символа btn1, в панели фильтров задайте симметричное размытие в 5 пикселов. Продублируйте состояние кнопки. Войдите в состояние Прохождений и для почтового ящика уберите размытие, при помощи инструмента свободного преобразования увеличьте. Вернитесь на сцену и проверьте действие кнопок (например, Ctrl+Enter или Управление, Разрешить простые кнопки). Войдите в режим редактирования символа btn2, в панели фильтров задайте симметричное размытие в 5 пикселов. Продублируйте состояние кнопки. Войдите в состояние Прохождений и для почтового ящика уберите размытие, при помощи инструмента свободного преобразования увеличьте. Аналогично с 3 и 4 кнопками. Проверьте действие кнопок.

Слайдер 014.fla. Запустите проект и посмотрите его возможности. Разверните папку design и рассмотрите содержимое слоев в данной паке. Создайте слой slider и переместите его над папкой design. Войдите в режим редактирования

61 символа slider из библиотеки. Посмотрите содержимое слайдера, вернитесь на сцену. Создайте пустой символ в слое slider. Вставить, Новый символ, ФР, placeholder, вернитесь на сцену. Если символ на сцене не отображается, то перенесите его из библиотеки. Для удобства позиционирования слайдера поставьте ФР с крайнюю левую позицию на сцене. Задайте имя экземпляра slider. Войдите в режим редактирования этого ФР. Создайте новый слой с названием menu. Из библиотеки перенесите slider в это слой, разместите слайдер таким образом, чтобы точка регистрации совпадала с левой границей сцены. Лкм по 10 кадру в слое menu, F6. Между 1КК и 2КК задайте анимацию движения. В 1КК слоя menu передвиньте слайдер влево. Лкм по 10 кадру слоя menu, F6, задайте анимацию движения между КК, в первом КК передвиньте слайдер таким образом, чтобы на сцене присутствовала надпись click here. Посмотрите, как будет происходить анимация движения слайдера. Удерживая клавишу Alt переместите 1КК на 15 кадр слоя menu – кадр дублируется. Задайте анимацию движения между 2КК и 3КК. При помощи ползунка времени просмотрите анимацию. Переместите layer 1 на верх. Лкс по 10 кадру, F6. В панели действий на 1КК слоя 1 запишите stop(); На 2КК слоя 1, запишите: stop(); Войдите в режим редактирования слайдера. Перейдите в слой buttons, заблокируйте остальные слои, инструментом прямоугольник зеленого цвета без обводки с выключенной опцией Рисование объектов, нарисуйте прямоугольник, закрывающий надпись click here. Выделите прямоугольник и преобразуйте в кнопку с именем invis. Войдите в режим редактирования кнопки и создайте состояние Попаданий (перенесите кадр из состояний Вверх на состояние Попаданий). Вернитесь на редактирование символа slider, задайте имя экземпляра – click_bnt. Нажмите F8и преобразуйте кнопку в ФР с именем menu и именем экземпляра – menu_mc. Вернитесь на сцену. В слое actions на сцене запишите: slider.menu_mc.click_btn.onRelease=function(){ slider.play(nextFrame); } Протестируйте приложение. Войдите в режим редактрования placeholder, В свойствах 1КК слоя menu укажите Замедлить: 100, Лкм по 2КК слоя menu, лкм по предыдущему кадру, F6. Переместите слайдер в «развернутое состояние». 2КК – -100. Лкм по последнему КК в слое menu, лкм по предыдущему кадру, F6. Переместите слайдер в «свернутое состояние». Протестируйте проект.

62

Выпадающее меню 015.fla. Разверните паку слоев Folder 1 и рассмотрите элементы содержимое слоев. Заблокируйте папку. Перейдите в слой menu, перенесите ФР menu из библиотеки на сцену, переместите ее таким образом, чтобы оно было расположено в верхней части сцены под заголовком «Drop outs…», задайте ширину ФР 550, имя экземпляра – menu_mc. Войдите в режим редактирования ФР, создайте слои с именами labels, menu text, submenu. Перенесите слой submenu вниз. Лкм по 5 кадру в слое labels, F6, 10 кадру F6, 15 кадру F6, 20 кадру F6. Лкм по 20 кадру в слое menus, F5. Задайте метку 1КК в слое labels – start, 2КК – l1, 3КК – l2, 4КК – l3. В 1КК слоя labels в панели действий запишите: stop(); В остальных КК – аналогично. В слое submenu при помощи инструмента прямоугольник – с оранжевой окантовкой и темно-серым цветом заливки нарисуйте прямоугольник, кот будет играть роль подменю. Инструментом стрелка 2 лкм по объекту – выделяется весь объект и контур и заливка, F8, ФР, с именем sub. Установите параметр непрозрачности около 70%. Заблокируйте слои menus & submenus. Переедите в слой menu text. Инструментом текст белого цвета, размер 14, шрифт _sans, с выставленной опцией Статический текст, укажите область для текста. В качестве текста напишите, разделяя Enter-ами: sublink1, sublink2, sublink3, sublink4.

Выберите кнопку в панели настроек – Изменить параметры формата: В появившемся диалоговом окне:

Задайте желаемые параметры для текста, например задайте межстрочный интервал, чтобы текст подменю умещался на нарисованном ранее прямоугольнике. Лкм по 20 кадру в слое menu text, F5. Лкм по 20 кадру в слое menu submenu, F5. Поставьте блокировку на слоях labels & menus. Отмените блокировку у слоев menu text & submenu. Разместите слои следующим образом: самый

63 нижний слой – submenu, затем – menu text, menus, labels. Выделите 1КК в слоях menu text & submenu, перенесите их на 5 кадры – таким образом создается 2КК, а 1КК получается пустым. Выделите содержимое слоев и перенесите под ссылкой link one. Снова выделите заполненные КК в слоях menu text & submenu и, удерживая клавишу Alt, перенесите в 10 кадр – КК дублируются. Выделите содержимое слоев и перенесите под ссылкой link two. Выделите заполненные КК в слоях menu text & submenu и, удерживая клавишу Alt, перенесите в 15 кадр – КК дублируются. Выделите содержимое слоев и перенесите под ссылкой link three. Выделите заполненные КК в слоях menu text & submenu и, удерживая клавишу Alt, перенесите в 20 кадр – КК дублируются. Выделите содержимое слоев и перенесите под ссылкой link four. Вернитесь на сцену. Создайте слой buttons, заблокируйте слои menu и actions. Инструментом прямоугольник без обводки с желтым цветом заливки нарисуйте прямоугольник, закрывающий ссылку link one. Выделите прямоугольник, F8, кнопка с именем invis. Войдите в режим редактирования символа, создайте состояние Попаданий, остальные состояния удалите. Вернитесь на сцену. Задайте для кнопки имя экземпляра btn1, продублируйте ее 3 раза, разместите над предполагаемыми пунктами меню, задайте имена экземпляров: btn2, btn3, btn4. Заблокируйте слой. Перейдите в слой actions, разблокируйте его. В панели действий запишите: btn1.onRollOver=function(){ menu_mc.gotoAndPlay(“l1”); } Проверьте действие кнопки. Если все Ок, напишите ниже: btn2.onRollOver=function(){ menu_mc.gotoAndPlay(“l2”); } btn3.onRollOver=function(){ menu_mc.gotoAndPlay(“l3”); } btn4.onRollOver=function(){ menu_mc.gotoAndPlay(“l4”); } Проверьте действие меню. Если все нормально, то зайдите в режим редактирования символа menu. Создайте новый слой rollout? Сделайте его самым нижним. Перейдите в этот слой. Инструментом прямоугольник желтого цвета без заливки с выключенной опцией по рисованию объектов, нарисуйте прямоугольник левее первого выпадающего меню, а затем ниже этого меню, затем правее меню (таким образом, чтобы эти прямоугольники слились в единый объект и образовали рамку). Выделите полученный

64 объект, F8, кнопка с именем rollout, войдите в режим ее редактирования. Создайте состояние Попаданий, остальные состояния удалите. Перейдите в режим редактирования menu, задайте имя экземпляра – rollout_btn. Лкм по 5 кадру в слое rollout, F6 переместите кнопку, 10 кадру, F6, переместите кнопку, 15 – F6, переместите кнопку, 20 – F6, переместите кнопку. В 1КК переместите невидимую кнопку за пределы сцены. Вернитесь на сцену. Перейдите в слой actions. В панели действий запишите: menu_mc.rollout_btn.onRollOver=function(){ menu_mc.gotoAndStop(“start”); } Проверьте действие меню.

Работа с видео 018.fla. Файл, Импорт, Импортировать видео.

65 Нажав на кнопку Обзор, выбрать dance_short, нажать на кнопку Открыть, затем нажать Далее.

Выбрать последовательную загрузку с web-сервера, затем нажать Далее.

66

67

Выбрать тему для оформления, затем нажать Далее.

68

В завершающем экране кроме кнопки Готово – особого выбора нет. Разместите импортированный объект на сцене по центру. Проверьте действие ролика.

Видео эффект 019.fla. Файл, Импорт, Импортировать видео. Для импорта выберите dance_short. Проверьте работоспособность ролика. Посмотрите, что по мимо сцены клип помещается в библиотеку. Преобразуйте видео-ролик в ФР. В панели свойств задайте яркость – -100%. Проверьте работоспособность ролика.

Векторное видео Создайте новый проект, задайте имя 020.fla. Параметры рабочей области: 720 на 480, 24 кадров в в секунду. Вставить, Новый Символ, ФР с именем video. В режиме редактирования символа, Файл, Импорт, Импортировать в

69 рабочую область. Из папки 020 выберите первый файл, и нажмите Открыть. На вопрос об импорте последовательности, скажите уверенное Да. Вернитесь на сцену и из библиотеки перенесите символ video на сцену. Поменяйте скорость кадров на 16 кадров в секунду. Войдите в режим редактирования символа video, лкм по 1КК, выберите графический объект на сцене, Изменить, Растровое Изображение, Векторизация. Пороговое значение цвета – 100, наименьшая область – 8, снимите выделение, посмотрите результат. Лкм по 2КК, выберите графический объект на сцене, Изменить, Растровое Изображение, Векторизация. Пороговое значение цвета – 100, наименьшая область – 8, снимите выделение, посмотрите результат. Делать так и далее более 100 кадров – долго и нудно. Откройте новую панель: Окно, Другие панели, Журнал.

В данной панели записаны Ваши действия. С ее помощью можно выбирать новые изображения и применять операцию Векторизация – нажимая на кнопку Повтор. Выделите действия: Векторизация и Отменить выделение, нажмите на кнопку в виде дискеты – сохранить выделенные действия как команду.

Укажите название команды: traceBM. После этого данная команда будет доступна в меню Команды. Для быстрого выполнения действий – Редактирование, Сочетание клавиш.

70

В разделе команды выберите Команды, traceBM,

71

Нажмите на «+», задайте сочетание клавиш, при закрытии окна нажмите Переопределить. Примените ко всем кадрам, посмотрите итоговый проект.

Эффект старого кино 021.fla. Окно, Компоненты.

72 В разделе Video, находятся компоненты по управлению видео. Выберите FLVPlayback и перенесите его на сцену. Окно, Инспектор компонентов.

В панели инспектор компонентов, выберите: contentPath,

Если появится значок в виде увеличительного стекла лкм по нему. Открывается окно для поиска пути к файлу который необходимо проиграть.

Выберите boat. Проверьте проект. Выделите вставленный ролик, F8, ФР, имя video-mov. В панели фильтров задайте: Настроить цвет, Яркость – 0, Контраст – 0, Насыщение – -100, Тон – 0. Для большей достоверности в панели свойств, задайте желтый тон процентов 10-20. Поэкспериментируйте с оттенками. Поставьте видимость и разблокируйте слой scratches. Посмотрите содержимое ФР, на этом слое. Дорисуйте и измените царапины. Вернитесь на сцену, заблокируйте слои scratches, Layer1. Разблокируйте слой lines. Посмотрите содержимое ФР, на этом слое (войдите в режим редактирования символа). Разблокируйте Layer1, выберите ФР на 1КК этого слоя, войдите в режим редактирования. Дорисуйте линию белого цвета с Альфа 20%. Разблокируйте слой brigtness. Посмотрите содержимое ФР, на этом слое (войдите в режим редактирования символа). Поменяйте параметры яркости.

73

Здание внешнего вида для компонент Создайте новый файл, из панели компонентов перенесите FLVPlayback на сцену. В панели инспектора компонентов выберите contentPath. Задайте путь к файлу boat. Измените размеры сцены на 720 на 530. Просмотрите проект. В инспекторе компонентов выберите skin.

Выберите тему: ArcticExternalAll.swf. Просмотрите проект. Просмотрите остальные скины. Выберите тему: ClearExterlnalAll.swf. Откройте файл: C:/Program Files/Adobe/Adobe Flash CS3/ru/Configuration/FLVPlayBack Skins/FLA/ActionSctipt 2.0/ArcticExternalAll. Посмотрите содержимое проекта. Файл, Импорт, Импортировать в библиотеку. Выберите button и chrome. В панели библиотека разверните папку Chromes, войдите в редактирование символа ClearExternalChrome. Разблокируйте и поставьте видимость для слоя Color Plate, перейдите в этот слой. Перенесите в него графику chrome. И переставьте его в оригинальные координаты. При необходимости отмасштабируйте изображение. Вернитесь на сцену. Компоненты поменяли внешний вид. Файл, Сохранить как, задайте имя: custom_skin в папку skins. На сцене выберите кнопку проигрыша видео,

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

Выберите первую кнопку.

В режиме редактирования кнопки создайте новый слой и перенесите в него графику button из библиотеки. Переставьте слой на нижнюю позицию. Аналогично замените фон в остальных кнопках. Вернитесь в режим редактирования PlayPauseButton, войдите в режим редактирования кнопок паузы. Войдите в режим редактировании кнопки с окантовкой. Войдите в режим редактирования еще раз, выберите окантовку и замените ее цвет на красный. Просмотрите проект. Перейдите в свой изначальный проект. В качестве скина выберите custom_skin.swf.

Добавление звука к кнопке 023.fla. Перенесите кнопку из библиотеки на сцену. Войдите в режим редактирования символа, протестируйте проект. Вернитесь на сцену и перенесите еще 3 кнопки на сцену. При помощи панели Выравнивания – выровняйте их и задайте равные промежутки между кнопками. Если панель отсутствует – Окно, Выровнять.

Выделите кнопки, нажмите на кнопку выровнять по центру . Затем

равномерно распределить горизонтальные центры :

75

Протестируйте проект. Войдите в режим редактирования символа, перейдите в состояние Вниз. В панели свойств выберите Звук и поменяйте на click.aif.

, В состоянии Вниз на временной линейке появляется звук. Синхронизацию поставьте по Событию, там же можно поставить количество повторов.

Протестируйте проект. 2Лкм по звуку в библиотеке (или пкм, Свойства).

76

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

77

В закладе Flash существуют параметры публикации звука, нажмите на кнопку Задать.

78 Скорость передачи в битах: 32 кбит/с, Качество Наилучшее. Протестируйте проект.

Зацикливание музыки 024.fla. Импорт, Импортировать в библиотеку, ColinGroove. Разверните панель interface, посмотрите ее содержимое, вверните папку. Создайте слои с именами music, actions и buttons. Перейдите в слой music, заблокируйте слои actions & buttons. Вставить, Новый символ, ФР с именем music. Лкм по КК в слое 1, в панели свойств задайте звук colinGrove, поставьте синхронизацию по Начать. Повторить, выберите Цикл. Перейдите на сцену, перенесите символ music на сцену. Протестируйте проект. Войдите в режим редактирования символа music, лкм по 195 кадру, F5. Выделите все кадры и передвиньте их на 1 кадр, перейдите в 1КК. Войдите в режим редактирования символа music, лкм по 2КК. В панели свойств, выберите заказной эффект.

Отредактируйте огибающую.

79

Прослушайте эффект. Вернитесь на сцену. В библиотеке из папки assets, перенесите 2 кнопки play_btn на сцену. Экземпляру music на сцене задайте имя экземпляра loops, кнопкам имена stopMusic и startMusic. В 1КК слоя actions запишите: stopMusic.onRelease=function(){ loops.gotoAndStop(1); } Для того, чтобы остановить все звуки в проекте, измените скрипт на следующий: stopMusic.onRelease=function(){ loops.gotoAndStop(1); stopAllSounds(); } Добавьте новый слой labels, расположите его над слоем с кнопками. В слое при помощи инструмента Текст, создайте де надписи: Stop и Play, разместите их над кнопками. В слое actions допишите скрипт: startMusic.onRelease=function(){ loops.gotoAndPlay(2); } Протестируйте проект.

80

Использование переменных Создайте новый файл. В 1КК в панели действий запишите: trace(“It is hot”); Протестируйте проект. В окне трассировки появится данное сообщение. Измените скрипт. var weather; weather=”hot”; trace(weather); Протестируйте проект. trace способен выводить в экран, видимый только при тестировании проекта информацию, описанную в кавычках, например о том до какой стадии исполнения дошел тот или иной скрипт, нажата или нет та или иная кнопка, или выводить значения переменных. Для большей корректности переменная была описана с использованием var. Поменяйте в скрипте строчку: weather=”9”; Протестируйте проект. В данном случае “9” выступает в роли строкового значения, а не цифры. Если написать значение без кавычек, то ничего не изменится, по этой причине введено определение типов переменных. Измените скрипт: var weather:String=”It is cold”; trace(weather); Протестируйте проект. Измените скрипт, поскольку trace позволяет выводить и более сложные конструкции: trace(weather+”in December”); Протестируйте проект.

Кнопки с запоминанием действий 026.fla. Посмотрите на скрпт в 1КК, запустите проект и посмотрите на его работу. Войдите в режим редактирования первой кнопки, вспомните. как Вы делали аналогичные кнопки. Вернитесь на сцену. Откройте действия на 1КК. var alpha_mid:Number = 75; var alpha_dim:Number = 20; это значения прозрачности которые будут присваиваться кнопкам в зависимости от того щелкали по ним лкм или нет. Оба значения являются числовыми. this.visited = true; указывает был ли щелчок лкм по кнопке. После чего задается значение: this._alpha = alpha_dim; this – является указателем на текущий экземпляр с которым происходит работа. По этой причине нет необходимости задавать множество схожих функций для разных кнопок.

81 Условие if(this.visited) { this._alpha = alpha_dim; } else { //normal alpha this._alpha = alpha_mid; } Проверяет выла ли нажата кнока, если это произошло, то значение alpha_dim, в противном случае: this._alpha = alpha_mid. Кнопка сброса выполняет сброс параметра visited для всех кнопок.

XML фотогаллерея 027.fla. Запустите проект и посмотрите на его работу. Откройте файл gallery_list. Данный файл содержит описание и название файлов которые отображаются в галереи, если будет необходимость добавить новые файлы, то можно поступить по аналогии. Создайте новый файл. Задайте темно-серый цвет фона. Инструментом текст (с выбранной опцией статического текста) напишите: “My Gallery” разместите надпись в левом верхнем углу сцены. Цвет оранжевый, шрифт Verdana, размер 14, жирный. Сохраните его с именем loader в папке с основным проектом. Вставить, Новый символ, ФР с именем myloader. Вернитесь на сцену. Перенесите символ на сцену и разместите его на левой границе сцены сразу под текстовой надписью. Задайте имя экземпляра loader_mc. Перейдите в 1КК и разверните панель действий в которой напишите: loader_mc.loadMovie(“027.swf”); Запустите проект и посмотрите на его работу. Перенесите файл sunset.jpg в папку с изображениями галереи. Внесите соответствующие изменения в файл gallery_list: <image> <name>Sunset at the beach</name> <image>sunset.jpg</image> </image> Запустите проект и посмотрите на его работу.

Прокрутка для текста Откройте файл id и просмотрит его содержимое. Создайте новый файл во флеш и сохраните его рядом с файлом id. При помощи инструмента текст на сцене создайте динамическое текстовое поле по высоте сравнимое в вертикальным размером сцены. Задайте возможность многострочного вывода и html форматирование:

82

Отключите кнопку Выбираемый которая позволяет выделять текст в текстовом поле, и поставьте видимость границ: Показать рамку вокруг текста. Задайте имя экземпляра textbox. В панели компонентов разверните раздел: User Interface. На сцену перенесите UIScrollBar. Если поместить компонент на край текстового поля, то компонент автоматически масштабируется под размер текстового поля. Лкм по 1КК, разверните панель действий в которой и запишите: myVars=new LoadVars(); myVars.onLoad=function(){ textbox.htmlText=this.Pitch; } Запустите проект и посмотрите на его работу. Допишите скрипт. myVars.load(“id.txt”); Запустите проект и посмотрите на его работу. Измените параметры текстового поля: синий цвет текста, размер 20. Запустите проект и посмотрите на его работу.

MP3 проигрыватель musicplayer.fla. Запустите проект и посмотрите на его работу. Откройте music1.fla, посмотрите на его содержание.

Форма для отправки e-mail 030.fla. Запустите проект и посмотрите на его работу. Включите и выключите слой Thank You. Запустите проект, заполните форму отправки сообщения. После нажатия на кнопку Submit появится сообщение об ошибке вызова php файла. Откройте файл Emailvlidation.php и посмотрите переменные, используемые файлом. Из библиотеки перенесите на сцену новое текстовое поле TextInput, разместите его под полем телефона. Выберите поле, в панели параметров выберите основные параметры компонентов.

Задайте имя экземпляра – fax. Укажите горизонтальный размер – Ш=200. При помощи инструмента Текст напишите рядом с текстовым полем Fax. Перейдите в слой actions, разверните панель действий. Измените скрипт: var fields:Array = [

83 // Input Field, Validate Function ['name', 'validateName'], ['email', 'validateEmail'], ['msg', 'validateMessage'], ['phone',''] ]; Внутри описания массива допишите строку: ['fax',''] А после строки ['phone',''] поставьте запятую – , В файл Emailvlidation.php добавьте строчку в разделе описания переменных: $fax = $_POST['fax']; И строчку: $email_info .= "Fax: " . $fax . "\n"; В разделе работы с переменными.

Использование AS3 Создайте новый файл ActionScript 3.0. В панели действий включите Помощник по сценариям. В панели выбора действий выберите stop и перенесите правее:

import fl.motion.Animator; not_set_yet.stop(); В правой части появляется список действий. Лкм по 2 строке,

В панели действий появляется поле выбора объектов к которому необходимо применить команду остановки. Напишите в нем my_mc, это название подставится: my_mc.stop(); Таким образом, видно, что во многом есть схожесть AS1, AS2 и AS3. Ранее импортирование не требовалось.

Связь с ФР Создайте новый файл ActionScript 3.0. При помощи инструмента прямоугольник с зеленым цветом заливки, без контуров нарисуйте прямоугольник. Выделите его, F8, ФР, имя mcRectangle. Задайте имя экземпляра rectangle1_mc. При помощи инструмента свободного

84 преобразования измените размер и угол поворота объекта. Из библиотеки перенесите на сцену еще 2 экземпляра, измените их параметры. Одному из экземпляров задайте оттенок. Назовите прямоугольники rectangle2_mc и rectangle3_mc. Создайте новый слой с именем actions. Лкм по 1КК слоя actions, в панели действии запишите: rectalgle1_mc.alpha=.5; Запустите проект. Измените значение на 0.15. Запустите проект. Создайте новый файл ActionScript 3.0. Переименуйте слой в actions, разверните панель действий. Запишите: var userName=”Tode”; В данном случае произойдет автоматическая типизация, но в данном случае при работе с такой переменной будут возникать проблемы при вызове методов для объектов. Чтобы таких проблем не возникало необходимо указывать: var userName:String=”Tode”; Для проверки работы присвоения переменной запишите ниже: trace(userName); trace(“Vse Ok”); Запустите проект и проверьте его работоспособность. Ниже запишите комментарий в одну строчку: // мой первый скрипт И комментарий в две строки: /* а может вовсе И не первый*/

Использование функций 001.fla. Запустите проект и проверьте его работоспособность. Создайте новый слой с именем actions. Лкм по 25 кадру, F6. Разверните панель действий. Запишите: stop(); Данная команды выполнят остановку проекта. Запустите проект и проверьте его работоспособность. Заменимте скрипт: gotoAndStop(2); Данная команда выполняет безусловный переход на 2 кадр и остановку. Запустите проект и проверьте его работоспособность.

85 002.fla. Посмотрите содержимое проекта. Запишем функцию (Ф) которая будет управлять сноубордистом. Лкм по 1КК в слое actions. В панели действий запишите: function moveBoarder():void{ boarder_mc.y=50; boarder_mc.rotation=45; } moveBoarder(); void – обозначает функцию которая не возвращает значение, boarder_mc.y=50; – задает координату y. boarder_mc.rotation=45; – задает поворот в градусах. moveBoarder(); - вызывает Ф. Запустите проект. 003.fla. Посмотрите содержимое проекта. Лкм по 1КК в слое actions. Измените Ф таким образом, чтобы она возвращала значение: function moveBoarder():Number { boarder1_mc.y -= 150; boarder1_mc.scaleX = 2; boarder1_mc.scaleY = 2; return boarder1_mc.y; } boarder1_mc.y = moveBoarder(); Для того, чтобы Ф вернула значение. Необходимо типизация Ф, использовался return и дальнейшее присвоение значение. Запустите проект. Выведите в трайсе значение: trace(moveBoarder()); Запустите проект. Измените последнюю строчку на: boarder2_mc.y = moveBoarder(); 004.fla. Посмотрите содержимое проекта. Расположите еще двух сноубордистов. Задайте им имена экземпляров: boarder1_mc, boarder2_mc, boarder3_mc. Лкм по 1КК в слое actions. function moveBoarder():void{ boarder1_mc.y=50;

86 boarder1_mc.rotation=45; } moveBoarder(); В таком виде Ф будет применяться только для одно ФР, измените Ф. function moveBoarder(boarder:MovieClip):void{ boarder.y=50; boarder.rotation=45; } moveBoarder(boarder2_mc); moveBoarder(boarder1_mc); moveBoarder(boarder3_mc); Ф вызвана три раза для различных ФР. Для того, чтобы все ФР имели разеые координаты измениет Ф: function moveBoarder(boarder:MovieClip, movement:Number, rotationAmt:Number):void{ boarder.y-=movement; boarder.rotation+=rotationAmt; } Изменилось описание Ф, надо изменить и вызов Ф. moveBoarder(boarder1_mc, 150,45); moveBoarder(boarder2_mc, 250,90); moveBoarder(boarder3_mc, 50,180); Запустите проект.

События на мышку 005.fla. Посмотрите содержимое проекта. Лкм по 1КК в слое actions. В панели действий запишите: boarder_mc.addEventListener(MouseEvent.CLICK, onClick); Тем самым было описано событие, специфичное для boarder_mc. Ниже запишите Ф function onClick(event:MouseEvent):void{ trace(“click!!!”); } Данная Ф выводит в trace сообщение о том, что был произведен щелчок лкм по объекту. Добавьте кусок кода который переводит ФР в режим кнопки: boarder_mc.buttonModer=true; поскольку предыдущий скрип работает, то можно добавить ему реальных действий: внутри Ф запишите: boarder_mc.y-=15; boarder_mc.rotation+=45;

87 Чтобы каждое нажатие приводило к изменению координаты у на -15 и повороту на 45 градусов. Для того, чтобы в дальнейшее описанное событие можно было применить к другим объектам измените применение действие внутри Ф: event.target.y-=15; event.target.rotation+=45; Добавьте новое событие: boarder_mc.addEventListener(MouseEvent.ROLL_OVER, boarderOver); function boarderOver(event:MouseEvent):void{ event.target.alpha=.5; } И еще событие на убирание мышки с объекта. boarder_mc.addEventListener(MouseEvent.ROLL_OUT, boarderOut); function boarderOut(event:MouseEvent):void{ event.target.alpha=1; } Запустите проект.

События на клавиатуру 006.fla. Посмотрите содержимое проекта. Лкм по 1КК в слое actions. В панели действий запишите: stage.addEventListener(KeyboardEvent.KEY_DOWN,jump); function jump(event:KeyboardEvent):viod{ boarder_mc.y-=50; } stage означает, что действия прописываются на уровне сцены. Действия будут происходить по нажатию на любую калвишу. Запустите проект. Добавьте действие по отпусканию клавиши на клавиатуре: stage.addEventListener(KeyboardEvent.KEY_UP,land); function land(event:KeyboardEvent):viod{ boarder_mc.y+=50; } Запустите проект. В функции добавьте: trace(event.keyCode); Которые будут выводить код нажатой клавиши. Запустите проект. Сохраните проект.

88

Действия на кадр Лкм по 1КК в слое actions. В панели действий внутри функции jump запишите действие, отменяющие описание события: stage.removeEventListener(KeyboardEvent.KEY_DOWN,jump); Запустите проект. Видно, что событие по нажатию клавиши на клавиатуре происходит один раз, поле чего перестает действовать. Внутри Ф land допишите противоположность – добавление действия: stage.addEventListener(KeyboardEvent.KEY_DOWN,jump); Запустите проект. Добавьте действие которое будет происходить каждый кадр: stage.addEventListener(Event.ENTER_FRAME,flip); function flip(event:Event):void{ boarder_mc.rotation+=45; } Запустите проект. Сделайте так, чтобы поворот был возможен только по нажатию на клавишу клавиатуры: внутри Ф jump перенесите: stage.addEventListener(Event.ENTER_FRAME,flip); во избежание двойного описания событий, описание события, указанное вне Ф jump заремаркируйте. Чтобы по отпусканию клавиши на клавиатуре соубордист перестал вращаться внутри Ф land запишите: stage.removeEventListener(Event.ENTER_FRAME,flip); Запустите проект. Внутри Ф flip добавьте изменение координаты: boarder_mc+=45; Измените изменение координат в Ф jump и land: boarder_mc.y-=150; и boarder_mc.y+=150; Соответственно. Запустите проект.

Действия на кнопкие 007.fla. Посмотрите содержимое проекта. Лкм по 1КК в слое actions. В панели действий запишите: var link:URLRequest=new URLRequest(“http://www.ifmo.ru”); button_mc.addEventListener(MouseEvent.CLICK, onClick); function onClick(event:MouseEvent):void{ navigateToURL(link); } button_mc.buttonMode=true;

89 Вначле ссылка определяется объект для вызова URL, после чего при помощи navigateToURL, осуществляется переход на URL.

Таймер 008.fla. Посмотрите содержимое проекта. Войдите в ФР в виде сноубордиста. Создайте слой с именем actions. Лкм по 1КК в слое actions, в панели действий запишите: stop(); Вернитесь на сцену. Задайте имя экземпляра для сноубордиста: animation_mc. Лкм по 1КК в слое actions, в панели действий запишите: var jumpTimer:Timer = new Timer(5000); //Описывается таймер как новый объект, который будет происходить с задержкой 5000 //миллисекунд. jumpTimer.addEventListener(TimerEvent.TIMER, jump); function jump(event:TimerEvent):void{ animation_mc.paly(); } //Теперь необходимо запустить таймер jumpTimer.start(); Если вы хотите, чтобы таймер сработал 1 раз необходимо изменить первую строчку на: var jumpTimer:Timer = new Timer(5000,1);

Классы Создайте новый фал – Файл ActionScript. Сохраните его с названием CustomClass. Запишите в файле: package { class CustomClass { function CustomClass() { trace("custom class working!"); } } } В качестве внешнего контейнера используется package, далее описывается класс имя которого совпадает с именем файла который был создан, внутри класса описана Ф, выполняющая роль конструктора класса, которая выводит сообщение на экран.

90 Для того, чтобы класс не являлся абстракцией необходимо, чтобы он существовал для практических задач. Для того, чтобы работать с ФР необходимо его изменить: package { import flash.display.MovieClip; class CustomClass extends MovieClip { function CustomClass() { trace("custom class working!"); } } } Для того, чтобы класс был связан с ФР необходимо, чтобы он стал расширением стандартных возможностей ФР, т.е. Movie Clip. Для того. Чтобы класс стал именно расширением, а не замещением возможностей ФР, необходимо было дописать строку импортирования. Теперь, по мимо конструктора, создадим метод в виде Ф, не возвращающей значение: package { import flash.display.MovieClip; class CustomClass extends MovieClip { function CustomClass() { trace("custom class working!"); } function myFunction():void { trace("my method is working!"); } } } Существует возможность разграничить права доступа к свойствам и методам класса, например: package

91 { import flash.display.MovieClip; public class CustomClass extends MovieClip { private _myVar:String; public function CustomClass() { trace("custom class working!"); } private function myFunction():void { trace("my method is working!"); } } } Private доступен только объектам, созданным на основе этого класса. Public доступен всем объектам. 010.fla и FunButton.as. Перейдите описание класса и добавьте методы. Войдите внутрь конструктора и запишите описание событий которые будут происходить по наведению и убиранию мышки с объекта: this.addEventListener(MouseEvent.ROLL_OVER, grow); this.addEventListener(MouseEvent.ROLL_OUT, shrink); Чтобы получить возможность использовать события мышки необходимо импортировать события: import flash.events.MouseEvent; Дале опишите Ф-и которые будут исполняться по наведению или убиранию мышки с объекта: private function grow(event:MouseEvent):void { this.scaleX *= 1.5; this.scaleY *= 1.5; } private function shrink(event:MouseEvent):void { this.scaleX = _origXScale; this.scaleY = _origYScale; }

92 Первая Ф будет изменять линейные размеры в 1.5 раза, а вторая возвращать первоначальный размер. В файле 010.fla в библиотеке пкм по mcBoarder, Связывание. Поставьте галочку в пункте Экспортировать для ActionScript, класс FunButton. Запустите файл и проверьте его работоспособность. Вернитесь в описание класса и добавьте свойство класса, которое будет содержать в себе масштаб объекта: private var _origXScale:Number; private var _origYScale:Number; а в конструктор класса – «обнуление» размеров: _origXScale = this.scaleX; _origYScale = this.scaleY; Проверьте как работает описанный класс на других объектах: В 010.fla. нарисуйте прямоугольник серого цвета без обводки, выделите его, преобразуйте его в ФР с именем rectangle. Задайте связывание и поставьте класс rectangle, в качестве базового класса поставьте FunButton. Запустите файл и проверьте его работоспособность. 011.fla. и ButtonClass.as. Выделите все объекты на сцене и удалите их. В ButtonClass.as опишите класс: package { import flash.display.MovieClip; public class ButtonClass extends MovieClip { private var boarder:mcBoarder; public function ButtonClass() { trace(“class working”); } } } В свойствах документа запишите класс документа: ButtonClass. Для символа mcBoarder укажите связывание, экспорт для ActionScript, класс – mcBoarder, базовый класс: FunButton – созданный ранее. Допишите класс: import mcBoarder; import FunButton; внутри класса: запишите свойство: private var boarder:mcBoarder;

93 В конструкторе класса создайте экземпляр класса который будет унаследован от mcBoarder: boarder = new mcBoarder(); addChild(boarder); boarder.x = 200; boarder.y = 200; Таким образом, класс будет выглядеть следующим образом: package { import flash.display.MovieClip; import mcBoarder; import FunButton; public class ButtonClass extends MovieClip { private var boarder:mcBoarder; public function ButtonClass() { boarder = new mcBoarder(); addChild(boarder); boarder.x = 200; boarder.y = 200; } } } Если возникают проблемы с адресацией к классам, в настройке публикации в закладке Flash нажмите на кнопку Параметры, в параметрах присутствует раздел Путь к классам, если вы помните взаимное расположение файлов, то можете воспользоваться кнопкой «+», если нет, то кнопкой в виде прицела в которой осуществите поиск и выбор файлов классов, используемых при работе.

Использование условий 012.fla. Перейдите в 1кк слоя actions, в панели действий откройте изначальный скрипт. Добавьте действие: event.target.y-=100; Проверьте действие скрипта. var jumping:Boolean=false; вместо event.target.y-=100; запишите: if(jumping){

94 event.target.y+=100; jumping=false; } else{ event.target.y-=100’ jumping=true; } Можете сами немного модифицировать скрипт, для большей компактности 013.fla. Перейдите в 1кк слоя actions, в панели действий откройте изначальный скрипт. Допишите: if(boarder1_mc.height>boarder2_mc.height){ trace(“1 is taller 2”); } else{ trace(“condition isn’t true”); } Измените этот кусок скрипта: if(boarder1_mc.rotation==boarder2_mc.rotation){ trace(“1 rotation equal 2”); } else{ trace(“condition isn’t true”); } На сцене доверните один из объектов и проверьте результат. Теперь сделайте так, что если поворот объектов не одинаков, то запишите в разделе else: boarder1_mc.rotation=boarder2_mc.rotation 014.fla. Перейдите в 1кк слоя actions, в панели действий откройте изначальный скрипт. Допишите: if(boarder1_mc.rotation == boarder2_mc.rotation) { trace("condition 1 is true"); } else if(boarder1_mc.alpha == boarder2_mc.alpha) { trace("condition 2 is true"); }

95 Проверьте работу скрипта. Измените скрипт: if(boarder1_mc.rotation == boarder2_mc.rotation) { trace("condition 1 is true"); } else if(boarder1_mc.alpha != boarder2_mc.alpha) { trace("condition 2 is true"); } else if(boarder1_mc.y > boarder2_mc.y) { trace("condition 3 is true"); } else { trace("no conditions are true"); } Последнее альтернативное условие, в случае если ни одно из условий не выполнено. 015.fla. Перейдите в 1кк слоя actions, в панели действий откройте изначальный скрипт. Допишите: if(boarder1_mc.rotation == boarder2_mc.rotation && boarder1_mc.alpha == boarder2_mc.alpha) { trace("condition is true"); } else { trace("condition is false"); } && играет роль логического И, || - логического ИЛИ, ! – логического НЕ. Проверьте работу скрипта, измените условие if(boarder1_mc.rotation == boarder2_mc.rotation II boarder1_mc.alpha == boarder2_mc.alpha) Проверьте работу скрипта.

Циклы Создайте новый файл. В 1КК запишите: for(var i:Number=0;i<20;i++){ trace(i);

96 } Проверьте работу скрипта. 016.fla. Задайте связывание для mcBoarder, поставьте Экспорт для ActionScript. Перейдите в 1кк слоя actions, в панели действий напишите: var boarder:mcBoarder; for(var i:Number=0;i<6;i++){ boarder=new mcBoarder(); addchild(boarder); } Проверьте работу скрипта. 017.fla. Перейдите в 1кк слоя actions, в панели действий откройте изначальный скрипт. Измените: for(var i:Number=0;i<6;i++){ boarder=new mcBoarder(); addchild(boarder); boarder.x=i*75; } Проверьте работу скрипта. Измените скрипт. var boarderX:Number=127; var boarderY:Number=271; for(var i:Number=0;i<6;i++){ boarder=new mcBoarder(); addchild(boarder); boarder.x= boarderX; boarder.y= boarderY; boarderX+=100; boarderY-=100; } Проверьте работу скрипта. Измените скрипт. var boarderR:Number=0; и boarder.rotation= boarderR; boarderR-=45; Проверьте работу скрипта.

97