План урока "London"

Macromedia Flash

Интерфейс Macromedia Flash 5

Рис. 4.1. Вид окна Macromedia Flash

При открытии окна приложения Flash 5 на экране появляются следующие элементы интерфейса:

• Stage (рабочий стол) — область для компоновки отдельных кадров, создания композиции из графических элементов или импортированных точечных изображений и просмотра результатов анимации;

• Timeline (ось времени) — окно, содержащее список отдельных слоев с расположенными на них графическими объектами и их распределением во времени (на оси времени отмечен каждый кадр фильма);

• Symbols (символы) — основные элементы фильма, как правило, многократно в нем используемые;

• Library (библиотека) — окно со списком символов и импортированных файлов, позволяющее выполнять их организацию и сортировку;

• Floating, dockable panels (пристыковываемые панели) — окна с набором вкладок, служащие для настройки приложения и изменения параметров элементов фильма;

• Movie Explorer (обозреватель фильма) — дополнительно вызываемое окно для просмотра структуры фильма.

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

Рис. 4.2. Ось времени с набором слоев

На рис. 4.2 цифрами отмечены следующие элементы управления окна Timeline (Ось времени):

1. Указатель текущего кадра (Playhead).

2. Линейка времени (Timeline header).

3. Кнопка раскрывающегося меню Frame View.

4. Кнопка Center Frame.

5. Кнопки режима Onion Skin.

6. Указатель номера выделенного кадра.

7. Значение частоты кадров (Frame rate).

8. Слой направляющей Guide Layer.

9. Пустой ключевой кадр (Empty keyframe).

10. Покадровая анимация (Frame by frame Animation).

11. Анимация с расчетом кадров (Tweened Animation).

Symbols (символы) — это многократно используемые элементы фильма. Ими могут быть кнопки, графика, шрифты, звуки, видеоклипы и т. п. Помещая символ на рабочий стол, создают экземпляр этого символа. Для любого элемента, появляющегося в фильме более одного раза, символы позволяют получить более компактный результирующий файл. Изменение символа влияет на все его экземпляры, но редактирование экземпляра не отражается на свойствах породившего его символа. Символы можно редактировать как непосредственно в области Stage (на рабочем столе), так и в отдельном окне. При редактировании одного символа на рабочем столе все остальные элементы остаются видимыми, но недоступными для редактирования. На оси времени остается при этом только слой, соответствующий редактируемому символу. Символы играют важную роль в создании интерактивных фильмов Flash. Так, символ кнопки может менять свой вид при наведении на него указателя мыши либо в зависимости от того, в каком месте рабочего стола будет помещен его экземпляр.

Рис. 4.3. Окно библиотеки

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

Рис. 4.4. Панель Info с характеристиками фигуры

Dockable panels (панели) позволяют не только просматривать, организовывать и модифицировать элементы фильма, но и задавать параметры или применять команды к каждому типу элементов. Панели можно показывать или скрывать, создавая пользовательский вариант интерфейса.

Начало работы над фильмом

Каждый раз при открытии приложения Flash создается новый файл с расширением FLA. При этом для задания таких свойств фильма, как размер, частота кадров, цвет фона и т. п. используется диалоговое окно Movie Properties (Свойства фильма).

Если окно приложения Flash уже открыто, то, чтобы начать новый фильм, следует выбрать команду File New (Файл Создать). Выбирая затем команду Modify Movie (Изменить Фильм), открываем окно Movie Properties (Свойства фильма). В поле Frame Rate (Частота кадров) этого окна задается число кадров в секунду (для Web-страниц обычно выбирают значения от 8 до 12). В полях Width (Ширина) и Height (Высота) — размер в пикселах по горизонтали и вертикали (минимально возможный равен 18 х 18, амаксимальный — 2880 х 2880). Кнопки Contents (Содержание) и Printer (Принтер) служат для согласования размера рабочего стола с его содержимым или областью печати на заданном формате бумаги.

Рис. 4.5. Задание параметров фильма в Macromedia Flash

Палитра Background color (Цвет фона) позволяет выбрать цвет фона кадров. Раскрывающийся список Ruler Units (Деления линейки) задает единицы измерения, используемые для линеек и координат объектов. Щелчок на кнопке ОК окна присваивает выбранные параметры фильму. Timeline (Ось времени) позволяет отобразить композицию любого кадра и выполнить ее редактирование. Кадры, определяющие изменения в фильме, должны быть сделаны ключевыми, что необходимо для расчета промежуточных кадров методом tweened animation. Количество рассчитываемых кадров можно менять, перетаскивая ключевой кадр вдоль оси времени.

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

Чтобы вставить кадр, выбирают команду Insert Frame (Вставка Кадр). Чтобы создать ключевой кадр, следует выбрать команду Insert Keyframe (Вставка Ключевой кадр). Для создания пустого ключевого кадра используют команду Insert Blank Keyframe (Вставка Пустой ключевой кадр). Аналогичные команды доступны в контекстном меню кадра, вызываемом щелчком правой кнопки мыши. Чтобы удалить кадр, ключевой кадр или последовательность кадров, их предварительно следует выделить, а затем выполнить команду Insert Remove Frame (Вставка Удалить кадр). Последовательность кадров можно переместить на новое место простым перетаскиванием с помощью мыши. При необходимости изменить продолжительность последовательности кадров, рассчитанной по методу tweened animation, ее ключевой кадр перемещают при нажатой клавише Alt. Чтобы скопировать кадр или последовательность кадров, следует предварительно выполнить их выделение, затем выбрать команду Edit Copy Frames (Правка Копировать кадры), после чего, перейдя на место вставки, выделить заменяемые кадры и выполнить команду Edit Paste Frames (Правка Вставить кадры).

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

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

• поиск элементов по их названию;

• поиск всех экземпляров определенного символа;

• отображение свойств элемента;

• отображение заданных категорий объектов в окне обозревателя;

• выделение элементов для редактирования;

• замена определенного шрифта другим во всех местах его использования;

• копирование текста в буфер обмена для контроля его правописания в текстовом редакторе;

• знакомство ср структурой фильма, созданного другим разработчиком;

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

Рис. 4.6. Окно Movie Explorer

Вызов окна обозревателя фильма осуществляется по команде Window Movie Explorer (Окно Обозреватель фильма). Управление окном обозревателя осуществляется либо с помощью команд раскрывающегося меню, вызываемого щелчком на кнопке в правом верхнем углу окна, либо с помощью доступных в контекстном меню объектов. Для выбора категорий отображаемых объектов используются кнопки в области Show (Показ), позволяющие показать текст, символы, действия, импортированные файлы, кадры и слои. Кнопка Customize (Пользовательский) дает возможность еще более детализировать выбор с помощью диалогового окна Movie Explorer Settings (Установки обозревателя фильма). Установка флажков Show Movie Elements (Показывать элементы фильма) и Show Symbol Definitions (Показывать описания символов) соответствует отметке одноименных команд раскрывающегося меню окна.
Поле Find (Поиск) позволяет найти по названию элемент фильма, шрифт, действие, а также кадр по его номеру. Поиск проводится только по отображенным в окне обозревателя компонентам.

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

Раскрывающееся меню окна обозревателя фильма содержит следующий набор команд:

• Goto Location (Перейти к месту) — переход к выделенному слою, сцене или кадру;

• Goto Symbol Definition (Перейти к описанию символа) — переход к описанию символа, выделенного в окне обозревателя;

• Select Symbol Instances (Выделить экземпляры символа) — переход к сцене, содержащей экземпляры символа, выделенного в окне обозревателя фильма;

• Find in Library (Поиск в библиотеке) — выбор выделенного символа в окне библиотеки;

• Properties (Свойства) — открытие панелей, соответствующих выделенному элементу;

• Rename (Переименовать) — изменение имени выделенного элемента;

• Edit in Place (Правка на месте) — разрешение редактировать выделенный элемент на рабочем столе;

• Edit in New Window (Правка в новом окне) — переход к редактированию выделенного элемента в отдельном окне;

• Show Movie Elements (Показывать элементы фильма) — отображение сцен фильма с входящими в них элементами;

• Show Symbol Definitions (Показывать описания символов) — отображение всех элементов, связанных с символом;

• Copy Text to Clipboard (Копировать текст в буфер) — копирование выделенного текста в буфер обмена, откуда его можно вставить в текстовый редактор для изменения или проверки;

• Cut (Вырезать), Сору (Копировать), Paste (Вставить) и Clear (Очистить) — выполняют указанные действия с выделенным элементом;

• Expand Branch (Развернуть ветвь) — разворачивание дерева навигации у выделенного элемента;

• Collapse Branch (Свернуть ветвь) — сворачивание дерева навигации у выделенного элемента;

• Collapse Others (Свернуть другие) — сворачивание всех ветвей навигационного дерева, не содержащих выделенного элемента;

• Print (Печать) — печать дерева навигации, отображенного в данный момент в окне обозревателя.

Для многократного использования объекта его можно преобразовать в символ, предварительно выделив его в композиции на рабочем столе. Можно также создать пустой символ и импортировать в него содержимое либо в режиме редактирования создать его содержимое вручную. Символы поддерживают всю функциональность Flash, в том числе анимацию. Использование символов для анимации позволяет создать итоговый файл минимального размера. Особенно значительный эффект получается в случае анимации с повторяющимися движениями, например взмахами крыльев птицы или насекомого.
Чтобы создать новый символ из одного или нескольких объектов на рабочем столе, следует предварительно выделить эти объекты и выполнить команду Insert Convert to Symbol (Вставка Преобразовать в символ). В открывшемся диалоговом окне Symbol Properties (Свойства символа) вводят имя символа и выбирают тип его поведения, устанавливая значение переключателя Behavior (Поведение): Graphic (Графика), Button (Кнопка) или Movie Clip (Видеоклип). Щелчок на кнопке О К добавляет новый символ в библиотеку, а выделенный на рабочем столе объект преобразуется в экземпляр этого символа. Дальнейшее его изменение возможно только в режиме редактирования символов.

