FlashCS3网站商业设计从入门到精通第7章 Flash常用交.ppt

1、第7章 Flash常用交互技术鼠标交互,大部分Flash影片中的交互功能都是通过鼠标来实现的。除了使用鼠标单击按钮这一最基本的交互外，在Flash中还可以实现多种通过鼠标完成的交互。例如可以使用鼠标拖动影片中的对象、可以自定义鼠标的外观，以及使用鼠标来实现各种特殊动画效果等。本章列举了多个通过鼠标来实现交互功能的实例。读者通过学习，可以掌握使用ActionScript来实现各种鼠标效果的方法。,7.1 自定义鼠标外观,7.1 自定义鼠标外观,7.1.1 可用于自定义鼠标的方法和函数,1Mouse.hide()方法和Mouse.show()方法 2MovieClip.startDrag()方法和

2、MovieClip.stopDrag()方法 3MovieClip.onMouseMove事件处理函数 4MovieClip.onEnterFrame事件处理函数 5updateAfterEvent()函数,7.1.2 碰撞检测方法,使用MovieClip.hitTest()方法可以检测影片剪辑是否与其他实例或目标区域发生重叠或相交。 用法1： my_mc.hitTest(x,y,形状标记); 用法2： my_mc.hitTest(目标);,7.1.3 实例制作,本例中将实现鼠标指针分别在规则区域（正方形）和不规则区域（五角星）之内显示不同的指针外观。步骤如下: 第1帧的图形 第2帧的图形 第

3、3帧的图形,7.1.3 实例制作,步骤如下: 鼠标指针位于五角星范围内 鼠标指针移出五角星范围 鼠标指针移出正方形范围,7.2 自定义右键菜单,7.2 自定义右键菜单,7.2.1 自定义右键菜单的方法,1ContextMenu类 ContextMenu类提供对Flash Player右键菜单项的控制，当用户在Flash Player中右击时，将弹出右键菜单。 2ContextMenuItem类 使用ContextMenuItem类可创建在Flash Player右键菜单中显示的自定义菜单项。,7.2.2 function语句,可以使用该语句实现自定义函数，达到扩展函数功能的作用。可以在影片中的

4、某一个地方定义函数，然后从影片的其他脚本中调用该定义的函数。其一般用法为： function 函数名(参数) /需要执行的动作 ,7.2.3 fscommand()函数,使SWF影片与Flash Player或承载Flash Player的程序（如Web浏览器）进行通讯。还可以使用fscommand()函数将消息传递给Macromedia Director，或者传递给Visual Basic(VB)、Visual C+和其他可承载ActiveX控件的程序。其用法为： fscommand(命令,参数);,7.2.4 实例制作,本例中除了要实现右键菜单的自定义之外，还将实现在影片的一定区域内，右击

5、才能出现自定义的右键菜单。步骤如下: 制作第1帧的显示画面 从第2帧开始制作一个动画,7.2.4 实例制作,步骤如下: square实例内的时间轴 放置square实例,图7.17 在正方形范围外右击 图7.18 在正方形范围内右击 图7.19 执行“播放影片”菜单命令,7.2.4 实例制作,步骤如下: 在正方形范围外右击 在正方形范围内右击 执行“播放影片”菜单命,图7.17 在正方形范围外右击 图7.18 在正方形范围内右击 图7.19 执行“播放影片”菜单命令,7.3 放大镜,7.3 放大镜,7.3.1 startDrag()函数和stopDrag()函数,startDrag()函数用来

6、使目标影片剪辑在影片播放过程中可拖动。一次只能拖动一个影片剪辑。执行startDrag()操作后，影片剪辑将保持可拖动状态，直到用stopDrag()停止拖动为止，或直到对其他影片剪辑调用了startDrag()动作为止。其用法为： startDrag(目标,固定,左,顶部,右,底部);,7.3.2 setProperty()函数,setProperty()函数的作用是，当影片剪辑播放时，更改影片剪辑的属性值。其一般用法为： setProperty(目标,属性,值); 目标：需要设置其属性的影片剪辑的实例名称的路径。 属性：需要设置的属性。 值：属性的新值或计算结果为属性新值的等式。,7.3.

7、3 实例制作,本例的关键在于，要根据当前鼠标指针的位置实时指定放大镜内图片的坐标位置。因此，在将图片放置在元件内时，要注意图片的坐标位置与元件中心及其他元素的位置关系。,7.3.3 实例制作,步骤如下: 将地图图片缩小为50% 将地图转换为图形元件,7.3.3 实例制作,步骤如下: 放大镜元件内的舞台显示 设置放大镜位置,7.4 360度展示商品,7.4 360度展示商品,7.4.1 影片剪辑的鼠标事件处理函数,1MovieClip.onPress事件处理函数 2MovieClip.onRelease事件处理函数 3MovieClip.onReleaseOutside事件处理函数,7.4.2

