Шаблоны публикации HTML

  1. Руководство пользователя Adobe Animate
  2. Введение в Animate
    1. Новые возможности Animate
    2. Визуальный глоссарий
    3. Системные требования Animate
    4. Сочетания клавиш Animate
    5. Разные типы файлов в Animate
  3. Анимация
    1. Основы анимации в Animate
    2. Кадры и ключевые кадры в Animate
    3. Покадровая анимация в Animate
    4. Классическая анимация движения в Animate
    5. Инструмент «Кисть»
    6. Руководство по движению
    7. Анимация движения и язык ActionScript 3.0
    8. Сведения об анимации движения
    9. Анимация движения
    10. Создание анимации движения
    11. Использование ключевых кадров свойств
    12. Положения в анимации движения
    13. Использование Редактора движения для анимаций
    14. Редактирование траектории анимации движения
    15. Управление анимациями движения
    16. Настраиваемое ускорение и замедление
    17. Создание и применение стилей движения
    18. Настройка диапазонов анимации движения
    19. Сохранение анимации движения в файлах XML
    20. Анимация движения и классическая анимация
    21. Анимация фигур
    22. Инструмент «Кость» в Animate
    23. Скелетная анимация персонажей в Animate
    24. Слои-маски в Adobe Animate
    25. Работа со сценами в Animate
  4. Интерактивность
    1. Создание кнопок в Animate
    2. Преобразование проектов Animate в другие форматы документов
    3. Создание и публикация документов HTML5 Canvas в Animate
    4. Добавление интерактивных возможностей с помощью фрагментов кода в Animate
    5. Создание пользовательских компонентов HTML5
    6. Использование компонентов в HTML5 Canvas
    7. Создание пользовательских компонентов: примеры
    8. Фрагменты кода для пользовательских компонентов
    9. Рекомендации: реклама в Animate
    10. Разработка и публикация контента для виртуальной реальности
  5. Рабочая среда и рабочий процесс
    1. Создание и использование малярных кистей
    2. Использование шрифтов Google в документах HTML5 Canvas
    3. Использование библиотек Creative Cloud Libraries и Adobe Animate
    4. Использование рабочей области и панели «Инструменты» в Animate
    5. Рабочие процессы и рабочая среда Animate
    6. Использование веб-шрифтов в документах HTML5 Canvas
    7. Временные шкалы и ActionScript
    8. Работа с несколькими временными шкалами
    9. Задание настроек
    10. Использование панелей разработки Animate
    11. Создание слоев временной шкалы в Animate
    12. Экспорт анимаций для мобильных приложений и игровых платформ
    13. Перемещение и копирование объектов
    14. Шаблоны
    15. Поиск и замена в Animate
    16. Отмена/повтор действий и панель «История»
    17. Сочетания клавиш
    18. Использование временной шкалы в Animate
    19. Создание HTML-расширений
    20. Параметры оптимизации изображений и GIF-анимаций
    21. Настройки экспорта для изображений и GIF
    22. Панель «Ресурсы» в Animate
  6. Мультимедиа и видео
    1. Преобразование и объединение графических объектов в Animate
    2. Создание экземпляров символов и работа с ними в Animate
    3. Трассировка изображения
    4. Использование звука в Adobe Animate
    5. Экспорт SVG-файлов
    6. Создание видеофайлов для использования в Animate
    7. Добавление видео в Animate
    8. Работа с ключевыми точками видео
    9. Рисование и создание объектов в Animate
    10. Изменение линий и фигур
    11. Обводки, заливки и градиенты в Animate CC
    12. Работа с Adobe Premiere Pro и After Effects
    13. Панели «Цвет» в Animate CC
    14. Открытие файлов Flash CS6 в Animate
    15. Работа с классическим текстом в Animate
    16. Размещение иллюстраций в Animate
    17. Импортированные растровые изображения в Animate
    18. Трехмерная графика
    19. Работа с символами в Animate
    20. Рисование линий и фигур в Adobe Animate
    21. Работа с библиотеками в Animate
    22. Экспорт звуков
    23. Выделение объектов в Animate CC
    24. Работа с AI-файлами Illustrator в Animate
    25. Нанесение узоров с помощью инструмента «Аэрограф»
    26. Применение режимов наложения
    27. Упорядочивание объектов
    28. Автоматизация задач с помощью меню «Команды»
    29. Многоязычный текст
    30. Использование камеры в Animate
    31. Использование Animate с Adobe Scout
    32. Работа с файлами Fireworks
    33. Графические фильтры
    34. Звук и ActionScript
    35. Настройки рисования
    36. Рисование инструментом «Перо»
  7. Платформы
    1. Преобразование проектов Animate в другие форматы документов
    2. Поддержка специализированных платформ
    3. Создание и публикация документов HTML5 Canvas в Animate
    4. Создание и публикация документа WebGL
    5. Упаковка приложений AIR for iOS
    6. Публикация приложений AIR for Android
    7. Публикация для Adobe AIR на настольных ПК
    8. Параметры публикации ActionScript
    9. Рекомендации: размещение ActionScript в приложении
    10. Использование ActionScript в Animate
    11. Рекомендации: специальные возможности
    12. Специальные возможности в среде Animate
    13. Создание и использование сценариев
    14. Обеспечение поддержки специализированных платформ
    15. Общие сведения о поддержке специализированных платформ
    16. Создание содержимого со специальными возможностями
    17. Работа с плагинами поддержки специализированных платформ
    18. Отладка сценариев ActionScript 3.0
    19. Обеспечение поддержки специализированных платформ
  8. Экспорт и публикация
    1. Экспорт файлов из Animate CC
    2. Публикация OAM
    3. Экспорт SVG-файлов
    4. Экспорт графики и видео из Animate
    5. Публикация документов AS3
    6. Экспорт анимаций для мобильных приложений и игровых платформ
    7. Экспорт звуков
    8. Экспорт видеофайлов в QuickTime
    9. Управление воспроизведением внешнего видео с помощью ActionScript
    10. Рекомендации: советы по созданию контента для мобильных устройств
    11. Рекомендации: правила работы с видео
    12. Рекомендации: руководство по созданию SWF-приложений
    13. Рекомендации: формирование структуры FLA-файлов
    14. Рекомендации: оптимизация FLA-файлов для Animate
    15. Параметры публикации ActionScript
    16. Задание параметров публикации для Animate
    17. Экспорт файлов-проекторов
    18. Экспорт изображений и анимированных файлов GIF
    19. Шаблоны публикации HTML
    20. Работа с Adobe Premiere Pro и After Effects
    21. Быстрая публикация анимаций

