Анимация

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

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

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

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

На временной шкале покадровая анимация выглядит следующим образом:

Рис 2. - Покадровая анимация

Достоинства:

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

Недостатки:

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

Анимация с построением промежуточных кадров (tweened motion)

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

Скорость и плавность анимации зависят от количества кадров, которые вы отводите под движение и скорости вашего Flash фильма (movie). Скорость фильма можно изменить здесь: Modify->Movie:, Ctrl+M - там параметр Frame Rate задает количество кадров в секунду. Для качественной анимации скорость должна быть не меньше 25-30 кадров в секунду.

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

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

Shape tweening

Скажем, вам нужно, чтобы квадрат плавно превратился в круг, или силуэт кролика плавно перетек в силуэт волка. В этих случаях используется shape tweening.

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

После того как у вас есть два ключевых кадра, вы делаете активным первый из них (просто переходите на него), и выбираете на панели Frame (Windows->Panels->Frame, Ctrl+F) в списке Tweening строку Shape:

Рис 3. - Shape tweening

Кадры на временной шкале должны окраситься в зеленоватый цвет и от первого кадра ко второму должна протянуться стрелочка (см. Рис. 4).

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

Рис. 4 - Анимация на основе Shape tweening

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

Немного о параметрах shape tweening. Вы, наверное, заметили, что появилась пара других параметров, когда вы выбрали shape tweening в панели Frame - Easing и Blend (см. Рис. 3). Поле Label содержит метку кадра. О метках мы поговорим в статье, посвященной анимации с помощью ActionScript.

Easing задает обратное экспоненциальное ускорение. Величина этого параметра может изменяться от - 100 до + 100. Это означает, что если вы зададите отрицательный easing, движение будет происходить с положительным ускорением, скорость будет увеличиваться (см. Рис. 5). И наоборот, если easing будет положительным, анимация будет замедляться (см Рис. 6).

Рис. 5 - Easing: -100

Рис. 6 - Easing: +100

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

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

На первом ключевом кадре (с которого начинается анимация) вы добавляете контрольную точку (Modify->Transform->Add shape hint, Ctrl+Shift+H). На сцене появится маленькая красная точка, обозначенная буквой латинского алфавита. Вы прикрепляете ее к той части изображения, которая двигается не так, как вы хотели. Затем вы переходите на второй ключевой кадр, и прикрепляете эту же точку к части, в которую должна была перейти часть на начальном кадре. Точка будет уже зеленого цвета, а на начальном кадре она станет желтой. Так вы можете отличать начальные и конечные ключевые точки, так как на одном кадре могут присутствовать и те и другие.

Удалить все точки можно с помощью Modify->Transform->Remove All Hints. Удалить же единственную точку можно, нажав на ней правую кнопку мыши, и в контекстном меню выбрав Remove Hint.

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

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

Рис. 7 - Shape tweening без использования контрольных точек

Рис. 8 - Shape tweening c использованием контрольных точек

При использовании анимации на основе изменения формы (shape tweening) могут модифицироваться следующие параметры фигуры:

форма расположение размер (любые пропорции) цвет угол поворота

Если вам нужно отключить shape tweening, в панели Frame выберите Tweening: None.

Motion Tweening

И, наконец, наиболее часто используемая техника анимации во Flash - Motion Tweening. В этом случае анимация строится на основе модификации символов, т.е. объектом анимации является символ.

Как и в анимации shape tweening, на каждый объект в один момент времени, нам нужен один слой. На этом слое должен находиться один символ, с которым и будут происходить все изменения.

Вот какие параметры символа могут модифицироваться при использовании Motion Tweening:

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

Включить motion tweening можно несколькими способами (а отключить, к сожалению, только одним). Для того, чтобы включить motion tweening, нужно сделать активным начальный кадр вашего перехода, затем, нажав правую клавишу мыши, в контекстном меню выбрать Create motion tween (это же можно сделать, выбрав Insert->Create motion tween). Универсальный способ включения/выключения motion tweening - с помощью панели Frame, выбрав Motion в поле Tweening. Там же можно контролировать параметры анимации:

Рис. 9 - Motion tweening

Easing - обратное экспоненциальное ускорение, работает абсолютно так же, как и в shape tweening.

Rotate позволяет управлять вращением. Auto - Flash автоматически пытается определить количество витков. CW (Clockwise, по часовой стрелке) и ССW (Counter Clockwise - против часовой стрелки). При этом рядом в поле справа появляется возможность ввести количество оборотов. Можно использовать только целые значения. Можно отключить вращение, выбрав None.

Orient to path - поворачивает символ в соответствии с направляющей линией. Snap привязывает символ к этой направляющей. (см. ниже)

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

Направляющие слои

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

Скажем, вам нужно анимировать самолетик, который выписывает виражи по небу. У вас уйдет уйма времени и сил, на создание этого движения. При этом анимация будет состоять из маленьких отрезков motion tweening и отдельных кадров. Вместо этого можно нарисовать траекторию на специальном слое и привязать символ самолетика к ней.

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

Для того, чтобы добавить направляющий слой, вам нужно выбрать слой, на котором находится ваш символ, и, нажав правую клавишу мыши, в контекстном меню выбрать Add Guide. При этом исходный слой становится направляемым (guided layer). Это далеко не единственный способ создать направляющий слой (guide layer). Любой слой можно сделать направляющим, указав это в его свойствах, или направляемым, перетащив нужный слой мышкой, так, чтобы он находился под направляющим.

Рис. 10 - Направляющий слой

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

Рис. 11 - Анимация, с использованием траектории

