【寫在前面】進(jìn)園子有一段時(shí)間了，從來都是看別人的文章，自己的一點(diǎn)東西都記在本地筆記里，現(xiàn)在想把一些東西拿來出分享，希望能夠認(rèn)識(shí)一些志同道合的朋友和老師。
學(xué)習(xí)Adobe插件開發(fā)的初衷是為了給PS做插件來簡(jiǎn)化工作流程，也做了一些小工具在內(nèi)部使用，但是感覺Adobe公司對(duì)插件開發(fā)雖然提供了平臺(tái)和接口，維護(hù)的卻不到位，論壇冷冷清清，接口也是各種小bug，處處制肘，因此比較難以做出好的東西，當(dāng)時(shí)做的是一款多終端實(shí)時(shí)預(yù)覽的插件【P2HViewer】，有機(jī)會(huì)再做介紹。

MagBuilder

MagBuilder是為了解決工作中遇到的實(shí)際的問題而制作的，它是為了簡(jiǎn)化工作流程而開發(fā)的。與多媒體電子雜志打交道的朋友們可能對(duì)Indesign并不陌生，它是一款專注于排版的Adobe軟件，后來Adobe官方推出其交互制作插件DPS，就是在其基礎(chǔ)上增加了交互制作，有了排版和交互信息，電子雜志就應(yīng)運(yùn)而生了。
但是DPS有一些缺點(diǎn)：
1、交互較少，很多交互還是依靠原始暴力的序列圖來實(shí)現(xiàn)
2、收費(fèi)，且不菲
3、要預(yù)覽交互實(shí)際效果，需要上傳到Adobe的云服務(wù)器再用DPS配套客戶端查看
因此，開發(fā)了【MagBuilder】這款插件(安裝包見文末)，它增加了更多的交互，也實(shí)現(xiàn)了更多的效果，同時(shí)它支持實(shí)時(shí)預(yù)覽，只需要用【MagViewer】掃描其生成的二維碼就可以查看實(shí)際效果，還可以在本地導(dǎo)出雜志包，在網(wǎng)絡(luò)不理想的情況下還可以通過數(shù)據(jù)線將雜志包手動(dòng)導(dǎo)入app并查看。

MagBuilder只支持Indesign 9.1以上版本

界面及功能

在安裝了插件之后，在Indesign的【窗口-》擴(kuò)展功能】菜單下就可以找到MagBuilder，其主界面如下：

MagBuilder的所有交互都是基于Indesign原生按鈕及原生多狀態(tài)對(duì)象的，因此在沒有選中多狀態(tài)對(duì)象的時(shí)候，界面是鎖定的，當(dāng)選定某個(gè)多狀態(tài)對(duì)象(非其某一狀態(tài))的時(shí)候，界面會(huì)解鎖，此時(shí)如果該對(duì)象還未創(chuàng)建交互，則可創(chuàng)建新交互，如果已經(jīng)創(chuàng)建了交互，則顯示該交互的具體信息。如下圖：

其中大部分屬性較為易懂，【聯(lián)動(dòng)對(duì)象】是用來創(chuàng)建頁(yè)面內(nèi)聯(lián)動(dòng)效果的屬性，比如多個(gè)PPT聯(lián)動(dòng)或者按鈕和PPT聯(lián)動(dòng)等等，點(diǎn)擊【聯(lián)動(dòng)對(duì)象】的時(shí)候會(huì)顯示當(dāng)前頁(yè)面內(nèi)其他已經(jīng)創(chuàng)建的交互列表，選擇之后則這些聯(lián)動(dòng)之間就產(chǎn)生聯(lián)動(dòng)效果。特別地，按鈕和超鏈接的創(chuàng)建依舊是Indesign原生按鈕的創(chuàng)建方式，包括其交互(如指向的多狀態(tài)對(duì)象或者跳轉(zhuǎn)頁(yè)面等等)都保持原樣。

創(chuàng)建交互完成之后，切換到第二個(gè)tab，點(diǎn)擊【預(yù)覽】，在短暫的生成雜志過程之后，就會(huì)在第二個(gè)tab生成一個(gè)二維碼，用【MagBuilder】掃描該二維碼，如果手機(jī)和電腦是完全在同一個(gè)網(wǎng)絡(luò)環(huán)境中的，則可在手機(jī)端直接看到整本雜志的實(shí)際效果

第三個(gè)tab主要是導(dǎo)入導(dǎo)出功能，導(dǎo)入是指在指定位置導(dǎo)入已經(jīng)制作好的html頁(yè)面，在某個(gè)Indesign page上創(chuàng)建一個(gè)矩形，選中該矩形，然后選擇導(dǎo)入一個(gè)頁(yè)面，則在最后的雜志包中，該html文件會(huì)代替矩形所在的頁(yè)面出現(xiàn)在產(chǎn)出包中。
導(dǎo)出功能，則是導(dǎo)出雜志包到指定位置，這個(gè)雜志包主要是用來通過數(shù)據(jù)線將其導(dǎo)入到【MagViewer】中預(yù)覽效果，如果勾選高清包，則會(huì)同時(shí)導(dǎo)出兩倍尺寸的高清版本。

在界面的底部有一個(gè)刷新按鈕，當(dāng)在某些情況下面板可能會(huì)持續(xù)鎖定或者丟失交互信息，此時(shí)可點(diǎn)擊該按鈕以刷新面板，這是由于Adobe插件接口本身的bug導(dǎo)致的。

MagViewer

有了MagBuilder可以做出富交互的雜志，但是還缺乏一個(gè)可以直觀實(shí)時(shí)預(yù)覽的工具以在上線雜志之前進(jìn)行預(yù)覽和排錯(cuò)，因此我又開發(fā)了一個(gè)配合使用的ios app--MagViewer，它能夠使設(shè)計(jì)師在使用MagBuilder制作精彩多媒體雜志的同時(shí)，快捷及時(shí)地預(yù)覽雜志的交互效果，它提供多種方式預(yù)覽雜志，包括直接掃描MagBuilder生成的二維碼預(yù)覽每一頁(yè)雜志、掃描MagBuilder二維碼將雜志包下載進(jìn)APP進(jìn)行預(yù)覽以及通過iTunes文件分享功能將MagBuilder導(dǎo)出的.mag格式文件導(dǎo)入APP閱讀：將移動(dòng)設(shè)備與MAC連接，在itunes中選擇移動(dòng)設(shè)備的【應(yīng)用程序->文件共享->Magviewer】，將.mag文件拖拽進(jìn)【"MagViewer的文稿"】欄目下，然后在移動(dòng)設(shè)備上點(diǎn)擊Magviewer的【同步預(yù)覽】，即可將該雜志包同步到手機(jī)app中瀏覽。
Magviewer的具體情況和使用說明參見Appstore Magviewer的截圖和說明。

下載地址

MagViewer ：https://itunes.apple.com/cn/app/magviewer/id950166117?mt=8
MagBuilder：http://files.cnblogs.com/files/dson/MagBuilder.zxp.zip

交流

如果您對(duì)這一類技術(shù)也比較感興趣，歡迎評(píng)論討論，也歡迎聯(lián)系我。

轉(zhuǎn)載于:https://www.cnblogs.com/dson/p/4323028.html

總結(jié)

以上是生活随笔為你收集整理的Indesign多媒体富交互插件【MagBuilder】与iOS app 【MagViewer】介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。