Использование device шрифтов
Используя панель Text Options, можyj указать Flash Player использовать device шрифты для показа определенных текстовых блоков, ы этом случае Flash не будет встраивать шрифт для этого текста. Это может уменьшить размер файла ролика и улучшить читаемость мелкого текста.
Можно указать, что текст в device шрифтах может быть выделен пользователем.
Для назначения тексту device шрифтов:
1 | Используйте инструмент Text для выделения текстового блока на рабочем поле. |
2 | Выберите Window > Panels > Text Options. |
3 | Выберите Static Text из выпадающего меню. |
4 | Пометьте Use Device Fonts. |
Чтобы предоставить пользователю возможность выделеня текста:
1 | Выделите текстовый блок. |
2 | Выберите Window > Panels > Text Options. |
3 | Выберите Static Text из выпадающего меню. |
4 | Если текст не в device шрифтах, пометьте Use Device Fonts. |
5 | Включите опцию Selectable. |
Изменение формы текста
Для изменения формы, стирания и других манипуляций, текст конвертируется в его графическое представление. Как с любой другой формой, можно индивидуально группировать конвертированные текстовые символы или преобразовать их во Flash-элементы (symbols) и анимировать. После конвертирования текста, редактировать его как текст уже невозможно.
Можно конвертировать только текстовые блоки целиком, но не отдельные символы внутри блока.
Для конвертирования:
1 | Выберите инструмент Arrow (стрелка) и щелкните на текстовом блоке. |
2 | Выберите Modify > Break Apart. Символы выбранного блока будут сконвертированы в графические формы на рабочем поле. |
Примечание: Break Apart применяется только к векторным TrueType шрифтам, Bitmap шрифты исчезнут с экрана. PostScript шрифты могут быть преобразованы только на Macintosh системах, использующих Adobe Type Manager (ATM).
О преобразовании текста
Можно преобразовывать текст такими же путями, как другие объекты - масштабировать, вращать, искажать и отражать текстовые блоки для создания интересующих эффектов. Когда вы масштабируете текстовый блок как объект, это не отражается в панели Character.
Текст в преобразованном блоке может редактироваться, однако преобразования могут сделать сложным его чтение.
Для большей информации о преобразовании текстовых блоков, смотрите Обзор работы с объектами.
О сохранении форматирования текста
Flash предоставляет возможность сохранять форматирование текста в редактируемых текстовых полях. Можно выбрать параметр HTML форматирования для динамических или редактируемых текстовых полей в панели Text Options. С выбранным HTML параметром, базовое форматирование (включая имя шрифта, стиль, цвет и размер) и гиперссылки в текстовом поле сохраняются автоматически, путем применения соответствующих HTML тегов в указанном текстовом поле. Следующие HTML теги поддерживаются в текстовых полях :
<A> | |
<B> | |
<FONT COLOR> | |
<FONT FACE> | |
<FONT SIZE> | |
<I> | |
<P> | |
<U> |
Можно также применять HTML теги в панели Actions, как часть значения переменной текстового поля. При выборе параметра HTML форматирования, поддерживаемые HTML теги, которые вы применили в панели Actions, сохраняются при экспорте ролика в SWF файл.
О встраиваемых и device шрифтах
Когда вы используете установленные в вашей системе шрифты в клипе, Flash встраивает шрифт в SWF файл, поэтому этот штифт отображается правильно во Flash Player клиента. Не все шрифты видимые во Flash могут быть экспортированы с роликом. Для проверки возможности экспорта шрифта, используйте команду View > Antialias Text для предварительного просмотра текста; искаженный текст показывает, что Flash не может определить очертание шрифта и не будет экспортировать текст.
Как альтернативу встраиванию шрифта, можно использовать специальные шрифты, называемые device шрифты. Device шрифты не экспортируются в SWF file. Поэтому, Flash Player использует какой-нибудь шрифт на локальном компьютере похожий на исходный device шрифт. Так как шрифт не встраивается, использование device шрифтов дает возможность уменьшить размер Flash ролика. Так же, device шрифты более удобны чем embedded (вставленные) при маленьком размере шрифта (менее 10 points). Однако, так как шрифт не экспортируются, то если пользователь не имеет на своем компьютере такого шрифта или другого похожего на device шрифт, текст может выглядеть по другому или некорректно.
Flash включает три device шрифта, названые _sans (подобные Helvetica or Arial), _serif (подобные Times Roman), and _typewriter (подобные Courier). Для использования шрифта как device шрифт, выберите один из этих шрифтов в панели Character или выберите Use Device Fonts в панели Text Options. У текста с device шрифтом можно включить опцию возможности выделения, что позволяет пользователю копировать и вставлять текст, применяемый в ролике. Смотрите Использование device шрифтов.
Можно использовать device шрифты для статического (static) текста (текст, который вставляется при создании ролика и не изменяется в процессе его воспроизведения) или динамического (dynamic) текста (текст, обновляемый периодически, например информация о погоде). Для информации о динамическом тексте, смотрите Создание редактируемых или динамически обновляемых текстовых полей.
Обзор Использования текста
При использовании текста во Flash роликах, можно устанавливать его размер, вид шрифта, стиль, промежутки, цвет и выравнивание. Вы можете преобразовывать текст как любой объект ? вращать, масштабировать, искривлять, отражать его, а так же редактировать его символы. Ваши ролики могут включать текстовые поля для ввода текста пользователем или для отображения текста, обновляемого динамически. Так же вы можете связывать блоки текста с URL'ами.
Можно преобразовать текст в его графическое представление и менять форму его букв. Для дополнительных возможностей преобразования текста, можно обрабатывать текст во FreeHand и импортировать файл FreeHand во Flash или экспортировать из FreeHand как SWF файл.
Для интерактивного введения в создание текста во Flash, выберете Help > Lessons > Type.
Flash ролики могут использовать шрифты Type 1 PostScript, TrueType, и Bitmap шрифты (только Macintosh). Для использования PostScript шрифтов, необходимо иметь Adobe Type Manager (ATM), установленным в вашу систему (исключая системы использующие Windows 2000, которые не требуют ATM). Смотри Техническое Примечание #4105 на Сайте поддержки Macromedia Flash.
Примечание: Если вы испытываете проблемы с использованием PostScript шрифтов во Flash на Windows NT, это может быть связано с несовместимостью между ATM и Windows NT. Пожалуйста проконсультируйтесь в службе технической поддержки для ATM и Windows NT, если возникнут проблемы.
Когда вы работаете с FLA файлами, Flash использует в ролике шрифты, установленные в вашей системе. Flash также дает возможность создавать объекты (symbol) из шрифта, таким образом можно экспортировать шрифт, как часть общей библиотеки и использовать его в других Flash роликах.
Можно проверять орфографию копируя текст в Буфер обмена используя Movie Explorer и вставляя в любой внешний текстовый редактор. Смотри Использование Movie Explorer.
Редактирование текста
Вы можете использовать стандартную технику редактирования во Flash, применяя Cut, Copy и Paste команды для перемещения текста внутри Flash файла и между Flash и другими приложениями.
Для проверки правописания, можно скопировать текст в буфер обмена, используя Movie Explorer, и вставить во внешний редактор. Смотрите Использование Movie Explorer.
Создание редактируемых или динамически
Редактируемые текстовые поля предоставляют пользователю возможность вводить текст в формы или опросы. Динамические текстовые поля отображают динамически обновляемый текст, например котировки акций. Оба типа текстовых полей создается с использованием панели Text Options. Вы выбираете соответствующиие параметры для указания, какой тип редактируемого или динамического текста во Flash ролике вам нужен. Можно сохранять форматирование текста как в HTML. Смотрите О сохранении форматирования текста.
Когда создается текстовое поле, ему назначается переменная. Переменная это фиксированное имя, значение которое меняется. Текстовое поле похоже на окно, которое отображает значение переменной. Можно использовать команды для передачи переменной в другие части ролика, для сохранения в базе данных серверного приложения и т.д. Можно также заменять значение переменной, считая его с сервера или другой части ролика. Для большей информации о использовании переменных, смотрите Помощь по ActionScript.
Для создания редактируемого текстового поля :
1 | Для создания или выбора текстового поля, сделайте одно из предлагаемого ниже: |
Выберите инструмент Text и потяните для создания текстового блока определенных размеров. | |
Щелкните внутри существующего текстового блока. | |
2 | Выберите Window > Panels > Text Options. |
3 | Выберите тип текста из выпадающего меню : |
Выберите Dynamic Text для создания текстового поля, показывающего динамический текст. | |
Выберите Input Text для создания редактируемого текстового поля, в которое пользователи могут вводить текст. | |
Создание символов из шрифта
Чтобы использовать шрифт как элемент общей библиотеки, можно создать символ из шрифта (шрифт-символ) в окне Library. Это дает возможность связывать шрифт и использовать его во Flash роликах без встраивания шрифта в ролик. (Смотрите Использование общих библиотек.)
Для использования шрифт-символа в общей библиотеке, ему назначается строка идентификатор. Идентификатор так же может быть использован для доступа к символу как к объекту в ActionScript. Для информации о объектах в ActionScript, смотрите Помощь по ActionScript.
Для создания шрифт-символа:
1 | Откройте библиотеку, в которой вы хотите добавить шрифт-символ. |
2 | Выберите New Font из меню Options в окне Library. |
3 | В диалоговом окне Font Symbol Properties, введите имя шрифт-символа. |
4 | Выберите шрифт из выпадающего меню или введите название шрифта вручную. |
5 | Если необходимо, пометьте Bold или Italic для применения выбранного стиля к шрифту. |
6 | Нажмите OK. |
Для назначения строки идентификатора шрифт-символу:
1 | Выберите шрифт-символа в окне Library. |
2 | Сделайте одно из предлагаемого: |
Выберите Linkage из меню Options в окне Library. | |
Right-click (Windows) или Control-click (Macintosh) на имени шрифт-символа в окне Library и выберите Linkage из контекстного меню. | |
3 | В диалоговом окне Symbol Linkage Properties, выберите Export This Symbol. |
4 | Введите строку идентификатор и нажмите OK. |
Создание текста
Для помещения текстового блока на рабочее поле, используйте инструмент Text. Можно расположить текст в одну линию, которая расширяется по мере того, как вы печатаете или в блоке фиксированной длины, слова в нем будут переносится автоматически. Flash отображает кружочек в верхнем правом углу, когда блок расширяющийся и квадратик, если блок имеет фиксированный размер.
У текстовых полей Flash показывает квадратик в нижнем правом углу поля, показывающий что вы можете менять размер текстового поля, в зависимости от объема текста, который будет введен.
Для создания текста :
1 | Выберите инструмент Text. |
2 | Выберите Window > Panels > Character и Window > Panels > Paragraph для показа панелей Character и Paragraph и установите атрибуты текста, как описано в Установка атрибутов текста. |
3 | Сделайте одно из описанного ниже: |
Для создания текстового блока подстраивающегося под текст, щелкните там, где хотите разместить текст. | |
Для создания текстового блока с фиксированной длиной, щелкните курсором на начале текста и тащите для указания нужной длины. | |
Примечание: Если вы создали текст, который вышел за пределы рабочей области, текст не потерян. Чтобы сделать его доступным снова, добавьте переводы строк и переместите текстовый блок, или выберите View > Work Area.
Для изменения размеров текстового блока :
Потяните его за уголок.
Для переключения между расширяющимся и фиксированным текстовым блоком :
Щелкните два раза на уголке.
Связывание текстовых блоков с URL'ами
Вы можете связать текстовые блоки с URL'ами, чтобы пользователи могли переходить на другие файлы щелкая на текст, как на ссылку.
Для связывания текстового блока с URL:
1 | Используйте инструмент Arrow (стрелка) для выделения текстового блока на рабочем поле. |
2 | Выберите Window > Panels > Character. |
3 | Для связывания, введите URL который вы хотите связать. |
Установка атрибутов текста
Можно устанавливать атрибуты шрифта или параграфа текста. Шрифт это набор алфавитно-цифровых символов определенного вида. Атрибуты шрифта включают семейство шрифта, размер, стиль, цвет, промежуток, авто кернинг, и смещение базовой линии. (Можно использовать встраиваемые или device шрифты. Смотрите О встраиваемых и device шрифтах.) Атрибуты параграфа включают выравнивание, отступы, отступ абзаца и расстояние между строками.
Для изменения атрибутов шрифта и параграфа используйте панели Character и Paragraph. Чтобы указать Flash использовать device шрифты, используйте панель Text Options.
Во время создания текста Flash использует текущие атрибуты. Для изменения атрибутов имеющегося текста, вы должны сначала выделить его.
Для использование панели Character :
Выберите Window > Panels > Character.
Для использование панели Paragraph :
Выберите Window > Panels > Paragraph.
Установка параметров динамического текста
Управление динамическим текстом осуществляется через задание его параметров.
Для установки параметров динамического текста:
1 | Выберите Window > Panels > Text Options. |
2 | Выберите Dynamic Text из выпадающего меню Text Type. |
3 | Установите любой из предложенных параметров: |
Из выпадающего меню Line Display, выберите Multiline для отображения текста в несколько строчек, или Single Line для отображения одной строкой. | |
Пометьте HTML для сохранения HTML-форматирования. | |
Пометьте Draw Border and Background для отображения границы и фона текстового поля. | |
Если вы выбрали Multiline выше, пометьте Word Wrap для автоматического перевода строки в конце текстового поля. | |
Пометьте Selectable (помечено по умолчанию) для возможности выделения пользователем динамического текста. | |
Для переменной, введите ее имя. | |
Для встраиваемых шрифтов, выберите одну или больше кнопок для указания какие символы из шрифта, используемые в динамическом тексте, будут экспортированы в SWF файл. Выберите кнопку Full Font (слева) для экспорта полного набора символов шрифта. | |
Установка параметров вводимого текста
Управление редактируемым текстовым полем осуществляется через задание его параметров.
Для установки параметров вводимого текста :
1 | Выберите Window > Panels > Text Options. |
2 | Выберите Input Text из выпадающего меню Text Type. |
3 | Все параметры аналогичны разделу Установка параметров динамического текста, кроме двух : |
Из выпадающего меню Line Display, выберите Password для отображения текста в виде звездочек в целях сохранения секретности. | |
Примечание: Выбор параметра Password дает эффект только на отображении текста. | |
В поле Maximum Characters, введите максимальное число символов, которое может ввести пользователь. | |
Установка промежутков кернинга базового смешения
Промежуток указывает сколько свободного пространства находится между рядом стоящими символами. Можно задавать промежутки для выделенных символов или разом для целого блока текста.
Кернинг контролирует расстояние между некоторыми парами символов. Многие шрифты имеют встроенную информацию о кернинге. К примеру, расстояние между A и V часто меньше чем между A и D. Для использования встроенного кернинга, используйте параметр Kern.
Базовое смещение контролирует расположение текста относительно его базовой линии.
Параметры промежуток, кернинг, и базовое смешение находятся в панели Character.
Для установки промежутков, кернинга, базового смешения :
1 | Если панель Character не показана, выберите Window > Panels > Character. |
2 | На панели Character установите следующие опции: |
Для указания промежутков, щелкните на треугольничке рядом со значением Tracking и потяните движок для выбора значения, либо введите нужное значение вручную. | |
Для использования встроенного в шрифт кернинга, выберите Kern. | |
Для указания базового смещения, щелкните на треугольничке рядом с параметром Baseline Shift и выберите позицию из меню: Normal - текст на базовой линии, Superscript - под базовой линией, и Subscript - над базовой линией. | |
Установка выравнивания отступов
Выравнивание определяет позицию каждой строки текста в параграфе относительно левого и правого краев текстового блока. Текст может быть выровнен по левому или правому краю, центрирован внутри текстового блока или выровнен по обоим краям.
Отступы определяют пространство между границей текстового блока и параграфом текста. Отступ абзаца определяет дистанцию между границей параграфа и началом первой строки. Расстояние между строками определяет дистанцию между соседними линиями в параграфе.
Для указания выравнивания, отступов, отступа абзаца и расстояния между строками, используйте панель Paragraph.
Для установки выравнивания, отступов, отступа абзаца и расстояния между строками :
1 | Если панель Paragraph не показана, выберите Window > Panels > Paragraph. |
2 | На панели Paragraph установите следующие параметры : |
Для установки выравнивания, нажмите кнопку Left, Center, Right или Full. | |
Для установки левого или правого отступа, нажмите треугольничек рядом со значением Left Margin или Right Margin и потяните движок для выбора значения или введите значение вручную. | |
Для установки отступа абзаца, нажмите треугольничек рядом со значением Indent и потяните движок для выбора значения или введите значение вручную. | |
Для установки расстояния между строками, нажмите треугольничек рядом со значением Line Spacing и потяните движок для выбора значения или введите значение вручную. | |
Выбор шрифта размера стиля и цвета
Вы можете установить шрифт, размер, стиль и цвет для выбранного текста, используя панель Character.
При установлении цвета текста, можно использовать только однотонный цвет, но не градиент. Для применения градиента вы должны конвертировать текст в его компоненты, линии и заливки. Смотрите Изменение формы текста.
Используйте панель Character для выбора шрифта, размера, стиля и цвета:
1 | Если панель Character не показана, выберите Window > Panels > Character. |
2 | Щелкните на треугольничке рядом с названием шрифта и выберите шрифт из списка или введите имя шрифта вручную. |
Примечание: Шрифты _sans, _serif, и _typewriter являются device шрифтами. Эти шрифты не встраиваются в SWF файл. Смотрите О встраиваемых и device шрифтах.
3 | Щелкните на треугольничке рядом с размером шрифта и потяните движок для выбора значения или введите значение вручную. |
Размер шрифта устанавливается в поинтах, относительно текущих единиц измерения. | |
4 | Для применения жирного стиля или курсива, нажмите кнопку Bold или Italic. |
5 | Для выбора цвета текста, нажмите на цветной квадратик и сделайте одно из предложенного: |
Выберите цвет из палитры. | |
Введите цвет в шестнадцатиричном виде в текстовое поле. | |
Нажмите кнопку Color Picker и выберите цвет таким образом. | |
Для большей информации по выбору цвета смотри Обзор работы с цветом. | |
Выделение текста
Во время редактирования или изменения атрибутов текста, вы должны сначала выделить символы, которые хотите изменить.
Для выделения символов в текстовом блоке :
1 | Выберите инструмент Text. |
2 | Сделайте одно из предложенного : |
Потяните для выделения символов. | |
Щелкните два раза чтоб выделить слово. | |
Щелкните на начале выделения и удерживая Shift на конце выделения. | |
Нажмите Ctrl+A (Windows) или Command+A (Macintosh) для выделения всех символов в блоке. | |
Для выделения текстовых блоков :
Выберите инструмент Arrow (стрелка) и щелкните на блоке. Щелкайте, удерживая Shift, для выделения нескольких блоков.
Анимирование экземпляров графики
Можно определить порядок воспроизведения анимационных последовательностей внутри графического экземпляра во время воспроизведения основного клипа путем установки опций в панели Instance.
Анимированный графический символ связан с линейкой клипа в котором он расположен. Символ-мувиклипа, однако, имеет собственную независимую линейку времени. Анимированные графические символы показываются в режиме редактирования символа, т.к. они используют линейку основного клипа. Символы-мувиклипа показываются как статические объекты на сцене и не показываются как анимация в среде Flash-редактора.
Чтобы сделать анимацию графического экземпляра:
1 | Выделите графический экземпляр на сцене и выберите Window > Panels > Instance или Alt-двойной клик (Windows) или Option-двойной клик (Macintosh) на экземпляре в сцене для вывода панели Instance на передний план. |
2 | Выберите опцию анимации из всплывающего меню ниже типа экземпляра: |
Loop зацикливает все анимационные последовательности, содержащиеся в текущем экземпляре на количество кадров, которое занимает экземпляр. | |
Play Once проигрывает анимационную последовательность, начиная с указанного Вами кадра до конца, затем останавливается. | |
Single Frame показывает один кадр из анимационной последовательности. Укажите который кадр показывать. | |
Дублирование символов
Дублирование символов позволяет использовать старый символ в качестве основы для создания нового символа.
Дублирование символов:
1 | Выберите символ в библиотеке (Library). |
2 | Чтобы сдублировать символ сделайте одно из следующего: |
Нажмите правую кнопку мышки (Windows) или нажмите Control-click (Macintosh) и выберите Duplicate из контекстного меню. | |
Выберите Duplicate из меню Options библиотечки. | |
Изменение цвета и прозрачности экземпляра
Каждый экземпляр символа может иметь собственный цветовой эффект. Для установки цвета и прозрачности экземпляра используйте панель Effect, прикрепленную к панели Instance. Установки в панели Effect также действуют на растровые картинки, расположенные в символах.
Экземпляры символов, каждый со своим собственным цветовым эффектом
Когда Вы меняете цвет и прозрачность экземпляра в отдельном кадре, Flash показывает изменения как только этот кадр отображается. Чтобы сделать постепенное изменения цвета, Вы должны использовать твининг (последовательность кадров с постепенными изменениями). Когда Вы делаете твининг цвета, нужно внести различные установки эффекта в начальный и конечные кадры экземпляра, и затем применить твининг для постепенного изменения цвета во времени. См. Построение промежуточных отображений для экземпляров, групп и текста.
Твининг постепенно изменяет цвет или прозрачность экземпляра.
Примечание: Если Вы применяете цветовой эффект к клипу, который содержит множество кадров, Flash применяет эффект к каждому кадру в этом клипе.
Для изменения цвета и прозрачности экземпляра:
1 | Выделите экземпляр на сцене и выберите Window > Panels > Effect. |
Вы также можете применить Alt-двойной клик (Windows) или Option-двойной клик (Macintosh) к экземпляру на сцене, чтобы вывести панель Instance вперед, затем нажать закладку Effect. | |
2 | Выберите одну из следующих опций в панели Effect: |
Brightness (Яркость) применяет относительное осветление или затемнение картинки, измеренное шкалой от черного (-100%) до белого (100%). | |
Tint (Окраска) окрашивает экземпляр одинаковым оттенком. Используйте бегунок Tint вверху панели, для установки процента оттенка, от прозрачного (1%) до интенсивного (100%). Для выбора цвета, введите значения красного, зеленого и синего в текстовые окошки или выставьте цвет бегунками, или пипеткой (Color Picker). | |
Alpha (Прозрачность) изменяет прозрачность экземпляра. | |
Advanced (Продвинутый) отдельно применяет значение красного, зеленого, синего и прозрачность экземпляра. Это очень удобно, когда Вы хотите создать и анимировать утонченные цветовые эффекты на объектах типа растровых картинок. Элементы управления слева позволяют Вам уменьшить цветность или прозрачность на определенный процент. Элементы управления справа позволяют Вам уменьшить или увеличить цветность или прозрачность на постоянное значение. | |
Текущие значения красного, зеленого, синего и прозрачности умножены на значения процента в правой колонке, в результате получаются новые цвета. Например, если текущее значение красного 100, установка левого бегунка на 50% и правого бегунка на 100 дает новое значение красного 150 ((100 x .5) + 100 = 150). | |
Любые изменения вступают в силу автоматически. | |
Также возможно изменение цвета с помощью объекта ActionScript Color. За дополнительной информацией обращайтесь к ActionScript Help.
Изменение свойств экземпляра
Каждый экземпляр символа имеет свои собственные свойства. Можно менять тон, прозрачность и яркость экземпляра, переопределять тип поведения экземпляра (например, изменить символ графики на анимацию) и устанавливать поведение анимации внутри графического экземпляра. Вы также можете наклонять, вращать или масштабировать экземпляр, не влияя на сам символ.
Вдобавок, Вы можете дать название экземпляру мувиклипа, чтобы использовать его в скриптах ActionScript.
Чтобы подредактировать свойства, пользуйтесь панелью Instance (Windows > Panels > Instance) и панелью Effect (Windows > Panels > Effect).
Свойства экземпляра хранятся вместе с ним. Если Вы редактируете символ или переключаете экземпляр на другой символ, любые свойства экземпляра, которые Вы изменили, остались в силе.
Оригинальный символ и два измененных экземпляра
Изменение типа экземпляра
Возможно изменение типа экземпляра для переопределения его поведения в клипе. Например, если графический экземпляр содержит анимацию, которую Вы хотите воспроизводить независимо от основной линейки клипа, можете переопределить графический экземпляр, как экземпляр мувиклипа.
Чтобы изменить тип экземпляра:
1 | Выделите экземпляр на сцене и выберите Window > Panels > Instance или Alt-дважды кликните (Windows) или Option-дважды кликните (Macintosh) экземпляр на сцене, чтобы вывести панель Instance на передний план. |
2 | Для изменения типа поведения, выберите Графику (Graphic), Кнопку (Button) или Мувиклип (Movie Clip). |
Конвертация анимации на сцене в мувиклип
Если Вы только что создали последовательность анимации на сцене и хотите использовать ее не только на ней, а еще где-то в клипе или если хотите поуправлять этой последовательностью как каким-нибудь экземпляром, можете выделить и сохранить ее как мувиклип.
Чтобы сконвертировать анимацию на сцене в мувиклип:
1 | На основной линейке (Timeline), выделите каждый кадр в каждом слое анимации, которую Вы хотите использовать. |
2 | Чтобы скопировать кадры, сделайте одно из следующего: |
Нажмите правую кнопку мышки (Windows) или Control-click (Macintosh) на любом выделенном кадре и выберите Copy Frames из контекстного меню. | |
Выберите Edit > Copy Frames. | |
3 | Снимите Ваше выделение(я) и убедитесь, что на сцене больше нигде ничего не выделено. Затем выберите Insert > New Symbol. |
4 | В диалоговом окне свойства символа (Symbol Properties), как-нибудь обзовите символ. В качестве поведения выберите Movie Clip, потом OK. |
Flash откроет окно редактирования нового символа. | |
5 | На линейке нажмите правой кнопкой мышки на первом кадре первого слоя и выберите Edit > Paste Frames. |
Это вставит кадры, скопированные из основной линейки сцены, в линейку данного мувиклипа. Любая анимация, кнопки или элементы интерактивности из скопированных кадров теперь становятся независимой анимацией (мувиклипом), который вы можете использовать где угодно в своем творении. | |
6 | Чтобы выйти из режима редактирования символа: |
Выберите Edit > Edit Movie. | |
Нажмите на кнопку сцены в верхнем левом углу окна документа. | |
Нажмите на кнопку сцены в верхнем правом углу окна документа и выберите сцену из меню. | |
7 | Удалите анимацию из основного клипа путем выделения всех кадров и всех слоев на линейке и выбора Insert > Remove Frame. |
Обзор использования символов и их экземпляров
Символом может быть картинка, кнопка или мувиклип (анимация), которые Вы создаете, а потом используете в своем клипе или клипах. Любой созданный символ автоматически помещается в библиотеку. Экземпляр (instance) - это копия символа, расположенного на сцене или вложенного в другой символ. Экземпляр может сильно отличаться от самого символа цветом, размером и назначением. При редактировании символа изменения касаются и его экземпляров, но если редактируется экземпляр символа, то изменения касаются только его.
Примечание: Можно также создавать шрифтовые символы во Flash. Смотри Создание шрифтовых символов.
Использование символов в клипах значительно уменьшают размер файла, несколько экземпляров одного символа занимают меньше места, чем то же количество схожих отдельных элементов. Например, Вы можете уменьшить размер своего клипа, если сконвертируете статическую графику, например фон, в символ, который сможете использовать и в дальнейшем. Использование символов также увеличивает скорость, с которой воспроизводится Ваш клип, т.к. браузер скачивает символ только один раз за сеанс.
Вы также можете поместить свои символы в библиотеку, чтобы использовать их в других клипах. При этом их не нужно импортировать в клип, достаточно просто указать на их место в библиотеке. Смотри Использование общих библиотек.
Чтобы посмотреть интерактивный ролик по использованию символов и их экземпляров, выберите в меню Help > Lessons > Symbols.
Символ в библиотеке и два его экземпляра на сцене
Получение информации об экземпляре на сцене
В только что созданном клипе бывает трудно определить, что за экземпляр символа расположен на сцене, особенно если Вы работаете со множеством экземпляров одного символа. Эти трудности можно преодолеть, используя панели Экземпляра (Instance), Информации (Info) или Инспектора клипов (Movie Explorer).
Все панели показывают имя выделенного экземпляра и значок, указывающий на его тип ? графика, кнопка или мувиклип. Вдобавок, Вы можете посмотреть следующую информацию:
В панели Instance, можете посмотреть тип экземпляра и установки: для графики - режим зацикливания и длину символа в кадрах; для кнопок - опции отслеживания движения мышки; и для мувиклипов, длину клипа. | |
В панели Info, можете посмотреть координаты и размер выделенного экземпляра. | |
В Movie Explorer, можете просматривать содержимое текущего клипа, включая экземпляры и символы. См. Использование Movie Explorer. |
Вдобавок, в панели Actions, можете просмотреть любые действия, назначенные символам графики, кнопке или мувиклипу.
Чтобы получить информацию об экземпляре на сцене:
1 | Выделите экземпляр на сцене. |
2 | Чтобы вывести панель, которой Вы хотите воспользоваться: |
Чтобы показать панель Instance, выберите Window > Panels > Instance или Alt-двойной клик (Windows) или Option-двойной клик (Macintosh) на выделенном экземпляре. | |
Чтобы показать панель Info, выберите Window > Panels > Info. | |
Чтобы показать панель Actions, выберите Window > Actions. | |
Чтобы показать Movie Explorer, выберите Window > Movie Explorer. | |
Чтобы узнать больше о Movie Explorer, смотри Использование Movie Explorer. |
|
Выделенный экземпляр кнопки и информация отображается в панелях Instance, Info, Movie Explorer и Actions |
|
Чтобы посмотреть описание для выделенного символа в окне Movie Explorer:
1 | Нажмите Show Buttons, Movie Clips и Graphics кнопки вверху окна Movie Explorer. |
2 | Щелкните правой кнопкой мышкой (Windows) или Control-click (Macintosh) и выберите Show Symbol Instances (Показать экземпляры символа) и Go to Symbol Definition из контекстного меню или просто выберите эти опции из всплывающего меню в верхнем правом углу окна Movie Explorer. |
Чтобы перейти к сцене, содержащей экземпляры выделенного символа:
1 | Выведите описание символа, как указано в предыдущей процедуре. |
2 | Щелкните правой кнопкой мышкой (Windows) или Control-click (Macintosh) и выберите Show Movie Elements и Select Symbol Instances из контекстного меню или выберите эти опции из всплывающего меню в правом верхнем углу окна Movie Explorer. |
Разделение экземпляров
Чтобы разорвать связь между экземпляром и символом и сделать из экземпляра коллекцию несвязанных форм и линий, Вам нужно разбить экземпляр. Это удобно для изменения конкретного экземпляра без воздействия на любой другой экземпляр. Если Вы измените исходный символ после разделения экземпляра, изменения не коснутся этого экземпляра.
Чтобы разделить экземпляр символа:
1 | Выделите экземпляр на сцене. |
2 | Выберите Modify > Break Apart. |
Это разделит экземпляр на графические компоненты. | |
3 | Используйте инструменты рисования и закраски для изменения этих элементов по желанию. |
Редактирование символов
При редактировании символа Flash обновляет все его экземпляры в клипе. Можно редактировать символ наряду с другими объектами на сцене используя команду Edit in Place. Другие объекты недоступны для редактирования ("засерены"), чтобы отличить их от редактируемого объекта.
Также возможно редактирование символа в отдельном окне, используя команду Edit in New Window или режим редактирования символа. Редактирование символа в отдельном окне позволяет одновременно видеть линейку символа и главную линейку.
В режиме редактирование символа окно переключается с вида сцены на вид только символа, а крестик показывает точку отсчета. Вдобавок панель Instance засерена и имя символа находится над верхним левым углом окна, выше линейки.
Для редактирования символа в основном окне:
Дважды щелкните экземпляр на сцене. | |
Выберите экземпляр на сцене и щелкните правой кнопкой (Windows) или Control-кликните (Macintosh) и выберите Edit in Place из контекстного меню. |
Для редактирования символа в новом окне:
Выберите экземпляр символа на сцене и щелкните правой кнопкой (Windows) или Control-кликните (Macintosh) и выберите Edit in New Window из контекстного меню. | |
Дважды щелкните на значке символа в окне библиотеки. |
Для редактирования символа в режиме редактирования символа:
Выделите экземпляр символа на сцене и нажмите кнопку Edit Symbol внизу панели Instance. | |
Выберите экземпляр символа на сцене, выберите Edit > Edit Symbols или щелкните правой кнопкой (Windows) или Control-кликните (Macintosh) или выберите Edit из контекстного меню. | |
Дважды щелкните символ в библиотеке, затем выберите Edit из меню опций библиотеки или щелкните правой кнопкой (Windows) или Control-кликните (Macintosh) и выберите Edit из контекстного меню. |
Символ, привязанный к экземпляру, откроется в режиме редактирования символа. Теперь Вы можете его редактировать. Все экземпляры символа в клипе обновятся, отражая внесенные изменения.
Во время редактирования символа можно использовать инструменты рисования, импортировать звуки и изображения или создавать экземпляры других символов.
Чтобы вернуться из режима редактирования символа к редактированию клипа:
Выберите Edit > Edit Movie. | |
Щелкните название сцены в левом верхнем углу окна документа. | |
Нажмите кнопку Edit Scene в верхнем правом углу окна документа и выберите сцену из меню. |
Создание экземпляров объектов
Единожды создав символ, Вы можете создавать до черта его (прим. переводчика: в общем много ;)) экземпляров где и когда хотите, даже внутри других символов.
Чтобы создать новый экземпляр символа:
1 | Выберите слой на линейке. |
Flash может размещать экземпляры символов только в ключевых кадрах (keyframes), всегда в текущем слое!. Если Вы поленились выделить для этого нужного дела ключевой кадр, экземпляр (бедненький!) добавится к первому ключевому кадру слева от текущего кадра. | |
2 | Выберите Window > Library чтобы открыть библиотеку (library). |
3 | Затащите этот упрямый символ прямо на сцену (пусть попляшет! ;) |
4 | Если Вы умудрились создать экземпляр символа-графики, выберите Insert > Frame чтобы добавить нужное количество кадров, в котором он (символ) будет содержаться. |
После создания экземпляра символа Вы можете попользовать панель (Instance panel) экземпляров (Windows > Panels > Instance) чтобы определить то огромное количество эффектов, действий, режимов отображения, поведения экземпляра, которые позволит Вам выбрать его(ее) величество Macromedia Inc. Поведение (behavior) экземпляра созвучно поведению символа, если только Вам не взбредет в голову определить его для этого экземпляра самостоятельно. Любые изменения, которые Вы сделаете, вступят в силу только для данного экземпляра (а никак не для символа - он папа (или мама - не суть)). См. Изменение цвета и прозрачности экземпляра символа.
От переводчика: в общем, пробило меня на лирику; эта (в смысле часть про инстансы и символы) РЕДАКТИРОВАЛАСЬ С ПОМОЩЬЮ MACROMEDIA DREAMWEAVER 90 DAY'S TRIAL EDITION, чтобы там VM не говорил в russian-flash-news на www.egroups.com Ж;-))
ЗЫ: F10 еще никто не отменял ;)
От редактора: Стиль перевода сохранен в неприкосновенности :)
По большому счету не суть важно в чем делалось, главное владеть инструментом!
Создание кнопок
Кнопки - это на самом деле интерактивные 4-х кадровые клипы. Когда вы выбираете тип символа кнопка, Flash создает линейку из 4-х кадров. Первые три кадра отражают три состояния кнопки, четвертый кадр определяет область реакции на мышь. Линейка на самом деле не проигрывается, она просто реагирует на движение курсора и действия (нажатие/отжатие кнопки, наезд/отъезд и т.д.) выбором соответствующего кадра.
Чтобы кнопка приобрела элементы интерактивности, Вы должны расположить ее экземпляр на сцене и назначить ему определенные команды. Они должны быть назначены экземпляру кнопки, а не кадру на линейке самой кнопки.
Каждый кадр на линейке кнопки имеет свою функцию:
Первый кадр - Up, отражает состояние кнопки, когда курсор не наведен на нее. | |
Второй кадр - Over, отражает состояние кнопки, когда курсор находится над кнопкой. | |
Третий кадр - Down, отражает состояние нажатой кнопки. | |
Четвертый - Hit, определяет область реакции на мышь. Он не отражается в клипе. |
|
Типичное содержание Up, Over, Down и Hit кадров (собранных в третьем кадре) |
Хотите посмотреть интерактивный урок по созданию кнопок во Flash? Идите сюда Help > Lessons > Buttons.
Чтобы создать кнопку:
1 | Выберите Edit > Deselect All чтобы быть уверенными в том, что Вы ничего не выделили на сцене. |
2 | Выберите Insert > New Symbol или нажмите Control+F8 (Windows) или Command+F8 (Macintosh). |
Чтобы создать кнопку, Вы делаете кадры кнопки ключевыми (F6). | |
3 | В диалоговом окне Symbol Properties (Свойства символа), введите имя новой кнопки и тип ее поведения (Behavior) - Button (кнопка). |
Flash переключится в режим редактирования символа. Заголовок линейки изменится: теперь он будет отражать четыре последовательных кадра Up, Over, Down и Hit. Первый кадр Up - пустой ключевой. |
|
4 | Чтобы создать картинку для кадра Up, используйте инструменты рисования, импортируйте графику или располагайте экземпляр другого символа на сцене. |
Вы можете использовать статический или анимационный символ (graphic или movie clip symbol) в кнопке, но нельзя использовать "кнопку в кнопке". Используйте анимационный символ, если Вам захотелось, чтобы кнопка была "живой". | |
5 | Нажмите второй кадр - Over, и выберите Insert > Keyframe. |
Flash вставит ключевой кадр, скопировав содержимое предыдущего кадра - Up. | |
6 | Измените содержимое кадра Over как Вам заблагорассудится. |
7 | Повторите шаги 5 и 6 для оставшихся кадров - Down и Hit. |
Маленькая ремарка - этакая "нота бене": кадр Hit не отображается на сцене - он "невидим", но он определяет область реакции на мышь. Убедитесь, что то, что Вы запихнули в этот кадр имеет достаточно широкую непрерывную область, перекрывающую все графические элементы кадров Up, Down, и Over. Не смущайтесь, если эта область больше, нежели самый большой видимый элемент кнопки. Хинт: если Вы все-таки умудрились ничего не нарисовать в кадре Hit, то не расстраивайтесь: его роль сыграет кадр Up. Так что думайте, что там рисовать. | |
Вы можете создать разделенные области реакции на мышь, поместив кадр Hit в другое место (вдали от других кадров). | |
8 | Для того, чтобы назначить звук состоянию кнопки, выберите кадр этого состояния на линейке, выберите Modify > Frame чтобы отразить панель кадров (Frame panel), а затем нажмите закладку звука (Sound tab) в панели кадров. См. Озвучивание кнопок. |
9 | Когда вы закончите, выберите Edit > Edit Movie. Вытаскивайте Вашу кнопку из библиотеки на сцену или в мувиклип чтобы создать ее экземпляр. |
Создание символов
Вы можете создать символ из выделенных объектов на сцене или создать пустой символ и нарисовать или скопировать его содержимое в режиме редактирования символа.
При использовании символов, содержащих анимацию, Вы можете создать клипы со множеством движений, не увеличивая при этом размера файла клипа. Рассмотрим создание анимации в символе, когда в нем используются повторяющиеся или циклические движения ? взмахивание крыльями птицы, например.
Чтобы создать новый символ из выделенных элементов:
1 | Выделите элемент или несколько элементов на сцене и выберите Insert > Convert to Symbol (Вставка > Сконвертировать в символ). |
2 | В диалоговом окне Symbol Properties (Свойства символа) укажите имя символа и его назначение (the behavior) ? Графика, Кнопка или Анимация (Graphic, Button, or Movie Clip). Смотрите Типы поведения символа. |
3 | Нажмите OK. |
Flash добавит символ в библиотеку. Выделенное Вами на сцене станет экземпляром символа. Теперь Вы более не сможете редактировать объект прямо на сцене, а должны открыть его в режиме редактирования символа. Смотрите Редактирование символов. | |
Чтобы создать пустой символ:
1 | Убедитесь, что Вы ничего не выделили на сцене и сделайте одно из следующего: |
Выберите Insert > New Symbol. | |
Нажмите кнопку New Symbol, расположенную слева внизу окна библиотеки (Library). | |
Выберите New Symbol из меню Library Options в верхнем правом углу библиотеки (Library). |
|
2 | В диалоговом меню Symbol Properties напишите имя символа и выберите его назначение (the behavior) ? Графика, Кнопка или Анимация (Graphic, Button, or Movie Clip). Смотрите Типы поведения символов. |
3 | Нажмите OK. |
Flash добавит символ в библиотеку и переключится в режим редактирования символа. В этом режиме название символа находится над верхним левым углом окна, над линейкой, а крестик показывает точку отсчета символа. | |
4 | Чтобы создать содержимое символа, используйте линейку, рисуйте, импортируйте картинки, звуки или создавайте экземпляры других символов. |
5 | Когда Вы закончите создание содержимого символа, сделайте одно из следующего, чтобы вернуться в режим редактирования клипа: |
Выберите из меню Edit > Edit Movie. | |
Нажмите на кнопку Scene в верхнем левом углу окна сцены. |
|
Нажмите кнопку редактирования сцены Edit Scene в верхнем правом углу документа и выберите сцену из меню. |
|
Типы поведения символа
Каждый символ имеет уникальную линейку (Timeline) и сцену (Stage). Когда Вы создаете символ, то выбираете, как он будет себя вести, в зависимости от того, какую роль в клипе Вы ему отвели.
Используйте символ-графику для неподвижных картинок, часто используемых частей анимации, связанных с линейкой основного мувиклипа. Символы Графики действуют синхронно линейке основного мувиклипа. Интерактивные элементы и звуки не будут работать в графических символах. |
|
Используйте символы-кнопки для создания интерактивных меню, реагирующих на нажатия или другие действия мыши. Вы определяете графику, связанную с различными состояниями кнопки, а потом назначаете действия для ее экземпляра. Смотрите Назначение действий объектам. |
|
Используйте мувиклипы (символы анимации) для создания анимированных кусочков. Мувиклипы имеют свою собственную линейку (Timeline), не зависящую от линейки основного мувиклипа. Представьте себе, что в основном клипе есть мини-клипы, содержащие интерактивные элементы управления, звуки, даже экземпляры других мувиклипов. Вы также можете разместить экземпляры мувиклипов внутри символов-кнопок, чтобы сделать анимированные кнопки. |
|
Вы можете назначать параметры клипов (переменные с их значениями) чтобы создавать "умные" (smart) клипы. Также можно добавить действия и скрипты для "умного" клипа чтобы он сам создавал элементы интерфейса, например радио-кнопки, всплывающие меню или подсказки, реагирующие на нажатия мыши либо другие события. За дополнительной информацией обращайтесь к ActionScript Help. |
Примечание: Интерактивность и анимация мувиклипов не работают при воспроизведении клипа в среде Flash-редактора. Чтобы увидеть анимацию и почувствовать интерактивность, выберите в меню Control > Test Movie или Control > Test Scene. Смотрите Просмотр и тестирование клипов.
Включение редактирование и тестирование кнопок
По умолчанию, Flash отключает кнопки во время редактирования, чтобы облегчить работу с ними и их выделение. Когда кнопка отключена, нажатие на ней выделяет ее. Когда кнопка включена, она реагирует на события, которые Вы определили так, как будто клип воспроизводится. Вы все еще можете выделить включенные кнопки, однако, обычно лучше отключить их во время редактирования и включать только для тестирования их поведения.
Для включения/выключения кнопок:
Выберите Control > Enable Simple Buttons. Галочка на команде меню показывает, включены ли кнопки. Выберите команду снова, чтобы отключить кнопки.
Любая кнопка на сцене теперь реагирует на мышь. Когда Вы двигаете курсор над кнопкой, Flash отражает кадр Over, когда Вы нажимаете на активной области кнопки, Flash показывает кадр Down.
Чтобы выделить включенную кнопку:
Используйте инструмент "Стрела" (Arrow) чтобы выделить прямоугольную область вокруг кнопки.
Чтобы переместить или отредактировать включенную кнопку:
1 | Выделите кнопку как было описано выше. |
2 | Сделайте одно из следующего: |
Используйте клавиши курсора, чтобы переместить кнопку. | |
Выберите Window > Panels > Instance для редактирования кнопки или Alt-двойной щелчок мышью (Windows) или Option-двойной щелчок мышью (Macintosh). | |
Чтобы проверить кнопку, сделайте одно из следующего:
Выберите Control > Enable Simple Buttons. Подвигайте курсор над включенной кнопкой, чтобы протестировать ее. | |
Выберите кнопку в библиотечке (Library) и нажмите кнопку Play в окне просмотра библиотечки. | |
Анимация в кнопках не видна, пока Вы находитесь в среде Flash-редактора. Смотрите Просмотр и тестирование клипов. | |
Выберите Control > Test Scene или Control > Test Movie. |
Замена экземпляра другим символом
Назначение экземпляру другого символа в результате дает отображение другого экземпляра на сцене, однако сохраняя все свойства предыдущего экземпляра (такие как цветовые эффекты и реакцию на кнопки).
Скажем, например, Вы создаете мультик с символом Крысы и ее характером, но вдруг решаете изменить героя на Кота. Вы можете переключить символ Крысы на Кота и Кот будет во всех тех кадрах мультика, где была Крыса.
Чтобы переназначить символ для экземпляра:
1 | Выделите экземпляр на сцене и выберите Window > Panels > Instance или Alt-двойной клик (Windows) или Option-двойной клик (Macintosh) на экземпляре в сцене чтобы вывести панель Instance вперед. |
2 | Нажмите кнопку Swap Symbol (Поменять символ) внизу панели Instance. |
3 | В диалоговом окне Swap Symbol, выделите символ, которым замените текущий, ранее назначенный экземпляру. Чтобы сдублировать выделенный символ, нажмите кнопку Duplicate Symbol внизу диалогового окна. |
Дублирование позволит сделать новый символ на основе существующего в библиотеке. Это удобно, если нужно сделать несколько символов, которые незначительно отличаются друг от друга. | |
Анимация форм
Анимируя формы, вы можете создавать эффект, подобный морфингу, заставляя одну форму "перетекать" в другую. Flash также может анимировать местонахождение, размер и цвет форм.
Анимация одного объекта в один момент времени даёт наилучший результат. Если вы анимируете несколько форм, то они должны быть на одном слое.
Flash не может анимировать формы групп, символов, блоков текста или растровых изображений. Используйте разбивку на части (Modify > Break Apart), чтобы анимировать формы таких объектов. См. Разбивка на части групп и объектов.
Чтобы контролировать сложные или неправильные изменения формы, используйте на форме специальные метки - хинты (shape hints). Эти хинты определяют, каким именно образом одна форма трансформируется в другую. См. Использование хинтов на форме.
Для анимации формы:
1 | Выберите нужный слой и встаньте в начальный ключевой кадр. |
2 | Создайте изображение для первого кадра анимации. |
Используйте необходимые инструменты для создания нужной формы. | |
3 | Создайте второй ключевой кадр через нужное количество кадров после первого. |
4 | Создайте изображение для второго ключевого кадра. Вы можете изменять форму, размер или положение рисунка, созданного в первом ключевом кадре (пункт 2). |
5 | Нажмите Window > Panels > Frame. |
6 | В списке Tweening, жмите Shape. |
7 | Нажмите кнопку со стрелочкой рядом с надписью Easing и тяните вверх или вниз (или введите цифру вручную), чтобы установить замедление или ускорение анимации: |
Чтобы начать анимацию медленно и убыстрить её к концу, тащите бегунок вниз или установите вручную значение от -1 до -100. | |
Чтобы начать анимацию быстро и замедлить её к концу, тащите бегунок вверх или установите вручную значение от 1 до 100. | |
По умолчанию, скорость изменения величин в анимации постоянна, и функция Easing часто позволяет добиться необходимого эффекта. | |
8 | Также выберите значение для поля Blend: |
Значение Distributive делает анимацию в промежуточных кадрах более мягкой и плавной. | |
Значение Angular делает анимацию в промежуточных кадрах более угловатой, сохраняя прямые линии. | |
Примечание: Значение Angular более подходит для форм с углами и прямыми линиями. Если форма не содержит углов, используйте Distributive.
Автоматическая анимация объектов групп и текста
Чтобы анимировать изменения в параметрах объектов, групп или текста, используйте анимацию движения. Flash может анимировать местоположение, размер, угол поворота и skew-искажение объектов. Также Flash может анимировать цвет объектов, создавая плавные переходы цвета и прозрачности. Для анимации цвета, объект должен быть конвертирован в элемент (symbol). См. Создание элементов.
Если вы изменяете число кадров (расстояние) между двумя ключевыми кадрами или изменяете что-либо в одном из них, Flash автоматически пересчитывает промежуточные кадры.
Можно создавать анимацию движения одним из двух способов:
Создайте начальный и конечный ключевые кадры анимации и в панели Frame Properties выберите опцию Motion Tweening. | |
Создайте первый ключевой кадр анимации, нажмите Insert > Create Motion Tween и переместите объект в новое место. Flash автоматически создаст второй ключевой кадр. |
В процессе анимации местоположения объекта, можно заставить его двигаться не по линии от одной точке к другой, а по заданному пути. См. Перемещение объекта по пути.
Второй, третий и четвёртый кадры - результат автоматической анимации между первым и последним ключевыми кадрами.
Для создания автоматической анимации движения используется опция Motion Tweening:
1 | Щелкните на название слоя, чтобы сделать его текущим и выделите на монтажной линейке в этом слое кадр, с которого бы хотели начать анимацию. |
2 | Создайте какой-нибудь объект на сцене или перетащите его на сцену из окошка библиотеки (Library). |
Автоматическая анимация движения оперирует только объектами, являющимися элементами (symbols). | |
3 | Создайте второй ключевой кадр в том месте, где ваша анимация должна кончаться. |
4 | Сделайте любые из действий над элементом в конечном (втором) ключевом кадре: |
Переместите его по сцене. | |
Измените его размер, угол поворота или skew-деформации. | |
Измените его цвет (только образцы (instances) и текстовые блоки). | |
Для анимации цвета других элементов, используйте анимацию формы. См. Анимация форм (shape tweening). | |
5 | Выберите окно Window > Panels > Frame. |
6 | В поле Tweening, выберите Motion. |
7 | Если вы изменяли размер объекта (пункт 4), отметьте флажок Scale, чтобы анимировать изменение размера. (Прим.пер.: Этот флажок отмечен по умолчанию, не думаю, что у вас будет большая необходимость отключать его.) |
8 | Встаньте на первый ключевой кадр, нажмите и потяните кнопку с треугольничком около надписи Easing или введите значение вручную в окошке, чтобы установить величину изменения между промежуточными кадрами: |
Чтобы начать движение медленно и убыстрить его к концу анимации, потяните бегунок вверх или введите значение от -1 до -100. | |
Чтобы начать движение быстро и замедлить его к концу анимации, потяните бегунок вниз или введите значение от 1 до 100. | |
По умолчанию, степень изменения значений между промежуточными кадрами постоянна и функция Easing позволяет добиться чёткого контроля появления или исчезания объектов, создавая необходимый эффект. (Прим.пер.: поэкспериментируйте с функцией Easing, она очень полезна.) | |
9 | Чтобы контролировать поворот объекта в анимации, используются опции из списка Rotate: |
Выбирайте None (стоит по умолчанию) чтобы объект не поворачивался. (Прим.пер.: на самом деле по умолчанию там стоит Auto, что логичнее.) | |
Выбирайте Auto, чтобы направление поворота объекта выбиралось автоматически. (Прим.пер.: подходит, если вы поворачиваете объект менее чем на 180 градусов.) | |
Выбирайте поворот по часовой стрелке (CW) или против часовой стрелки (CCW) чтобы поворачивать объект как вам необходимо, можете ввести количество поворотов вручную. | |
Примечание: Поворот, введённый вручную, прибавляется к повороту объекта, сделанному в сцене (Пункт 4).
10 | Если для движения объекта вы используете нарисованный вручную путь, то отметьте флажок Orient to Path. См. Перемещение объекта по пути. |
11 | Отметьте флажок Synchronizе чтобы быть уверенным, что клипы, вставленные в главную сцену, будут правильно зацикливаться. |
Используйте synchronize, если количество кадров во вложенной в мувик (movie clip) анимации не совпадает с его количеством кадров в сцене. | |
12 | Если вы используете движение по пути, отметьте флажок snap, чтобы присоединить объект к пути. |
Для создания автоматической анимации движения используется команда Create Motion Tween:
1 | Встаньте на пустой ключевой кадр и нарисуйте на сцене объект или перетащите его из библиотеки (Library). |
2 | Жмите Insert > Create Motion Tween. (Прим.пер.: или правой кнопкой на кадре.) |
Если вы нарисовали новый объект, Flash автоматически сконвертирует его в символ (symbol) и назовёт его tween1. Если вы создаёте таким образом ещё объекты, они называются tween2, tween3 и так далее. (Прим.пер.: Не очень-то это удобно, верно? Проще вручную tween на кадры делать - см. выше.) | |
3 | Щелкните на кадре, в котором бы хотели закончить вашу анимацию, а потом нажмите Insert > Frame. |
4 | Перемещайте объект, изменяйте его размер, поворачивайте объект, как вам надо. Когда все необходимые изменения будут внесены, снимите его выделение (щелкните в любое другое место рабочего поля). |
Ключевой кадр добавлен автоматически. |
|
5 | Выберите ключевой кадр в конце анимации и загляните в Window> Panels > Frame. Motion Tweening должен быть выставлен автоматически. |
6 | Если вы изменяли размер объекта, проверьте чтобы флажок Scale был отмечен. |
7 | Нажмите и потяните кнопку с треугольничком около надписи Easing или введите значение вручную в окошке, чтобы установить величину изменения между промежуточными кадрами: |
Чтобы начать движение медленно и убыстрить его к концу анимации, потяните бегунок вверх или введите значение от -1 до -100. | |
Чтобы начать движение быстро и замедлить его к концу анимации, потяните бегунок вниз или введите значение от 1 до 100. | |
По умолчанию, степень изменения значений между промежуточными кадрами постоянна, и функция Easing позволяет добиться чёткого контроля появления или исчезания объектов, создавая необходимый эффект. (Прим.пер.: поэкспериментируйте с функцией Easing, она очень полезна.) | |
8 | Для контроля поворота объекта в анимации, используются опции из списка Rotate: |
Выбирайте None (стоит по умолчанию) чтобы объект не поворачивался. (Прим.пер.: на самом деле по умолчанию там стоит Auto, что логичнее.) | |
Выбирайте Auto, чтобы направление поворота объекта выбиралось автоматически. (Прим.пер.: подходит, если вы поворачиваете объект менее чем на 180 градусов.) | |
Выбирайте поворот по часовой стрелке (CW) или против часовой стрелки (CCW) чтобы поворачивать объект как вам необходимо, можете ввести количество поворотов вручную. | |
Note: Поворот, введённый вручную, прибавляется к повороту объекта, сделанному в сцене (Пункт 4).
9 | Если для движения объекта вы используете нарисованный вручную путь, то отметьте флажок Orient to Path. См. Перемещение объекта по пути. |
10 | Отметьте флажок Synchronizе чтобы быть уверенным, что клипы, вставленные в главную сцену, будут правильно зацикливаться. |
Используйте synchronize, если количество кадров во вложенной в мувик (movie clip) анимации не совпадает с его количеством кадров в сцене. | |
11 | Если вы используете движение по пути, отметьте флажок snap, чтобы присоединить объект к пути. |
Чтобы создать ключевой кадр сделайте одно из нижеследующего
Выделите кадр на монтажной линейке и нажмите Insert > Keyframe. | |
Щелкните правой кнопкой мыши (Windows) или с клавишей Control (Macintosh) на кадре в монтажной линейке и в появившемся меню выберите Insert Keyframe. |
Использование хинтов на форме
Чтобы контролировать сложные изменения контуров и исправлять неправильные, используйте хинты (shape hints). Ими метятся точки, которые должны соответствовать друг другу в начальной и конечной формах. К примеру, если вы делаете анимацию лица, которое изменяет выражение, можете пометить хинтами каждый глаз. После этого в процессе анимации, контуры лица не смешиваются беспорядочно и каждый глаз изменяется отдельно.
Сравните: анимация формы без хинтов и с ними.
Хинты визуально представлены как разноцветные кружки с буквами от a до z внутри для идентификации соответствующих пар точек. Можно использовать до 26 точек.
Хинты рисуются жёлтым цветом в начальном ключевом кадре и зелёным - в конечном. Будучи ещё не поставленными на кривую, точки отображаются красным.
Для получения наилучших результатов, имейте ввиду следующее:
В сложных длинных превращениях рисуйте промежуточные ключевые кадры. | |
Не нарушайте логику расстановки точек. Например, анимируя треугольник и используя три хинта, сохраняйте порядок их расстановки - a-b-c в первом и a-b-c во втором ключевых кадрах. | |
Хинты работают лучше, если расставлены против часовой стрелки начиная с верхнего левого угла контура. |
Для использования хинтов:
1 | Выберите первый ключевой кадр анимации. |
2 | Нажмите Modify > Transform > Add Shape Hint. |
Первый хинт появится где-то на сцене, окрашенный в красный цвет и с буквой a внутри. | |
3 | Переместите его на точку, которую хотите замаркировать. |
4 | Перейдите в конечный ключевой кадр анимации. |
Конечный зелёный хинт, помеченный буквой a, уже находится на сцене. | |
5 | Перетащите его в место, которое должно соотноситься с местом точки замаркированной в начальном кадре. |
6 | Запустите анимацию снова, чтобы увидеть, как хинты влияют на процесс трансформации формы. Перемещайте хинты для точной подстройки анимации. |
7 | Повторяйте процесс для добавления новых хинтов. Они будут появляться с буквами b, c, d и так далее. |
Работая с хинтами, вы имеете дополнительные возможности:
Чтобы увидеть все хинты, нажмите View > Show Shape Hints. Слой и ключевой кадр, содержащий их, должны быть текущими. | |
Чтобы удалить хинт, "вытащите" её со сцены. | |
Чтобы убрать сразу все хинты, нажмите Modify > Transform > Remove All Hints. (Прим.пер.: По нажатию правой кнопки мыши на хинт выскакивает контекстное меню со следующими возможностями: убрать хинт, убрать все хинты, добавить хинт, показать/скрыть хинты. Это удобно. |
О частоте кадров
Слишком маленькая частота кадров (fps - frame-per-second) даёт слишком медленную анимацию, слишком большая - размазывает объекты из-за слишком быстрого движения. 12 кадров в секунду обычно наилучшая установка для Интернет. QuickTime и AVI ролики в Интернет обычно имеют именно такой fps, в то время как в кинофильмах используется значение 24 кадра в секунду. (Прим. пер. : Как правило, возросшая мощность компьютеров позволяет сейчас использовать во flash-клипах скорость 20-30 кадров в секунду. Лично я всегда смело выставляю 25 кадров в секунду, это даёт отличные результаты.)
С возрастанием сложности анимации плавность воспроизведения клипа уменьшается, так что тестируйте свои ролики на разных машинах, чтобы достичь оптимального значения.
Так как вы определяете значение fps для всего flash-клипа, рекомендуется выставлять это значение заранее, до создания анимации. См. Создание нового клипа и редактирование его установок.
О слоях в анимации
Каждая сцена во Flash-клипе может состоять из нескольких слоёв. В процессе создания анимации используйте разные слои для организации компонентов анимации и разделяйте объекты так, чтобы они не перекрывались, не соединялись и не обрезали друг друга. Если вы хотите анимировать движение разных символов в разные стороны, то вы должны разделить их каждый на отдельный слой. Как правило, на заднем (нижнем) слое нарисован статичный фон, а остальные слои содержат по одному анимированному объекту в каждом.
На монтажной линейке слои представлены как "строки".
Когда в сцене много слоёв, редактирование одного из них может быть затруднено. Задача упрощается, если вы работаете только с содержимым нужного вам слоя. См. Использование слоёв: общий обзор.
Об автоматической анимации
Flash может создавать два типа анимации. При автоматической анимации движения (motion tweening) вы определяете размер, местоположение, угол наклона и т.д. для объекта, группы или текстового блока в какой-то момент времени, а потом изменяете эти значения в другой точке времени. При автоматической анимации формы (shape-tweening) вы рисуете фигуру в какой-то момент времени и изменяете её форму в другой момент. В обоих случаях Flash просчитывает значения в кадрах между ключевыми кадрами и создаёт анимацию.
Перемещение объекта по пути
Слои типа Guide (направляющие) позволяют рисовать пути, по которым могут двигаться объекты в процессе анимации. Можете подключить несколько слоёв к слою guide, чтобы несколько объектов двигались по одному и тому же пути. Обычный слой, подключённый к направляющему (guide) слою, становится ведомым (guided) слоем.
В этом примере два объекта на разных слоях двигаются по одному пути.
Чтобы создать путь для движения:
1 | Создайте автоматическую анимацию движения в соответствии с разделом Автоматическая анимация объектов, групп и текста. |
Если Вы отметите флажок Orient to Path, ось объекта будет сориентирована по нарисованному пути (т.е. объект будет поворачиваться, перемещаясь по пути). Если Вы отметите флажок Snap, центр объекта "прицепится" к пути. | |
2 | Сделайте одно из нижеследующего: |
Выделите слой, содержащий нужный объект и нажмите Insert > Motion Guide. | |
Щелкните правой кнопкой мыши (Windows) или Control-клик (Macintosh) слой, содержащий объект, и выберите Add Motion Guide из контекстного меню. | |
Flash создаст направляющий слой над выбранным слоем с "motion guide"-значком слева от названия слоя. |
|
3 | Используя инструменты, нарисуйте в этом слое необходимый вам путь. |
4 | "Прицепите" объект к началу пути в первом кадре анимации и к концу пути в конце анимации. |
Примечание: Для получения наилучшего результата "цепляйте" объект за центр. | |
5 | Чтобы "спрятать" направляющий слой и путь, нарисованный в нём, щелкните кнопку с глазом в этом слое. |
Объект при воспроизведении анимации двигается по пути. |
|
Для присоединения других слоев к направляющему (guide) слою, сделайте одно из следующих действий:
Перетащите нужный слой под только что созданный направляющий слой. Слой станет ведомым (guided) и все объекты этого слоя будут "прицеплены" к пути в направляющем слое. | |
Создайте новый слой под направляющим. Объекты, создаваемые в нём, автоматически будут анимированы в соответствии с путём на направляющем слое. | |
Выделите слой под направляющим слоем и нажмите Modify > Layer. В появившемся окне отметьте флажок Guided. | |
Щелкните слой с клавишей Alt (Windows) или с клавишей Option (Macintosh). |
Чтобы "отсоединить" слои от направляющего (guide) слоя:
1 | Выделите слой, который хотите отключить. |
2 | Сделайте одно из нижеперечисленного: |
Перетащите слой "выше" направляющего слоя. | |
Нажмите Modify > Layer и в появившемся окне выберите тип слоя Normal, отметив соответствующий флажок. | |
Щелкните слой с клавишей Alt (Windows) или с клавишей Option (Macintosh). | |
Перемещение всей анимации
Если вам нужно переместить всю анимацию по сцене, необходимо взять много кадров на многих слоях за раз, чтобы ничего не пропустить.
Чтобы переместить всю анимацию по сцене:
1 | Разблокируйте все слои. |
Если нужно переместить объекты выборочно, заблокируйте или выключите то, что должно остаться на месте. | |
2 | Включите режим редактирования множества кадров (кнопка Edit Multiple Frames в монтажной линейке). |
3 | Растяните маркеры onion skin на все необходимые кадры, или нажмите кнопку Modify Onion Markers и выберите Onion All. |
4 | Нажмите Edit > Select All. |
5 | Перетащите всю анимацию в нужное место на сцене. |
Представление анимации на монтажной линейке
Flash показывает различные виды анимации на монтажной линейке следующим образом:
Автоматическая анимация движения (Motion-tweened): ключевые кадры показываются как чёрные точки, промежуточные кадры подсвечиваются синим и имеют стрелочку слева направо. |
|
Автоматическая анимация формы (Shape-tweened): ключевые кадры показываются как чёрные точки, промежуточные кадры подсвечиваются зелёным и имеют стрелочку слева направо. |
|
Пунктирная линия обозначает, что отсутствует конечный ключевой кадр. |
|
Одиночный ключевой кадр показывается чёрной точкой. Светло-серые кадры после одиночного ключевого кадра имеют то же содержание без изменений и заканчиваются чёрной черточкой с маленьким квадратиком в последнем кадре. |
|
Маленькая a показывает, что в в данном кадре прописаны определённые команды через панель Actions. |
|
Красный флажок обозначает, что в кадре есть метка (label) или комментарий. |
Применение эффекта "Onion skinning"
Как правило, Flash отображает на сцене содержимое одного кадра анимации в один момент времени. Чтобы лучше спозиционировать относительно друг друга объекты, разнесённые по времени или получить более полный контроль при создании покадровой анимации, вы можете вывести на сцену изображение сразу нескольких кадров. Текущий кадр показывается в полном цвете, а соседние приглушены, как сквозь полупрозрачную бумагу. Приглушенные кадры редактировать нельзя.
Чтобы одновременно видеть несколько кадров анимации на сцене:
Нажмите кнопку Onion Skin (полупрозрачные кадры). Все кадры между метками Start Onion Skin и End Onion Skin (они находятся в верхней части линейки) будут задействованы в показе.
Для контроля за полупрозрачными кадрами предусмотрено следующее:
Чтобы показать приглушенные кадры как силуэты, нажмите кнопку Onion Skin Outlines. |
|
Чтобы сменить область захвата кадров для полупрозрачного показа, "перетащите" onion skin маркер в необходимый кадр. |
|
Чтобы редактировать кадры вокруг текущего, используйте режим Edit Multiple Frames (Редактирование Множества Кадров). Режим onion skinning позволяет вам редактировать только текущий кадр. |
Примечание: Закрытые (locked (с замочком)) слои не показываются в режиме полупрозрачных кадров. Чтобы не запутаться при многокадровом редактировании, закрывайте или отключайте не нужные в данный момент слои.
Чтобы настроить отображение полупрозрачных слоёв:
Нажмите кнопку Modify Onion Markers и выберите пункт из меню:
Always Show Markers всегда показывает маркеры на монтажной линейке, даже если режим не включен. | |
Anchor Onion Marks "замораживает" маркеры на монтажной линейке в текущих позициях. Обычно маркеры смещаются по линейке в соответствии с текущей позицией. "Замораживая" их, вы запрещаете им двигаться вместе с указателем текущей позиции. | |
Onion 2 показывает по два кадра слева и справа от текущего кадра. | |
Onion 5 показывает по пять кадров слева и справа от текущего кадра. | |
Onion All показывает все кадры слева и справа от текущего кадра. |
Редактирование анимации
После того, как вы создали кадр или ключевой кадр, можете перемещать его в текущем или в других слоях, удалять его, и производить другие изменения. Только ключевые кадры поддаются прямому редактированию. Вы видите промежуточные кадры, но нельзя редактировать их напрямую. Вы можете редактировать их, редактируя ключевые кадры, от которых они зависят или вставляя новые ключевые кадры между старыми. Вы также можете перетаскивать объекты из окна библиотеки (Library) прямо на сцену.
Чтобы просмотреть и отредактировать более одного кадра в единицу времени, используйте onion skinning.
Чтобы вставить кадры в монтажную линейку (Timeline), сделайте одно из перечисленного:
Чтобы вставить новый кадр, нажмите Insert > Frame. | |
Чтобы создать новый ключевой кадр, нажмите Insert > Keyframe или используйте выпадающее по правой клавише мыши меню. | |
Чтобы создать новый пустой ключевой кадр, нажмите Insert > Blank Keyframe или нажмите правой кнопкой мыши в нужном кадре, и используйте команду Insert Blank Keyframe. |
Чтобы удалить или отредактировать кадр или ключевой кадр, сделайте одно из нижеследующего:
Чтобы удалить кадр, ключевой кадр, или последовательность кадров, нажмите Insert > Remove Frame или выберите Remove Frame из выпадающего по правой кнопке мыши контекстного меню (Control-клик на Macintosh). Окружающие кадры остаются нетронутыми. | |
Чтобы переместить кадр или последовательность кадров, просто "перетащите" их мышкой. | |
Чтобы удлинить продолжительность ключевого кадра, нажмите клавишу Alt (Option на Маке) и перетащите его вправо на нужное расстояние. | |
Чтобы скопировать ключевой кадр или последовательность кадров, выделите необходимый фрагмент, начните его тащить, нажмите Alt, и отпустите в нужном месте. (Прим.пер.: на курсоре при этом появляется плюсик.) | |
Чтобы скопировать выделенные кадры в буфер, нажмите Edit > Copy Frames. Выберите кадр или последовательность кадров, и нажмите Edit > Paste Frames, чтобы заменить их содержимым буфера. | |
Чтобы сконвертировать выбранный ключевой кадр в обычный кадр, нажмите Insert > Clear Keyframe или выберите Clear Keyframe из контекстного выпадающего по правой кнопке мыши меню. (Прим.пер.: Юзеры MacOS уже, я думаю, догадались, что вместо правой кнопки мыши, которой у них нет, им надо нажать Control-клик :) Очищенный ключевой кадр и все кадры до следующего ключевого кадра заменятся содержимым предшествующего очищенному кадра. | |
Чтобы удлинить анимационную последовательность, "перетащите" начальный ключевой кадр влево или конечный кадр вправо. Чтобы изменить длину покадровой анимации, см. Создание покадровой анимации. | |
Чтобы добавить объект из библиотеки в текущий ключевой кадр, просто перетащите его из окна Library на сцену. | |
Чтобы "отзеркалить" анимацию во времени (начало сделать концом, и наоборот), выберите необходимые кадры в одном или более слоях, и нажмите Modify > Frames > Reverse. Естественно, в начале и в конце должны быть ключевые кадры. |
Создание анимации краткий обзор
Анимация создается изменением содержимого ключевых кадров. Вы можете перемещать объект по сцене, уменьшать или увеличивать его, вращать, изменять оттенок или форму. Изменения могут происходить независимо или в зависимости от других событий. Например, можно заставить объект вращаться и исчезать по мере его передвижения по сцене.
Flash использует два вида анимации: покадровую и автоматическую (tweened) анимацию. При создании покадровой анимации Вы прорисовываете каждый кадр, шаг за шагом. При создании автоматической анимации, задаете начальный и конечный кадры, а Flash создает кадры между ними.
Автоматическая анимация эффективна для перемещения и изменения объектов при минимальном размере файла, так как Flash сохраняет значения параметров объектов только в ключевых кадрах. В покадровой анимации Flash сохраняет все значения в каждом кадре.
Для прохождения интерактивного урока по анимации нажмите Help > Lessons > Animation.
Примечание: Также можно создавать анимацию используя команду Set Property. См. ActionScript Help.
Создание ключевых кадров
Ключевой кадр (keyframe) - это кадр, где вы определяете изменения в анимации. Когда вы пользуетесь покадровой анимацией, то каждый кадр является ключевым. В автоматической анимации вы задаете два ключевых кадра, а Flash создает кадры между ними. Flash закрашивает промежуточные кадры автоматической анимации синим или зеленым цветом со стрелкой, растянутой между ключевыми кадрами. Flash изменяет формы в каждом ключевом кадре. Вы должны вставлять ключевые кадры только в тех точках, где что-либо изменяется.
Обозначение ключевых кадров на монтажной линейке (timeline): ключевой кадр, содержащий объект, обозначается закрашенным кружочком, а пустой кадр отделяется вертикальной линией перед кадром. Кадры, которые Вы будете добавлять далее в тот же слой, будут иметь то же содержание, что и ключевой кадр перед ними.
Создание покадровой анимации
В покадровой анимации содержание сцены изменяется в каждом кадре (Прим.пер.: т.е. каждый кадр является ключевым). Она подходит для анимации, в которой кадры изменяются значительно, а не просто содержат перемещающиеся объекты. Такая анимация сильно увеличивает размер flash-клипа.
Используйте покадровую анимацию, когда вам надо менять изображение в каждом кадре.
Чтобы создать покадровую анимацию:
1 | Щелкните на имени слоя чтобы сделать его текущим и перейдите на кадр, в котором должна начинаться анимация. |
2 | Если кадр ещё не является ключевым, сделайте его ключевым - нажмите Insert > Keyframe. |
3 | Создайте изображение в первом ключевом кадре анимации. |
Вы можете использовать инструменты для рисования, вставлять графику из буфера обмена или импортировать файл. | |
4 | Щелкните на кадр справа от только что нарисованного и нажмите Insert > Keyframe, или щелкните правой кнопкой мыши (Windows) или с клавишей Control (Macintosh), а потом в выпавшем меню нажмите Insert Keyframe. |
Это действие добавляет новый ключевой кадр, который содержит то же, что и предыдущий. | |
5 | Измените содержание второго кадра в соответствии с требованиями вашей анимации. |
6 | Чтобы закончить покадровую анимацию, повторяйте шаги 4 и 5 до достижения нужного результата. |
7 | Протестировать полученную анимацию можно, нажав Control > Play или нажав на кнопку Play в окне Controller. |
Полезно периодически просматривать анимацию в процессе её создания. | |
"Удлинение" статичных картинок
Когда вы создаёте фон для анимации, как правило, необходимо "растянуть" его на определённое количество кадров. Добавление новых кадров (не ключевых!) в слой "удлиняет" во времени картинку в ключевом кадре.
Чтобы "растянуть" изображение во времени на несколько кадров:
1 | Создайте изображение в первом ключевом кадре. |
2 | Отметьте кадр справа от ключевого, в том месте, до которого изображение должно "удлиниться". |
3 | Нажмите Insert > Frame. |
Чтобы делать это быстро:
1 | Создайте изображение в первом ключевом кадре. |
2 | С нажатой клавишей Alt перетащите мышкой ключевой кадр вправо (в том же слое). Flash создаст последовательность кадров без ключевого кадра в конце. |