注冊登陸后點擊創(chuàng)建作品
即可開始自己作品的創(chuàng)作啦
（選擇新版工具）
幾乎和Ps的操作界面一模一樣
是不是很有親切感？
工作區(qū)就是畫板，iH5叫舞臺
對象樹就相當于圖層窗口
如果你足夠細心
可以看到頁面的右上角
iH5自帶的視頻教程
是我見過的最棒的教程
系統(tǒng)、完善、直白、沒有廢話
總體來說用不上一天就可以看完
所以我并不打算做詳細的教程講解
但是有必要從框架上做一些解釋
學習一門新知識，一定是先從框架學起
可以幫助大家在學習中事半功倍
iH5框架
如果你看了上面幾個案例或者是iH5中的更多案例，那么你覺得一個h5網(wǎng)頁，一般應(yīng)該包含哪些東西呢？
1.展示
文字、圖片、視頻、音頻。簡而言之，就是什么都能展示。而且每個頁面中的元素都是分層的，頂層的會擋住底層。當然音頻是沒有層的，只看誰聲音能蓋過誰。
2.對象
我們導入的圖片、視頻、音頻、文字都是對象。系統(tǒng)為我們提供的工具，也是用來生成對象的，比如用矩形工具拉一個矩形出來，按鈕工具添加進來一個按鈕，都是對象。
我們可以來操作的一個東西或者是一組東西，都被看成是一個對象。
3.交互
什么是交互？就是和你有互動。也就是不僅僅是自己按照事先的設(shè)定按順序一個一個的展示，還可以根據(jù)操作者的動作來操控：
點擊、滑動、長按、拖動、搖晃等等，就和你玩微信的時候一樣。
4.觸發(fā)事件
觸發(fā)事件最大的意義就是，對對象的控制：我讓你動的時候你才能動。比如背景音樂，我想讓最煽情的圖片出現(xiàn)的時候才播放，而不是一上來就播放。
這也是剛剛我們說交互的一種具體體現(xiàn)。
觸發(fā)事件有四個要素：
接受觸發(fā)的對象--對象A
觸發(fā)的動作--動作1
目標對象--對象B
目標對象動作--動作2
也就是當A發(fā)生了動作1，就讓B發(fā)生動作2
其中：
A和B可以相同
自己觸發(fā)自己
接受觸發(fā)的對象和目標對象都可以不只一個
比如有兩個條件同時滿足時才觸發(fā)
或者兩個條件滿足其中之一就觸發(fā)
每一種類的對象，對應(yīng)著不同的事件
比如視頻對象，就會有播放和暫停的事件
而計數(shù)器，你就可以讓它加1或者減1
當然也有一些事件是所有類型對象都有的：
比如顯示、隱藏、置于頂層或者置于底層
任何一個對象都有可能被觸發(fā)
包括舞臺本身
5.對象屬性和時間軸動畫
每一個對象都有自己的屬性，比如位置、大小、旋轉(zhuǎn)、不透明度、顏色等等。就和人有身高性別一樣。如果讓對象在不同時間、某一個或者某幾個屬性發(fā)生變化，那么就是我們熟悉的Pr或者Ae中的時間軸動畫了。
同樣的，時間軸也是一個對象：
有自己的屬性：比如自動播放時間軸上的動畫。
時間軸也接受事件的觸發(fā)，比如你長按或者是滑動的時候再播放時間軸上的動畫。
6.頁面、容器、對象組
頁面、容器和對象組其實都可以看成是一個文件夾，共同特點就是都是裝對象的。裝在一起的對象就相當于有了集體動作。
比如隱藏某個文件夾，那么隱藏文件夾，文件夾里面的對象就都隱藏了；或者為整個對象組添加了點擊事件，那么點擊對象組中的任何一個對象都會觸發(fā)這個點擊事件。
在寫代碼的軟件中，一般被叫做父子關(guān)系網(wǎng)頁制作在代碼上加鏈接，兒子會繼承父親的屬性等財產(chǎn)。
來，我們一起笑一個
7.數(shù)據(jù)庫
數(shù)據(jù)庫的有無對于軟件最大的區(qū)別就是：你第一次打開和第二次打開是不是會有所區(qū)別。也就是說有沒有存放你上傳的數(shù)據(jù)或者記錄你操作的記錄。
比如你投票或者搶紅包，系統(tǒng)就會記錄你已經(jīng)投過票或者搶過一次了。那么你第二次搶的時候，加入開發(fā)者設(shè)置的是一個人只能搶一次，那么系統(tǒng)可能會這樣提示你：都搶過一次了還來？要不要臉？
8.預(yù)設(shè)：小模塊/翻頁動畫/動效
所謂預(yù)設(shè)，就是系統(tǒng)根據(jù)我們可能的需求，為我們事先預(yù)設(shè)好了一些東西，讓我們可以更快的拿來就用。就好像方便面，倒地熱水就可以吃了。
小模塊：其實和工具差不多，也是生產(chǎn)對象的。只不過是集成度和特定性更強。
動效：比如一張照片顯示和隱藏的時候，希望能有點依依不舍離場的或者炫酷的入場，這就和PPT的動畫差不多。
類似的還有緩動、運動等，就不展開說了。
實在不知道配啥圖了
好了，說到這，iH5的框架大概就說完了。可能，你看到這還是和沒看是一樣的。畢竟這只是一些概念性的東西。但當你真的理解了上面這些概念再去看教程的話，不是事半功倍，是事半功十倍
最后我們舉個例子
iH5制作簡易電子相冊流程
1.添加頁面，每個頁面放一張圖
點擊兩次左側(cè)工具欄中的頁面按鈕，在舞臺下添加2個頁面，當做好的H5成品被打開的時候，首先顯示的是對象樹最下面的頁面，也就是頁面1.
2.為頁面添加圖片。
選中對象樹中的頁面1，拖進來一張圖片，該圖片則歸屬于頁面1這個容器中，拖動圖片邊緣或者是左邊的屬性窗口中調(diào)整一下圖片大小（哪個對象被選中，屬性窗口就顯示哪個對象的屬性）。同樣的方法為頁面2頁拖進來一張圖片。
3.為圖片加滑動觸發(fā)事件。
選中頁面1的圖片1，點擊右側(cè)的 i 鍵，則為圖片添加了觸發(fā)事件。設(shè)置觸發(fā)條件、目標對象和目標對象的動作。
此案例中：
接受觸發(fā)的對象是頁面1的圖片
觸發(fā)動作是任意方向滑動
因為我們要跳頁，而頁面在舞臺下面，所以我們目標對象就是舞臺
目標對象動作就是跳轉(zhuǎn)到頁面2
綜合起來就是：在圖片1上任意方向滑動，舞臺就從頁面1切換到頁面2。
同樣的方法，我們?yōu)轫撁?的圖片添加事件：滑動該圖片跳轉(zhuǎn)到頁面1。就基本完成了可滑動查看的電子相冊。當然，這樣顯得有點太糊弄了。為了完美一點，我們決定做點錦上添花的動作：
4.為相冊添加背景音樂
選中舞臺，在舞臺下添加一個mp3音樂文件，一個音樂的小圖標。因為我們想在所有頁面都看到，所以這兩個對象應(yīng)該是和頁面平級的，所以直接放在舞臺下
對象樹中選中背景音樂對象，設(shè)置其屬性為：自動播放，循環(huán)播放。那么現(xiàn)在我們預(yù)覽一下的話應(yīng)該就可以聽到音樂了。
不過我們打算繼續(xù)完美一下：音樂響起的時候，音樂圖標開始旋轉(zhuǎn)；點擊音樂圖標，音樂暫停，圖標停止旋轉(zhuǎn)；再次點擊，音樂繼續(xù)播放，圖標再次旋轉(zhuǎn)。
4.1 為音樂圖標添加時間軸和軌跡
選擇舞臺，單擊左邊工具欄上的時間軸，為舞臺添加一個時間軸。然后把音樂圖標拖到時間軸上，成為其子對象。選中音樂圖標的基礎(chǔ)上，單擊右側(cè)的軌跡按鈕，為音樂圖標在時間軸上添加一條軌跡。
只有時間軸的子對象才有添加軌跡的資格；有軌跡才能做時間軸動畫。
我們想要做這樣的動畫：
讓音樂圖標在一秒鐘內(nèi)旋轉(zhuǎn)360°
然后不停的重復(fù)播放
并支持暫停
選中時間軸，設(shè)置如下屬性：
原始時長：1秒
打開自動播放和循環(huán)播放
4.2 為音樂圖標添加關(guān)鍵幀動畫
首先我們需要設(shè)置音樂圖標的旋轉(zhuǎn)軸，我們希望的是繞自己的中心旋轉(zhuǎn)，但系統(tǒng)并不是這么默認的。選中音樂圖標，設(shè)置屬性：中心
下面界面中做關(guān)鍵幀動畫：
時間線拉到0秒，點擊紅框中的小黃點，為0秒打上關(guān)鍵幀，也就是默認的音樂圖標旋轉(zhuǎn)角度（上圖中藍色方框內(nèi)）為0；時間線拉到1秒，將旋轉(zhuǎn)角度設(shè)置為360°，再按一下小黃點，為1秒打上關(guān)鍵幀。此時可以點擊預(yù)覽一下查看效果。
因為我們設(shè)置了時間軸的自動播放和循環(huán)播放，所以只要頁面加載即開始旋轉(zhuǎn)，無需觸發(fā)。
4.3 為音樂圖標添加觸發(fā)事件
選中音樂圖標，點擊右側(cè)的 i 鍵添加點擊事件。
但很明顯，我的需求是音樂播放的時候點擊為暫停，音樂為暫停的時候點擊為播放，所以但從一次點擊，系統(tǒng)根本不知道我們是要播放還是要暫停。
解決方法有很多，我們這里在音樂圖標上加一個透明按鈕，點擊透明按鈕則暫停音樂網(wǎng)頁制作在代碼上加鏈接，同時透明按鈕隱藏；再點擊的時候則點擊到音樂圖標上，音樂繼續(xù)，并顯示回透明按鈕。
透明按鈕是一個實際存在但透明顯示的對象
選中舞臺的情況下，左側(cè)工具欄點擊透明按鈕，并用鼠標在音樂圖標上方拖出一個大小剛好覆蓋的框。
現(xiàn)在我們分別為音樂圖標和透明按鈕添加點擊事件：
點擊音樂圖標：播放背景音樂，播放時間軸動畫，顯示出透明按鈕
點擊透明按鈕：暫停背景音樂，暫停時間軸動畫，隱藏透明按鈕
5.添加微信分享設(shè)置。當我們最終把鏈接發(fā)送給別人的時候，呈現(xiàn)的形式就是標題、描述和分享圖。這一點用過微信的人每天都在接觸。
舞臺下添加微信，并設(shè)置上面的3個要素。
6.發(fā)布。在舞臺正上方的位置。
預(yù)覽是在電腦上直接預(yù)覽，二維碼是微信掃碼后手機上預(yù)覽，打開的鏈接中會有預(yù)覽的提醒。而發(fā)布則意味著鏈接永久有效。我們直接點擊發(fā)布：
修改標題和介紹（我們自己管理作品的時候用的），確定。
此處就和剛剛設(shè)置的三要素一樣即可。設(shè)置好了確定，就得到了該鏈接的二維碼，掃碼就可以看到最終效果了。和其他微信鏈接相同，掃碼后打開的鏈接可以分享到朋友圈或者發(fā)送給朋友。
案例效果
或者你自己掃碼打開后，右上角分享給朋友，效果就是這樣的：
當然，我希望你能學到的，不僅僅是電子相冊；或者是掌握了iH5的學習方法，而是一種思維，軟件的思維，或者是高效學習的思維。