Теперь, чтобы использовать этот слой, вам нужно взять ваш символ за центральную точку (это такой маленький кружочек) и перетащить ее на траекторию. Вы почувствуете, когда символ "зацепится" за нее, и увидите, как он будет по ней скользить. Далее все по знакомому сценарию - ключевые кадры, включаем motion tweening: Если нужно, чтобы объект поворачивался согласно траектории, а не просто двигался по ней (как на рис. 11), то на панели Frame нужно включить флажок Orient to path.

Цветовые эффекты

Motion tweening позволяет использовать различные цветовые эффекты применительно ко всему символу. Эта возможность отсутствует в shape tweening.

Для того, чтобы применить эффект к символу, нужно выделить этот символ, и на панели эффектов (Windows->Panels->Effects), выбрать нужный эффект (см. Рис 9-12).

Рис. 12 - Установка яркости	Рис. 13 - Цветовое смещение, оттенок
Рис. 14 - Точная установка всех атрибутов	Рис. 15 - Установка прозрачности

Flash 5 - новые возможности

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

Здесь делается основной упор на то, что интерфейсы нестандартны. Что имеется в виду, зачем это нужно и к чему это ведет?

"Нестандартные" интерфейсы имеют ряд отличий от "стандартных" (под "стандартными" подразумеваются привычные интерфейсы HTML):

Специальные управляющие объекты (кнопки, панели, блоки). Для примера, рулетка в Microsoft Word - нестандартный объект. Ее практически невозможно реализовать в HTML, только картинку, но не интерактивную функциональность. Независимое размещение объектов, другими словами, не размещение объектов относительно друг друга, а расположение по координатам и уровням. В DHTML такая возможность существует, но в DHTML надежно реализовать можно только совсем простые вещи. Прозрачное взаимодействие с любым объектом. Т.е. все объекты равны, не складывается ситуация, когда часть принадлежит системе, часть вашему коду, и т.д., и при этом набор обрабатываемых событий один для всех.

В результате подобной "нестандартности" появляется полная свобода в создании интерактивного интерфейса, более удобного, более наглядного, более функционального. Это реально повышает уровень предоставляемого сервиса. А значит, достигается "customer satisfaction" (удовлетворение посетителя), и, в конечном итоге, система становится более конкурентоспособной.

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

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

Резонно задаться вопросом: а оно надо? Есть ли смысл использовать Flash 5 там, где он никогда не использовался? Ведь "несть числа" всевозможным языкам программирования, описывающим клиентскую часть. А Flash, к тому же, - один из самых медленных.

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

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

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

Чем определяется "грамотность" применения Flash 5? Необходимо определиться, каковы преимущества использования именно Flash в конкретном проекте, и с какими "подводными камнями" придется столкнуться.

Основные плюсы программирования в среде Flash 5 - в процессе разработки:

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

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

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

Вот, пожалуй, и все трудности. Но! Если в столь ожидаемом многими Flash 6 добавится некоторый набор усовершенствований, эти проблемы станут неактуальны. Это набор довольно простых вещей, которые очевидно не сложно сделать:

Кэширование растрированных векторов. Поддержка Unicode. Усовершенствование механизма наследования объектов. Внедрение методов проектной/командной работы. Отладка Performance and Memory-Use на XML, Math/Data Functions. Окончательное разделение программирования и дизайна.

Это не так много, разница между Flash 4 и Flash 5 гораздо больше, чем эти изменения. Конечно, и после этого Flash не надо будет применять везде - он все равно останется для "своей" области.

Производительность, поддержка кодировок - эти вопросы уже скоро будут решены. Инструмент будет более четко разделен, а концепция языка скорректирована. Разумеется, Flash 6 по-прежнему будет поддерживать разработанные на Flash 5 продукты.

Многие описанные проблемы решаются уже сегодня:

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

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

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

* * *

Статья основана на материалах проекта REFLASH ()

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

Графика, созданная вручную

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

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

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

Flash позволяет сглаживать, выпрямлять и оптимизировать линии (меню Modify -> Smooth, Straighten, Optimize). Чем прямее линии, тем меньше места они занимают. И, наоборот, чем они детальнее, тем больше. Оптимизирую линии, можно задать уровень сглаживания, а так же выполнить многопроходную оптимизацию.

Или еще один шаг в развитии Flash-технологии

Рубен Сардарян

4-го марта Macromedia анонсировала новую версию Flash: Flash MX. A 15-го марта на уже была опубликована пробная версия Flash MX (от полной версии она отличается тем, что действует только 30 дней). Для интересующихся: стоит Macromedia Flash MX всего $499, а upgrade с предыдущей версии обойдется в $199.

Я, понятное дело, быстренько скачал этот продукт (весит он 46 Мб) и попробовал его в деле. Эта маленькая статья представляет собой обзор новых возможностей Flash MX, немного разбавленных моими комментариями.

Бросается в глаза деление Macromedia пользователей Flash на дизайнеров (designers) и разработчиков (developers). Стоит открыть окошко What's new, и тебе популярно объяснят в чем состоит выигрыш для дизайнеров и для разработчиков (ну ладно, ладно, назовем их "программистами"), а в предустановленных расположениях окошек (panel sets) присутствуют "заводские" настройки для designer-ов и developer-ов. В статье я решил такого деления не проводить, а просто перечислить новые возможности программы и немножко поделится опытом использования этих самых возможностей.

Начнем с совместимости. Вместе с новым Flash был выпущен и новый Flash Player 6 (примочка для браузеров, позволяющая проигрывать Flash-мультики). Он понадобится, чтобы наблюдать творения, созданные во Flash MX. Однако, как и в предыдущих версиях, вы спокойно можете экспортировать вашу анимацию для любой версии Flash Player-а, при этом будут использованы только возможности указанной версии. Формат авторских .fla файлов тоже изменился. Но есть возможность сохранять файлы в формате Flash 5. В случае, если вы использовали какие-то возможности Flash MX, программа выдаст вам список использованных новых "фич" и предупредит, что все они будут потеряны, если файл будет сохранен в формате Flash 5. В любом случае, никто не мешает для работы использовать Flash MX, а экспортировать во Flash 5. Большинство дизайнеров будут так поступать еще некоторое время, пока новый plug-in не получит достаточного распространения.

