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. 在 Animate 中创建和发布 HTML5 Canvas 文档
    4. 在 Animate 中通过代码片段添加交互性
    5. 创建自定义 HTML5 组件
    6. 使用 HTML5 Canvas 中的组件
    7. 创建自定义组件:示例
    8. 自定义组件的代码片段
    9. 最佳做法 - 使用 Animate 制作广告
    10. 虚拟现实创作和发布
  5. 工作区和工作流
    1. 创建和管理画笔
    2. 在 HTML5 Canvas 文档中使用 Google 字体
    3. 使用 Creative Cloud Libraries 和 Adobe Animate
    4. 使用 Animate 的舞台和工具面板
    5. Animate 工作流程和工作区
    6. 在 HTML5 Canvas 文档中使用 Web 字体
    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. 使用 Animate 绘制和创建对象
    9. 改变线条和形状
    10. Animate CC 中的笔触、填充和渐变
    11. 使用 Adobe Premiere Pro 和 After Effects
    12. Animate CC 中的颜色面板
    13. 使用 Animate 打开 Flash CS6 文件
    14. 在 Animate 中使用传统文本
    15. 向 Animate 中置入图稿
    16. 在 Animate 中导入的位图
    17. 3D 图形
    18. 在 Animate 中使用元件
    19. 使用 Adobe Animate 绘制线条和形状
    20. 在 Animate 中使用库
    21. 导出声音
    22. 在 Animate CC 中选择对象
    23. 在 Animate 中使用 Illustrator AI 文件
    24. 应用混合模式
    25. 排列对象
    26. 使用“命令”菜单自动处理任务
    27. 多语言文本
    28. 在 Animate 中使用摄像头
    29. 图形滤镜
    30. 声音和 ActionScript
    31. 绘制首选参数
    32. 用钢笔工具绘图
  7. 平台
    1. 将 Animate 项目转换为其它文档类型格式
    2. 自定义平台支持
    3. 在 Animate 中创建和发布 HTML5 Canvas 文档
    4. 创建和发布 WebGL 文档
    5. 如何打包 AIR for iOS 应用程序
    6. 发布 AIR for Android 应用程序
    7. 发布用于桌面的 Adobe AIR
    8. ActionScript 发布设置
    9. 最佳做法 - 管理应用程序中的 ActionScript
    10. 如何在 Animate 中使用 ActionScript
    11. Animate 工作区中的辅助功能
    12. 编写和管理脚本
    13. 启用自定义平台支持
    14. 自定义平台支持概述
    15. 使用自定义平台支持插件
    16. 调试 ActionScript 3.0
    17. 启用自定义平台支持
  8. 导出和发布
    1. 如何从 Animate CC 导出文件
    2. OAM 发布
    3. 导出 SVG 文件
    4. 使用 Animate 导出图形和视频
    5. 发布 AS3 文档
    6. 导出移动应用程序和游戏引擎的动画
    7. 导出声音
    8. 最佳做法 - 移动设备内容创建技巧
    9. 最佳做法 - 视频惯例
    10. 最佳做法 - SWF 应用程序创作指南
    11. 最佳做法 - 构造 FLA 文件
    12. 在 Animate 中优化 FLA 文件的最佳做法
    13. ActionScript 发布设置
    14. 指定 Animate 的发布设置
    15. 导出放映文件
    16. 导出图像和动画 GIF
    17. HTML 发布模板
    18. 使用 Adobe Premiere Pro 和 After Effects
    19. 快速分享和发布动画
  9. 故障排除
    1. 已修复的问题
    2. 已知问题

 

关于 HTML 发布模板

Animate HTML 模板是一个文件,其中包含静态 HTML 代码和由一些特殊类型的变量(不同于 ActionScript 变量)组成的灵活的模板代码。发布 SWF 文件时,Animate 用“发布设置”对话框的“HTML”选项卡中选择的值替代这些变量,并生成一个嵌入了 SWF 文件的 HTML 页。

Animate 提供模板,能满足大多数用户的需要,因此不需要手动创建显示 SWF 文件的 HTML 页。 例如,“仅 Animate”模板对于在浏览器中测试文件非常有用。 它将 SWF 文件放在 HTML 页上,因此可以用安装了 Flash Player 的 Web 浏览器查看该文件。

若要发布新的 HTML 页,请使用该模板并更改设置。 使用任何 HTML 编辑器都可以创建自定义模板。 创建模板和创建标准 HTML 页相同,只是要用以美元符号 ($) 开头的变量替代与 SWF 文件有关的特定值。

Animate HTML 模板具有以下特性:

  • 在“发布设置”对话框的“HTML”选项卡中的“模板”弹出菜单上,显示单行标题。

  • “发布设置”对话框的“HTML”选项卡中,单击“信息”时会显示较长的描述。

  • Animate 生成输出文件时,以美元符号 ($) 开头的模板变量指定替代参数值的位置。

    注意:在文档中要将美元符号用作其他用途,请使用反斜杠和美元符号的组合 (\$)。

  • 分别符合 Microsoft Internet Explorer 和 Netscape® Communicator® 或 Navigator® 标签要求的 HTML objectembed 标签。要在 HTML 页上正确显示 SWF 文件,必须符合这些标签要求。Internet Explorer 使用 object HTML 标签打开 SWF 文件;Netscape 使用 embed 标签。

