Adobe animate как создать символ
Обновлено: 07.07.2024
Символ (Symbol) - это объект, который создается один раз в Animate. Символом может быть графический объект, кнопка или фрагмент ролика.
Затем вы можете повторно использовать этот символ во всем документе или в других документах.
Вы можете легко обновить или заменить символ на любой другой символ, доступный в вашей локальной сети.
Использование символов в ваших документах значительно уменьшает размер файла; так как сохранение нескольких экземпляров символа требует меньше пространство для хранения, чем сохранение нескольких копий содержимого символа.
С помощью символов также можно ускорить воспроизведение SWF-файла, поскольку символ необходимо загрузить в Flash Player только один раз.
Все созданные символы автоматически располагаются в Библиотеке.
Экземпляр символа
При вставке символа из Библиотеки в Окно редактирования (на сцену) на самом деле происходит вставка экземпляра (копии) символа, оригинал символа остается в Библиотеке.
Экземпляр символа может содержать вложенные символы, которые также могут быть анимированными.
Экземпляр может отличаться от своего родительского символа цветом, размером и функцией. При редактировании символа обновляются все его экземпляры. С другой стороны, изменение экземпляра символа никак не влияет на символ в Библиотеке (обновляет только этот экземпляр).
Клип
Клип (Movie clips) используется для создания многократно используемых фрагментов анимации в Adobe Animate. Видеоклипы имеют собственную временную шкалу, которая не зависит от временной шкалы основной анимации. Клипы могут содержать интерактивные элементы управления, звуки и даже другие экземпляры видеоклипа.
Вы также можете разместить экземпляры фрагмента ролика внутри временной шкалы символа кнопки для создания анимированных кнопок. Кроме того, видеоклипы можно создавать с помощью ActionScript.
Символы фрагмента ролика отображаются в виде статических объектов на Сцене и не отображаются в виде анимации в среде редактирования Animate.
Значок символов клипа в Библиотеке - .
Графика
Графический символ представляет собой набор кадров, используемых в анимации или в режиме одиночного кадра.
Используйте графические символы для статических изображений и для создания многократно используемых фрагментов анимации. Интерактивные элементы управления и звуки не могут быть графическими символами. Графические символы добавляют меньше к размеру FLA-файла, чем кнопки или фрагменты ролика, потому что они не имеют отдельной временной шкалы.
Значок символов графики в Библиотеке-
Кнопки
Символы кнопок (Button) - это особый тип четырехкадрового интерактивного видеоролика в Adobe Animate. При создании символа кнопки создается временная шкала с четырьмя кадрами. Первые три кадра отображают три возможных состояния кнопки, четвертый кадр определяет активную область кнопки.
Временная шкала символа кнопки фактически не играет линейно как нормальная временная шкала; она реагирует на действия посетителя, переходя к соответствующему кадру. Чтобы сделать кнопку интерактивной, нужно поместить экземпляр символа кнопки на сцену и назначить действия этому экземпляру.
Вы назначаете действия для основной временной шкалы файла Animate. Если кнопка находится внутри фрагмента ролика, вы можете добавить действия к временной шкале фрагмента ролика. Не добавляйте действия на временную шкалу символа кнопки.
Значок символов кнопки в Библиотеке -
.
Подробнее о кнопках
Также вы можете использовать символы шрифта, чтобы экспортировать шрифт и использовать его в других документах Animate.
- В контекстном меню объекта выберите " Преобразовать в символ ".
- В меню " Модификация " выберите " Преобразовать в символ " (Modify > Convert To Symbol)..
Щелкните в сетке регистрации, чтобы расположить точку регистрации для символа.
Создание пустого символа
Вы можете первоначально создать пустой символ, а затем оформить его (наполнить содержанием).
1. Выполните одно из следующих действий:
3. Нажмите ОК.
Animate добавляет символ в библиотеку и переключается в режим редактирования символов.
4. Для создания содержимого символа используйте Шкалу времени , рисуйте с помощью инструментов рисования, импортируйте мультимедиа или создавайте экземпляры других символов.
5. Чтобы вернуться в режим редактирования документа, выполните одно из следующих действий:
Когда вы создаете символ, точка регистрации размещается в центре окна в режиме редактирования символа.
Вы можете разместить содержимое символа в окне относительно точки регистрации. Чтобы изменить точку регистрации, когда вы редактируете символ, перемещайте содержимое символа относительно точки регистрации.
6. В разделе «Связи ActionScript» вы можете выбрать экспорт для ActionScript.
Символ — это изображение, кнопка или фрагмент ролика, который создается один раз в среде разработчика Animate (ранее Flash Professional CC) или посредством классов SimpleButton (AS 3.0) и MovieClip. Затем символ может быть повторно использован в этом или других документах.
Символ может включать иллюстрации, импортированные из другого приложения. Любой созданный символ автоматически становится частью библиотеки текущего документа.
Экземпляр представляет собой копию символа, расположенную в рабочей области или вложенную в другой символ. Экземпляр может отличаться от родительского символа цветом, размером и функциональностью. При редактировании символа обновляются все его экземпляры, но при применении к нему эффектов изменится только используемый экземпляр.
Использование в документах символов значительно уменьшает размер файла. Для хранения нескольких экземпляров символа требуется меньше места, чем для хранения множества копий содержимого символа. Например, для уменьшения размера файла документа можно преобразовать статические графические объекты (например, фоновые изображения) в символы, а затем использовать их повторно. Использование символов также повышает производительность воспроизведения SWF-файла, поскольку загрузка символа в проигрыватель Flash® Player выполняется только один раз.
Общий доступ к символам в документах в виде ресурсов общей библиотеки доступно как на этапе разработки, так и при исполнении. На этапе выполнения общие ресурсы, находящиеся в исходном документе, могут быть связаны с любым числом целевых документов без необходимости их импорта. В ресурсах, разделяемых на этапе разработки, любой символ может быть обновлен или заменен любым другим символом, доступным по локальной сети.
Если импортируемый библиотечный ресурс имеет то же имя, что и ресурс, уже находящийся в библиотеке, то конфликты именования можно устранить без риска случайной перезаписи существующего ресурса.
Дополнительные вводные инструкции по работе с символами доступны в следующих ресурсах:
Типы символов
Каждый символ имеет собственную временную шкалу и рабочую область со слоями. Как и к основной временной шкале, к временной шкале символа могут добавляться кадры, ключевые кадры и слои. При создании символа пользователь выбирает его тип.
Графические символы предназначены для создания статических изображений и повторно используемых фрагментов анимации, связанных с основной временной шкалой. Графические символы работают синхронно с основной временной шкалой. Интерактивные элементы управления и звуки в последовательности анимации графического символа работать не будут. При использовании графических символов размер FLA-файла увеличивается меньше, чем при применении кнопок и фрагментов роликов, так как они не имеют временной шкалы.
Кнопки-символы позволяют создавать интерактивные кнопки, которые реагируют на щелчки кнопкой мыши, перемещение указателя или другие действия. Пользователь определяет графику, связанную с различными состояниями, а затем назначает действия экземпляру кнопки. Дополнительные сведения см. в разделе Обработка событий в руководстве разработчика ActionScript 3.0.
Символы фрагмента ролика позволяют создавать повторно используемые фрагменты анимации. Фрагменты ролика имеют собственную многокадровую временную шкалу, которая не зависит от основной. Она может рассматриваться как вложенная в основную временную шкалу, и может содержать интерактивные элементы управления, звуки и даже другие экземпляры фрагмента ролика. Для создания анимированных кнопок экземпляры фрагмента ролика могут быть размещены внутри временной шкалы символа-кнопки. Кроме того, фрагменты ролика доступны из сценариев ActionScript®.
Шрифтовые символы позволяют экспортировать шрифт и использовать его в других документах Animate.
Animate содержит встроенные компоненты, фрагменты ролика с заданными параметрами, которые позволяют дополнять документ элементами пользовательского интерфейса: кнопками, флажками и полосами прокрутки. Дополнительные сведения см. в разделе О компонентах ActionScript 3.0 в руководстве Использование компонентов ActionScript 3.0.
Примечание. Для просмотра анимации в экземплярах компонента и фрагментов ролика с 9-фрагментным масштабированием в среде разработки Animate выберите меню «Управление» > «Разрешить активный просмотр».
Можно создать символ на основе объектов, выделенных в рабочей области, создать пустой символ и подготовить или импортировать содержимое в режиме редактирования символов либо создать символы шрифтов в Animate. Символы могут содержать любую функциональность Animate, в том числе анимацию.
Использование символов, содержащих анимацию, позволяет создавать весьма динамичные приложения Animate при минимальных размерах файла. Удобно создавать анимацию на основе символов с повторяющимися или циклическими действиями — такими, например, как взмахи крыльев птицы.
Для добавления символов в документ следует пользоваться ресурсами общей библиотеки на этапе разработки или при исполнении.
Описание моего опыта переезда с Flash на Animate CC и создания баннеров во всемогущем формате HTML5. Много картинок под катом
Немного исторического экскурса и терминов
Лично я сам знаком с Flash гораздо больше 10 лет и немного представляю, как работает эта технология «изнутри».
Примерно столько же лет я верстаю сайты, в том числе на «современном» языке HTML5, который, как говорят, умеет всё. Нет, реально, иногда упоротые дизайнеры присылали такие интерфейсы, которых в природе не существовало, их нужно было выдумать, прикрываясь фразой «на HTML5 же можно написать всё!».
Я не претендую на особую художественную ценность моих творений, но количество нарисованных мной баннеров давно перевалило за тысячу, и я продолжаю их рисовать почти каждый день.
За последние 5 лет flash не пинал только ленивый, причем, не особо разбираясь в вопросе. Лично я никогда не видел ни тормозов, ни дырявости, а уж про самое первое утверждение от Стива Джобса про то, что «Flash не заточен под палец» — это и вовсе смешно. Самая очевидная причина противостояния Apple против флеша на айфонах лежит на поверхности, но сейчас не об этом.
Приближаемся к развязке терминологии. HTML — это язык разметки текста и расположения элементов на странице. Он не умеет выполнять никакие действия сам по себе. Под «новшествами HTML5» вместо Flash обычно понимают: проигрывание видео без Flash, анимации без Flash, мультизагрузка файлов без Flash и некоторые другие вещи.
Несмотря на дифирамбы, звучащие отовсюду, до сих пор не появилось ни одного вменяемого редактора анимации на «всемогущем» HTML5, пока Adobe не перелицевала Flash CC в Animate CC, добавив, по сути, только экспорт в HTML5.
Интерфейс
Сам интерфейс Animate CC вообще не отличается от Flash, в отличие от Edge Animate, который был дико непривычен. Больше сказать особо нечего, и я вообще не заметил разницы с CS6, которым я пользовался давно. Для баннеров не нужен AS3, а это была последняя версия, поддерживающая AS2. Конвертер Swiffy, который сделала Google, дружил только с AS2.
* AS2,3 — встроенный во Flash язык программирования Action Script, который позволяет делать всю неанимационную составляющую ролика — чтобы кнопки нажимались, чтобы на нужных кадрах ролик вставал на паузу, для того, чтобы информацию могли прочитать, чтобы запускались интерактивные сценарии взаимодействия с роликом. На самом деле, это достаточно мощный язык, и я использую лишь 0,000001% его функционала.
Движок отрисовки
Естественно, сами по себе объекты внутри ролика двигаться не могут, для этого нужно, чтобы их двигал, показывал и скрывал какой-то движок. В Animate CC для проектов формата HTML5 Canvas используется CreateJS, который приветствует каждый новый проект замечательным предупреждением
ПРЕДУПРЕЖДЕНИЯ:
Номера кадров в EaselJS начинаются с 0, а не с 1. В частности, это влияет на методы gotoAndStop и gotoAndPlay.
Приятно, что хоть предупредили. Видимо, это нереальная задача — отнимать по единичке от того кадра, на который нужно перейти.
Таймлайн и рабочая область
Т.к. интерфейс не претерпел никаких изменений для меня все здесь абсолютно стандартно. Разницы нет. Так как система настроена на русский язык, скачалась русская версия пакета. Меня это не особо беспокоит, потому что я пользуюсь хоткеями, хотя, иногда зависаю на том, что нужно выбрать в меню.
Теперь перейдем к тому, чем я постоянно пользуюсь:
Стандартные фильтры во Flash
Фильтры — одна из весьма частых составляющих любых баннеров, они позволяют очень быстро добиться нужного результата. Я рассмотрю 3 фильтра, которыми я раньше пользовался крайне часто. Во флеше фильтры — часть стандарта, и на моих работах они не оказывали какого-либо влияния на производительность, да и не могли в-принципе. Здесь и далее я буду использовать экспорт в GIF для понимания разницы
Тень — один из самых простых вариантов сделать части баннера объемнее и акцентировать внимание на нужных блоках. Естественно, я взял чрезмерно сильную тень, чтобы проиллюстрировать разницу
Сравниваю:
| Flash | CreateJS |
 |