Хорошее (я бы сказал, обязательное) решение для больших Flash-фильмов - иерархические слои. Теперь слои (layers) можно укладывать в иерархическое дерево папок. В первый раз я подумал о такой возможности, когда увидел у одного парня 78 слоев в мультике, и вот она появилась! Ура!

Рис.1 - Иерархические слои

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

Рис. 2 - Панелька Properties

Достаточно серьезное новшество - поддержка специальных средств для людей с ограниченными способностями (по-английски это называется accessibility). Macromedia использует технологию Microsoft Active Accessibility (MSAA) в качестве интерфейса к специальным программам для таких людей. Теперь для объектов Flash можно назначать название, описание и сочетания клавиш, которые будут доступны инвалидам. К сожалению, эти возможности поддерживаются только во Flash Player 6 для Internet Explorer-а. В Netscape и других браузерах, не использующих IE-технологию, поддержка accessibility будет недоступна.

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

Появились общие библиотеки (shared libraries). Теперь можно подключить такую общую библиотеку и использовать какие-либо символы во многих фильмах одновременно. Это позволит значительно сокращать размеры авторских файлов. Можно, например, импортировать видеоклип или звук в shared library, а потом использовать эти компоненты в разных .fla файлах.

Flash MX позволяет создавать шаблоны (templates) и использовать их в качестве заготовок для новых фильмов. Все что нужно сделать - сохранить Flash файл в качестве шаблона и далее выбрать File -> New from template... В пробной версии Flash были обнаружены некоторые достаточно функциональные шаблоны (презентация, опрос, слайд-шоу).

Теперь к новостям для любителей всего сложного (для программистов, то бишь :).

Конечно же вырос, окреп и поднялся над собой ActionScript. О новшествах этого компонента Flash можно написать отдельную большую статью. Добавились новые объекты, новые методы и переменные. Изменилась классификация объектов и функций. Теперь гораздо удобнее находить в дереве нужные возможности языка.

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

Рис. 3 - Редактор ActionScript-а

Наконец-то появился нормальный отладчик (debugger), позволяющий ставить breakpoint-ы и осуществлять пошаговую отладку.

Рис. 4 - Отладчик

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

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

Имена

Для того, чтобы обращаться к клипам, нам потребуется разобраться с понятием имени объекта (instance name) и пути до объекта (target path). Договоримся, что клип (movie clip) и объект для нас - одинаковые вещи.

Имя объекта - это имя конкретного экземпляра символа. Скажем, у нас может быть символ - машинка, а экземпляры этого символа будут называться "Машинка1", "Машинка2", "Pickup", "Запорожец"...

Для того чтобы дать имя объекту, нужно выделить объект и в панели Instance (Window->Panels->Instance, Ctrl+I) в графе Name ввести имя объекта (рис. 2). Имена могут состоять только из букв, цифр и символа подчеркивания ("_"), причем имя не может начинаться с цифры.

Рис. 2 - Панель Instance

Изображения

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

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

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

Качество

Вы, наверное, уже знакомы с понятием качества во Flash (опция Quality при публикации, параметры _quality, _highquality, функция toggleHighQuality()). Качество тоже сильно влияет на скорость воспроизведения. Тут тоже существует несколько компромиссов.

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

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

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

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

Кадры, слои, символы, временная шкала

Мы досконально разберем все способы создания анимации, но сначала определимся с некоторыми базовыми понятиями. Этими понятиями являются кадры (frames), символы (symbols), слои (layers) и временная шкала (timeline).

Временная шкала

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

Рис. 1 - Временная шкала

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

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

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

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

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

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

Слои
В компьютерной графике этот инструмент используется очень часто. Представьте, что вы рисуете на прозрачных листах, а потом накладываете их друг на друга. То, что находится на верхних слоях, закрывает содержимое нижних слоев. Слои можно делать невидимыми и/или недоступными, чтобы облегчить редактирование сцены в целом.
Во Flash есть пара особенных типов слоев: слои, содержащие траектории движения и слои - маски. Про первые мы поговорим ниже, обсуждение же вторых выходит за рамки данной статьи.
Есть достаточно большое количество приемов, в которых используются слои, но во Flash без них просто нельзя обойтись по одной важной причине: в один момент времени для каждого объекта анимации нужен отдельный слой. Объектом анимации считается фигура (shape) или символ (symbol).
Кадры
Наша анимация состоит из последовательности кадров. Кадр может быть как составленным вручную, так и сгенерированным Flash. Это относится к кадрам одного слоя. Так как сцены Flash состоят обычно из нескольких слоев, то итоговые "многослойные" кадры, могут содержать, как сгенерированные, так и "самодельные" слои.
В компьютерной анимации существует понятие - ключевые кадры (keyframes). Их название говорит само за себя. Это кадры, которые Flash не вправе изменять в процессе создания анимации. Вы задаете эти ключевые кадры, а промежуточные кадры между ними выстраивает Flash. Существует два типа промежуточных кадров - кадры, построенные на основе изменения геометрии (shape tweening) или кадры, построенные на изменении символов (motion tweening). И, конечно же, кадры могут быть пустыми, т.е. ничего не содержать.
Элементарные операции с кадрами:
Вставить пустой ключевой кадр - Insert->Blank keyframe, F7
Ключевой кадр, повторяющий содержание предыдущего - Insert->Keyframe, F6
Очистить ключевой кадр - Insert->Clear keyframe, Shift-F6
Вставить обычный кадр - Insert->Frame, F5
Удалить кадр - Insert->Remove Frames, Shift-F5

