用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的补间动画设计简单对象动画过程的制作方法。
难点:如何利用动画设计来开发学生的表达能力、创造力。
五、教学策略:在教学过程中,拟采用的教学流程是:欣赏作品、引入新课→学习新内容→小试牛刀→创意设计→展示交流→小结、课外延伸。