ЭЛЕКТРОННАЯ ШКОЛА MACROMEDIA FLASH MX
II курс: Основы создания анимации в 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 (покадровое представление), то на графике просто указывается размер каждого кадра.

Домашнее задание: Основы создания анимации в Macromedia Flash MX

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

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

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

       Я ещё тогда был ребёнок,
       Но под бабкину песню вскок
       Он бросался, как юный тигрёнок,
       На оброненный ею клубок…

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

Тест: Основы создания анимации в Macromedia Flash MX

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

Курсовой проект: Основы создания анимации в Macromedia Flash MX

Знания, полученные в рамках изучения I и II курса электронной школы, должны быть положены в основу создания короткометражного мультфильма. В этой работе вы должны выступить в роли сценариста и режиссера, художника-мультипликатора и звукооператора. Продолжительность мультфильма не должна быть больше 1 минуты. Тематика мультфильма не определена никакими рамками, кроме морально-этических.
Курсовой проект следует представить в виде файла в формате fla. Упакуйте, пожалуйста, файл в архив и вышлите учителю.

III курс: Основы программирования в Macromedia Flash MX
§ Модуль I: Объектно-ориентированное программирование, Язык ActionScript
§ Модуль II: Ввод и вывод информации
§ Модуль III: Безусловный и условный переход
§ Модуль IV: Команда with, Программа «Правилка»
§ Модуль V: Организация циклов, Решение математических задач
§ Модуль VI: Подчиняемся курсору мыши пользователя, Игра «Весёлая кухня»
§ Модуль VII: Создание собственного курсора мыши, Игра «Старая лампа»

_statistics

---