Символы
Символы - одно из ключевых понятий во Flash. Символом может быть, как простейшая геометрия или их объединение, так и целая анимация (movie). Это позволяет использовать символы, как мощный механизм создания абстракций во Flash.
Например, можно сделать символы - колесо, корпус, стекла, антенны. Потом все это объединить в символ - автомобиль. А затем создать сцену, на которой этот автомобиль будет ехать. Другой пример. Допустим, вам нужно нарисовать падающий снег. Вы создаете символ снежинки, создаете символ, содержащий несколько анимирующихся снежинок, далее создаете символ в виде столбика падающих снежинок, затем размножаете этот столбик - и получаете падающий анимирующийся снег на всю сцену.
Я думаю, вы уловили смысл символов. Символы добавляют гибкости вашей сцене. В случае с автомобилем вы можете сделать колесо анимированным символом, так, чтобы ощущалось вращение. Можете сделать дверь кнопкой, чтобы при клике мышкой она открывалась. Смысл в том, что в любой момент вы можете изменить содержание и вид символа, что существенно сокращает затраты на модификацию Flash сцен.
Существует три вида символов: анимация (movie clip), кнопка (button) и изображение (graphic):
- Изображение (graphic), представляет собой символ, состоящий из единственного кадра. Отсюда следует его статичное название. Если символ действительно представляет собой статичный (не анимирующийся) объект, лучше сделать его изображением (graphic).
- Кнопка (button). Во Flash есть специально приспособленный под функции кнопки вид символа. В нем имеется 4 кадра: Up, Over, Down, Hit, которые содержат следующие состояния кнопок:

Up - обычное состояние кнопки. Over - когда курсор мышки находится над кнопкой. Down - когда курсор находится над кнопкой и нажата клавиша мыши. Hit - обычное состояние, для кнопки, содержащей ссылку, которую пользователь уже посещал.
- Анимация (movie clip). Это самый "полноценный" тип символа. В нем может быть любое количество кадров. Символ этого типа может восприниматься как объект типа Movie в ActionScript (это встроенный язык Flash).
Символы могут быть вложенными вне зависимости от типа. Это является самым главным их достоинством. Например, можно сделать кнопку, которая начнет двигаться, когда над ней будет "пролетать" курсор мыши, просто поместив в кадр Over символ - анимацию. Или (парадокс!) на изображение поместить бегущую кошку. Все остальное - дело вашей фантазии.
Символы можно создавать как "с нуля" (Insert->New Symbol, Ctrl+F8), так и используя текущее выделение, поместив его сразу в символ (Insert->Convert to Symbol, F8). Второй прием используется гораздо чаще, чем первое, т.к. в этом случае отпадает надобность его позиционировать и изменять под нужный размер.
Для управления символами используется так называемая библиотека (Library), описание которой, к сожалению, не входит в рамки данной статьи. Окно библиотеки находится по адресу Window->Library (или Ctrl-L). Я надеюсь, вы легко разберетесь с библиотекой символов.

Кнопки

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

Как вы знаете, во Flash существует специальный тип символа для создания кнопок - Button (см. Macromedia Flash ч. 2). Будем считать, что вы уже научились создавать кнопки, теперь научимся отслеживать нажатия на эти кнопки.

Кнопки в Macromedia Flash обладают обширным списком событий, на которые мы можем реагировать:

press - клавиша мышки нажата, когда курсор находится в пределах кнопки; release - клавиша мышки отжата, когда курсор находится в пределах кнопки; releaseOutside - клавиша мышки отжата, когда курсор находится вне пределов кнопки; rollOver - курсор мыши входит в пределы кнопки; rollOut - курсор выходит за пределы кнопки; dragOver - курсор входит в пределы кнопки, при этом была нажата кнопка, и нажата клавиша мыши; dragOut - курсор выходит за пределы кнопки, при этом была нажата кнопка, и нажата клавиша мыши; keyPress ("клавиша") - была нажата "клавиша". Список клавиш можно посмотреть в справке по Flash (объект Key), или использовать панель параметров для ввода нужной клавиши.

К сожалению, Flash "понимает" только левую клавишу мыши. Правая используется для вызова контекстного меню (щелкните правой клавишей на каком-нибудь Flash мультике). Способов отлавливать во Flash среднюю клавишу или "колесико" (mouse wheel) я пока не встречал; думаю, что их не существует.

Перехватываются эти события с помощью директивы on(). Синтаксис ее таков:

