3.1 目标区交互
[本教程由 陈德锋 制作，其中参考了auth的拼图程序。
如使用请联系作者。谢谢!]
目标区交互相对于其它交互来说，更能体现Authorware制作程序时灵活的交互性。这种交互应用非常广泛，在设计问题时我们可以允许用户拖动对象到合适的位置，位置正确，对象将停留此处不动，拖动错误则返回原处，若加上时间限制会使程序更有趣味性。
本部分结合两个实例介绍这类交互的使用方法，其中第一个较为简单，主要用于介绍目标区交互的基本属性；第二个较复杂，是制作一个拼图程序，涉及到许多方面的内容。
实例：目标区交互_简单示例.a7p
目的：目标区交互的使用
制作过程：
步骤1：构建流程(图9-4-1)
图 9-4-1 程序流程
步骤2：设置“初始化”计算图标中的内容：ResizeWindow(380,280)
步骤3：设置显示图标“图片”中的内容
双击打开后，在其中导入一幅图片，该图片在“素材”文件中，名称为011.jpg.
设置该显示图标的属性对话框中的【活动】项为“任意位置”，以保证程序打包后图片可以拖动，这一步非常重要。
步骤4：设置“正确”交互项
设置拖动对象：双击该响应类型的小图标(即交互图标右边的小箭头)，再根据提示选择“图片”显示图标中的图片作为移动对象(当然运行程序也可进行设置)，此时右边的【目标对象】文本框中将显示该显示图标的名称。如图9-4-2所示。
图 9-4-2 【目标区】属性对话框
下面解释各个选项的含义：
【大小】：表示目标区的宽度和高度，可通过拖动【交互】图标中显示的矩形框修改大小，也可直接输入数字，另外也支持变量或表达式。
【位置】：表示目标区所放的位置，可在【交互】图标中拖动矩形虚线框的边缘来改变位置和大小，也可直接输入数字，支持变量或表达式。
设置好以上数据后，再按照“拖动对象到目标位置”的提示拖动图片至这个矩形框中即可。
【放下】：共三个参数，用于设置拖动对象到目标区后的最终放置位置。
在目标点放下：表示执行该交互响应后，图片停留在松开鼠标时的位置。多用于中性操作。
返回：该交互项被响应后，如果用户将图片拖动到了某个位置后松开鼠标，则图片自动回到被拖动前的位置，多用于表示错误的操作。
在中心定位：该交互项被响应后，如果用户将图片拖动到了某个位置后松开鼠标，则图片自动移动到目标区域的中心位置，多用于表示正确的操作。
【允许任何对象】：适用于目标区域交互项响应若干个对象的拖动操作，也就是说该目标交互的目标区可以适用于任何对象，既可用于正确的操作，也可用于错误的操作。
图 9-4-3 拖动图片至目标区
点击【响应】选项卡，在【状态】选项中选择“正确响应”，其它默认。
再打开响应分支中的计算图标，输入以下内容：
SystemMessageBox(WindowHandle, "正确", "提示", 48)
步骤5：设置“错误”交互项
该项设置过程同上，目标对象仍为图片，需要改动的地方是有：
单击【目标区】选项卡，在【大小】选项的X、Y文本框中分别输入WindowWidth、WindowHeight，，【位置】选项的X、Y中输入0、0，这可将目标区设置为整个演示窗口。在【放下】选项中选择“返回”项。如图9-4-4所示。
图 9-4-4 错误交互中的【目标区】选项卡
单击【响应】选项卡，在【状态】选项中选择“错误响应”。
再打开响应分支中的计算图标，输入以下内容：
SystemMessageBox(WindowHandle, "错误", "提示", 48)
需要注意的是，上面两个交互中，正确交互在左，错误交互在右。由于程序执行时，左边的交互优先响应，故虽然错误交互的目标区包括了正确的交互区，但两者并不冲突，因为如有可能的话，总是先响应第一个交互项。
步骤6：运行观察效果。当拖到程序到目标区松开鼠标后，图片会自动移动到目标区的中心，拖到其它任意位置松开鼠标，图片会自动返回到先前的位置，并根据具体情况弹出提示框。为了便于观察可在目标区画一个矩形作为参考。
下面再看一个较为复杂的拼图游戏。
实例：目标区交互_拼图游戏.a7p
目的：目标区交互的使用；简单语言的使用
制作过程：
步骤1：本程序较为复杂，为叙述和制作方便，先构建初步流程如图9-4-5所示。
图 9-4-5 公用流程模块
步骤2：设置“初始化”计算图标中的内容如下：
ResizeWindow(480,380)
--从第一组图片开始
picgroup:=1
步骤3：设置计算图标“图片位置”中的内容
--文件位置
piclocation:=FileLocation^"拼图图片\\"^picgroup^"_"
--各个小图片的完整路径
piclist:=[]
repeat with i:=1 to 9
piclist[i]:=piclocation^i^".bmp"
end repeat
--如果第一张图片不存在，则重新启动，注意拼图图片文件夹必须有第一组图片，否则会限入死循环
if FileType(piclist[1])=0 then Restart()
步骤4：显示图标“画框和说明”的设置
先双击打开该图标，选择文字工具，在上部输入以下内容(封面内容，可自己设计)：
Welcome to you !
再设置附加计算图标中的内容如下：
--图片大小,这可以从显示图标(1-10中的任何一个)中图片的属性获取
sizex:=77
sizey:=73
--图片(显示图标)距演示窗口左、上的距离
--目标区最左、上边距演示口的距离
piclargetop:=133
piclargeleft:=1
locationx:=piclargeleft+3*sizex+10
locationy:=piclargetop
--根据图片位置设置目标区位置
location_x_y:=[]
repeat with i:=1 to 9
if i<4 then
location_x_y[i]:=[locationx+(i-1)*sizex,locationy]
else if i<7 then
location_x_y[i]:=[locationx+(i-4)*sizex,locationy+sizey]
else
location_x_y[i]:=[locationx+(i-7)*sizex,locationy+2*sizey]
end if
end repeat
--图片临时位置，用于起始时显示全图用
pic_x_y_temp:=[]
pic_x_y:=[]
repeat with i:=1 to 9
if i<4 then
pic_x_y_temp[i]:=[piclargeleft+(i-0.5)*sizex,piclargetop+0.5*sizey]
else if i<7 then
pic_x_y_temp[i]:=[piclargeleft+(i-3.5)*sizex,piclargetop+1.5*sizey]
else
pic_x_y_temp[i]:=[piclargeleft+(i-6.5)*sizex,piclargetop+2.5*sizey]
end if
end repeat
pic_x_y:=pic_x_y_temp
--设置图层，以保证所画的线在上面显示
SetLayer(3)
--画表格框
repeat with n:=1 to 4
--左表格框
SetFrame(1,RGB(0,255,0))
Line(1,piclargeleft,piclargetop+(4-n)*sizey,piclargeleft+3*sizex,piclargetop+(4-n)*sizey)
Line(1,piclargeleft+(4-n)*sizex,piclargetop,piclargeleft+(4-n)*sizex,piclargetop+3*sizey)
--右表格框
SetFrame(1,RGB(255,0,0))
Line(1,locationx,locationy+(4-n)*sizey,locationx+3*sizex,locationy+(4-n)*sizey)
Line(1,locationx+(4-n)*sizex,locationy,locationx+(4-n)*sizex,locationy+3*sizey)
end repeat
--禁止画线移动
Movable:=0
--依次显示显示图标1-9的图片
repeat with i:=1 to 9
Eval("displayicon(iconid@\""^i^"\")")
end repeat
以上为程序的核心部分，其中涉及一些较复杂的算法，可根据注释仔细分析，在此再给出一些相关的解释：
sizex、sizey、piclargetop、piclargeleft的数值是从显示图标(如“1”)中图片的属性获取，这样做的好处是更改图片大小和位置后，只需根据更改后数据改动此处数字即可。
Locationx、locationy的数值用于确定目标区的上边界和最左边目标区的左边界。
程序中实际共有9张小图片用于拖动(上面流程只给出了一种)，这九张小图片的位置和九个目标区的位置如图9-4-6所示：
图 9-4-6 图片和目标区位置及部分变量
特别注意：图片的位置和目标区的位置算法不同。图片的位置是图片的中心距演示窗口左边和上边沿的距离，而目标区的位置则是目标区的左上角距演示窗口左边和上边沿的距离。
步骤5：等待图标的设置
打开其属性对话框，设置如图9-4-7所示
图 9-4-7 等待图标属性设置
【事件】：两个复选框都选上，以便于用户自主确定是否等待相应的时间
【时限】：确定等待的时间。该文本框中Strip("s",IconTitle)的作用是将该图标名称的字母”s”去掉，筛选出数字。这样做的好处是可以通过图标的名称来更改等待的时间，字母”s”(小写)是为了防止该等待图标与其它图标重名。
【选项】：【显示倒计时】选项用于确定是否显示一个小时钟；【显示按钮】选项确定是否显示一个提示按钮，该按钮名默认为“继续”。
步骤6：计算图标“重新设置图片位置”中的内容如下：
--重新设置图片的位置，用于将原图片打乱顺序
pic_x_y:=[]
repeat with n:=1 to 9
rand:=Random(1,ListCount(pic_x_y_temp),1)
pic_x_y[n]:=pic_x_y_temp[rand]
DeleteAtIndex(pic_x_y_temp,rand)
end repeat
步骤7：设置显示图标“1”的内容。
首先双击该显示图标，导入一幅图片(任意一张皆可)，使用链接方式。再双击图片，打开图片属性对话框，更改相关属性(图9-4-8、图9-4-9)
图 9-4-8 图片【图象】选项卡属性
在【文件】文本框中的内容为：=piclist[IconTitle]。此处也使用了系统变量IconTitle，即通过该显示图标的名称来获取图片的路径，为增加更多的显示图标提供了一个模板。
图 9-4-9 图片【版面布局】选项卡属性
注意上面对话框中的【显示】选项中一定要选择“比例”选项，而下面的【位置】和【大小】选项中的数字即为前面设置的变量sizex、sizey、piclargetop、piclargeleft值。
其次选中该显示图标，设置图标的属性(图9-4-10)
图 9-4-10 显示图标“1”的属性
在【位置】选项中选择“在屏幕上”，接着在下面的【初始】的X、Y文本框中分别输入：pic_x_y[IconTitle,1]、pic_x_y[IconTitle,2]，这用于确定程序运行时图片的显示位置；在【活动】选项中选择“任意位置”；其它默认。
步骤8：设置“11”目标交互项
首先打开【目标区】选项卡的属性对话框(图9-4-11)，设置如下：
图 9-4-11 【目标区】选项卡
【大小】中的X、Y文本框里分别输入：sizex、sizey，这用于保证目标区和图片大小一致。
【位置】中的X、Y文本框里分别输入：
location_x_y[IconTitle-10,1]、location_x_y[IconTitle-10,2]
由于在显示图标“1”中使用了IconTitle变量，故此处目标交互项的名称不能再用“1”，用了“11”，而IconTitle-10仍然可使该属性设置具有通用性。
【放下】中选择“在中心定位”选项。
再打开【响应】选项卡，在【状态】选项中选择“正确响应”。
该交互响应计算图标中无任何内容(输入“--”即可)
步骤9：设置条件交互项。
打开其属性对话框(图9-4-12)，选择【条件】选项卡，在【条件】中输入：AllCorrectMatched；在【自动】中选择“为真”选项。其余默认。
图 9-4-12 条件交互项的属性设置
步骤10：“退出”按钮交互项的设置。
在其响应计算图标中输入：Quit()
步骤11：添加其它显示图标和目标交互项等
选中显示图标“1”，单击右键选择“复制”，然后在该图标的后面复制8次，再依次改名为2、3、4、5、6、7、8、9
选中目标交互项“11”，单击右键选择“复制”，然后在其右面复制10次，再依次改名为12、13、14、15、16、17、18、19、wrong。
最后再在这些交互项的右面添加一个时间限制交互项，名字为30(可任意更改数字，但不要使用1-19中的值。
完整流程图如图9-4-13所示。
图 9-4-13 完整流程图
步骤12：更改“wrong”目标交互项
打开其属性对话框(图9-4-14)，选择【目标区】选项卡，在【大小】选项的X、Y框中分别输入WindowWidth、WindowHeight；【位置】选项的X、Y框中分别输入0、0。因为这是错误交互，故区域为整个窗口；【放下】选项中选择“返回”；再选中【允许任何对象】复选框。
再选择【响应】选项卡，在【状态】选项中选择“错误响应”。
图 9-4-14 “wrong”目标交互项的设置
特别需要注意的是“wrong”目标交互一定在11-19目标交互的右面，而在条件交互“AllCorrectMatched”的左面
步骤13：设置时间限制交互。
打开其属性框，选中【时间限制】选项卡，在【时限】文本框中输入：IconTitle；【中断】中选择“继续计时”；【选项】中选择“显示剩余时间”复选框；其余默认。
各自属性的意义见时间交互中的说明。
图 9-4-16 时间交互项的设置
在其响应计算图标中输入：quit()
步骤14：设置交互目标。
现在为各个目标交互项设置拖动的对象，运行程序后立刻暂停(按下ctrl+p组合键即可)，依次将11-19目标交互的移动对象设置为显示图标1-9中的图片并将之拖动到相应位置。
在“wrong”目标交互中设置对象为所有图片(1-9)。
步骤15：OK，运行程序效果如图9-4-16所示。
图 9-4-16 程序运行效果
另外更改图片大小和位置时，可按以下方法：先更改显示图标“1”中的图片位置和大小，记下其数值分别赋于sizex、sizey、piclargetop、piclargeleft；再复制其中的图片分别至显示图标2至9中即可，其它地方不用更改。
思考：更改图片位置和大小时为何不将更改后的显示图标“1”复制8个再依次改名呢？
