萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 軟體知識 >  >> 影像處理 >> Flash 教學

網頁嵌入透明 Flash 完整指南:三種定位模式與程式碼範例

前言

將 Flash 設為透明背景並嵌入網頁,能讓動畫與網頁元素完美融合,創造豐富視覺效果。本文詳細說明三種定位模式的語法與應用場景。

核心參數:wmode

所有透明效果的關鍵在於 wmode="transparent" 參數:

  • 加上此參數 → Flash 背景透明
  • 移除此參數 → Flash 顯示實體背景色

模式一:透明 + 無座標控制(最簡單)

適用於直接嵌入、不需精確定位的情況:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
        width="550" height="400">
  <param name="movie" value="movie.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="transparent" />
  <embed src="movie.swf" quality="high"
         wmode="transparent"
         width="550" height="400"
         type="application/x-shockwave-flash"
         pluginspage="https://www.macromedia.com/go/getflashplayer">
  </embed>
</object>

模式二:透明 + 絕對座標控制

Flash 固定在視窗特定位置,不隨瀏覽器縮放移動:

<div style="position: absolute; left: 100px; top: 50px; z-index: 1;">
  <object ...>
    <param name="wmode" value="transparent" />
    <embed ... wmode="transparent" />
  </object>
</div>

使用 CSS position: absolute 精確控制位置,z-index 控制疊放順序。

模式三:透明 + 相對座標控制(推薦)

Flash 跟隨表格容器縮放,適合響應式版面:

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"
       background="background.jpg">
  <tr>
    <td align="center" valign="middle">
      <object width="100%" height="100%">
        <param name="movie" value="flash.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <embed src="flash.swf" width="100%" height="100%"
               quality="high" wmode="transparent"
               type="application/x-shockwave-flash">
        </embed>
      </object>
    </td>
  </tr>
</table>

優勢:

  • 表格可設定背景圖片,Flash 疊加在上層
  • 瀏覽器縮放時,Flash 與表格同步變形
  • 相容性佳,舊版瀏覽器也能正常顯示

實務應用建議

  1. 背景圖片優化: 使用壓縮後的 JPG/PNG,避免載入過慢
  2. Flash 檔案大小: 控制在 100KB 以內,必要時分割載入
  3. 替代內容: 在 <object> 內提供替代圖片或文字,給無 Flash 外掛的使用者
  4. 測試環境: 必須在多種瀏覽器(IE、Firefox、Chrome、Safari)測試透明效果

常見問題排除

問題可能原因解決方法
背景不透明wmode 拼寫錯誤或遺漏確認 object/embed 都設定 wmode="transparent"
Flash 遮擋選單/DIVz-index 設定錯誤Flash 容器 z-index 低於彈出選單
透明區域顯示白色舞台背景色未設為透明Flash 製作階段就不繪製背景,或設定舞台背景為無
copyright © 萬盛學電腦網 all rights reserved