.

24.画中画组件

小常发表于:2018年04月03日 15:42:05更新于:2019年07月19日 15:27:29


视频教程


一、案例效果

0015ac1a4a24342d3214d11052998c1

0015c9ae43d76c736fbca133d7218f6

《瞳孔里的世界》


二、应用场景

适合故事情节紧凑、有发展路径的内容场景,比如按照时间顺序叙述情节。

案例《非法集资警示录》

网易出品的2016年《二零一六娱乐圈画转》

网易出品的2017年《二零一七娱乐圈画传》

网易出品的2017年《二零一八娱乐圈画传》


三、素材准备

文末附件下载素材,非商用,仅供学习使用。


需要每一张图跟上一张图之间有关联。

下图是画中画案例中的图片素材设计稿,每一张正在放大的图片里都有下一张待放大的缩略图。

单张图片的尺寸是844X 1496,分辨率72dpi,每张图大小建议控制在200KB左右。

0015c9899c41bd035ce0d1b7bf048cc


为了便于大家理解,用线稿给大家演示设计画中画素材时,前后图片之间的关系。

0015c98b1cce4471b086ff62666e38a


四、组件教程

基本用法

1.点击添加组件。

image.png


2.画中画组件有自己的初始位置跟尺寸,建议调整到跟红色框(安全区)尺寸及位置一致。

image.png


3.在设计每一个画面时,尺寸尽可能要保证一致,为了保证画面在各个手机上显示的完整性,建议做成画布红色内框尺寸的2倍,即740X1136或844X1496(分辨率72)。

image.png


4.添加素材:有两种方式,二选一:

  • 一是在上图中的素材资源——上传标识那里,点击上传画中画的多张画面;

  • 二是直接鼠标左键双击画中画组件,弹出素材库窗口。

弹出素材库窗口后,选择多张图片,点击素材库窗口上方的“插入/替换”即可一次添加多张画中画素材(跟幻灯、序列帧的用法一致)。

image.png


5.添加好的素材在右侧属性面板——素材资源显示,素材从上至下先后播放出现。每层画面顺序可以调整,通过鼠标拖动每张缩略图右侧的“image.png”,来调整图片出现的前后顺序。

image.png


6.画中画一般是前一张图缩放至下一张图中,所以缩放后的位置跟大小,都可调整,但如何调整呢?

通过举例说明。下图中,图片1是显示在画中画组件中的第一个画面,在播放时,会缩放到第二个画面图片2上,所以我们在调整图片1缩放的位置时,注意:要在选中图片2的情况下,去调整图片1的位置跟尺寸。其他的图片调整方式同理。

image.png


反之,当我们调整好图片的位置后,把播放模式改成放大,图片会自动调整顺序(由原来的1-4翻转为4-1),之前调整的相应位置跟大小不会变化。

image.png


7.播放设置

播放模式:即想要画中画由第一张至最后一张,是以什么样的模式播放。逐个缩小或逐个放大。

image.png


8.触发器设置

给画中画组件的播放设置触发器,选中画中画组件,右侧属性面板设置。如图:

image.png

设置开始播放时的触发器,可以在画中画播放第一个画面时,去执行一些触发行为,如显示/隐藏元素等。

设置结束播放时的触发器,可以在画中画最后一个画面结束播放时,去执行一些触发行为,如显示/隐藏元素等。


高级用法

1.子元素触发器

在了解子元素触发器前,需要认识下“幕”的概念。我们称相邻两张图片为一幕,如下图。幕的数量即为画中画组件中图片数-1(减1)。

image.png


2.画中画组件播放时,切换到的每一幕,都可以触发一个行为,通过设置子元素触发器的方式来完成。设置方式如下:

(1)选中画中画组件,将鼠标指针放到要设置子元素触发器的画面素材,会出现“+”标识。

image.png

(2)点击“+”标识,弹出下图的设置面板。

播放速度支持输入数值0~10,默认值为2,播放速度支持小数点后两位。速度的值越大,画面切换越快。

image.png


3.如何控制播放

我们以一个按钮的长按开始、暂停为例说明。假设长按红色按钮,播放画中画;长按结束时,暂停画中画。设置步骤如下:

(1)选中红色按钮

(2)选择长按开始/结束时的触发行为

(3)选择要对画中画组件做什么——画中画播放控制

(4)选择要控制的对象——即哪个画中画组件

(5)选择画中画组件要执行的行为

(6)设置完成,点击确认

image.png

以上就是画中画组件功能设置,欢迎大家提出宝贵建议,便于我们进一步优化。

附件:画中画素材.zip • 1.97MB • 下载