effective_AdobeFlashCS3

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 лкм по кнопке, в символах этого типа отсутствует привычная временная линейка.