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 文件中使用網頁字體
    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. 使用 Animate 開啟 Flash CS6 檔案
    15. 在 Animate 中使用傳統文字
    16. 將圖案放入 Animate 中
    17. Animate 中匯入的點陣圖
    18. 3D 圖像
    19. 在 Animate 中使用元件
    20. 使用 Adobe Animate 繪製線條和形狀
    21. 使用 Animate 中的元件庫
    22. 匯出聲音
    23. 在 Animate CC 中選取物件
    24. 在 Animate 中使用 Illustrator AI 檔案
    25. 使用噴刷工具套用圖樣
    26. 套用混合模式
    27. 排列物件
    28. 使用命令選單自動執行工作
    29. 多國語言文字
    30. 使用 Animate 中的攝影機
    31. 搭配使用 Animate 與 Adobe Scout
    32. 使用 Fireworks 檔案
    33. 圖像濾鏡
    34. 聲音和 ActionScript
    35. 繪圖偏好設定
    36. 使用鋼筆工具繪圖
  7. 平台
    1. 將 Animate 專案轉換成其他文件類型格式
    2. 自訂平台支援
    3. 在 Animate 中建立及發佈 HTML5 Canvas 文件
    4. 建立並發佈 WebGL 文件
    5. 如何封裝 AIR for iOS 的應用程式
    6. 發佈 AIR for Android 應用程式
    7. Adobe AIR for Desktop 的發佈功能
    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. 最佳化 Animate 的 FLA 檔案的最佳作法
    15. ActionScript 發佈設定
    16. 指定 Animate 的發佈設定
    17. 匯出放映檔
    18. 匯出影像和 GIF 動畫
    19. HTML 發佈範本
    20. 使用 Adobe Premiere Pro 和 After Effects
    21. 快速分享和發佈您的動畫

關於 HTML 發佈範本

Animate HTML 範本是一個文字檔案,包含了靜態 HTML 程式碼,以及由特殊的變數類型組成的彈性範本程式碼 (和 ActionScript 變數不同)。發佈 SWF 檔案時,Animate 會以您在「發佈設定」對話方塊的 HTML 標籤中選取的值取代這些範本變數,並產生內嵌 SWF 檔案的 HTML 網頁。

Animate 包含能符合大多數使用者需求的各種範本,讓您不需要手動建立顯示 SWF 檔案的 HTML 網頁。舉例來說,「僅限 Animate」範本對於在瀏覽器內測試檔案是很有用的。它會將 SWF 檔放置在 HTML 網頁上,因此您可以經由已安裝 Flash Player 的網頁瀏覽器來檢視它。

如果要發佈新的 HTML 網頁,您可以使用相同的範本並變更其中的設定。 您可以使用任何 HTML 編輯程式建立自訂範本。 建立範本就像建立標準的 HTML 網頁,只是您要採用貨幣 ($) 符號起頭的變數名稱來取代和 SWF 檔有關的特定值。

Animate HTML 範本具有下列特殊特性:

  • 在「發佈設定」對話方塊的 HTML 標籤內,在「範本」彈出式選單上出現的單行標題。

  • 在「發佈設定」對話方塊的 HTML 標籤中按一下「資訊」時,出現較長的描述。

  • 以貨幣符號 ($) 開始的範本變數用來指定在 Animate 產生輸出檔案時應該替代參數值的位置。

    注意:如果您因為其他目的而需要在文件中使用貨幣符號,請使用反斜線和貨幣符號 (\$) 組合。

  • HTML objectembed 標籤遵循的分別是 Microsoft Internet Explorer 和 Netscape® Communicator® 或 Navigator® 的標籤需求。若要在 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 硬碟>/Applications/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

供搜尋引擎中繼資料使用的敘述

$DC

搭配搜尋引擎使用的中繼資料 XML 字串

$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 將任何非預設值的範本插入一些最常用的 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 "-//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。搭配已附加 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="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 產生一份目前 SWF 檔案中的動作指令所參考的 URL 清單,並將這份清單插入目前的位置當做註解。這麼做可以讓連結確認工具偵測並確認 SWF 檔中的連結。

內嵌搜尋中繼資料

$TL (SWF 檔標題) 與 $DC (中繼資料說明) 範本變數,讓您可以將搜尋中繼資料納入 HTML 中。 這項功能不但可以提高 SWF 檔在搜尋引擎中的曝光率,更能提供有意義的搜尋結果。 您可以使用 $MD 範本變數,以 XML 字串的形式納入搜尋中繼資料。

更多類似項目

Adobe 標誌

登入您的帳戶