Рис. 4.7. Окно Symbol Properties

Рис. 4.8. Окно редактирования символа

При создании пустого символа следует убедиться, что на рабочем столе ничего не выделено, после чего можно выбрать команду Insert New Symbol (Вставка Новый символ) либо щелкнуть на одноименной кнопке в окне библиотеки. В диалоговом окне Symbol Properties (Свойства символа) вводится имя нового символа и указывается тип его поведения. После щелчка на кнопке ОК символ добавляется в библиотеку и Flash переходит в режим его редактирования. Наполнить символ содержанием можно, используя ось времени, инструменты рисования, средства импорта, либо с помощью экземпляров других символов. Закончив наполнение символа, следует перейти в режим редактирования сцены, выбрав команду Edit Edit Movie (Правка Правка фильма) либо щелкнув на кнопке с ее названием в левом верхнем углу окна документа. Для многочисленных сцен можно использовать кнопку Edit Scene (Правка сцены) в правом верхнем углу окна документа, выбирая из списка нужную сцену.

Создание анимации методом расчета кадров

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

Ключевым кадром называется кадр, в котором заданы изменения анимационной сцены. Для пошаговой анимации (frame-by-frame) ключевым является каждый кадр. В анимации с расчетом промежуточных кадров (tweened) ключевые кадры определяют состояние объектов в определенные моменты, а все кадры между ними будут автоматически рассчитаны Flash. На оси времени ключевой кадр отмечен кружком, если в нем присутствуют объекты, или вертикальной чертой, если он пустой. Flash рассчитывает промежуточные кадры с учетом всех объектов, существующих в ключевых кадрах, и отмечает эту последовательность стрелкой.

Чтобы создать новый ключевой кадр, можно выбрать команду Insert Keyframe (Вставка Ключевой кадр) либо одноименную команду контекстного меню кадра, вызываемого щелчком правой кнопки мыши в окне оси времени.

Flash может рассчитывать промежуточные кадры для анимации двух типов:

• анимации движения, когда задаются положение, размер и поворот объекта, группы или текстового блока в один момент времени, а затем устанавливаются их новые значения в другой момент;

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

Рис. 4.9. Отметки групп кадров на оси времени

Поэтому в окне Timeline (Ось времени) группы рассчитанных кадров обозначаются различным образом. Анимация движения (motion-tweened) обозначается стрелкой на синем фоне (рис. 4.9, а) между двумя ключевыми кадрами, отмеченными точками. Анимация формы (Shape-tweened) обозначается стрелкой на зеленом фоне между двумя ключевыми кадрами, причем последний отделен вертикальной линией (рис. 4.9, б). Пунктирная линия (dashed) указывает на то, что последний ключевой кадр отсутствует (рис. 4.9, в). Одиночный ключевой кадр отмечается черной точкой, а все последующие кадры, повторяющие его содержимое, выделены серым фоном, причем последний из них отмечен пустым прямоугольником (рис. 4.9, г). Малая буква «а» указывает кадр, которому назначено одно из действий панели Actions panel (рис. 4.9, Э). Красный флажок отмечает кадр, содержащий комментарий или метку (рис. 4.9, е).

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

При создании в анимации фонового изображения требуется, чтобы оно повторялось на протяжении нескольких кадров. При добавлении новых кадров в последовательность в каждом из них повторяется содержимое кадра, после которого они вставлены. Добавить группу новых кадров можно командой Insert Frame (Вставка Кадр), предварительно выделив крайний правый кадр последовательности. Аналогичный результат можно получить, если переместить ключевой кадр с помощью мыши, удерживая клавишу Alt, до нужной позиции на оси времени.

Macromedia Flash

Создание анимации движения

Анимацию движения (motion-tweened) также можно применять к экземплярам, группам или текстовым блокам, при этом Flash поддерживает расчет промежуточных кадров при перемещении, изменении размера, поворота и скоса объектов. Дополнительно можно изменять цвет экземпляров объектов или текста, применяя градиентную смену цветов или изменяя их прозрачность. Чтобы выполнить такие изменения для группы или текстового блока, их предварительно следует преобразовать в символы командой Insert Convert to Symbol (Вставка Преобразовать в символ). При этом преобразуемый объект становится экземпляром этого символа.

Создать анимацию движения можно двумя способами:

• Создать начальный и конечный ключевые кадры и для начального кадра установить значение Motion (Движение) в раскрывающемся списке Tweening (Расчет) на панели Frame (Кадр).

• Создать начальный ключевой кадр, затем выполнить команду Insert Create Motion Tween (Вставка Рассчитать движение) и переместить объект в новую позицию на сцене. При этом Flash автоматически создаст заключительный ключевой кадр.

Рис. 4.10. Результат расчета промежуточных кадров анимации

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

Рассмотрим последовательность действий при создании анимации движения с помощью задания параметров на панели Frame (Кадр):

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

2. Создаем на рабочем столе экземпляр, группу или текстовый блок либо перетаскиваем экземпляр символа из окна библиотеки. Рисованный объект следует преобразовать в символ.

3. Создаем завершающий ключевой кадр, определяющий длину последовательности кадров.

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

5. Выполняем команду Window Panels Frame (Окно Панели Кадр), чтобы открыть панель Frame (Кадр). В раскрывающемся списке Tweening (Расчет) выбираем значение Motion (Движение).

6. При изменении размера объекта следует установить флажок Scale (Масштабировать).

7. Значение Easing (Плавность) задаем в диапазоне от -100 до 100, определяя тем самым скорость изменений во времени. Отрицательные значения соответствуют медленным изменениям вначале и быстрым в конце. Положительные — быстрым вначале и замедляющимся к концу анимации. По умолчанию скорость постоянна. Регулировка производится ползунком, открывающимся щелчком на стрелке.

8. Вращение можно задать выбором значения из раскрывающегося списка Rotate (Поворот). По умолчанию вращения нет. Значение CW соответствует вращению по часовой стрелке, a CCW — против, с указанием требуемого числа оборотов. Это вращение будет добавлено к повороту объекта, заданному на шаге 4.

9. Флажок Orient to Path (Ориентация на траекторию) устанавливается в случае, если задана криволинейная траектория движения.

10. Флажок Synchronize (Синхронизировать) позволяет синхронизировать число кадров анимации с числом экземпляров графики, если они различны.

11. При заданной траектории движения флажок Snap (Привязка) фиксирует на ней анимируемый экземпляр.

Рис. 4.11. Выбор параметров анимации движения

Рассмотрим последовательность действий при создании анимации по команде Create Motion Tween (Рассчитать движение):

1. Выделяем пустой ключевой кадр и изображаем на рабочем столе объект или перетаскиваем на него экземпляр символа из окна библиотеки.

2. Выполняем команду Insert Create Motion Tween (Вставка Рассчитать движение). Изображенный на первом шаге объект будет автоматически преобразован в символ, которому присвоено имя tweenl. Последующим объектам будут присваиваться имена tween2, tween3 и т. д.

3. Щелчком указываем кадр, где должна завершиться анимация, и выполняем команду Insert Frame (Вставка Кадр).

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

5. Выделяем конечный ключевой кадр последовательности и выполняем команду Window Panels Frame (Окно Панели Кадр). На открывшейся панели Frame (Кадр) автоматически должно появиться значение Motion (Движение).

6. Если был изменен размер, то следует установить флажок Scale (Масштабировать).

7. Значение Easing (Плавность) задается в диапазоне от -100 до 100, определяя скорость изменений во времени. Отрицательные значения соответствуют медленным изменениям вначале и быстрым в конце. Положительные — быстрым вначале и замедляющимся к концу анимации. По умолчанию скорость постоянна. Регулировка производится ползунком, открывающимся щелчком на стрелке.

8. Вращение задается выбором значения из раскрывающегося списка Rotate (Поворот). По умолчанию указывается значение Auto (Автоматически), определяемое поворотом объекта на шаге 4. Значение CW соответствует вращению по часовой стрелке, a CCW — против, с указанием требуемого числа оборотов. Это вращение будет добавлено к повороту, заданному на шаге 4.

9. Флажок Orient to Path (Ориентация на траекторию) устанавливается в случае, если задана криволинейная траектория движения.

10. Флажок Synchronize (Синхронизировать) позволяет синхронизировать число кадров анимации с числом экземпляров графики, если они различны.

11. При заданной траектории движения флажок Snap (Привязка) фиксирует на ней анимируемый экземпляр.

 Macromedia Flash

Задание движения по траектории

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

Рис. 4.12. Привязка объекта к траектории

Рассмотрим последовательность действий при создании анимации с движением объекта по заданной траектории:

1. Создадим анимацию движения одним из способов, рассмотренных ранее.

2. При установке флажка Orient to Path (Ориентация на траекторию) базовая линия группы анимируемых объектов будет двигаться параллельно заданной траектории. Для фиксации на траектории регистрационной точки объекта устанавливается флажок Snap (Привязка).

3. Выполняем команду Insert Motion Guide (Вставка Траектория движения). Flash создаст над выделенным слоем новый слой со значком направляющей слева от имени.

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

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

Рис. 4.13. Движение по заданной траектории

Рис. 4.14. Окно Layer Properties

Чтобы связать слой с существующим слоем направляющей, можно выполнить одно из следующих действий:

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

• Создать новый слой под слоем направляющей. Объекты, размещенные на этом слое, к которым будет применена анимация методом расчета кадров (tweened), автоматически привязываются к траектории.

• Выделить слой под слоем с направляющей и выполнить команду Modify Layer (Изменить Слой) с выбором значения Guided (Управляемый) для типа слоя в диалоговом окне Layer Properties (Свойства слоя).