Сведения о шаблонах публикации HTML

HTML-шаблон Animate представляет собой файл, содержащий статический HTML-код и настраиваемый код шаблона, который состоит из особого типа переменных (отличающихся от переменных ActionScript). При публикации SWF-файла Animate заменяет эти переменные значениями, заданными на вкладке «HTML» диалогового окна «Параметры публикации», и формирует HTML-страницу с внедренным SWF-файлом.

Animate включает шаблоны, удовлетворяющие требованиям большинства пользователей, и это устраняет необходимость ручного создания HTML-страниц для SWF-файлов. Например, шаблон «Только Animate» удобен для тестирования файлов в браузере. Он помещает SWF-файл на HTML-страницу таким образом, чтобы он мог быть просмотрен в веб-обозревателе с установленным проигрывателем Flash Player.

Для публикации новой HTML-страницы можно пользоваться одним и тем же шаблоном, изменяя его параметры. Создание пользовательских шаблонов производится с помощью любого HTML-редактора. Этот процесс ничем не отличается от создания стандартных HTML-страниц, только в данном случае переменные SWF-файла заменяются переменными, начинающимися с символа доллара ($).

HTML-шаблоны Animate имеют следующие отличительные характеристики.

  • Однострочный заголовок, отображаемый во всплывающем меню «Шаблон» на вкладке «HTML» диалогового окна «Параметры публикации».

  • Более подробное описание, отображаемое в поле «Информация» на вкладке «HTML» диалогового окна «Параметры публикации».

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

    Примечание. Если в документе необходимо ввести символ доллара в других целях, он должен предваряться обратной косой чертой (\ $).

  • HTML-теги object и embed, отвечающие требованиям ® Communicator® или Navigator® соответственно. Правильное отображение SWF-файла на HTML-странице возможно только при соблюдении этих требований. Для открытия SWF-файла Internet Explorer использует HTML-тег object, а Netscape — embed.

Настройка шаблонов публикации HTML

HTML-шаблоны можно модифицировать для создания карты ссылок, текстового или URL-отчета либо для вставки специальных значений для наиболее распространенных параметров в тегов Animate HTML object и embed (для Internet Explorer и Netscape Communicator или Navigator, соответственно).

Шаблоны Animate могут включать любое HTML-содержимое для приложения и даже программный код различных интерпретаторов (ColdFusion, ASP и других).

  1. Откройте нужный HTML-шаблон Animate в HTML-редакторе. HTML-шаблоны находятся в следующих папках.

    • В Microsoft Windows XP и Microsoft Windows Vista: загрузочное устройство\Documents and Settings\пользователь\Local Settings\Application Data\Adobe\Flash CS5\язык\Configuration\. Папка Application Data обычно скрыта. Чтобы увидеть ее, может потребоваться изменение параметров проводника Windows.

    • Mac OS X 10.3 и более поздних версий: диск Macintosh/Программы/Adobe Flash CS5/язык/First Run/HTML.

      Загрузочный диск — это привод, с которого загружается ОС Windows (как правило, диск C:). Пользователь — имя пользователя, вошедшего в систему Windows. Язык — сокращенное наименование языка. Например, для английского (США) папка Язык будет иметь имя «en».

  2. Отредактируйте шаблон.
  3. Сохраните шаблон в той же папке, из которой он был извлечен.
  4. Чтобы применить параметры шаблона к SWF-файлу, выберите меню «Файл» > «Параметры публикации» и на вкладке «HTML» выберите измененный шаблон. Animate изменяет в выбранном шаблоне только переменные шаблона.

  5. Задайте остальные параметры публикации и нажмите кнопку «ОК».