on (событие) { ... // Наши действия }

Ниже вы можете сами попробовать вызвать некоторые события:

Очень часто используемый пример - переход по ссылке при нажатии на кнопку:

on (release) { getURL("http://rubs.boom.ru"); }

Чтобы проверить этот сценарий, выделите вашу кнопку, нажмите Ctrl+Alt+A и введите программу.

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

Macromedia Flash

, http://www.jdesign.ru

, www.jdesign.ru

Арсений Чеботарев,

оригинал:

перевод:

Рубен Сардарян,

Эта статья представляет собой обзор новых возможностей Flash MX, очередной версии Flash.

Максим Косенко

Власов А.И., к.т.н., доцент

, http://www.jdesign.ru

, www.jdesign.ru

Арсений Чеботарев,

оригинал:

перевод:

Рубен Сардарян,

Эта статья представляет собой обзор новых возможностей Flash MX, очередной версии Flash.

Максим Косенко

Власов А.И., к.т.н., доцент

Macromedia Flash 5. (часть первая)

Рубен Сардарян,

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

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

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

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

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

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

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

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

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

Статистика такова:

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

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

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

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

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

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

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

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

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

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

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

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

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

и "выделение"

. Выполните следующую последовательность действий:

Выберите инструмент "овал" и нарисуйте с помощью него овал или круг в левой части сцены.

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

Теперь войдите в меню Insert и выберите Convert to symbol (или нажмите F8). В появившемся диалоге выберите селектор Graphic и нажмите ОК:

Теперь выберите на шкале времени вверху 25-й кадр (просто щелкните по нему мышкой), и выберите меню Insert -> Keyframe (или нажмите F6). Этим вы создадите так называемый "ключевой кадр" на 25-м кадре вашей шкалы времени. У вас должно получиться нечто похожее:

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

Вернитесь на шкале времени в 1-й кадр. (В доказательство Вы должны увидеть свою фигуру опять в левой части экрана). Из меню Insert (или из контекстного меню при нажатии правой клавиши мыши на первом кадре) выберите Create motion tween.

Поздравляю! Вы только что сделали очень простой, но уже мультик, во Flash. Выберите Control > Play (или просто нажмите Enter) чтобы просмотреть результат.

Давайте добавим кое-что в наш мультик. Выберите опять 25-й кадр и выделите вашу фигуру. Войдите в диалог Effect. Если сложно отыскать нужную закладку в диалогах справа, выберите Window > Panels > Effect. В выпадающем списке в этом диалоге выберите Alpha (прозрачность), а появившийся параметр опустите до 0%.

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

Последний шаг. Нам нужно оттранслировать наше творчество в .swf файл и сгенерировать HTML файл, который загружал бы мультик в браузер. Это можно сделать, выбрав File > Publish (или нажав Shift-F12).

Теперь можно открыть созданный вами HTML файл в браузере. Это можно сделать даже из Flash, выбрав File > Publish Preview > HTML (или нажав F12). При этом Flash воспользуется браузером, установленным по умолчанию.

Вот, вкратце, цикл создания простой сценки во Flash.

Содержание (и вообще, написание) будущих статей на тему Flash зависит от ваших откликов. Я искренне надеюсь на, что в ближайшем будущем в Рунете (если называть так российскую часть Интернета) появятся достойные ресурсы по Flash и буду рад поделится своим опытом.

Ссылки:

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

Англоязычные:

Самое главное место - Flash на сайте Macromedia. Отсюда можно также скачать примочку.

Это место, где я черпаю 90% ресурсов по Flash:

А здесь можно посмотреть на игры, которые писались еще на Flash 4:

Русскоязычные:

Flasher.ru - одно из немногих Flash мест на Руси. По сравнению с западными сайтами, ресурсов мало, но для нашего Рунета - вполне.

Дизайн и графика - советы по Flash. Рекомендую начинающим. Много полезных вещей, очень приятно сделанный сайт. Единственный drawback - все про Flash 4.

Об авторе.

Максим Косенко - Исполнительный Директор компании Subpixel . Соавтор и главный редактор проекта Reflash . Специалист по технологическому анализу. Опыт коммерческого применения интернет-технологий с 97го года.

Оптимизация Macromedia Flash

Рубен Сардарян

За последний год технология Flash завоевала много умов и сердец, в том числе и в России. Для некоторых Flash стал профессией, некоторые использовали его для украшения своих страниц, а некоторые просто цокали языками в восхищении, увидев его интерактивные возможности. Появились книги по Flash, материалы в сети. Можно однозначно сказать, что "дело Flash" в России интенсивно продвигается. Итак…

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

Статья поделена на два раздела: один посвящен оптимизации скорости и качества исполнения, другой - оптимизации размера .swf файлов.

Основные действия с Movie Clips

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

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

Итак, что же у нас есть? Я перечислю только основные (на мой взгляд) инструменты. Остальное вы найдете в списке элементов языка или в помощи.

Функции клипов (movie clip), которые можно вызывать:

play() - начинает или возобновляет воспроизведение клипа; stop() - останавливает воспроизведение клипа; gotoAndPlay() - переходит на определенный кадр (сцену) и продолжает воспроизведение; gotoAndStop() - переходит на определенный кадр (сцену) и останавливает воспроизведение.

Свойства (параметры) клипов, которые можно считывать/изменять:

_x, _y - координаты клипа (в пикселях); _xscale, _yscale - масштаб клипа (в процентах), соответственно по горизонтали и по вертикали; _width, _height - ширина и высота клипа (в пикселях); _rotation - угол поворота клипа (в градусах); _alpha - прозрачность клипа (в процентах); _visible - видимость.

Это далеко не все, что можно делать с клипами. Используйте другие параметры, экспериментируйте, творите!

Отчет

Flash может генерировать отчет, в котором по байтам расписан весь фильм. (Publish Settings -> Flash -> Generate size report). Для примера, мы рассмотрим следующий мультик:

В этом фильме 70 кадров. В отчете (см. ниже) отражено количество байт, нужное для каждого кадра (Frame Bytes), и размер фильма к этому кадру (Total Bytes). Исходя из этих данных можно рассчитать требуемую скорость линии передачи, чтобы Flash-фильм мог отображаться без задержек.

После отчета по кадрам идет отчет по сценам - какая сцена сколько занимает, а затем - по символам. 136 байт на первой (и единственной) сцене занимает фраза "(С). Rouben Sardarian, 2001". Этот текст использует опцию Use Device Fonts, и поэтому занимает мало места.

Слово "Optimized" и буквы слова "Flash" являются символами, причем на каждую букву этого слова отводится два символа - один содержит графику, другой анимацию (движение вверх-вниз). Заметьте, что буквы, использованные в слове "Flash" не используют шрифт (см. конец отчета - там нет шрифта Arial, которым это слово было написано). Эти буквы были преобразованы в "самостоятельную" графику, после ввода текста (Modify->Break Apart, Ctrl+B).

В конце отчета помещаются данные о шрифтах, звуке и изображениях. Звук и импортированные изображения отсутствуют в нашем примере, поэтому в отчете данных о них нет.

Зато мы можем увидеть, что описание шрифта для фразы "(С). Rouben Sardarian, 2001" занимает 20 байт. Прибавив к этому 136 байт, которые описывают фразу, получаем 156 байт. Сравните это с 519 байтами (470 байт - 8 букв, из которых состоит слово "Optimized" + 49 байт описание слова).

Вот как выглядит отчет:

Movie Report ------------

Frame # Frame Bytes Total Bytes Page ------- ----------- ----------- --------------- 1 3294 3294 Scene 1 2 566 3860 2 3 17 3877 3 4 17 3894 4 5 17 3911 5 6 17 3928 6 7 17 3945 7 8 17 3962 8 9 17 3979 9 10 17 3996 10 11 17 4013 11 12 17 4030 12 13 17 4047 13 14 17 4064 14 15 17 4081 15 16 17 4098 16 17 17 4115 17 18 17 4132 18 19 17 4149 19 20 17 4166 20 21 17 4183 21 22 17 4200 22 23 17 4217 23 24 17 4234 24 25 17 4251 25 26 17 4268 26 27 17 4285 27 28 17 4302 28 29 17 4319 29 30 17 4336 30 31 17 4353 31 32 17 4370 32 33 17 4387 33 34 17 4404 34 35 17 4421 35 36 17 4438 36 37 17 4455 37 38 17 4472 38 39 17 4489 39 40 17 4506 40 41 16 4522 41 42 16 4538 42 43 16 4554 43 44 16 4570 44 45 16 4586 45 46 16 4602 46 47 16 4618 47 48 16 4634 48 49 16 4650 49 50 16 4666 50 51 16 4682 51 52 16 4698 52 53 16 4714 53 54 16 4730 54 55 16 4746 55 56 16 4762 56 57 16 4778 57 58 16 4794 58 59 16 4810 59 60 16 4826 60 61 16 4842 61 62 16 4858 62 63 16 4874 63 64 16 4890 64 65 16 4906 65 66 17 4923 66 67 17 4940 67 68 17 4957 68 69 17 4974 69 70 30 5004 70

Page Shape Bytes Text Bytes ----------------------- ----------- ---------- Scene 1 0 136

Symbol Shape Bytes Text Bytes ----------------------- ----------- ---------- Optimized 0 49 H 97 0 Letter5 0 0 S 308 0 Letter4 0 0 A 112 0 Letter3 0 0 L 71 0 F 96 0 Letter2 0 0 Letter1 0 0

Font Name Bytes Characters ----------------------- -------- ----------- Century Gothic Bold Italic 470 DEIMOPTZ Arial 20

Отладка в ActionScript

Последнее, что мы рассмотрим в этой статье - окна Output (вывод) и Debugger (отладчик). Это инструменты, служащие для отладки сценариев ActionScript.

Окошко Output пришло из Flash 4, где оно было единственным инструментом для отладки. Существует директива trace(), которая выводит сообщения в это окошко. Туда же выводятся сообщения об ошибках.

Использовать trace очень просто:

trace ("280-й кадр");

или, например,

trace (xpos + k);

В 5-м Flash появился специальный инструмент - окошечко Debugger. Чтобы им пользоваться, нужно проверять свои фильмы не как обычно (Test movie, Ctrl+Enter), а с помощью Debug movie (Ctrl+Shift+Enter). Окошко Debugger (рис. 4) можно скрыть/показать с помощью Window->Debugger.

Рис. 4 - Окно Debugger

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

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

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

Debugger позволяет отслеживать практически любые параметры Flash-фильмов. Тем не менее, я считаю, что свое применение есть и у окошка Output, и у Debugger-a.

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

Удачи вам! У вас есть великолепное средство делать сеть (и не только сеть) красивее! Пользуйтесь им, доставляя удовольствие посетителям ваших творений и самим себе.

P.S.

Все оригиналы статей с сайта перекочевали на сайт , милости просим в новое жилище :).