• Щелкнуть на слое при нажатой клавише Alt.

Чтобы разорвать связь слоя со слоем направляющей, выполните одно из следующих действий:

• Выделите слой, связь которого надо разорвать, и перетащите его выше слоя направляющей.

• Выполните команду Modify Layer (Изменить Слой) с выбором значения Normal (Обычный) для типа слоя в окне Layer Properties (Свойства слоя).

• Щелкните на слое при нажатой клавише Alt.

 

 Анимация формы

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

Анимация формы фигур позволяет создать эффект метаморфозы, когда одна форма превращается в другую. Для управления этими изменениями служат специальные идентификаторы формы (shape hints), которые позволяют создавать сложные изменения и превращения отдельных частей исходной фигуры в новые. Идентификаторы формы отмечают отдельные точки фигуры до и после изменения ее формы. Каждая из них обозначается буквой латинского алфавита, что позволяет задать до 26 идентификаторов. Таким образом можно создать изменение выражения нарисованных лиц, превращения одних животных в других и т. п. Для фигур сложной формы желательно задать промежуточные состояния в виде дополнительных ключевых кадров, что позволит контролировать фазы превращения. Лучше все анимируе-мые фигуры размещать в отдельных слоях, хотя можно выполнять одновременную анимацию для слоя, содержащего сразу несколько фигур.

Рис. 4.15. Преобразование формы: автоматическое и с использованием идентификаторов

Для применения анимации формы (shapes-tweened) к группам, символам, текстовым блокам и растровым изображениям их предварительно следует преобразовать командой Modify Break Apart (Изменить Разбить на части). По этой команде разрывается связь между экземпляром и символом, превращая экземпляр в набор несвязанных линий и фигур, что позволяет изменять его, не оказывая воздействия на другие экземпляры. Изменения символа в дальнейшем также не будут влиять на данный экземпляр.

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

1. Выделим слой и пустой ключевой кадр на нем, с которого начнется анимация.

2. Создадим объект для первого кадра последовательности с помощью любого инструмента рисования.

3. Выделим требуемый заключительный кадр последовательности и превратим его в ключевой.

4. Создаем новый объект в этом кадре, к которому должен быть преобразован исходный объект.

5. Выполним команду Window Panels Frame (Окно Панели Кадр), чтобы открыть панель Frame (Кадр).

6. Из раскрывающегося списка Tweening (Расчет) выбирем значение Shape (Форма).

7. Зададим значение Easing (Плавность) в диапазоне от -100 до 100, определяя скорость изменений во времени. Отрицательные значения соответствуют медленным изменениям вначале и быстрым в конце. Положительные — быстрым вначале и замедляющимся к концу анимации. По умолчанию скорость постоянна. Регулировка производится ползунком, открывающимся щелчком на стрелке.

8. В раскрывающемся списке Blend (Переход) выбираем значение Distributive (Распределенный) — для гладких промежуточных форм или значение Angular (Острый) — для сохранения четких углов и прямых линий в промежуточ ных формах. Последнее значение применимо только к формам, имеющим острые углы и прямые линии, в противном случае автоматически будет задано значение Distributive (Распределенный).

Рис. 4.16. Задание параметров анимации формы

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

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

• Идентификаторы располагают на фигуре в определенной последовательности, например против часовой стрелки, начиная с левого верхнего угла объекта.

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

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

Рис. 4.17. Изменение цвета идентификаторов при правильном размещении

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

1. Выделяют первый ключевой кадр в последовательности и выполняют команду Modify Transform Add Shape Hint (Изменить Трансформировать Добавить идентификатор). На объекте появится первый идентификатор красного цвета с буквой внутри.

2. Идентификатор перемещают в точку на контуре фигуры, которую хотят отметить.

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

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

5. Повторяют процесс, добавляя новые идентификаторы (b, с и т. д.).

Если идентификаторы формы не отображаются на экране, то выполняют команду View Show Shape Hints (Вид Показать идентификаторы формы), которая доступна, если выделенный слой и ключевой кадр содержат идентификаторы формы.

Использование идентификаторов формы позволяет не только выполнять анимацию формы, но и создавать дополнительные эффекты, например вращение.

Лишний идентификатор формы, размещенный на фигуре, можно удалить, щелкнув по нему правой кнопкой мыши и выбрав из контекстного меню команду Remove Hint (Удалить идентификатор). Делать это следует на первом ключевом кадре последовательности. Для удаления всех идентификаторов формы достаточно выполнить команду Modify Transform Remove All Hints (Изменить Трансформировать Убрать все идентификаторы).

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

Редактирование анимации

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

Рис. 4.19. Одновременное отображение ключевых кадров при анимации формы

Для отображения и редактирования нескольких кадров одновременно следует использовать режим кальки (onion skin), позволяющий увидеть содержимое нескольких последовательных кадров. Этот режим особенно удобен при редактировании пошаговой анимации. Чтобы его активизировать, нужно выполнить щелчок по кнопке Onion Skin (Режим кальки) окна. В этом режиме текущий кадр отображается ярко, а все остальные — как полупрозрачные с наложением друг на друга. Редактировать при этом можно только текущий кадр. Чтобы обеспечить доступ ко всем кадрам, отмеченным маркерами диапазона, следует щелкнуть по кнопке Edit Multiple Frames (Правка нескольких кадров), также расположенной в окне Timeline (Ось времени).

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

Можно также выполнить изменение порядка следования анимированных кадров на противоположный, для чего следует выделить кадры последовательности в одном или нескольких слоях и выполнить команду Modify Frames Reverse (Изменить Кадры Обратный). В этом случае в начале и в конце выделенной последовательности обязательно должны присутствовать ключевые кадры.

В окне Timeline (Ось времени) имеются следующие кнопки, управляющие режимом кальки:

Рис. 4.20. Кнопки управления режимом кальки

• Кнопка Onion Skin (Режим кальки) включает отображение на рабочем столе содержимого группы кадров, заключенных между маркерами диапазона Start Onion Skin и End Onion Skin, расположенными на оси времени.

• Кнопка Onion Skin Outlines (Контуры на кальке) задает отображение контуров объектов группы кадров, заключенной между маркерами диапазона.

• Кнопка Edit Multiple Frames (Правка нескольких кадров) делает доступным для редактирования содержимое всех кадров диапазона.

• Кнопка Modify Onion Markers (Изменить маркеры диапазона) открывает меню со следующими командами для изменения представления маркеров диапазона:

  • Always Show Markers (Всегда отображать маркеры) — отображает положение маркеров диапазона в заголовке оси времени и при выключенном режиме кальки (onion skin);

  • Anchor Onion Marks (Закрепить маркеры) — блокирует маркеры диапазона на текущей позиции, что препятствует их обычному перемещению вместе с указателем текущего кадра;

  • Onion 2 (показать два кадра) — включает в диапазон по 2 кадра с каждой стороны от указателя текущего кадра;

  • Onion 5 (показать пять кадров) — включает в диапазон по 5 кадров с каждой стороны от указателя текущего кадра;

  • Onion All (показать все кадры) — включает в диапазон все кадры фильма.

При работе над фильмом может возникнуть необходимость переместить всю анимацию в новое положение на рабочем столе. В этом случае, чтобы избежать повторного размещения и выравнивания объектов, их следует перемещать все вместе и одновременно. Предварительно необходимо разблокировать все слои анимации (для заблокированных слоев перемещения объектов не произойдет). Затем щелчком на кнопке Edit Multiple Frames (Правка нескольких кадров) задают режим редактирования всех кадров диапазона и перемещают маркеры диапазона в нужное положение. Например, для выбора всех кадров щелкают по кнопке Modify Onion Markers (Изменить маркеры диапазона) и выбирают команду Onion All (Показать все кадры). Далее выделяют все объекты командой Edit Select All (Правка Выделить все) и перемещают всю анимацию в новую позицию на рабочем столе.

Добавление к анимации звука

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

Озвучивание фильма в Macromedia Flash предполагает создание отдельного слоя для звука, назначение ему звукового файла и задание параметров звука на панели Sound (Звук). Создать звуковой слой можно обычной командой Insert Layer (Вставка Слой). Каждый звук размещается в отдельном слое, и каждый такой слой работает подобно звуковому каналу. При воспроизведении фильма звуки на всех слоях воспроизводятся вместе.

Полоса частот и степень сжатия звукового файла существенно влияют на качество и размер звуковых данных в готовом фильме. Macromedia Flash может импортировать звуковые файлы форматов WAV, AIFF и AU, сохраняя их в библиотеке наряду с растровыми изображениями и символами. Так как звуковые файлы занимают значительный объем памяти, то желательно использовать файлы, оптимальные по качеству. Macromedia Flash работает с 8- или 16-разрядными звуками с полосой 11,22 или 44 кГц (для стереозвука потребуется в два раза больше места, чем для моно). При импорте звука, полоса которого не кратна 11, звучание может стать выше или ниже, чем в оригинале, из-за его преобразования. Чтобы размер выходного файла Macromedia Flash не оказался очень большим, следует придерживаться следующих принципов:

• многократное воспроизведение одного звука с помощью цикла позволяет создать звуковой фон значительной длительности;

• использование звуковых эффектов, применяемых к одному звуковому файлу, позволяет разнообразить его звучание;

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

Управление параметрами воспроизведения звукового файла выполняется на панели Sound (Звук), где доступен набор следующих установок.

Рис. 4.21. Панель Sound для присоединенного звукового файла

В раскрывающемся списке Sync (Синхронизация) представлены четыре варианта событий:

• Event ( Событие) — позволяет синхронизировать звук с событием; воспроизведение начинается с синхронизированным кадром и продолжается независимо от временной диаграммы даже при остановке самого фильма (звуки-события при воспроизведении опубликованного фильма смешиваются);