Да, анимация тени невозможна. Более того, если ролик длиннее того, что я представил для теста, тень превращается в неизвестно что.
Здесь также стоит упомянуть, что в редакторе и готовом html5 тени (да и вообще все эффекты) выглядят сильно разными.
| Редактор | Результат |
 |  |
При экспорте в трейсе можно увидеть такую надпись:
Фильтры тени и свечения используют очень много системных ресурсов, кроме того, поддерживаются не все параметры. (4)
Ну спасибо, что хоть предупредили…
Производительность баннера с тенями оставляет желать лучшего, ну они же предупреждали. Стерев тени с этих подложек, я сократил нагрузку до 40%. Флеш все это рисовал с 23% загрузки вместе с тенями, разумеется
Свечение
Один из самых простых способов выделить текст на пестром фоне — добавить ему обводку, это просто делается с помощью свечения с большим процентом интенсивности.
| Flash | CreateJS |
 |  |
В это самое время в редакторе все так же, «Видимость ноль, иду по приборам»:
Есть один возможный вариант решения данной проблемы, если нужно — я им поделюсь, подложки под буквы используются крайне часто и без них просто не жить.
Помимо этого, свечение — это не только обводка букв, но результат намекает, что его не будет
| Flash | CreateJS | В редакторе |
 |
