木疙瘩教程：“拍宇航員”h5案例制作過程

本期分享“拍宇航員”本家兒題的h5案例建造方式：

東西/原料

mugeda

方式/步調

1
添加素材：新建“布景”圖層添加布景圖片素材、文本框素材、圓圈素材新建“按鈕”圖層添加攝影按鈕圖片素材新建“宇航員”圖層添加宇航員圖片素材調整各個素材巨細、位置如下圖，輸入文本框內容為“0”
2
為各個素材定名：定名文本框素材為“分數”定名宇航員圖片素材為“宇航員”
3
如下圖，新建“節制”圖層，添加一個按時器，將其移至“舞臺”之外，在按時器“屬性”面板內設置相關屬性：精度：“毫秒”記時偏向：“倒計時”是否輪回：“輪回”不成見時：“暫停記時器”長度：“3”秒
4
定名按時器為“up”
5
移動宇航員圖片至“舞臺”上方，在其“屬性”面板下點擊“上”屬性右邊的“聯系關系”按鈕，鄙人拉聯系關系屬性菜單下設置聯系關系對象：“up”聯系關系屬性：“文本取值”聯系關系體例：“主動聯系關系”當本家兒控量=“3”時被控量=“-200”（宇航員在“舞臺”上方的位置）當本家兒控量=“0”時被控量=“541”（宇航員在“舞臺”下方的位置）
6
點擊“隨機數”按鈕，在“舞臺”上添加一個隨機數，為其定名為“角度”，調整最年夜值、最小值別離為“-90”“90”，更新距離為“3”秒
7
選中“宇航員”，在其“屬性”面板下點擊“Z軸扭轉”屬性右邊的“聯系關系”按鈕，鄙人拉聯系關系屬性菜單下設置聯系關系對象：“角度”聯系關系屬性：“文本取值”聯系關系體例：“公式聯系關系”被控量=“聯系關系屬性”即設置了“宇航員”每次的Z軸扭轉角度與隨機數的文本取值相等
8
選中文本框，在其“屬性”面板下點擊字體內容右邊的“聯系關系”按鈕，鄙人拉的聯系關系屬性菜單欄內設置聯系關系對象：“宇航員”聯系關系屬性：“上”聯系關系體例：“主動聯系關系”當本家兒控量=“75”時被控量=“0”當本家兒控量=“175.7”（宇航員在圓圈正中間位置）時被控量=“100”當本家兒控量=“275”時被控量=“0”，設置分數與“宇航員”位置相關可點擊“預覽”不雅察結果
9
可點擊“保留”
10
選中所有圖層的第2幀“插入幀”
11
在“節制”圖層的第2幀“插入關頭幀”，刪除關頭幀上的兩個節制元素
12
為攝影圖片按鈕設置編纂行為：“跳轉下一幀”行為：“動畫播放節制”→“下一幀”→觸發前提：“點擊”“暫停”行為：“動畫播放節制”→“暫停”→觸發前提：“呈現”
13
在“按鈕”圖層第2幀“插入關頭幀”，刪除關頭幀上的攝影按鈕圖片素材
14
同時，在“按鈕”圖層第2幀上點擊添加一個文本框素材，輸入文字內容“再來一次”，調整文本框巨細、位置、字體、顏色等屬性
15
為“再來一次”文本框添加編纂行為：“動畫播放節制”→“上一幀”→觸發前提：“點擊”“屬性節制”→“改變元素屬性”→觸發前提：“點擊”，設置“參數”為元素名稱：“分數”元素屬性：“文本取值”賦值體例：“用設置的值替代現有值”取值：“0”點擊“確認”
16
點擊“預覽”不雅察結果