用flash制作下落效果运动补间动画
- 格式:docx
- 大小:106.71 KB
- 文档页数:2
Flash基础教程(动作补间动画实例)飞行的飞机(1)创建影片文档1、设置影片文档属性执行【文件】|【新建】命令,在弹出的面板中选择【常规】|【Flash 文档】选项后,点击【确定】按钮,新建一个影片文档,在【属性】面板上设置文件大小为650×255像素,【背景色】为白色2、创建背景图层执行【文件】|【导入】|【导入到舞台】命令,将配套光盘中名为“山峰.jpg”的图片导入到场景中(“山峰”图片位置:光盘\example\part3\***\图片\山峰.jpg)。
用【箭头工具】调整图片在舞台上的位置,使其居于舞台的中央。
如果图片大小不合适,再选择【任意变形工具】调整图片大小。
选择第100帧,按F5键,添加普通帧。
(2)创建元件1、创建飞机元件执行【插入】|【新建元件】命令,新建一个图形元件,名称为“飞机”。
这时进入新元件编辑场景,选择第一帧,执行【文件】|【导入】|【导入到舞台】命令,将配套光盘中的名为“飞机.png”图片导入到场景中(“飞机”图片位置:光盘\example\part3\***\图片\飞机.png)。
2、创建白云元件执行【插入】|【新建元件】命令,新建一个图形元件,名称为“白云”。
这时进入新元件编辑场景,选择第一帧,执行【文件】|【导入】|【导入到舞台】命令,将配套光盘中的名为“白云.png”的图片导入到场景中(“白云”图片位置:光盘\example\part3\***\图片\白云.png)。
(3)创建动画1、创建飞行效果单击时间轴右上角的【编辑场景】按钮,选择【场景1】,转换到主场景中。
新建一层,把库里名为“飞机”的元件拖到场景的左侧,执行【修改】|【变形】|【水平翻转】命令,将飞机元件实例水平翻转。
在【属性】面板上打开【颜色】旁边的小三角,设置【Alpha】值为80%。
飞机向远处飞去,应该越来越小,越来越模糊,来看看这种效果是什么做出来的吧,选中【图层2】的第100帧,按F6键,添加一个关键帧,在【属性】面板中设置飞机的大小,【W】值是飞机的宽值,为32;【H】值是飞机的高值,为18.9;【X】、【Y】则是飞机在场景中的X、Y坐标,分别是628.5,51在【属性】面板上,设置【Alpha】值为20%。
Flash 8 动作补间动画详解及实例动作补间动画也是Flash中非常重要的表现手段之一,与“形状补间动画”不同的是,动作补间动画的对象必需是“元件”或“成组对象”。
运用动作补间动画,您可以设置元件的大小、位置、颜色、透明度、旋转等种种属性,配合别的手法,您甚至能做出令人称奇的仿3D的效果来。
本实例详细讲解了动作补间动画的特点及创建方法,并分析了动作补间动画和形状补间动画的区别,我们精心设计的一个实例将带您进一步加深对动作补间动画的了解。
1.动作补间动画的概念(1)动作补间动画的概念在Flash的时间帧面板上,在一个时间点(关键帧)放置一个元件,然后在另一个时间点(关键帧)改变这个元件的大小、颜色、位置、透明度等等,Flash 根据二者之间的帧的值创建的动画被称为动作变形动画。
(2)构成动作补间动画的元素构成动作补间动画的元素是元件,包括影片剪辑、图形元件、按钮等等,除了元件,其他元素包括文本都不能创建补间动画的,其他的位图、文本等等都必须要转换成元件才行,只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”。
(3)动作补间动画在时间帧面板上的表现动作补间动画建立后,时间帧面板的背景色变为淡紫色,在起始帧和结束帧之间有一个长长的箭头,如图3-4-1所示。
图3-4-1 动作补间动画在时间帧上的表现(4)形状补间动画和动作补间动画的区别形状补间动画和动作补间动画都属于补间动画。
前后都各有一个起始帧和结束帧,二者之间的区别如下表所示。
区别之处动作补间动画形状补间动画在时间轴上的表淡紫色背景加长箭头淡绿色背景加长箭头现组成元素影片剪辑、图形元件、按钮形状,如果使用图形元件、按钮、文字,则必先打散再变形。
完成的作用实现一个元件的大小、位置、颜色、透明等的变化。
实现二个形状之间的变化,或一个形状的大小、位置、颜色等的变化。
5)创建动作补间动画的方法在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置一个元件,一帧中只能放一个项目,在动画要结束的地方创建或选择一个关键帧并设置该元件的属性,再单击开始帧,在【属性面板】上单击【补间】旁边的“小三角”,在弹出的菜单中选择【动作】,或单击右键,在弹出的菜单中选择【新建补间动画】,就建立了“动作补间动画”。
1、新建Flash文件,属性设置:400 × 400 ,背景黑色,帧频30。
图12、选文本工具,创建一个动态的文本。
输入数字 1。
3、在属性面板中为实例命名 " myText" 。
设定字号为 15 ,颜色#00ff00。
图2:4、按字符嵌入按钮,嵌入字符集。
设置如图3:5、把本文转换成影片剪辑。
命名为 " numberInsideMC" 。
将注册点设定为左上角。
图4:6、在属性面板中为实例命名 " numberInside" 。
图5:7、把 " numberInsideMC" 再次转换成影片剪辑。
提供新的影片剪辑名字 " myNumberMC" 。
将注册点设定为左上角。
图6:8、按Ctrl+L组合键,打开库面板,右键单击 " myNumberMC" 选属性(CS4、CS3为链接)作类的绑定,链接名为 " BitNumber" 。
图7:9、新建图层,改名 as 层,选中第1帧,输入下列代码://This array will contain all the numbers seen on stagevar numbers:Array = new Array();//We want 8 rowsfor (var i=0; i < 8; i++) {//We want 21 columnsfor (var j=0; j < 21; j++) {//Create a new BitNumbervar myNumber:BitNumber = new BitNumber();//Assign a starting positionmyNumber.x = myNumber.width * j;myNumber.y = myNumber.height * i;//Give it a random speed (2-7 pixels per frame)myNumber.speedY = Math.random() * 5 + 2;//Add the number to the stageaddChild (myNumber);//Add the number to the arraynumbers.push (myNumber);}}//Add ENTER_FRAME so we can animate the numbers (move them down) addEventListener (Event.ENTER_FRAME, enterFrameHandler);/*This function is repsonsible for moving the numbers down the stage. The alpha animation is done inside of the myNumberMC movieclip.*/function enterFrameHandler (e:Event):void {//Loop through the numbersfor (var i = 0; i < numbers.length; i++) {//Update the y positionnumbers[i].y += numbers[i].speedY;//If the BitNumber is below the stage, move it up againif (numbers[i].y > stage.stageHeight) {numbers[i].y = 0;}}}10、双击舞台上的 myNumberMC 影片剪辑,进入myNumberMC编辑状态,添加as 图层,选中第1帧,输入代码://This variable tells us should we increase the alphavar increaseAlpha:Boolean;//We want the number to be invisible at the beginning numberInside.alpha = 0;//Calculate a random timer delay (how often we increase the alpha) var timerDelay:Number = Math.random() * 4000 + 2000;//Create and start a timervar timer:Timer = new Timer(timerDelay, 0);timer.addEventListener (TimerEvent.TIMER, timerHandler);timer.start ();//Add ENTER_FRAME so we can animate the alpha change addEventListener (Event.ENTER_FRAME, enterFrameHandler);/*Timer calls this function.Timer delay defines how often this is called.*/function timerHandler (e:Event):void {//Update the increaseAlpha valueincreaseAlpha = true;//Calculate a random number (0 or 1)var newNumber:int = Math.floor(Math.random() * 2);//If the random number is 1, we insert "1" into the text boxif (newNumber == 1) {numberInside.myText.text = "1";}//Else we insert "0" into the text boxelse {numberInside.myText.text = "0";}}//This function animates the alphafunction enterFrameHandler (e:Event):void {//Increase the alpha if increaseAlpha is trueif (increaseAlpha == true) {numberInside.alpha += 0.02;}//Else we want to decrease the alphaelse {numberInside.alpha -= 0.02;}//We don’t want the alpha to be over one, so we assign increaseAlpha to be falseif (numberInside.alpha > 1) {increaseAlpha = false;}//If the alpha is negative, set it to zeroif(numberInside.alpha < 0) {numberInside.alpha = 0;}}11、切换回场景1,把 myNumberMC 影片剪辑从舞台上删除。
制作Flash动画之补间动画海南省洋浦中学周向荣一、教学内容分析:本节课是海南省八年级《信息技术》上册第二章《动画信息制作》第三节《制作Flash动画》的第一课时。
在学习本节课之前,学生已经学习了动画及制作的基本原理,对于基本原理有了一个较清晰的理解;同时通过学习了如何制作一个gif动画,对帧、图层、补间等概念有所了解;FLASH是当前非常流行的二维动画制作软件,很受动画爱好者的喜爱,在网络上见到的动画大多由其生成;而本节课,主要是从FLASH 角度来学习和理解更深层次的动画制作知识。
二、学情分析:精彩的Flash作品目前在网络中非常受欢迎、非常流行,而制作这些作品的人被网络称为“闪客”;学生对网络世界的熟悉使得学生对flash动画并不陌生,并且学生对flash动画也抱有强烈的好奇心和学习兴趣,都想成为一个优秀的“闪客”,这为我们的教学打下坚实的基础,但是学生动画设计功底不是很好、缺乏耐心和细心,因此在本节里要注重培养。
三、教学目标分析:通过对动画制作的深入学习,让学生能更深层次地理解和掌握如何在运用Flash软件来完成自己的设计构思,创作出一个较好的作品。
1.知识与技能目标:补间动画的制作方法;掌握几种简单动画的制作。
2.过程与方法:通过引导学生完成一段flash动画,让学生养成构思动画、设计动画、制作动画的一系列过程。
3.情感、态度、价值观:通过本节课的学习,希望能将学生的强烈好奇心和学习兴趣转变成培养、激发学生的创作热情;提高他们的审美能力、语言表达、思维能力和和合作技巧;并能充分激发学生自身的信息技术潜力,让有某一方面特长的学生得到最大限度的发挥。
四、教学重点、难点:重点:如何恰当、合理运用flash的补间动画设计简单对象动画过程的制作方法。
难点:如何利用动画设计来开发学生的表达能力、创造力。
五、教学策略:在教学过程中,拟采用的教学流程是:欣赏作品、引入新课→学习新内容→小试牛刀→创意设计→展示交流→小结、课外延伸。
《制作Flash动画之补间动画》教学设计一、教学目标通过对动画制作的深入学习,让学生能更深层次地理解和掌握如何在运用Flash软来完成自己的设计构思,创作出一个较好的作品。
(一)、知识与技能目标:①了解动画的制作原理②了解工具箱里工具的使用,掌握工具箱中的常用工具。
③体验使用flash创作运动补间动画的过程,完成自己第一个动画作品。
(二)、过程与方法:通过作品欣赏和师生交流激发学生完成任务。
在完成两个任务的过程中,使学生掌握工具箱里工具的使用方法和运动补间动画,培养学生发现问题,探究问题和解决问题的能力,培养学生的自主学习、合作学习、探究学习以及鉴赏能力,激发学生进一步学好信息技术的热情。
(三)、情感、态度、价值观:培养学生的情商,培养学生的感恩之心,学会对身边的人感恩,热爱自己的父母,激发学生学习兴趣和创作动画才能;培养学生欣赏作品的能力。
二、教学重、难点(一)教学重点:、会使用工具箱中的椭圆,颜料桶工具,任意变形工具来制作简单元。
2、合理运用flash的补间动画设计简单对象动画过程的制作方法。
(二)、教学难点:在移动过程中实现元的变向移动三、教学策略演示法、任务驱动法、个别指导、作品展示四、教学资源Flash8、极域网络电子教室软、教学PPT、动画源文、教学视频。
五、教学过程教学步骤教师活动学生活动设计意图创设情境导入新、欣赏flash动画作品《fail公益广告》2、问:大家欣赏的这个视频,好看吗?反映了一个什么主题呢?3、这个动画是用什么软来做成的?请大家打开本P3。
学生观看flash作品并回答问题学生看书通过播放《fail公益广告》,让学生学会对身边的人感恩,热爱自己的父母。
学习新明确任务打开flash8软,介绍软的界面以及他们的作用。
播放示例——跳动的小球问:大家想一下,我们要完成这颗跳动的心需要几步呢?展示中两个任务:任务一:画一个小球任务二:让小球跳动起来提示:、可以查阅本P3-P37及教学视频“跳动的小球”2、同学之间互相帮助3、向老师求助生:先画一个球,然后再让小球跳动起来明确这节的学习任务学生看到这个画面后想跃跃欲试,期待能完成自己的作品。
动作渐变动画----自由落体运动
制作过程:
一、新建Flash文档。
在属性面板中设置大小为500×400像素,背景为蓝色。
二、绘制正圆
选择椭圆工具,在“混色器”面板中将笔触颜色关闭,填充类型为“径向渐变”,设置两个滑动色块,其值分别为“#FF0000”和“#000000”,最后在舞台中(按住shift键)绘制一个正圆。
三、转换为元件
选中正圆,按F8或者右键选择“转换为元件”命令,设置元件名称为“球”,元件类型为“图形”。
四、插入关键帧
在第30帧处,插入关键帧(按F6或者右键选择插入关键帧),然后按键盘上的方向键↓,将该帧处的圆移动到舞台的正下方。
五、添加补间动画
选中第1帧,“创建传统补间”,在属性面板中设置缓动值为“-100”。
六、变形
在第31帧处,插入关键帧,选择“任意变形工具”,将正圆稍微压扁。
“创建传统补间”,在属性面板中设置缓动值为“100”。
七、复制帧
复制第1帧,粘贴到第61帧处。
八、添加图层
“创建图层”,在新图层上利用“线条工具”在舞台中绘制一条水平直线。
九、保存后测试
文件保存后,按“Ctrl+Enter”组合键,可对影片进行测试。
注意:动作渐变动画的对象必须是“元件”或者“成组对象”。
元件可以是影片剪辑、图形元件、按钮、文字、位图、组合等,但不能是形状,只有把形状“组合”或者转换成“元件”后才能创建“创建传统补间”。
Flash四种动画的基本步骤Flash 动画包括逐帧动画、动作补间动画、形状补间动画、遮罩动画、引导线动画等。
(一)逐帧动画逐帧动画是一种常见的动画形式,其原理是在“连续的关键帧"中分解动画动作,即在时间轴的每个关键帧上逐帧绘制不同的内容,使其连续播放而成动画.逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容,很适合于表演细腻的动画。
但因每个关键帧上的内容不一样,增加了动画制作负担,且使最终输出的文件体积很大。
实例:打字效果(1)新建一个 Flash 文件,展开 Flash 窗口下端的文档属性面板或在舞台上单击右键,在右键菜单中选择“文档属性",设置舞台的宽 500 像素、高 200 像素,背景色为黑色. (2)选中第一帧,选取文本工具,在属性面板上设置字体为“楷体” 、字号“ 72 ”、颜色“白色”、粗体,键入“教育技术学"六个字;并设置它的位置相对于舞台居中对齐(选择“窗口”主菜单的“设计面板”,调出“对齐"面板。
在“对齐"面板上先把“相对于舞台"五字下方的按钮单击成白色,再分别单击“水平中齐”和“垂直中齐").(3)选中文本,在按住 Ctrl 键的同时,单击 B 键,把组合在一起的文字分解,并分别在第 10 、 20 、 30 、 40 、 50 帧插入一个关键帧。
若连续单击 B 键两次,则把文字打散。
(4)选中第 1 帧,将五个文字全部删除。
(5)选中第 10 帧,将后四个文字删除,留下一个“教”字.选中第 20 帧,将后三个文字删除,留下“教育”两字.选中第 30 帧,将后二个文字删除,留下“教育技” 三字。
选中第40 帧,将后一个文字删除,留下“教育技术"四字。
(6)在第 60 帧插入普通帧.测试效果,观看效果。
(二)补间动画Flash 中的补间动画有两种:一种是动作补间动画;另一种是形状补间动画。
雨操作步骤1、启动Flash CS5软件,新建一个Flash文档,在【文档属性】里设置【帧频】值为“25”,修改【尺寸】为:“720px(宽)×576px(高)”,【舞台】:灰(为了区别舞台和雨的白色)。
2、新建【图层1】,命名为【BG】,在时间轴第1帧,先导入背景图片。
如图1所示。
图13、新建【图层2】,命名为【前奏】。
这里先画出一滴雨的动画,选择【插入】——【创建新元件】,名称为【雨滴】,类型为【图形】。
如图2所示。
图24、制作雨落下动画。
先毛笔画出雨滴的形状,为了方便做补间,右键【转化为元件】,如图3所示。
图3第1帧为雨滴起始点,在第15帧时右键【插入关键帧】,设为结束点。
打开【绘图纸外观轮廓】,参照起始点的位置设定结束点的位置,如图4所示。
右键【创建传统补间】,即可实现雨落下的动画,如图5所示。
图4 图55、制作水圈散开动画。
在第16帧右键【插入空白关键帧】,参照雨滴结束点位置画出起始点水圈,同样为了方便做补间,右键【转化为元件】,如图6所示。
图6在第35帧时右键【插入关键帧】,水圈放大1500%,设为水圈消失点。
如图7所示。
图7右键【创建传统补间】,即实现水圈变大的动画。
如图8所示。
图8在第27帧右键【插入关键帧】,这时把第35帧的【属性】→【色彩效果】中Alpha值改为0,实现水的淡出,如图9所示。
图9这样,一滴雨水落下的动画完成,按Enter键反复观看修改动画效果直至节奏顺畅。
6、接下来做前奏的雨,前奏雨要从少到多,先一滴,两滴,再慢慢多起来.flash 点击回到主场景。
如图10所示。
图10把库里面的元件【雨滴】拖入到场景中,为方便观察动画效果,先暂时把场景的时间轴拉至100帧,后如有需要可以无限制延长。
如图11所示。
图117、第1帧有一滴雨,在第16帧右键【插入关键帧】,复制一层雨滴,原图层黏贴,然后移动雨滴至合适位置,二滴雨落下。
如图12所示。
图12同理,在第31帧右键【插入关键帧】,复制两层雨滴,原图层黏贴,然后移动雨滴至合适位置,六滴雨落下。