• Start (Начать) — обеспечивает аналогичные функции, однако при возникновении события запускается новый экземпляр звука, даже если он уже воспроизводится;

• Stop (Остановить) — позволяет остановить воспроизведение указанного звукового файла;

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

В поле ввода Loops (Цикл) задается число повторений воспроизведения звука. Если длина звука мала, то для его непрерывного воспроизведения в течение всего фильма можно задать достаточно большое число повторений.

Раскрывающийся список Effect (Эффект) позволяет назначить звуковому файлу некоторые эффекты:

• None (Нет) — отменяет все ранее назначенные эффекты;

• Left Channel (Левый канал) — воспроизводит звук только в левом канале;

• Right Channel (Правый канал) — воспроизводит зв^к только в правом канале;

• Fade Left to Right (С левого в правый) — звук «перетекает» с левого канала на правый;

• Fade Right to Left (С правого в левый) — звук «перетекает» с правого канала на левый;

• Fade In (Нарастание) — постепенное нарастание громкости в процессе воспроизведения;

• Fade Out (Затухание) — постепенное уменьшение громкости в процессе воспроизведения;

• Custom (Пользовательский) — позволяет назначить собственный звуковой эффект.

Рис. 4.22. Регулировка уровня звука в окне Edit Envelope

Щелчок на кнопке Edit (Правка) открывает дополнительное окно Edit Envelope (Правка звука), в котором можно изменить выбранный эффект и вручную задать уровень громкости звука и моменты начала и конца его воспроизведения. Для каждого из каналов (верхний — левый, нижний — правый) можно задать до восьми маркеров настройки громкости, перемещением которых регулируют уровень звука в канале. Специальные бегунки Time In (Начальный момент) и Time Out (Конечный момент), расположенные на оси числа кадров или времени, задают участок звукового файла, подлежащий воспроизведению. Невыделенная часть звукового файла не сохраняется в фильме, что уменьшает общий размер его файла.

Практикум

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

Упражнение 4.1. Анимация движения

1. Запускаем Macromedia Flash. Если в окне не отображается временная диаграмма, то по команде View Timeline (Вид Ось времени) выводим ее на экран.

2. Создадим на столе объект, например цветной круг. Выделим его и по команде Insert Create Motion Tween (Вставка Рассчитать движение) преобразуем в символ Flash с именем по умолчанию tweenl.

3. На временной диаграмме выделяем последний кадр будущей последовательности, например 15, и выполняем команду Insert Frame (Вставка Кадр).

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

5. По команде Windows Panel Frame (Окно Панели Кадр) открываем панель Frame (Кадр), в которой задаются свойства анимации движения, — в раскрывающемся списке Tweening (Расчет) должно быть значение Motion (Движение).

6. Нажатие клавиши Enter или выбор команды Control Play (Управление Воспроизвести) запускает просмотр анимации.

Упражнение 4.2. Анимация формы

1. Запускаем Macromedia Flash. Если программа активна, то щелчком по кнопке New (Создать) либо выбором команды File New (Файл Создать) создадим новый фильм. Для отображения на экране временной диаграммы выполняем команду View Timeline (Вид Ось времени).

2. Активизируем слой и выделяем на нем пустой ключевой кадр для создания будущей анимации.

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

4. Пропустив определенное число кадров, например 15, по команде Insert Key Frame (Вставка Ключевой кадр) задаем второй ключевой кадр, в котором изобразим конечное состояние фигуры. В примере это зеленый прямоугольник.

5. Для первого ключевого кадра выделим объект на рабочем столе и выбором команды Modify Frame (Изменить Кадр) откроем панель Frame (Кадр), в которой в списке Tweening (Расчет) зададим тип анимации Shape (Форма).

6. Нажатие клавиши Enter или выбор команды Control Play (Управление Воспроизвести) запускает просмотр созданной анимации.

Упражнение 4.3. Анимация с использованием идентификаторов

1. Запускаем Macromedia Flash. Если программа активна, то щелчком по кнопке New (Создать) либо выбором команды File New (Файл Создать) создадим новый фильм. Для отображения на экране временной диаграммы выполняем команду View Timeline (Вид Ось времени).

2. Изобразим на столе объект, например желтый круг.

3. Пропустив определенное число кадров, например 15, по команде Insert Keyframe (Вставка Ключевой кадр) зададим второй ключевой кадр, на котором изобразим конечное состояние фигуры. В примере это синий круг такого же размера в той же позиции стола.

4. В первом ключевом кадре выделяем круг и открываем панель Frame (Кадр) выбором команды Modify Frame (Изменить Кадр). В раскрывающемся списке Tweening (Расчет) зададим тип анимации Shape (Форма). При просмотре такой анимации круг будет лишь постепенно менять свой цвет.

5. Снова выделим первый ключевой кадр и выполним команду Modify Transform Add Shape Hints (Изменить Трансформировать Добавить идентификатор). В центре фигуры появится начальный идентификатор — красный кружок, помеченный буквой «а». Если команда Add Shape Hints (Добавить идентификатор) недоступна, то предварительно следует выполнить команду View Show Shape Hints (Вид Показать идентификаторы формы).

6. Переместим идентификатор «а» на левый край окружности и повторим команду Add Shape Hints (Добавить идентификатор). Новый идентификатор «6» переместим на правый край окружности (рис. 4.28).

7. Выделим конечный кадр и в нем разместим идентификаторы в обратном порядке. Если они размещены точно на окружности, то их цвет изменится на зеленый. Цвет соответствующих идентификаторов в первом кадре станет желтым (рис. 4.29).

8. Нажатие клавиши Enter или выбор команды Control Play (Управление Воспроизвести) запускает просмотр созданной анимации. Теперь круг будет не только менять цвет, но и вращаться относительно вертикальной оси.

9. Команда File Save (Файл Сохранить) позволяет сохранить файл анимации с расширением FLA для дальнейшей работы над ней.

Рис. 4.28. Размещение идентификаторов формы в первом кадре

Рис. 4.29. Размещение идентификаторов формы в конечном кадре

Упражнение 4.4. Создание последовательности кадров для пошаговой анимации

1. Щелчком по кнопке New (Создать) либо выбором команды File New (Файл Создать) создадим новый фильм. Для отображения на экране временной диаграммы выполняем команду View Timeline (Вид Ось времени).

2. В окне Timeline (Ось времени) выделяем слой и кадр, с которого начнется анимация. Если кадр не является ключевым, то выполняем команду Insert Keyframe (Вставка Ключевой кадр).

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

4. Щелчком правой кнопки мыши по следующему кадру этого же слоя открываем контекстное меню и выполняем команду Insert Keyframe (Вставить ключевой кадр). Таким образом, в последовательность добавляется новый ключевой кадр с таким же, как и в первом кадре, содержанием.

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

6. Повторяем шаги 4 и 5 до тех пор, пока не будет сформировано необходимое превращение. Воспроизведение анимации с помощью клавиши Enter позволяет контролировать работу в любой момент.
   7. Готовый фильм сохраняется по команде File Export Movie (Файл Экспорт фильма), что позволяет создать файл с расширением SWF, предназначенный для воспроизведения с помощью Flash-проигрывателя, но не подлежащий дальнейшему редактированию.

Упражнение 4.5. Присоединение звукового файла к анимации

1. При открытом файле фильма Macromedia Flash вставим новый слой командой Insert Layer (Вставка Слой).

2. По команде File Import (Файл Импорт) открываем окно задания местонахождения файла и выбираем нужный звуковой файл. При необходимости импортировать несколько файлов последовательно повторяем эти действия. Все импортированные файлы будут помещены в библиотеку.

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

4. С помощью кнопки Edit (Правка) вызовите окно правки звука Edit Envelope (Правка звука), где задайте эффект или уровни громкости, проверяя характер звучания с помощью кнопки.воспроизведения (рис. 4.19), и щелчком по кнопке ОК закройте окно.

Упражнение 4.6. Присоединение нескольких звуковых файлов

1. Вставляем новый слой по команде Insert Layer (Вставка Слой), выделяем кадр, с которого должен начаться звук, и выполняем команду Insert Keyframe (Вставка Ключевой кадр). При выделенном ключевом кадре вызываем окно его свойств командой Modify Frame (Изменить Кадр).

2. На панели Sound (Звук) в одноименном раскрывающемся списке выбираем один из импортированных файлов. Редактируем звук с помощью инструментов Macromedia Flash и назначаем эффекты, проверяя характер звучания с помощью кнопки воспроизведения. Щелчком по кнопке О К закрываем окно.

3. Результат одновременного воспроизведения звука проверяем по команде Control Test Movie (Управление Проверить фильм).

4. Если какой-либо из звуков должен иметь собственные параметры экспорта, то по команде Window Library (Окно Библиотека) вызываем библиотеку, в которой перечислены импортированные звуки, и, выделив нужный звук щелчком правой кнопки, выбираем команду Properties (Свойства). В окне свойств звука задаем требуемые параметры компрессии.

5. При экспорте фильма имеется возможность создать отдельный звуковой файл в формате WAV, объединяющий все звуки фильма. Для этого по команде File Export Movie (Файл Экспорт фильма) открываем окно задания имени и типа файла и в раскрывающемся списке File Type (Тип файла) выбираем WAV.

Рис. 4.23. Определение параметров экспорта отдельного звукового файла

Для каждого звукового файла можно также задать свои параметры компрессии в зависимости от его качества и требуемого размера будущего файла фильма Macromedia Flash. Для этого в диалоговом окне Library (Библиотека) следует выделить нужный звук и щелчком на кнопке Properties (Свойства) открыть окно Sound Properties (Свойства звука). В этом окне раскрывающийся список Compression (Сжатие) содержит следующие варианты (рис. 4.23):

• Default (По умолчанию) — используются параметры по умолчанию, заданные в окне Publish Settings (Параметры публикации);