Все статьи с Flash примерами, а так же исходники моих фильмов можно найти на моей страничке: , письма шлите на .

Появился обещаный список ссылок на Flash-ресурсы:

Теперь все мои материалы (с примерами на Flash) можно найти здесь:

Спасибо большое всем читателям, так тепло откликнувшимся о статьи! Спасибо за конструктивную критику и мотивирующие пожелания!

Я получил очень много писем с вопросом "a как сделать во Flash?.." Я честно пытался помочь всем, но за неимением времени, не всегда мог это сделать, поэтому не судите строго.

Следующая статья будет посвящена основам ActionScript - событийно-управляемого языка, который создает интерактивность во Flash. Так же, я надеюсь поместить туда систематизированный каталог по Flash ресурсам.

Панель действий (Actions Panel)

Панель действий служит для отображения и ввода ActionScript-программ (рис. 1). Существует два режима работы с панелью - нормальный (для "чайников") и экспертный. В экспертном режиме список команд - это простое поле для ввода текста. В нормальном же режиме мы не можем напрямую редактировать команды. Для этого используется панель параметров.

Добавить инструкцию можно, нажав на кнопку "+" (см. рис. 1) или выбрав соответствующую инструкцию в списке элементов языка. Кроме того, для всех действий во Flash имеются последовательности клавиш, с помощью которых это можно сделать гораздо быстрее. Они приведены справа от каждого действия в меню кнопки "+". Например, чтобы добавить функцию stop(), нужно нажать Esc+st (последовательно: Esc, затем "s", затем "t").

Удалить инструкцию можно, выбрав ее и нажав кнопку "-" (или просто клавишу Delete).

Я рекомендую вам не начинать сразу же пользоваться экспертным режимом, если у вас нет опыта программирования на Java-подобных языках (С++, Java, JavaScript). У нормального режима есть большое достоинство, делающее его незаменимым для новичков - в этом случае гораздо меньше шансов ошибиться с синтаксисом языка. Новичкам это поможет быстрее понять тонкости ActionScript.

