詳細(xì)步驟:

第一步:登錄網(wǎng)站

登錄VXPLO互動(dòng)大師官網(wǎng)" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > 不用編碼!互動(dòng)大師教你輕松制作酷炫的H5頁(yè)面案例

不用編碼!互動(dòng)大師教你輕松制作酷炫的H5頁(yè)面案例

時(shí)間:2023-10-12 22:36:01 | 來(lái)源:網(wǎng)站運(yùn)營(yíng)

時(shí)間:2023-10-12 22:36:01 來(lái)源:網(wǎng)站運(yùn)營(yíng)

不用編碼!互動(dòng)大師教你輕松制作酷炫的H5頁(yè)面案例:前段時(shí)間某品牌手機(jī)的廣告里,用逼真的打字效果”一步一步看清韓寒”。其實(shí)設(shè)計(jì)師,不用寫(xiě)編碼,也可以做出一樣的效果。


詳細(xì)步驟:

第一步:登錄網(wǎng)站

登錄VXPLO互動(dòng)大師官網(wǎng)(http://www.vxplo.cn)。在我的作品里,創(chuàng)建一個(gè)新的手機(jī)案例,根據(jù)需要調(diào)整舞臺(tái)大?。ù蠖鄶?shù)手機(jī)像素是640*1008,iPhone4的是640*832,iPhone5/5S的是640*1008,iPhone6的是640*1030,iPhone6+的是640*1040),互動(dòng)大師默認(rèn)的舞臺(tái)大小是640*1008,該案例是以大多數(shù)手機(jī)尺寸為準(zhǔn),就不需要再調(diào)整舞臺(tái)大小了。

第二步:新建一個(gè)手機(jī)案例

在我的作品里,創(chuàng)建一個(gè)新的手機(jī)案例,根據(jù)需要調(diào)整舞臺(tái)大?。ù蠖鄶?shù)手機(jī)像素是640 * 1008,如果要匹配iPhone6,可以調(diào)為640 * 1030,iPhone6+的是640 * 1040),互動(dòng)大師默認(rèn)的舞臺(tái)大小是640*1008。這個(gè)案例是以大多數(shù)手機(jī)尺寸為準(zhǔn),就不需要再調(diào)整舞臺(tái)大小了。


第三步:添加素材

在舞臺(tái)下添加樸樹(shù)的平凡之路音樂(lè)素材,音樂(lè)屬性設(shè)為自動(dòng)播放YES,同樣添加打字機(jī)聲音的音樂(lè)素材,音樂(lè)屬性設(shè)為自動(dòng)播放NO(因?yàn)橹挥性诖蜃謾C(jī)動(dòng)的時(shí)候才有聲音)。添加時(shí)間軸1(根據(jù)這個(gè)案例的需要,將時(shí)間軸的自動(dòng)播放和循環(huán)播放屬性設(shè)置為NO,時(shí)間軸時(shí)長(zhǎng)設(shè)為65s),在時(shí)間軸下添加1、2、3、4、5圖片素材,即打字機(jī)中出現(xiàn)的圖片,讓這些圖片成為時(shí)間軸1的子對(duì)象。同樣的方法添加時(shí)間軸2,并在它下面添加打字機(jī)的GIF圖片


第四步:設(shè)置打字出現(xiàn)的效果

選中時(shí)間軸1下的每張圖片,點(diǎn)擊工具欄中的軌跡按鈕為每張圖片添加軌跡。然后在軌跡上添加圖片運(yùn)動(dòng)的關(guān)鍵幀。例如,選中圖片1的軌跡添加關(guān)鍵幀,控制圖片1的運(yùn)動(dòng)。在這個(gè)案例中,這些圖片是從下到上出現(xiàn)的,所以只需要選中關(guān)鍵幀,修改圖片的Y坐標(biāo)就可以達(dá)到向上運(yùn)動(dòng)的效果。比如在圖片1軌跡1中,0秒關(guān)鍵幀時(shí),圖片1的坐標(biāo)為(0, 950),在1秒的地方,添加另一個(gè)關(guān)鍵幀,并設(shè)置圖片1的坐標(biāo)為(0, 200),這樣圖片1就在1秒的時(shí)間內(nèi)從Y坐標(biāo)為950的位置向上移動(dòng)到了200的位置,即視覺(jué)上打字機(jī)中的圖片向上慢慢出現(xiàn)了。照此方法,用時(shí)間軸2添加打字針的運(yùn)動(dòng)效果,要注意,打字針是左右運(yùn)動(dòng)。


第五步:添加打字機(jī)動(dòng)畫(huà)

選中舞臺(tái),添加透明按鈕1,區(qū)域?yàn)椤卑聪驴辞迕恳徊健钡拇笮?,或可以拉得更大。添加透明按鈕的遠(yuǎn)影是避免iPhone中由于長(zhǎng)按圖片會(huì)自動(dòng)跳出保存圖片的指令。

在透明按鈕下添加事件,事件是交互中的核心,首先你需要梳理清楚事件的觸發(fā)條件,即用戶做了什么動(dòng)作觸發(fā)了什么效果,即目標(biāo)對(duì)象是什么,目標(biāo)效果是什么。在這個(gè)案例中,以事件1和事件2為例,用戶的動(dòng)作是長(zhǎng)按底部按鈕時(shí),打字針會(huì)左右運(yùn)動(dòng),同時(shí)打字機(jī)中的圖片向上出現(xiàn),當(dāng)手指離開(kāi)的時(shí)候,打字針停止,打字機(jī)中的圖片也停止向上。

按這個(gè)邏輯,設(shè)置在透明按鈕下插入四個(gè)事件,

事件1為手指按下,0秒,目標(biāo)對(duì)象時(shí)間軸1,目標(biāo)動(dòng)作為繼續(xù)播放。

事件2為手指按下,0秒,目標(biāo)對(duì)象時(shí)間軸2,目標(biāo)動(dòng)作為繼續(xù)播放。

以上兩個(gè)事件控制打字機(jī)在手指按下的情況下,會(huì)有打字針左右運(yùn)動(dòng),打字機(jī)中的圖片向上運(yùn)動(dòng)的效果。

用同樣的邏輯,可以設(shè)置控制打字機(jī)的音效。讓我們來(lái)看一下這樣完成的這個(gè)作品的效果。點(diǎn)擊這里預(yù)覽。

簡(jiǎn)單的五步操作就能將這樣一個(gè)很有創(chuàng)意很酷炫的H5頁(yè)面作品做出來(lái)了,而且不需要寫(xiě)任何代碼,是不是很簡(jiǎn)單?小伙伴們有沒(méi)有g(shù)et到這個(gè)新技能呢?,F(xiàn)在可以就登錄http://www.vxplo.cn試一下哦!

資料由AAA教育整理

關(guān)鍵詞:編碼,大師

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