Flash CS4的使用与实例.ppt_第1页
Flash CS4的使用与实例.ppt_第2页
Flash CS4的使用与实例.ppt_第3页
Flash CS4的使用与实例.ppt_第4页
Flash CS4的使用与实例.ppt_第5页
免费预览已结束,剩余158页可下载查看

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

第2章FlashCS4的使用与实例,2.1FlashCS4动画制作基础,Flash知识准备制作立方体文字载入效果,一、Flash知识准备,1.了解FlashFlash是美国Adobe公司推出的一个非常优秀的矢量动画制作软件,它是一种交互式动画设计工具,可以将文字、图片、视频、音乐、声效、动画以及富有新意的图形界面融合在一起,制作出高品质的网页动画效果。主要用制作制作动画短片、制作多媒体教学课件、制作游戏、制作MTV音乐片和制作网页。,一、Flash知识准备,2Flash动画的特点1)使用矢量图形2)采用流式播放技术3)文件体积小4)Flash动画具有交互性5)基于对象的动画,二、制作立方体,1.效果图,图2-1立方体效果图,二、制作立方体,2.思路分析1)FlashCS4基本功能操作界面,图2-2FlashCS4基本功能操作界面,二、制作立方体,2)文件操作新建文件:方法一:单击起始页中的Flash文件(ActionScript3.0)方法二:“文件”“新建”保存文件:“文件”“保存”命令或者“文件”“另存为”打开文件:“文件”“打开”关闭文件:“文件”“关闭”测试文件:控制”“测试影片”,二、制作立方体,关闭文件:“文件”“关闭”测试文件:控制”“测试影片”,二、制作立方体,3)绘图工具线条工具:使用“线条工具”可以方便地绘制出直线。单击工具箱中的“线条工具”按钮,将光标移动到舞台上,当光标变成“+”字形状后,按住鼠标左键不放并拖动,到达合适位置后释放鼠标左键,即可绘制一条直线。矩形工具:使用“矩形工具”可以绘制矩形和正方形。单击工具箱中的“矩形工具”按钮,“矩形工具”的属性面板如图2-3所示。,二、制作立方体,图2-3“矩形工具”的属性面板,图2-4“矩形工具”选项,二、制作立方体,选择工具选择工具是Flash工具箱中最常用的工具,用以选择对象、移动对象、复制对象和修改对象。任意变形工具任意变形工具用于对选中的对象进行缩放、变形和旋转等操作。,图2-5缩放,图2-6变形,图2-7旋转,二、制作立方体,颜料桶工具在FlashCS4中,使用“颜料桶”工具既可以填充空白的区域,也可以更改已涂色区域的颜色,并且还可以用纯色、渐变色以及位图进行填充。使用“颜料桶”工具填充颜色时,选设置使用“颜料桶”工具时闭合形状轮廓然后再填充颜色。,二、制作立方体,帧的种类,帧:在动画中随时间产生动画效果的单元叫“帧”。,普通帧:它是关键帧的延续,当播放到该处时显示和它前面的关键帧完全相同的内容。,关键帧:它的内容可以被编辑修改,用来记录帧内容的替换或性质的改变。,空白关键帧:指没有任何内容的关键帧,在编辑区中看不到任何画面。,空白普通帧:它是空白关键帧的延续,当播放到该处时不显示任何内容。,二、制作立方体,属性关键帧:它是FlashCS4新出现的一种新的关键帧,在对前面的某一帧制作了动画以后,当时间播放头处在它后面的某一帧时,对该层上的对象的大小、位置、颜色等属性进行任何调整后自动产生的关键帧,用来记录帧内容的属性的改变。在时间轴用实心的菱形小黑点表示。过渡帧:也称渐变帧,在动画制作作完成后,位于两个关键帧之间的帧。,二、制作立方体,3、方法步骤1)启动Flash。2)单击起始页中的Flash文件(ActionScript3.0),创建Flash文档。或者用菜单中的“文件”“新建”命令,新建一个Flash文件,选择“文件”“保存”命令,保存F1ash文件,取名为“立方体。“3)用“矩形工具”绘制矩形。,二、制作立方体,4)用“颜料桶”工具分别给正面、上面、和侧面填充以下颜色:蓝色(#0000FF)、红色(#FF0000)、黄色(#FFFF00)。5)用选择工具选择矩形的边框,按键删除。6)保存文件。,二、制作立方体,4、小结在Flash中,图形是制作丰富生动的动画基础,因此,用户要注重基本功的学习和训练,通过制作“立方体”这个案例,学习“工具箱”中各种工具的使用方法和技巧,同时能熟练地对文档进行操作。,三、文字载入效果多媒体技术与动画,1、效果图,图2-8文字载入效果图,2、思路分析1)Flash动画制作的原理动画的含义:物体在一定时间内发生的变化过程,包括动作、位置、颜色、形状、角度、透明度等的变化。动画的原理:利用人眼视觉停留的特性,将一幅幅图片以定的速度连续播放,给人以动画的感觉。2)帧的操作选取帧、插入帧、删除帧、移动帧、复制和粘贴关键帧、翻转帧,三、文字载入效果多媒体技术与动画,3)使用文本在FlashCS4中,文本类型可分为静态文本、动态文本和输入文本3种。静态文本:默认情况下创建的文本对象均为静态文本,它在影片的播放过程中不会进行动态改变,一般用于文本说明。动态文本:该文本对象中的内容可以动态改变,甚至可以随着影片的播放自动更新,一般用于比分或者计时器等方面的文字。输入文本:该文本对象在影片的播放过程中可以输入表单或调查表的文本等信息,一般在交互动画中使用。,三、文字载入效果多媒体技术与动画,4)分离图形分离图形是指将位图、文字或群组后的图形打散成一个个的像素点,以便对其中的一部分进行编辑。方法:“修改”“分离”或用快捷键分离文本,三、文字载入效果多媒体技术与动画,5)图层及常用操作一个图层,就像一张透明的纸,在上面可以绘制任何对象或书写任何文字。动画中的每一个层之间相互独立,有自己独立的时间轴,有自己独立的帧。每个图层上的对象按顺序叠放在一起,处在上一图层的对象可以遮挡住下面图层上的对象。常用操作:选择图层:在“图层”窗格中单击,选择需要编辑的图层;若要选择多个图层,可以先按住键不放,然后分别选择需要选中的图层即可。新建图层:在图层管理器中单击“新建图层”按钮,即可在当前选中的图层上方新建一个图层。,三、文字载入效果多媒体技术与动画,删除图层:选中要删除的图层,然后在“图层”窗格中单击左下角的“删除”按钮即可。重命名图层:双击需要重命名的图层名称,使其变成可编辑状态,然后在文本框中输入新的名称,再按键确认即可。复制图层:选取需要复制的图层,选择菜单中的“编辑”“时间轴”“复制帧”命令,然后单击时间轴下方的“新建图层”按钮创建新图层,接着菜单中的“编辑”“时间轴”“粘贴帧”命令,将复制的帧内容粘贴到新建的图层中。设置图层状态:在“图层”窗格中单击“显示或隐藏所有图层”按钮可以显示/隐藏图层;单击“锁定或解除锁定所有图层”按钮可以锁定/解除锁定图层;单击“将所有图层显示为轮廓”按钮可以显示图层的轮廓。,三、文字载入效果多媒体技术与动画,3、方法步骤:1)新建文档,舞台大小设为600200,将文件保存为“文字载入.fla”。2)单击文本工具,在属性面板上设置以下参数:静态文本、仿宋_GB2312、大小50点、字符间距18、文本填充颜色:黑色。如图2-9所示。,三、文字载入效果多媒体技术与动画,图2-9文本属性面板设置,3)在舞台上单击,输入“多媒体技术与动画”。4)将文本指向输入的字体,鼠标变为时单击即可选中已输入的文本;单击菜单中的“修改”“分离”或用快捷键,如图2-10所示。,三、文字载入效果多媒体技术与动画,图2-10文字分离后效果,5)在所有文本选中的状态下,指向选中的文本,指针变为时右击,在弹出的快捷菜单中选择“分散到图层”,如图2-11所示。,三、文字载入效果多媒体技术与动画,图2-11将文本分散到图层,6)单击“图层1”,然后单击时间轴下方的,删除“图层1”。7)除“多”图层外,移动其余图层上的关键帧,每一图层依次向右移动两帧,选中所有图层的第26帧,按键插入空白关键帧,选中所有图层的第45帧,按键插入普通帧。8)保存文件,按键测试影片。,三、文字载入效果多媒体技术与动画,4、小结通过文字载入效果案例,学习逐帧动画的制作方法、文字的输入及属性设置、图层的操作和帧的操作。,三、文字载入效果多媒体技术与动画,形状渐变效果变形的球形状提示渐变效果运动的盒子运动渐变效果林丹电子相册,2.2渐变动画的特殊效果,一、形状渐变效果变形的球,1、效果图,(a)第1帧图像(b)第40帧图像(c)第50帧图像,图2-12“变形的球”效果图,一、形状渐变效果变形的球,2、思路分析1)补间动画的基础知识补间动画是通过为不同帧中的对象属性指定不同的值而创建的动画。在Flash中有三种补间动画,补间形状动画、补间动画和传统补间动画。2)补间形状动画补间形状动画指两个图形对象的变换,其变化效果是由Flash控制的,其动画效果是从一个图形转换为另一个图形,针对的是形状,即先对关键帧中的形状指定属性,然后在后续关键帧中修改形状或者绘制另一个形状,从而产生动画。,一、形状渐变效果变形的球,3)补间形状动画属性设置首先选择已经创建补间形状动画两个关键帧之间的任意一帧,然后打开“属性”面板,如图2-13所示。,图2-13补间形状动画属性面板,一、形状渐变效果变形的球,4)渐变变形工具“渐变变形工具”主要用于调整渐变色填充和位图填充的效果。它可以调整渐变色的方向、范围和角度等,从而使图形的填充效果更加符合要求。渐变方式包括线性渐变和放射状渐变。,图2-14线性渐变控制柄,图2-15放射状渐变控制柄,一、形状渐变效果变形的球,3、方法步骤1)新建文档,舞台大小设为550300,将文件保存为“变形的球.fla”。2)绘制一个黄色(#FFFF00)的小球,大小4545,在第50帧按键插入一个关键帧。3)单击第1帧,选中刚绘制好的小球,按住键拖动小球,再复制四个大小相同的小球。4)单击“绘图制外观”,选择第50帧,将50帧的球放大到9393。选择“颜色”面板,设置:填充色的类型为放射状,颜色由内到外从黄色(#FFFF00)到绿色(#00FF00),如图2-16所示。,一、形状渐变效果变形的球,图2-16设置球的颜色,一、形状渐变效果变形的球,5)在1-49帧之间任意帧上右击,并在弹出的快捷菜单中选择“创建补间形状”。6)保存文件,测试动画。,一、形状渐变效果变形的球,4、小结通过本案例学习创建形状补间动画,创建形状补间动画需要注意的是两个关键帧上的对象必须是分离的对象,创建形状补间动画的对象可以是绘制的图形,也可以是分离后的文字。,二、形状提示渐变效果运动的盒子,1、效果图,图2-17运动的盒子,二、形状提示渐变效果运动的盒子,2、思路分析补间形状动画的形状提示可以控制变形的关键点,标识起始形状和结束形状中相对应的点。形状提示可以连续添加多个,方法是:单击菜单中的“修改”“形状”“添加形状提示”或者按快捷键,最多可以使用26个形状提示。形状提示用字母a到z识别起始形状和结束形状中相对应的点。在添加形状提示的时候,把形状提示点按照一定的顺序摆放,然后再调整单个提示点的位置。,二、形状提示渐变效果运动的盒子,3、方法步骤1)新建文档,舞台大小设为400200,舞台背景设为#99FFFF,将文件保存为“运动的盒子.fla”。2)单击矩形工具,将笔触设为,填充色为蓝色,绘制一个100100的正方形。3)单击对齐面板上的“相对于舞台按钮”选中此按钮,然后再分别单击“水平居中对齐”按钮和“垂直居中对齐”按钮,将矩形对齐到舞台中心。,二、形状提示渐变效果运动的盒子,4)在“图层1”第30帧处插入关键帧,在1-29帧之间任意帧上右击,并在弹出的快捷菜单中选择“创建补间形状”,创建成功后,如图2-18所示。,图2-18运动的盒子时间轴面板,二、形状提示渐变效果运动的盒子,5)添加形状提示:单击第1帧,再单击菜单中的“修改”“形状”“添加形状提示”,连续添加两次,并分别将形状提示符红色背景的a和b移动到到矩形的左上角和左下角,如图2-19(a)所示;单击第30帧,将形状提示点a和b移动到到矩形的右上角和右下角,此时a和b的背景变为绿色,如图2-19(b)所示;设置完第30帧后,第一帧形状提示符变为黄色如图2-19(c)所示。,(a)第1帧(b)第30帧(c)第1帧图2-19形状提示,二、形状提示渐变效果运动的盒子,6)保存文件,测试动画。,二、形状提示渐变效果运动的盒子,4、小结通过本案例学习利用补间形状提示符制作补间形状动画,通过添加补间形状提示点用来控制动画的渐变过程及效果。,三、运动渐变效果林丹电子相册,1、效果图,图2-20“林丹电子相册”效果图,2、思路分析1)补间动画的制作方法方法一:在舞台上选择要创建补间的对象,选择菜单“插入”“补间动画”。方法二:单击时间轴上要做动画的帧,右击,在弹出的快捷菜单中选择“创建补间动画”。2)制作补间动画的注意事项补间动画的适用对象是元件实例,因此,在制作补间动画前,最好先将制作动画的对象转换为元件。,三、运动渐变效果林丹电子相册,3)添加属性关键帧当播放头所在处没有属性关键帧时,拖放舞台上补间对象,可以自动在当前位置添加一个属性关键帧,也可以右击要添加的帧,在弹出菜单中选择“插入关键帧”,根据需要选择其中的一种或者选择“全部”。4)补间动画的轨迹调整创建了补间动画后,在舞台中用鼠标任意拖动对象,可以改变动画的轨迹;也可以用“选择”工具指向轨迹,改变轨迹的形状;也可以用“部分选取工具”对轨迹上的每个属性关键帧的控制点和方向手柄进行调节,以改变轨迹的形状。,三、运动渐变效果林丹电子相册,三、运动渐变效果林丹电子相册,2)图像的导入单击“文件”“导入”“导入到库”或单击“文件”“导入”“导入到舞台”。单击“文件”“导入”“打开外部库”菜单项可以导入其他Flash源文件(.fla)的元件库。若要一次性导入多张图片,可以在选择图片时按键选择一组不连续的图片或按键选择一组连续的图片,当选择一组连续的图片时,也可以用鼠标直接拖选。,3)元件和实例元件是存放在库中可被重复使用的图像、动画片段或按钮等动画元素。Flash元件分为图形元件、影片剪辑元件和按钮元件3种类型。元件存放在库中,一旦把元件从库中拖放到舞台上就称为该元件的实例。,三、运动渐变效果林丹电子相册,4)“库”面板Flash文档中的“库”如同一个存放Flash动画素材的仓库,用于存放在Flash中建的各种元件以及从外部导入的音乐、图片和视频。,三、运动渐变效果林丹电子相册,图2-21“库”面板,5)“动画编辑器”面板“动画编辑器”面板位于场景的下方,如图2-22所示。,三、运动渐变效果林丹电子相册,图2-22“动画编辑器”面板,3、方法步骤1)新建文档,舞台大小设为320380,将文件保存为“林丹电子相册.fla”。2)将“图层1”重命名为“背景”,单击第1帧,绘制一个无边框的矩形,矩形大小320380,放射状渐变,由绿色(#00FF33)到黄色(#FFFF00)。利用对齐面板将矩形对齐到舞台中心。3)新建图层2,并重命名为“相册边框”,绘制一个无填充色的矩形,矩形大小300360,笔触为10,笔触颜色为线性渐变中的七彩色,。利用对齐面板将矩形对齐到舞台中心。,三、运动渐变效果林丹电子相册,4)单击“文件”“导入”“导入到库”,在弹出的对话框中找到“电子相册”文件夹,用鼠标选中文件夹中的4个JPG文件,然后单击“打开”按钮。5)新建图层,重命名为“照片1”,打开“库”面板,将文件“1.jpg”拖放到“照片1”图层的第1帧,选择第1帧上的图片,按键将图片转换为图形元件,并将元件命名为“p1”。将p1相对于舞台垂直居中对齐和水平居中对齐。6)单击“照片1”图层的第1帧,右击,在弹出的快捷菜单中选择“创建补间动画”,此时“照片1”图层的帧自动延迟到第24帧。将鼠标移动到第24帧,向右拖动到第30帧。,三、运动渐变效果林丹电子相册,7)打开“动画编辑器”面板,设置色彩效果,将曲线图中的红色播放头拖放到第1帧,再将“Alpha数量”的值修改为25%。将播放头拖放到第30帧,将“Alpha数量”的值修改为100%。8)新建图层,并重命名为“照片2”,在第30帧处插入空白关键帧,将“库”面板的文件“2.jpg”拖放到“照片2”图层的第30帧,将图片转换为图形元件“p2”。9)单击“照片2”图层的第30帧,右击,在弹出的快捷菜单中选择“创建补间动画”,将帧向右拖动到第60帧,把第60帧图片拖放到舞台中心。10)打开“动画编辑器”面板,把播放头拖放到第60帧,修改“旋转Z”为360度。,三、运动渐变效果林丹电子相册,11)在时间轴面板中,选中“相册边框”图层和“背景”图层的第60帧,按插入普通帧,把“相册边框”图层移动到最上层。12)保存文件,测试动画。,三、运动渐变效果林丹电子相册,4、小结通过本案例学习“补间动画”的制作,制作补间动画只需要一个关键帧和一些属性关键帧即可完成。这种动画的制作方式与三维软件中的动画制作类似,可以比较准确地修改运动轨迹,为用户节省了大量的时间。,三、运动渐变效果林丹电子相册,2.3遮罩和引导层的应用,文字遮罩效果变化的文字形状遮罩效果水平卷轴画引导层动画滚动的篮球传统运动引导层动画飞舞的雪花,一、文字遮罩效果变化的文字,1、效果图,图2-23“变化的文字”效果图,一、文字遮罩效果变化的文字,2、思路分析1)遮罩动画在Flash的图层中有一个遮罩图层类型,为了得到特殊的显示效果,可以在遮罩层上创建一个任意形状的“视窗”,遮罩层下方的对象可以通过该“视窗”显示出来,而“视窗”之外的对象将不会显示。在网站制作中经常用到,如变化多彩的文字、扫光效果、百叶窗效果、流水效果等。2)创建遮罩的方法创建遮罩构成遮罩和被遮罩层的元素遮罩中可以使用的动画形式,一、文字遮罩效果变化的文字,1)新建文档,舞台大小设为600200,将文件保存为“变化的文字.fla”。2)将图层1重命名为“背景”,从素材库中把“bg.jpg”文件导入舞台中,并转换为图形元件“bg”。3)单击“文本”工具,属性设置:字符系列:华文行楷;字符大小:65点;字符间距:10。4)新建图层,并重命名为“文字”,在舞台上输入“Flash遮罩动画制作”,并将其位于舞台中心。4)选中文字,连续按两次键,对文字进行分离,最终将文字分解成矢量对象。,一、文字遮罩效果变化的文字,5)调整图片与字体的位置如图2-34所示。,图2-34文字与图片的相对位置,一、文字遮罩效果变化的文字,6)右击“背景”层第1帧,在弹出的快捷菜单中选择“创建补间动画”。右击第24帧,在弹出的快捷菜单中选择“插入关键帧”“旋转”,在动画编辑器面板中,设置“旋转:360度”。7)在“文字”层的24帧处按键插入普通帧。8)在“文字”层的图层区右击,在弹出的快捷菜单中选择“遮罩”。9)保存文件,测试动画。,一、文字遮罩效果变化的文字,4、小结通过本案例学习“遮罩动画”的制作方法,该案例利用文字作为遮罩层,通过被遮层(“背景”层)做旋转360度效果的“补间动画”来实现“文字”层填充色的变化。,二、形状遮罩效果水平卷轴画,1、效果图,图2-35“水平卷轴画”效果图,二、形状遮罩效果水平卷轴画,2、思路分析1)取消遮罩与被遮罩的关系取消遮罩层:在遮罩图层区右击,在弹出的快捷菜单中单击“遮罩层”,“”消失即取消了遮罩层。取消被遮罩:在被遮罩层右击,在弹出的快捷菜单中选择“属性”,打开“图层属性”对话框,设置类型为“一般”;或者把该图层拖动到遮罩层之外。,二、形状遮罩效果水平卷轴画,2)应用遮罩时的技巧遮罩层的基本原理是:能够透过该图层中的对象看到“被遮罩层”中的对象及其属性。要在场景中显示遮罩效果,可以锁定遮罩层和被遮罩层。可以用“Actions”动作语句建立遮罩,但这种情况下只能有一个“被遮罩层”,同时,不能设置Alpha属性。不能用一个遮罩层试图遮蔽另一个遮罩层。可以利用“显示图层轮廓按钮”控制显示内容。在被遮罩层中不能放置动态文本。,二、形状遮罩效果水平卷轴画,3、方法步骤1)新建文档,舞台大小设为600400,舞台背景为蓝色(#0000FF),将文件保存为“水平卷轴画.fla”。2)将图层1重命名为“画卷”,然后导入素材中的“jz.png”文件导入到舞台中心,按键分离图像,并在50帧插入普通帧延迟动画播放时间。用鼠标框选左侧的卷轴,并按键转换为图形元件“左卷轴”,用同样的方法再将右侧的卷轴转换为图形元件“右卷轴”。单击第1帧,按分离图像,这样便于再次调整图像的位置。,二、形状遮罩效果水平卷轴画,3)新建图层,并重命名为“矩形”,指向在舞台上绘制一个绿色(#99FF32)的矩形,大小50380,利用对齐面板将矩形对齐到舞台中心。4)选择菜单“视图”“标尺”,指向垂直标尺,向右拖出条参考线,将其移动到舞台中心,如图2-36所示。,图2-36“矩形”图层的第1帧图像,二、形状遮罩效果水平卷轴画,5)在“矩形”图层的第50帧按键插入一个关键帧,用“任意变形”工具,单击图形,然后将鼠标指向右侧边框中间的控制点上,如图2-37(a)所示;按住的同时拖动鼠标左键向右拖动,当恰好遮住卷轴内图像时释放鼠标,如图2-37(b)所示。,(a)缩放前(b)缩放后图2-37“矩形”图层的第50帧图像,二、形状遮罩效果水平卷轴画,6)右击“矩形”层上的1-49帧中的任一帧,在弹出的快捷菜单中选择“创建形状补间动画”。7)在“矩形”层的图层区右击,在弹出的快捷菜单中选择“遮罩”。8)新建图层,并重命名为“左卷轴”,单击第1帧从库中将“左卷轴”图形元件拖放到舞台中,并用对齐面板将其对齐到舞台中心,然后用键盘上的光标移动键“”将“左卷轴”实例稍向左移。9)右击“左卷轴”层上的1-49帧中的任一帧,在弹出的快捷菜单中选择“创建补间动画”。单击50帧,移动“左卷轴”实例与背景层上的左卷轴完全重合。,二、形状遮罩效果水平卷轴画,10)新建图层,并重命名为“右卷轴”,参照步骤8)和9),需要注意“右卷轴”实例与背景层上的右卷轴完全重合。11)新建图层,并重命名为“矩形2”,选中“矩形”层上的1-50帧,指向选中区域,右击,在弹出的快捷菜单中选择“复制帧”;选中“矩形2”层上的1-50帧,指向选中区域,右击,在弹出的快捷菜单中选择“粘帖帧”,“矩形2”图层自动地转换为“遮罩层”,但“左卷轴”和“右卷轴”图层都没被罩住12)将鼠标指向“右卷轴”图层区,向上拖动直到被“矩形2”遮罩层,同样的方法移动“左卷轴”图层。,二、形状遮罩效果水平卷轴画,13)单击“矩形2”层上的第50帧,用“任意变形”工具单击图形,然后将鼠标指向右侧边框中间的控制点上,按住键的同时拖动鼠标左键向右拖动,当恰好遮住图像时释放鼠标。14)选中所有图层的第90帧,按键插入普通帧;然后锁定所有图层。15)保存文件,测试动画。,二、形状遮罩效果水平卷轴画,4、小结通过本案例进一步学习“遮罩动画”的制作方法,该案例遮罩层和被遮罩层分别做动画,该案例主要展示在一个文档中可以做多个遮罩动画,一个遮罩层可以控制多个图层。,三、引导层动画滚动的篮球,1、效果图,图2-37“滚动的篮球”效果图,三、引导层动画滚动的篮球,2、思路分析1)制作引导层动画创建引导动画的主要分为三大步骤:建立补间动画或传统补间动画。创建引导层,在引导层中绘制引导线。调整被引导层上对象的起始和终点这两帧中的两个“中心点”使之对准引导线的端点。,三、引导层动画滚动的篮球,2)制作引导路径的技巧引导线要平滑、流畅。转折点过多或者转弯过急、线条中断或者交叉重叠,都可能导致引导线不能成功引导。被引导层上的对象的变形中心一定要位于引导线上,否则无法引导,如果为不规则对象,可以适当调整其变形中心的位置,另外,按下“工具箱”中的按钮,可以是对象更容易吸附到引导线上。在默认情况下,被引导层上的对象按引导路径平移,与切线方向无关,如果希望沿切线运动,可在设置被引导层上对象的补间动画后,选中属性面板上的“调整到导路径”复选框。,三、引导层动画滚动的篮球,2)传统补间动画传统补间动画是在两个关键帧中创建出来的,两个关键帧必须是同一个对象的两个不同状态,通过动作补间将两个关键帧中不同状态的对象补间出来。创建传统补间动画的主要步骤:在起始将对象放置到舞台,并设置对象的属性。在结束帧插入关键帧,并设置对象的属性。右击结束帧前的任一帧,在弹出的快捷菜单中选择“创建传统补间动画”。,三、引导层动画滚动的篮球,3、方法步骤1)新建文档,舞台大小设为760580,将文件保存为“滚动的篮球.fla”。2)导入文件“草地.jpg”和“篮球.png”到库中。3)把图层1重命名为“背景”,单击第1帧,从库中“草地.jpg”拖入到舞台中心,在第50帧处按插入普通帧,锁定该图层。4)新建图层,并重命名为“篮球”;从库中将“篮球.png”拖入到舞台中。按键将篮球实例转换为图形元件“LQ”。,三、引导层动画滚动的篮球,5)在第50帧处按插入关键帧,改变其位置。在1-49帧上的任意帧上右击,在弹出的快捷菜单中选择“创建传统补间动画”,单击第1帧。设置属性面板参数“缓动:100;旋转:顺时针;勾选上调整到路径复选框”。单击第50帧,选中“篮球”,设置属性面板参数“宽度:50;高度:49.5;样式:Alpha;Alpha:50%”。6)新建图层,并重命名为“运动轨迹”,用“线条”工具绘制一条直线,再绘制2条线段把直线段开;用“选择”工具分别改变被分割开的3条线的弯曲度;制作完成后删除多余的线段,然后把“篮球”图层中第1帧上的球的中心点对应到线的下端,将第50帧上的球的中心点对应到线的上端。,三、引导层动画滚动的篮球,7)“运动轨迹”制作完成后的时间轴面板,上移“篮球”层当和“运动轨迹”层重叠时,释放鼠标,此时“篮球”层被“运动轨迹”层引导,引层层动画制作成功。8)保存文件,测试动画。,三、引导层动画滚动的篮球,4、小结通过本案例学习引导层动画和传统补间动画的制作,引导层动画在制作时常出错的地方就是被引导对象不能被成功引导,或都是被引导对象在做引导动画时运动物体的方向不能根据引导线实时地旋转,所以在制作引导层动画时必须将引导层动画的中心点对齐到线的端点,被引导层上的动画要勾选属性面板上的“调整到路径”复选框,这样才能避免出错。传统补间动画与FlashCS4以前版本中的动作补间动画相对应,制作时需注要意两个关键帧上的对象是同一个元件的两个实例。,四、传统运动引导层动画飞舞的雪花,1、效果图,图2-38“飞舞的雪花”效果图,四、传统运动引导层动画飞舞的雪花,2、思路分析传统运动引导层动画是在运动引导层中绘制路径,可以使运动渐变动画中的对象沿着指定的路径运动。在一个运动引导层下可以建立一个或多个被引导层。创建传统运动引导层动画的主要步骤:制作被引导的动画。选择含被引导动画的图层,右击,以弹出的快捷菜单中选择“添加传统运动引导层”命令。调整被引导层上对象的起始和终点这两帧中的两个“中心点”使之对准引导线的端点。,四、传统运动引导层动画飞舞的雪花,3、方法步骤1)新建文档,舞台大小设为500400,背景设置为黑色,将文件保存为“飞舞的雪花.fla”。2)把图层1重命名为“背景”,导入文件“xh.jpg”到舞台中,并将其对齐到舞台中心,锁定图层。4)创建图形元件“雪花”按快捷键,创建图形元件“雪花”,在图形元件窗口中,将舞台显示比例设置为400%。,四、传统运动引导层动画飞舞的雪花,选择“线条”工具,设置线条的笔触颜色为白色,笔触大小为2,样式为实线。绘制一条长为6高为1的直线,利用对齐面板把直线对齐到“雪花”元件舞台的中心。单击“窗口”“变形”打开“变形”面板,选中直线,设置旋转为45度,然后单击3次“重制选区和变形”按钮,复制3条变形后的直线。,四、传统运动引导层动画飞舞的雪花,5)创建影片剪辑元件“雪花飞1”新建影片剪辑元件“雪花飞1”。将图形元件“雪花”拖入到舞台中心,在第50帧处按键插入关键帧,右击1-49帧中的任一帧,在弹出的快捷菜单中选择“创建传统补间动画”。单击图层1中的第1帧。设置属性面板参数“缓动:100;旋转:顺时针;勾选上调整到路径复选框”,单击第50帧,选中图形元件“雪花”实例,设置变形面板参数“水平和垂直都放大到120%”。,四、传统运动引导层动画飞舞的雪花,右击图层1,在弹出的快捷菜单中选择“添加传统运动引导层”,选择“铅笔“工具,模式为平滑,笔触颜色为红色,笔触大小为2,显示出标尺,拖出4条参考线,在制作动画时起辅助作用,四条参考线交叉构成的矩形区域为文档的舞台大小;用铅笔工具绘制一条弯曲的线段。把图层1中第1帧上的“雪花”的中心点对应到线的上端;第50帧上“雪花”的中心点对应到线的下端,“雪花”的“Alpha值为50%”。单击“场景1”,将窗口切换到文档窗口中。,四、传统运动引导层动画飞舞的雪花,6)打开“库”面板,右击“雪花1”元件,在弹出的快捷菜单中选择“直接复制”,复制2个影片剪辑元件“雪花2”和“雪花3”,然后分别编辑“雪花2”和“雪花3”元件,注意要改变“雪花”的大小、“引导线”的路径和时间轴,使之互不相同。7)单击场景1,新建3个图层,分别将雪花1、雪花2和雪花3拖放到时3个图层中。8)保存文件,测试动画。,四、传统运动引导层动画飞舞的雪花,4、小结传统运动引层动画与引导层动画都是制作引导线动画,区别在于利用引导层制作动画时,需要将已有的图层转换为引导层,方法是在图层操作区,右击图层,在弹出的快捷菜单中选择“引导层”,此时引导层不控制任何图层,只起到定位的作用,当把图层移动到引导层下时,引导层的图标转换成了和传统运动引层一样的图标,此时两者的功能完全相同。,2.4按钮和声音的应用,2.4按钮和声音的应用,2.4.1按钮的制作飞舞的蝴蝶1、效果图,方法步骤,1)新建fla文件选择“文件”“新建”命令,新建一个Flash文件,选择“文件”“保存”命令,保存Flash文件,取名为“屏幕”。2)创建5个“按钮”创建5个按钮(播放、停止、继续、前进、后退、访问其他)。以播放按钮为例,按Ctrl+F8快捷键,打开创建新元件对话框,名称为“播”,行为选择“按钮”。进入按钮的编辑状态,分别在按钮的“弹起”和“指针经过”区中插入关键帧,分别绘制大小相同,颜色不同,位置相同的按钮。,方法步骤,以上所述,分别创建“停”(停止)、“继续”(继续)、“进”(前进)、“退”(后退)、“访问其他”(访问其他)按钮元件。,3)制作影片剪辑,使用两个图层,制作蝴蝶沿任意路径运动的动作动画。首先将“蝴蝶.图片”导入到库中,然后按快捷键Ctrl+L打开“库”,分别在“图层1”第2帧、50帧处按F6插入一个关键帧,将图片拖到编辑区中,并将“图层1”改为“蝴蝶”。选中“蝴蝶”图层,单击“添加引导层”按钮,在“蝴蝶”图层的上方新增加了一个引导图层。选中引导层的第2帧,按F6插入一个关键帧,选取“铅笔工具”,在“选项”中选择“平滑”,在场景中绘制出一条比较圆滑的螺旋线,作为蝴蝶飞行的路线。,3)制作影片剪辑,制作“引导路径动画”时,最主要的操作是使一个运动对象“附着”在“引导线”上。操作前要先按下工具箱中的“对齐对象”按钮,然后选取“选择工具”,选中“被引导线”层上的第1帧,把该帧中的对象调整到“引导线”的开始端,选中动画的最后一帧,用鼠标把对象调整到引导线的末端。在“蝴蝶层”中创建传统补间动画。,3)制作影片剪辑,3)制作影片剪辑,将“蝴蝶”图层的第一帧设置stop()动作。将“蝴蝶”图层最后一帧,设置gotoAndPlay(2)动作。,4)创建四个图层,1层:边框层,选用系统默认的填充颜色,在新图层的舞台中绘出1个矩形,去除矩形的边线。选择颜料桶工具,并设置填充颜色为黑白渐变色,填充图形后,在混色器中调整渐变色。,4)创建四个图层,2层:花草图层,导入一张花草的图片作为背景。,4)创建四个图层,3层:蝴蝶飞舞影片剪辑,打开库,将蝴蝶飞舞影片剪辑拖入工作窗口中。4层:按钮,拖入六个按钮至工作区中。,5)设置按钮动作(常用动作),Press(单击)将光标移动到动画的按钮上,按下鼠标之后就会触发指定的动作。Release(释放)单击动画的按钮并释放鼠标之后,就会触发指定的动作。RollOver(鼠标指向)将鼠标指向目标按钮时,就会触发指定的动作。RollOut(鼠标离开)将鼠标从动画按钮上拖走时,就会触发指定的动作。,5)设置按钮动作(常用动作),“播”按钮动作设置,5)设置按钮动作(常用动作),“停”按钮动作设置,5)设置按钮动作(常用动作),“继续”按钮动作设置,5)设置按钮动作(常用动作),“进”按钮动作设置,5)设置按钮动作(常用动作),“退”按钮动作设置,5)设置按钮动作(常用动作),“访问其他”按钮动作设置,2.4.2按钮声音海洋世界,1、效果图,2、思路分析Flash是著名的多媒体动画制作软件,它支持多种格式的声音和视频的导入,并可以进行一些控制和处理,如可以进行声音的压缩,可以导入QuickTime或Windows播放器支持的标准媒体文件。Flash提供了许多使用声音的方式。我们可以使动画与声音同步播放,你可以向按钮添加声音,使按钮具有更强的感染力,如图。,3、方法步骤1)打开教学软件提供的动画启动FlashCS4后,打开教学软件中提供的“海底世界.fla”文件,进入动画编辑文件中。2)导入声音文件执行“文件”“导入”“导入到库”命令,弹出“导入到库”对话框,按下键盘上的键,分别单击声音文件,选择要导入的声音文件(文件路径:配套教学软件第2章4声音流水.mp3),单击“打开”按钮,将声音导入,如图所示。,导入声音后,按键盘上的键,打开“库”面板,可以看到,刚导入的声音已经存放在“库”中了,今后我们就可以像使用元件一样使用声音对象了,如图所示。,3)新建一个“sound”图层按新建图层按钮,新建一个图层,命名为“sound”,如下图。将库中的声音文件导入到场景中,如图。,打开“属性”面板,设置“同步”为默认的“事件”,如下图。,4)在场景中加入两个按钮在场景中加入两个按钮,选择“任意变形工具”,调整按钮的大小,放置到场景的右下方,如下图。,选择“选择工具”,选中“播放”按钮,打开“动作”面板,输入脚本,如下图。,表示当用鼠标按下“播放”按钮时,动画将开始播放。选中“停止”按钮,输入脚本,如图所示。表示当鼠标按下“停止”按钮时,动画将停止播放。执行“控制”“测试影片”命令,测试一下动画,可以听到潺潺的流水声。,2.5交互动画,2.5.1为行为对象添加行为按钮链接网站,2、思路分析在FlashMX版本以前,使用Flash设计的交互都是通过在按钮、影片剪辑或者帧中编写脚本来实现的,而FlashMX出现以后,其提供的行为控制使得用户无需编写一行代码就可向Flash动画内容添加交互性。行为是预先编写的“动作脚本”,可以使用户将动作脚本编码的强大功能、控制能力和灵活性添加到文档中,而不必自己创建动作脚本代码。例如,用户可以使用行为将很多功能包含在内:如链接到Web站点、载入声音和图形、控制嵌入视频的回放、播放影片剪辑以及触发数据源。行为面板外观,如下图所示。,面板组成说明如下:行为添加按钮:该按钮用于为行为对象(按钮、影片剪辑等)或者帧添加行为,单击该按钮将弹出一菜单,如图。,包括有Web、声音、媒体、嵌入的视频、影片剪辑、放映文件和数据等可选项,每一项右边都有一个箭头,用于扩展该选项,用户可以根据需要选择自己所需的行为项目。行为去除按钮:用于删除行为面板中当前的行为语句,当我们用行为面板为行为对象或者帧添加语句时,所添加的语句将放置在行为语句区中,选中行为语句区中的某条语句,单击行为去除按钮即可将该语句的行为去除。语句上移按钮:单击该按钮可将当前语句上移。语句下移按钮:单击该按钮可将当前语句下移。在行为去除按钮的右边还有一个显示区域(如元件1、元件2、帧、图层1:帧1等),用于表示该行为所作用的行为对象或者帧。,3、方法步骤1)新建文档单击工具栏上的新建按钮新建一个Fla文档。2)新建元件w1按快捷键Ctrl+F8打开“创建新元件”对话框,并在对话框中进行如图2-106所示的设置。,图2-106,3)新建w1影片剪辑单击工具箱中的矩形工具,再单击属性对话框中“矩形选项”区中的圆角矩形半径,在该对话框中进行如图2-107所示的设置。,图2-107,4)制作web_button按钮单击“填充和笔触”区的笔触色工具按钮和无色钮设置笔触色为无色。单击“填充和笔触”区的填充色工具按钮,在弹出的颜色面板中选择浅绿色。在舞台上绘制一个大小合适的矩形,如图。选中矩形,按快捷键Ctrl+G将其组合。,单击工具箱中的文本工具,打开属性面板,在属性面板中进行如图2-109所示的设置,其中文本颜色为深蓝色。,图2-109,在舞台上输入文本“网站”,如图。右键单击舞台上的矩形,在弹出的菜单中选择“排列”“移至底层”项。把“网站”文本移到矩形的上方,如图。,单击工具箱中的箭头工具,全选文本和矩形。按快捷键打开“转换为符号”对话框,在对话框中进行,如图。,5)新建126、sina、163按钮单击时间轴层控制区的增层按钮增加1个图层(图层2)。单击工具箱中的矩形工具,再单击属性对话框中“矩形选项”区中的圆角矩形半径,在该对话框中进行如图所示的设置。,单击“确定”按钮回到舞台。依次单击“填充和笔触”区的笔触色工具按钮和无色钮设置笔触色为无色。按快捷键Shift+F9打开混色器面板,在混色器面板中进行如图2-114所示的设置,其中渐变带颜色为由绿至白,再由白到绿的线性渐变。,图2-114,单击图层2第1帧,在舞台上合适位置绘制一个矩形,如图所示。单击工具箱中的文本工具,打开属性面板,在属性面板中进行如图所示的设置,其中文本颜色为蓝色。,在图层2第1帧舞台合适位置输入文本,如图。单击工具箱中的箭头工具,选中图层2第1帧上的文本和矩形对象,按快捷键打开“转换为符号”对话框,在对话框中进行,如图。,单击“确定”按钮,此时所示的文本和矩形同时转换为126按钮元件。用同样的方法在图层2第1帧的舞台上分别绘制图所示的对象,并利用“转换为符号”对话框将它们分别转换为sina按钮元件和163按钮元件。,单击工具箱中的箭头工具,对图层2第1帧舞台上的3个按钮元件进行排列,如图。技巧:可以单击工具栏上的对齐按钮,利用弹出的对齐面板来对对象进行排列。全选图层2第1帧处的所有按钮元件,按快捷键Ctrl+G将它们组合。,6)编辑按钮改变图层2上的组合对象位置,其相对图层1上的web_button按钮元件的位置,如图。,依次单击图层1的第2帧、第30帧、第31帧和第60帧,并在所单击的各帧处按快捷键插入关键帧。依次单击图层2第30帧和第60帧,并在所单击的各帧处按快捷键插入关键帧。单击图层2第30帧,改变其上的组合对象的相对位置,如图。,单击时间轴层控制区的增层按钮增加1个图层(图层3)。单击图层3第1帧,单击工具箱中的矩形工具,在图层3的舞台上绘制一个大小合适的矩形,其刚好能覆盖住图层2第30帧处舞台上的所有按钮对象,如图。,右键单击图层2第1帧,并在弹出的窗口中选择“创建补间动画”项。右键单击图层2第31帧,并在弹出的窗口中选择“创建补间动画”项。右键单击时间轴的图层3,在弹出的菜单中选择“遮罩层”项,此时的时间轴,如图。,7)编辑主场景单击时间轴左上角的按钮回到场景1。按快捷键打开库面板,并将w1影片剪辑从库面板中拖到舞台上。选中舞台上的w1影片剪辑,打开属性面板,在属性面板中设置w1实例,如图所示,实例名称为net。双击库面板中的w1影片剪辑进入其编辑环境。,8)设置行为参数单击图层1第1帧,按快捷键Shift+F3打开行为面板。单击行为面板中的行为添加按钮,在弹出的菜单中选择“影片剪辑”“转到帧或标签并在该处停止”项。,在弹出的“转到帧或标签并在该处停止”对话框中设置如图所示,其中停止播放输入框中输入的是:1。单击“确定”按钮回到舞台。单击图层1第30帧,单击行为面板中的行为添加按钮,在弹出的菜单中选择“影片剪辑”“转到帧或标签并在该处停止”项。在弹出的“转到帧或标签并在该处停止”对话框中设置与如图所示类似,其中停止播放输入框中输入的是:30。单击“确定”按钮回到舞台。,单击图层1第60帧,单击行为面板中的行为添加按钮,在弹出的菜单中选择“影片剪辑”“转到帧或标签并在该处停止”项。在弹出的“转到帧或标签并在该处停止”对话框中设置与图所示类似,其中停止播放输入框中输入的是:1。单击“确定”按钮回到舞台。单击图层1第1帧,再单击舞台上的web_button按钮元件。单击行为面板中的行为添加按钮,在弹出的菜单中选择“影片剪辑”“转到帧或标签并在该处播放”项。,在弹出的“转到帧或标签并在该处播放”对话框中进行如图所示的设置,其中下方的输入框中输入:2。说明:按钮元件添加行为时默认的方式是“释放时”。单击“确定”按钮回到舞台。单击行为面板中时间列表下的按钮事件“释放时”,在弹出的下拉列表中选择“移入时”项。,锁定图层1和图层3,隐藏图层3,解锁图层2,时间轴层控制区,如图。单击图层2第30帧,双击舞台上的组合对象,直至各个按钮对象分开,此时在时间轴上方显示了编辑的次序,最右为“组”,如图。,单击126按钮元件,单击行为面板中的行为添加按钮,在弹出的菜单中选择“web”“转到web页”项。在弹出的“转到URL”对话框中进行,如图。,单击“确定”按钮,再单击行为面板中的行为添加按钮,在弹出的菜单中选择“影片剪辑”“转到帧或标签并在该处播放”项。在弹出的“转到帧或标签并在该处播放”对话框中进行如图所示的设置,其中下方的输入框中输入:31。,在行为面板中改变按钮元件的行为方式,如图。用同样的方法依次对舞台上的sina按钮元件和163元件进行类似的设置,其中“转到URL”对话框的设置分别如图所示,其他的设置与126均相同。,接下来就可以按快捷键Ctrl+Enter测试了,当我们把鼠标放在网页按钮上时,从其下方将拉出3个按钮,用鼠标点击其中的一个按钮时就会打开某个网页(如单击“163”按钮就打开“”网页,如图所示),而鼠标移出按钮时,网页按钮下的按钮就会缩入到网页按钮中去。,2.5.2行为控制声音回放点播音乐,1

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论