【写在前面】进园子有一段时间了,从来都是看别人的文章,自己的一点东西都记在本地笔记里,现在想把一些东西拿来出分享,希望能够认识一些志同道合的朋友和老师。
学习Adobe插件开发的初衷是为了给PS做插件来简化工作流程,也做了一些小工具在内部使用,但是感觉Adobe公司对插件开发虽然提供了平台和接口,维护的却不到位,论坛冷冷清清,接口也是各种小bug,处处制肘,因此比较难以做出好的东西,当时做的是一款多终端实时预览的插件【P2HViewer】,有机会再做介绍。

MagBuilder

MagBuilder是为了解决工作中遇到的实际的问题而制作的,它是为了简化工作流程而开发的。与多媒体电子杂志打交道的朋友们可能对Indesign并不陌生,它是一款专注于排版的Adobe软件,后来Adobe官方推出其交互制作插件DPS,就是在其基础上增加了交互制作,有了排版和交互信息,电子杂志就应运而生了。
但是DPS有一些缺点:
1、交互较少,很多交互还是依靠原始暴力的序列图来实现
2、收费,且不菲
3、要预览交互实际效果,需要上传到Adobe的云服务器再用DPS配套客户端查看
因此,开发了【MagBuilder】这款插件(安装包见文末),它增加了更多的交互,也实现了更多的效果,同时它支持实时预览,只需要用【MagViewer】扫描其生成的二维码就可以查看实际效果,还可以在本地导出杂志包,在网络不理想的情况下还可以通过数据线将杂志包手动导入app并查看。

MagBuilder只支持Indesign 9.1以上版本

界面及功能

在安装了插件之后,在Indesign的【窗口-》扩展功能】菜单下就可以找到MagBuilder,其主界面如下:

MagBuilder的所有交互都是基于Indesign原生按钮及原生多状态对象的,因此在没有选中多状态对象的时候,界面是锁定的,当选定某个多状态对象(非其某一状态)的时候,界面会解锁,此时如果该对象还未创建交互,则可创建新交互,如果已经创建了交互,则显示该交互的具体信息。如下图:

其中大部分属性较为易懂,【联动对象】是用来创建页面内联动效果的属性,比如多个PPT联动或者按钮和PPT联动等等,点击【联动对象】的时候会显示当前页面内其他已经创建的交互列表,选择之后则这些联动之间就产生联动效果。特别地,按钮和超链接的创建依旧是Indesign原生按钮的创建方式,包括其交互(如指向的多状态对象或者跳转页面等等)都保持原样。

创建交互完成之后,切换到第二个tab,点击【预览】,在短暂的生成杂志过程之后,就会在第二个tab生成一个二维码,用【MagBuilder】扫描该二维码,如果手机和电脑是完全在同一个网络环境中的,则可在手机端直接看到整本杂志的实际效果

第三个tab主要是导入导出功能,导入是指在指定位置导入已经制作好的html页面,在某个Indesign page上创建一个矩形,选中该矩形,然后选择导入一个页面,则在最后的杂志包中,该html文件会代替矩形所在的页面出现在产出包中。
导出功能,则是导出杂志包到指定位置,这个杂志包主要是用来通过数据线将其导入到【MagViewer】中预览效果,如果勾选高清包,则会同时导出两倍尺寸的高清版本。

在界面的底部有一个刷新按钮,当在某些情况下面板可能会持续锁定或者丢失交互信息,此时可点击该按钮以刷新面板,这是由于Adobe插件接口本身的bug导致的。

MagViewer

有了MagBuilder可以做出富交互的杂志,但是还缺乏一个可以直观实时预览的工具以在上线杂志之前进行预览和排错,因此我又开发了一个配合使用的ios app--MagViewer,它能够使设计师在使用MagBuilder制作精彩多媒体杂志的同时,快捷及时地预览杂志的交互效果,它提供多种方式预览杂志,包括直接扫描MagBuilder生成的二维码预览每一页杂志、扫描MagBuilder二维码将杂志包下载进APP进行预览以及通过iTunes文件分享功能将MagBuilder导出的.mag格式文件导入APP阅读:将移动设备与MAC连接,在itunes中选择移动设备的【应用程序->文件共享->Magviewer】,将.mag文件拖拽进【"MagViewer的文稿"】栏目下,然后在移动设备上点击Magviewer的【同步预览】,即可将该杂志包同步到手机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

交流

如果您对这一类技术也比较感兴趣,欢迎评论讨论,也欢迎联系我。

