Как сделать flash приложение в macromedia. Конспект занятия «Создание Flash анимации в Macromedia Flash

Методическая разработка занятия

«Создание Flash анимации в Macromedia Flash»

Объединение «Компьютерная графика и анимация»

Управляющее меню

Рабочая область

Панель временной диаграммы

Слои

С

Панель свойств

Плавающие панели

Панель инструментов

Его помощью также можно создавать анимированные изображения различного типа - от простейших "живых" кнопок до сложных мультипликаций. Так же, как и в ImageReady, анимация создается путем изменения содержания последовательности кадров. Поддерживаются многослойные изображения, можно задавать перемещение объекта, его вращение, изменение формы, размера, цвета, прозрачности, причем эти изменения могут выполняться как по отдельности, так и одновременно друг с другом. Занятия знакомства с компьютерной графикой я провожу на примере Macromedia Flash, в который легко импортировать фото и рисунки растровой графики.

На первом этапе занятия построены таким же образом, как и в простом графическом редакторе PAINT. Учащиеся изучают инструменты и выполняют примеры рисования, копирования и искажения, поворота и отражения, увеличения размеров и конструирования из простых графических компонентов более сложных фигур.

На следующем этапе я предлагаю детям создать сюжетные рисунки из заготовок животных и людей, заранее встроенных в библиотеку Flash, с добавлением фона других объектов экстерьера. Часто в качестве фонового рисунка дети используют фотографии, найденные в Интернет. Желание создать свой неповторимый рисунок стимулирует творческо-исследовательский интерес и развивает такие навыки, как поиск и сохранение информации из Интернет.

Последующий этап оживить персонажи на экране компьютера. Я написала для ребят урок-презентацию с подробной инструкцией - получилось здорово. Теперь в объединении все ребята умеют создавать мультики, даже те, которые и вовсе не умеют рисовать. К 7-му классу у ребят уже сформированы навыки работы в растровом редакторе (так как изучат информатику со 2-го класса). Это дает возможность и время овладеть учащимся не только навыками работы в векторном редакторе, предусмотренном программой, но и освоить простейшие, встроенные методы анимации.

Разработка данного занятия относится к закреплению навыков метода покадровой анимации Motion Tweening, движение по заданной траектории. Создание изображений несколькими слоями.

План – конспект занятия «Создание анимации по сказке «Зайчик»

Цель занятия : закрепить метод покадровой анимации Motion Tweening, движение по заданной траектории, создание изображений несколькими слоями, создать анимацию по сказке «Зайчик».

Развить любовь к отечественным мультфильмам, к отечественным героям.

Задачи :

а) образовательные: закрепить понятия покадровой анимации, трансформации объектов, направляющий слой, возможности компьютерных технологий при создании анимации.

б) развивающие: развитие способности применять приёмы анимации, развитие воли и самостоятельности (развитие уверенности в своих силах, развитие настойчивости, умения преодолевать трудности; развитие умений владеть собой, действовать самостоятельно), познавательного интереса и творческой активности.

в) воспитательные: воспитание эстетических взглядов.

Тип занятия : закрепление материала.

Форма проведения занятия : игра.

Возраст учащихся : 6-8 классы (дополнительное образование - объединение «Информатика»)

Методы: беседа-объяснение.

Оборудование: Компьютерный класс, файлы изображений, программа Macromedia Flash 8.

Ход занятия.

1 Организационный момент. Краткое повторение этапов создания анимации- 20 мин.

2 Разбор и обсуждение сценария сказки «Зайчик» – 5 мин.

3 Создание анимированной сказки в программе Macromedia Flash по заданному алгоритму- 20 мин.

4 Физкультминутка3 мин.

5 Подведение итогов урока - 10 мин.

6. Выставление оценок по результатам работы. – 2 мин

1 Организационный момент. Краткое повторение этапов создания анимации – 20 мин

Занятие начинается с демонстрации мультфильма «Зайчик ».

Тема нашего занятия , возможно, вы уже догадались: «Создание анимации по сказке «Зайчик» эта сказка всем вам знакома как считалочка.

Цель занятия : закрепить метод покадровой анимации, движение по заданной траектории, создание изображений несколькими слоями, создать анимацию по сказке «Зайчик».

Давайте еще раз рассмотрим возможности программы Macromedia Flash, вспомним основные моменты работы с ней.

Вопросы : Что такое покадровая анимация? Как в Macromedia Flash запустить ролик на исполнение?

Опишите суть анимации трансформации объектов?

Какие слои называются направляющими слоями?

Ответы : Покадровая анимация . Это анимация, созданная по традиционному варианту. Вручную создаётся серия изображений, которые сменяют друг друга, и за счёт этого создаётся эффект движения. Такая анимация используется часто, но имеет несколько недостатков. Кроме кропотливости работы, получаемые файлы зачастую имеют большой объём.

Для запуска ролика на демонстрацию используется клавиша Enter

Анимация трансформации объектов (tweening animation). Суть такой анимации в следующем: создаются лишь начальный и конечный кадры. Кроме того, указывается, какое действие должен совершить объект, чтобы из начального положения попасть в конечное. Возможны варианты:

Движение объекта (motion tweening). То есть объект перемещается из одной точки в другую. При этом он может менять размеры, поворачиваться и т.д. Возможно движение объекта по заданной траектории.

Трансформация формы (shape tweening). То есть форма объекта плавно переходит из одной стадии в другую.

На мои вопросы вы ответили верно, молодцы!

Ребята сегодня у нас необычное занятие, наш кабинет превратится сегодня в студию мультфильмов. А это значит, что сегодня вы будете создавать мультфильм.

Создание мультипликации - длительный, трудоемкий процесс. Продюсер определяет общий замысел, сценаристы разрабатывают сюжет и сценарий, который затем разбивается на эпизоды и сцены, иллюстрируемые серией набросков. Далее все это передается режиссеру-мультипликатору, который распределяет сцены между художниками-мультипликаторами. Каждый из них отвечает за основные положения персонажей в сцене. Промежуточные эпизоды дорисовывают младшие мультипликаторы. Другие художники готовят фон, на котором разворачивается действие. Контурные рисунки передаются для окраски, переносятся на прозрачный пластик и обводятся пером или тушью. В том случае, если используется цвет, он наносится на обратную сторону пластинок. Затем оператор по-кадрово фотографирует рисунки при помощи специальной камеры. Наконец, с изображением синхронизируется звук.

В нашей студии я буду выступать в роли продюсера и сценариста, а вы будете юными аниматорами.

Ваша главная задача на этом занятии: познакомиться со всеми персонажами, набором фонов и предметов, создать анимацию сказки по определенному порядку- алгоритму:

Давайте назовём основные моменты сказки и тем самым мы разобьем мультфильм на отдельные сцены.

Учащиеся предполагают, отвечают

Педагог подводит итог

Сейчас каждому из вас достанется задание: «Создать анимацию определенной сцены действия наших героев сказки» На это у вас всего 20 минут. А на следующем занятии вы научитесь накладывать звук на анимацию и титры к сказке.

2 Давайте познакомимся со сценарием . - 5 мин . (Учащиеся знакомятся с полученными сценариями и закрепляют навыки создания анимации по алгоритму.)

3. Учащиеся начинают практически повторять этапы построения фильма .- 20 мин.

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

4. После 10 минут работ занятие прерывается на физкульпаузу - 3 мин.

В начале снова выполняем комплекс упражнений для глаз. Посмотреть на переносицу и задержать взор на счет 1-4. До усталости глаза не доводить. Затем открыть глаза, посмотреть вдаль на счет 1-6. Повторить 4-5 раз.

Упражнение для пальцев выполняем, используя гимнастику для рук из диска «В мире информатики», так как учащимся очень нравятся эти упражнения и считалки.

5 Подведение итогов и демонстрация работ. – 10 мин. Учащиеся комментируют демонстрируемый ролик, рассказывают, какие приемы и инструменты были использованы при создании анимационного фильма.

Итог урока: - Итак, мы с вами убедились, что MACROMEDIA FLASH – удобное и несложное средство для создания анимационных фильмов. В чем была основная сложность выполнения работы?

Ответ учащихся: В работе со слоями. Требуется кропотливая работа и концентрация внимания. Легко допустить ошибку. Надо постоянно помнить о блокировке неиспользуемых слоев.

