網頁html在線制作,h5頁面,首頁頁面制作 

美国职业棒球比分多少结束 www.996022.live 2015-07-03 20:14 發布

2701 0 0
前段時間某品牌手機的廣告里,用逼真的打字效果”一步一步看清韓寒”。其實設計師,不用寫編碼,也可以做出一樣的效果。
詳細步驟:
第一步:登錄網站
登錄VXPLO互動大師官網(www.vxplo.cn)。在我的作品里,創建一個新的手機案例,根據需要調整舞臺大?。ù蠖嗍只袼厥?40*1008,iPhone4的是640*832,iPhone5/5S的是640*1008,iPhone6的是640*1030,iPhone6+的是640*1040),互動大師默認的舞臺大小是640*1008,該案例是以大多數手機尺寸為準,就不需要再調整舞臺大小了。
第二步:新建一個手機案例
在我的作品里,創建一個新的手機案例,根據需要調整舞臺大?。ù蠖嗍只袼厥?40 * 1008,如果要匹配iPhone6,可以調為640 * 1030,iPhone6+的是640 * 1040),互動大師默認的舞臺大小是640*1008。這個案例是以大多數手機尺寸為準,就不需要再調整舞臺大小了。
第三步:添加素材
在舞臺下添加樸樹的平凡之路音樂素材,音樂屬性設為自動播放YES,同樣添加打字機聲音的音樂素材,音樂屬性設為自動播放NO(因為只有在打字機動的時候才有聲音)。添加時間軸1(根據這個案例的需要,將時間軸的自動播放和循環播放屬性設置為NO,時間軸時長設為65s),在時間軸下添加1、2、3、4、5圖片素材,即打字機中出現的圖片,讓這些圖片成為時間軸1的子對象。同樣的方法添加時間軸2,并在它下面添加打字機的GIF圖片。
第四步:設置打字出現的效果
選中時間軸1下的每張圖片,點擊工具欄中的軌跡按鈕為每張圖片添加軌跡。然后在軌跡上添加圖片運動的關鍵幀。例如,選中圖片1的軌跡添加關鍵幀,控制圖片1的運動。在這個案例中,這些圖片是從下到上出現的,所以只需要選中關鍵幀,修改圖片的Y坐標就可以達到向上運動的效果。比如在圖片1軌跡1中,0秒關鍵幀時,圖片1的坐標為(0, 950),在1秒的地方,添加另一個關鍵幀,并設置圖片1的坐標為(0, 200),這樣圖片1就在1秒的時間內從Y坐標為950的位置向上移動到了200的位置,即視覺上打字機中的圖片向上慢慢出現了。照此方法,用時間軸2添加打字針的運動效果,要注意,打字針是左右運動。
第五步:添加打字機動畫
選中舞臺,添加透明按鈕1,區域為”按下看清每一步”的大小,或可以拉得更大。添加透明按鈕的遠影是避免iPhone中由于長按圖片會自動跳出保存圖片的指令。
在透明按鈕下添加事件,事件是交互中的核心,首先你需要梳理清楚事件的觸發條件,即用戶做了什么動作觸發了什么效果,即目標對象是什么,目標效果是什么。在這個案例中,以事件1和事件2為例,用戶的動作是長按底部按鈕時,打字針會左右運動,同時打字機中的圖片向上出現,當手指離開的時候,打字針停止,打字機中的圖片也停止向上。
按這個邏輯,設置在透明按鈕下插入四個事件,
事件1為手指按下,0秒,目標對象時間軸1,目標動作為繼續播放。
事件2為手指按下,0秒,目標對象時間軸2,目標動作為繼續播放。
以上兩個事件控制打字機在手指按下的情況下,會有打字針左右運動,打字機中的圖片向上運動的效果。
用同樣的邏輯,可以設置控制打字機的音效。讓我們來看一下這樣完成的這個作品的效果。點擊這里預覽。
簡單的五步操作就能將這樣一個很有創意很酷炫的H5頁面作品做出來了,而且不需要寫任何代碼,是不是很簡單?小伙伴們有沒有get到這個新技能呢。現在可以就登錄www.vxplo.cn試一下哦!

聯系
我們
快速回復 美国职业棒球比分多少结束 返回列表
{ganrao}