自定义 HTML 发布模板

修改 HTML 模板变量可以创建图像映射、文本报告或 URL 报告,或者为一些最常用的 Animate HTML objectembed 标签参数(分别对应使用 ActiveX 控件和插件的浏览器)插入自定义值。

Animate 模板可包含任何适用于您的应用程序的 HTML 内容,甚至还可以包含解释程序(如 ColdFusion 和 ASP)的代码。

  1. 使用 HTML 编辑器打开要更改的 Animate HTML 模板。这些模板的位置如下:

    • 在 Windows XP 或 Vista 中:引导驱动器:\Documents and Settings\用户\Local Settings\Application Data\Adobe\Flash CS5\语言\Configuration\HTML\。Application Data 文件夹通常是一个隐藏的文件夹,若要查看此文件夹,可能需要更改 Windows 资源管理器设置。

    • 在 Mac OS X 10.3 及更高版本中:Macintosh HD/Applications/Adobe Flash CS5/语言/First Run/HTML。

      引导驱动器是引导 Windows 操作系统的驱动器(通常为 C:)。用户是登录到 Windows 操作系统的人的名称。语言设置为缩写的语言名称。 例如,语言在美国设置为“en”,表示英语。

  2. 编辑模板。
  3. 将模板保存在取出前所在的文件夹中。
  4. 若要对 SWF 文件应用模板设置,请选择“文件”>“发布设置”,单击“HTML”,然后选择要修改的模板。 Animate 只更改所选模板中的模板变量。

  5. 选择其余的发布设置,然后单击“确定”。

HTML 模板变量

下表列出了 Animate 可识别的模板变量:

属性/参数

模板变量

模板标题

$TT

模板说明开始

$DS

模板说明结束

$DF

Animate(SWF 文件)标题

$T1

用于搜索引擎元数据的 Animate(SWF 文件)标题

$TL

对搜索引擎元数据的说明

$DC

与搜索引擎一起使用的元数据 XML 字符串

$MD

宽度

$WT

高度

$HT

影片

$MO

HTML 对齐

$HA

循环

$LO

用于对象的参数

$PO

用于嵌入的参数

$PE

Play

$PL

品质

$QU

缩放

$SC

Salign

$SA

Wmode

$WM

Devicefont

$DE

Bgcolor

$BG

影片文本(写入影片文本的区域)

$MT

影片 URL(SWF 文件 URL 的位置)

$MU

图像宽度(未指定图像类型)

$IW

图像高度(未指定图像类型)

$IH

图像文件名(未指定图像类型)

$IS

图像映射名

$IU

图像映射标记位置

$IM

QuickTime 宽度

$QW

QuickTime 高度

$QH

QuickTime 文件名

$QN

GIF 宽度

$GW

GIF 高度

$GH

GIF 文件名

$GN

JPEG 宽度

$JW

JPEG 高度

$JH

JPEG 文件名

$JN

PNG 宽度

$PW

PNG 高度

$PH

PNG 文件名

$PN

使用速记模板变量

$PO(用于 object 标签)和 $PE(用于 embed 标签)模板变量是实用的速记元素。每个变量都使 Animate 向模板插入部分最常用 objectembed 参数的任意非默认值,包括 PLAY ($PL)、QUALITY ($QU)、SCALE ($SC)、SALIGN ($SA)、WMODE ($WM)、DEVICEFONT ($DE) 和 BGCOLOR ($BG)。

示例 HTML 模板

Animate 中以下 Default.HTML 模板文件包含了许多常用模板变量:

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

创建图像映射以替换 SWF 文件

Animate 可以生成图像映射来显示任何图像,并保持链接至 URL 的按钮的功能。 当 HTML 模板包括 $IM 模板变量时,Animate 将插入图像映射代码。$IU 变量标识 GIF、JPEG 或 PNG 文件的名称。

  1. 在文档中,选择用于图像映射的关键帧,并在帧属性检查器(“窗口”>“属性”)中将其标记为 #Map。请使用具有附加了 ActionScript 1.0 或 2.0 getURL 动作的按钮的任何关键帧。

    如果没有创建帧标签,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=&quot;mymovie&quot;> 
    <area coords=&quot;130,116,214,182&quot; href=&quot;http://www.adobe.com&quot;> 
    </map> 
    <img src=&quot;mymovie.gif&quot; usemap=&quot;#mymovie&quot; width=550 height=400 border=0>

创建文本和 URL 报告

$MT 模板变量会使 Animate 将当前 SWF 文件中的所有文本作为注释插入到 HTML 代码中。如果要为 SWF 文件的内容编制索引并使搜索引擎可以搜索这些内容,该变量非常有用。

$MU 模板变量会使 Animate 生成当前 SWF 文件中的动作所引用的 URL 列表,并将该列表作为注释插入到当前位置。通过此操作,链接验证工具可以检测和验证 SWF 文件中的链接。

嵌入搜索元数据

使用 $TL(SWF 文件标题)和 $DC(描述元数据)模板变量,可以在 HTML 中添加搜索元数据。 此功能可使搜索引擎更容易找到该 SWF 文件,并提供有意义的搜索结果。 使用 $MD 模板变量可以将搜索元数据添加为 XML 字符串。

更多此类内容

更快、更轻松地获得帮助

新用户?