HTML-шаблоны:переменные

В следующей таблице приведены переменные, которые распознает Animate.

Атрибут/параметр

Переменная шаблона

Template title

$TT

Template description start

$DS

Template description finish

$DF

Animate (SWF file) title

$T1

Animate (SWF file) title for search engine metadata

$TL

Description for search engine metadata

$DC

Metadata XML string for use with search engines

$MD

Width

$WT

Height

$HT

Movie

$MO

HTML alignment

$HA

Looping

$LO

Parameters for object

$PO

Parameters for embed

$PE

Play

$PL

Quality

$QU

Scale

$SC

Salign

$SA

Wmode

$WM

Devicefont

$DE

Bgcolor

$BG

Movie text (area to write movie text)

$MT

Movie URL (location of SWF file URL)

$MU

Image width (unspecified image type)

$IW

Image height (unspecified image type)

$IH

Image filename (unspecified image type)

$IS

Image map name

$IU

Image map tag location

$IM

QuickTime width

$QW

QuickTime height

$QH

QuickTime filename

$QN

GIF width

$GW

GIF height

$GH

GIF filename

$GN

JPEG width

$JW

JPEG height

$JH

JPEG filename

$JN

PNG width

$PW

PNG height

$PH

PNG filename

$PN

Использование сокращенных переменных шаблонов

Переменные шаблонов $PO (для тегов object) и $PE (для тегов embed) являются удобными сокращениями элементов. Каждая из них указывает Animate вставить в шаблон пользовательское значение для самых распространенных параметров тегов object и embed, включая PLAY ($PL), QUALITY ($QU), SCALE ($SC), SALIGN ($SA), WMODE ($WM), DEVICEFONT ($DE) и BGCOLOR ($BG).

Пример HTML-шаблона

В следующий файл шаблона Default.HTML включено большинство из наиболее часто используемых переменных шаблонов Animate.

$TTFlash Only 
$DS 
Display Adobe SWF file in HTML. 
$DF 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
$CS 
<title>$TI</title> 
</head> 
<body bgcolor="$BG"> 
<!--url's used in the movie--> 
$MU 
<!--text used in the movie--> 
$MT 
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="$WI" height="$HE" id="$TI" align="$HA"> 
<param name="allowScriptAccess" value="sameDomain" /> 
$PO 
<embed $PEwidth="$WI" height="$HE" name="$TI" align="$HA" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" /> 
</object> 
</body> 
</html>

Создание карты изображений для замещения SWF-файла

Animate поддерживает создание карты ссылок, которая отображает изображение и обеспечивает работу кнопок, связанных с URL-адресами. Если HTML-шаблон содержит переменную шаблона $IM, то Animate производит добавление кода карты ссылок. Переменная $IU определяет имена для GIF-, JPEG- и PNG-файлов.

  1. Выберите в документе ключевой кадр для карты ссылок и присвойте ему метку кадра #Map в инспекторе свойств (меню «Окно» > «Свойства»). Используйте любой ключевой кадр с кнопками, связанными с действиями getURL ActionScript 1.0 или 2.0.

    Если этого не сделать, то Animate сформирует карту ссылок на основе кнопок в последнем кадре SWF-файла. Этот параметр создаст встроенную карту ссылок, а не внедренный SWF-файл.

  2. Чтобы выбрать кадр для карты ссылок, выполните одно из следующих действий.
    • Для PNG- или GIF-файлов кадр необходимо пометить как #Static.

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

  3. Откройте в HTML-редакторе HTML-шаблон для модификации.
  4. Сохраните шаблон.
  5. Выберите меню «Файл» > «Параметры публикации», затем «Формат», выберите формат карты ссылок и нажмите кнопку «ОК».

    Для примера вставим в шаблон следующий код.

    $IM 
    <img src=$IS usemap=$IU width=$IW height=$IH BORDER=0>

    В результате этого в HTML-документе, созданном по команде «Опубликовать», появится следующий код.

    <map name="mymovie"> 
    <area coords="130,116,214,182" href="http://www.adobe.com"> 
    </map> 
    <img src="mymovie.gif" usemap="#mymovie" width=550 height=400 border=0>

Создание текстовых и URL-отчетов

Переменная шаблона $MT указывает Animate вставить весь текст из текущего SWF-файла в HTML-код в виде примечания. Эта возможность может оказаться полезной для индексации содержимого SWF-файла, а также для того, чтобы сделать его доступным для поисковых машин.

Переменная шаблона $MU указывает Animate сформировать список URL-адресов, на который ссылаются действия в текущем SWF-файле, и вставить его в текущее местоположение в виде примечания. Это действие позволяет средствам проверки ссылок обнаруживать и проверять ссылки из SWF-файла.

Внедрение метаданных поиска

Переменные шаблонов $TL (название SWF-файла) и $DC (описание метаданных) позволяют включать метаданные в HTML-код. Эта возможность делает SWF-файл более доступным для поисковых машин и обеспечивает эффективность выполнения поиска. Переменная шаблона $MD предназначена для включения метаданных поиска в виде XML-строки.

Справки по другим продуктам

Логотип Adobe

Вход в учетную запись