H5微官網(wǎng)代碼實施教程1

2009-05-28 H5制作

今天是315，前兩天叔給大家打了個“假”，介紹了很多“假H5”，不明覺厲的同學可以回顧一下：“揭秘這幾類“假H5”，是怎么騙我們的”

文章里預告了今天會給大家放教程，教的就是這個最近刷屏朋友圈的“荔枝FM聲鑒卡”。

上篇里叔告訴了大家，“假H5”的原理，具體到這個案例里，就要有請伍嬸兒了，下面歡迎伍嬸兒來給大家進行案例分析和制作教程~

打開案例首先是輸入姓名，選擇性別，然后點擊聲音鑒定進入下一頁；第二頁是聲音鑒定頁面，長按“按住錄音”按鈕，時間條和計時器會隨之變化，按住時間不足5秒松開會提示按住時間不夠，同時時間條計數(shù)器都歸零，按住時間大于等于5秒后松開手指，會提示分析成功，點擊查看結果后會跳轉第三頁；第三頁是結果頁，會有分析結果顯示，分析結果有男女各三個類型和四個比值。

制作之前建議大家先看一下官網(wǎng)的計數(shù)器、變量的教學視頻，方便大家更好的學習這個案例~

一、放素材

1、創(chuàng)建作品，添加一個移動設備，添加三個頁面，分別是首頁、錄音頁、結果頁；

2、在將素材分別拖入對應的3個頁面中，在首頁輸入姓名的地方添加一個輸入框，設置輸入框透明背景為yes，將妹紙和漢紙的選中效果放在一個容器里，用兩個透明按鈕將妹紙和漢紙都覆蓋，在聲音鑒定位置添加一個透明按鈕；

3、在錄音頁添加透明按鈕，將按住錄音按鈕覆蓋，將time條放在一個等大的透明按鈕中，用時間bg圖片覆蓋。將分析成功提示和時間太短提示放在一個容器下；

4、在結果頁添加兩個容器，分別放置計數(shù)器和結果，結果容器中再放入兩個容器，分別放置漢紙和妹紙的結果

二、交互

5、在首頁，給輸入框添加一個事件，輸入不為空，鑒定按鈕顯示，避免未命名直接跳轉頁面；給妹紙透明按鈕添加事件：

（1）輕觸，妹紙選中效果，隱藏同層控件

（2）輕觸，結果頁的漢紙容器，隱藏同層控件，漢紙同理；

6、給鑒定按鈕添加事件組，輕觸之后：

（1）輸入框傳值到結果頁的名字文本，來生成結果頁的名字；

（2）計數(shù)器生成隨機數(shù)最小值1，最大值3；

（3）跳轉下一頁。

給計數(shù)器添加事件，當計數(shù)器等于1時，青叔音圖片和少蘿音圖片隱藏同層控件；當計數(shù)器等于2時，青年音圖片和御姐音圖片隱藏同層控件；計數(shù)器等于3同理。

用這一步來決定結果頁隨機顯示哪一張結果圖片；

7、在移動設備下添加兩個變量，分別命名為比大小和時間長度，時間長度的變量名稱設置為length；

8、在第二頁中將時間條透明按鈕放入一個容器中，將這個容器命名為計時，這個容器里面都是實現(xiàn)計時功能的工具；在這個容器中添加一個1S的時間軸，再添加一個計數(shù)器，計數(shù)器綁定變量“時間長度”，設置計數(shù)器的最大值為5，最小值為0，給時間軸添加事件，時間軸結束，計數(shù)器加1；給計數(shù)器添加事件計數(shù)器數(shù)值變化，給“透明按鈕”時間條設置屬性，寬為$length*50,這樣就可以使時間條和計數(shù)器同步變化，注意時間條透明按鈕剪切屬性要打開；