交互与导航课件.pptx

20 43 38 1 Flash交互与导航课件 20 43 38 2 简单交互课件 认识图形 20 43 38 3 20 43 39 4 运用PhotoShop去掉图像背景的方法运用PhotoShop制作特效字的方法按钮元件的制作和按钮声效的添加通过按钮动作和帧动作制作简单交互课件的方法 20 43 39 5 2 按钮声效 3 实现交互 按钮是Flash元件的一种 它具有多种状态 并且会响应鼠标事件 执行指定的动作 是实现交互性课件的灵魂 为按钮的特定帧增加音效 交互中就能明确地给使用者以提示 从而有声有色地实现课件交互 运用Flash动作脚本语言 能控制课件的随意跳转播放 能让一些复杂繁琐的制作过程得到有效的简化 能科学直观地展示学科的相关知识点 1 按钮 20 43 6 建立交互 交互由ActionScript实现 ActionScript由动作语句组成动作语句命令字和命令参数组成有语法规则不同版本中的语句数量有很大差异两种对象可设置交互动作按钮 影片剪辑实例 用户操作产生响应关键帧 播放到该帧时 产生预期响应 20 43 7 实例的行为 类型影片剪辑按钮图形可以与元件类型不一致具有不同的动作特征按钮 鼠标交互例如 单击按钮 跳转到某网址影片剪辑 可用动作脚本进行控制图形 与动作无关 20 43 8 动作面板 按钮 影片剪辑 可以设置动作关键帧 可以设置动作 动作脚本的设置 Actionscript1 0 2 0关键帧 按钮 影片剪辑按钮 on语句影片剪辑 onClipEvent语句Actionscript3 0关键帧中可以添加脚本按钮 影片剪辑 通过对象命名方式在关键帧脚本中调用 20 43 39 9 20 43 10 理解事件和动作 事件 来自外界的触发动作 响应事件后计算机的表现ActionScript处理 事件 和给出具体动作 行为 的工具完成动画的交互功能 定义事件基于动作 用户触发事件基于时间 帧事件 20 43 11 定义用户触发事件 通过鼠标 键盘对动画进行操作时触发的事件Press 鼠标移到按钮上 并按下左键时触发此事件Release 单击释放时触发此事件ReleaseOutside 按下按钮 并移到按钮外时释放触发此事件RollOver 移动到按钮上时触发事件RollOut 从按钮上移出时触发此事件DragOver 将对象拖出并鼠标放回对象上时触发事件DragOut 拖曳对象时触发事件KeyPress 指定键盘上的键按下时触发事件onKeyDown 按下按键时OnKeyUp 松开按键时 交互 20 43 12 按钮感应鼠标事件的响应 On 鼠标事件 响应命令 属于 全局函数 影片剪辑控制例如 on press action press on release play on release gotoAndPlay 2 20 43 13 实践 制作具有fe51 swf效果的动画文件 1 上面是一个按钮 下面是一个可显示不同内容的文本区域 文本区域设置如图 2 鼠标对按钮进行Press release releaseoutside rollover rollout dragover dragout操作时 可显示对应的说明文本 交互 20 43 14 影片剪辑感应的事件 OnClipEvent load 装载影片enterframe 播放每一帧unload 卸载影片mousedown 按下左键mouseup 释放左键mousemove 鼠标移动keydown 按下某键keyup 释放某键data 使用load时接收到数据属于 全局函数 影片剪辑控制 交互 实践 观察fe52 fla动画文件 理解其制作的内容 onClipEvent enterFrame root action1 EnterFrame this currentframe 20 43 15 交互语句 赋值语句变量 值或表达式 控制播放语句Stop Play 播放跳转语句gotoAndStop 目的帧位置 gotoAndPlay 目的帧位置 交互 20 43 16 实践 制作fe53 swf效果的动画 控制该动画的播放和停止按钮 可以播放或关闭五角星旋转动画 保存为 五角星 自己的姓名 fla 20 43 17 控制画面的放映 NextFrame PrevFrame全局函数时间轴控制当使用按钮控制时 通常用在on操作的结果中例如 on release nextFrame 实践利用fe59素材 fla制作具有fe59 swf效果的动画 20 43 39 18 实践 认识图形 20 43 39 19 运用PhotoShop处理课件位图素材 20 43 39 20 运用PhotoShop制作课件特效字标题 20 43 39 21 创建课件界面和导入处理后的课件素材 20 43 39 22 制作按钮元件 1 创建按钮元件 20 43 39 23 制作按钮元件 2 绘制按钮元件各帧图形 20 43 39 24 制作按钮元件 3 创建按钮的声音效果 20 43 39 25 布局图形和按钮元件 1 布局图形元件 20 43 39 26 布局图形和按钮元件 2 布局按钮元件 20 43 39 27 定义帧动作和按钮动作实现交互 on press nextFrame on press prevFrame 20 43 39 28 分模块交互课件 正方体截面 20 43 39 29 20 43 39 30 分模块交互课件的制作方法动态按钮元件的制作方法利用Swift3D制作立体图形动画的方法影片剪辑元件在交互课件中的应用 20 43 39 31 2 动态按钮 Swift3D是由electricrain公司出品的一个使用简便且能导出Flash动画 swf 的3D动画软件 动态按钮同时具备影片剪辑和按钮两种特性 既可以用来实现影片的控制 又不失特殊的效果 1 Swift3D制作立体动画 20 43 39 32 实践 正方体截面 20 43 39 33 利用Swift3D制作立体图形动画 1 创建一个正方体模型 1 CreateBox创建立方体 2 选择Camera 3 镜头长度25 4 拖曳产生立体 编辑场景 20 43 39 34 利用Swift3D制作立体图形动画 2 为正方体添加材质 1 选择Showmeterials 2 从这类中选择颜色 3 将选好的拖曳到立方体上 20 43 39 35 利用Swift3D制作立体图形动画 3 制作立体图形动画效果 1 选择Showanimations 2 单击可查看动画效果 3 将选好的拖曳到立方体上 20 43 39 36 利用Swift3D制作立体图形动画 4 输出动画通用设置 1 选择此选项卡 2 选择矢量 3 General的设置默认 20 43 39 37 利用Swift3D制作立体图形动画 1 选择填充选项 填充类型的选择 选中镜面高亮 4 输出动画填充设置 20 43 39 38 利用Swift3D制作立体图形动画 1 选择边缘选项 选择包含边缘 边缘类型为轮廓 边缘粗细为2 4 输出动画边缘设置 20 43 39 39 利用Swift3D制作立体图形动画 1 单击此按钮生成帧 2 看到立方体 3 单击此处可看动画效果 4 输出文件 4 输出动画生成动画保存文件为 swft 20 43 39 40 导入Swift3D制作的立体图形动画准备先装Swift3D 再装Flash 可直接导入先装Flash 再装Swift3D 先完成 复制过去 20 43 39 41 创建课件界面和导入Swift3D文件 20 43 39 42 制作动态按钮 20 43 39 43 制作截面影片剪辑元件 1 按截面分割正方体 20 43 39 44 制作截面影片剪辑元件 2 创建演示截面形成过程的动画效果 20 43 39 45 布局场景和实现交互导航控制 on press gotoAndPlay 3 20 43 39 46 典型多场景导航课件 变阻器 20 43 39 47 20 43 39 48 多场景动画的制作方法多场景课件导航结构的实现过程在Photoshop中创建主控界面图像的方法隐形按钮的制作方法 20 43 49 多场景动画 分别建立每个场景的动画建立主场景窗口 其他面板 场景在主场景中设置贯串所以场景的控制 20 43 50 实践 利用 fe57素材 fla 中的素材 制作具有 fe57 swf 效果的动画 用户点击画面上的四个按钮之一时 便切换到相应的动画进行放映 单击返回按钮可回到显示菜单选择的主界面 将制作好的动画保存为 fe57结果 fla 20 43 39 51 2 课件主控界面 on press gotoAndPlay 场景名 1 根据教学目标制作课件的主控界面效果 或以艺术性为主 或以突出教学内容为主 其目的都是为了增强课件的感染力 1 主控导航 20 43 39 52 3 多场景 选择 窗口 其他面板 场景 命令 或按快捷键Shift F2 打开 场景 面板 4 隐形按钮 当按钮的 弹起 帧无任何内容时 该按钮称为隐形按钮 其特点是便于隐藏 20 43 39 53 实践 变阻器 主控界面 20 43 39 54 实践 变阻器 结构原理 20 43 39 55 实践 变阻器 工作原理 20 43 39 56 实践 变阻器 接线方法 20 43 39 57 实践 变阻器 使用方法 20 43 39 58 整体规划多场景课件的模块结构 20 43 39 59 在Photoshop中制作课件主控界面图像 1 处理图像素材 20 43 39 60 在Photoshop中制作课件主控界面图像 2 绘制背景 3 输入标题 20 43 39 61 在Flash中创建多场景文档 窗口 其他面板 场景 命令或按快捷键Shift F2 20 43 39 62 制作分场景动画 1 制作 主控界面 场景 20 43 39 63 制作分场景动画 2 制作 结构原理 功能模块场景该场景由4个部分组成 20 43 39 64 制作分场景动画 2 制作 结构原理 功能模块场景 1 文字说明 打字效果 20 43 39 65 制作分场景动画 2 制作 结构原理 功能模块场景 2 滑线变阻器介绍 隐形按钮 20 43 39 66 制作分场景动画 2 制作 结构原理 功能模块场景 3 电阻箱 20 43 39 67 制作分场景动画 2 制作 结构原理 功能模块场景 4 实验装置 20 43 39 68 制作分场景动画 3 制作其他功能模块场景工作原理 单击 开始 从第2帧开始播放 20 43 39 69 制作分场景动画 3 制作其他功能模块场景接线方法 2 120帧的动画 121 240帧的动画 241 358帧的动画 359 483帧的动画 484 608帧的动画 609 733帧的动画 20 43 39 70 制作分场景动画 3 制作其他功能模块场景使用方法 分别对应2 3 4帧 做法与 变阻器结构原理 类似 20 43 39 71 定义动作脚本实现多场景导航 on press gotoAndPlay 结构原理 1 on press gotoAndPlay 接线方法 1 on press gotoAndPlay 使用方法 1 on press gotoAndPlay 工作原理 1 20 43 39 72 定义动作脚本实现多场景导航 on press gotoAndPlay 主控界面 1 20 43 39 73 网络型多模块导航课件 金属的物理性质 20 43 39 74 20 43 39 75 利用Flash制作多模块导航课件主界面的方法课件片头在多模块课件结构中的实现方法利用loadMovieNum 函数实现网络型多模块导航课件的方法调用外部swf文件的方法 20 43 39 76 2 loadMovieNum 函数 3 loadMovie 函数 从多媒体课件的体积入手 化大为小 分而治之 是一种有效的解决方法 如果要将SWF文件或JPEG文件加载到特定的级别 就要使用loadMovieNum 函数 如果要将影片或者图片加载到某一个目标路径 比如一个影片剪辑中 那么就要使用loadMovie 函数 1 课件的网络化应用 20 43 77 交互语句 调用动画播放作品LoadMovieNum 动画播放作品的地址和文件名 放置层位置 on release loadMovieNum fe34 swf 1 play 去除内存中的动画UnloadMovieNum 目标播放层 可将不同的动画放在不同的层中上层可盖住下层内容实践 制作类似于fe54 swf的动画 能用两组按钮控制曾经建立的两个动画的播放 交互 20 43 39 78 实践 金属的物理性质 20 43 39 79 整体规划网络型导航课件的模块结构 20 43 39 80 制作片头 此关键帧增加脚本 loadMovieNum 主控界面 swf 0 20 43 39 81 制作主控导航影片 导航条为影片剪辑实例 on release loadMovieNum 内部结构 swf 0 20 43 39 82 制作其他4个功能模块影片 1 功能模块1 延展性 swf on release