Рис. 1 - Панель действий

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

Поточное воспроизведение и предварительная загрузка

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

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

Имеет смысл протестировать работу вашего фильма на нескольких скоростях с помощью функции Test Movie (Control->Test Movie, Ctrl+Enter). Скорость можно выбирать в меню Debug, которое появляется после запуска фильма.

Поточный звук

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

Повторное использование, символы

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

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

Смысл символов - экономия. Подумайте, какие общие свойства имеются у объектов в вашем фильме, и вынесите их в отдельный символ.

Пути

Путь до объекта - это запись имени объекта с учетом иерархии. Попытаюсь объяснить, что это такое.

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

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

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

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

_parent - указатель на "родителя". Указывает на объект, стоящий в иерархии одним уровнем выше.

_root - "корень". Это начало иерархии. Без него не обойтись при указании абсолютного пути.

Путь выглядит так:

leaf.play(); - у подобъекта leaf (лист) вызывается функция play();

_parent.tree.leaf.stop(); - подразумевается, что на одном уровне имеется объект tree, у которого есть объект leaf, у которого и вызывается функция stop();

_root.banner._visible = false; - сделать клип banner, находящийся на 1-м уровне, невидимым.

Рис. 3 - Иерархия клипов

Для иллюстрации возьмем иерархию из 5-ти объектов (рис. 3). Объекты 1-4 находятся на 1-м слое, объект 5 - на 2-м слое. Объект 2 вложен в объект 1, а объект 3 вложен в объект 2. Объекты на рисунке визуально вложены друг в друга, но это ни в коем случае не означает, что так должно быть и "в жизни". Здесь они так сгруппированы для наглядности. Так как имя объекта не может начинаться с цифры, пусть объекты у нас называются obj1-obj5.

Теперь займемся путями. Для начала посмотрим, какие объекты могут обращаться друг к другу по имени. obj1 может обращаться к obj2, а obj2 - к obj3, но при этом obj1 не может обратиться к obj3 напрямую, т.к. тот содержится не в obj1, а в obj2.

Например, первому объекту нужно, чтобы объект 3 начал заново воспроизводиться с 1-го кадра. Вот как это делается:

obj2.obj3.gotoAndPlay(1);

у нас находится на первом

Чтобы 4-му объекту сделать 1-й объект (заметьте - со всеми подобъектами!) полупрозрачным, ему нужно в своем сценарии написать следующее:

_parent.obj1._alpha = 50;

или

_root.obj1._alpha = 50;

Так как obj4 у нас находится на первом уровне иерархии, то для него _root и _parent - одно и то же.

Теперь для объекта 3 напишем скрипт, который сделает объект 5 невидимым при нажатии клавиши мыши. В сценарии для объекта 3 пишем:

onClipEvent (mouseDown) { _root.obj5._visible = false; }

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

_parent._parent._parent.obj5._visible = false;

Надеюсь, я прояснил момент с путями.

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

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

Одними из самых важных являются функции управления ходом воспроизведения клипа (play(), stop(), gotoAndPlay(), gotoAndStop()). Функции play() и stop() вызываются без параметров, в то время как в goto нужно указывать кадр, и, возможно, сцену.

Размер .swf файлов

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

Размеры и "количество" анимации

Имеются способы повысить fps. Первый, наверное, не самый выгодный - уменьшить размеры воспроизводимого клипа: на слабой машине клип с размерами 300x200 будет воспроизводиться гораздо лучше, чем, скажем, клип с размерами 600x400.

Второй заключается в нескольких простых правилах составления анимации:

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

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

3) Не держите символы на сцене, если вы их не используете. К сожалению, Flash не настолько интеллектуален, чтобы не просчитывать клипы с _alpha или _vizible равными нулю. Если клип невидим, лучше его убрать со сцены, а потом, когда будет нужно, его показать.

Имейте ввиду эти моменты, когда создаете анимацию во Flash.

что ваши творения будут не

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

Скорость исполнения фильмов

Общеизвестно, что плавность анимации достигается большим количеством проигрываемых кадров в секунду (fps - frames per second). Следовательно, мы стремимся указывать большую скорость в свойствах Flash-фильма. (По умолчанию, Flash использует значение 12 fps. Для качественной анимации требуется минимум 25-30 fps).


12 fps	35 fps

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

Текст, шрифты

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

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

Отсюда выводы: большие объемы текста лучше не хранить во Flash, (а использовать, например, HTML) - Flash подходит больше для коротких надписей, лозунгов и т.п.; стараться использовать меньше различных шрифтов. Если уж очень нужно поместить большое количество текста во Flash, используйте опцию Use Device Fonts. Все это сократит размер создаваемого файла.

Термины

Прежде чем мы перейдем к конкретным действиям, несколько терминов из области ActionScript:

