简介
本教程的目标是通过在 ProtoPie 中使用组件、变量以及发送与接收（send & receive）来模拟电视遥控器的工作方式。我们还会使用滚动控制器在电视内容之间切换，并为选中的缩略图添加效果。在本教程结束时，我们将完成一个看起来很专业的电视遥控器模拟。
你将学到什么
使用键盘按键（左右方向键）与变量交互
为每个组件实例设置一个用于唯一标识的特殊编号
为电影卡片和缩略图制作选中效果
将选中的内容滚动到场景中
最后，你将能够做出这样的效果！
分步说明
1. 使用键盘按键与变量交互（左右方向键）
在这一步中，我们将学习如何将变量增加 1（使用右方向键）或减少 1（使用左方向键）。这个变量表示屏幕上电影内容列表中的当前选中电影。
💡 为什么我们使用变量，而不是直接与元素本身做交互？
在这个案例中，场景里有 5 部电影。每部电影都有对应的卡片项和缩略图。当我们在电影之间切换时，每个电影实例卡片和缩略图都会有相同的行为。我们可以手动为每张卡片和每张缩略图添加交互，但那会是大量重复且枯燥的工作。
所以这里我们将使用一种更聪明的方法。我们会设置一个单独的变量来表示当前屏幕上显示的电影编号，并让每张卡片和缩略图都观察这个变量并做出对应行为。
1. 在主场景中创建一个新的变量，命名为 selected_number。然后将电影的初始值设为 1（因为电影编号范围是 1 到 5）。
2. 使用键盘增加变量值
a. 添加一个按键触发器（Press trigger），并将按键设置为键盘右方向键
b. 添加一个条件，将条件设置为 selected_number 不等于 5
c. 因为只有 5 部电影，所以我们用这个条件来确保变量不会超过 5
d. 在该条件下添加一个赋值响应（Assign response）。然后将赋值响应设置为变量 selected_number，公式为 selected_number+1
3. 使用键盘减少变量值
a. 添加一个按键触发器（Press trigger），并将按键设置为键盘左方向键
b. 添加一个条件，将条件设置为 selected_number 不等于 1
c. 在该条件下添加一个赋值响应（Assign response）。然后将赋值响应设置为变量 selected_number，公式为 selected_number-1
💡 我们使用条件来确保变量不会小于 1
4. 现在打开 selected_number 的调试开关并进入预览模式。我们应当可以使用键盘左右方向键来改变 selected_number 的值，并且该值不会超过 5 或小于 1。
2. 为每个组件实例设置一个特殊编号
1. 为每个 Movie 实例设置一个特殊编号
a. 打开 Movie 组件
b. 在 Movie 组件中创建一个新变量，命名为 movie_number
c. 为变量 movie_number 勾选 Make Overridable 选项
d. 回到主场景。然后将（movie 1 到 5）的 movie_number 值分别设置为 1、2、3、4、5
2. 为每个 Thumbnail 实例设置一个特殊编号（逻辑与 movie 实例相同）
a. 打开 Thumbnail 组件
b. 在 Thumbnail 组件中创建一个新变量，命名为 thumbnail_number
c. 为变量 thumbnail_number 勾选 Make Overridable 选项
d. 回到主场景。然后将（thumbnail 1 到 5）的值分别设置为 1、2、3、4、5
💡 为什么要为这两个组件创建新变量？
我们这样做是为了给每个电影和缩略图实例一个唯一标识。
💡 为什么要勾选 “Make Overridable” 选项？
这样做是为了能在主场景中自定义电影和缩略图的编号。
3. 为电影卡片和缩略图制作选中效果
1. 当主场景中的 selected_number 变量变化时发送消息。
a. 在主场景中添加一个检测触发器（Detect trigger），并将其设置为检测 **selected_number **变量。
b. 在 Detect trigger 下添加一个发送响应（Send response）。将消息设为 selected。然后勾选 Send Value Together 选项，并将值设为 selected_number。
💡 为什么在这里要使用发送与接收触发器？
因为我们使用了组件，在根据 selected_number 中存储的值进行操作时，无法从主场景直接修改父组件中的内容，因此我们会使用 send & receive。
2. 在 Movie 组件中接收来自主场景的消息。
a. 在 Movie 组件中创建一个新变量，命名为 selected_number
💡 为什么要创建一个同名变量？
因为在组件内部我们无法访问主场景的变量。所以我们创建一个同名变量，用它来接收来自主场景的 selected_number 值。
b. 为 Movie 组件添加一个接收触发器（Receive trigger）。将消息设为 selected。勾选 Assign to Variable 选项。然后将要赋值的变量设置为 selected_number
c. 在接收触发器（Receive trigger）下添加两个条件。将这两个条件命名为 unselected 和 selected
💡 在这里 unselected 和 selected 的作用是什么？
我们用它来高亮显示选中/未选中的电影实例。当两个变量的值匹配时，就会看到选中效果；如果不匹配，就会看到未选中效果。
d. 将 selected 条件设置为 selected_number = movie_number。** **再将 unselected 条件设置为 **selected_number ≠ movie_number **
e. 在 unselected 条件下添加未选中响应，例如将边框描边不透明度设为 0。再在 selected 条件下添加选中响应，例如将边框不透明度设为 100。你可以按需添加必要效果，自定义 selected 和 unselected 的响应。
f. 现在回到主场景。在预览模式下，如果按下左右方向键，我们应该能看到 movie 实例的选中和未选中效果。但场景开始时 movie 1 实例不会自动被选中。
g. 在主场景中添加一个开始触发器（Start trigger）。然后在开始触发器下添加与检测触发器相同的发送响应（Send response）。这样在预览场景时，movie 1 实例就会自动被选中。
3. 在 Thumbnail 组件中接收来自主场景的消息。（与 movie 组件类似）
a. 在 Thumbnail 组件中创建一个新变量，命名为 selected_number
b. 为 Thumbnail 组件添加一个接收触发器。将消息设为 selected。勾选 Assign to Variable 选项。然后将要赋值的变量设置为 selected_number
c. 在接收触发器下添加两个条件。将这两个条件命名为 unselected 和 selected
d. 将 **unselected **条件设置为 selected_number ≠ movie_number。然后将 selected 条件设置为 selected_number = movie_number
e. 在 unselected 条件下添加未选中响应，例如将 Thumbnail 组件不透明度设为 0。再在 selected 条件下添加选中响应，例如将 Thumbnail 组件不透明度设为 100。
4. 将选中的内容滚动到场景中
开始前，请确保所有 movie 实例都在一个滚动容器内。
1. 添加 selected_number ≥ 3 时的条件
a. 在主场景中，在 Detect Trigger 下添加一个新条件。然后将条件设置为 selected_number ≥ 3
💡 为什么是 ≥ 3？
因为列表中的前两个 movie 实例在屏幕上是完全可见的，我们希望从第 3 个 movie 实例开始发生滚动。
b. 在该条件下，添加一个 **Scroll **触发器。将 Scroll 触发器设置为滚动主场景中的 Scroll Container
c. 将 Scroll 触发器的滚动模式设置为 Scroll To。然后将 Scroll 触发器的值设置为公式：686+(selected_number-3)*802
💡 理解这个公式 686+(selected_number-3)*802
数值会根据你的原型而不同。
在这里，数值 **686 **指的是滚动容器中第 3 张卡片当前 X 坐标与屏幕上需要可见边距位置对应卡片 X 值之间的差值。
我们使用这个 686 的差值，来确定从第 3 张电影卡片开始需要滚动多少。
但这个值对第 4、第 5 张卡片不适用。要滚动它们，我们使用完整公式 686+(selected_number-3)*802。相比第 3 张卡片（部分在内、部分在外），第 4、第 5 张更容易计算。滚动第 4、第 5 张时，只需要卡片宽度 + 两张卡片之间的边距。这里卡片宽度（762）+ 边距（40）= 802，再乘以 (selected_number-3)。因此当选中第 4 张卡片时，滚动值就是 686+(4-3)*802。
总结一下，这里的 **686 **表示第 **3** 张卡片的滚动值，而 *(selected_number-3)802 适用于计算第 **4** 和第 **5** 张卡片的滚动值。
2. 添加 selected_number < 3 时的条件
a. 在主场景中，在 Detect Trigger 下添加一个新条件。然后将条件设置为 selected_number < 3
b. 在该条件下添加一个 Scroll 触发器。将 Scroll 触发器设置为滚动主场景中的 Scroll Container
c. 将 Scroll 触发器的滚动模式设置为 Scroll To。然后将 Scroll 触发器的值设置为 0
💡 为什么是 < 3？
因为滚动从第 3 张电影卡片开始，我们需要这个条件将滚动容器恢复到初始状态。滚动初始值为 0，所以把触发器值设为 0。
恭喜！
现在你已经学会了如何通过这些简单技巧来模拟电视遥控器。马上自己试试看吧！
我们很期待看到你疯狂的实验作品。创建你自己的原型，并在 Twitter 或 Instagram 上使用 #MadeWithProtoPie 进行分享
