Книга представляет собой подробный самоучитель, созданный автором на основе многолетнего опыта обучения работе с технологией Flash. В книге дается описание интерфейса программы Flash MX. Множество иллюстраций и примеров наглядно демонстрируют возможности технологии Flash, а практические задания позволяют легко закрепить изученный материал. В приложении дается описание команд языка ActionScript, с помощью которого можно разработать собственный сценарий Flash-фильма, создать нового анимационного героя и реализовать любые творческие идеи в области анимации. Курс ра
ссчитан на широкую аудиторию, на тех, кто хотел бы освоить методы и приемы работы с анимацией, а также научиться применять анимационные и звуковые эффекты при создании web-страниц.
Содержание
Введение
Структура книги
Отличие Flash MX от предыдущих версий
От издательства
Знакомство с программой
Основные типы графики
Растровая графика
Векторная графика
Анимация
Интерфейс
Библиотека объектов
Слои и уровни сцены
Объекты рабочего уровня
Группировка объектов
Изменение размера объектов и перемещение
Позиционирование объектов
ActionScript
Занятие 1. Создание фильма
Начальные установки фильма
Первая анимация
Сохранение и публикация проекта
Занятие 2. Рисование
Объединение
Дублирование
Сегментирование
Эффект размытия
Градиентная заливка
Растровая заливка
Цвет
Занятие 3. Слои, кадры и сцены
Слои
Настройка свойств слоя
Кадры
Использование слоев в анимации
Сцены
Занятие 4. Введение в анимацию
Раскадровка
Управление скоростью движения и вращением
Морфинг
Маркеры формы
Занятие 5. Символы и анимация
Символы
Свойства объектов
Ориентация при движении
Маскирование
Занятие 6. Растровая графика в программе Flash
Импорт графики
Трассировка
Экспорт графики
Занятие 7. Текст
Анимирование текста
Оформление текста
Кернинг
Очерчивание букв
Цветовое оформление
Редактируемые текстовые поля
Открытие HTML-страниц с помощью гиперссылок
Занятие 8. Элементы интерактивности
Устройство кнопки
Назначение сценариев кнопкам
Открытие HTML-страниц с помощью кнопок
Раскрывающиеся меню
Занятие 9. Секреты кадров
Метки и комментарии кадров
Управление кадрами фильма
Переход к заданному кадру
Занятие 10. Адресация объектов в фильме
Идентификация клипа в фильме
Пути к объектам
Занятие 11. Имена текстовых полей
Имена текстовых полей и переменные
Программирование текстовых полей
Прокрутка текста
Занятие 12. Переменные
Типы переменных
Использование переменных
Преобразование типов переменных
Занятие 13. Проверка условий в ActionScript и случайные числа
Условное действие if
Условное действие else if
Конструкция switch…case
Универсальность кода
Случайные числа
Занятие 14. Управление экземплярами символов
Свойства объекта
Перемещение объекта
Изменение цвета объекта
Дублирование
Занятие 15. Циклы, массивы и функции
Цикл for
Цикл while
Цикл do…while
Массивы
Пользовательские функции
Занятие 16. Звук в программе Flash
Добавление звука на киноленту
Замена и компрессия звука
Управление звуком
Занятие 17. Программирование перемещаемых клипов
Перетаскивание клипов
Определение координат указателя мыши
Создание собственного указателя мыши
Занятие 18. Внешние данные, изображения и клипы
Загрузка данных из текстового файла
Загрузка клипа
Загрузка изображения
Занятие 19. Время
Программный объект Date
Создание часов
Функция getTimer
Занятие 20. UI-компоненты
CheckBox
RadioButton
ScrollBar
ComboBox
Создание UI-компонентов
Превращение кнопки в компонент
Занятие 21. Обмен данными и создание программ
Обмен данными между Flash и JavaScript
Создание программы в формате EXE
Занятие 22. Индикаторы загрузки
Индикатор загрузки кадров
Индикатор загрузки байтов
Проверка загрузки кадра
Занятие 23. Тестирование фильма
Тестовый просмотр
Отладка сценария
Изменение свойств объектов
Контрольные точки
Приложение 1. Инструменты рисования и редактирования
Arrow
Subselection
Line
Lasso
Pen
Text
Oval
Rectangle
Pencil
Brush
Free Transform
Fill Transform
Ink Bottle
Paint Bucket
Dropper
Eraser
Приложение 2. Панели
Панель Info
Панель Aling
Панель Transform
Панель Color Mixer
Панель Color Swatches
Панель Components
Панель Actions
Панель Movie Explorer
Приложение 3. Инспекторы свойств
Инспектор свойств линий и карандаша
Инспектор свойств пера, овала и прямоугольника
Инспектор свойств текста
Инспектор свойств документа
Инспектор свойств кадра
Инспектор свойств объекта
Приложение 4. ActionScript
-- (декремент)
++ (инкремент)
! (логическое отрицание)
!= (неравенство)
[ ] (оператор доступа к элементу массива)
{ } (объектный инициализатор)
|| (дизъюнкция)
<= (меньше или равно)
== (равенство)
>= (больше или равно)
Accessibility
Arguments (объект)
and
Array
Boolean (функция)
Boolean (объект)
break
Button (объект)
case
Color (объект)
continue
_currentframe
Date (объект)
default
delete
do...while
_droptarget
duplicateMovieClip
else
else if
eval
FCheckBox (компонент)
FComboBox (компонент)
FListBox (компонент)
for
for...in
FPushButton (компонент)
FRadioButton и FRadioButtonGroup (компоненты)
FScrollBar (компонент)
FScrollPane (компонент)
FStyleFormat (объект)
_framesloaded
fscommand
Function (объект)
function
getProperty
getURL
_global
globalStyleFormat
gotoAndPlay
gotoAndStop
if
ifFrameLoaded
isFinite
Key (объект)
_level
loadMovie
loadVariables
maxscroll
Mouse (объект)
MovieClip (объект)
_name
new
nextFrame
nextScene
null
Number (функция)
Number (объект)
Object (объект)
onClipEvent
on
_parent
play
prevFrame
prevScene
random
removeMovieClip
return
_root
scroll
Selection (объект)
set
setInterval
setProperty
Sound (объект)
_soundbuftime
startDrag
stop
stopAllSounds
stopDrag
String (функция)
String (объект)
switch
_target
targetPath
tellTarget
TextField (объект)
this
_totalframes
trace
unloadMovie
updateAfterEvent
_url
var
while
with
_x
_xmouse
_xscale
_y
_ymouse
_yscale
Приложение 5. Публикация Flash-проекта
Параметры Flash
Параметры HTML
Параметры GIF
Параметры JPEG
Параметры PNG
Параметры QuickTime
Форматы экспорта файлов
Шаблоны HTML для публикации
Приложение 6. Сообщения об ошибках
Алфавитный указатель
ОТРЫВОК
Знакомство с программой
Каждому, кто начинал работу с новой программой, знакомо чувство волнения и растерянности, которое охватывает при виде непривычных кнопок и в предвкушении еще неизведанных возможностей. Это сродни ощущению путешественника, попавшего в незнакомую страну.
Если вы решили изучить Flash MX, то вы, несомненно, уже встречали примеры использования этой программы или ее предыдущих версий, благодаря которым у вас возникло желание овладеть приемами столь популярной программы векторной анимации. Но как путешественнику полезно почитать путеводитель, перед тем как отправиться в дальние страны, так и нам, прежде чем начать работать с редактором Flash MX, желательно познакомиться с его технологией, интерфейсом и терминологией.
Основные типы графики
Понимание того, как строится изображение на экране, поможет вам сделать правильный выбор при создании собственных анимационных проектов и с большим профессионализмом использовать возможности редактора Flash.
Любой рисунок на компьютере принадлежит к одному из двух типов: векторному или растровому.
Растровая графика
Растровые изображения состоят из отдельных точек различных цветов, образующих цельную картину наподобие мозаики. Типичными примерами растровой графики могут служить отсканированные фотографии или изображения, созданные в PhotoShop или Paint (рис. 1).
Применение растровой графики позволяет добиться качественного изображения фотографического качества. Но за все нужно платить, в данном случае — объемами файлов и трудоемкостью редактирования изображения: каждую точку приходится подправлять вручную. Даже если при редактировании вы используете инструменты типа линий или примитивов (овалов, квадратов), его результат все равно связан с изменением затронутых данными инструментами пикселов (рис. 2).
При изменении размеров качество изображения ухудшается: при уменьшении исчезают мелкие детали, а при увеличении картинка может превратиться в набор неряшливых квадратов (увеличенных пикселов). При печати растрового изображения или при просмотре его с помощью средств, имеющих недостаточную разрешающую способность, значительно ухудшается восприятие образа.
Векторная графика
В отличие от растрового векторное изображение строится из отдельных кривых. В этом случае в файле хранится информация не о каждой точке изображения, а о его структурных элементах.
Подобные изображения обычно занимают значительно меньший объем, и редактировать их намного проще (рис. 3). Размер изображения может быть безболезненно изменен без потери четкости и нарушения общего расположения элементов (рис. 4). Изображение более пластично, что позволяет воспроизводить его на устройствах с различной разрешающей способностью без существенной потери качества.
Но, увы, нет в мире совершенства. Векторные изображения выглядят примитивными. Ощущается их «нарисованность», хотя при известном навыке и использовании некоторых хитростей, например градиентных заливок, можно добиться потрясающих результатов.
Помните, как в детстве мы прикладывали понравившуюся картинку к стеклу и, наложив сверху лист бумаги, рисовали ее копию? В данном случае оригинал аналогичен растровому изображению, а наша копия представляет собой типичный пример векторной графики.
В программе Flash можно использовать оба типа графики: как растровую (готовые графические объекты), так и векторную (объекты, созданные непосредственно в программе или импортированные из других векторных форматов). Кроме того, существует возможность преобразования растровой графики в векторную и наоборот. Вы можете создавать любые графические изображения для своего сайта в любом формате, а также презентации в формате exe или mov.
Анимация
Обычные компьютерные видеоролики состоят из набора растровых изображений, последовательно сменяющих друг друга с частотой несколько десятков кадров в секунду. Для хранения таких видеозаписей требуются огромные объемы памяти, а для их передачи в реальном времени через Интернет — сверхскоростные каналы связи. Хотя существующие алгоритмы позволяют сжимать видеозаписи в десятки и даже сотни раз, это все равно решает проблему лишь отчасти, поскольку хранить и передавать приходится каждый кадр фильма.
Благодаря векторной технологии Flash позволяет радикально сократить объем данных, описывающих движущееся изображение. Создав в одном из кадров векторный рисунок, можно задать траекторию его дальнейшего движения и количество кадров, на протяжении которого эта траектория должна быть пройдена. В файле при этом хранятся только первоначальное изображение и уравнение траектории, а все промежуточные кадры просчитываются на основе этих данных в момент воспроизведения. Получается, что для хранения движущегося изображения требуется практически столько же ме
ста, сколько и для неподвижного.
Кроме простых перемещений, задаваемых траекториями, можно строить анимацию, используя повороты и деформации изображения. В первом кадре на столе помещается неискаженное изображение объекта, а в следующем ключевом кадре объект подвергается тому или иному преобразованию. В математическом представлении деформация описывается набором числовых коэффициентов, и во время воспроизведения их значения постепенно меняются от первого кадра к последнему, вызывая плавное изменение объекта.
Каждая полоса кадров принадлежит конкретному слою. От того, на каком слое находится объект, зависит, будет он расположен на переднем плане или позади других объектов. Используя слои, можно без труда создать ощущение многоплановости сцены. Работа со слоями очень напоминает работу мультипликатора с листами целлулоида. Размещением различных элементов изображаемого объекта на разных слоях с их последующей анимацией достигается эффект движения. Слои могут быть не только носителями анимированных объектов: так, служебные слои служат для задания траекторий
и параметров анимации, а маскирующие слои позволяют задать маску, ограничивающую видимую часть изображения маскируемых слоев. Многослойная модель позволяет довольно простыми способами добиваться очень красивых зрительных эффектов.
Интерфейс
Разумеется, прежде, чем начать изучение интерфейса программы (рис. 5), ее необходимо установить на ваш компьютер.
Познакомимся с основными элементами интерфейса программы и узнаем их назначение.
В левой части окна находятся инструменты программы. Именно с их помощью вы будете создавать новые объекты, изменять и трансформировать созданные ранее. Хотя инструменты в целом стандартные, знакомые вам по другим графическим программам, однако в каждой программе их применение имеет свои особенности (описание всех инструментов находится в приложении 1).
Ниже панели инструментов находятся кнопки задания режимов просмотра, которые позволяют быстро увеличить (уменьшить) или переместить для удобства рабочую зону.
Под кнопками задания режимов просмотра находятся кнопки выбора цветов контура и заливки.
Еще ниже находятся модификаторы инструментов, предназначенные для настройки параметров инструментов.
Центральную часть окна Flash занимает рабочая зона — в программе Flash она называется столом (stage), именно здесь мы и будем создавать произведения, которые потрясут весь Интернет своей гениальностью.
В верхней части окна расположен элемент интерфейса, который по-английски называется timeline. Как только не переводят данный термин: и линейка времени, и хронометрическая шкала. На мой взгляд, правильнее будет назвать его кинолентой. Визуально он действительно напоминает отдельную для каждого слоя киноленту, содержащую последовательность кадров (frames) нашего Flash-фильма.
Левую часть киноленты занимает список слоев, позволяющих создавать сложное многослойное изображение (приятное совмещение возможностей векторного редактора и программы обработки растровой графики PhotoShop).
Справа под кинолентой находится раскрывающийся список для выбора масштаба проекта, представленного в рабочей зоне.
В нижней части окна Flash находится инспектор свойств. В него входят дополнительные элементы интерфейса для настройки инструментов, установки размеров фильма, выбора типа раскадровки, изменения свойств объектов и т. д.
В правой части окна Flash расположены дополнительные панели: трансформации, выравнивания, цветов, UI-компонентов (стандартных элементов интерфейса — кнопок, флажков, переключателей и пр.).
Вы, несомненно, обратили внимание на непривычный интерфейс Flash MX. Все панели, инспекторы, кинолента со списком слоев — перемещаемые. Вы можете расположить все элементы интерфейса в соответствии с тем, как вам удобно.
В верхней части каждой панели находится строка заголовка с названием панели. В левой части строки заголовка находится вешка перемещения панели («ухватившись» за нее мышью, панель можно перетаскивать), а в правой — кнопка раскрытия меню панели. При перемещении одной панели на другую они объединяются, образуя блок панелей.
Свертывание (развертывание) панели производится щелчком левой кнопки мыши на строке заголовка. Если нужной вам панели нет на экране, вы всегда сможете ее включить через меню Window или с помощью «горячих» клавиш.
Обратите внимание, что у некоторых панелей в правом нижнем углу расположен маленький белый треугольник. Щелчок на нем открывает (скрывает) дополнительные элементы интерфейса панели.
Для сохранения конфигурации интерфейса выберите команду Window4Save Panel Layout, откроется окно сохранения конфигурации (рис. 6). В поле Name введите имя сохраняемого варианта интерфейса и щелкните на кнопке OK.
Для доступа к списку сохраненных вариантов конфигурации используется команда Window4Panel Sets.
Библиотека объектов
Еще одно средство, значительно упрощающее создание Flash-роликов и сокращающее их размер, — это библиотека. В библиотеке проекта хранятся все используемые в фильме объекты — символы (symbols) в терминологии Flash.
В процессе работы над фильмом в его кадрах размещаются экземпляры символов. При этом сохраняется лишь указание на библиотечный символ, его координаты в кадре и, при необходимости, параметры деформации.
Библиотечные объекты могут представлять собой не только векторные графические рисунки, но также импортированные растровые изображения, аудиофрагменты в форматах WAV или MP3, клипы, кнопки, компоненты пользовательского интерфейса (UI Components), которые в программе Flash версии 5 назывались интеллектуальными (smart) клипами, или видео в формате AVI (рис. 7).
Одни библиотечные символы могут включаться в состав других, что позволяет легко и просто создавать серии объектов, различающихся лишь в деталях. Фильм обычно содержит большое количество экземпляров одного и того же символа. Но поскольку символ представлен собственным описанием, любое внесенное в него изменение отражается на всех его экземплярах.
Импортирование готовой графики в самых разнообразных форматах позволяет использовать для подготовки Flash-проектов всю палитру имеющегося у вас программного обеспечения. В самой программе Flash предусмотрена возможность простого редактирования звука и его сохранения в составе проекта в необходимом формате. Анимацию можно синхронизировать со звуком и просматривать фильм по мере его загрузки, не дожидаясь окончания процесса. А импортирование видео в формате AVI облегчает создание сложных и эффектных презентаций.
Слои и уровни сцены
Назначение слоев в программе Flash несколько иное, чем в других графических программах. Конечно, используя слои (рис. 8) при создании картинки, можно достичь интересных эффектов, неосуществимых при работе в одной плоскости. Но это больше относится к слоям символов (см. далее).
Слои сцены предназначены в первую очередь для создания анимации. Они выполняют те же функции, что и листы целлулоида на столе аниматора. Следует всегда придерживаться правила: «Для каждого объекта, который будет подвергнут анимации, необходимо создать собственный слой!». Список всех слоев находится в левой части киноленты. Расположение слоев в списке соответствует последовательности планов, занимаемых объектами на сцене.
Самоучитель Flash MX. / П. Лапин - СПб: Питер, 2003. - 368 с.
|