Flash课件的设计与制作.ppt

Flash课件的设计与制作,Flash课件的设计与制作,一、 FLASH CS4简介,1、运行Flash程序，进入开始页。,一、FLASH CS4简介,2、Flash CS4的工作界面 选择创建文件类型后，进入主界面，包括菜单栏 、工具箱、舞台与标尺、时间轴面板与浮动面板。,一、FLASH CS4简介,3、工具箱中新增的工具： （1）3D旋转工具 （2）3D平移工具 （3）基本矩形工具 （4）基本椭圆工具 （5）Deco工具 （6）骨骼工具 （7）绑定工具,4、FLASH CS4的新功能 基于对象的动画使补间动画直接应用于对象而不是关键帧。 新增的3D平移与旋转工具可以对对象进行三维模式的动画处理。 新增的动画预设面板，可以快速创建动画效果。 新增的骨骼工具可以创建反向运动效果。 新增的Deco工具可以进行装饰性绘画。,一、FLASH CS4简介,1、课件文字、图形图像素材的设计的基本原理 文字内容要简明扼要、清晰明了 文字的字体要协调，位置大小要安排合理 图形图像的设计要满足教学内容表达的要求 色彩基调要统一，整体风格要协调,二、课件文字、图形图像素材的设计与制作,2、课件图形图像素材的设计与制作 使用新的绘图工具“基本椭圆工具”，以及矩形工具和文本工具绘制以下图形：,二、课件文字、图形图像素材的设计与制作,制作过程： 1、选择矩形工具绘制黑色矩形条，注意在工具箱最下方选择“对象绘制”。 2、选择任意变形工具，将中心点移到矩形下方。 3、按住Ctrl+T，打开变形面板，设置旋转角度为15度，点击“重置选区和变形”按钮，复制多个矩形条。 4、打开标尺，拖出2条互相垂直的辅助线，让其在矩形的中心点处相交。 5、选择“基本椭圆工具”，在辅助线的交点处按住Shift+Alt键，绘制正圆。在属性面板中，设置内径为50，开始角度为270。 6、导入位图，设置椭圆的笔触为黑色，填充颜色为位图。选择“渐变变形工具”，调整位图的大小。 7、输入文字，设置为垂直方向。按住Ctrl+B将文本分离2次，设置填充颜色为位图。 8、选择“任意变形工具”，使用“封套”改变文字的形状。,二、课件文字、图形图像素材的设计与制作,3、课件文字素材的设计与制作 将文字分离为图形，并设置柔滑填充边缘，制作彩虹文字效果：,二、课件文字、图形图像素材的设计与制作,制作过程： 1、将画布设置为黑色。 2、选择文本工具，输入文字“彩虹文字”，设置为白色。 3、按住Ctrl+B将文本分离2次，按住Ctrl+D将文本复制并移到下方。 4、选择上方的文字，在菜单中选择“修改”|“形状”|“柔化填充边缘”，在对话框中设置距离为10像素，步骤数为10。 5、按住Ctrl+G,可以组合文字。 6、选择下方的文字，设置填充颜色为彩虹色。 7、将下方的文字移动到上方，使两个文本对齐。,二、课件文字、图形图像素材的设计与制作,三、课件动画素材的设计与制作,1.逐帧动画的应用 逐帧动画（Frame By Frame），这是一种常见的动画形式，它的原理是在“连续的关键帧”中分解动画动作，也就是每一帧中的内容不同，连续播放而成动画。 逐帧动画在时间帧上表现为连续出现的关键帧；或者是非连续出现的关键帧。,2.补间形状动画的应用 在一个关键帧中绘制一个形状，然后在另一个关键帧中更改该形状或绘制另一个形状，Flash 根据二者之间的帧的值或形状来创建的动画被称为“补间形状动画”。 形状补间动画建好后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一个长长的箭头。,三、课件动画素材的设计与制作,使用形状提示 在“起始形状”和“结束形状”中添加相对应的“参考点”，使Flash在计算变形过渡时依一定的规则进行，从而较有效地控制变形过程。 先在形状补间动画的开始帧上单击一下，再执行“修改”|“形状”|“添加形状提示”命令，该帧的形状上就会增加一个带字母的红色圆圈，相应地，在结束帧形状中也会出现一个“提示圆圈”，用鼠标左键单击并分别按住这2个“提示圆圈”，放置在适当位置，安放成功后开始帧上的“提示圆圈”变为黄色，结束帧上的“提示圆圈”变为绿色，安放不成功或不在一条曲线上时，“提示圆圈”颜色不变。,三、课件动画素材的设计与制作,3、传统补间动画的应用 所谓“传统补间动画”，是相对于Flash CS4提供的全新的动画方式“补间动画”而言的。它指的是，在一个关键帧上放置一个元件，然后在另一个关键帧改变这个元件的大小、颜色、位置、透明度等，Flash 根据二者之间的帧的值创建的动画。 与补间形状动画不同的是，构成传统补间动画的元素是元件，包括影片剪辑、图形元件、按钮、文字、位图、组合等等，但不能是形状，只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”。 传统补间动画建立后，时间轴面板的背景色变为淡紫色，在起始帧和结束帧之间有一个长长的箭头。,三、课件动画素材的设计与制作,4.补间动画的应用 补间动画是Flash CS4提供的全新补间动画方式，是指通过为一个帧中的对象属性指定一个值并为另一个帧中的相同对象的属性指定另一个值创建的动画。Flash会计算这两个帧之间该属性的值。 传统的补间动画是由关键帧组成的，而补间动画则是由属性关键帧组成的。属性关键帧是在补间范围中为补间目标对象显示定义一个或多个属性值的帧。属性关键帧是以小菱形图标来表示的，但是补间的第一帧例外，它是默认的属性关键帧，以黑色圆点表示。能够创建补间动画的对象包括图形元件、按钮元件、影片剪辑元件以及文字。补间动画中可记录对象的属性包括位置、倾斜、缩放、颜色、旋转、滤镜等。若要在文本上创建补间颜色效果，就必须先把文本转换为元件。滤镜属性不包括应用于图形元件的滤镜。 补间动画建立后，时间轴面板的背景色变为淡蓝色，在起始帧和结束帧之间有若干个小菱形图标。,三、课件动画素材的设计与制作,在时间轴面板的右边有一个“动画编辑器”面板。通过该面板可以查看当前选中的补间属性及其属性关键帧。它还提供了向补间中添加具体属性值的工具，可以精确快速地控制动画的属性调整。,三、课件动画素材的设计与制作,三、课件动画素材的设计与制作,补间动画实例：,三、课件动画素材的设计与制作,分别使用传统补间动画和补间动画制作以下实例， 体会2种动画形式的区别：,制作过程： 1、使用矩形工具绘制下坡图形。 2、新建图形元件命名为“球”，绘制正圆，设置放射状渐变填充。 3、新建图层，将“球”拖入画布中，在第20帧和第40帧插入关键帧。 4、在第20帧将球移到下坡处，在第40帧将球移到最右边，分别创建传统补间动画。在第1到20帧设置缓动值为-100，在第20到40帧设置缓动值为100。 5、新建图层，在第41帧插入关键帧，将“球”拖入画布中，在第60帧插入帧，创建补间动画，然后将球移到下坡处，然后设置缓动值为-100。 6、新建图层，在第60帧插入关键帧，将“球”拖入画布中并放到下坡处，在第80帧插入帧，创建补间动画，然后将球移到最右边，然后设置缓动值为100。,二、课件文字、图形图像素材的设计与制作,三、课件动画素材的设计与制作,5.引导层动画的应用 一个最基本“引导路径动画”由两个图层组成，上面一层是“引导层”，下面一层是“被引导层”，同普通图层一样。 在普通图层上点右键，选择“添加传统运动引导层”，该层的上面就会添加一个引导层，同时该普通层缩进成为“被引导层”，如图所示，“图层1”是被引导层，而“图层3”是普通图层。,三、课件动画素材的设计与制作,引导层动画实例：,制作过程： 1、导入素材图片，拖入画布中。 2、新建图层，绘制无填充色的椭圆， 按住Ctrl+T，打开变形面板，设置旋转角度为45度，点击“重置选区和变形”按钮，复制3个椭圆。 3、新建图形元件命名为“球”，绘制放射状渐变填充的圆形。 4、新建图层，将“球”拖入画布。 5、添加“传统运动引导层”，将“图层1”中的一个椭圆复制并粘贴到当前位置，用橡皮擦擦掉一个小口，在第50帧插入帧。 6、在“球”所在图层的第50帧插入关键帧，将球移动到椭圆的开口处。并创建传统补间动画。 7、其他的球体动画做法类似。,二、课件文字、图形图像素材的设计与制作,三、课件动画素材的设计与制作,5.遮罩动画的应用 遮罩层上的对象可以看作是孔，透过孔可以看见被遮罩的层。 在Flash中没有一个专门的按钮来创建遮罩层，遮罩层其实是由普通图层转化的。只要在某个图层上单击右键，在弹出菜单中选择“遮罩层”，使命令的左边出现一个小勾，该图层就会生成遮罩层，“层图标”就会从普通层图标变为遮罩层图标，系统会自动把遮罩层下面的一层关联为“被遮罩层”，在缩进的同时图标变为。如图所示，其中“图层2”为遮罩层，“图层1”为被遮罩层，“图层3”为普通图层。,三、课件动画素材的设计与制作,遮罩动画实例：,制作过程： 导入所有的位图到库中。 将第一幅位图拖入舞台，作为被遮罩层。 新建图层，第1帧到第20帧制作圆形由小到大，直至遮住全部位图的补间形状动画，将此层设置为遮罩层。 新建图层，拖入第一幅位图，将其转换为元件，降低其亮度，并将该层拖到最下面。 在被遮罩层中插入关键帧，拖入第二幅图片。 在遮罩层中插入关键帧，第21帧到第40帧制作矩形从左到右，直至遮住全部位图的补间形状动画。 在最下面的图层插入关键帧，将第一幅图放入其中。 以此类推，制作其他切换效果。,三、课件动画素材的设计与制作,制作简易按钮：,四、按钮和菜单素材的设计与制作,2、给按钮元件添加动作 （1）应用ActionScript2.0为按钮添加动作 脚本模式如下： On(事件名称) 接收事件后触发动作执行的程序； 按钮事件通常包含下列种状态： press在鼠标指针经过按钮时按下鼠标按钮。 release在鼠标指针经过按钮时释放鼠标按钮。 releaseOutside当鼠标指针在按钮之内时按下按钮后，将鼠标指针移到按钮之外，此时释放鼠标按钮。 rollOut鼠标指针滑出按钮区域。 rollOver鼠标指针滑过按钮。 dragOut在鼠标指针滑过按钮时按下鼠标按钮，然后滑出此按钮区域。 dragOver在鼠标指针滑过按钮时按下鼠标按钮，然后滑出此按钮，再滑回此按钮。 keyPress (key)按下指定的键。,四、按钮和菜单素材的设计与制作,举例说明：用按钮控制影片的播放和停止。 在播放按钮上添加语句： on(release) play(); 在停止按钮上添加语句： on(release) stop(); ,四、按钮和菜单素材的设计与制作,（2）应用ActionScript3.0为按钮添加动作 事件侦听器也就是以前版本中的事件处理函数，是事件的处理者，负责接受事件携带的信息，并在接受到该事件之后执行事件处理函数体内的代码。 添加事件侦听的过程有两步：第一步是使用addEventListener()方法在事件目标或者任何的显示对象上注册侦听器函数，第二步是创建一个事件侦听函数。 在ActionScript3.0之前的语言版本中，常常使用on(press)或者onClipEvent(mousedown)等方法来处理鼠标事件。而在ActionScript3.0中，统一使用MouseEvent类来管理鼠标事件。在使用过程中，无论是按钮还是影片事件，统一使用addEventListener注册鼠标事件。此外，若在类中定义鼠标事件，则需要先引入(import)flash.events.MouseEvent类。,四、按钮和菜单素材的设计与制作,MouseEvent类定义了10中常见的鼠标事件，具体如下： CLICK：定义鼠标单击事件 DOUBLE_CLICK：定义鼠标双击事件 MOUSE_DOWN：定义鼠标按下事件 MOUSE_MOVE：定义鼠标移动事件 MOUSE_OUT：定义鼠标移出事件 MOUSE_OVER：定义鼠标移过事件 MOUSE_UP：定义鼠标提起事件 MOUSE_WHEEL：定鼠标滚轴滚动触发事件 ROLL_OUT：定义鼠标滑入事件 ROLL_OVER：定义鼠标滑出事件,四、按钮和菜单素材的设计与制作,ActionScript3.0的按钮动作不再直接添加到按钮元件实例上，而是添加到帧，通过事件侦听器跟踪鼠标行动对按钮的操作事件，依靠侦听器响应事件。脚本模式如下： /注册侦听器 按钮实例名称. addEventListener(MouseEvent.鼠标事件类别，侦听器名称)； /创建侦听器函数 function 侦听器名称(evt:事件类型)：void 事件发生时的动作 语法格式说明如下： 侦听器名称：要定义的事件侦听器的名称，命名需符合变量命名规则。 evt:事件侦听器参数，可以自己命名。 事件类型：Event类实例或其子类的实例。 void：返回值必须为空。,四、按钮和菜单素材的设计与制作,举例说明：用按钮控制影片的播放和停止。 将播放按钮命名为play_btn, 将停止按钮命名为stop_btn,在第1帧中添加语句： play_btn.addEventListener(MouseEvent.CLICK,btn1); function btn1(event:MouseEvent) play(); stop_btn.addEventListener(MouseEvent.CLICK,btn2); function btn2(event:MouseEvent) stop(); ,四、按钮和菜单素材的设计与制作,练习： 分别用ActionScript2.0与ActionScript3.0语句控制影片的播放、停止、上一帧、下一帧、跳转到某一帧并播放、跳转到某一帧并停止。,四、按钮和菜单素材的设计与制作,本章结束,