第一周 初识FLASH 教学时间:第一周 教学目标:熟悉FLASH的工作环境,掌握最基本的概念 教学重难点:层和元件的概念及简单运用 教学过程: 一、FLASH特点: 使用矢量图形和流式播放技术。矢量图形可以任意缩放尺寸而不影响图形的质量;流式播放技术使得动画可以边播放边下载, 通过使用关键帧和图符使得所生成的动画(.swf)文件非常小,几K字节的动画文件已经可以实现许多令人心动的动画效果, 把音乐,动画,声效,交互方式融合在一起,越来越多的人已经把Flash作为网页动画设计的首选工具。 强大的动画编辑功能使得设计者可以随心所欲地设计出高品质的动画,通过ACTION和FS COMMAND可以实现交互性,使Flash具有更大的设计自由度,另外,它与当今最流行的网页设计工具Dreamweaver配合默契,可以直接嵌入网页的任一位置,非常方便。 总之,Flash已经慢慢成为网页动画的标准,成为一种新兴的技术发展方向。 二、熟悉工作环境 1、主要分为 舞台 就是工作区,最主要的可编辑区域。在这里可以直接绘图,或者导入外部图形文件进行安排编辑。就像演员表演的舞台,动画呈现在舞台上,超出舞台的区域就为不可见,也就是幕后,FLASH动画也要十分注重舞台和幕后的共同设计。 时间轴窗口 用它可以调整电影的播放速度,并把不同的图形作品放在不同图层的相应帧里,以安排电影内容播放的顺序。 绘图工具栏 放置了可供图形和文本编辑的各种工具,用这些工具可以绘图,选取,喷涂,修改以及编排文字,还有些工具可以改变查看工作区的方式。在选择了某一工具时,其所对应的修改器(Modifier)也会在工具条下面的位置出现,修改器的作用是改变相应工具对图形处理的效果。 标准工具栏 列出了大部分最常用的文件操作,打印,剪贴板,撤消和重做,修改器以及控制舞台放大比例的图标和选项,便于进行更为快捷的操作。 图库窗口 用以存放可以重复使用的称为符号的元素。符号的类型包括有图片(Graphics),按钮(Button)和电影片断(Movie Clip)。其调用的快捷键为Ctrl-L。学习FLASH也要养成良好的习惯,其中建立元件就是最基本也是最重要的,元件存放在图库中,这样便与元件的重复使用以及统一修改。 控制器面板 控制电影的播放操作的工具集合(包括影片的前进后退暂停等),一般不大常用,处于隐藏状态。 2、逐步介绍各个区域 (1) 时间轴 时间轴(Timeline)是Flash中最重要的工具之一。用它可以查看每一帧的情况,调整动画播放的速度,安排帧的内容,改变帧与帧之间的关系,从而实现不同效果的动画。 状态栏中的 为洋葱皮(Onion skin)按钮,其作用是在显示播放头所在帧内容的同时显示其前后数帧的内容。当点击该按钮时,播放头周围会出现方括号形状的标记,其中所包含的帧都会显示出来,这将有利于我们观察不同帧之间的图形变化过程。 和 的作用一样,只不过它只显示各帧图形的轮廓线。当我们需要同时编辑多个帧时,按下按钮就可以了,但要注意,它只对帧-帧动画有效,而对渐变动画无效,因为渐变动画是通过定义关键帧再插值的方法实现的,所以其中内插的帧是无法编辑的。 是洋葱皮修改器,用于改变洋葱皮的状态和设置。其后的三个数字分别为当前播放头所在帧号,动画播放速度以及以此速度从头播放到当前帧所需的时间。 时间轴窗口右上角的 可以用来调整时间每个单元格的宽窄大小,各人可根据自己的喜好,动画的长短等因素进行修改,以便于实际操作。 (2)元件和层概念及运用 在讲动画形式之前先讲元件和库的概念,教学生建立元件的方法及必要性。(实例yuanjian) 空心小圆圈表示空白的关键帧,没有内容,例如在新建一个动画文件时出现。 先建立一个元件,然后在场景中拉入元件 拉入后成实心点,有内容就成了实心点 单独的关键帧为一黑色圆点,后面为灰色表明其后各帧的内容与其一致,没有变化。 实例分析:背景色的设置;相同小球的组合绘制 要点:选择工具的使用(任意变形和整体选择操作) 圆形的绘制(shift画正圆); 建立元件(元件的概念)组合 CTRL+G 打散 CTRL+B 直线工具的使用 元件主要有两个优点:可以重复使用和统一修改 介绍元件建立的两个方法:插入――建立新元件或者选择对象转换为元件。 (3)图层:通过实例ceng及clx掌握图层 关于图层(Layer)的概念,学过Photoshop的人都不会陌生。形象地说,图层可以看成是叠放在一起的透明的胶片,如果层上没有任何东西的话,你就可以透过它直接看到下一层。所以我们可以根据需要,在不同层上编辑不同的动画而互不影响,并在放映时得到合成的效果。使用图层并不会增加动画文件的大小,相反它可以更好帮助我们安排和组织图形,文字和动画。图层是Flash中最基本而且重要的内容,因而需要很好地掌握: 在实例(ceng)中学习下面的知识。左图是一个典型的图层例子,图中所示共有十一个层。其中用黑色标识带有一支铅笔标志的层为当前正在编辑的层。如果该层不能被编辑,则会显示 图标。在这些层右上方有三个图标,其中 可以控制该层是否被显示,默认状态为正常显示,在对应下方用 表示,如果点击这个黑点,则会出现,同时该层被隐藏,隐藏的层不能被编辑。 用来控制是否锁住该层,被锁住的层可以正常显示,但不能被编辑,这样在你编辑其它层时,可以利用这一层作参考,而不会误改了这一层的内容。可以控制是否将层以轮廓线方式显示,点击对应的黑点,会出现 ,再点一次恢复正常。这几个功能可以同时起作用。 (4)动画形式 分为运动动画和渐变动画 运动动画:例如一个小球从左边运动到右边 表示运动渐变动画,关键帧用黑色的圆点标识,内插帧用黑色的实线表示,背景为淡紫色(浅蓝色)。 虚线说明中间的过渡存在错误,无法正确实现内插。 两个例子:一个是小球位置的改变,另一个是颜色透明度的改变。 渐变动画:例如圆变方块! 表示变形过渡动画,关键帧用黑色的圆点标识,内插帧用黑色的实线表示,背景为淡绿色。 同样如果中间出现错误,也会出现虚线! 主要是两个例子,圆变方块和英文字变中文 其中要注意对象要打散,文字要打散两次。比较和补间动画的区别。 下面两个略作了解 字母a表示该帧已通过帧属性对话框指定了action。关于action以后会详细介绍。 小红旗表明该帧有标签或注解。 三、小结 通过本次课的学习,学生要理解并掌握元件和层的概念及简单运用。要注意以下几点: 1. 元件存在库中,方便重复使用和统一修改 2. 一个元件对应一层 3. 层之间上下叠放,可改变顺序 4. 动画的两种形式,补间动画包括位置和颜色透明度的改变。形状动画要注意对象要打散,其中文字的打散要用两次CTRL+B。 教学时间: 第2周 教学目标:1、复习巩固FLASH中最基本的概念(元件、图层) 2、掌握两种动画形式:补间动画和渐变动画 3、掌握时间轴上帧的操作(插入、删除等) 教学重点:应用工具画图,并制作动画 教学过程: 一、 复习巩固 主要是在上周的基础上完成进一步动画 做完的同学可以进一步练习两种动画形式,主要为物体透明度的改变和文字的变形。 记住三句口决: 1、 一个对象一层 2、 一般一个对象要转换为元件 3、 在形状动画中不要建立元件,对象要打散 二、 实例运用1 上节课已经学习了两种最基本的动画形式,这次课我们就先来综合运用一下。 实例1 哭脸变笑脸 1、 先给学生看最后的效果 2、 分析 要分为几层? 五层 脸、眼眶、嘴、左眼、右眼 为什么要用5层? 嘴一层 要进行动画制作,因此要单独一层 左右眼珠分两层,眼睛看起来灵活些,也更方便些 几个注意的地方: 线条的粗细可调整;对象的大小可调整(直接修改数值比较精确);对象要对齐可用吸附工具,也可以借辅助线用方向键进行微调整;嘴是要变形的,打散状态(右键-分离 弧线才可变形,选中的对象不能改动);F5普通帧(删除帧),F6关键帧(清除关键帧),补间动画FLASH自动生成。 思考:眼睛怎么转动? ―――元件的运动。 分析:眼珠要四周转动,需要四个关键帧 三、 综合实例 1、 看实例2 进行分析:主要是混色器的使用 关键步骤:先画一个圆,线条可调整; 选择渐变的圆,在混色器中进行调整(小块往下拉就删除),调整到合适的效果(用颜料桶填充); 要做圆环,在大圆中再画一个小圆,小圆在选中状态下可以改变位置,调整大小等。(要注意,放开就不能改了)。改变大小时,SHIFT是左上角调整,ALT则是以圆心调整; 要做成补间动画(形状动画也是成立的,但没什么效果。自己要多试,可以意外发现一些效果) 补间动画 顺时针 40帧 循环3次(24帧为1秒) 思考字母变形的做法(结合上次课的练习) 四、 学生动手创作教师节贺卡(有样例3)(20’) 要求学生充分发挥自己的想象力,动手制作一张贺卡 主要包括几方面的内容: 1、 文字的移动 2、 文字的旋转移动 3、 文字的渐隐(透明度的变化) 4、 简单的动作设置(stop) 五、 小结 通过本次课的学习,我们复习并巩固了FLASH的两种基本动画形式,以及运用了层来更好地表现动画。 基本工具的应用 教学时间: 第3周 教学目标: 1、要求学生掌握渐变工具、多角星形工具、墨水瓶工具、文字工具的使用。 2、要求学生掌握修改菜单中的位图、元件、形状的菜单项。 3、掌握如何制作基本图形:圆环、星星、月亮、太阳、空心文字、门、窗、建筑物。 4、掌握位图的导入及矢量图的转换。 教学重点:基本图形的制作;如何导入和转换图片。 教学过程: 一、 复习巩固 1、 完成上次的作业(哭脸变笑脸的的例子和转动的圆环) 上传作业(新的FTP账号的使用,要求上传原文件)。 二、 新课引入 思考一下这个圆环是怎么做的?(实例1) 分析: 1、 我们可以用上节课讲的大圆里画小圆的方法来完成,不过可能觉得还是有些麻烦的,上节课是为了特殊的渐变效果才用那种方法的,现在再介绍另一种方法: 2、 关键步骤 选择圆形工具,边线设置为七彩色,线条粗细调节好(要做成一个环,数值比较大),填充色设为白色; 选中圆环,修改-形状-线条转为填充色; 墨水瓶工具填充线条; 注意点:修改-形状-线条转为填充色,否则无法实现(会把七彩色盖掉) 三、 实例教学 1、多边形工具的使用(实例2) 太阳的制作主要步骤: 选择矩形工具下面的小箭头,选择多边形工具,在选项中进行设置,样式:星形 边数 10 星形顶点大小 0.5(数量越小就越尖) 可以具体演示两种效果,让学生比较掌握; 填充色设为黄色渐变(渐变工具的再一次复习巩固); 画一个深黄色的圆,在上面画上眼睛和嘴(变形工具的使用复习) 有时间的同学自己创作画月亮(实例3) 几点注意:月牙形的绘制;墨水瓶工具的填充线条 3、 综合实例制作(实例4) 分析: 整个动画分为三个主要部分(星星、高楼和汽车),一个个来制作 星星影片制作: 首先,绘制一个星星(图形元件),主要步骤同多边形的绘制; 再建立一个影片元件,名为闪动的星,注意区别影片元件和图形元件(参看足球的转动),让学生注意观察标记不一样 记住一句口诀:元件可改变颜色、透明度、大小等,都不会改变元件本身(可通过星星的制作具体演示) 关键步骤: 画好星星后,新建一个影片元件,改变星星的透明度作一个补间动画,即为星星的闪烁; 复制一个影片,然后在此基础上修改,上一个是由亮到暗,这一个就是由暗到亮,这样可心使星星看起来闪动自然些; 星星这个影片做好后,让学生动手做星星。 建筑物的制作: 新建一个元件,画一个褐色填充黑框的房框 再建一个元件,画一个白色填充黑框的窗户,通过复制粘贴,做成4个窗口。然后选中4个窗口运用修改-对齐-顶端对齐和宽度均匀分布,使4个窗口排列整齐。通过复制(按CTRL拖动),画好多排多列窗口,一列选中调整对齐。其他几列操作也同。 选中所有窗口,按SHIFT,不选外框,然后把窗口设为灰色,再选几个设为黄色(以上的修改都是元件的修改运用) 另外一幢楼也是复制,然后进行修改,同样用了元件的修改。 这个制作要特别注意的是对齐工具的应用。 回到场景中,星星一层,高楼一层,再另换一层,画路基(直线工具) 要注意视觉上的真实感,按照路基的倾斜度调整高楼的形状。 汽车的制作: 主要是图片的转换 新建一个元件,导入汽车的图片,把位图转换为矢量图; 对图片进行处理,删掉白色的部分; 回到场景中,汽车也新建一层,然后就做汽车的补间动画,使汽车开动起来。 小结: 1、 多边工具的使用 2、 元件的属性修改应用(包括大小、颜色和透明度等) 3、 对齐的使用 4、 位图转为矢量图 第四周 直线运动和绘图工具 教学时间: 第4周 教学目标: 要求学生掌握直线运动的补间。 2、掌握实例的编辑修改。 3、掌握铅笔工具及钢笔工具。 4、制作夜色中行驶的汽车、动感片头的制作 教学重点:教学重点:铅笔、钢笔工具的灵活使用 教学过程: 一、 复习巩固 实例――夜色中行进的车 内容回顾 在上节课中已经完成了动画的一部分,星星的制作相信大部分同学已经学会了,接下来一部分同学还没完成高楼的制作,我们说要注意对齐工具的运用。 出现的问题 在画楼的时候很多同学都出现这样的问题,楼不能改变,这主要是元件没建好,一般是要有三人元件,一个是窗户,一个是房框,还要一个就是两者结合的楼。这样改变的时候其实是改变房框的形状。 二、 进一步完成实例 1、 汽车的运动 这里主要掌握知识点是位图转化为矢量图(修改-位图-转换位图为矢量图),把白色的部分删掉,把汽车放到场景中,制作汽车的运动。主要要注意起点和终点关键帧的设置。 2、 路面、一些线的绘制 主要掌握钢笔、铅笔工具等绘图工具的使用 方法有多种,老师教的只是其中一种,大家都可以根据自己对绘图工具的使用,来完成各种绘制。 路面的绘制 可以先画一个矩形(无边,灰色填充),然后用部分选取工具改变,使成为自己想要的范围 线的绘制 主要是中间一条灰色的线,有两种方法 方法一 由于并不要求很精确,可以先画完直线,然后再用橡皮工具擦掉中间不要的部分 方法二 可以把线条形式改为虚线,在自定义处可以进行修改(前面一个数值代表实线的长度,后面的表示中间空的地方的长度,一般为35,8) 3、 画完这些线后,我们可以来看一下汽车是否沿着线开,可以根据线的倾斜度,调整一下汽车的起点和终点位置。 三、 实例-标志动画的制作 1、 先画静止的画面(实例) 分析: 主要分为三部分 边、文本和图形 边的绘制比较简单,让学生自己完成; 字母的输入也不难,主要是设置多种字体,这里为三种,可以根据自己的喜好,任意设置三种字体,同时可以调整其大小。 主要是图形的绘制 菱形的绘制只要画好一个矩形,然后旋转一下就可以了 关于旁边一个无规则图形的绘制,主要应用钢笔工具,来画出自己所想要的形状 2、 让标志动画动起来(实例) 我们做每个动画之前先要对这个动画进行分析,哪些是动的,哪些是静的,动的又是怎么动的?(回想一下以前学过的一些动画形式,到这里应该怎么做) 宗旨:不管用了什么方法,只要把效果做出来就好,同学们可以把自己所学的东西融会贯通,方法不是只有一种,老师介绍的方法是比较常用的,并不一定是最好的,大家可以通过多动手,或许就会发现更好的方法。学多了就会灵活运用,举一反三了! 我们仔细观察动画有几层,一般就是要做几个运动 第一, 边是静止不动的,因此我们只要画好放在那里就行 第二, 按动画动起来的顺序来看,菱形是最先动的,主要透明度的改变和旋转,这个并不难,学生应该已经掌握了,稍加分析即可。 第三, 第二个图形在菱形还在动的时候就出现了,所以要在菱形变化有中间过程中开始做动画,主要是透明度有改变,后阶段是有和无之间的转变,主要通过插空白帧来实现。 第四, 字母J是从上往下运动的,字符串esting,是从右往左运动的,还有co ltd则是和上面的图形一样,在有无之间的转变,方法同上。 到些,我们的动画基本就完成了,从中可以发现其实动画并不难,要通过我们的分析以及创造力来完成精彩的动画,我们在做的时候可以充分发挥自己的创造力,比比看谁的动画做得最精彩! 四、 小结 1、学会绘图工具的使用(直线和钢笔等工具) 2、运动的几种基本形式的综合运用 教学时间:2006年9月29日 第5周 教学课时:3节 教案序号:10-12 教学目标: 1、要求学生巩固椭圆工具、直线工具、填充工具、钢笔工具、变形工具、选取工具、墨水瓶工具、矩形工具的使用。 2、巩固图形元件、影片元件的创建。 3、巩固二类补间动画的特点。 4、巩固二类动画:变形动画、直线运动动画。 第五周 巩固与检测 一、 巩固复习 主要通过几个具体的实例来复习相关知识点 1、 使用多边形工具、钢笔工具绘制(实例1) 通过月亮和星星的画法,来巩固多边形工作和钢笔工作等画图工作的使用 主要知识点:月亮绘制(可用学过的多种方法,这里不再重复) 星星的绘制(多边形工具的应用。要注意设置,包括样式、边数、顶点大小等参数的设置) 2、 用矩形工具及变形工具制作一个立体建筑物,再用重复使用元件制作下列效果图,制作中要注意使用多图层,才能产生建筑之间的叠加效果。(实例2) 注意几点:一是元件的重复利用;二是要使用多层(一般一个楼一层) 三是利用CTRL工具进行楼房的形状调整,使其更具立体感。 主要步骤: 先观察楼房有两种形状,一种是普通的立方体,另一种是稍变形的,有透视效果,所以我们首先要建两个元件。 先建一个元件,分两层,一层画房框(用矩形工作),一层画窗户(请注意转化为元件,以便于调整)。 再在库中直接复制元件,然后在新元件中用按CTRL进行微调整 画好路面(略) 把两个元件根据需要拖出来,并调整好颜色,同时要注意分为多层,以便于叠加(有前后顺序) 背景色填充(渐变工作的使用) 3、 用二个关键帧制作变形效果(实例3) 此实例主要巩固学生对渐变填充工具的使用 动画分为两层,一层为背景,也是利用渐变填充(放射状) 另一层为变形动画的制作,即为星形变方形,要注意两个关键帧(即由什么变为什么),第一帧为星形。最后一帧为方形,中间创建形状动画。 4、 有时间的同学自己动手画画卡通烟囱(实例4) 二、 检测(两节课时间进行考试,一共三题,具体要求等详见index.html) 考试只是检测这一阶段的学习情况,老师根据同学中反映出来的问题,知道学生的掌握情况,对症下药,使大家尽快学会FLASH!创造出有自己特色的精彩动画! 第七周 文字特效制作 教学时间:第7周 教学目标: 1、复习巩固测试题。 2、掌握几类文字特效的制作。 教学重点:各类文字效果的制作 教学过程: 一、 测试分析 根据上次考试的具体情况进行小结点评 1、 先说明一下这次考试的概况,总的来说大家完成得都还不错,这次的题目并不难,基本上都是最基础的,而且还都讲过的,大部分同学都只可以独立完成。大家起点都差不多,只要肯努力,一定可以学好的,入门很快,进一步提高要靠自己,学得快的同学要不断努力,一定能出成绩。 2、 存在的一些问题: 小部分同学形状渐变还没掌握,可个别提问; 大部分同学侧面的调整做得不够好,细心调整即可; 个别同学星形变形不自然,原因是星形的边数问题,做的时候要看清要求,仔细研究; 注意生成swf文件(CTRL+ENTER); 要注意层的命名,养成良好的习惯 。 3、 表扬一些同学,并展示一下他们的作品(实例四个) 二、 文字特效制作实战 1、 阴影字的制作(实例1) 技术分析:阴影字分析主要为两层,一层是文字层,一层是阴影层,且阴影层在文字层下面一层;阴影层就是文字层的复制、变色及变形 主要步骤: 新建一层,打入文字FLASH; 再建一层,复制粘贴;(CTRL+SHIFT+V就是原位置的粘贴); 颜色和形状的调整 2、 浮雕字的制作(实例2) 技术分析:原理同阴影字的制作,分几层,通过颜色调整,做出浮雕效果 3、 打字效果的制作(实例3) 技术分析:文字要一个个出来,可以考虑用逐帧动画(请注意与补间动画的区别:补间动画是软件自动生成的) 主要步骤:先新建一层,导入背景图片; 再建一层,一共有21个文字,插入21个关键帧(F6); 在每一个关键帧处设置文字的个数,根据字打出来的效果,每帧依次多一个字。 4、 五彩旋转文字(实例4) 技术分析:文字的五彩填充,文字的旋转与缩放 主要步骤:新建一个元件,两次打散后,用七彩色填充; 建立一个动画,注意缩放和旋转的设置 学生可自己练习用中文字做五彩旋转文字,效果更明显些。 5、 光线字的制作(实例5)主要适用于掌握程度较好的学生 技术分析:文字的光线效果的绘制和元件的透明度的变化效果 主要步骤:新建一个元件,一个打散状态的字母和光线的效果,用直线绘制或者变形工具; 在一层中设置透明度的变化(由浅到深再到浅的过程); 其余做法同,为加强效果,要注意另外层的字母ABC的设置,一共有六层 6、 残影文字的制作(知识拓展) 主要是动作快的学生自己探索制作 提示:主要要几层文字的叠加效果,(每层文字的透明度设置不同,形成残影效果) 每层文字都设置成旋转动画,只不过开始有先后顺序,以致形成残影效果 三、 小结: 文字的效果很大就是应用几层文字不同状态的叠加效果以及动画的开始时间的不同来体现文字的变化,掌握了以上的要点同学们经过自己的创造一定能制作出更精彩的动画! 第八周 引导线的制作应用 教学时间:第8周 教学目标: 1、复习掌握几类文字特效的制作(包括发光字和残影效果) 2、了解引导线的概念 3、学会用引导线制作简单动画 教学过程: 一、 复习掌握文字特效 1、 大概说一下作业批改情况 2、 发光字体的制作 大部分同学把发光字体的动画过程都做出来了,说明大家对这部分掌握得还可以,还有同学没懂的及时问。大部分同学的共同点是字母没做好,上次说的矩形工具的微调整是一种方法,我们也可以用直线工具来画,然后用线性渐变填充。这样做出来的效果比较好,不会出现一些阴影被遮盖的现象,这是同学们最要注意的问题。当然也有个别同学做得比较好。 让学生把发光字体做完并上传。 3、 拓展题分析(实例) 在讲这前,先给学生10分钟左右的时间自学,看看自己动手能否做出来,然后再讲解,再让学生完成!在预习方面,同学们可以先看我的例子,自己想想应该怎么做,如果不会再仔细研究一下我的教案,不要急着问别的同学,思考过后再问,再听,效果会好不少。 残影效果的制作分析:影子有几个就是有几层,影子的出现就是每层元件的出现时间不同,即每层往后退一帧,残影渐渐变淡,就是每层的元件透明度的逐渐降低。 主要步骤:建立一个元件1,两次打散后,用七彩色填充; 复制元件,命名为2,在原来的基础上用墨水瓶工具描白边; 第一层放入元件1,完成补间动画,顺时针,1次左右; 第二层第二帧放入元件2,透明度设为85%, 动画同上; 同方法建层作动画,注意每层第一帧往后退一帧,元件透 度依次降低,一般10层左右; 注:在做新一层的时候不用重新拖入元件,可以用原位置复制元件(CTRL+SHIFT+V),然后再修改元件的透明度即可! 4、 对于基础比较好的同学在全部完成的基础上,可以先预习下节课引导线的内容,也可以做一些拓展练习! 二、 引导线的制作应用: 1、 新课导入:(实例1) 先看实例,小球的 无规则运动 分析,其实小球是按一定的路径运动的,这个路径是不可见的,但是能引导小球的运动,这就叫做引导线,其所在的层叫引导层(在运行时不可见) 主要步骤:新建一层引导层,用铅笔工具画任意不封闭曲线,就是运动路径 新建一个元件,画个小球,作为一个运动对象 再建一层,把小球拖来,第一帧把小球的圆心放到曲线的起点(会自动吸附),在30帧左右插关键帧,把小球的圆心放到曲线的终点,这就是小球运动的起始点和终点 注:要使小球沿着引导线运动,一定要在起点和终点位置,使小球吸附在引导线上,否则不会按引导线运动! 2、 学生能力拓展 完成快的同学可完成拓展练习1,层的原理类似于上次的残影效果制作 3、 引导线的初步应用(实例2) 技术分析:树叶的自由飘落其实就是运用了引导线的知识,树叶的飘落路径就是引导线的路径 主要步骤同上一题,要注意树叶的绘制可用直线工具加上任意变形即可。 动作快的同学可完成拓展练习2,注意:只要在上题的基础上多加几个层,作与上题一样的引导层即可,当然为了省时方便,可把树叶飘落作为一个影片剪辑,然后一个个拖到场景中即可,当然也要稍注意时间先后。 三、 引导线的进一步应用 1、 骑山车(实例3) 技术分析:车子的运动就是按路径的运动,山路就是路径 主要步骤:新建一个元件,用画图工具画好车和人 画好背景,包括山路 画引导线,只要复制已画好的山路即可(同路就是白色的线条) 把车的元件拖到场景中,起点和终点的设置对齐同上 在动画设置中选中“调整到路径”,车子才会比较自然地动,这是本例制作的关键! 2、 动作快的同学可以进一步制作山车,可以让车轮动起来!(拓展练习3) 简单提示:画好车轮动画设置为旋转即可! 四、 引导线的提高应用(拓展练习4) 主要是针对基础比较好的同学,字母就是引导线,要注意中间要断开,才能动起来,文字层用逐帧动画做(原理类似于以前做过的打字效果),才有字是写出来的感觉,以后我们学了遮照层就不会这么麻烦了! 第九周 按钮的制作一 教学时间:第9周 教学目标: 1、复习掌握引导线的应用 2、介绍按钮的作用 3、学会按钮的简单应用 教学过程: 一、 复习掌握引导线的应用 1、复习上节课的例子,提出一些完成过程中的问题 山坡的曲线的画法可用钢笔工具来画,具体演示下画法; 多片树叶下降,可用两种方法,一是使用影片剪辑,原理类似于以前学过的闪动的星星。还有一个方法是在引导层中可画多条引导线,引导层下面的图层只要在虚线中,均可被引导线引导。 2、复习上次课的引导线,主要通过实例来巩固(实例1) 技术分析:小球的跳动就是引导线(当然也可用以前的动画,多创建几个补间也可),猫的变化就是两张图片的变化 主要步骤:①先完成管的绘制,要注意前后面的分层,否则填充就会出问题,然后再完成阴影面的制作; ②画好引导线,为折线形式,红色小球沿引导线运动; ③猫的两种状态(睁眼和闭眼)小球没砸到时睁眼,快砸到时闭眼且后退(用交换元件做可保持位置不变) 拓展练习 蝴蝶飞舞(拓展练习1) 提示:挥动翅膀的蝴蝶作为一个影片剪辑,在这个影片剪辑中,把素材中的图片导入,每张图片一帧,表示蝴蝶的不同状态,其中要注意每张图片位置要对齐,方法有两个,一个是打开时间轴的“查看多个帧”,另一个是交换元件 3、圆环的制作(实例2) 为了进一步巩固引导线的动画,还要讲一个新的知识点,即小球绕圆环运动 技术分析:同样应用引导线做,关键是圆环的引导线是非闭合曲线,小球才能运动,技巧就是用橡皮把圆环打开缺口。 主要步骤:①先建一层,画一个圆(无填充) ②添加一层引导层,把圆复制,然后把引导层中的圆用橡皮等工具打开缺口,使圆环成为一个非闭合曲线(物体的运动是遵循就近原则,如果不断开,只会作就近小半圈的运动) ③小球的始末状态的设置,第一帧在缺口的一端,最后一帧在缺口的另一端。 思考:地球绕着太阳转(椭圆形轨道同上例) 拓展练习中的玩具火车的运动(单轨和8字形轨道,有兴趣的同学可以自己尝试一下) 二、 按钮的制作: 1、基本按钮的制作(实例3) 插入新元件,元件类型为按钮,即可见如下界面 一般在以上四种状态下放置四个不同的元件,即可制作出一个按钮效果。 下面以变形按钮为例介绍制作步骤。 ①插入新元件,元件类型为按钮,并命名该按钮为“变形” ②单击选中“弹起”,并绘制一个蓝色长方形 ③单击选中“指针经过”,按F6,并删除蓝色长方形,绘制一个绿色长方形 ④单击选中“按下”,按F6,并删除绿色长方形,绘制一个红色长方形 做完后查看效果,并据此讲解四种状态具体表现,其中第四个“点击”在此并不能体现出来,以后具体碰到再说,先掌握前面三种状态设置 2、用文字、图片、图形等作按钮(实例4) 在实例3的基础上演示文字作按钮,即在上面蓝色长方形的位置替换成文字就是文字按钮,演示一下即可,其中“点击”如果是实心的区域,比较容易选中 实例4分析:主要原理同上例,其中的水晶球可以自己画,也可以用提供的图片,同时也说明了按钮也可以用图片来做! 三、按钮的进一步制作应用 1、 简单的动态按钮(实例5) 技术分析:小球是在鼠标放在按钮时下落的,所以动作发生在按钮四种状态的“指针经过”状态,小球下落又是个运动状态,所以在“指针经过”状态放的不是图片之类的,而是一个影片剪辑(相当于一个小电影) 主要步骤:①新建一个影片剪辑,在里面做小球下落并且透明度改变的动画 ②新建一个按钮元件,在“弹起”状态中画上一个红色的长方形,在“指针经过”状态中放入我们已经做好的关于小球运动的影片剪辑 2、 动态按钮引申(实例6) 技术分析:这个动态按钮的制作基本原理同上例,只是按钮元件的第一种状态中是空帧,就是没放上去时不显示,也就是我们所说的隐形按钮,拖入到场景中按钮元件呈现出半透明状态。 3、 动态按钮综合实例应用(拓展练习二) 实例演示:礼花的绽放效果(鼠标点击,礼花绽放) 技术分析:鼠标点击引发的事件,即在按钮的,即为热区,按钮的动作就在这个热区触发。由于是鼠标点击下去才有礼花绽放的效果,所以在礼花绽放的影片剪辑中,第一帧是放入已做好热区的按钮。第二帧开始才是礼花绽放的动画,就是礼花这个图形的放大动画。然后在帧上及按钮上加上简单代码即可。 主要步骤:①新建一个按钮元件,在第四种状态“点击”中画一个实心区域(这里可画一个白色的长方形) ②新建一个影片剪辑,第一帧放入刚做好的按钮,因为不点击的时候事件(礼花绽放)不触发,第一帧加入动作stop,同时按钮的动作是点击就触发礼花绽放的事件,因此在按钮上加上动作on(press){gotoandplay(2);}这个动作语句可在动作面板中选择输入,不用自己输入(自己打入容易错,可用脚本校对) on(press){gotoandplay(2);} 意思是按下按钮,开始第二帧动作 ③在第二帧开始礼花的变化,导入礼花图片并转化为元件,然后作放大的动画 ④最后在场景中拖入已经完成的影片剪辑,注意在铺满整个场景,点击的时候才能保证无论点哪里都有礼花绽放,比较逼真些。铺满时可用多次复制粘贴。 思考:鼠标放上去礼花绽放怎么做?(拓展练习三) 提示:即在按钮的指针经过中放入影片元件 小结: 这节复习了引导线,以及新学了按钮的制作,在按钮的制作中要掌握以下几点: 按钮的四种状态的设置,明白各个状态的具体表现形式 学会用文字、图片等作按钮 学会动态按钮的制作,主要是影片剪辑的应用以及一些简单的动作 第十周 按钮的制作二 教学时间: 第10周 教学目标: 1、复习掌握简单按钮的应用 2、介绍一些简单的动作语句 3、学会按钮上的一些简单语句的应用 教学过程: 一、 复习掌握简单按钮的应用 1、 复习简单动态按钮的制作 主要通过一些实例的制作来巩固练习 先讲一下上节课存在的问题:在动态按钮中,我们说要制作一个影片剪辑,这个按钮才会动起来。有几个同学另外的都完成了,但是还是不会动,原因就是大家在制作元件的时候选了图形而不是影片剪辑,所以才使动画不动。我们只要把元件的类型转为影片剪辑就可以了,当然要重新放入到相应的地方才行,不然还是原来的那个。(可以通过实例来讲解,以后学生在做的过程中碰到这类问题就不用重新做过了,在原来的基础上稍作一下改动就可以。) 动态按钮巩固实例一 技术分析:结合上周课讲的动画和按钮结合来完成 第一个按钮为按下去后动画(字向两边扩散,并变淡)的出现; 第二个按钮是鼠标放上去后动画(字变大并变淡的效果)的出现。 大家可以根据平时所学的动画知识,应用到按钮中,可以充分发挥大家的想象力,作出各类按钮,这些按钮在我们以后各式网站的制作,特别是一些比较有特色的网站的制作中用的较多。 2、 综合按钮的制作(实例二) 技术分析:主要是背景的绘制以及按钮的动画(按钮放上去扩散效果)制作 主要步骤:①背景黑条的绘制,画两个圆角矩形叠加,删除重叠部分即可; ②小球的绘制,黑球上放白球,上面再写上字母e; ③按钮的制作,扩散效果的制作,小球填充效果第一帧用调色工具缩到最小,最后一帧用调色工具调到适当效果,创建变形动画; ④按钮的弹起状态中放入元件大圆和小圆以及数字,在指针经过中放上刚完成的扩散效果动画。(动画只要一次,用stop动作)在此要注意按钮中的分层,原理同普通的分层,我们可以把扩散动画放在下面一层,透过大圆展现出来。 ⑤按钮的小圆动画制作,绿色变色小球为背景,黄色的曲线作水平转动动画 二、简单动作介绍(按钮制作实例 源文件) 1、复习上节课的按钮,做出礼花实例三,比较发现问题,引入动作语句的应用 2、on动作命令 下面我们就详细地向大家介绍一下这八种事件的使用。 1、press 在鼠标指针经过按钮时按下鼠标按钮。单击press,然后选择动作语句,双击【全局函数】|【时间轴控制】中的play 命令。 完整的action是: on(press){ //设定鼠标事件为按下,然后执行大括号里面的语句。 play(); //按钮响应后执行play(播放)动作 } press动作 当然,在大括号里面还可以用其他的语句,比如说,gotoAndPlay(yourframe); //点击按钮后,就会从你设置的帧播放。 2、 release 在鼠标指针经过按钮时释放鼠标按钮。单击选择release然后与第一个事件相同加入play命令。完成的语句如下: on(release){ //当鼠标按下释放的时候,执行下面的语句动作。 play(); //按钮响应后执行play(播放)动作。 } release动作 可以看到,当鼠标左键按下按钮的时候,并没有激发播放动作,而是当鼠标左键放开的时候,执行了播放动作。这也是与“press”事件不同的地方。 3、releaseOutside 当鼠标指针在按钮之内时按下按钮后,将鼠标指针移到按钮之外,此时释放鼠标按钮。添加语句的方法同上。完整的语句如下: on (releaseOutside) { //当鼠标在按钮外部释放的时候执行下面的语句。 play(); //按钮响应后执行播放动作。 } releaseOutside动作 通过这个例子我们知道,当鼠标左键在按钮上按住并移动到按钮以外的地方放开后,触发了按钮的动作。这是一个具有非常想象力的事件,大家可以利用on的这个事件来制作游戏。 4、rollOver鼠标指针滑过按钮区域。制作方法同上,完整的as语句为: on(rollover){ //当鼠标滑动到按钮上时执行下面的动作。 play(); //按钮执行播放动作。 } rollOver动作 当鼠标指针从按钮上滑过的时候,动画就开始执行播放动作了,而不需要点击它。我们可以利用on的这个特点来制作一些图示板,非常简单有效。 5、rollOut 鼠标指针滑出按钮区域。制作方法同上,完整的as语句为: on(rollOut){ //当鼠标滑动到按钮上并离开时执行下面动作。 Play(): //按钮响应播放动作。 } rollOut动作 滑离与滑过并不是相同的,滑离是指鼠标滑动到按钮上并离开以后开始响应,而滑过是指只要鼠标滑到按钮上,就开始执行动作。 6、dragOver 在鼠标指针滑过按钮时按下鼠标按钮,然后滑出此按钮区域,再滑回此按钮。完整的as是: on(Drag Over){ //当鼠标拖过的时候执行下面的动作。 play(); //执行播放动作。 } dragOver动作 拖过的效果是在按钮上点击并按住鼠标不放,移出按扭区,再移回按钮上触发的事件。 7、dragOut 在鼠标指针滑过按钮时按下鼠标按钮,然后滑出此按钮。完整的as是: on (dragOut) { //当鼠标拖离按钮时执行下面的动作。 play(); //执行播放动作 } dragOut动作 拖离与拖过有所不同,只要在按钮上按住鼠标左键然后移动到按钮外就会响应。与滑离的区别在于拖离需要按住鼠标左键。 8、keyPress ("key") 按下指定的键。对于此参数的 key 部分,需指定键控代码或键常量。 我们在(“key”)中键入“p”。完整地as语句为: on (keyPress "p") { //当按下键盘中的“p”健时执行下面的动作。 play(); //执行播放动作 } 3、结合动态按钮综合实例应用来说明上述的动作语句(实例四) 实例演示:礼花的绽放效果(鼠标点击,礼花绽放) 技术分析:鼠标点击引发的事件,即在按钮的,即为热区,按钮的动作就在这个热区触发。由于是鼠标点击下去才有礼花绽放的效果,所以在礼花绽放的影片剪辑中,第一帧是放入已做好热区的按钮。第二帧开始才是礼花绽放的动画,就是礼花这个图形的放大动画。然后在帧上及按钮上加上简单代码即可。 主要步骤:①新建一个按钮元件,在第四种状态“点击”中画一个实心区域(这里可画一个白色的长方形) ②新建一个影片剪辑,第一帧放入刚做好的按钮,因为不点击的时候事件(礼花绽放)不触发,第一帧加入动作stop,同时按钮的动作是点击就触发礼花绽放的事件,因此在按钮上加上动作on(press){gotoandplay(2);}这个动作语句可在动作面板中选择输入,不用自己输入(自己打入容易错,可用脚本校对) on(press){gotoandplay(2);} 意思是按下按钮,开始第二帧动作 ③在第二帧开始礼花的变化,导入礼花图片并转化为元件,然后作放大的动画 ④最后在场景中拖入已经完成的影片剪辑,注意在铺满整个场景,点击的时候才能保证无论点哪里都有礼花绽放,比较逼真些。铺满时可用多次复制粘贴。 三、小结 注 意 ——在给动画作品添加按钮的时候应该放到单独一层,这样便于修改。 提 示 ——on为按钮上的动作,所以我们必须首先要选中按钮,以后才可以添加on语句。有的朋友在论坛里面提问,“为什么我的on为灰色不可选状态?”原因就是你没有选中按钮。 技 巧 ——在一般flash作品中,大家不会有意区分这些on的功能的,一般采用默认的语句。如果没有特殊说明,你使用了拖离,滑离等事件来制作“replay”按钮,会让人们摸不着头脑的。 试一试 ——我们了解了on得这么多的功能,利用这些功能可以轻易的制作出flash课件,flash游戏里面的效果,大家不妨试一试。 分 析——on语句的功能与按钮息息相关,有按钮的地方一定会有on语句的使用。而有flash作品的地方,就会有按钮的出现,所以说on的重要作用不可忽视。今天向大家详细地介绍了on的各种功能,我们就可以结合按钮自身的特点,发挥他们的功能。 第十一周 测试与遮照一 教学时间: 第11周 教学目标: 1、测试学生引导线与按钮掌握情况 2、介绍一遮照的基本概念 3、学会一些简单遮照效果的制作 教学过程: 一、 十月份达标测试 1、 主要内容为引导线与按钮的制作检测,考试题目当堂下发,时间是一节课(40分钟) 2、 进行简单分析 二、 课前热身 1、 通过回想以前做过的一些动画,把动画形式归纳如下: ① 直线动画(位置的改变,即为补间动画) ② 曲线动画(引导线) ③ 逐帧动画 ④ 旋转动画(元件) ⑤ 透明度改变动画(元件) ⑥ 形状动画(非元件,打散状态) ⑦ 缩放动画(元件) 2、 几种动画形式区分(实例)(用一些例子说明,让学生巩固基本的动画形式) 一般来说,我们的FLASH动画就是分为这几种形式,稍微复杂一点的动画无非就是这几种动画的结合,只要掌握了这几种基本动画,综合应用只要组合就可以了。 三、 遮照的制作 1、 新课的引入 观察教案上的TOP,思考:FLASH这几个字是一个会动的图片填充字效果。怎样才能动起来呢?这就是我们今天要讲的遮照。 我们说的遮照又是一种新的层形式,以前是引导层,现在又有了遮照层。遮照层相当于是一个窗口,遮照层下面的被遮照层上的内容就是透过这个窗口显现出来的。也就是说这个窗口是什么形状的,能看到的内容也是同窗口形状,在窗口以外的部分就无法透出来。 2、 具体演示教案上的效果制作 3、 遮照的应用:电影字幕的效果制作(实例一) 在看每个遮照动画时首先分析动画的是哪个层(遮照层还是被遮照层?) 技术分析:文字透出彩色,即为彩色是背景,通过文字透出来,因此要做动画的文字上移是做窗口的,即为我们所说的遮照层,同时我们的背景就是被遮照层。 主要步骤:①做好一个影片剪辑元件,内容为文字的上移; ②做好一个图形元件,内容为渐变的一个填充色; ③在场景中建好两个层,分别为遮照层和被遮照层(右键层,选择遮照层,下面一层会自动变为被遮照层); ④把各个元件放到相应的位置:影片剪辑元件(文字上移)放在遮照层,图形元件(渐变的填充色)放在被遮照层。 思考:完成的同学完成练习一 4、基础较好的同学在完成上面遮照的例子后,可以思考下下面这些效果用遮照怎么做?作为下周课的预习思考。 练习1 练习 2 练习3 四、 遮照应用小结: 我们在做遮照的时候要学会分析,搞清楚以下几个问题: ① 分析好哪一层是做“窗口”的,哪一层是通过窗口透出来的,哪一层是普通层,作为“底”而存在的? ② 动画是在遮照层还是被遮照层的? ③ 动画又是哪种动画? ④ 我们需要创建哪几个元件? 分析完后倒着做,先做好最基本的几个元件,注意元件类型(图形、按钮还是影片剪辑?)再建好层,注意层类型(遮照、被遮照还是普通层?),最后把最好的元件拖入到相对应的层中即可。 第十二周 基础知识复习及遮照应用二 教学时间: 第12周 教学目标:1、概括复习前面所学过的一些基础知识 2、按钮巩固练习 3、遮照基本应用复习 4、学会一些稍复杂遮照效果的制作 教学过程: 一、 测试分析及新知识的补充学习 1、 每位同学可以根据测验的点评,作好相应的订正工作 2、 主要存在问题(详见点评信息)其中白色背景还可以通过分离后有套索工作的魔棒去掉 3、 详细讲一遍第二题按钮的制作过程,要求每位同学完成,并上传(实例一) 技术分析:按钮两种状态指针经过和按下,指针经过处是小棒的旋转,按下是静止的。 主要步骤:①首先分析共有几个元件(圆、有边的圆、小棒、静止的小棒组合、旋转的小棒组、一个按钮); ②静止的小棒组合的画法:变形中设好角度后运用复制加以应用,就画好一周的小棒; ③在影片剪辑元件中做好小棒的旋转; ④把做好的元件拖到按钮相应的地方,旋转的小棒放入经过状态中,静止的放入按下状态中。 引导学生自己分析要做些哪些元件,包括哪些动画,然后按照学生的思路一步步做具体的操作演示。 学生自己完成,教师个别交流 4、 按钮实例完成后,补充一些按钮上的简单动作(实例二) 动作主要分为两种,一种是帧上的动作,一种是按钮的动作,大家做的时候要想清楚要做的动作是什么时候发生的,是在帧播放下去的过程发生的还是要对按钮做动作(比如按下)的时候发生的?搞清楚了这个,两种动作就不会混淆了。 按钮动作 超链接 on (press) {geturl(“网址”)} 方法:①在按钮上右键-动作,打开动作面板中,先设定按钮动作类型(on) 在全局函数的影片剪辑控制中,选择on,然后再选择press,不需要自己写语句②选好了动作,接下去就选择具体要激发的事件—链接到一个网站,选择全局函数的浏览器/网络,其中的geturl,在括号中的打上双引号,在输入要链接的网址即可。注:在本地打开swf文件时出现提示语句:“不能与本地网络进行通信”,放在具体的空间上就好了。 循环一次的帧动作 在动画的最后一帧上做动作,让动画播放一次就停下来,选中最后一帧 ,右键-动作,打开动作面板后,在全局函数中的时间轴控制中选择stop,就表示动画播放到这里就停下来了。好就是使我们的动画只播放一次,不会循环播放,这都是根据具体的需要设定的。 5、针对学生存在的问题进行讲解,可应用选择性广播教学,让已经懂的学生继续进行完成,或者做下面的练习,还不明白的学生进行第二次讲解。 二、基础知识复习 对照整理好的基础知识点进行讲解,主要是第四部分,知识点和技巧,复习太多,学生一下子又难以全掌握,先复习前面五点,并挑出一到二个知识点作为一节课前5-10分钟的练习。下周的考点:钢笔工具的应用 三、遮照概念的复习 上周我们第一次接触了遮照,大部分学生已经会做了最简单,最基本的遮照动画,但不一定是真正理解的基础上完成的,这次课再来进行进一步的巩固以及一些拓展。 概念:遮照也就是分为“遮”和“照”两个意思,在有文字或图形等的地方是“照”,即可从这个窗口(文字或图形)透出背景的内容,其余没有文字图片的地方就是“遮”,就把后面背景上的内容给遮起来了。 记住:遮照包含两层,遮照层和被遮照层,显示的就是两层的重叠部分,而具体显示的内容由被遮照层决定,即看到的是什么,那一层就是被遮照层。两层上均可做动画。 三、 遮照实例制作 1、光束扫射效果制作(实例三) 技术分析:文字是从光束中透过来的,因此光束在遮照层而文字是被遮照层,光束的扫射是一个旋转动画。 主要步骤:①做好一个图形元件,内容是一段白色的静态文字; ②做好一个图形元件,内容为用渐变填充的光束; ③做好一个影片剪辑元件,内容为光束的旋转动画; ④把各个元件放到相应位置:影片剪辑元件(光束转动)放在遮照层,图形元件(静态文字)放在被遮照层。 2、思考:完成练习一,比较和实例三的区别 从两个例子的比较中有更好地理解遮照动画 分析:第一个例子看到的是白色的静态的文字,所以文字在被遮照层 第二个例子看到的似乎是由白到黑色渐变的文字, 思考:我们到底看到的是不是文字?还是通过文字透过来的光束? 结论:看到的是光束,我们说过看到什么是由被遮照层决定的,文字仍是白色的,所以我们看到的不是文字,而是有黑白渐变的光束,只是通过文字这个窗口显现出来的。因此光束在被遮照层,即把两层交换即可。 注:要真正理解意思,而不是简单的两层互换! 思考:完成练习二 练习三 四、 拓展练习一点通 本周拓展练习的内容是“按钮反应”,主要运用到按钮上和帧上的动作。 分析:在鼠标放上去时按钮就往上移动,再放下去就往下,人们在场景中看到的是一个个包括有按钮的影片剪辑。影片剪辑中按钮有两个动画(从下到上和从上到下),在第一帧 和中间一帧分别加动作stop,表示鼠标没放上前,动作不激发。按钮上加动作on(rollover),表示鼠标经过,play,就表示经过后激发动作,即按钮从下到上运动。 五、 遮照应用小结: a) 在做遮照时要分清楚什么是遮照,什么是被遮照的? 关键记住显示的是两层的重叠部分,而具体显示的内容由被遮照层决定,即看到的是什么,那一层就是被遮照层。 b) 遮照层和被遮照层两层都可做动画,我们的动画是在哪一层? c) 很多时候遮照不只有两层,还有两个普通层,一个在被遮照层下,一般用作背景;还有一层在遮照层上,一般是做一些和遮照同步的动画,有些还可在遮照层的基础上再作加工,比如说一些放大镜的样子等 d) 分清楚遮照的这些概念以后,就可以用以前学过的知识做各类元件放在相应的层中,就可以做出我们需要的一些遮照效果。
|