• ADPCM — применяется для экспорта коротких звуков-событий, устанавливая параметры сжатия для 16-разрядного звука;

• МРЗ — применяется для экспорта длительных потоковых звуков, устанавливая параметры сжатия МРЗ;

• RAW — экспорт звука без сжатия.

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

• флажок Convert Stereo to Mono (Конвертировать стерео к моно) позволяет преобразовать стереозвук в монофонический;

• раскрывающийся список Sample Rate (Частота дискретизации) позволяет выбрать полосу частот для звуков экспортируемого файла (5 кГц — речь, 11 кГц — короткие звуки, 22 кГц — для Web-сайтов, 44 кГц — качество компакт-диска), но не выше полосы оригинала;

• раскрывающийся список ADPCM Bits позволяет выбрать число битов, используемое в кодировании ADPCM (от 2 до 5);

• раскрывающийся список Bit Rate позволяет выбрать максимальную скорость передачи звуковой информации в битах, выполняемую при кодировании МРЗ (рекомендуется 16 Кбит/с и выше);

• раскрывающийся список Quality (Качество) позволяет задать один из трех вариантов: Fast (Быстрый), Medium (Средний), Best (Наилучший). Первый пригоден для публикации на Web-сайте, остальные для публикации фильма на локальном диске или компакт-диске).

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

Рис. 4.18. Пример покадровой анимации с использованием рисунков

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

Инструкция по созданию этого баннера.

1.  Сначала надо выбрать размеры сцены 100х100 пикселей.
 

для этого в меню свойства выбрать размер – 100 на 100 (вместо 640 на 290)

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

  3.  Правой кнопкой мыши вызовем контекстное меню, выберем "преобразовать в символ...",далее выберем "кнопка", назовем "1".

4.  Правой кнопкой мыши вызовем контекстное меню, выберем "Редактировать".

5. На монтажном столе появятся кнопки: вверх, над, вниз, нажатие. Чтобы они стали активными , надо нажать F6 три раза.

6. Щелкнем по кнопке "над", изменим цвет заливки и сделаем надпись.

7. Щелкнем по кнопке "вниз", изменим цвет заливки и сделаем надпись.

8. Вернемся на сцену 1.

20. Теперь посмотрим что получилось. Управление - Проверить ролик.

21.  Добавьте гиперссылку и баннер готов. 

Инструкция по созданию этого банера.

1.  Сначала надо выбрать размеры сцены 100х100 пикселей.

 

для этого в меню свойства выбрать размер – 100 на 100 (вместо 640 на 290)

2.   Вставим фотографию для этого выберем в горизонтальном меню Файл – Открыть (выбери фотографию), как правило фото большое, измените размеры (свойства Битмап 100 «enter», 100 «enter»). Если размеры не подходят выберите инструмент трансформация и задайте необходимые размеры.

  3.  Сделайте надпись, выберите инструмент надпись

  4. Настройте свойства текста: 38 - Courier New - желтый - полужирный.  

5.   На монтажном столе под цифрой 25 вставим ключевой кадр. Для этого  щелкнем левой кнопкой мыши под цифрой 25, т.е. поставим маркер, далее выберем Вставить-Ключевой кадр (или F6)

6.  Вставим фотографию для этого выберем в горизонтальном меню Файл – Открыть (выбери фотографию), как правило фото большое, измените размеры (свойства Битмап 100 «enter», 100 «enter»). Если размеры не подходят выберите инструмент трансформация и задайте необходимые размеры.

 

7. Теперь создадим новый слой, для этого на монтажном столе нажмем

добавиться слой 2.

8. Теперь закроем слой 1 (делать это не обязательно, но очень полезно), для этого щелкнем по белой точке под "глазом" и "замочком".

9. Далее работаем со слоем2 (можно переименовать). Рисуем стрелку. Используем трансформацию , чтобы выполнить наклон.

10. На монтажном столе под цифрой 25 вставим ключевой кадр. Для этого  щелкнем левой кнопкой мыши под цифрой 25, т.е. поставим маркер, далее выберем Вставить-Ключевой кадр (или F6).

11. Теперь поставим маркер в 1 кадр, и выберем в свойствах кадра Пара - Motion. Далее маркер в 25 кадр и переместим стрелку (выезд стрелки).

12. Если все верно, то получим похожую картинку.

13. Если допустили ошибку,  то результат таков: 

Еще раз проверьте слои и свойства кадра.

14. На монтажном столе под цифрой 50 вставим ключевой кадр. Для этого  щелкнем левой кнопкой мыши под цифрой 50, т.е. поставим маркер, далее выберем Вставить-Ключевой кадр (или F6).

15. Теперь поставим маркер в 1 кадр, и выберем в свойствах кадра Пара - Motion. Далее маркер в 50 кадр и переместим стрелку (возврат стрелки).

16. Если все верно, то получим похожую картинку.

17. Если допустили ошибку,  то результат таков: 

Еще раз проверьте слои и свойства кадра.

18. Теперь посмотрим что получилось. Управление - Проверить ролик.

 

1. Добавьте гиперссылку и баннер готов.  

Motion анимация для текста.

Инструкция по созданию этого баннера.

1.  Сначала надо выбрать размеры сцены 648х60 пикселей.
 

для этого в меню свойства выбрать размер – 648 на 60 (вместо 640 на 290)

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

  3.  Сделайте надпись, выберите инструмент карандаш и нарисуйте слово БАННЕР

  4. Внутри выполните заливку круговым градиентом, цвет зелёно-голубой

для этого измените Gradient pointers на голубой, а Gradient defition bar на зеленый.

5. Теперь создадим новый слой, для этого на монтажном столе нажмем

добавиться слой 2.

6. Теперь закроем слой 1 (делать это не обязательно, но очень полезно), для этого щелкнем по белой точке под "глазом" и "замочком".

 

7. Далее работаем со слоем2 (можно переименовать). Делаем надпись. 

8. На монтажном столе под цифрой 25 вставим ключевой кадр. Для этого  щелкнем левой кнопкой  мыши под цифрой 25, т.е. поставим маркер, далее выберем Вставить-Ключевой кадр (или F6).

9. Теперь поставим маркер в 1 кадр, и выберем в свойствах кадра Пара - Motion. Далее маркер в 25 кадр и переместим надпись Уроки.

10. Если все верно, то получим похожую картинку.

11. Если допустили ошибку,  то результат таков: 

Еще раз проверьте слои и свойства кадра.

12. На монтажном столе под цифрой 50 вставим ключевой кадр. Для этого  щелкнем левой кнопкой мыши под цифрой 50, т.е. поставим маркер, далее выберем Вставить-Ключевой кадр (или F6).

13. Теперь поставим маркер в 1 кадр, и выберем в свойствах кадра Пара - Motion. Далее маркер в 50 кадр и переместим логотип Flаsh. добавив при этом вращение CW.

14. Если все верно, то получим похожую картинку.

15. Если допустили ошибку,  то результат таков: 

Еще раз проверьте слои и свойства кадра.

16. Теперь посмотрим что получилось. Управление - Проверить ролик.

 

17.  Добавьте гиперссылку и баннер готов.

Покадровая анимация.

1.     В меню инструментов выбираем карандаш.

2.     Рисуем нужный нам рисунок.

3.     В монтажном столе под цифрой 5 вставим ключевой кадр. Для этого  щелкнем левой кнопкой мыши под цифрой 5, т.е. поставим маркер, далее выберем Вставить-Ключевой кадр (или F6).

4.     Теперь поставим маркер в 1 кадр, и выберем в свойствах кадра Пара - Motion.

5.     Если все верно, то получим похожую картинку.

6.     Далее в инструментах выбираем чёрную стрелочку и наводим на края лепестков до появления рядом со стрелочкой дуги.

7.     Нажимаем правой клавишей мыши и оттягиваем чуть-чуть края лепестков.

8.     потом делаем тоже, что в 3 и 4 пунктах, только вставляем не в 5 ,а в 10 цифру. И свойства меняем не в 1, а в 5 кадре.

9.     Снова немного растягиваем края. Теперь с помощью ластика стираем угловую макушку и подрисовываем края лепестков.

10. В монтажном столе под цифрой 15 вставим ключевой кадр.

11. Теперь поставим маркер в 10 кадр, и выберем в свойствах кадра Пара - Motion.

13. В монтажном столе под цифрой 20 вставим ключевой кадр.

14. Теперь поставим маркер в 15 кадр, и выберем в свойствах кадра Пара - Motion.

15. Снова удаляем макушку с помощью ластика. Растягиваем края известным нам способом.

16. Делаем листочки немного шире (концы) и подрисовываем недостающие по замыслу листики с помощью карандаша.

17. В монтажном столе под цифрой 25 вставим ключевой кадр.

18. Теперь поставим маркер в 20 кадр, и выберем в свойствах кадра Пара - Motion.

19. С помощью карандаша и ластика загибаем листики на одном уровне.

20. В монтажном столе под цифрой 30 вставим ключевой кадр.

21. Теперь поставим маркер в 25 кадр, и выберем в свойствах кадра Пара - Motion.

22. Опять расширяем края. Стираем макушку. Теперь «отделяем» листики друг от друга с помощью карандаша. И рисуем тычинки.

23. В монтажном столе под цифрой 35 вставим ключевой кадр.

24. Теперь поставим маркер в 30 кадр, и выберем в свойствах кадра Пара - Motion.

25. Стираем макушку. Увеличиваем и загибаем листочки. Карандашом.

26. В монтажном столе под цифрой 40 вставим ключевой кадр.

27. Теперь поставим маркер в 35кадр, и выберем в свойствах кадра Пара - Motion.

28. Стираем все, что нарисовали в прошлом кадре и делаем листики более раскрытыми и загнутыми (карандашом).

29. В монтажном столе под цифрой 45 вставим ключевой кадр.