А на следующем уроке вы научитесь озвучивать анимацию и вставлять готовое звуковое сопровождение в анимацию, а также научитесь приемам наложения титров и сохранению сказки.

6. Выставление оценок по результатам работы. – 2 мин.

Литература:

1. Стрелкова Л.М. Flash MX. Первые шаги. – М.: Интеллект –Центр, 2004, 80 с.
2. Macromedia Flash: Материалы к урокам/ В.А.Попов. – М.:ООО «Чистые пруды», 2005. – 32с.: ил. (Библиотечка «Первого сентября», серия «Информатика»
3. Ермолаева Т.В. Создание анимации в программе Flash 5/ - Фестиваль педагогических идей «Открытый урок» 2004-2005 учебного года

Сценарий алгоритма создания анимации «Зайчик»

Сцена

«Раз, два, три, четыре, пять

Вышел зайчик погулять,

Свежей травки пощипать»

Импортировать в библиотеку рисунки «Фон1» и «Зайчик».

Переименовать слой 1 в Фон1

Перетащить из библиотеки «Фон» на рабочую область.

Инфо

Создать слой «Зайчик».

Применить трансформацию объекта (Ctrl +T вкладка «Инфо

Применить команду по отдельности, щелчок правой кнопки мышипо объекту«Зайчик»

Удалить белый фон у объекта «Зайчик» с помощью инструмента «Волшебная палочка», выделенный фон удалить кнопкой Delete на клавиатуре.

В 1 кадре слоя «Зайчик»

Применить к объекту «Зайчик» Свободную трансформацию (Q )

Создать направляющий слой и нарисовать траекторию движения инструментом «Карандаш».

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

Переместить объект Зайчик в слое Зайчик на конец траектории.

Просмотреть анимацию (Enter )

Сцена.

«Вдруг охотник выбегает

Прямо в зайчика стреляет»

Импортировать в библиотеку рисунки «Фон1», «Зайчик», «Охотник»

Переименовать слой 1 в «Фон1»

Перетащить из библиотеки «Фон1» на рабочую область.

Применить трансформацию объекта «Фон1» (Ctrl +T вкладка «Инфо ») и уменьшить до размеров рабочей области 550х400.

Создать слой «Зайчик».

Перетащить из библиотеки «Зайчик» на рабочую область.

Применить трансформацию объекта (Ctrl +T вкладка «Инфо ») и уменьшить Зайчика до нужного размера 120х120.

Применить команду по отдельности, щелчок правой кнопки мышипо объектуЗайчик

Удалить белый фон у объекта «Зайчик»с помощью инструмента «Волшебная палочка», выделенный фон удалить кнопкой Delete на клавиатуре.

Создать слой «Охотник».

Применить трансформацию объекта (Ctrl +T вкладка «Инфо

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

Применить к объекту «Охотник» Свободную трансформацию (Q ) и переместить центровой кружочек к ногам «Охотника».

Создать направляющий слой и нарисовать траекторию движения «Охотника» инструментом «Карандаш».

«Охотник»

Сделать 60 кадр ключевым (F 6) в направляющем слое, в слое «Охотник», в слое «Зайчик», в слое «Фон1».

Переместить объект «Охотник» в слое «Охотник» на конец траектории.

Просмотреть анимацию (Enter )

Сцена

«Пиф-паф, ой-ёй-ёй,

Умирает зайчик мой»

Создать новую сцену меню Вставка – Сцена

Импортировать в библиотеку рисунки «Фон1», «Зайчик спящий», «Охотник»

Переименовать слой 1 в «Фон1»

Перетащить из библиотеки Фон1 на рабочую область.

Применить трансформацию объекта «Фон1» (Ctrl +T вкладка «Инфо ») и уменьшить до размеров рабочей области 550х400.

Создать слой «Зайчик спящий»

Перетащить из библиотеки «Зайчик спящий» на рабочую область.

Применить трансформацию объекта (Ctrl +T вкладка «Инфо ») и уменьшить Зайчика до нужного размера 120х120.

Применить команду по отдельности, щелчок правой кнопки мышипо объекту«Зайчик спящий»

Удалить белый фон у объекта «Зайчик спящий» с помощью инструмента Волшебная палочка, выделенный фон удалить кнопкой Delete на клавиатуре.

Применить к объекту «Зайчик спящий» Свободную трансформацию (Q ) и переместить центровой кружочек к ножкам Зайчика.

В 1 кадре слоя «Зайчик спящий» Создать промежуточное отображение , щелчок правой кнопки мыши по 1 кадру.

Создать направляющий слой у «Зайчик спящий» и нарисовать траекторию движения – падения вниз с пенька - инструментом «Карандаш».

«Указателем» выделить объект, перетянуть его в первом кадре, слоя «Зайчик спящий» на начало траектории движения.

Создать слой «Охотник».

Перетащить из библиотеки «Охотник» на рабочую область.

Применить трансформацию объекта «Охотник» (Ctrl +T вкладка «Инфо ») и изменить размер на 260х300.

Аналогично удалить белый фон у Охотника (См. п.9 и 10).

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

Создать направляющий слой объекта «Охотник» и нарисовать траекторию движения инструментом «Карандаш».

«Указателем» выделить объект, перетянуть его в первом кадре, слоя «Охотник» на начало траектории движения.

Сделать 60 кадр ключевым (F 6) в направляющем слое, в слое «Охотник», в слое «Зайчик спящий», в слое «Фон».

Переместить объект «Зайчик спящий» в слое «Зайчик спящий» на конец траектории.

Переместить объект «Охотник» в слое «Охотник» на конец траектории

Просмотреть анимацию (Enter )

Сцена

«Принесли его домой

Оказался он – живой!»

Создать новую сцену меню Вставка – Сцена.

Импортировать в библиотеку рисунки «Фон2», «Зайчик с шариком», «Девочка»

Переименовать слой 1 в «Фон2»

Перетащить из библиотеки «Фон2» на рабочую область.

Применить трансформацию объекта «Фон1» (Ctrl +T вкладка «Инфо ») и уменьшить до размеров рабочей области 550х400.

Создать слой «Девочка»

Перетащить из библиотеки «Девочка»на рабочую область.

Применить трансформацию объекта «Девочка» (Ctrl +T вкладка «Инфо ») и уменьшить до размеров рабочей области 350х400.

Применить команду по отдельности, щелчок правой кнопки мышипо объекту«Девочка»

Удалить белый фон у объекта «Девочка» с помощью инструмента «Волшебная палочка», выделенный фон удалить кнопкой Delete на клавиатуре и переместить объект «Девочка» в нижнюю часть сцены.

Создать слой «Зайчик с шариком»

Перетащить из библиотеки «Зайчик с шариком» на рабочую область.

Применить трансформацию объекта «Зайчик с шариком» (Ctrl +T вкладка «Инфо ») и уменьшить до размеров рабочей области 200х250.

Применить команду по отдельности, щелчок правой кнопки мышипо объекту«Зайчик с шариком»

Удалить белый фон у объекта «Зайчик с шариком» с помощью инструмента «Волшебная палочка», выделенный фон удалить кнопкой Delete на клавиатуре.

В 1 кадре слоя «Зайчик с шариком» Создать промежуточное отображение , щелчок правой кнопки мыши по 1 кадру.

Применить к объекту «Зайчик с шариком» Свободную трансформацию (Q ) и переместить центровой кружочек к ножкам Зайчика.

Создать направляющий слой и нарисовать траекторию движения Зайчика инструментом «Карандаш».

«Указателем» выделить объект, перетянуть его в первом кадре, слоя «Зайчик с шариком» на начало траектории движения.

Сделать 60 кадр ключевым (F 6) в направляющем слое, в слое «Зайчик с шариком», в слое «Фон2», в слое «Девочка».

Переместить объект «Зайчик с шариком» в слое «Зайчик с шариком» на конец траектории.

Просмотреть анимацию (Enter )

Посмотреть всю сказку Файл – Открыть (открыть свою папку и найти файл «Сказка Зайчик»)

Зайчик с шариком

МИНИСТЕРСТВО ОБРАЗОВАНИЯ ИРКУТСКОЙ ОБЛАСТИ

ИРКУТСКИЙ ИНСТИТУТ ПОВЫШЕНИЯ КВАЛИФИКАЦИИ

РАБОТНИКОВ ОБРАЗОВАНИЯ»

Создание анимации
в программе Macromedia Flash

Основы Flash - технологий

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

Иркутск, 2008

Печатается по решению Редакционно-издательского совета ИПКРО

УДК 51

ББК 37.92

Создание анимации в программе
Macromedia Flash. Основы Flash – технологий. Учебно-методическое пособие. –Иркутск: ИПКРО, 2008. –104 с.

Рецензенты:

– кандидат физико-математических наук, доцент Иркутского государственного педагогического университета

– кандидат физико-математических наук, доцент, зав. кафедрой ИиМОИ Иркутского государственного педагогического университета.

Учебно-методическое пособие содержит в себе основные принципы использования Flash – технологий, или технологий интерактивной web-анимации. рассматриваются возможности универсального редактора для создания презентаций, клипов, заставок, игр, баннеров и логотипов, разработки компьютерных игр, создания художественных анимационных фильмов и Web-страниц.

Неоспоримым достоинством Flash-технологий является возможность получения анимированных динамических интерактивных web-страниц очень небольшого размера, что является идеальным для использования в сети Интернет. Рекомендуется учителям общеобразовательных школ, преподавателям системы начального, среднего и высшего профессионального образования , студентам и учащимся.

ISBN -212-2

© Иркутский ИПКРО, 2008

© , 2008

Введение

Это пособие предназначено для тех, кто хочет научиться основам работы с программой Flash. Мы будет рассматривать последнюю версию программы Macromedia Flash Professional 8.

Flash – универсальный редактор для создания презентаций, клипов, заставок и игр. Сфера применения программы очень широка – от создания баннеров и логотипов до разработки компьютерных игр, создания художественных анимационных фильмов и Web-страниц.

Flash-технологии, или, как их еще называют, технологии интерактивной web-анимации, были разработаны компанией Macromedia.

Неоспоримым достоинством Flash-технологий является возможность получения анимированных динамических интерактивных web-страниц очень небольшого размера, что является идеальным для использования в сети Интернет.

Adobe Flash, Flash, Adobe Flash Player, Adobe Flash Professional, Macromedia Flash - все это названия программ разработки веб-приложений, игр и мультфильмов под flash-платформу (Flash Platform), наряду с ней существуют и другие инструменты (среды): Adobe Flex Builder, Flash Development Tool (FDT), и другие.

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

В основе Flash-технологии лежит плавное «перетекание» одного ключевого кадра в другой. Это позволяет создавать сложные мультипликационные сцены, задавая лишь несколько ключевых кадров для каждого персонажа. Такая технология применялась задолго до Macromedia Flash. В 1986 году была выпущена программа Fantavision, использовавшая эту технологию. В 1991 году на основе этой технологии была выпущена игра Another World, а двумя годами позже - Flashback. В 1995, после покупки программы для анимации FutureSplash Animator, компания Macromedia выпустила продукт под названием Flash.

Технология Flash использует векторную графику в формате Shockwave Flash (SWF).

Составляющими Flash-технологии являются:

· векторная графика;

· поддержка нескольких видов анимации;

· возможность создания интерактивных элементов интерфейса;

· поддержка взаимодействия с импортируемыми графическими форматами (в том числе растровыми);

· возможность включения синхронного звукового сопровождения;

· обеспечение экспорта Flash-фильмов в формат HTML, а также в любой из графических форматов, используемых в Интернете;

· возможность просмотра Flash-фильмов как в автономном режиме, так и с помощью Web-броузера;

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

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

I . Компьютерная графика и анимация

Компьютерная графика появилась достаточно давно - уже в 1960-ых годах. Сегодня принято пользоваться терминами «компьютерная графика» и «компьютерная анимация». Понятие «компьютерная графика» включает все виды работ со статическими изображениями, компьютерная анимация имеет дело с динамически изменяющимися изображениями.

Компьютерную графику обычно разделяют на растровую и векторную. С помощью векторной графики можно создать объемное (трехмерное) изображение: ее технология позволяет давать компьютеру указания (команды), руководствуясь которыми он строит изображения с помощью заложенных в программу алгоритмов. Этот метод больше походит на черчение , причем часто трехмерное. С помощью векторной графики объекты строятся из так называемых «примитивов» - линий, окружностей, кривых, прямоугольников, эллипсов и т. д. Примитив не нужно рисовать - выбрав пиктограмму с изображением или названием, например, прямоугольника, вы просто задаете ее параметры (координаты левого верхнего угла, ширину, высоту и т. п.), а уж компьютер чертит ее сам.

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

Особенное удобство векторных программ в том, что рисунок в них состоит из отдельных частей - графических объектов. Поэтому еще такие программы называют «объектно-ориентированными» редакторами. Такая объектность дает векторной графике необычайную гибкость в работе. В любой момент вы можете легко изменить любой компонент, добавить что-то новое или ввести новый текст (данные).

Главный недостаток векторной модели - зависимость времени визуализации от сложности и количества объектов, составляющих картину, поскольку при каждом выводе на экран производится расчет всех точек объектов. Чем сложнее изображение и больше в нем объектов, тем дольше оно рассчитывается и воспроизводится на экране.­

Второй существенный недостаток - невозможность адекватно описать с помощью объектов реальное изображение (например, фотографию человека). Слишком много сил придется потратить, чтобы разложить его на графические примитивы. Модель получится чрезвычайно громоздкая и неточная. Поэтому для реальных­ изображений используют другую модель - растровую, а представляемые ею изображения относят к растровой графике .

Растровое изображение разбито на множество мелких элементов - пикселов. Цвет каждого пиксела записывается в память компьютера. Если изображение имеет размер 800 пикселов по горизонтали и 600 пикселов по вертикали, то говорят, что картинка имеет размер 800x600. Чем больше количество пикселов в изображении, тем лучше оно выглядит на экране и при печати.

Еще один важный параметр, который нужно знать, чтобы грамотно работать с растровым изображением - тип цветовой модели . Он определяет способ описания цвета или тона каждым пикселом. Например, модель RGB описывает любой цвет как композицию трех основ­ных составляющих: R (R ed) - красный, G (G reen) - зеленый, B (B lue) - синий. Этот параметр особенно важен при подготовке изображения для опре­деленных целей (вывод на экран или на принтер).

Многие графические программы предназначены для обработки только векторного изображения или только растра, но существуют и программы, сочетающие оба типа. Достаточно просто преобразовать векторное изображение в растр (растеризация), обратная задача является достаточно сложной, но существуют программы и для этого (так назваемые векторизаторы). Программы для работы с трехмерной графикой могут использовать как векторные (например, для построения сложных объектов), так и растровые изображения.

Компьютерная анимация

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

Как правило, для плавного воспроизведения анимации необходима скорость, или частота кадров, не менее 12 кадров в секунду.

Компьютерная анимация предполагает использование компьютерного оборудования и программного обеспечения для создания анимации.

Наиболее распространенным способом создания анимации является метод ключевых или опорных кадров (keyframing). При использовании этого метода вручную создаются так называемые ключевые кадры (в этих кадрах прорисованы отдельные моменты фильма), а система компьютерной анимации автоматически строит все недостающие кадры между ключевыми, изображая объекты на промежуточных стадиях их движения.

Для моделирования движений, или эффектов, которые трудно воспроизвести с помощью ключевых кадров, используется автоматическая анимация. При этом типе анимации рассчитываются текущие значения параметров анимации, основываясь на начальных значениях, заданных пользователем, и на математических выражениях, описывающих изменение параметров во времени.

Этот метод позволяет создавать анимационные фильмы очень высокого качества.

Другой путь для создания компьютерной анимации - это использование специальных программ для работы с изображениями (графических редакторов) для рисования одиночных кадров и компоновки их в необходимой последовательности. Одиночные кадры могут быть позднее сохранены в необходимом компьютерном формате или выведены на видео.

Для создания компьютерной анимации существует множество программных приложений, в том числе и программа Macromedia Flash.

II . Знакомство с программой Flash

К концу 20-го века возможности компьютерной анимации достигли уровня обычных видеороликов. Но в Macromedia Flash внедрены такие возможности, о которых не могут и мечтать создатели видеофильмов - это диалог, участие пользователя в анимации. Первоначально это были обычные кнопочки, от нажатия которых происходили те или иные графические изменения. Но очень быстро Macromedia Flash превратилось в среду разработки профессиональных приложений: сайтов, справочников, игр, презентаций. В настоящий момент для создания таких приложений программисту необходимо быть немного дизайнером, знать графические возможности программы Flash и встроенного в нее языка программирования ActionScript.

Общая схема создания Flash-фильмов

Несмотря на то, что редактор Flash предназначен в первую очередь для создания Web-страниц, при работе с ним вам очень редко придется сталкиваться со специфическими «интернетовскими» терминами, как, например, тэг, атрибут, страница и т. д. Технология создания фильмов Flash основана на применении совсем других понятий и категорий. Поэтому для успешного освоения Flash необходимо сначала разобраться с применяемой в нем терминологией.

Основные понятия

При построении любого Flash-фильма используется объектно-ориентированный подход. Это означает, что все элементы фильма интерпретируются как объекты того или другого типа, для каждого из которых заданы некоторые свойства и определен набор допустимых операций. Например, для объекта «Текст» должен быть установлен размер символов, способ начертания, цвет и т. д. Текст можно определенным образом редактировать, вырезать; копировать, создавать на его основе текстовые гиперссылки и т. п. То же самое можно сказать о графических изображениях и о звуке. Тем не менее, при работе с Flash вместо понятия «объект» чаще используется термин символ (Symbol) . Основное различие между ними состоит в следующем.

Символ представляет собой своеобразный шаблон объекта с определенным набором свойств. Символ хранится в специальной библиотеке символов (Library) и может быть многократно использован как в одном и том же фильме, так и в нескольких фильмах. Каждая новая копия символа, помещенная в фильм, называется экземпляром символа (Instance) . Экземпляр наследует все свойства самого символа, и между ними устанавливается связь: при изменении свойств символа соответствующие изменения автоматически применяются ко всем его экземплярам. Механизм символов позволяет сократить и размер фильма: если в нем используется несколько экземпляров символа, то информация о его свойствах не дублируется. Вместе с тем, вы можете изменять некоторые свойства конкретного экземпляра, что не влияет на свойства символа-оригинала. Например, можно изменить размер и цвет экземпляра, а если речь идет о звуковом символе - добавить тот или иной эффект.

Как правило, динамика в Flash-фильмах обеспечивается за счет того, что в течение некоторого интервала времени изменяются те или иные свойства экземпляра (например, координаты, цвет, размер, прозрачность и т. д.), то есть изменяется состояние экземпляра. С каждым состоянием экземпляра связан отдельный кадр фильма (Frame). Кадр, соответствующий изменению состояния экземпляра, называется ключевым кадром (Keyframe) . Ключевой кадр сам рассматривается как объект соответствующего типа, свойства которого пользователь может изменять. Для ключевых кадров предусмотрены некоторые специальные функции и команды.

Процесс смены кадров фильма описывается с помощью временной шкалы (Timeline) . В качестве параметров временной диаграммы можно указывать частоту смены кадров, моменты начала и завершения движения объектов и т. д.

В фильме может использоваться несколько различных объектов. Состояние каждого из них может изменяться независимо от других, либо вообще оставаться неизменным (если, например, некоторый объект используется в качестве фона). Чтобы упростить описание поведения различных элементов фильма, каждый из них помещается, как правило, на отдельный слой (Layer). Разработчики Flash для пояснения роли слоев в фильме сравнивают их с листами прозрачной кальки. Собрав воедино «стопку» таких листов, вы можете получить некую сцену, на которой действуют различные «персонажи». Сцена (Scene) - это еще один термин, используемый при работе с Flash. Каждая сцена представляет собой определенное сочетание слоев. Для простых фильмов бывает достаточно создать и описать одну-единственную сцену, содержащую один слой. Для более сложных может потребоваться создать несколько различных сцен. Переход от одной сцены к другой определяется уже не временной диаграммой, а несколько иным механизмом. В простейшем случае сцены фильма выполняются последовательно, в соответствии с их порядковыми номерами. Для более сложного построения фильма используются средства языка ActionScript.

При создании сложных фильмов достаточно важную роль играет еще одно понятие - клип (Clip , или Movie clip ). Клип - это специальный тип символа. Он представляет собой как бы мини-фильм, для которого создается собственная временная диаграмма и устанавливаются собственные параметры (например, частота смены кадров). Клип, как и любой другой элемент фильма, может быть включен в библиотеку символов для многократного использования в фильме. Каждому экземпляру клипа может быть назначено собственное имя.

Любой элемент фильма может быть использован и внутри клипа. Разрешается также создавать «вложенные» клипы. Если требуется описать некоторые дополнительные условия использования клипа внутри фильма, то для этого могут быть использованы средства языка ActionScript. В состав клипа могут включаться также интерактивные элементы (например, кнопки).

Последовательность действий при создании Flash-фильма

При запуске большинства Windows-приложений автоматически создается «заготовка» (пустой документ, бланк) того типа, для работы с которым предназначено данное приложение. Например, при открытии окна текстового процессора Word в нем появляется пустой документ, в который вы можете ввести требуемый текст, добавить графику и т. д. Для нового документа используются параметры, установленные по умолчанию (размер и стиль шрифта, ширина полей и т. п.). Чтобы документ выглядел так, как хотели бы именно вы, целесообразно установить требуемые значения соответствующих параметров.

Подобным образом организована и работа с редактором Flash. При его запуске автоматически создается «заготовка» будущего фильма (точнее, его первой сцены). Если это необходимо, автор может установить собственные значения общих свойств фильма, таких как частота смены кадров, размеры окна, используемого для отображения фильма, цвет фона, и некоторые другие.

После установки общих параметров фильма можно переходить к формированию первой сцены фильма. Решив, какие именно объекты должны присутствовать на этой сцене, вы последовательно помещаете каждый из объектов на новый слой. Установка параметров слоя - это один из наиболее ответственных этапов построения фильмов. Поскольку в фильме слои (или помещенные на них объекты) тем или иным образом взаимодействуют друг с другом, после описания очередного слоя может оказаться, что требуется отредактировать созданные ранее. В этом нет ничего страшного, это вполне естественно, и Flash предоставляет автору возможность скорректировать предыдущие действия.

Очередной объект, подлежащий включению в фильм, может быть либо взят из библиотеки символов, либо создан заново.

Если объект пока существует только в вашем воображении или на бумаге, то Flash превращается в графический редактор, предоставляющий все основные инструменты для рисования, закрашивания, ретуширования и комбинирования различных изображений. При этом как отдельные компоненты создаваемого объекта, так и законченные изображения могут быть импортированы из других графических форматов.

Те объекты, которые предполагается использовать в фильме неоднократно (хотя бы дважды), целесообразно сразу создавать как новые символы.

Создание Flash-фильмов является весьма непростым делом. Поэтому после завершения очередного шага полезно проверить полученный результат, протестировать его. Flash позволяет тестировать как отдельные сцены фильма, так и фильм в целом. Если тестирование прошло успешно, не забывайте сохранить результат своей работы на диске (в отличие от того же Word, Flash не поддерживает функцию автоматического сохранения).

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

Интерфейс программы Flash

Каждому вновь открытому файлу соответствует свой рабочий стол . На рабочем столе находится кадр - белая прямоугольная область на экране, в которой воспроизводится Flash-фильм.

Строка заголовка – содержит название программы и имя документа;

Меню – включает все команды, предусмотренные программой;

Временная шкала- служит для контроля длительности показа изображений (управления анимацией).

Панель редактирования (Edit Bar ) - позволяет управлять сценами, редактировать символы, масштабировать рабочую область;

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

Плавающие панели – позволяют управлять практически всеми свойствами объектов вашего документа: выбрать цвет или создать собственный цветовой образец, выровнять объекты и т. п.

Все панели можно открыть из основного меню Windows или содержащихся в нем подменю.

Меню View

В программе Flash предусмотрены некоторые возможности, повышающие точность рисования. Это средства для разметки стола и рабочей области: линейки (Rulers ), сетка (Grid ) и направляющие (Guides ). Получить доступ к ним можно через основное меню View .

Направляющие – это горизонтальные и вертикальные линии, которые можно использовать в работе в качестве вспомогательных, чтобы более точно разместить объекты на рабочем поле. Чтобы отобразить на экране направляющие нужно сначала отобразить линейки: View à Rulers . Чтобы отобразить направляющие выберите команду View à Guides à Show Guides , а затем перетащите направляющие с линеек: при перетаскивании направляющей с левой линейки вы получаете вертикальную направляющую, а с верхней – горизонтальную. Чтобы удалить направляющую, перенесите ее обратно на линейку.

Сетка на рабочем поле используется для большего удобства при изменении размеров, аккуратного и точного позиционирования объектов. И сетка, и направляющие видны только во время редактирования фильма, в результирующем ролике они отсутствуют.

Чтобы отобразить сетку, выберите команду View à Grid à Show Grid . Чтобы задать размеры ячейки сетки или изменить цвет линий сетки выберите команду View à Grid à Edit Grid .

III . Рисование в среде Macromedia Flash

В среде Macromedia Flash вы можете создавать векторные рисунки, которые состоят из контуров (Stroke ) и области заливки (Fill ). Отдельные контуры можно нарисовать с помощью инструментов Line (Линия) или Pencil (Карандаш) . Если с помощью этих инструментов вы нарисуете замкнутую область, ее можно будет окрасить произвольным цветом, градиентом или заполнить растровым рисунком, т. е. получить область заливки.

С помощью инструментов Rectangle (Прямоугольник) и Oval (Овал) можно создать одновременно контур и заливку. Инструмент Brush (Кисть) создает только заливку, без контура.

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

Панель инструментов разделена на 4 области:

1. Группа Tools (инструменты рисования и выделения);

2. Группа View (позволяет двигать лист и увеличивать/уменьшать изображение);

3. Группа Colors (позволяет выбирать цвет заливки (Fill color ) и контура (Stroke color ) из палитры, менять эти цвета местами, делать один из них прозрачным или устанавливать черно-белый режим);

4. Группа Options (отображает дополнительные возможности каждого инструмента).

Выбор инструмента и его модификаторов (режимов работы) осуществляется нажатием левой клавиши мыши в панели инструментов.

На рис. 3 показана панель инструментов с выбранным инструментов Selection (Стрелка) и в группе Options отображаются модификаторы именно для этого инструмента.

Во Flash граница (контур) и область заливки являются самостоятельными объектами. Пред тем как изменять параметры этих объектов, их необходимо выделить. Область заливки или контур выделяются одним щелчком левой кнопки мыши. Если нужно выделить область заливки вместе с контуром, сделайте двойной щелчок левой кнопкой мыши.

Для инструментов, создающих заливку (Rectangle , Oval , Brush , Paint Bucket ) в инспекторе свойств имеется возможность выбрать цвет заливки.

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

Для того чтобы объекты существовали независимо друг от друга или контур и заливка составляли единое целое используют режим рисования Object Drawing (этот режим имеют инструменты Line (Линия) , Pen (Перо), Oval (Овал), Rectangle (прямоугольник), Pencil (карандаш) и Brush (кисть)) или выполняют группировку объектов.

Для группировки необходимо выделить объекты, которые нужно сгруппировать (или только обводку и заливку, дважды щелкнув на объекте) и выполнить команду Modify à Group (Изменить à Группировать) . Вокруг выделенных объектов появится голубая ограничивающая рамка. Она означает, что объекты сгруппированы и будут вести себя как единое целое. Напрямую редактирование группы не возможно. Для того чтобы изменить объекты группы, выполните двойной щелчок на содержимом группе. Flash перейдет в режим редактирования данной группы (все остальные объекты приобретут более бледный тон). Выход из режима редактирование группового объекта производится на названии текущей сцены, указанном в левой части панели инструментов Edit Bar . Разгруппировать объекты можно командой Modify à Ungroup (Изменить à Разгруппировать) .

При использовании режима рисования Objekt Drawing получается похожий результат – нарисованная фигура сразу будет помещена в голубую рамку, и приобретет все те свойства, которые имеют группы.

Рассмотрим подробнее наиболее часто используемые инструменты.

Инструмент Selection (Стрелка или Выделение) – используется для выделения объектов и изменения их формы. Чтобы выполнить над объектом те или манипуляции, его необходимо предварительно выделить. Во Flash можно выделить объект целиком либо только его часть, группу объектов. Чтобы выделить весь объект, следует выбрать инструмент Selection и затем выполнить одно из двух действий:

· щелкнуть дважды мышью внутри объекта;

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

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

Если контур объекта представляет собой многоугольник (то есть имеет углы), то щелчок на любом участке (отрезке) контура приводит к выделению только этого участка. Чтобы выделить весь такой контур, следует щелкнуть последовательно на всех отрезках контура, удерживая нажатой клавишу Shift . Инструмент Selection можно также применять для редактирования контуров объектов. Для этого требуется подвести указатель к контуру (он не должен быть выделен!). Когда возле указателя появится значок в виде небольшой дуги, нажать левую кнопку мыши и, не отпуская ее, переместить указатель в нужном направлении.

Инструмент Selection имеет параметры Smooth и Straighten – они позволяют улучшить качество рисунков (сгладить линии или выпрямить). Параметр Snap To Objects – привязка к объектам – заставляет создаваемые объекты привязываться к уже имеющимся на рабочем поле (появляется кружочек в той точке, в которой будет произведена привязка).

Инструмент Pencil (Карандаш) – можно использовать для выравнивания линий и сглаживания кривых при рисовании. Для этого предназначены 3 режима модификатора (см. рис.5).

Инструмент Line (линия) – предназначен для рисования прямых линий. При нажатой клавише Shift – линии будут строго вертикальными (горизонтальными) или располагаться под углом 45°. При нажатой клавише Alt – рисование линии начинается от середины линии, в обе стороны.

Инструменты Линия и Карандаш создают контуры. Настроить внешний вид контуров можно при помощи инспектора свойств.

Основные параметры настройки – толщина (thickness ) и острые углы (sharp corners ). Дополнительные параметры зависят от типа контура:

Выбрать цвет контура можно, воспользовавшись инструментом Stroke Color (группа Colors на панели инструментов). Для этого:

До сих пор мы рассматривали Flash-фильмы, которые воспроизводились без вмешательства зрителя от начала и до конца. Однако Flash позволяет также создавать интерактивные приложения, в которых пользователь может управлять демонстрацией контента. В данном уроке мы начнем знакомство с элементами языка описания сценариев Action Script и рассмотрим, как с его помощью можно создать интерактивные приложения. В качестве примера создадим фотоальбом с элементами интерактивного интерфейса. Но прежде чем приступить к описанию Action Script, следует рассказать еще об одном виде символов, который мы до сих пор оставляли без внимания, - это символы-кнопки. Для построения интерактивного интерфейса они просто необходимы.

Создание кнопок

Кнопка представляет собой четырехкадровый интерактивный мувиклип. Когда мы присваиваем символу тип «Кнопка», Flash создает для нового символа монтажную линейку из четырех кадров:

Up-состояние — это кадр, соответствующий ситуации, когда кнопка не нажата и указатель мыши расположен не над кнопкой;

Over-состояние — кадр, иллюстрирующий вид кнопки, когда указатель мыши расположен над кнопкой, но кнопка не нажата;

Down-состояние — данный кадр показывает вид кнопки при ее нажатии;

Hit-состояние — определяет область, в которой кнопка реагирует на щелчок мыши; эту область в клипе не видно.

Чтобы создать кнопку, выполните команду Insert => New Symbol (можно набрать сочетание клавиш Control+F8). В появившемся диалоговом окне Create New Symbol введите имя символа-кнопки (например, but1) и выберите тип символа Button («Кнопка»).

Flash переключится в режим редактирования символа, предоставив кадры Up, Over, Down и Hit. Первый кадр, Up, становится пустым ключевым кадром. Нарисуем в этом кадре ненажатый вид кнопки (рис. 1).

Рис. 1. UP-кадр кнопки

Выделим второй кадр, помеченный как Over и соответствующий состоянию, когда курсор занесен над кнопкой. Вставим в этом кадре ключевой фрейм (по команде Insert => Keyframe), в результате чего появится ключевой кадр, полностью повторяющий содержание Up-кадра. Изменим цвет кнопки, как показано на рис. 2.

Рис 2. Over-кадр кнопки

Аналогично добавим следующий кадр (Down-кадр) и нарисуем нажатое состояние кнопки (рис. 3).

Рис. 3. Down-кадр кнопки

В Hit-кадре пока не будем ничего рисовать, а вернемся к этому кадру чуть позже.

Перейдем к основной сцене, вызовем библиотеку по команде Window => Library и создадим экземпляр символа кнопки путем перетаскивания его на сцену (рис. 4.)

Рис. 4. Создадим экземпляр кнопки, перетащив его из библиотеки

В результате получим следующий фильм . Как видно из данного фильма, надавливание кнопки происходит не только тогда, когда мы нажимаем мышью на центральную (рабочую) зону кнопки, но и при нажатии на рамку вокруг нее. Связано это с тем, что если Hit-кадр не нарисован, то рабочая область кнопки будет соответствовать Up-кадру.

Для того чтобы нажатие кнопки происходило только в рабочей зоне, необходимо в Hit-кадре определить эту зону, то есть нарисовать кнопку без рамки (см. рис. 5)

Рис. 5. Hit-кадр кнопки

После того как мы добавим необходимый Hit-кадр получим следующий фильм , в котором при нажатии на рамку продавливания кнопки не происходит.

Чтобы сделать кнопку интерактивной, необходимо связать факт нажатия кнопки с выполнением определенных команд, то есть описать определенный сценарий. Для задания сценариев во Flash существует специальный язык Action Script. В данном уроке мы затронем лишь незначительную часть возможностей этого языка, а в дальнейшем будем возвращаться к структуре и синтаксису Action Script по мере усложнения примеров создания интерактивных фильмов на Flash.

Понятие об Action Script

Action Script представляет собой язык написания сценария - набора инструкций, которые управляют элементами Flash-фильма. Сценарии Action Script могут быть встроены в фильм или храниться во внешнем текстовом файле с расширением AS.

При встраивании сценария в фильм его можно внедрять в разные части фильма. Точнее, сценарии Action Script могут содержать ключевые кадры, экземпляры кнопок и экземпляры мувиклипов. Соответственно сценарии называются сценариями кадра (Frame Action), сценарием кнопки (Button Action) и сценарием клипа (MovieClip Action).

Сценарии Action Script выполняются по наступлении определенных событий, инициированных пользователем или системой. Механизм, который указывает программе Flash, какой оператор следует выполнить при наступлении того или иного события, называется обработчиком событий.

Action Script имеет собственный синтаксис, во многом схожий с синтаксисом JavaScript. Flash MX 2004 поддерживает Action Script всех предыдущих версий Flash.

Одним из основных понятий Action Script являются Actions - команды, которые выдают инструкции во время исполнения SWF-файла. Например, gotoAndStop() отсылает воспроизводящую головку (Рlayhead) на определенный кадр или метку. От слова Actions и происходит название языка - Action Script (дословно - сценарий действий). С большинством понятий этого языка мы ознакомимся на конкретных примерах.

Интерактивный фотоальбом

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

Поместим на основной монтажной линейке первое фото и добавим кнопку из стандартного набора. Для доступа к нужной папке следует выполнить команду Windows => Сontrol Panels Common Libraries => Buttons (рис. 6).

Рис. 6. Добавим кнопку из стандартной библиотеки

В результате выполнения данной команды появится панель, содержащая большой набор заранее нарисованных кнопок различных типов. Выберем, например, Key Buttons (кнопки, похожие на клавиатурные клавиши), откроем соответствующую папку, выберем кнопку key-left (рис. 7) и создадим экземпляр данной кнопки (путем перетаскивания ее на сцену).

Рис. 7. Элементы папки Key Buttons

Обратите внимание, что, когда вы устанавливаете вторую кнопку (key-right) на сцене и перемещаете ее, чтобы установить на одном уровне с первой кнопкой, программа дает подсказку (пунктирную линию), которая позволяет точно позиционировать кнопку (рис. 8).

Рис. 8. Автоматическое выравнивание кнопок на одном уровне

Для того чтобы добавить сценарий, необходимо вызвать редактор Action Script по команде Window =>Development Panels => Actions или нажав клавишу F9. Если вы собираетесь часто писать скрипты, то эту клавиатурную команду стоит запомнить. В результате появится редактор Action Script (рис. 9).

Рис. 9. Панели редактора Action Script

Если вы поэкспериментируете, выделяя различные элементы на сцене, одновременно отслеживая сообщения в панелях редактора Action Script, то обнаружите, что программа подсказывает, на какой элемент можно «вешать» код. Если выделить на сцене кадр, то в верхнем левом углу панели редактора появляется надпись Actions - Frame, если щелкнуть по кнопке, то появится надпись Actions - Button, то есть программа подсказывает, что вводимый код будет относиться к сценарию кнопки. А если выделить фотографию, то в поле, предназначенном для ввода скрипта, появится сообщение: Current selection cannot have actions applied to it (к данному выделенному объекту нельзя применить сценария).

Мы будем присваивать сценарий кнопке. В последних версиях ActionScript имеется возможность писать централизованный код, то есть код, который размещен в одном месте, и такая возможность позволяет лучше разбираться в больших программах. Однако в простых примерах (которые мы и рассматриваем) присваивание сценария кнопке вполне допустимо.

Итак, для кнопки со стрелкой влево нам нужно формализовать следующий сценарий: «Если кнопка отпускается на некотором кадре, то с этого кадра необходимо перейти на предыдущий кадр». В соответствии с синтаксисом языка Action Script (рис. 10) это будет выглядеть следующим образом:

В первой строчке записан обработчик событий кнопки on(), имеющий формат:

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

Если запустить на исполнение созданный фильм, то кадры будут непрерывно проигрываться один за другим, а следовательно, прежде всего нам нужно дать команду «Стоп» на первом кадре. Для этого первому кадру добавим соответствующую команду (рис. 11).

Рис. 11. Сценарий, присвоенный первому кадру

Обратите внимание: команда присваивается уже не кнопке, а кадру. Тот факт, что кадру присвоен сценарий, отмечается на основной монтажной линейке - в обозначении кадра над жирной точкой появляется строчная буква «a».

В результате мы получили следующий фильм .

Если у нас в фотоальбоме всего несколько кадров, то двух кнопок - «Вперед» и «Назад» - вполне достаточно, но если набор фотографий большой, то желательно иметь еще и кнопки, отсылающие в начало и конец фильма. В следующем примере мы добавим соответствующие кнопки: «В первый кадр» и «В последний кадр». Выбрать кнопки подходящей мнемоники можно из стандартной библиотеки кнопок из папки Сircle Вuttons (рис. 12).

На предлагаемом примере мы ознакомимся с еще одной командой gotoAndStop(), которая позволяет перейти к нужному кадру с последующей остановкой.

Рис. 12. Кнопки из папки Circle Buttons

На кнопку перехода к первому кадру (третья слева на рис. 13) повесим код, как показано на рис. 13.

Рис. 13. Сценарий для кнопки «В первый кадр»

В случае с фотоальбомом из пяти кадров в последнюю кнопку добавим сценарий перехода «В последний кадр»:

Автоматизированное написание скрипта

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

Рис. 14. Средства автоматизированного написания скрипта

Панель редактора Action Script позволяет выбирать, перетаскивать, перераспределять и удалять команды.

Покажем, как можно написать тот же скрипт для кнопки «Вперед» в автоматизированном режиме. Выбрав папку Movie Clip Control (верхнее левое окно на рис. 14) можно получить доступ к обработчику событий on, а далее нужно либо дважды щелкнуть по соответствующему пункту, либо перетащить выражение на поле написания скрипта в режиме Drag and Drop.

Рис. 15. Подсказка для завершения выражения

В результате на рабочем поле появится необходимое выражение и подсказка вида (рис. 15): вы выбираете из меню нужную команду и выражение завершается автоматически. Как видно из меню, можно выбрать не только условие, связанное с экранными кнопками, - можно, также, выбрать из меню рис. 15 пункт keyPress “”, или keyPress “”, что соответствует нажатию клавиатурных клавиш (стрелка влево, стрелка вправо), то есть имеется возможность создать фотоальбом, который будет «перелистываться» с помощью клавиш клавиатуры.

Рис. 16. Обращения к кнопке клавиатуры

Задействуем команду keyPress “” (рис. 16), затем перейдем в папку Timeline Control, выберем команду nextFrame и перетащим ее на рабочее поле (рис. 17).

Рис. 17. Команду nextFrame можно найти в папке Timeline Control

Для кнопки, переводящей фильм в начало фотоальбома, в качестве события можно выбрать из меню нажатие клавиши Home, а далее (рис. 18) перетащить на поле команду gotoAndStop, в результате чего появится еще одна подсказка по возможному синтаксису данной команды.

Стрелочки в подсказке позволяют просмотреть разные варианты синтаксиса. Программа предоставляет два варианта (рис. 18 и 19), то есть предлагает задать сцену и кадр или только кадр. В нашем случае достаточно указать только кадр (Frame). Если название сцены опущено, то по умолчанию осуществляется переход к кадру текущей сцены.

Рис. 18. Подсказка по возможному синтаксису команды

Рис. 19. Стрелочка-треугольник позволяет просматривать варианты синтаксиса

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

Можно ли обеспечить сценарий, при котором разные события будут приводить к одним и тем же действиям? Оказывается, можно - для этого в обработчике событий on необходимо перечислить список наименований событий. Если вы поставите запятую в списке событий после первого события, то программа сама предложит вам меню (рис. 20).

Рис. 20. При введении запятой в списке событий автоматически появляется меню дополнительных команд

Добавим к первому событию (нажатие клавиатурной кнопки) второе событие (отпускание экранной кнопки):

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

В рассмотренном примере мы использовали переход по номеру кадра, но этот способ не всегда удобен: если в процессе редактирования фильма нумерация кадров изменится, то логика может нарушиться. Более удобно использовать переход по метке кадра. Рассмотрим пример, в котором потребуется не только перелистывание альбома, но и переход к разным разделам, то есть более сложная навигация.

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

Первому кадру раздела «рисунки» дадим метку Pictures, аналогично первым кадрам других разделов присвоим метки graphics и photo.

Создадим слой для размещения меток и назовем его Lables. Для того чтобы поставить метку кадру, в панели Properties необходимо выбрать тип метки Name и записать ее имя. В нашем случае Pictures (рис. 21). Аналогично разместим метки в кадрах 5 и 10 (рис. 22).

Рис. 21. Пример присвоения кадру метки

Теперь добавим новый слой и назовем его Actions. В первом ключевом кадре слоя Actions вызовем панель Actions Frame (путем нажатия кнопки F9) и наберем команду stop () (см. рис. 22)

Рис. 22. Сценарий первого кадра

Добавим еще один слой под именем Subjects (тематика), в котором дадим заглавия соответствующим кадрам: «Рисунки» (рис. 23), «Графика» и «Фото».

Рис. 23. Заглавие для кадров раздела «Рисунки»

Теперь добавим сбоку кнопки меню с аналогичными именами, которые расположим на новом слое под названием Мenu.

Напечатаем с левого края первый пункт меню «Рисунки» и переведем его в кнопочный символ. С помощью инструмента Arrow выделим текстовый блок «Рисунки» и выполним команду Modify => Convert to Symbol (эту команду можно выполнить и с помощью клавиши F8), в панели Convert to Symbol зададим тип символа Button и определим его имя как pictureButton (рис. 24).

Рис. 24. Назначим кнопке перехода к разделу рисунков имя рictureButton

Создадим четыре кадра для кнопки «Рисунки»: первый будет представлять просто исходный текст (рис. 25), второй - тот же текст только синего цвета, третий кадр мы пропустим (в этом случае Down-кадр будет такой же, как и Over-кадр), а в Hit-кадре нарисуем прямоугольную область, которая определит область нажатия кнопки (рис. 26).

Рис. 25. Up-кадр кнопки pictureButton

Рис. 26. Hit-кадр кнопки pictureButton

Теперь нам нужно повесить сценарий на вновь созданную кнопку. Для этого выделим кнопку в сцене Scene 1 и, нажав F9, вызовем панель Actions, а затем внесем код, показанный на рис. 27.

Рис. 27. Сценарий перехода на кадр с меткой

Более полумиллиона человек по всему миру используют Flash для создания красочных и, в тоже время, компактных Web-ресурсов. Дизайнеров новый Macromedia Flash привлечет улучшенными возможностями создания графики, а профессиональные разработчики смогут привнести новые идеи в свои приложения, благодаря использованию скриптов, форм и подключению серверных возможностей.

Почему именно Macromedia Flash 5?Macromedia Flash 5 позволяет создавать яркие, запоминающиеся пользователям Web-сайты, благодаря возможности сочетать четкость и гибкость векторной графики с растром, звуком, анимацией и богатыми интерактивными идеями.

Имея удобную среду разработки, Macromedia Flash 5 легко интегрируется в существующий процесс создания Web-узла, благодаря возможностям импорта из Macromedia FreeHand и Fireworks.

Macromedia Flash 5 также предоставляет широкий набор средств разработки насыщенных Web-приложений, включая тесную интеграцию с Macromedia Generator.

Новые возможности:Macromedia Common User Interface - привычный пользовательский интерфейс позволяет разработчикам свободно себя чувствовать в любом приложении для Web-дизайна от Macromedia.

Macromedia FreeHand® Import - импортируйте графику из Macromedia FreeHand для создания законченных публикаций.

Macromedia Generator™ Developer Edition Support - автоматизируйте процесс создания Flash-контента с помощью Macromedia Generator Developer Edition, решения для эффективного обновления Flash-сайтов.

Bezier Tools - привычные инструменты "Выделение" и "Перо", с поддержкой кривых Безье, предоставляют новые возможности создания иллюстраций.

Shared Symbol Libraries - библиотека используемых в проекте символов упрощает управление ими и минимизирует размер конечного файла.

Web-Native Printing - создавайте Web-приложения, с широкими возможностями высококачественной печати.

Movie Explorer - просматривайте и сортируйте иерархическую структуру документа для простоты анализа и редактирования больших проектов.

ActionScript Development Tools - эффективно создавайте насыщенные Web-приложения с помощью нового языка сценариев близкого к JavaScript, редактора ActionScript и Debugger, а также фукции Smart Clips - решения для разработки часто используемых элементов.

XML Transfer Support - поддержка XML позволяет создавать мощные приложения для электронной коммерции.

HTML Text Support - возможность включать форматированный HTML-текст и гиперссылки облегчает создание файлов насыщенных текстовой информацией.

Как вы думаете, реально ли уместить страничку, содержащую приличное количество анимации, звука и удивительных способов интерактивности в файл порядка 100kb? Сделать так, чтобы эта страница работала одинаково как в Netscape Navigator (NN), так и в Internet Explorer (IE)? Компания Macromedia решила большинство проблем совместимости и производительности, выпустив Flash, который к сегодняшнему дню весьма эволюционировал и является полноценной частью инструментов / техник web-дизайна.

Коротко и ясно о том, что это такое. Существуют plug-ins (примочки), которые встраиваются в браузер (web browser), и служат для просмотра Flash страниц. Называются они Flash Player. Причем в последних версиях IE и NN эти примочки уже встроены (если нет, то их можно бесплатно скачать с сайта Macromedia). И существует программа Flash, с помощью которой эти страницы создаются.

В пользу Flash приведу его основные достоинства и статистку Macromedia.

· Маленький размер получающихся файлов и, соответственно, более быстрая загрузка из сети. Flash использует векторный формат изображений и сжимает растровые и звуковые файлы, (которые также могут использоваться в страницах Flash), что очень положительно влияет на уменьшение размера страницы и время ее скачивания.

· Устранение проблем совместимости между браузерами. В отличие от HTML, Flash одинаково работает как в IE, так и в NN. Имеется даже специальный вариант примочки-проигрывателя для браузеров, поддерживающих Java (Flash Java Player).

· Мощный событийно-управляемый язык. В Macromedia Flash используется специальный язык, при помощи которого можно создавать "интеллект" для своей страницы. Причем если в Flash 4 это был, скорее, некий скрипт (script), имеющий всего несколько основных функций, то в Flash 5 (несмотря на название "ActionScript") - это почти полноценный язык программирования, с поддержкой условий, циклов, массивов, функций и классов, которые можно наследовать.

· Красота. Да, да, именно! Flash имеет автоматическую поддержку anti-aliasing (антиалайсинг, сглаживание контуров с помощью смешения соседних цветов). В результате даже простая линия или кружочек, нарисованные во Flash, выглядят приятно для глаз. Что же тут говорить о рисунках, нарисованных профессионалами.

· Удобство. Создавать страницы во Flash под силу даже ребенку, и, признаюсь, это весьма приятное занятие. А если обладать элементарными навыками дизайна и рисования, открывается весь простор для Вашей фантазии, предоставляемый Flash.

· Распространенность. Flash потихоньку становится стандартом де-факто (см. статистику ниже). В случаях, где необходима широкая интерактивность, графика, звук, и маленький размер, Flash незаменим.

На сегодняшний день Flash Player используют 222 миллиона человек, и каждый день его скачивает еще 1.4 миллиона. По данным Macromedia это позволяет 90% пользователей Сети просматривать страницы с Flash содержимым.

Примочки распространяются бесплатно, в то время как за программу создания Flash файлов приходится платить. Последняя, 5-я версия продукта стоит $399. Пользователям старых версий это удовольствие достанется за $149.

К написанию этой статьи меня привело желание осветить для достаточно широкого круга людей пятый Flash (Flash 5). Дело в том, что большинство ресурсов по Flash - на английском языке. В русскоязычной части сети эта ценная информация отсутствует. Я даже знаю пару российских сайтов, сделанных нашими же ребятами, но на английском языке. (Причем это - самое стоящее из того, что есть). Понятно, что люди делают сайты на английском, т.к. использование русского языка сильно сужает аудиторию: Тем не менее, я считаю, что есть смысл в создании ресурсов, доступных широкой публике, на русском.

В последнее время программа Flash стала модной. Многие полагают, что Flash - это новый продукт, однако это не так. Еще в 1995 году появилась небольшая программа Future Splash Animator для векторной анимации Web-графики, а два года спустя, в 1997 году, компания Macromedia приобрела ее и начала развивать продукт под новым названием Flash.

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

Итак, приступим.

Будем считать, что у вас уже есть Flash 5. Программа работает под Windows 95/98/NT/2000. Установить ее очень легко - с этим справится любой, кто установил хотя бы парочку программ в Windows. После установки можете смело заходить в нее, и вот, приблизительно, то, что вы увидите:

Интерфейс Flash 5 очень похож на интерфейс программ Adobe. Он весьма удобен и легок. После некоторого времени работы с программой понимаешь, как хорошо все продуманно и сколько труда разработчики Macromedia вложили в свое детище.

Слева находятся панели инструментов. С помощью них можно выбирать инструменты, а также управлять рабочей областью, модифицировать объекты и выбирать простые цвета. Справа находятся диалоги настройки инструментов, цвета, текста, свойства кадров и объектов. Посередине - рабочая область, где мы будем творить, а над ней шкала времени (Timeline).

Во Flash очень интересно рисовать. Этот векторный редактор не похож ни на один из существующих. К сожалению, подробное описание инструментов рисования выходит за рамки данной статьи. Впоследствии, мы можем рассмотреть эти инструменты подробнее. Самый хороший способ чему-то научится - практика при каком-то количестве теории. В качестве практики просто поэкспериментируйте с различными инструментами, а в качестве теории можете прочитать про это в книгах или в Сети.

Странички (файлы, анимации - как хотите) Flash принято называть фильмами (Movie), хотя мне больше нравится слово "мультик". Наверное, это оттого, что во Flash имеется шкала времени и, хоть вы и обладаете безграничными возможностями по использованию этой шкалы, ваше творение все равно будет упорядоченно выполнятся во времени. На самом деле, вы можете останавливать, вновь запускать мультик, прыгать с одного кадра на другой, загружать другие мультики и много еще чего.

Процесс создания состоит в следующем. Вы создаете так называемый "авторский файл", который имеет расширение.fla, а затем он транслируется в результирующий.swf файл, который уже может быть просмотрен в браузере, обрамлен с помощью HTML, и т.д. Кстати, Flash может записать ваше творение в отдельный исполняемый.exe файл, сгенерировать java-код. И даже сохранить в виде статического GIF изображения.

Давайте попробуем нарисовать первый простой мультик. Нам понадобятся инструменты - "овал"

Лабораторная работа

Знакомство с программой Macromedia Flash . Создание Flash - анимаций.

План работы:

Прочитайте представленный ниже текст.

Создайте по инструкции анимацию «Взрыв бомбочки»

Выпишите из текста ответы на контрольные вопросы.

Самостоятельно создайте анимацию «Шарик»

Знакомство с программой

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

Для удобства работы панель инструментов разделена на 4 части:

TOOLS (инструменты) - в этой части собраны кнопки выбора конкретного инструмента; эти инструменты разделяются на два вида: инструменты выбора и инструменты рисования;

View (вид) - - содержит средства управления просмотром изображения имеющегося на столе, в этом поле расположены две кнопки:

Hand Toll (рука) – щелчок на кнопке включает режим, при котором рабочую область можно перемещать в любом направлении с помощью мыши, не пользуясь полосами прокрутки;

Zoom Toll (Масштаб) – щелчок на кнопке включает режим быстрого масштабирования изображения в рабочей области; при включении этого режима в поле Options появляются две дополнительные кнопки, позволяющие выбирать направление масштабирования (увеличение или уменьшение);

Colors (цвета) - кнопки в этой части обеспечивают раздельный выбор цвета контура и заливки объектов

Options (параметры) – здесь представлены элементы установки дополнительных параметров выбранного инструмента; для инструментов, не имеющих дополнительных параметров, поле Options остается пустым

Рабочая область занимает всю центральную часть окна. В центре рабочей области находится так называемый Монтажный стол (Stage ), который мы в дальнейшем для краткости будем называть просто «стол».

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

Остальная часть рабочей области нужна для:

 выполнения «черновых» работ;

 для реализации эффекта постепенного входа (выхода) объекта в кадр.

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

В общем случае на панели временной диаграммы могут быть представлены следующие элементы:

 описание слоев текущей сцены фильма; описание представлено в виде своеобразной таблицы, содержащей несколько столбцов; в них указываются названия слоев и их атрибуты. Подробнее эта часть панели временной диаграммы будет рассмотрена на уроке «Создание анимации »;

 собственно временная диаграмма, содержащая шкалу кадров, изображение «считывающей головки» и временные диаграммы для каждого слоя сцены

 выпадающее меню, которое позволяет выбирать формат представления кадров на временной диаграмме;

 строка состояния окна временной диаграммы, на которой выводится информация о некоторых параметрах фильма, а также имеются кнопки для управления отображением кадров анимации на столе.

Ниже рабочей области (в исходном состоянии) размещается Панель инспектора свойств. Если в рабочей области не выбран ни один объект, либо таковые вообще отсутствуют, то инспектор свойств отображает общие параметры фильма. При выборе какого-либо объекта автоматически изменяется формат инспектора свойств, на панели отображаются свойства выбранного объекта.

Итак, создадим неболшой фильм – «взрыв бомбочки». Создавать этот фильм будем с помощью покадровой анимации.

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

При воспроизведении мультика эффект анимации достигается за счет того, что картинки на столе сменяют друг друга. Каждый покадровый мультик характерезуется двумя основными параметрами:

количеством ключевых кадров (Keyframe);

частотой смены кадров (во Flash она измеряется как число кадров показанных за 1 секунду – frame per second)

В общем случае оба этих параметра влияют на создаваемый визуальный эффект (на плавность или дискретность движения, превращения и т.д.). Но все же ведущая роль здесь принадлежит первому параметру, а также тому, насколько сильно последующий ключевой кадр отличается от предыдущего.

На временной диаграмме ключевые кадры отображаются серыми прямоугольничками с черной точкой внутри. При воспроизведении фильма считывающая полоса перемещается от одного кадра к другому, отмечая текущий кадр. Чтобы увидеть изображение, связанное с конкретным кадром, необходимо щелкнуть мышью на значке этого кадра на временной диаграмме.

Алгоритм создания анимации «Взрыв бомбочки»

На столе нарисуем рис.1

Контрольные вопросы

Основные объекты окна программы Macromedia Flash

На какие области разбита Панель инструментов

Что такое монтажный стол

Какой инструмент служит для выделения объектов

Что такое Keyframe и как он выделяется на временной шкале

От чего зависит плавность движения объекта

С каким расширением сохраняются документы созданные в программе Macromedia Flash

Самостоятельная работа

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