论文部分内容阅读
摘要：文章主要介绍了Photoshop CS的切片工具和存储为Web格式…命令的使用，及Flash 8的复制到网格和hitTest()函数等命令的使用，对两者的结合制作出拼图小游戏的过程进行了详细的说明。
关键词：切片工具；hitTest()；复制到网格
中图分类号：TP317文献标识码：A文章编号：1009-3044(2008)21-30540-02
Produce a Puzzle Game with Flash 8 and Photoshop CS
NIU Xiao-ling,FAN Ji
(Pingdingshan Industrial College of Technology,Pingdingshan 467001,China)
Abstract:At the base of analyzing and researching multimedia database system’s system structure, key technology, function and characteristic, a Multimedia database system and it’s coal-mining corporation’smultimedia management system is designed which is used in auto-control system. At the base of analyzing many method of design in course of design tradition embedded multimediadatabase system, the better project is bring up about setting up model, design of physics structure and query optimization etc.
Key words:multimedia database;object oriented;content based retrieval
拼图游戏是一种古老的游戏，相信大家都玩过拼图游戏，今天我就将拼图游戏的一种制作方法教给大家。完成效果如图1。
游戏规则：当在某个小图片上按下鼠标左键不松开鼠标进行拖动时，该小图片跟随鼠标移动，当松开鼠标时，如果是小图片的最后正确位置，该小图片就停留在正确位置，否则回到原来的位置。
制作步骤：
1 使用Photoshop进行图片处理
1)打开Adobe Photoshop CS；
2)使用“文件”菜单的“打开…”命令打开准备好的图片“未标题-1.jpg”，如图2。
3)使用“视图”菜单的“显示”的“网格”命令，显示出网格。
4)使用切片工具将图像等分为36份。（每份3×3小格）
5)使用“文件”菜单的“存储为Web所用格式…”命令，单击“存储”按钮后，选择保存位置（本例选择“桌面”）和名称（本例为“未标题-1.html”）后，保存即可。
6)关闭Adobe Photoshop CS。
6)将舞台中的36个影片剪辑打乱次序后进行排列。 方法：先将每行的左面一个和右边一个放好位置，再选中这一行的几个，使用对齐面板中的“垂直中齐”和“水平平均间隔”进行排列。之后再对每列的几个影片剪辑，使用对齐面板中的“水平中齐”和“垂直平均间隔”进行排列，如图3。
将图层1命名为“图形”，并锁定。
7)在库面板中，右击tu1，选择“直接复制”，在弹出的“直接复制元件”对话框中，名称为bt，类型为按钮，确定。这时就有一个按钮元件bt。
8)双击bt按钮图标，进行按钮的编辑：将弹起帧的内容全选后，使用“修改”菜单的“分离”命令（或按Ctrl B）把图像打散，使用墨水瓶工具给它添加黑色边框。在点击帧插入关键帧。在弹起帧将填充删除，只留边框。
9)返回场景1。新建一图层，将该图层拖到“图形”层的下面。
10)将按钮bt拖入舞台中，选择该按钮，执行“插入”菜单的“时间轴特效”的“帮助”下的“复制到网格”命令，在网格尺寸的行数和列数中填入6，在网格间距的行数和列数中都填入0像素数。单击确定按钮。
11)出现一个“复制到网格”的影片剪辑，将其分离（Ctrl B),在属性面板，将分离后的元件的实例类型（默认的是图形）都转换为“按钮”。并按先行后列的顺序起名bt1，……，bt36。位置如下图。将该层命名为“按钮”并锁定。
12)新建一图层，命名为“参考图”，将该图层拖到“按钮” 层的下面。
13)将“未标题-1.jpg”文件导入库， 将之拖入“参考图”层，转换为元件，位置和按钮层的按钮相同，在属性面板，设置其颜色：Alpha，15%。
14)使用文本工具，在图片的上方空白处输入文字“拼图游戏”：隶书、60、粗体、颜色#996600；在滤镜面板，添加“投影”效果，阴影颜色#999966。锁定该层。
15)将“图形”层解锁，选中影片剪辑tu1，打开动作面板，输入代码：
onClipEvent (mouseDown) { //当按下鼠标左键时
if(this.hitTest(_root._xmouse,_root._ymouse,false))
//判断鼠标指针在该对象上 { this.startDrag(true); //进行鼠标跟踪
x=this._x; //用x存储原来的水平坐标
y=this._y;} //用y存储原来的垂直坐标
onClipEvent (mouseUp) { //当按下鼠标左键时
if (this.hitTest (_root.bt1)) //判断该对象和按钮bt1有重叠，停留在正确位置
{ this._x=_root.bt1._x; //使该对象的水平坐标和按钮bt1的水平坐标相同
this._y=_root.bt1._y; } //使该对象的垂直坐标和按钮bt1的垂直坐标相同
else //否则返回原来位置
{ this._x=x;
this._y=y;}stopDrag(); } //_root.bt1可用this._parent.bt1代替。
16)将以上代码全选后复制，返回场景，再选择tu2，打开 动作面板，进行粘贴，只用将bt1全部改为bt2即可。
方法：可在动作面板中单击查找和替换按钮，在弹出的“查找和 替换”对话框中，查找内容：1，替换为：2，单击“全部替换”按钮。
17)类似进行上步操作，为其它的影片剪辑都添加动作代码。
18)使用“控制”菜单的“测试影片”（或按Ctrl Enter），观看效果。
19)使用“文件”菜单的“导出”的“导出影片”（或按Ctrl Shift Alt s），输入文件名“拼图游戏”，保存。
20)可使用“文件”菜单的“发布设置..”命令进行发布设置后发布。也可使用“文件”菜单的“发布”命令（Shift F12)直接发布。
说明：
大家也可进行类似的制作，如改变文档的尺寸、改变图像的大小、改变小图片的数目、改变布局、改变背景颜色等等，制作出具有自己特色的拼图游戏。
3 要掌握的知识点
1)掌握Photoshop CS的图像大小命令、网格、切片工具、存储为web格式..命令的使用。
2)掌握Flash 8的导入命令、库面板、影片剪辑、按钮、对齐面板、文本、滤镜、动作面板、测试影片、导出影片等的使用。
3)掌握复制到网格命令的使用。
4)掌握影片剪辑的onClipEvent ()处理函数。
5)掌握startDrag()、stopDrag()和hitTest()命令的使用。
6)_x，_y属性的使用，及if…else…语句的使用。
参考文献：
[1] 倪洋,苏峻,闻利群.Flash 中文版实用教程[M].人民邮电出版社,2006:251-254.
[2] 程风娟,徐帆,尹辉.中文版Flash 8实用教程[M].清华大学出版社,2006:210-214.
关键词：切片工具；hitTest()；复制到网格
中图分类号：TP317文献标识码：A文章编号：1009-3044(2008)21-30540-02
Produce a Puzzle Game with Flash 8 and Photoshop CS
NIU Xiao-ling,FAN Ji
(Pingdingshan Industrial College of Technology,Pingdingshan 467001,China)
Abstract:At the base of analyzing and researching multimedia database system’s system structure, key technology, function and characteristic, a Multimedia database system and it’s coal-mining corporation’smultimedia management system is designed which is used in auto-control system. At the base of analyzing many method of design in course of design tradition embedded multimediadatabase system, the better project is bring up about setting up model, design of physics structure and query optimization etc.
Key words:multimedia database;object oriented;content based retrieval
拼图游戏是一种古老的游戏，相信大家都玩过拼图游戏，今天我就将拼图游戏的一种制作方法教给大家。完成效果如图1。
游戏规则：当在某个小图片上按下鼠标左键不松开鼠标进行拖动时，该小图片跟随鼠标移动，当松开鼠标时，如果是小图片的最后正确位置，该小图片就停留在正确位置，否则回到原来的位置。
制作步骤：
1 使用Photoshop进行图片处理
1)打开Adobe Photoshop CS；
2)使用“文件”菜单的“打开…”命令打开准备好的图片“未标题-1.jpg”，如图2。
3)使用“视图”菜单的“显示”的“网格”命令，显示出网格。
4)使用切片工具将图像等分为36份。（每份3×3小格）
5)使用“文件”菜单的“存储为Web所用格式…”命令，单击“存储”按钮后，选择保存位置（本例选择“桌面”）和名称（本例为“未标题-1.html”）后，保存即可。
6)关闭Adobe Photoshop CS。
6)将舞台中的36个影片剪辑打乱次序后进行排列。 方法：先将每行的左面一个和右边一个放好位置，再选中这一行的几个，使用对齐面板中的“垂直中齐”和“水平平均间隔”进行排列。之后再对每列的几个影片剪辑，使用对齐面板中的“水平中齐”和“垂直平均间隔”进行排列，如图3。
将图层1命名为“图形”，并锁定。
7)在库面板中，右击tu1，选择“直接复制”，在弹出的“直接复制元件”对话框中，名称为bt，类型为按钮，确定。这时就有一个按钮元件bt。
8)双击bt按钮图标，进行按钮的编辑：将弹起帧的内容全选后，使用“修改”菜单的“分离”命令（或按Ctrl B）把图像打散，使用墨水瓶工具给它添加黑色边框。在点击帧插入关键帧。在弹起帧将填充删除，只留边框。
9)返回场景1。新建一图层，将该图层拖到“图形”层的下面。
10)将按钮bt拖入舞台中，选择该按钮，执行“插入”菜单的“时间轴特效”的“帮助”下的“复制到网格”命令，在网格尺寸的行数和列数中填入6，在网格间距的行数和列数中都填入0像素数。单击确定按钮。
11)出现一个“复制到网格”的影片剪辑，将其分离（Ctrl B),在属性面板，将分离后的元件的实例类型（默认的是图形）都转换为“按钮”。并按先行后列的顺序起名bt1，……，bt36。位置如下图。将该层命名为“按钮”并锁定。
12)新建一图层，命名为“参考图”，将该图层拖到“按钮” 层的下面。
13)将“未标题-1.jpg”文件导入库， 将之拖入“参考图”层，转换为元件，位置和按钮层的按钮相同，在属性面板，设置其颜色：Alpha，15%。
14)使用文本工具，在图片的上方空白处输入文字“拼图游戏”：隶书、60、粗体、颜色#996600；在滤镜面板，添加“投影”效果，阴影颜色#999966。锁定该层。
15)将“图形”层解锁，选中影片剪辑tu1，打开动作面板，输入代码：
onClipEvent (mouseDown) { //当按下鼠标左键时
if(this.hitTest(_root._xmouse,_root._ymouse,false))
//判断鼠标指针在该对象上 { this.startDrag(true); //进行鼠标跟踪
x=this._x; //用x存储原来的水平坐标
y=this._y;} //用y存储原来的垂直坐标
onClipEvent (mouseUp) { //当按下鼠标左键时
if (this.hitTest (_root.bt1)) //判断该对象和按钮bt1有重叠，停留在正确位置
{ this._x=_root.bt1._x; //使该对象的水平坐标和按钮bt1的水平坐标相同
this._y=_root.bt1._y; } //使该对象的垂直坐标和按钮bt1的垂直坐标相同
else //否则返回原来位置
{ this._x=x;
this._y=y;}stopDrag(); } //_root.bt1可用this._parent.bt1代替。
16)将以上代码全选后复制，返回场景，再选择tu2，打开 动作面板，进行粘贴，只用将bt1全部改为bt2即可。
方法：可在动作面板中单击查找和替换按钮，在弹出的“查找和 替换”对话框中，查找内容：1，替换为：2，单击“全部替换”按钮。
17)类似进行上步操作，为其它的影片剪辑都添加动作代码。
18)使用“控制”菜单的“测试影片”（或按Ctrl Enter），观看效果。
19)使用“文件”菜单的“导出”的“导出影片”（或按Ctrl Shift Alt s），输入文件名“拼图游戏”，保存。
20)可使用“文件”菜单的“发布设置..”命令进行发布设置后发布。也可使用“文件”菜单的“发布”命令（Shift F12)直接发布。
说明：
大家也可进行类似的制作，如改变文档的尺寸、改变图像的大小、改变小图片的数目、改变布局、改变背景颜色等等，制作出具有自己特色的拼图游戏。
3 要掌握的知识点
1)掌握Photoshop CS的图像大小命令、网格、切片工具、存储为web格式..命令的使用。
2)掌握Flash 8的导入命令、库面板、影片剪辑、按钮、对齐面板、文本、滤镜、动作面板、测试影片、导出影片等的使用。
3)掌握复制到网格命令的使用。
4)掌握影片剪辑的onClipEvent ()处理函数。
5)掌握startDrag()、stopDrag()和hitTest()命令的使用。
6)_x，_y属性的使用，及if…else…语句的使用。
参考文献：
[1] 倪洋,苏峻,闻利群.Flash 中文版实用教程[M].人民邮电出版社,2006:251-254.
[2] 程风娟,徐帆,尹辉.中文版Flash 8实用教程[M].清华大学出版社,2006:210-214.