Размытие
Без комментариев. Размытие доступно только для статичных объектов, так что использовать этот фильтр для появления текстов невозможно
| Flash | CreateJS |
 |
Как вышеперечисленные глюки могут существовать при повсеместном проникновении тех же самых SVG-фильтров и фильтров в CSS — я не представляю.
Проблемы экспорта и упаковки
Все привыкли к тому, что ролик во флеше — это самодостаточный файл. Экспорт в HTML5 порождает кучку файлов, вместо одного. Проект Swiffy, придуманный Google для конвертации SWF в HTML паковал всё внутрь одного HTML-файла. Видимо, такая задача оказалась непосильной ношей для создателей Animate CC. Подробную статью по поводу засовывания «всего» внутрь одного файла для Doubleclick можно прочесть здесь. Я сделал свой конвертер на лету, сгородив конструкцию из пары функций на php, но она далека не то, что до идеала — даже до черновика. Мои задачи решает — и ладно.
Резиновые баннеры
По умолчанию Animate вроде как поддерживает «резиновость» баннеров, но обычно под резиновыми баннерами имеются в виду те, которые тянутся по горизонтали, а не пропорционально по обоим осям. В шаблоне экспорта это называется responsive scaling, и в случае с баннерами, тянущимися только по оси X это приводило к забавным глюкам, пока я его не вырезал из шаблона
Вообще, можно вообще отказаться от идеи растягивания баннера, просто взять максимальный размер баннерного места, а ширину ролика указать равную минимальному размеру баннерного места и обрезать часть с помощью overflow: hidden, потом центрировать элемент CANVAS (указав его ширину равной максимальному размеру баннерного места) по горизонтали внутри ссылки, занимающей 100% ширины, здесь даже немного проще, чем было во FLASH и не требует никаких дополнительных скриптов внутри ролика, только css.
Замена нескольких символов
Параметр «Поменять символ» позволяет заменять символы выбранным символом или растровыми изображениями.
1. В документе Animate выберите несколько символов на сцене.
2. В Инспекторе свойств нажмите «SWAP».
3. В диалоговом окне «Поменять символ» выберите символ, которым вы хотите заменить все выбранные символы / растровые изображения.
4. Нажмите ОК.
См. также Обзор Adobe Flash Pro - Замена символов
Преобразование анимации на сцене в символ видеоклипа
Чтобы повторно использовать анимационную последовательность на Сцене или использовать ее в качестве экземпляра символа, выберите ее и сохраните как фрагмент ролика.
1. На главной Шкале времени выберите каждый кадр в каждом слое анимации на сцене, которую вы хотите использовать.
2. Выполните одно из следующих действий для копирования кадров:
• Выберите меню «Правка» > «Временная шкала» > «Копировать кадры» ( Edit > Timeline > Copy Frames).
Чтобы удалить последовательность после преобразования ее в фрагмент ролика, выберите «Вырезать» (Cut Frames).
3. Отмените выбор и убедитесь, что ничего на сцене не выбрано. Выберите меню «Вставка» > «Новый символ» (Insert > New Symbol).
4. Дайте название символу. В поле «Тип» выберите тип клипа как «Видеоклип» и нажмите «ОК».
5. На Временной шкале нажмите «Кадр 1» на слое 1 и выберите меню «Правка» > «Временная шкала» > «Вставить кадры» ( Edit > Timeline > Paste Frames).
Это действие вставляет кадры (и любые слои и имена слоев), скопированные с основной временной шкалы на временную шкалу этого символа клипа. Любая анимация, кнопки или интерактивность из скопированных вами кадров теперь становятся независимойя анимацией (символ видеоклипа), которую вы можете использовать повторно.
6. Чтобы вернуться в режим редактирования документа, выполните одно из следующих действий:
1. Выберите меню « Правка » > « Поиск и замена ». Откроется панель "Поиск и замена"
2. В разделе "Поиск" выберите «Символ».
3. Введите название символа для поиска (или выберите из списка)
4. В поле «Заменить» выберите название во всплывающем меню.
5. Чтобы выбрать следующее вхождение указанного символа в рабочей области и отредактировать его на месте, выберите «Live Edit».
Для редактирования будет выбрано только следующее вхождение, даже если вы выберете «Найти все» на следующем шаге.
6. Чтобы найти символ, выполните одно из следующих действий:
• Чтобы найти следующее вхождение указанного символа, нажмите «Найти далее».
• Чтобы найти все вхождения указанного символа, нажмите «Найти все».
Вы можете заменить символ другим символом любого типа.
Дублирование символов
При создании дубликата символа (Duplicate symbols) становится возможным использовать существующий символ в качестве отправной точки для создания нового символа.
Для создания версий символа с разным внешним видом также используйте экземпляры символов.
Выберите символ на панели «Библиотека» и выполните одно из следующих действий:
• Выберите «Дублировать» в меню Библиотеки.
1. Выберите экземпляр символа на Сцене.
2. Выберите меню «Модификация» > «Символ» > «Дублировать символ» (Modify > Symbol > Duplicate Symbol).
Символ дублируется, и экземпляр заменяется экземпляром дублированного символа.
Подробнее о дублировании символов см. Обзор Adobe Flash Pro - Дублирование символов
Если вы создали символ, вы можете отредактировать его в режиме редактирования символов, выбрав меню « Правка » > « Изменить символы » ( Edit > Edit Symbols). В этом случае программа переходит в режим редактирования символа.
Или вы можете отредактировать символ прямо на Сцене, выбрав меню « Правка » > « Редактировать на месте » (Edit > Edit In Place).
Вы также можете изменить точку регистрации символа.
Когда вы изменяете (редактируете) символ, Animate обновляет все экземпляры этого символа в вашем документе.
Читайте также: