Download
1 / 33
330 likes | 421 Views
动画影片的基本控制. 按钮、鼠标、时间、速度的控制. 项目一 控制播放器 用按钮、跳转函数完成动画影片的控制. １ . 稻草人动画的播放与停止. 制作技术要点： 在主时间轴上，将 AS 添加在第 1 帧上。 影片剪辑 man_mc 时间轴运动补间动画 按钮 play_btn stop_btn 鼠标事件. 学生完成：单击跳动按钮控制稻草人移动，单击不跳不动 按钮动作全部停止 。 发 man 源文件 .fla. 项目一 控制播放器
E N D
动画影片的基本控制 按钮、鼠标、时间、速度的控制
项目一 控制播放器 用按钮、跳转函数完成动画影片的控制 １.稻草人动画的播放与停止 • 制作技术要点： • 在主时间轴上，将AS • 添加在第1帧上。 • 影片剪辑man_mc • 时间轴运动补间动画 • 按钮 play_btn • stop_btn • 鼠标事件 学生完成：单击跳动按钮控制稻草人移动，单击不跳不动 按钮动作全部停止。 发man源文件.fla
项目一 控制播放器 用按钮、跳转函数完成动画影片的控制 １.稻草人动画的播放与停止 制作“跳动”、“只跳不动”按钮，命名为play_btn、stop_btn。为按钮添加监听器及对应的监听函数。 play_btn.addEventListener(MouseEvent.CLICK,people_move); function people_move(me:MouseEvent){ this.play(); man_mc.play(); } stop_btn.addEventListener(MouseEvent.CLICK,people_stop); function people_stop(me:MouseEvent){ this.stop(); man_mc.stop();//停止稻草人跳动 }
１.稻草人动画的播放与停止 • 知识技能解说： • AS3所有情况都要监听器addEventListener（）函数。事件为MouseEvent • play()方法播放动画影片，即将时间轴上的播放头往前移动。 • stop()方法停止当前场景向移动的播放头。 • this：关键字，是对方法包含对象的参考。 • 提示： • 主时间轴可以看成MovieClip类的实例，用关键字this（变量root）来引用这个实例
２.地球仪动画控制 鼠标放在地球仪上，行星就旋转；移出时，就停止 地球仪素材.fla • 技术实现要点： • 建立影片剪辑侦听器 • 定义侦听函数 • 控制影片剪辑的播放
globe_mc.stop();//动画影片初始设定，地球仪影片片段停止播放globe_mc.stop();//动画影片初始设定，地球仪影片片段停止播放 globe_mc.addEventListener(MouseEvent.MOUSE_OVER,mouse_in);//鼠标指针移入，地球仪影片剪辑开始播放 function mouse_in(me:MouseEvent){ globe_mc.play(); } globe_mc.addEventListener(MouseEvent.MOUSE_OUT,mouse_out);//鼠标指针移出，地球仪影片片段停止播放 function mouse_out(me:MouseEvent){ globe_mc.stop(); }
3.圣诞老人与树交互动画 编程实现：单击I按钮时，出现老人．单击II时，出现圣诞树． • 技术实现要点：发圣诞老人与树素材.fla • 停止播放头、区间动画末帧stop()。区间动画首帧添加帧标签。 • 为按钮建立侦听器 • 定义侦听函数 • 控制播放头的播放this.gotoandplay（帧标签）
编程实现：单击next>>按钮时，进行图片向前翻页．单击<<back按钮时,向后翻页．编程实现：单击next>>按钮时，进行图片向前翻页．单击<<back按钮时,向后翻页． 4.昆虫相册 • 技术实现要点： • 分场景布局图片，首帧编写代码。(场景管理器shfit+F2) • 为按钮建立侦听器，鼠标事件监听 • 定义侦听函数 • 控制播放头的播放nextScene（场景名），prevScene(场景名) • 将播放头移动场景第１帧并停止播放。 • prevFrame()，nextFrame()将播放头移前、后一帧并停止 • １.请学生分析按钮交互编程原理nextscene.fla • ２.学生实现昆虫相册昆虫相册素材.fla
5.延迟动画的播放 编程实现：动画影片３秒后开始播放． ３秒 • 技术实现要点： • 动画实现：输入文字打散并分散到图层，建立补间动画。 • 使用setTimeout()函数设定定时器对象,只调用一次 • 定义时间到后的执行函数 AS层首帧： stop(); var myTime=setTimeout(start, 3000); function start(){ play(); clearTimeout(myTime); } 思考： １.不重复执行的程序结构 ２.重复执行的程序结构
间隔循环 • setInterval() 函数;设置一个间隔时间，间隔多久会触发一次！除非remove，否则会永久执行下去！与enterframe类似 • ．属于flash.utils.*包中; • setInterval (函数名，时间间隔，函数参数); 函数名是自定义的函数名，时间间隔以毫秒计．１秒=1000毫秒 • clearInterval (间隔标记),清除函数 示例：制作计时器(定时器.fla) 在时间轴中创建动态文本，实例名：time_txt var i:int=0; var id:uint =setInterval(time,1000); function time(){ i++; time_txt.text =String(i); if (i>59){ clearInterval(id); } }
setTimeOut：设置超时时间，只会执行一次！ setTimeOut(函数名,延迟时间,参数); Timer：设置一个间隔时间，有次数限制，只执行指定次数！ Timer(延迟时间，执行次数); varmyTimer:Timer=newTimer(1000,2); myTimer.addEventListener(TimerEvent.TIMER,timerHd); myTimer.start(); functiontimerHd(e:TimerEvent){ trace("timerHandler:"+event); }
全屏播放 fscommand()方法： 当Flash播放程序在独立模式上执行时，其所传送的命令才有效； 语法： fscommand(“命令”，”参数”) fscommand(“quit”) 结束Flash程序播放 fscommand(“fullscreen”,”true”/”false”) 全屏显示
编程实现：全屏播放，通过鼠标拖动变换按钮角度或释放按钮，或通过按钮增减，控制摩天轮的旋转速度和方向。编程实现：全屏播放，通过鼠标拖动变换按钮角度或释放按钮，或通过按钮增减，控制摩天轮的旋转速度和方向。 互动摩天轮
编程实现：全屏播放，通过鼠标拖动变换按钮角度或释放按钮，或通过按钮增减，控制摩天轮的旋转速度和方向。编程实现：全屏播放，通过鼠标拖动变换按钮角度或释放按钮，或通过按钮增减，控制摩天轮的旋转速度和方向。 互动摩天轮 • 技术实现要点： • 摩天轮影片剪辑实例名：m_mc. • 按钮名：fast_btn、slow_btn。 • 动态文本框名：fps_txt，显示旋转速度。 • 分建立四个图层:放背景图、摩天轮、按钮层、AS层。 • 在AS层第1帧编写程序，思路如下： • fscommand(“fullscreen”,”true”); P27 • 建立fast_btn、slow_btn的事件侦听MOUSE_DOWN、 • 事件侦听函数onFastClick，onSlowClick • 顺时针最大速度为60; • 逆时针最大速度为-60; • 建立stage的事件侦听ENTER_FRAME，定义事件侦听函数cc， • 完成帧频为负数时，逆时针旋转；否则顺时针旋转
影片剪辑的反向旋转 对摩天轮进行逆时针旋转控制(反正在向旋转.fla) 影片剪辑的相关属性： 影片剪辑.currentFrame．所在影片剪辑的当前帧的位置； 影片剪辑.totalFrames．影片剪辑的全部帧的总数； 方法： 影片剪辑. nextFrame()．播放下一帧并停止 影片剪辑. prevFrame()．播放前一帧并停止 实现思想： 以帧频事件触发，不断使影片剪辑播放前一帧，当播放头到第１帧时，跳转到最后一帧gotoAndPlay（），继续播放前一帧．
对摩天轮进行速度控制 帧频属性的使用: Stage类是flash.display包中，舞台stage是他的实例。其属性分为只读和读写属性。 只读属性：不能通过程序修改。包括2个属性 stageWidth和stageHeight。 读写属性：可以通过程序动态修改 stage.frameRate控制帧频 stage.displayState全屏设置，”fullScreen”,”normal”
对摩天轮进行速度控制 示例:互动摩天轮速度控制.fla 编程思路 事件目标：变慢＼变快按钮， 事件类型：MOUSE_DOWN鼠标事件侦听 事件函数： 变慢函数，单击一次速度减慢１２帧，帧频为０时停止； 变快函数，单击一次速度增加１２帧，帧频最大为６０；
作业：完成项目一 • 项目1：互动摩天轮 • 将互动方式修改为下图方式 • 个人独立完成，上交源文件和发布文件
关于数学Math类 • Math类是顶级类，其所有属性方法都是静态的 • Math.abs(val:Number)绝对值； Math.sqrt(val:Number)返回数字的平方根； Math.random()返回一个０~１之间的随机数字 Math.atan2(x:Number, y:Number)以弧度为单位计算并返回y／x的角度值，该角度从圆的X轴沿逆时针方向测量．值介于＋PI～－PI间． Math.pow(val1:Number, val2:Number)返回val1的val2次幂 Math.round(val:Number) 返回四舍五入后取整值 Math.floor(val:Number)返回小于等于指定数字的最接近整数值
跟随光标的十字线 项目描述：舞台中的十字交叉线缓冲跟随光标移动，并 动态显示交叉点与光标的间距． 技术实现要点： １.实现目标跟随光标运动，可以设置target.x=mouseX, target.y=mouseY; ２.跟随与缓冲跟随光标．以帧频触发，不断获得目标与光标的间距，并乘以系数作为目标的运动速度．越来越接近时，速度越小，实现缓冲． ３.建立十字交叉线影片剪辑hv_mv;建立文本层，动态文本dis_txt显示十字叉与光标的缓冲距离,静态文本显示单位．
跟随光标的十字线 stage.addEventListener(Event.ENTER_FRAME,lineMove); function lineMove(e:Event):void{ var dis:Number=Math.sqrt(Math.pow((this.mouseY-hv_mv.y),2)+Math.pow((this.mouseX-hv_mv.x),2)); dis_txt.text=String(Math.floor(this.mouseX))+“,”+String(Math.floor(this.mouseY))； hv_mv.x+=(this.mouseX-hv_mv.x)*0.3; hv_mv.y+=(this.mouseY-hv_mv.y)*0.3; }
项目2 互动跑车的设计与制作 项目目描述： 全屏播放，模拟跑车的运动，通过按钮来控制跑车的启动和 停止,灯光的开关、车轮动静、上下前后移动、转左转右、 透明度、加长、减长、加宽、减宽调节，并有结束运行功能。 界面元素： 跑车、路面、风景、灯光：自行制作 交互功能： 具有上述基本功能，就可达到要求。如增加换车、换颜色等额外功能，可以加分. 项目开发要求：分组进行（2人一组），分工合作。 项目验收：上交作品并进行演示答辩
影片剪辑的属性 影片剪辑.width：水平宽度 影片剪辑.height：垂直高度。单元为px 影片剪辑.alpha：对象透明度（0~1），初值为1 影片剪辑.rotation：旋转角度0~180顺时针，180~0逆时针 影片剪辑.x、影片剪辑.y：指注册点的位置坐标 影片剪辑. visible：对象的可见性，是布尔值．
事件处理 • 处理事件３大要素 • 事件目标（发送者），事件响应函数（接收者），注册事件侦听（事件）。 • 注册事件的形式： 发送者. addEventListener(事件者，接收者) function 接收者(e:事件者){ } 移除事件： 发送者. removeEventListener(事件者，接收者)
事件侦听的语法结构 １.注册事件侦听函数 addEventListener(eventName:String,listener:Function[,useCpture:Boolean,priority:int,useWeakReference:Boolean); 如：mc. addEventListener(MouseEvent.MOUSE_MOVE,f1); mc. addEventListener(MouseEvent.MOUSE_OVER,f2); mc. addEventListener(Event.ENTER_FRAME,f3); ２.注销侦听函数 不再需要时，要注销． mc. removeEventListener(MouseEvent.MOUSE_MOVE,f1) ３.定义事件处理函数 funciton f1(event:MouseEvent){…}
事件发送者与事件 • 所有显示实例都是事件的目标（发送者）．Sprite类的实例是事件的发送者． • 显示对象是指Flash中所有可视元素，图形，按钮，补间动画，文本，舞台． • 事件由事件名和事件对象组成．如：MouseEvent.CLICK(“click”) MouseEvent.MOUSE_DOWN(“mouseDown”) MouseEvent.MOUSE_WHEEL(“mouseWheel”) 可以写成字符串形成”doubleClick”； 也可写成点语法，大写加下划线．
事件接收者 • 用function 函数名（参数：事件类） • 示例：编程实现当舞台中有鼠标单击时，会输出信号“您单击鼠标了”(侦听舞台单击事件.fla) • 事件对象 • 事件处理过程中，系统会创建一个事件类的实例，作为参数传递给接收者函数，该实例称为事件对象--事件类的实例.target stage.addEventListener(MouseEvent.CLICK,output); function output(me:MouseEvent){ trace(“您单击鼠标了”);//改为 }
事件分类 • 是对象之间交换信息的基本方式． • 事件类： KeyBoardEvent MouseEvent TextEvent Event事件类 …其他子类 TimeEvent SoundEvent ContextMenuEvent
常用事件 MouseEvent.CLICK：单击一次鼠标动作 DOUBLE_CLICK MOUSE_DOWN MOUSE_WHEEL 见书P6 KeyBoardEvent.KEY_DOWN 按下某个键 .KEY_UP 释放某个键 Event.ENTER_FRAME 以帧频触发 TimeEvent.TIMER Timer对象在每次达到指定间隔时间时 .TIMER_COMPLETE
创建事件侦听器过程 １.确定事件目标 一个用于作为事件发送目标的对象称为事件目标 当事件对象到达事件目标以后，如果这个事件目标没有注册事件侦听，则事件对象被丢弃． ２.注册事件侦听 为让事件目标做出响应，需要注册侦听函数．可以在一个对象上注册若干侦听函数． ３.执行事件响应函数
鼠标事件侦听实例 • 窗口有一个红色“请拖动我”矩形块，拖动方块时，文字显示“开始拖动”。松开鼠标时，文字显示“停止拖动”。 拖动方块&文字提示.fla
