下面我們一起來學習iH5高階教程:H5互動選單,3D彈縮式選單特效
工具/原料
iH5
方法/步驟
1、選中舞臺,點選滑動時間軸工具,在舞臺上畫一個框,編輯滑動時間軸屬性面板。X座標為0,y座標為0,滑動時長0.5秒,滑動方向為上,自動跳轉控制點為YES。
2、選中滑動時間軸,點選透明按鈕工具,在舞臺上畫一個框,重新命名為3D目錄。屬性面板視距為2000,子物件便有3D旋轉的效果。
3、選中3D目錄,點選透明按鈕工具,在舞臺上畫一個框,重新命名為容器。
4、選中容器,點選軌跡工具,新增軌跡。點ADD新增關鍵幀。
5、在時間軸視窗第一個框裡填寫0.5,點回車,容器屬性面板x軸旋轉90度,點ADD新增關鍵幀。播放時間軸,可以看到容器的3D旋轉效果。
6、選中容器,點選圖片工具,上傳一張目錄圖片。因為目錄圖片是容器的子物件,所以播放時間軸時,圖片也有3D旋轉的效果。
7、選中3D目錄圖片,點選透明按鈕,在圖片上畫一個框,共新增4個透明按鈕。重新命名為喜歡、美食、衣服、辦公。
8、選中辦公透明按鈕,點選圖片工具,上傳辦公圖片、紅色圖片、與底塊圖片。其中紅色圖片初始可見為NO
1、選中滑動時間軸,點選透明按鈕工具,在舞臺上畫一個框,重新命名為3D內容。
2、選中3D內容,點選軌跡工具,點ADD新增關鍵幀。製作透明按鈕往上移動的效果。即目錄3D旋轉網上縮小的時候,內容往上移動。
3、選中3D內容,點選圖片工具,新增4張圖片。分別對應目錄的4個內容。
1、選中目錄的辦公透明按鈕,點選事件組工具,觸發條件為手指按下。
2、選中事件組,點選事件工具,新增3個事件。點選辦公透明按鈕,目錄的紅色圖片顯示,滑動時間軸播放下一個關鍵點,即目錄收起來,內容網上移動,與辦公對應的內容圖片顯示,與之同層的其他圖片隱藏。
3、選中內容裡的辦公圖片,點選事件工具,辦公圖片隱藏,目錄的紅色圖片隱藏。
先行知識:滑動時間軸、軌跡、事件
重點控制元件:滑動時間軸、軌跡、視距、x軸旋轉、事件、隱藏同層控制元件
知識點:
1、視距:視距是指以物件的中心為旋轉中心時,物體物件3D翻轉時的變形距離,必須在3D旋轉的父物件上設定。視距是父物件與子物件的距離,從父物件位置觀看子物件的透視點視角,距離越近,3D透視效果越大,距離越遠,3D透視效果越小。一般範圍從200至2000,建議使用1000。
2、隱藏同層控制元件:目標物件顯示,與目標物件的同層的所有其他物件都會隱藏。
重點事件:
觸發物件:辦公目錄
觸發條件:手指按下
目標物件:滑動時間軸
目標動作:播放下一個關鍵點
觸發物件:辦公目錄
觸發條件:手指按下
目標物件:辦公內容
目標動作:隱藏同層控制元件