Действия (Actions) - это инструкции, которые говорят Flash-мультику, что делать. От них произошло название языка - ActionScript (дословно - сценарий действий). Давайте договоримся, что в рамках этой статьи мы будем использовать термин "инструкция", дабы не путать их с настоящими действиями, которые будем производить. События (Events) - это действия, которые происходят, когда проигрывается мультик. События, например, могут происходить, когда заканчивается загрузка какого-то кадра, когда мы достигаем какого-то кадра, когда пользователь нажимает клавишу на клавиатуре или курсор мышки оказывается над нашим объектом. Выражения (Expressions) - это любая часть инструкции, которая порождает значение. Следующие примеры являются выражениями: 2 + 2, 2 * 2, a + b, 2*pi*r, (15 + k) * random(10). Функции (Functions) - это блоки кода, которые можно многократно использовать. Функциям можно передавать значения и получать от них результат. Например, number= get_color(15, 24). 15 и 24 являются аргументами (или параметрами) функции get_color, возвращаемое значение которой записывается в переменную number. Классы (Classes) - это типы объектов. Например, класс дерева - растение. Во Flash есть некоторое количество предопределенных классов (очень похожих на классы JavaScript). Вы можете создавать свои классы или модифицировать существующие. Экземпляры (Instances) - это буквально экземпляры определенных классов. Например, экземпляром растения могут являться дерево, куст или цветок. Экземпляр - это уже конкретный реальный объект. Если класс - это определение объекта (экземпляра), то экземпляр - это уже конкретное воплощение, это класс в действии. Каждому экземпляру можно присвоить имя, чтобы через него обращаться к функциям или переменным объекта. Обработчики (Handlers) - это специальные инструкции, которые обрабатывают события. Например onClipEvent - обработчик действий, связанных с конкретным символом (см. Macromedia Flash ч. 2). Операторы (Operators) - это элементы языка, которые вычисляют значения, исходя из одного или более аргументов. Например, оператор сложения (+) возвращает сумму двух значений, стоящих слева и справа от него. Переменные (Variables) - это идентификаторы, которые могут хранить значения. Например, a = 5; или name = "Michael".

Эти термины мы будем использовать при обсуждении ActionScript. Итак...

была посвящена анимации. Мы создавали

была посвящена анимации. Мы создавали анимацию на основе motion tweening, shape tweening и просто составляли движение из отдельных кадров. Думаю, пора перейти к более сложной теме - рассмотрению инструмента, который создает основу для большинства качественных Flash-фильмов.
Этот инструмент - ActionScript: событийно-управляемый язык, встроенный во Flash. Последняя версия ActionScript, которая присутствует во Flash 5, существенно отличается от предыдущей. Если в прошлой версии это был ограниченный набор команд, позволяющий осуществлять лишь основные действия и вводимый с помощью не очень удобного интерфейса, то новый ActionScript - это мощный язык с увеличенным набором команд, поддержкой классов, наследования (!) и гораздо более удобным интерфейсом.
ActionScript делает ваши страницы интерактивными. Вы можете реагировать на события с мышки или с клавиатуры, можете выполнить какие-либо действия при проигрывании определенного кадра.
Для того чтобы овладеть ActionScript в полной мере, желательно уже иметь опыт программирования (предпочтительно на С++, JavaScript, etc.). Однако одним из достоинств языка Flash является то, что вам не нужно быть профессионалом во Flash, или полностью знать ActionScript, чтобы писать на нем качественный код. Вы можете использовать лишь те возможности языка, которые сочтете необходимыми для своей работы.
Так как эта статья посвящена основам языка, в ней мы рассмотрим:
Панель действий (Actions panel), на которой происходит практически все общение с ActionScript. Кнопки - как их заставлять работать так, как нам требуется. Пути - как обращаться к нужным объектам? Основные действия с Flash-мультиками (movie clips) - мы будем управлять процессом проигрывания фильма, как нам угодно. Отладку в ActionScript - окошки Output и Debugger.
Цель этой статьи - дать вам возможность почувствовать ActionScript и показать, что этот язык может служить как для создания весьма внушительных программ, так и для выполнения элементарных действий, которые сделают вашу страницу гораздо привлекательней.

Данная статья полностью посвящена анимации

Данная статья полностью посвящена анимации во Flash 5. Я попытался, насколько это возможно в статье, раскрыть эту тему. О результатах судить вам.
Итак, анимация. В нашем случае это слово означает последовательность сменяющихся изображений (кадров), в результате чего возникает иллюзия движения. В Macromedia Flash существует два принципиально разных способа анимировать что-либо. Первый - прорисовывать каждый кадр самому, используя Flash только в качестве средства, позволяющего быстро пролистывать ваши изображения, и второй - заставить Flash автоматически просчитывать промежуточные кадры.
Для людей незнакомых с базовыми приемами компьютерной анимации (или просто - чтобы было понятнее) поясню на примере. Скажем, у вас есть зеленый квадрат, который нужно переместить из левой части экрана в правую. И сделать это надо в течение 25 кадров. В случае первого "покадрового" способа анимации вам придется нарисовать все двадцать пять кадров, и в каждом последующем кадре чуть-чуть сдвигать ваш квадрат, чтобы он оказался справа на 25-м кадре. А если вам нужно будет сделать так, чтобы квадрат потихоньку исчезал, двигаясь вправо? А если вдруг понадобится, чтобы он исчезал (увеличивался атрибут прозрачности) экспоненциально? Что, придется все это считать вручную и присваивать нужное значение прозрачности на каждом кадре?
Вовсе нет. Для этого существует второй способ анимации - с помощью промежуточных отображений (tweening animation). В этом случае вы только задаете ключевые кадры (keyframes), а промежуточные Flash просчитывает автоматически. Вам понадобится только задать только 2 кадра: начальный и конечный. По умолчанию Flash рассчитает промежуточные кадры по линейному закону, но можно задать возрастающую или затухающую экспоненту. Это нужно, чтобы отразить какие-нибудь процессы, происходящие в реальном мире. Например, движения мяча. Мы еще вернемся к этой теме.

и все, что нужно для

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

Звук

Очевидно, что использование звука сильно увеличивает размер Flash-файлов. Звук тоже поддается оптимизации во Flash.

В параметрах публикации (Publish Settings) можно установить тип компрессии и качество звука. В большинстве случаев имеет смысл использовать компрессию MP3, выбирая качество "по потребности". Чем шире поток (bit rate), тем больше места занимает звук.

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

Еще способ, сократить затраты на звук - проигрывать один и тот же фрагмент несколько раз. Например, вам нужен фрагмент звуков джунглей, длиной 40 секунд. Вы можете взять фрагмент, длиной 10 секунд и повторить его несколько раз, при этом будут сохранены только требуемые 10 секунд записи.