编辑: Cerise银子 | 2018-07-31 |
在页面处添加,空白页将添加到当前页面后. 如果需要调整页面顺序,可以通过鼠标拖拽操作(如图): 添加空白页 Epub360支持对图片设置擦除效果, 这将提升交互性与趣味性. 在本节中,将在刚才添加的空白页上,层叠放置两张图片,通过擦除上面一张图片,让下面的图片显现出来. 操作过程请观看视频: 关键步骤在于,设置被擦除图片支持 可擦除 : 这里需要强调的是,可擦除区域将无法触发滑动手势.所以,为了避免页面无法滑动,图片尺寸需要调整得比画布区域小一 些(如图): 提示: 除了调整擦除区域尺寸外,还可以添加一个透明图片来触发滑动手势,,
这个图片需要确保放置在最上层、且 不影响擦除操作. 添加擦除效果 新创建的交互内容标题是 未命名 ,并且其封面是系统缺省设置的(如图),不直观也不美观. 如何设置标题封面呢?请观看视频了解操作方法: 设置交互内容标题/封面 到目前为止,我们已经完成了两页内容,有两种方式查看可以通过浏览器查看完整效果 在设计编辑器内查看 - 在工作台中查看 播放交互内容 通过浏览器查看 如果最终是想制作一个APP,通过IPad实时查看效果,会是非常有用的一个测试检查的方法.操作步骤见视频: 注意: 使用Epub360帐号登陆IPad APP. 通过IPad查看测试 制作多媒体交互内容,图片和视频的应用是必不可少的. 这一课主要讲解如下基本元素的使用: Slide: 用一组图片,支持滑动切换的效果 Image Sequence: 可模拟连续展示的三维效果、或用一组图片来模拟短视频/动画;
视频 在交互内容使用视频素材 第二课 使用图片组和视频 这里制作几张图片可滑动轮转切换的效果,所需图片在素材包 第二课/SLIDE 文件夹内: 视频总长3m01s,讲解了基本的操作步骤: 1. 添加SLIDE 2. 创建素材分类,并上传图片到分类 @ 11s 3. 添加指定分类图片 @ 1m19s 4. 设置SLIDE基本属性 @ 1m59s 按照本视频里操作,将完成以下效果: 横向切换 翻转切换效果 具有分页符 点击全屏显示 注意: 和画布一样尺寸的SLIDE,也会导致滑动手势无效,这一点在第一课 添加擦除效果 里也提到了. 使用SLIDE 本节我们学习使用Image Sequence,插入序列帧图片后,可以模拟三维操作展示效果. 所需图片在 第二课/序列帧 文件夹内. 素材上传在之前一节 使用SLIDE 已讲述,这里视频里就忽略了此操作. 视频总长2m42s,讲解内容包括: 1. 添加Image Sequence,并插入图片 2. 调整图片顺序 @ 1m18s 3. 调整基本属性 @ 1m52s 按照本视频里操作,将完成以下效果: 按顺序自动播放序列帧图片 播放完自动返回第一帧 支持滑动操控展示效果 使用Image Sequence 在多媒体交互内容中,视频非常常用. 在Epub360中,可使用Video对象来控制播放视频.另外,本节还将引入介绍Link对象. 本节将使用 第二课/Video 文件夹中的视频及图片文件,制作可以点击播放视频的交互操作效果. 视频总长3m58s,讲解了基本的操作步骤: 1. 添加Video对象 2. 上传视频文件、并插入Video中@7s 3. 设置Video自动播放 @ 1m06s 4. 添加背景图 @ 1m22s 5. 给视频添加播放动画 @ 2m14s 6. 添加Link,以支持点击播放 @ 2m45s Link点击触发播放 Video初始设置为隐藏 Video设置不自动播放 按照本视频里操作,将完成交互效果:在背景底图中心区域点击后,触发播放视频. 使用Video &