Hype 3 Mac 版使用教學：無程式碼建立 HTML5 動畫與互動網頁

Hype 3 是 Tumult 推出的 HTML5 動畫製作工具，讓不懂程式碼的設計師也能創建複雜動畫、互動網頁、廣告橫幅、簡報等內容，輸出標準 HTML5/JavaScript，完美相容所有現代瀏覽器與行動裝置。本教學介紹介面佈局、核心概念、元素與符號、動畫時間軸、互動動作、文檔設定與匯出發布。

軟體資訊

• 名稱：Hype for Mac V3.0.2
• 大小：6.3MB
• 下載：PC6 下載頁面

介面佈局與核心概念

首次啟動提供功能導覽、教學與技巧。主介面採專業深色主題，分五大區域：

• 頂部工具列：檔案操作、預覽、匯出、檢視選項
• 左側場景導航：管理多場景（頁面/狀態），支援場景轉場動畫
• 中間內容區：畫布編輯區，所見即所得佈局元素
• 底部時間軸：關鍵幀動畫編輯、缓動函數、多時間軸支援
• 右側檢查器：元素/符號/場景/文檔屬性設定（幾何、排版、動畫、物理、身分識別）

核心概念：元素與符號

元素

基本構建單位，包含：文字、按鈕、紋理按鈕、圖片、視訊、音訊、矩形/橢圓/向量形狀、HTML Widget（嵌入 iframe/程式碼）。元素屬性可隨時間軸動畫變化（位置、大小、透明度、旋轉、縮放、顏色、濾鏡、CSS 屬性）。

符號

可重複使用的元件，封裝「元素 + 時間軸 + 動畫 + 互動邏輯」。建立一次，多場景重複使用，修改符號即同步更新所有實例。適合導航列、按鈕組、重複動畫模組。

動畫製作流程

1. 在畫布放置元素/符號
2. 在時間軸選擇屬性（如 Left、Opacity、Rotate）
3. 移動播放頭至起始時間，點擊菱形鍵建立起始關鍵幀
4. 移動播放頭至結束時間，修改屬性值，自動建立結束關鍵幀
5. 調整缓動曲線（Ease In/Out/Bounce/Elastic/自定義貝茲曲線）
6. 預覽（空白鍵或工具列播放鍵）調整時序

互動動作系統

為元素/符號/場景綁定觸發事件與動作：

• 觸發事件：滑鼠點擊、滑鼠進入/離開、觸控開始/結束/移動、鍵盤按鍵、場景載入/卸載、時間軸事件、自訂行為
• 動作類型：跳轉場景、播放/暫停/繼續/倒轉時間軸、執行 JavaScript、播放/停止音訊、設定元素屬性、發送自訂行為、API 呼叫

檢查器詳細設定

文檔分頁

• 顯示器相容性（響應式佈局、斷點設定）
• HTML 頁面標題、中繼資料
• 載入時/卸載時/鍵盤事件的場景級動作

場景分頁

• 場景尺寸、背景顏色/圖片
• 場景轉場動畫（瞬間、淡入淡出、推擠、立方體翻轉等）
• 場景載入/卸載/鍵盤事件動作

偏好設定與雲端同步

• 介面主題色調（深色/淺色/系統）
• 警告提示設定
• Dropbox 同步專案檔案（不支援 iCloud Drive）

Hype Reflect iOS 應用

配合免費 iOS App「Hype Reflect」，可透過 Wi-Fi 即時預覽 Mac 上編輯中的 Hype 專案在 iPhone/iPad 上的真實表現（觸控互動、效能、排版），所見即所得，極大提升行動端開發效率。

匯出與發布

• HTML5 資料夾：標準 HTML + JS + CSS + 資源檔，可部署至任何靜態主機（GitHub Pages、Netlify、Vercel、FTP）
• 影片輸出：MP4/WebM/GIF，適合社群媒體分享
• Widget/儀表板小工具：舊版 macOS Dashboard 格式（已棄用）
• iBooks Author 專案：嵌入互動書

學習資源推薦

• 官方教學：Hype Documentation
• 官方論壇：社群討論與範例分享
• YouTube 頻道：影片教學

小結

Hype 3 將複雜的 HTML5/CSS3/JS 動畫與互動開發，封裝為直觀的時間軸與屬性面板操作，大幅降低門檻。雖需投入時間學習，但比手寫程式碼高效得多，適合設計師、行銷人員、教育工作者、前端開發者快速產出高品質互動內容。