30. Теперь поставим маркер в 40кадр, и выберем в свойствах кадра Пара - Motion.

31. Стираем боковые листы до самой чашечки. И делаем их более загнутыми.

32. В монтажном столе под цифрой 50 вставим ключевой кадр.

33. Теперь поставим маркер в 45кадр, и выберем в свойствах кадра Пара - Motion.

34. Стираем боковые листы полностью. Рисуем вместо них более загнутые и широкие листья.

35. В монтажном столе под цифрой 55 вставим ключевой кадр.

36. Теперь поставим маркер в 50кадр, и выберем в свойствах кадра Пара - Motion.

37. В инструментах выбираем «свободная трансформация», обводим чашечку цветка. Наводим на угол цветка до появления круговой стрелки. Нажимаем правой клавишей мыши и наклоняем цветок влево.

38. В монтажном столе под цифрой 60 вставим ключевой кадр.

39. Теперь поставим маркер в 55кадр, и выберем в свойствах кадра Пара - Motion

40. Рисуем насекомое с помощью карандаша.

41. В монтажном столе под цифрой 60 вставим ключевой кадр.

42. Теперь поставим маркер в 55кадр, и выберем в свойствах кадра Пара – Motion

43. Нажимаем левой клавишей мыши на букашку и выбираем «выделить всё». Потом, не сдвигая стрелки, переносим её по направлению к цветку.

44. В монтажном столе под цифрой 65 вставим ключевой кадр.

45. Теперь поставим маркер в 60кадр, и выберем в свойствах кадра Пара - Motion

46. Снова выделяем букашку и переносим её на цветок. В инструментах выбераем заливку .В цветовом наборе выбираем понравившийся цвет 

   

47. В монтажном столе под цифрой 70 вставим ключевой кадр.

48. Теперь поставим маркер в 65кадр, и выберем в свойствах кадра Пара - Motion

49. Теперь посмотрим что получилось. Управление - Проверить ролик.

50.  Добавьте гиперссылку и баннер готов.  

Shape анимация.

Инструкция по созданию этого баннера.

1.  Сначала надо выбрать размеры сцены 100х100 пикселей.

для этого в меню свойства выбрать размер – 100 на 100 (вместо 640 на 290)

2.   Нарисуем прямоугольник, 100 на 100 пикселей, выберем цвет заливки круговой серый градиент.

  3.  На монтажном столе под цифрой 25 вставим ключевой кадр. Для этого  щелкнем лево кнопкой мыши под цифрой 25, т.е. поставим маркер, далее выберем Вставить-Ключевой кадр (или F6)

  4. В 1 кадре выберем свойства кадра Пара - Shape. Если все правильно, то появиться стрелка.

5.  В 25 кадре зальем квадрат линейным сине - желтым градиентом.

6. На монтажном столе под цифрой 50 вставим ключевой кадр. Для этого  щелкнем лево кнопкой мыши под цифрой 50, т.е. поставим маркер, далее выберем Вставить-Ключевой кадр (или F6)

  7. В 25 кадре выберем свойства кадра Пара - Shape. Если все правильно, то появиться стрелка.

8.  В 50 кадре выберем цвет заливки круговой синий градиент.

9. На монтажном столе под цифрой 75 вставим ключевой кадр. Для этого  щелкнем лево кнопкой мыши под цифрой 75, т.е. поставим маркер, далее выберем Вставить-Ключевой кадр (или F6)

10. В 50 кадре выберем свойства кадра Пара - Shape. Если все правильно, то появиться стрелка.

11. В 75 кадре зальем квадрат линейным градиентом.

 

12. Теперь создадим новый слой, для этого на монтажном столе нажмем

добавиться слой 2.

13. Теперь закроем слой 1 (делать это не обязательно, но очень полезно), для этого щелкнем по белой точке под "глазом" и "замочком".

14. Далее работаем со слоем 2 (можно переименовать).

15. Делаем надпись. Используем инструмент кисть (цвет заливки красный круговой градиент)

16. Теперь посмотрим что получилось. Управление - Проверить ролик.

 

17.  Добавьте гиперссылку и баннер готов.  

Работа с файлами .gif 

Инструкция по созданию этого банера.

1.  Сначала надо выбрать размеры сцены 100х100 пикселей.
 

для этого в меню свойства выбрать размер – 100 на 100 (вместо 640 на 290)

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

3. Для того чтобы в добавить в библиотеку новый ролик, выбираем Файл - Импорт в библиотеку... (далее указываем расположение нашего ролика)

4. Открываем библиотеку F11 и находим файл с расширением .gif , если это анимированный ролик, то рядом с изображением появится значок (можно просмотреть ролик)

5. Теперь простым перетаскиванием помещаем наш ролик на сцену, для того чтобы он "ожил" надо по нему дважды щелкнуть мышкой.

 

6. Теперь создадим новый слой, для этого на монтажном столе нажмем

добавиться слой 2.

7. Теперь закроем слой 1 (делать это не обязательно, но очень полезно), для этого щелкнем по белой точке под "глазом" и "замочком".

8. Далее работаем со слоем 2 (можно переименовать).

9. Делаем надпись. Используем инструмент кисть (цвет заливки серый круговой градиент)

10. Теперь посмотрим что получилось. Управление - Проверить ролик.

 

11.  Добавьте гиперссылку и баннер готов.  

Создание текстовой ссылки.

baner-flash.narod.ru - Баннер бесплатно.

2 способа создания ссылки:

1. В HTML - коде пишите подобную фразу:

baner-flash.narod.ru -  Баннер бесплатно.

здесь     - тэги,

"http://baner-flash.narod.ru"  - адрес вашего сайта

baner-flash.narod.ru -  Баннер бесплатно.  - текст ссылки

2. Если вы создаете сайт посредством FrontPage или Macromedia Dreamweaver, то можно упростить эту процедуру еще (хотя куда проще). Создайте текстовую гиперссылку на свой сайт в привычном виде, выделите, перейдите в HTML - код , скопируйте выделенный код.

Слой - маска.

Инструкция по созданию этого баннера.

1.  Сначала надо выбрать размеры сцены 100х100 пикселей.

для этого в меню свойства выбрать размер – 100 на 100 (вместо 640 на 290)

2.   Нарисуем прямоугольник,  выберем тип заливки Bitmap, выберем любой рисунок, например:

  3.  На монтажном столе под цифрой 25 вставим ключевой кадр. Для этого  щелкнем левой кнопкой мыши под цифрой 25, т.е. поставим маркер, далее выберем Вставить-Ключевой кадр (или F6)

  4. Теперь поставим маркер в 1 кадр, и выберем в свойствах кадра Пара - Motion. Далее маркер в 25 кадр и переместим прямоугольник вверх.

Если все верно, то получим похожую картинку.

5. Если допустили ошибку,  то результат таков: 

Еще раз проверьте слои и свойства кадра.

 6. Теперь создадим новый слой, для этого на монтажном столе нажмем

добавиться слой 2.

7. Теперь закроем слой 1 (делать это не обязательно, но очень полезно), для этого щелкнем по белой точке под "глазом" и "замочком".

8. Далее работаем со слоем 2 (можно переименовать).

9. Делаем надпись выберите инструмент надпись . 

10. Делаем этот слой маской. Для этого правой кнопкой мыши щелкнем по слою 2, выберем свойство-маска.

 11.Теперь создадим новый слой, для этого на монтажном столе нажмем

добавиться слой 3.

12. Теперь закроем слой 2 (делать это не обязательно, но очень полезно), для этого щелкнем по белой точке под "глазом" и "замочком".

13. Далее работаем со слоем 3 (можно переименовать).

14. Делаем надпись выберите инструмент надпись . 

15. Теперь посмотрим что получилось. Управление - Проверить ролик.

16.  Добавьте гиперссылку и баннер готов.

Работа со звуком из основной библиотеки.

Инструкция по созданию этого баннера.

1.  Сначала надо выбрать размеры сцены 468х60 пикселей.
 

для этого в меню свойства выбрать размер – 468 на 60 (вместо 640 на 290)

2.  Затем выберете цвет фона вашего баннера.

3.  Выбираем инструмент прямоугольник

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

5. Настройте заливку на ваше усмотрение, в случае кругового градиента имеет значение место щелчка: в этом месте внутри контура располагается центр градиентной заливки

 6. Делаем надпись выберите инструмент надпись . 

7. На монтажном столе под цифрой 25 вставим ключевой кадр. Для этого  щелкнем левой кнопкой мыши под цифрой 25, т.е. поставим маркер, далее выберем Вставить-Ключевой кадр (или F6)

   8. Теперь поставим маркер в 1 кадр, и выберем в свойствах кадра Пара - Motion. Далее маркер в 25 кадр и переместим прямоугольник вверх.

 

9. Для того чтобы в добавить в библиотеку новый ролик, выбираем Файл - Импорт в библиотеку... (далее указываем расположение нашего ролика)

10. Открываем библиотеку F11 и находим файл с расширением .gif , если это анимированный ролик, то рядом с изображением появится значок (можно просмотреть ролик)

11. Теперь простым перетаскиванием помещаем наш ролик на сцену, для того чтобы он "ожил" надо по нему дважды щелкнуть мышкой.

12. Теперь создадим новый слой, для этого на монтажном столе нажмем

добавиться слой 2.

13. Теперь закроем слой 1 (делать это не обязательно, но очень полезно), для этого щелкнем по белой точке под "глазом" и "замочком".

14. Далее работаем со слоем 2 (можно переименовать).

15. На монтажном столе под цифрой 25 вставим ключевой кадр. Для этого  щелкнем левой кнопкой мыши под цифрой 25, т.е. поставим маркер, далее выберем Вставить-Ключевой кадр (или F6)

  16. Теперь поставим маркер в 1 кадр, и выберем в свойствах кадра Пара - Motion. Далее маркер в 25 кадр и переместим прямоугольник вверх.

