2020年是特殊的一年，今年的國慶和中秋都擠在了十一黃金周，一星期內連過兩個大節日，但又時逢疫情，相信大部分人都苦于無法上門拜訪慶祝，這時候，為親朋好友們送上一張自己用心制作的電子賀卡，是最合適不過的祝賀節日方式了。
下面，小編將在Mac系統上，使用Hype 4版本，為大家送上制作動態電子賀卡網頁的教程，在看完本教程以后，小編保證你也能做出美美的電子賀卡，心動不如行動，隨小編一起進入Hype的神奇世界吧！
效果預覽與分析
這里小編已經提前做好了一個電子賀卡效果，大家先一起預覽一下效果吧，效果見下圖1的GIF，是不是特別好看呢？是不是突然間動力滿滿了呢？
圖1：GIF效果展示預覽
從上圖預覽可以看到，整個效果主要包含一個粉紅色場景的制作，場景需要兩個矩形作為賀卡邊框，還需要一行一閃一閃時隱時現的祝福語，同時頁面開始就有3個心形圖案漂浮向上，最吸引人的是中間心形圖案沿著Love軌跡移動的動態效果，這里需要的素材有2個，一個是Love的圖像素材，另一個是心形圖像素材，有上面2個素材就可以完成整個電子賀卡的制作了，分析完成后，下面開始正式的教程。
場景部署
第一步：在Hype左側場景列表中，新建一個場景，然后點開Hype的“場景檢查器”，設置場景大小為Web項的大小（1240*800），以確保場景足夠大，能否覆蓋整個HTML網頁。
圖2：設置場景大小
第二步：同樣的，在“場景檢查器”中，設置場景背景顏色的代碼為“#A52543”，如下圖3，將場景的顏色從白色變為溫和的粉紅色系。
圖3：修改場景背景顏色
第三步：此時由于場景很大，所以默認的縮放比例100%是無法俯瞰整個場景的，所以需要調整Hype上方的縮放比例為50%或者75%，如下圖4，以保證大家可以完整地看到整個場景頁面，方便下面的場景制作。
圖4：縮放場景
第四步：點擊“元素”按鈕，選擇“矩形”，往場景中加入一個矩形，然后在“度量檢查器”中，取消勾選“限制比例”，修改矩形的寬度為“600px”，高度為“600px”，保證矩形是一個正方形，然后鼠標拖動矩形的位置在場景的正中間。
圖5：調整矩形大小
第五步：選中矩形元素，然后切換到“元素檢查器”，設置矩形的填充樣式為“顏色”，顏色代碼填寫“#D497A6”，如下圖6。
圖6：設置矩形背景顏色
第六步：再次添加一個矩形元素，然后根據上述步驟，設置該新建矩形的寬度為“570px”，高度為“570px”，矩形的背景顏色代碼為“#A52543”，最后鼠標拖動該矩形，調整矩形的位置，調整到效果如下圖7即可。
圖7：調整矩形位置
從上述的效果預覽中可以看到，想要達到上述的效果，還需要一張Love圖像素材和心形圖像素材。因此，在開始下面步驟前，小編提前準備好了一張矢量圖和一張心形圖素材，分別對應下圖8和下圖9，分享給大家使用，大家要是不滿意或者是想要自定義的話，可以將矢量圖拉入PhotoShop軟件中進行另外的加工處理。
圖8：love矢量圖
圖9：心形圖
第七步：在元素按鈕中選擇“圖像”，將Love矢量圖拉入場景中，然后拖動位置使場景效果如下圖10。
圖10：場景加入Love矢量圖
第八步：在元素按鈕中，選擇“文本”，往場景中加入一行文字，具體內容如下：“happy national day !”，寓意國慶節快樂，大家可以隨意發揮。然后在“排印檢查器”中，需要設置三個地方，主要設置參數如下圖11所示。
圖11：設置文本格式
具體需要設置文字的字體類型為“Palatino”,字體大小為“48px”，字體顏色代碼為“#E5BCC7”。最后，拖動字體元素，調整字體的位置如下圖12。
圖12： 場景完成效果展示
到這里為止，本節就結束了，在本節中，小編帶大家學習了如何搭建一個好看的電子賀卡場景，在下一節中，將主要帶大家學習如何利用Hype的動畫軌跡功能，實現心形動態上浮的效果和文字閃爍的效果，請大家繼續關注Hype中文網站進行后續學習哦。