Indesign多媒体富交互插件【MagBuilder】与iOS app 【MagViewer】介绍的更多相关文章

  1. 小程序快速部署富文本插件wxParser

    为了解决html2wxml在ios下字体过大问题,又发现一个比较好用的富文本插件:wxParser. 目前 wxParser 支持对一般的富文本内容包括标题.字体大小.对齐和列表等进行解析.同时也支持 ...

  2. 10 个基于 jQuery 的 Web 交互插件推荐

    英文原文:10 jQuery for Web Interaction Plugins “用户交互”在现代的 Web 设计中占据了很大比例,这是互联网产品不可或缺的关键,对 Web 设计师也提出了更高的 ...

  3. Xamarin.iOS - 利用Settings插件与EAIntroView制作App的欢迎界面

    Xamarin.iOS - 利用Settings插件与EAIntroView制作App的欢迎界面 关于欢迎界面 很多App第一次启动都会有一个欢迎界面,欢迎界面往往决定这用户对App的第一映像,所以欢 ...

  4. 【富文本、JS】将接口传来的全部纯URL替换为富文本插件能识别到的img标签

    replaceURLWithImage (text) { var a = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0 ...

  5. GitHub上排名前100的iOS开源库介绍(来自github)

    主要对当前 GitHub 排名前 100 的项目做一个简单的简介,方便初学者快速了解到当前 Objective-C 在 GitHub 的情况. 若有任何疑问可通过微博@李锦发联系我 项目名称 项目信息 ...

  6. 用Model-View-ViewModel构建iOS App(转)

    转载自 Model-View-ViewModel for iOS [译] 如果你已经开发一段时间的iOS应用,你一定听说过Model-View-Controller, 即MVC.MVC是构建iOS a ...

  7. 用Model-View-ViewModel构建iOS App

    如果你已经开发一段时间的iOS应用,你一定听说过Model-View-Controller,即MVC.MVC是构建iOS App的标准模式.然而,最近我已经越来越厌倦MVC的一些缺点.在本文,我将重温 ...

  8. 最新Xcode7.x环境下上架iOS App到AppStore 完整流程

    最新Xcode7.x环境下上架iOS App到AppStore 流程  part 1 前言部分 之前App要上架遇到些问题到网上搜上架教程发现都是一些老的版本的教程 ,目前iTunesConnect ...

  9. ios app 实现热更新(无需发新版本实现app添加新功能)

    目前能够实现热更新的方法,总结起来有以下三种 1. 使用FaceBook 的开源框架 reactive native,使用js写原生的iOS应用 ios app可以在运行时从服务器拉取最新的js文件到 ...

随机推荐

  1. default parameter value for ‘color’ must be a compile-time constant

    定义了一个函数,函数有一个参数是Color类型的可选参数,想要设置其默认值为Color.Black http://stackoverflow.com/questions/2804395/c-sharp ...

  2. 斜率优化dp(POJ1180 Uva1451)

    学这个斜率优化dp却找到这个真心容易出错的题目,其中要从n倒过来到1的确实没有想到,另外斜率优化dp的算法一开始看网上各种大牛博客自以为懂了,最后才发现是错了. 不过觉得看那些博客中都是用文字来描述, ...

  3. 函数buf_ptr_get_fsp_addr

    #define FIL_PAGE_ARCH_LOG_NO_OR_SPACE_ID  34 /****************************************************** ...

  4. C语言中的位拷贝与值拷贝浅谈(转载)

    注:C语言实现的PHP变量的赋值过程中,就涉及到了 深拷贝和浅拷贝 位拷贝拷贝的是地址(也叫浅拷贝),而值拷贝则拷贝的是内容(深拷贝).深拷贝和浅拷贝可以简单理解为:如果一个类拥有资源,当这个类的对象 ...

  5. C#中判断一个网址是否可以打开

    public static void GetPage(String url) { try { // Creates an HttpWebRequest for the specified URL. H ...

  6. Dubbo实例

    1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需 ...

  7. 【 D3.js 高级系列 — 3.0 】 堆栈图

    堆栈图布局(Stack Layout)能够计算二维数组每一数据层的基线,以方便将各数据层叠加起来.本文讲解堆栈图的制作方法. 先说说什么是堆栈图. 例如,有如下情况: 某公司,销售三种产品:个人电脑. ...

  8. 【转】@Override must override a superclass method 问题解决

    原文网址:http://www.blogjava.net/anchor110/articles/339352.html 如果在使用Eclipse开发Java项目时,在使用 @Override 出现以下 ...

  9. 【转】Android开发调试工具ADB的使用

    原文网址:http://www.cnblogs.com/meil/archive/2012/05/24/2516055.html ADB(Android Debug Bridge)是Android S ...

  10. Spring入门之HelloSpring

    Spring描述: -轻量级:Spring是非侵入式的-基于Spring开发的应用中的对象可以不依赖于Spring的API -依赖注入(DI---dependency injection,IOC) - ...