17. Открываем основные библиотеки, sound и находим звук который нам нужен

18. Теперь простым перетаскиванием помещаем наш звук на сцену.

19. Если ваш звук "короткий", то надо выделить кадры и в свойствах звука указать количество повторов.

20. Теперь посмотрим что получилось. Управление - Проверить ролик.

21.  Добавьте гиперссылку и баннер готов. 

Работа с импортированным звуком.

Инструкция по созданию этого баннера.

1.  Сначала надо выбрать размеры сцены 468х60 пикселей.
    

для этого в меню свойства выбрать размер – 468 на 60 (вместо 640 на 290)

 2. Делаем надпись выберите инструмент надпись . 

3. На монтажном столе под цифрой 25 вставим ключевой кадр. Для этого  щелкнем левой кнопкой мыши под цифрой 25, т.е. поставим маркер, далее выберем Вставить-Ключевой кадр (или F6)

  4. Теперь поставим маркер в 1 кадр, и выберем в свойствах кадра Пара - Motion. Далее маркер в 25 кадр и переместим прямоугольник вверх.

 

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

6. Открываем библиотеку F11 и находим файл с расширением .gif , если это анимированный ролик, то рядом с изображением появится значок (можно просмотреть ролик)

7. Теперь простым перетаскиванием помещаем наш ролик на сцену, для того чтобы он "ожил" надо по нему дважды щелкнуть мышкой.

8. Теперь создадим новый слой, для этого на монтажном столе нажмем

добавиться слой 2.

9. Теперь закроем слой 1 (делать это не обязательно, но очень полезно), для этого щелкнем по белой точке под "глазом" и "замочком".

10. Далее работаем со слоем 2 (можно переименовать).

11. На монтажном столе под цифрой 25 вставим ключевой кадр. Для этого  щелкнем левой кнопкой мыши под цифрой 25, т.е. поставим маркер, далее выберем Вставить-Ключевой кадр (или F6)

  12. Теперь поставим маркер в 1 кадр, и выберем в свойствах кадра Пара - Motion. Далее маркер в 25 кадр и переместим прямоугольник вверх.

13. Для того чтобы в добавить в библиотеку новый звук, выбираем Файл - Импорт в библиотеку... (далее указываем расположение нашего звука(лучше всего mp3, или   Midi)) 

14. Теперь простым перетаскиванием помещаем наш звук на сцену.

15. Если ваш звук "короткий", то надо выделить кадры и в свойствах звука указать количество повторов.
Если звук нужного размера и вы не хотите ,чтобы он повторялся в свойствах ставим Синхро: start, цикл:0 раз.

16. Теперь посмотрим что получилось. Управление - Проверить ролик.

17.  Добавьте гиперссылку и баннер готов. 

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

Инструкция по созданию этого баннера.

1.  Сначала надо выбрать размеры сцены 100х100 пикселей.
 

для этого в меню свойства выбрать размер – 100 на 100 (вместо 640 на 290)

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

  3.  Правой кнопкой мыши вызовем контекстное меню, выберем "преобразовать в символ...",далее выберем "кнопка", назовем "1".

4.  Правой кнопкой мыши вызовем контекстное меню, выберем "Редактировать".

5. На монтажном столе появятся кнопки: вверх, над, вниз, нажатие. Чтобы они стали активными , надо нажать F6 три раза.

6. Щелкнем по кнопке "над", изменим цвет заливки и сделаем надпись.

7. Щелкнем по кнопке "вниз", изменим цвет заливки и сделаем надпись.

8. Вернемся на сцену 1.

20. Теперь посмотрим что получилось. Управление - Проверить ролик.

21.  Добавьте гиперссылку и баннер готов. 

ПРОГРАММА ЭЛЕКТИВНОГО КУРСА

«ОСНОВЫ АНИМАЦИИ В MACROMEDIA FLASH»

муниципального общеобразовательного
учреждения «Средняя общеобразовательная школа № 6
с углубленным изучением экономики и английского языка»

на 2007/2008 учебный год

Великий Новгород

2007

Пояснительная записка

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

Курс объемом в 17 учебных часов.

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

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

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

Цель:

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

сформировать понятие возможностей создания и хранения векторного изображения во Flash;

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

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

Задачи:

формирование представления об основных возможностях создания, редактирования и обработки изображений в векторных редакторах;

развитие алгоритмического мышления на этапе разработки структуры изображения;

развитие познавательного интереса к предмету «Информатика и ИКТ»;

формирование информационной культуры учащихся, их мировоззрения;

Формы и методы обучения:

Теоретическая часть уроков проводится учителем в классе.

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

Дистанционная часть уроков в сети интернет размещены пошаговые инструкции по созданию анимации Macromedia Flash

После изучения курса учащиеся должны

Знать:

• различие между векторной и растровой графикой.

• графические возможности программы Macromedia Flash, основные инструменты и их назначение.

Уметь

создавать изображение в среде Macromedia Flash;

выбирать и применять нужные инструменты;

сохранять готовое изображение;

редактировать ранее сохраненный рисунок;

применять эффекты анимации.

презентовать готовый программный продукт.

Поурочное планирование курса

"ОСНОВЫ АНИМАЦИИ В MACROMEDIA FLASH"

1. Введение. Интерфейс программы. Основы создания рисунков в Macromedia Flash MX .

2. Заливка, Преобразование заливки. Импорт изображений.

3. Свободная трансформация.

4. Текст. Редактирование текста.

5. Покадровая анимация.

6. Общие принципы работы со слоями.

7. Shape-анимация.

8. Motion-анимация.

9. Анимированный текст.

10. Движение по пути. Слой Guide (направляющий).

11. Слои-маски.

12. Озвучивание анимации.

13. Запись и коррекция звукового фрагмента.

14. Работа с кнопками. Кадры кнопки.

15. Создание собственного Flash-ролика

16. Озвучивание Flash-ролика

17. Защита творческих работ

Литература

1. Андерсон Э. Macromedia Flash MX 2004 (визуальный курс), М.: НТ Пресс, 2005

2. Вовк Е.Т. Информатика: уроки Flash, М.: КУДИЦ-ОБРАЗ, 2005

3. Переверзев С.И. Анимация в Macromedia Flash MX, М.: БИНОМ. Лаборатория знаний, 2005

4. Черкасский В.Т. Эффективная анимация во Flash, М.: КУДИЦ-ОБРАЗ, 2002

Интернет ресурсы:

http://www.banner-flashMX.narod.ru/

http://www.icomtec.ru/article_info.php?tPath=191_185&articles_id=447

урс. Основы создания анимации в Macromedia Flash MX
Модуль V. Анимированная кнопка. Сцены. Тестирование загрузки ролика

Экспресс-план модуля:

• Работа с кнопками. Кадры кнопки.

• Анимированная кнопка.

• «Поющая» кнопка.

• Использование сцен.

• Оптимизация и тестирование роликов.

Работа с кнопками. Кадры кнопки

Кнопка представляет собой особый тип символа. Она характеризуется двумя специфическими свойствами. Во-первых, кнопка может отображаться по-разному в зависимости от того, в каком из возможных состояний она находится. Во-вторых, пользователь может интерактивно взаимодействовать с кнопкой, используя мышь. Автор web-страницы определяет, на какие именно действия пользователя надо реагировать и что именно следует делать. Чтобы обеспечить возможность интерактивного использования кнопки, надо создать экземпляр кнопки в пределах сцены и описать действия, связанные с данным экземпляром — запрограммировать кнопку. Напомню, что программированию будет посвящён весь третий курс нашей школы.
Описание вида и свойств кнопки осуществляется с использованием временной шкалы, которая при работе с кнопкой приобретает специфический вид.
Начальный этап создания кнопки такой же, как при создании любого другого символа. Используйте команду Insert New Symbol. В диалоговом окне Symbol Properties задайте имя создаваемого символа и установите для него тип Button (кнопка). Обратите внимание на то, что вид временной шкалы изменился. Она содержит четыре кадра, которые не нумерованы, а имеют специфические имена и специфическое назначение.

• Первый кадр, Up (свободна), представляет собой изображение кнопки в свободном состоянии, когда указатель мыши не наведён на неё.

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

• Третий кадр, Down (нажата), соответствует ситуации, когда указатель мыши наведён на кнопку и нажата кнопка мыши (заметим, что это не обязательно означает попытку щёлкнуть на кнопке, — как правило, экранные элементы управления срабатывают не по нажатию, а по отпусканию кнопки мыши).

• Наконец, четвёртый кадр Hit (область наведения), показывает область, которая рассматривается роликом как область кнопки. Этот кадр сам по себе никогда не отображается, но именно он определяет, какой из первых трёх кадров должен отображаться в каждый из моментов. В частности, необходимо отметить, что область изображения кнопки в разных кадрах не обязательно одинакова.

Для того чтобы вам легче было разобраться со «строением» кнопки, можно воспользоваться библиотекой Flash — Window Common Libraries Buttons. На рисунке представлены: палитра Timeline нового символа типа Button на этапе его создания, а также палитра Timeline кнопки из библиотеки Flash — Oval buttons green. Обратите внимание, что при создании этой кнопки было использовано несколько слоёв. В ходе работы над кнопкой вы можете использовать все без исключения инструменты палитры Tools, помимо этого в кадр кнопки можно поместить:

• графический символ,

• анимированный символ типа Movie Clip, который может «оживить» кнопку — заставить её реагировать на наведение мыши,

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

Анимированная кнопка

