軟件介紹
Hype4特別版是一款專門為Mac OS平臺打造的HTML5創作工具,無需編碼就可以在網頁上做出賞心悅目的動畫效果,創建豐富的網頁交互動畫,在臺式機,智能手機和iPad上流暢表現。這款MacOS系統的交互動效制作軟件,與Keynote軟件的界面基本一致,并且支持層、時間軸等編輯方式。
Hype 4延續了蘋果軟件的簡潔風格,操作也比較方便,讓用戶可以使用HTML5創建應用程序,并能很好的導出HTML5/CSS3/JavaScript,用Hype制作的交互式內容和動畫可在臺式機、智能手機和iPad上使用。
軟件特色
場景
場景是分離和組織內容的有用方法。它們類似于Keynote或PowerPoint演示文稿中的幻燈片。
元素
元素是場景中的對象。它們可以是形狀,文本,按鈕,紋理按鈕,圖像,視頻或HTML小部件。
矢量形狀
矢量是使用矢量工具繪制的形狀,包括直線,曲線和復雜形狀。
動畫制作
Hype使用功能強大的基于關鍵幀的動畫系統為元素提供運動和過渡。它的錄制功能使制作動畫變得輕而易舉。
時間線
時間軸包含動畫。每個場景至少有一個時間軸,場景也可以有許多時間軸。使用動作來開始,暫?;蚶^續時間表會創建豐富而復雜的文檔。
動作
場景,時間線和動畫是所有Hype文檔的基礎。動作將這個基礎聯系在一起,并使文檔具有交互性。
符號
符號是一個功能強大的工具,可讓您輕松地重用元素,時間軸和動畫。
音頻視頻
Hype支持最新的HTML5音頻和視頻API,用于創建具有豐富多媒體內容的文檔。
版式
文字和字體控件,Google字體和自定義字體支持。
物理
物理使您可以控制元素的物理屬性(反彈,摩擦,空氣阻力和密度)以及場景的引力。
響應式布局
響應式布局允許您為單個場景創建多個布局,這些布局顯示在特定的斷點處。
布局靈活
靈活的布局是一個功能強大的布局系統,用于調整文檔和元素的大小和縮放比例,允許Hype動畫在瀏覽器窗口或設備的視口更改大小時做出響應。
Hype反映
適用于iOS的Hype Reflect可讓您在任何iOS設備上快速預覽或鏡像Hype文檔。
觸控與行動
Hype提供了幾種用于產生觸摸友好交互性的選項。
預覽和導出
在本地瀏覽器上預覽Hype文檔并將文檔導出到Web。
輔助功能
了解有關如何在文檔中添加替代文本,角色和輔助功能的信息。
導出腳本
通過在導出過程中添加其他處理步驟來自動執行Hype輸出。
范本
模板是“凍干”的Hype文檔-打開Hype模板會基于打開的模板創建一個新文檔。
資源資源
資源是已添加到Hype文檔中的圖像,視頻,JavaScript函數和其他文件。
JavaScript
Hype中的JavaScript函數通常是響應用戶事件而運行的。
檢驗員
Hype的九名檢查員可以輕松訪問文檔,場景和元素屬性,以及各種其他控件。
捷徑
探索Hype的眾多鍵盤快捷鍵,以更有效地工作。
Hype4特別版軟件功能
多邊形
可以將任意數量的側面形狀輕松插入文檔中。它們是可編輯的,并且可以作為更復雜的矢量形狀的起點。
路徑
路徑通常被稱為“鋼筆工具”,“曲線”或“向量”,是所有向量形狀的基礎,并且可以包含多個由控制點操縱的直線或曲線段。
鉛筆工具
您可以畫一條線,而不是為路徑定義單個點,它會自動平滑并轉換為路徑。我們建議將此工具與Astropad等平板電腦解決方案配對。
形狀變形
自動將一個矢量形狀設置為另一種形狀!您需要做的就是點擊記錄,移動播放頭和修改形狀。
畫線動畫
非常適合內置,您可以使用“ vivus”風格的效果使矢量形狀具有被繪制的外觀。使用“鉛筆工具”時,可以自動添加這些工具。
物理與互動
矢量形狀可以成為動態物理實體,并成為模擬物理環境的一部分。使用“鉛筆”工具繪制的形狀將變得生動起來!
精靈表/圖像序列導入
導入使用其他工具制作的 Sprite 表格,或讓 Hype 為您提供一系列圖像文件或 GIF 動畫的表格。連同持續時間和循環選項,可以在時間軸上操縱生成的動畫元素。
掉落和嵌入陰影
陰影使用 CSS 濾鏡效果將陰影動態添加到具有不規則形狀的元素或包含 alpha 值的圖像。插圖陰影像小插圖一樣應用到盒子的內部。
回退映像
拍攝活動場景的快照,并將其用作廣告的海報/備用圖像,或在用戶禁用 JavaScript 時用作備用。
數學方程式計時功能
您可以編寫 JavaScript 方程式來定義動畫的定時功能,而不是內置或自定義緩動。
官方CDN
此高級導出選項允許使用托管的運行時文件。對于廣告,它們通常不計入可交付文件的大小要求,并且在某些情況下可以加快加載速度。
iPhone X選項
現在,預設場景大小包括最新手機的默認大小,并且有一個用于處理陷波的移動選項。
翻頁過渡
這是從一個場景到另一個場景(綁定到拖動手勢)的最平滑方法。它是“現場輕掃”操作的過渡選項。新的“為顯示準備”動作處理程序提供了設置下一個場景的機會。
偏斜
通過在 X 或 Y 方向上添加剪切來變換元素。細微的偏斜動畫可以為您的元素增添生氣。
外部編輯
編輯其他應用程序中的資源??梢栽谖谋揪庉嬈鳎ㄈ鏐BEdit)中編輯 JavaScript 函數或 Head HTML??梢栽赑hotoshop 或 Affinity Photo 等應用中編輯圖像。保存在另一個應用程序中會將文件寫回到您的 Hype 文檔中。
可編輯的HTML屬性
將其他屬性添加到圖像。這可以是自定義data- *屬性,也可以是標準屬性,例如視頻的 poster 屬性。
物理API訪問
Hype 的物理引擎基于 something.js,現在可以通過 JavaScript 代碼和元素設置器 API 進行訪問。這允許進一步定制并利用其高級功能。
Hype4特別版使用方法
一、Hype 4工作界面
Hype軟件的工作界面可以分為兩大部分:菜單欄和工作平臺。
圖1:Hype工作界面
工作平臺:創作場景動效的主界面。在實際工作中,小伙伴可以通過“滿屏按鈕”把工作平臺調整到最大,遮擋菜單欄,通過使用快捷鍵和鼠標右鍵菜單實現操作命令,代替點擊菜單欄中的命令選項。
二、Hype 4工作平臺
Hype 4的工作平臺由五大模塊組成:工具箱、導航欄、場景窗口、面板及資源管理和時間線及元素屬性管理面板。
圖2:Hype 4 工作平臺
工具箱:包含執行各種操作的工具。按照工具的分布,可以分為5組工具,如:顯示或者隱藏場景導航欄、給場景添加元素、顯示或者隱藏屬性面板管理欄等等。
圖3:工具箱
場景工具:點擊此工具可以顯示或者隱藏場景導航欄。
布局工具:點擊此工具可以顯示或者隱藏布局導航欄。
元素工具:可以在場景畫布上添加文本、形狀、音樂、視頻以及圖片等各種元素。
符號工具:可以在場景畫布上創建符號或者把選定的元素轉換為符號。
成組工具:可以把選中的多個元素或符號組合成一組進行管理。
取消成組工具:把一組多個元素拆散為各自獨立的元素。
前方工具:把選定的元素移動到所有元素的前面。
后方工具:把選定的元素移動到所有元素的后面。
縮放工具:可以縮放場景畫布的大小,以方便觀察場景。
預覽工具:把場景的內容在選定的瀏覽器上運行瀏覽。
檢查器工具:點擊此工具可以顯示或者隱藏面板管理欄。
資源工具:點擊此工具可以顯示或者隱藏資源管理欄。
導航欄:管理場景或者布局的區域。在場景導航欄可以添加、刪除、移動場景;在布局導航欄可以為場景設置布局大小。
場景窗口:是場景畫布,是顯示和編輯元素的區域。
面板及資源面板管理區域:包括元素、場景、操作、物理量等多個面板,是用戶經常使用的“合成”面板。在資源管理面板可以添加圖片、音頻和視頻等素材。
時間線及元素在時間線上的屬性控制面板:在這里可以通過“錄制”給元素制作動效;也可以在時間線上給元素的某個屬性添加關鍵幀。
三、調整模塊在工作平臺位置
在Hype 4工作平臺,除了工具箱、場景窗口兩個模塊不能移動外,場景導航欄、布局導航欄、面板管理欄、資源管理欄和時間線及元素管理面板都是可以移動改變位置的。
圖4:改變模塊在工作平臺的位置
一般來說,小伙伴可以根據自己顯示屏的大小調整模塊的位置。對于在一個場景中有大量元素制作動效,小編的習慣是把時間線模塊移動到場景窗口里面,這樣能夠使時間線模塊的高度與場景窗口的高度一致,從而能完全顯示時間線上的元素。
圖5:調整了時間線模塊的工作平臺
四、總結
在這里,小編簡單地介紹了Hype 4軟件的界面,讓小伙伴對Hype 4軟件功能有一個初步的認識,后面小編將詳細給小伙伴講解各個模塊的具體作用。