Flash脚本基础实例(导航条及MC).ppt

FLASH脚本基础及实例 FLASH脚本特效 常用脚本特效欣赏萤火虫雪花弹性跟随网页导航条黑客帝国数字流 学习内容 脚本基础知识按钮元件的使用导航菜单的制作控制影片剪辑的脚本 FLASH脚本 AS ActionScript是Flash的脚本语言 具有强大的交互功能 通过脚本应用 用户对动画元件的控制得到加强 目前提供了AS2 0和AS3 0两个版本 动作面板是Flash提供的运行编程的专用环境 F9打开动作面板 使用ActionScript的目的 交互式网站的开发 课件制作 小游戏开发 MTV 电子贺卡制作 AS可添加在哪些对象上 AS2 0 帧 Frame必须是关键帧写在关键帧上面的AS 当时间轴上的指针走到这个关键帧的时候 就写在这个帧上面的AS就被触发执行了 操作方法 点选关键帧 然后打开AS面板 写入语句 或新建一层插入空白关键帧 然后打开AS面板 写入语句 按钮 Button影片剪辑 MovieClip AS2和AS3的主要区别 在AS2中 ActionScript代码可以添加到关键帧 Keyframe 按钮 Button 或影片剪辑 MovieClips 中 并分别称之为帧动作 按钮动作及影片剪辑动作 在AS3中 ActionScript代码只能添加到关键帧 Keyframe 是面向对象的编程语言 而不是一个简简单单的控制影片播放的东西 某种角度上说 随着FLASH的功能变的越来越强大 AS变的越来越复杂几乎是不可避免的 ActionScript的相关术语ActionScript的语法脚本的控制结构 AS基础知识 ActionScript相关术语 事件 起触发作用的事情 如鼠标的移动 按下或释放等 如 按钮常见事件 release dragOut rollOut关键字 AS中有16个关键字breakcontinuedeleteelseforfunctionifinnewreturnthistupeofvarvoidwhilewith帧标签 即关键帧的名字 在时间轴上显示小红旗 元件实例名称 元件 从 库 中进入 舞台 就被称为该 元件 的 实例 有名称的影片剪辑实例才能在动作面板中调用 ActionScript的语法 点语法 a1 gotoAndPlay 2 括号 定义函数中的相关参数 大括号 形成一个完整的语句块 分号 每条语句以 结束 注释 后可跟上注释 字母大小写 关键字要区分大小写 脚本的控制结构 Flash的脚本控制结构有三种 顺序结构 分支结构 循环结构 一 分支结构 1 单分支格式 if 条件 要执行的代码 功能 如果条件满足 执行相应语句 如果条件不满足 程序继续 2 双分支格式 if 条件 代码1 条件满足执行这里的代码1else 代码2 条件不满足执行这里的代码2功能 如果条件满足 执行相应语句1 如果条件不满足 执行相应语句2 3 多分支格式 switch 变量 case值1 语句1 break case值2 语句2 break case值3 语句3 break default 语句4 for 初值 条件 下一个 循环体语句 执行这里的代码N次while 条件 循环体语句 当条件满足时一直执行这里的代码 二 循环结构 按钮元件的使用 按钮的定义 按钮实际上是包含四帧的交互式影片剪辑当创建按钮元件时 Flash就会自动创建包括四帧的时间轴 按钮的状态 弹起 当鼠标指针不接触按钮时 按钮处于弹起状态 指针经过 当鼠标移动到按钮上面 但没有按下时 按钮所处的状态 按下 当鼠标左键按下时 按钮所处的状态 如果鼠标右键按下时 将会弹出关联菜单 点击 在该状态下可以定义响应鼠标的区域 此区域在影片中是不可见的 6 3Action行为实例 给按钮添加动作 按钮动作是按钮的灵魂 若不给按钮添加动作 按钮就毫无用处 使用给按钮添加动作的语法是 On Event 执行的动作 其中Event 事件 是指鼠标的各种动作 主要有 Press 点击 Release 释放 ReleaseOutside 释放离开 RollOver 指针经过 RollOut 指针离开 DragOver 拖放经过 给按钮加动作 给按钮加动作实例 播放 重播 停止按钮从公用库中导入按钮 回到场景中 拖入按钮 给按钮实例加动作on release gotoAndplay 1 重播 给按钮加动作脚本 必须添加事件onon release stop 2 简单图片浏览器制作 Flash中制作按钮元件 可任意发挥 新建图层 按钮 放置制作好的按钮 如上一页 下一页 新建图层 图片 导入四幅图片 4个关键帧 并将此层拖入最底层 其它图层延续到第4帧 在 图片 上又新建图层 命名为 图片序号 画白色无边线矩形做为背景 左边是一个动态文本 将其变量名设为 b 中间画一条斜线 右边是一个静态文本 4 在最上层新建图层 命名为 脚本 在第一帧添加如下脚本 stop b 1 上一页按钮添加如下脚本 on release prevFrame if b 1 b 下一页按钮添加如下脚本 on release nextFrame if b 4 b 2 简单图片浏览器制作 时间轴控制动作 12 2动作运用 gotoAndPlay 从当前帧转到目标帧开始播放动画 gotoAndStop 从当前帧转到目标帧并停止播放动画 play 开始播放已停止了的动画 stop 从该帧停止当前正在播放的动画 nextFrame 从当前帧转到下一帧 nextScene 从当前场景转到下一场景 prevFrame 从当前帧转到前一帧 prevScene 从当前场景转到前一场景 stopAllSounds 停止正在播放的所有声音 按钮在图片浏览中的应用举例 例一例二例三 原理分析 通过按钮来控制图片切换 并且图片切换时有过渡效果 例1 2主要步骤讲解 1 制作控制图片切换的按钮 用直接复制方法 2 把每张图片制作成含切换效果的影片剪辑 并在最后一个关键帧加stop语句 3 新建一个影片剪辑 把第二步制作的每张图片的剪辑放入该影片剪辑的时间轴上 并在第一帧加stop语句 如右图 一帧放一个图片剪辑 4 回到主场景 将第三步制作的影片剪辑拖放到场景中所需位置 输入影片剪辑的实例名称 并设置其Alpha值为0 5 新建图层 将第一步制作好的按钮拖放到场景中所需位置并摆放整齐 然后分别选择按钮打开动作面板 写入代码 例1 2主要步骤讲解 根据需要 按钮上写入的代码主要有以下几种 滚动效果主要原理 滚动的小图片上有透明按钮 当鼠标移动到小图上的透明按钮时 触发了两个动作 一是当前滚动的小图停止 二是播放鼠标所指图片的大图 1 制作以下元件 1 把每张图片制作成含切换效果的影片剪辑 并在最后一个关键帧加stop语句 2 新建一个影片剪辑 把每张图片的剪辑放入该影片剪辑的时间轴上 并在第一帧加stop语句 3 新建一个图形元件 在元件中把每张图缩小 摆放整齐 并复制一份并列摆放 如下图所示 该元件用于制作图片滚动剪辑 滚动效果主要步骤 4 制作一个透明按钮元件 按钮大小与缩小图片相同 5 制作一个影片剪辑 剪辑第一图层放第 3 步制作的图形元件 第二图层将透明按钮覆盖在图层一上的每张小图上 几个小图就有几个按钮 选择每个按钮 打开动作面板分别添加如下代码 on rollOver root gundongmc stop root picmc alpha 100 root picmc gotoAndStop fzl on rollOut root gundongmc play root picmc alpha 0 滚动效果主要步骤 滚动效果主要步骤 6 制作一个图片滚动效果的剪辑 将第 5 步制作的含按钮的剪辑拖放到场景中 制作图片从右向左移动的补间动画 2 回到主场景 将第 6 步制作的滚动效果剪辑拖放到场景中所需位置 并将在属性面板中输入其实例名称为 gundongmc 将第 2 步制作的含多张图片切换的剪辑拖放到场景中所需的位置 注意不要覆盖滚动剪辑 在并属性面板中修改剪辑的透明度为0 输入其实例名为 picmc 3 测试动画 goto语句详解 语句包括 gotoAndPlay scene frame gotoAndStop scene frame nextFrame prevFrame 通过时间跳转到某一位置播放 即播放到该帧时直接跳转到某一指定帧 通过交互进行跳转 即当有一个事件发生后 才跳转 所以此类跳转必须写在相关事件内 on内 此on又必须添加到某对象内 goto语句可以添加在主时间轴 影片剪辑 按钮中 例 gotoAndPlay 5 由目前播放的帧直接跳到同一场景内第5帧 由第5帧继续播放影片 gotoAndStop 5 由目前播放的帧直接跳到同一场景内第5帧 停止播放影片 gotoAndStop 场景2 5 由目前播放的帧直接跳到Scene2场景内的第5帧继续播放影片 如何在FLASH中插入声音和视频 使用菜单栏中的 文件 导入 导入到库 命令 可以将声音导入到库中 一般在Flash中使用的声音格式是MP3和WAV 在时间轴中 可以设置声音的4种同步方式 在实际制作的时候 要根据不同的实际情况来选择合适的同步方式 1 事件 即使SWF文件已经停止 声音播放也会继续 事件声音的一个示例就是当用户单击一个按钮时播放的声音 开始 方式与 事件 方式的功能相近 但是如果声音已经在播放 则新声音实例不会播放 2 开始 3 停止 停止 方式的作用 是使指定的声音静音 数据流 方式的声音将会严格与时间轴同步 如果影片在播放 就播放声音 如果影片暂停 声音就会停止 数据流的一个示例就是MV的制作 如果不使用 数据流 方式 那么音乐很容易在播放过程中与动画 台词脱节 4 数据流 如何制作简单的MTV 1 选择好音乐和图片素材 导入到flash库里 2 在主场景中的一个层上起名 music 打开库将音乐文件从库中拖到场景中 这时 在时间轴的帧上 音乐只是一条短直线 在时间轴的音乐结束那帧处按F5键将影帧延长 3 再建一个层 起名 Label 标签 将时间轴的指针移动到头帧处 插入一个帧标签 start01 之后 按Enter键 听音乐 数据流同步方式 当音乐中的第一句歌词刚结束时 马上再按一次Enter键 确保音乐会停止 在音乐停止的这一帧处按F7键 插入一个空白关键帧 再书写帧标签 end01 接着 紧随在这一帧的后面再按F7键再插入一个空白关键帧 再写上帧标签 start02 再按Enter键 开始听下一句歌词 同样 当第二句歌词结束时 马上按Enter键 音乐停止 按F7键标注帧标签 end02 依次类推 一直到整首音乐的歌词都标注完成 4 以上的步骤完成之后 就可以在每句歌词的 start01 和 end01 之间做你要的动画 影片剪辑 了 5 加上播放与重播按钮 口型动画 要制作人物的口型动画 随着声音可以看到适当的口型变化 绘制5种最基本的口型 然后将这5种基本口型和闭口时的口型放置在图形元件中 在舞台中根据每一帧上的声音的韵母设置每一帧上的口型最后再编辑声音封套 a 音的口型 O 音的口型 使用loadMovie动态加载外部图片 作用 将SWF JPEG GIF或PNG从URL加载到影片剪辑中 语法 loadMovie url 目标 方法 加载的对象与源文件最好在同一目录下例 个人主页中导航按钮中用到了加载SWF 实例 01在影片剪辑中加载图片 fla制作一空影片剪辑元件 拖入场景图层1的第1帧中 实例名称取为mc在第1帧加脚本后四帧添加关键帧加相同脚本 更换图片名称新建图层2 添加两个按钮 控制上一帧 下一帧的跳转 略 stop loadMovie 001 jpg mc 举例 目的 制作加载外部图片的过程 并有淡入淡出的效果 制作一空影片剪辑元件 载入图片 拖入场景图层1的第1帧中 实例名称取为mc在第1帧加脚本loadMovie 1 jpg mc 分别在第15 25 35帧中添加关键帧 再将第1帧和第35帧中的实例的透明度改为0 第1 15帧 第25 35帧之间加动作补间 其它三幅图片载入效果类同 做在同一层 新建图层2 添加四个按钮 控制四幅图片的显示 每个按钮上的动作如下 每个按钮对应一行脚本 on release gotoAndPlay 1 on release gotoAndPlay 36 on release gotoAndPlay 71 on release gotoAndPlay 106 unloadMovie详解作用 卸载影片剪辑中的对象 语法 unloadMovie 目标 如 unloadMovie mc mc为影片剪辑的实例名称 用按钮制作简单横向FLASH导航菜单 动作分析 当鼠标点击导航栏中一个栏目A时相应的子栏目按扭出现 点击另一个栏目B时相应的子栏目按扭出现 同时A的子栏目消失 横向导航栏制作步骤 1 制作好主栏目和相应子栏目的按钮元件 2 把每个子栏目做成一个影片剪辑 以 特色美景 栏目为例 就是把 特色美景 栏目下的 景点介绍 和 线路推荐 做在一个影片剪辑里 其它栏目的子栏目与此类似 3 在主场景中第一个图层放置背景图 第二个图层适当位置放置主栏目按钮 每个子栏目的影片剪辑依次各放一个图层 并给每个子栏目剪辑实例命名 4 给有子栏目的主栏目按钮添加代码 1 若主栏目下无子栏目 则直接添加如下代码 on press getURL 你要打开的网页地址 self self表示在当前网页中打开 用 blank则表示在新窗口中打开 2 若子栏目有子栏目 以 特色美景 按钮为例 添加代码如下on press a gotoAndPlay 2 a为特色美景子栏目的影片剪辑实例名 b gotoAndStop 1 b为其它子栏目的影片剪辑实例名 横向导航栏制作步骤 注意若还有其他子栏目c d e f 也要写相应c gotoAndStop 1 意思是当前子栏目播放 其他子栏目都停止 当鼠标移动到导航栏之外如何让子栏目消失 解决办法 制作一个透明按钮 只在点击帧绘制一透明矩形 其大小如下红色区域 能覆盖除导航栏目以外的区域 将透明按钮拖入场景中 单独放在一个图层中 并给按钮添加如下代码 on rollOver a gotoAndStop 1 b gotoAndStop 1 意思是指当鼠标移动到该透明按钮上时 所有的子栏目影片剪辑都停止播放 用flash按钮制作简单的鼠标跟随效果 动画原理分析 利用按钮的rollOver 指针经过 事件来触发一个影片剪辑 你要的跟随效果 在场景中铺满透明度为0的按钮时 我们只要把鼠标放到场景中移动 rollover 就会触发跟随效果的剪辑 这样就得到了鼠标跟随的动态效果 1 制作要跟随的图形或图片 例如 新建一个元件命名为ball 画一个圆即可 画泡泡放射状填充 FFFFFF15 FFFFFF45 第二图层画高光 效果如图 2 新建一个按钮 只需要在第一帧处画上一个任意形状的按钮 圆 方 就可以 3 新建一个影片剪辑 在第一图层第一帧处插入第2步制作的按钮元件 中心对齐到图层 在第二层第一帧处的动作里面加入stop 在第二帧处插入ball元件 中心对齐 在第15帧处插入关键帧 并用任意变形工具将15帧处的图形变小 并且在属性栏中将其透明度调整为0 从2 15帧处补间设置动画 选中第一层的第一帧中的按钮单击右键 选择动作 在其中输入on rollOver gotoAndPlay 2 再次选中后打开属性栏中将其透明度调整为0 如图 用flash按钮制作简单的鼠标跟随效果 操作步骤 回到场景1中将剪辑拖到场景中 按住alt键复制多个剪辑 直到覆盖整个场景即可 如图 最后测试动画 控制影片剪辑的脚本 把AS写在影片剪辑本身上 选中影片剪辑 必须添加事件onClipEventonClipEvent 事件 需要执行的脚本程序 括号里的 事件 其实是个触发器 当事件发生时 执行该事件后面花括号中的语句 onClipEvent触发事件 onClipEvent load 当影片片断第一次加载到时间轴时 会触发本事件一次onClipEvent enterFrame 当影片片断加载时间轴时 不论是放映或停止状态或显示与否 都会不断触发本事件 所以只要此片断被加载后 此事件会一直不断地执行 直到影片片断被删除为止 onClipEvent mouseDown 当鼠标左键被按下时 会触发本事件一次 onClipEvent mouseUp 当被按下的鼠标左键被放开时 会触发本事件一次 onClipEvent mouseMove 只要在场景中移动鼠标 就会不断触发本事件 onClipEvent触发事件 纵向导航栏实例 root是根路径 this指元件本身 parent是指该元件的父元件 控制影片剪辑属性 1 影片剪辑在场景中的位置 效果 由 x 和 y 属性决定的 若每播放一帧 影片剪辑向右和向下移动10像素的位置 onClipEvent enterFrame this x 10 this y 10 2 控制影片剪辑的旋转 效果 使用 rotation 属性 180 180度之间 如 rotation 10 3 控制影片剪辑的透明度和可见性使用 alpha 属性 0 100之间 如 mc alpha 50 alpha 10 使用 visible 属性 true或false之间 4 控制影片剪辑的大小 效果 使用 width 和 height 属性 及表示纵 横向缩放百分比的 xscale 和 yscale 属性 如 onClipEvent enterFrame width width 2 height height 2 onClipEvent enterFrame xscale 100 root xmouse x 100 yscale 100 root ymouse y 100 影片剪辑属性 setProperty详解 setProperty详解作用 设置影片剪辑的属性 语法 setProperty 目标 属性 值 属性包括 alpha 透明度 focusrect 显示聚焦框 height 高度 highquality 高品质 name 名称 quality 品质 rotation 旋转 soundbuftime 声音缓冲时间 visible 可见 width 宽度 x 水平位置 xscale 水平缩放 y 垂直位置 yscale 垂直缩放 实例 setProperty mc alpha 50 setProperty mc rotation 200 setProperty mc visible false getProperty详解作用 返回指定影片剪辑的属性 语法 setProperty 目标 属性 实例 getProperty mc x 动态控制影片剪辑 1 影片剪辑的深度级别表示影片剪辑在SWF文件中的堆叠次序 每个影片剪辑都有唯一的一个深度级别值 值越大将排在越前面 每一个深度级别只能容纳一个影片剪辑 如果分配了相同的深度级别 将替换了以前的影片剪辑 如 mc duplicateMovieClip mc1 5 即复制了一个与mc相同的影片剪辑 深度值为5 深度值可选 16384 1048575 2 影片剪辑的动态复制 duplicateMovieClip 要被复制的影片剪辑的实例名称 为复制得到的影片剪辑指定名称 深度值 如 on release for i 1 I 10 i duplicateMovieClip mc mc i i setproperty mc i x random 550 setproperty mc i y random 400 复制出来的影片剪辑与原来的影片剪辑在同一位置 属性也相同 利用setproperty命令修改之 实例的名称为mc i 如mc 2 飞越星空效果实例 1 新建一长和宽为420PX 帧频 25 背景色为黑色的影片 2 先建一影片剪辑 共30帧 是一个白色的圆从大到小水平运动的动画 及第一帧是长和宽为10的大圆 透明度为100 第30帧是一个长和宽为1PX的小圆 透明度为0 如下图 3 回到主场景 将刚刚制作好的MC 拖到主场景一帧 并命名为 ball 然后在第二帧插入帧 4 新建一层 在第一帧加入如下AS setProperty ball alpha random 100 setProperty ball rotation random 360 duplicateMovieClip ball random 100 random 100 5 测试影片 波浪线条 具体步骤 先做一影片剪辑 曲线段 颜色 形状变化 拖入场景中 实例名称取为0 新建一层 在第一帧加动作 第二帧 F7 加动作 第三帧 F7 加动作 i 1 max 50 setProperty 0 alpha 0 setProperty 0 visible false duplicateMovieClip i 1 i i setProperty i alpha getProperty i 1 alpha 3 setProperty i y getProperty i 1 y i 10 setProperty i xscale getProperty i 1 xscale 4 i i 1 if i max gotoAndPlay 2 else stop removeMovieClip详解 作用 删除用duplicateMovieClip创建的影片剪辑语法 removeMovieClip 目标 实例 制作一影片剪辑元件 拖入场景中 实例名称取为mc 从公用库中拖入两个按钮 起复制和删除作用 on release duplicateMovieClip mc mc1 1 setProperty mc1 x 500 on release removeMovieClip mc1 复制按钮中的代码表示 复制mc为mc1 删除按钮中的代码表示 删除mc1 startDrag详解 作用 在影片剪辑中开始拖放动作 语法 startDrag 目标 例 startDrag root mc true 0 0 200 200 限制影片剪辑拖放的范围左 右 顶 底 锁定鼠标到中央否则取false 提示 上面代码加在影片剪辑中 stopDrag详解作用 停止当前正在进行的拖放动作 语法 stopDrag 没有参数实例 制作一影片剪辑元件 拖入场景中 实例名称取为mc 选中此实例 加代码 onClipEvent mouseDown startDrag root mc true 1 1 500 400 onClipEvent mouseUp stopDrag 表示 鼠标按下时可以拖动对象 弹起时停止拖动 自定义鼠标实例 制作一影片剪辑元件 第1帧 制作鼠标箭头 第2帧 F6 换颜色 第1帧上加stop 拖入场景中 实例名称取为mc 给mc加代码 onClipEvent load Mouse hide startDrag root mc true onClipEvent mouseDown root mc gotoAndStop 2 onClipEvent mouseUp root mc gotoAndStop 1 表示 影片剪辑mc载入后 系统原有鼠标隐藏 mc可以任意拖动 鼠标按下时 跳转并停止到mc的第二帧 弹起时 跳转并停止到mc的第一帧 鼠标跟随实例 一 ctrl F8新建一个影片剪辑 圆2 二 第20帧按F6插入关键帧 做到圆从左到右并变小消失的动画 缓动调至 100 缓动这里可以根据你的要求来设制 出来的效果也不同 三 ctrl F8新建影片剪辑 圆1 ctrl L将 圆2 放入 圆1 对齐中心 并在属性内给影片剪辑命名为 dot1 四 最关键的一步 新建层 在第一帧右键 动作 先定义变量 并鼠标拖拽i 2 startDrag dot1 true 按F6第2帧 随机复制影片剪辑 dot1 代码如下 if i 40 i 1 duplicateMovieClip dot1 dot i i 1889 dot rot ra