Перед вами анимированная кнопка — «фотография под вуалью». Для того чтобы полюбоваться репродукцией, необходимо навести на неё курсор мыши.
Импортируем в ролик заранее подготовленную в Adobe Photoshop иллюстрацию — в этом ролике репродукция картины Огюста Ренуара. Размеры сцены вашего ролика должны соответствовать размеру иллюстрации. Выровняйте иллюстрацию по центру сцены, используя палитру Align. Конвертируйте её в символ типа Graphic, используя команду меню Insert Convert to Symbol. Создайте новый символ типа Movie Clip в котором вы будете имитировать эффект вуали, а также исчезновение вуали в виде прямоугольника отрывающегося наружу. Обратите внимание на палитру Timeline этого символа.
Слой renuar. Hа него поместите экземпляр символа типа Graphic c репродукцией картины. Растяните слой до 40 кадра, используя команду Insert Frame.
Слой mask. В первом кадре этого слоя с помощью инструмента Rectangle нарисуйте квадрат со стороной в 1 пиксель, центрируйте квадрат относительно сцены. 40 кадр слоя сделайте ключевым, размер квадрата в этом кадре необходимо увеличить до размеров сцены (иными словами до размеров иллюстрации). Вернитесь к первому кадру и установите в палитре Properties тип анимации Shape. Превратите этот слой в маску.
Слой image. На этот слой поместите экземпляр символа типа Graphic. И в палитре Properties установите для него Alpha 12%. Растяните слой до 40 кадра.

Вернитесь на сцену и обратитесь к библиотеке вашего ролика. Создайте дубликат для символа типа Movie Clip. Используя команду Edit для дубликата, попадаем внутрь символа. Удерживая клавишу Shift, выделяем все кадры на всех слоях и обращаемся к команде Reverse Frames.
И ещё одна маленькая хитрость, никак не могу удержаться от программирования. Обратите внимание на 40 кадр слоя mask, на нём вы видите буковку a, которая говорит о том, что этому кадру прописана акция. Встаньте на этот кадр и обратитесь к палитре Actions (действия). Пропишите этому кадру акцию:
       stop ();

В данном случае мы останавливаем анимацию на последнем кадре.
Туже операцию следует выполнить и в первом символе типа Movie Clip.
Теперь, когда все элементы необходимые для создания кнопки готовы, обратимся к команде Insert New Symbol и создадим новый символ типа Button.
В первый кадр кнопки Up поместите, используя библиотеку ролика экземпляр символа Movie Clip №1. Во второй кадр Over кнопки поместите экземпляр символа Movie Clip №2. В третий кадр Down поместите экземпляр графического символа с иллюстрацией. В кадре Hit поместите прямоугольник, размер которого соответствует размеру сцены.
После того как работа над созданием каждого кадра кнопки будет завершена, вернитесь на сцену. Кнопка, как и любой другой символ, помещается в библиотеку, откуда в любой момент можно добавить в ролик её экземпляр (или несколько экземпляров). Обратите внимание на библиотеку ролика. В ней 5 символов. Вынесите из библиотеки на сцену кнопку, выровняйте её относительно сцены, обратившись к палитре Align.
Проверить работу кнопок, находясь в программе Macromedia Flash не слишком просто. Анимация кнопок в ходе редактирования не работает. По умолчанию, щелчок на кнопке выбирает её так же, как и любой другой объект. Однако у нас есть возможность быстрой проверки того, как работают кнопки. Для этого надо включить их с помощью команды Control Enable Buttons (управление включить кнопки). Если кнопки включены, то данная команда помечена в меню галочкой. Правда, при выборе этого режима несколько затрудняются обычные операции с кнопками, так что нормальное их состояние при редактировании ролика — отключённое.
Протестируйте ваш ролик, если это необходимо произведите его коррекцию.

«Поющая» кнопка

Фотография павлина в этом ролике представляет собой «поющую» кнопку. Если вы щёлкните по ней мышкой, то сможете прослушать короткий звуковой фрагмент — брачную песню павлина.
Обратите внимание на палитры Timeline сцены и кнопки. На сцене всего один кадр и два слоя.
Слой bird. Здесь расположен текстовой блок и «поющая» кнопка с фотографией павлина.
Слой ramka. На нём расположена рамка, обрамляющая окошко ролика.
Если заглянуть внутрь кнопки, то мы также увидим два слоя.

Слой photo. В первый кадр кнопки этого слоя была помещена фотография павлина — импортированная растровая графика (jpg-файл), которую я предварительно подготовила для Flash-ролика в Adobe Photoshop (изменила размер фотографии и оптимизировала графику). Затем, используя клавишу F6, остальные кадры кнопки сделала ключевыми.
Слой sound. Кадр Down был сделан ключевым и в него помещён звуковой фрагмент — импортированный звук (mp3-файл), который также как и импортированная графика предварительно прошёл несколько этапов подготовки: запись (wav-формат), обработка в программе Steinberg Wave Lab, конвертирование в этой же программе из формата wav в формат mp3.
Проанализируем результаты коррекционной работы:

	Графика	Звук
Исходные данные:	jpg 627x420x24b 63 KB	wav 7,20 с 160 KB
Результаты коррекции:	jpg 200x132x24b 16 KB	mp3 5,40 с 87 KB

Несмотря на коррекционную работу размер этого flash-ролика достаточно большой — 107 KB. Поэтому для того чтобы в процессе проигрывания ролика не наблюдалось «захлёбывание» и «заикание» звука в ролик добавлена ещё одна сцена, в которой запрограммирована работа так называемого «предзагрузчика», не будем на этом этапе углубляться в программирование, однако поясним суть его работы. Пока все кадры ролика не будут загружены на ваш компьютер, в окне ролика вы будете видеть запись: «Пожалуйста, подождите, идёт загрузка…». После того, как загрузка будет завершена, вы сможете просмотреть ролик, не испытывая никакого дискомфорта.

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

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

Оптимизация и тестирование роликов

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

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

• Активное использование группировки элементов изображения.

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

• Минимальное использование специальных типов линий, например пунктира. Применение инструмента Brush, только если обойтись карандашом абсолютно невозможно.

• Оптимизация отдельных контуров (представление их в виде минимального числа линий или как стандартных фигур). Для этой цели следует применять команду Modify Curves Optimize (модифицировать кривые оптимизировать).

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

• Отказ, если это возможно, от анимации точечных изображений. Их рекомендуется использовать только в качестве фона и статических элементов.

• Отказ от применения без особой необходимости градиентных заливок. Экономное использование шрифтов и вариантов их оформления. Не следует злоупотреблять включением шрифтов в ролик. В свойствах статических текстовых полей надо указать на необходимость включения в ролик начертаний только для используемых символов.

• Максимальное использование при работе со звуком формата mp3, обеспечивающего наивысшую степень сжатия.

Определить влияние скорости загрузки на работоспособность роликов можно одновременно с тестированием ролика, на параметры которого влияют настройки, сделанные в окне свойств публикации.
После того как была дана команда Control Test Scene или Control Test Movie и выполнено переключение в окно проверки ролика, обратитесь к меню Debug (отладка). В его нижней части вы увидите список возможных значений производительности модема. Обратите внимание, что для каждого типа модема указывается не максимальная, а средняя производительность подключения к Internet. Так, для модема со скоростью 28,8 Кбит/с теоретически возможно чтение до 3,5 Кбайт за секунду, однако программа Macromedia Flash предлагает более разумную и реальную оценку в 2,3 Кбайт в секунду.
Д ля ввода персональных настроек, выберите Customize. Чтобы увидеть объём данных, загружаемый при воспроизведении каждого кадра, и оценить опасность возникновения задержек, обратитесь к меню команду View Bandwidth Profiler (вид профиль загрузки). В верхней части окна в этом случае появится графическое представление процесса загрузки. Отдельные кадры ролика представляются чередующимися светлыми и тёмными полосами. Размер полосы соответствует объёму данных, необходимому для воспроизведения данного кадра. Красная поперечная линия указывает объём данных, который в среднем загружается за время демонстрации отдельного кадра. Если полоса выходит за пределы линии, это означает, что посетителю, возможно, придётся ждать, пока загрузится соответствующий кадр.
Чтобы получить более точные сведения о конкретном кадре, приостановите воспроизведение ролика командой Control Stop (управление стоп) и щёлкните на полосе, соответствующей определенному кадру. При этом информация об указанном кадре появится на панели слева от графика.
Кроме того, у вас есть следующие возможности управления внешним видом графика.

• Если установлен флажок меню Control Show Streaming (управление состояние потока), то в ходе воспроизведения ролика в верхней строке, где указывается номер кадра, отображается заполняемый индикатор загрузки. Это позволяет более чётко отслеживать возникновение задержек при воспроизведении.

• В меню View (вид) имеются два пункта, работающие как переключатели. Если выбран пункт Streaming Graph (потоковое представление), то график описывает ход загрузки ролика параллельно с его воспроизведением. В этом случае вы увидите, какие именно кадры вызовут задержки. Если выбран пункт Frame by Frame (покадровое представление), то на графике просто указывается размер каждого кадра.

Домашнее задание

Обратимся к материалу домашней работы 1 модуля II курса. Ваша задача превратить покадровую анимацию с котёнком в «живую» кнопку, мурлыкающую при щелчке мыши. Не могу удержаться от лирики и хочу напомнить замечательные строки из стихотворения Сергея Александровича Есенина:
       Ах, как много на свете кошек,
       Нам с тобой их не счесть никогда.
       Сердцу снится душистый горошек,
       И звенит голубая звезда.

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

       Я ещё тогда был ребёнок,
       Но под бабкину песню вскок
       Он бросался, как юный тигрёнок,
       На оброненный ею клубок…
Выполненное задание представьте в виде файла в формате fla (если размер файла превышает 150 Кб, пожалуйста, упакуйте его в архив) и вышлите учителю.

Тест

В материалы теста входят вопросы, которые позволят вам проверить прочность знаний полученных в ходе работы над вторым—пятым модулем курса.
Тест создан в Macromedia Flash MX и представляет собой интерактивный flash-ролик.