8、实例制作,在制作本例之前，首先需要准备好一组图片。这组图片是需要展示的商品在各个角度的照片。注意确保准备的图片在拍摄角度上的连贯性，以及在距离、灯光等拍摄条件上的一致性。最好使用PhotoShop等照片处理软件将照片中的商品单独取出，并制作成背景透明的PNG格式图片。,7.4.2 实例制作,步骤如下: 导入图像序列对话框 导入图像序列,7.4.2 实例制作,步骤如下: 使用按钮控制相机的显示 使用鼠标拖曳相机的旋转,7.5 鼠标跟随效果（一）,7.5 鼠标跟随效果（一）,7.5.1 获取随机数值,1random()函数:random()函数可用来返回一个随机整数，此整数介于0和指定数字之间（包

9、括0而不包括指定数字）。其用法为： random(数字); 2Math.random()方法:random()函数在Flash Player 5之后已不推荐使用了，可以通过使用Math.random()方法来取得随机数值。该方法可用于返回一个伪随机数n，其中0n1。,7.5.2 影片剪辑的复制方法,1duplicateMovieClip()函数和removeMovieClip()函数 duplicateMovieClip()函数用于在影片播放时创建一个影片剪辑的实例。无论播放头在原始影片剪辑中处于何位置，在复制的新影片剪辑中，播放头始终从第1帧开始。原始影片剪辑中的变量不会复制到新的影片剪辑中

10、。 2MovieClip.duplicateMovieClip()方法和MovieClip.removeMovieClip()方法 MovieClip.duplicateMovieClip()方法用于在影片播放时，创建指定影片剪辑的实例。,7.5.3 实例制作,本例的鼠标跟随效果是通过不断地复制出新的圆点实例来实现的。当复制出的圆点实例经过一段时间后将会在舞台上消失，不会再次出现。这时候，就需要将已消失的圆点从影片中删除掉。如果不删除，将会占用大量的系统资源，严重影响影片的正常播放。,7.5.3 实例制作,步骤如下: 绘制背景图形 创建白色圆点图形,7.5.3 实例制作,步骤如下:,修改图形的

11、大小位置和透明度 创建补间动画,7.6 鼠标跟随效果（二）,7.6 鼠标跟随效果（二）,7.6 鼠标跟随效果（二）,步骤如下:,绘制背景图形 制作圆圈图形,7.6 鼠标跟随效果（二）,步骤如下:,创建补间动画,7.7 鼠标遮罩,7.7 鼠标遮罩,7.7 鼠标遮罩,步骤如下:,原图片 模糊处理后的图片,绘制遮罩图形 放置遮罩图形,7.7 鼠标遮罩,步骤如下:,放置mask2实例 放置mask1实例,7.8 换装游戏,7.8 换装游戏,7.8.1 交换影片剪辑深度的方法,MovieClip.swapDepths()方法用于交换两个影片剪辑的深度级别，或将影片剪辑放置到指定的深度级别。 用法1： M

12、ovieClip.swapDepths(目标); 用法2： MovieClip.swapDepths(深度);,7.8.2 for语句,for语句的一般形式为： for(初始化表达式; 条件表达式; 递增表达式) /要在循环内执行的程序 ,7.8.3 实例制作,实现各种衣饰的随意拖动和摆放是本例制作成功的关键所在。 步骤如下:,绘制女孩形象 绘制一件上衣,7.8.3 实例制作,步骤如下:,7.9 动态画板,7.9 动态画板,7.9.1 影片剪辑的创建和附加方法,1MovieClip.createEmptyMovieClip()方法:此方法用来创建一个空影片剪辑作为现有影片剪辑的子级。其行为类似

13、于attachMovie()方法，但是不必为新的影片剪辑提供外部链接标识符。新创建的空影片剪辑的注册点为左上角。 2MovieClip.attachMovie()方法:此方法用来从“库”面板中取得一个元件并将其附加到影片剪辑中。使用MovieClip.removeMovieClip()或MovieClip.unloadMovie()方法可以删除通过attachMovie()方法附加的影片内容。,7.9.2 Object()构造函数,Object()构造函数用于创建Object对象，并将对该对象的构造函数方法的引用存储在该对象的构造属性中。,7.9.3 可用于侦测鼠标按键的函数和方法,1Movi

14、eClip.onMouseDown事件处理函数 2MovieClip.onMouseUp事件处理函数 3Mouse.addListener()方法,7.9.4 绘制线条的方法,1MovieClip.moveTo()方法:此方法用来将当前绘画位置移动到指定的位置。 2MovieClip.lineTo()方法:此方法用来使用当前线条样式绘制一条从当前绘画位置到指定位置（x，y）的线条；当前绘画位置随后会设置为（x，y）。 3MovieClip.lineStyle()方法:此方法用于指定一个线条样式，Flash将用该样式对lineTo()和curveTo()方法进行后续调用。 4MovieClip.clear()方法:此方法用于删除使用影片剪辑绘画方法（包括用MovieClip.l