Action Script 3.0 练习 雪花飘落动画

合集下载

Action Script 3.0 练习 动画导航条

Action Script 3.0 练习  动画导航条

Action Script 3.0 练习动画导航条在浏览网页时,经常会见到各种Flash制作的网页导航条。

一个网页导航条通常由多个按钮组成,本练习将使用Flash的自定义按钮结合遮罩动画、形状补间动画等技术制作一个供网页使用的动画导航条,如图1-54所示。

Flash中的按钮和网页中的按钮一样,包含4种状态,即弹起、指针经过、按下和点击。

在制作按钮时,需要对按钮的4种状态进行设置,使按钮更有动感。

(1)在Flash中新建影片文件“navigator.fla”,导入素材图像“background.ai”,作为影片的背景,如图1-55所示。

图1-55 导入素材图像(2)新建按钮元件“btn01”,选择【椭圆工具】,在元件中绘制一个直径为80px 的圆形,设置边线为2px的白色(#FFFFFF)实线,填充为绯红色(#FF6600),如图1-56所示。

图1-56 绘制按钮(3)在按钮中新建图层,在新图层中用【钢笔工具】绘制按钮反光的图形,将其填充为白色(#FFFFFF),透明度为20%,如图1-57所示。

图1-57 绘制反光层(4)在“图层1”和“图层2”之间新建“图层3”,在图层3中将【指针经过】帧转换为关键帧,输入标签文本“首页”,如图1-58所示。

图1-58 输入按钮标签(5)在“图层3”中,分别将【按下】和【点击】两帧转换为关键帧,并将【按下】帧处的标签文本颜色设置为绿色(#00FF00),即可完成第1个按钮的制作,如图1-59所示。

图1-59 设置【按下】和【点击】帧(6)用相同的方法制作其它4个按钮,分别为按钮设置不同的底色和文本颜色,如图1-60所示。

图1-60 制作按钮(7)在主时间轴中第300帧处按F5快捷键添加帧,如图1-61所示。

图1-61 添加帧(8)新建“图层2”图层,将名为btn01的按钮添加到图层中,然后在图层第1帧处执行【创建补间动画】命令,如图1-62所示。

图1-62 创建补间动画(9)在“图层2”第40帧处右击,执行【插入关键帧】|【位置】命令,然后将该帧处的按钮拖动到舞台相应的位置,如图1-63所示。

FLASH下雪代码

FLASH下雪代码

Flash 下要代码(as3.0)1.新建一个文件夹,名为“纷扬的雪花”。

2.打开FLASH9.0或10.0都可,建立一个AS3.0的文件,大小550*400,保存在“纷扬的雪花”的文件夹里。

图层1添加一个背景图片,添加图层2,为AS层,选中第一帧打开动作面板,为其添加语句:stage.frameRate=60;var num:int=0;stage.addEventListener(Event.ENTER_FRAME,enterFrameHandler);function enterFrameHandler(e:Event):void {if (num<300) {addChild(new Snow());num++; }else { stage.removeEventListener(Event.ENTER_FRAME,enterFrameHandler);}}3.新建一个ActionScript文件,名为“Snow.as”,保存在和源文件同名的“纷扬的雪花”文件夹里,在脚本区里复制如下代码:package{import flash.display.*;import flash.events.*;public class Snow extends Sprite{public var radius:Number;public var angle:Number;public var speed:Number;public function Snow(){init();addEventListener(Event.ENTER_FRAME,enterFrameHandler);}public function init():void{radius=Math.random()*4;angle=(Math.random()+0.5)*Math.PI/2;speed=Math.random()+1;x=Math.random()*550;y=0;alpha=Math.random();graphics.clear();graphics.beginFill(0xffffff);graphics.drawCircle(0,0,radius);graphics.lineTo(100,100);}public function enterFrameHandler(e:Event):void{x+=speed*Math.cos(angle);y+=speed*Math.sin(angle);if(y>400||x<0||x>550){init();}}}}4.保存一下,测试即可。

Action Script 3.0 练习 播放FLV文件

Action Script 3.0 练习  播放FLV文件

Action Script 3.0 练习播放FLV文件播放FLV格式视频文件,首先创建NetConnection对象并对其进行初始化,以与服务器连接并渐进式下载视频文件。

然后,通过使用NetStream对象读取并播放该视频。

为了将视频显示在舞台中,则需要将NetStream对象附加到Video对象,由Video对象将视频呈现出来,效果如图12-11所示。

图12-11 播放FLV文件(1)新建530×435像素的空白文档,将素材图像导入到【库】面板中,并将背景图像拖入到舞台中,如图12-12所示。

图12-12 拖入背景图像(2)保存该Flash源文件。

然后,在相同目录的文件夹中新建player.as文件。

在该文件中自定义类、函数和变量,并导入所需的类,代码如下所示。

package {import flash.display.Sprite;import flash.display.MovieClip;import flash.text.TextFormat;import flash.events.Event;import flash.events.MouseEvent;import flash.text.TextField;import .URLLoader;import .URLRequest;import Connection;import Stream;import flash.events.AsyncErrorEvent;import flash.media.Video;import StatusEvent;public class player extends Sprite {private var url_arr:Array;//存储视频URL地址的数组private var title_arr:Array;//存储视频名称的数组private var ns:NetStream;private var i:Number = 0; //默认视频编号private var video:Video;public function player() {//主函数体}}}(3)创建loadXML()函数,该函数用来加载外部的XML文件,并通过侦听事件调用xmlComplete()函数,代码如下所示。

Action Script 3.0 练习 控制图像颜色属性

Action Script 3.0 练习  控制图像颜色属性

Action Script 3.0 练习控制图像颜色属性在ActionScript中,如果想要控制舞台中元件的亮度、对比度和饱和度等,可以通过创建ColorMatrixFilter对象来实现。

而为了使用户可以动态地控制这些属性,则可以通过拖动Slider组件的滑块来调整图像颜色的属性,效果如图11-14所示。

图11-14 控制图像颜色属性(1)将素材图像导入到舞台中,将其转换为影片剪辑元件,并设置其【实例名称】为“mc”,如图11-15所示。

图11-15 设置实例名称(2)打开【组件】面板,将Label组件和Slider组件拖入到【库】面板中,如图11-16所示。

图11-16 拖入组件(3)保存该Flash源文件。

然后,在相同目录的文件夹中新建color.as文件。

在该文件中自定义类和函数,并导入所需的类,代码如下所示。

package {import flash.display.Sprite;import flash.display.Shape;import flash.display.MovieClip;import flash.text.TextFormat;import flash.filters.ColorMatrixFilter;//导入ColorMatrixFilter类import fl.controls.Slider;//导入Slider组件类import bel;//导入Label组件类import fl.events.SliderEvent;//导入Slider组件事件类public class color extends Sprite {public function color() {//主函数体}}}(4)在color类中创建drawRect()函数,该函数在舞台的右下角绘制一个半透明的矩形,该矩形用来衬托显示组件,代码如下所示。

private function drawRect():void{var d:Number = 200; //矩形的宽var h:Number = 100; //矩形的高var x:Number = stage.stageWidth - d;//矩形的x坐标var y:Number = stage.stageHeight - h;//矩形的y坐标var myRect:Shape = new Shape();myRect.graphics.beginFill(0x333333);//填充颜色myRect.graphics.drawRect(x,y,d,h);//绘制矩形myRect.graphics.endFill();myRect.alpha = 0.4; //矩形的透明度addChild(myRect) //显示矩形}(5)创建txtFormat()函数和myLabel()函数。

Flash新手入门教程:AS3代码第一课——下雪效果

Flash新手入门教程:AS3代码第一课——下雪效果

Flash新手入门教程:AS3代码第一课——下雪效果本系列Flash教程由中国教程网Flash互助课堂专为Flash新手制作,更多教程和练习请点击这里,在这里有系列的教程、练习,并有老师对练习进行点评与指导,欢迎朋友们的光临!与AS2.0相比较,AS3.0有了很大的变化,它改变了我们以往的编程习惯。

今天我们通过一个非常简单的入门练习-下雪效果,来认识一下AS3.0,主要了解一下AS3.0与AS2.0的区别。

首先,我们来介绍一下AS3的一些基础知识。

在AS3中怎样把库中的元件加载舞台我们知道在AS2中我们可以通过attachMovie将库中的mc加载到舞台上。

在使用这个命令前我们必须要做的事情是在库中右击元件,打开连接面板,然后在标识符框中为元件取上一个连接名,这样才能用attachMovie()来加载它。

现在我们在AS3中来做一下,在库中右击元件,打开连接面板,这时你会叫道:“为什么我的标识符框是灰色的,不能用。

”不是你的是灰色的,而是在AS3中都是灰色的,因为在AS3中是不能用attachMovie()来加载元件的。

AS3据说是完全面向对象编程的语言了,这就必须要了解类,对象等概念。

类就是一类东西的一个名称,比如动物类就包括了所有动物,动物类下面的所有人就是人类了。

又如所有电器可叫电器类,电器类下面又可有电视机类等。

对象是某类的一个具体的实例。

比如你就是人类中的一个具体的人,你就是人类的一个对象。

看到这里你说:“我晕”,我说:“我更晕”。

介绍类,对象这些概念看的人不容易看懂,说的人更不容易说清。

在AS3中要加载一个显式对象(我们在舞台上看得见的东西),必须要载入一个类,然后要声明这个类的一个实例,再用new关键字创建它,最后用addChild()将它加载到舞台。

我们将舞台着是一个展台,将库看着是一个仓库,现在仓库中有一台电视机要放到展台上,该怎样做呢?首先需要一个电视机类,然后需要声明一个实例:var 电视机甲(实例名):电视机(类名)= new 电视机();addChild(电视机甲);现在我们回到flash中来看看,现在库中有一个元件,我们要将它加载到舞台上,应该这样做:在库中右击该元件,打开连接面板,我们会看到一个叫类的文本框,在这里给这个类取一个名字,比如myl.确定。

Flash制作雪花视觉动画效果的三种制作方法.

Flash制作雪花视觉动画效果的三种制作方法.

Flash制作雪花视觉动画效果的三种制作方法第一种方法:最笨但也效果最好,就是用“引导线”功能,让雪花不停的飘呀飘,如果多用几个图层,效果更好。

1、新建一个Flash影片。

设背景为“黑色”,其他的用默认值。

2、按Ctrl+F8新建一个组件,类型为“影片剪辑”,命名为“雪花”。

在它的正中用“铅笔”工具画一个不规则的多边形,然后用“颜料桶工具”将它填上白色。

(如图1-1所示)3、再用Ctrl+F8建一个组件,类型为“影片剪辑”,命名为“前层”。

4、将组件“雪花”拖到其中,用“选定工具”中的“比例”功能把它缩小(小技巧:先用“放大镜”将它放大,然后再用“比例”功能,可缩得更小)。

在第80帧上“插入关键帧”,在“图层1”上用鼠标右键的“添加引导线”功能(见图1-2)。

在新增加的“引导线:图层1”的第1帧上,从“雪花”开始,画一条弯曲的曲线。

将第80帧上的“雪花”沿曲线从头拖到曲线的末尾。

然后在“图层1”的第1帧上点鼠标右键,选“创见动画动作”功能,见图1-3。

5、第4步是制作一片雪花,下雪不是只下一片的吧。

插入图层,将第4步重复做10次。

做好后的效果见图1-4。

6、把第3至5步重复做两次,不同之处是组件的命名分别为“中层”和“后层”。

“雪花”的大小和“引导线”的路径不要一样。

这是为了多做几个图层,看起来效果细腻一点。

7、现在回到场景1中,插入6个图层,分别命名为“后层1”、“后层2”、“中层1”、“中层2”、“中层3”、“中层4”、“前层1”、“前层2”。

在对应的层上拖入对应的组件,并适当的调整时间轴,让雪花飘得连贯起来。

见图1-5。

按Ctrl+Enter就可以看到效果了。

第二种方法:用Actionscript的函数,比较简便,具体步骤如下:1、新建一个Flash影片。

设背景为“黑色”,其他的用默认值。

2、按Ctrl+F8新建一个组件,类型为“影片剪辑”,命名为“雪花”。

在它的正中用“铅笔”工具画一个不规则的多边形,然后用“颜料桶工具”将它填上白色。

Flash特效——雪花飘落

Flash特效——雪花飘落

完整 整的变量定 定义格式:var 初 v 变量名:类型 = 初始值 ;
var Hei ight:Numb ber = 40 00; //场景 景高度,即 即雪花下落的 的距离。例 例子中跟舞台 台保持一致 致。 var Wid dth:Numbe er = 550 0;//场景宽 宽度,即雪 雪花横向的跨 跨度。例子 子中跟舞台保 保持一致。 var Ang gularSpee ed:Numbe er = 5;//雪花旋转 转角速度。 var Win nd:Number r = -2;/ //风速,负 负值表示向左 左吹,正值 值表示向右吹,数值越 越大风越大。
退出 Sno ow 元件,回 回到主舞台。菜单栏上 上选择【插 插入】→【新 新建元件】 。 。名称输入 入下雪特效,类 型选 选择【影片剪辑】 。如图:
单击【确定】进入下 下雪特效元件 件。建立 2 个层。如图。其中在 在提示层放置 置提示元件 件,在动作层 层编 写脚 脚本。
从库中拖 拖出一个 Snow 放在提 提示层的中心 心。点击这 这个 Snow 实例,按 实 Ctrl+F3 打开 开属性面板, ,名 称栏 栏里输入“Tip_mc” 。
本教 教程默认读 读者已经比较 较熟悉 Flas 是 Action2.制作过程 程
2.1 动画结构 构
在开始动手之前有必 必要来说明以下结构问 问题。不然 然会产生意想 想不到的结 结果。
下雪场景
提 提示
雪花 花
雪花 雪
雪花
雪花
上图所示 示, “下雪场景” 、 “提 提示”以及“雪花”都 都是影片剪辑 辑。其中“提示”和“ “雪花”在“下 雪场 场景”的里面 面。 “雪花场 场景”用来 来控制整个下 下雪特效。如 如果你的下 下雪场景在某 某个图片( (比如建筑物 物)

Flash CS3 下雪

Flash CS3 下雪

Flash CS3 下雪打开flash cs3,选择新建flash文件(ActionScript 3.0).导入一张背景图片,在场景中放好。

新建一个影片剪辑元件,将舞台放大到800%,用椭园工具,画一个无笔触,填充色为放射将白色左色标透明度为100%,右色标透明度0%的椭园,大小这4x3,用选择工具调整一下,使其不太规则。

在第30帧插入关键帧。

插入引导层,画一条由上向下的弯曲引导线。

回到第一层,在第一帧和30帧,分别将椭园放到引导线的两端,建立补间动画。

如图:放大至800%时打开库,在元件上右击,打开连接面板,在类文本框中输入:xl,确定。

回到主场景,新插入一图层,命名为action,打开动作面板:输入:var i:Number = 1;addEventListener(Event.ENTER_FRAME,xx);function xx(event:Event):void {var x_mc:xl = new xl();addChild(x_mc);x_mc.x = Math.random()*550;x_mc.scaleX = 0.2 + Math.random();x_mc.scaleY = 0.2 + Math.random();i++;if(i>100){this.removeChildAt(1);i=100;}}ok, 完成。

上面的代码,在基础介绍中都已说明了,应该一看就明白了。

有几句解释一下。

x_mc.scaleX = 0.2 + Math.random();x_mc.scaleY = 0.2 + Math.random();0.2 + Math.random();会产生0.2-1.2间的随机数,这就让雪花缩小到20%到放大到120%间,落下来的雪花,大小不一,显得更加真实一些。

removeChildAt(n);是删除已加载的显式对象,其中的n是已加载的对象的索引号。

从addEven tListener (Event.ENTER_FRAME,xx);这一句可以看出,运行一帧,就会从库中加载一个雪花,同时i加,这样当i等于100时,场景中就已有100个雪花了。

AtionScrip 3.0制作雪花飘飘动画

AtionScrip 3.0制作雪花飘飘动画

AtionScrip 3.0制作雪花飘飘动画Webjx核心提示:本例为用Flash AtionScrip 3.0制作雪花飘飘的雪景效果,常常从网上的动画中看到大雪纷飞的场面,看到雪花从天空中拖曳而下,真有一种身临其境的感觉呢?但主要是用AtionScrip 2.0制作,现在我们用AtionScrip 3.0来制作雪景效果.二、制作背景回到场景 1 中来,选择【文件】-【导入】-【导入到舞台】,从自己的磁盘中选择一张雪景图片,选中图片,把它设置为550x400,全居中,同时把图层 1 更名为“背景”。

三、新建一个图层“AS” ,点中第 1帧,打开“动作”面板,添加下列代码:Var sj:Timer=new Timer(Math.random()*300+100,100);//声明一个时间变量,类型Timer,随机设置时间间隔和控制雪花数量;sj.addEventListener(TimerEvent.TIMER ,sjcd);//用sj来侦听时间事件;function sjcd(event:TimerEvent) {//声明一个sjcd函数var xh:xh_mc=new xh_mc();//先声明一个对象xh,类型xh_mc,等于一种新类型xh_mc;addChild(xh);//把新声明的xh对象显示到舞台上;xh.x=Math.random()*550;//雪花x坐标在550舞台上随机出现;xh.y=Math.random()*200;//雪花y坐标控制在舞台上的0-200处随机出现;xh.alpha=Math.random()*1+0.2;//雪花的随机透明度;xh.scaleX=Math.random()*0.5+0.5;//随机控制雪花在x的宽度;xh.scaleY=Math.random()*0.5+0.5;//随机控制雪花在y的宽度;}sj.start();//时间开始;雪景代码:flash鼠标跟随代码谁能帮我翻译下下面的代码,谢谢了!startDrag(mc,true);Mouse.hide();var i:Number = 0;onMouseMove = function(){attachMovie("mc","mc"+i,i);this["mc"+i]._x = _xmouse;this["mc"+i]._y = _ymouse;i+=1};mc为屏幕中的剪辑对象startDrag(mc,true);//MC可拖动,拖动点为MC的中心Mouse.hide();//隐藏鼠标var i:Number = 0;//定义变量i,值为0onMouseMove = function(){//当鼠标移动时attachMovie("mc","mc"+i,i);//从库中加载链接名为mc的元件到屏幕中作为实例,命名为mc+1 this["mc"+i]._x = _xmouse;this["mc"+i]._y = _ymouse;//这些实例与鼠标坐标位置相同i+=1//随着鼠标移动,实例数量递增};。

如何用ActionScript3.0代码实现完美飘雪场景

如何用ActionScript3.0代码实现完美飘雪场景

如何用ActionScript3.0代码实现完美飘雪场景作者:陈雨婕来源:《电脑知识与技术》2012年第33期摘要:ActionScript3.0可以有效的提高以Flash Player为目标的内容和应用程序的开发效率。

通过图层设计、界面设计以及ActionScript代码设计三个方面,介绍了应用ActionScript 3.0事件处理机制实现飘雪场景的制作方法。

同时,该方法也适用于其他常用场景的制作。

关键词:ActionScript3.0;飘雪;事件侦听;事件处理中图分类号:TP311 文献标识码:A 文章编号:1009-3044(2012)33-7922-03ActionScript是一种基于Flash、Flex等多种开发环境、面向对象编程的脚本语言。

其主要用于Flash动画控制、为Flash影片添加各种特效、实现复杂动画、交互动画以及开发各种富网络应用的动画程序等[1]。

随着Flash CS3的发布,ActionScript 3.0(以下简称AS3)横空出世了。

AS3的推出使脚本语言的发展上升到一个新的高度。

随着脚本语言的日趋成熟,AS3已经在Web、视频、音乐等多个领域得到了广泛应用,但对于很多习惯了ActionScript1.0和2.0的开发人员在面对AS3的巨大变化的同时又觉得不知所措[2],下面针对如何应用AS3中强大的事件处理机制来实现完美飘雪场景的制作方法进行介绍。

1设计的基本思想时间轴也叫时间线,是一条贯穿时间的轴,用于表示对象在不同时间存在的不同状态,利用时间轴可以创建各种动画效果。

飘雪场景设计的基本思想是在Flash时间轴上设定三图层,分别放置三个关键帧。

第一个图层的关键帧用来放背景图片,第二个图层关键帧用来放文字动画,第三个图层的关键帧用来放置AS3代码,用代码来实现漫天雪花飘落的场景。

下面将分别从图层设计、界面设计以及ActionScript代码设计三方面加以说明[3]。

雪花飘落 模拟雪花飘落的动画效果

雪花飘落 模拟雪花飘落的动画效果

雪花飘落:模拟雪花飘落的动画效果在AE(Adobe After Effects)软件中,我们可以通过使用一些方法和技巧来模拟雪花飘落的动画效果。

本篇文章将为你详细介绍如何实现这一效果。

首先,打开AE软件并创建一个新的合成项目。

接下来,我们需要在合成中创建一个雪花的形状。

在工具栏中选择“椭圆工具”,然后在合成中点击并拖动鼠标,创建一个椭圆形。

然后,按住Shift键来保持正圆形。

可以使用属性面板中的“填充色”选项来选择雪花的颜色。

现在,我们需要将这个形状转换为一个雪花形状。

在层面板中选择刚刚创建的形状图层,然后点击菜单栏中的“图层”>“形状路径”>“转换为贝塞尔路径”。

接下来,我们需要对雪花进行一些形状调整,以使其看起来更像一个真实的雪花。

在层面板中选择形状图层,然后点击菜单栏中的“图层”>“形状路径”>“添加顶点”来添加顶点。

通过拖动这些顶点来调整雪花的形状,使其看起来更加自然。

现在,我们需要将雪花形状转化为粒子系统。

在层面板中选择形状图层,然后点击菜单栏中的“图层”>“新建”>“新建效果”>“粒子系统II”。

调整粒子系统的参数以获得更逼真的雪花效果。

在效果控制窗口中,你可以更改粒子的颜色、大小、速度、风力等参数,以达到你想要的效果。

为了增加雪花的数量,我们还需在图层面板中复制粒子系统图层,并调整各个图层的位置和大小,使它们看起来更随机和自然。

如果你希望雪花落在场景中的特定区域,你可以创建一个遮罩图层。

在图层面板中选择一个图层,并点击菜单栏中的“图层”>“新建”>“新建遮罩”>“形状”。

通过调整遮罩的形状和位置,你可以指定雪花落下的区域。

然后,在图层面板中选择粒子系统图层,在效果控制窗口中找到“发射源”选项,并选择刚刚创建的遮罩图层。

最后,我们可以通过在合成中添加背景图像或视频来增加整个场景的视觉效果。

在层面板中选择合成图层,在菜单栏中选择“文件”>“导入”>“文件”,然后选择你想要添加的背景图像或视频。

Action Script 3.0 练习 控制播放FLV文件

Action Script 3.0 练习  控制播放FLV文件

Action Script 3.0 练习控制播放FLV文件当FLV视频已经加载到Flash player中,可以使用NetStream对象中的play()、pause()、seek()等方法来控制视频,以实现视频的播放、暂停、停止和跳转等功能。

为了显示视频的已播放时间和总时间,可以通过NetStream对象的time属性、client属性和onMetaData 事件来获取,并可根据这两个时间制作播放进度条。

效果如图12-13所示。

图12-13 控制播放FLV文件(1)打开player.fla源文件,创建按钮影片剪辑元件,并设置【实例名称】为“playBtn”、“pauseBtn”、“stopBtn”、“lastOneBtn”和“nextOneBtn”等,如图12-14所示。

图12-14 制作控制播放按钮(2)创建进度条影片剪辑元件,绘制两个大小相同的矩形并创建遮罩层,设置被遮罩层中矩形的【实例名称】为“processBar”,如图12-15所示。

图12-15 制作进度条(3)返回场景。

将进度条元件放置在舞台中的“电视屏幕”下面,并设置其【实例名称】为“process”,如图12-16所示。

图12-16 放置进度条(4)保存该Flash源文件,并打开AS文件,在player类中创建myButton()函数,该函数设置按钮的默认状态,以及侦听鼠标单击事件,代码如下所示。

private function myButton():void {playBtn.buttonMode = true;pauseBtn.buttonMode = true;stopBtn.buttonMode = true;lastOneBtn.buttonMode = true;nextOneBtn.buttonMode = true;fullScreenBtn.buttonMode = true;normalScreenBtn.buttonMode = true;//启动控制播放按钮元件的按钮模式,使鼠标光标经过该按钮时变成手形pauseBtn.visible = true;playBtn.visible = false;normalScreenBtn.visible = false;//隐藏“播放”按钮和“正常”按钮playBtn.addEventListener(MouseEvent.CLICK,playFlv);//侦听播放按钮单击事件,调用playFlv()函数播放视频pauseBtn.addEventListener(MouseEvent.CLICK,pauseFlv);//侦听暂停按钮单击事件,调用pauseFlv()函数暂停播放视频stopBtn.addEventListener(MouseEvent.CLICK,stopFlv);//侦听停止按钮单击事件,调用stopFlv()函数停止播放视频lastOneBtn.addEventListener(MouseEvent.CLICK,lastOne);//侦听播放上一个视频按钮单击事件,调用lastOne()函数播放上一个视频nextOneBtn.addEventListener(MouseEvent.CLICK,nextOne);//侦听播放下一个视频按钮单击事件,调用nextOne()函数播放下一个视频fullScreenBtn.addEventListener(MouseEvent.CLICK,fullScreen);//侦听全屏按钮单击事件,调用fullScreen()函数进行全屏normalScreenBtn.addEventListener(MouseEvent.CLICK,normalScreen);//侦听屏幕正常按钮单击事件,调用normalScreen()函数恢复屏幕尺寸}(5)创建playFlv()、pauseFlv()和stopFlv()函数,它们分别用来实现视频的播放、暂停和停止功能,代码如下所示。

flash课件特效之雪花飘飘

flash课件特效之雪花飘飘

flash课件特效之雪花飘飘下雨下雪是课件常常要表现的情景,这里搜集整理了几例下雪特效,以AS3.0代码重新编写,作为备用:一、雪花徐徐飘落※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※1.新建一个flash文档,舞台大小800*600,背景色为黑色。

2.插入一个元件,类型为影片剪辑,元件名为snow,确定后进入元件编辑状态。

3.打开颜色面板,使用放射状态填充类型,白色,圆心部分透明度为100%,边缘部分透明度为0%,产生渐变效果。

4.在中央位置画个圆,圆心与“+”对齐,将图形高度、宽度设为5像素。

5.在库中找到刚做好的元件snow,右击,在弹出地菜单中选择“链接”。

钩选“为ActionScript导出”、“在第一帧导出”两个选项,在“类”名为“snow”(默认会以元件名为名,所以不用输入)基类名保持不变。

6.返回主场景,在第一帧加入代码:var nWidth:uint = stage.stageWidth;var nHeight:uint = stage.stageHeight;var snowflakes:uint = 100; //雪花数量,根据舞台的需要来定var max_snowsize:uint = 20; //同上init();function init() {for (var i:uint = 0; i < snowflakes; i++) {var _snow:snow = new snow();addChild(_snow);_snow.alpha = 0.2 + Math.random() * 0.6;_snow.x = nWidth / -2 + Math.random() * 1.5 * nWidth;_snow.y = nHeight / -2 + Math.random() * 1.5 * nHeight;_snow.scaleX = _snow.scaleY = 0.5 + Math.random() * max_snowsize / 10;_snow.k = Math.random() * 2 + 1;_snow.wind = -1.5 + Math.random() * 1.4 * 3;_snow.addEventListener(Event.ENTER_FRAME,mover);}}function mover(evt:Event) {evt.target.y += evt.target.k;evt.target.x += evt.target.wind;if (evt.target.y > nHeight + 10) {evt.target.y = -20;}if (evt.target.x > nWidth + 20) {evt.target.x = nWidth / -2 + Math.random() * 1.5 * nWidth;evt.target.y = -20;} else if (evt.target.x < -20) {evt.target.x = nWidth / -2 + Math.random() * 1.5 * nWidth;evt.target.y = -20;}}二、雪花风中狂舞※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※(一)新建雪花图形1.新建一个flash文档,舞台大小640*480,背景色为黑色。

清华版(2012)信息技术五年级上册《雪花飘飘 ——制作有“影片剪辑”的动画》同步练习题附知识点归纳

清华版(2012)信息技术五年级上册《雪花飘飘 ——制作有“影片剪辑”的动画》同步练习题附知识点归纳

清华版(2012)小学信息技术五年级上册《雪花飘飘——制作有“影片剪辑”的动画》同步练习题附知识点归纳一、课文知识点归纳:本课主要介绍了Flash中影片剪辑元件的创建和使用,以及如何通过设置影片剪辑的属性来制作雪花飘落的动画效果。

重点内容包括影片剪辑元件的创建与编辑、动画属性的设置与调整、引导图层的使用等。

二、同步练习题。

(一)、填空题。

1. 在Flash中,创建“影片剪辑”元件时,需要使用工具栏中的__________工具。

2. 雪花飘落的效果可以通过设置影片剪辑的__________属性来实现。

(二)、选择题。

1. 在Flash中,要使雪花沿特定路径飘落,应该使用哪种类型的图层?()A. 普通图层B. 引导图层C. 遮罩图层D. 脚本图层2. 下列哪项不是Flash动画中常见的帧类型?()A. 关键帧B. 空白关键帧C. 普通帧D. 静态帧3. 要让雪花在场景中不断重复出现,应使用Flash中的哪种功能?()A. 复制和粘贴B. 影片剪辑循环C. 逐帧动画D. 形状补间(三)、判断题。

(正确的打“√”,错误的打“×”)1. Flash中的“影片剪辑”元件可以独立播放,不受主时间轴的影响。

()2. 制作雪花飘落动画时,每个雪花都可以使用同一个影片剪辑实例。

()3. Flash动画的导出格式只能是SWF,不能转换为其他视频格式。

()(四)、简答题。

1. 简述在Flash中如何创建一个雪花飘落的动画效果。

__________________________________________________________________ __________________________________________________________________ __________________________________________________________________2.在制作有“影片剪辑”的动画时,应注意哪些关键点以确保动画的流畅性和真实性?__________________________________________________________________ __________________________________________________________________ __________________________________________________________________三、学习目标:1. 了解影片剪辑元件在Flash动画中的作用。

javascript实现雪花飘落效果

javascript实现雪花飘落效果

javascript实现雪花飘落效果圣诞节快到了相信许多公司的前端都在会收到⼀个需求,那就是做⼀个关于圣诞节的专题,⽽这个专题为了应对圣诞节这个主题都会加上雪花飘呀飘这个⼩动画,当然我们公司也不例外,下⾯就是本⼈⽤js写的⼀⼩段雪花秀啦:<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"><script src="jquery-1.8.3.min.js"></script></head><style>html{max-width: 720px;}body{width: 100%;height: 100%;margin: 0 auto;overflow-x: hidden;}.snow{width: 100%;height: 100%;background: pink;overflow: hidden;}.snow_img{position: absolute;top: -50px;margin-left: 1px;}</style><body><div class="snow"></div><script>$(function(){$('body').css("height",$(window).height())var wid=$(".snow").width();var html_snow="<img src='snow.png' class='snow_img'>";setInterval(function(){$(".snow").append(html_snow);snowFlow();},100);function snowFlow(){$(".snow_img").each(function(index){var snow_time=(Math.random()*10+4)*1000;var wid_snow=Math.floor(Math.random()*40+5)+'px';var float_left=Math.random()*wid*2-wid+"px";var wid_left=Math.random()*wid+"px";if( $(this).css("margin-left")==1+"px"){$(this).css("margin-left",wid_left);}if($(this).width()==0 || $(this).width()==50 ){$(this).width(wid_snow);}$(this).animate({top:800+"px",left:float_left,},snow_time);if($(this).offset().top==800){$(this).remove();}})}});</script></body></html>代码很简单,都是运动⽤js的⼀些基础知识点做出来的,主要是随机数和⼀些判断。

JS实现炫酷雪花飘落效果

JS实现炫酷雪花飘落效果

JS实现炫酷雪花飘落效果⽤js实现漂亮的雪花飘过效果:步骤:页⾯基本样式,雪花旋转动画效果body{width: 100vw;height: 100vh;background-color: #000;overflow: hidden;user-select: none;-webkit-user-select: none;}.snowAnimation {animation: snow 5s infinite linear;-webkit-animation: snow 5s infinite linear;}@keyframes snow {0%{transform: rotate(0);}100%{transform: rotate(360deg);}}@-webkit-keyframes snow {0%{transform: rotate(0);}100%{transform: rotate(360deg);}}创建雪花,添加样式let snowDiv = document.createElement('div') // 创建divsnowDiv.innerHTML = '❉' // 添加❉内容snowDiv.className = 'snowAnimation' // 添加旋转动画snowDiv.style.position = 'absolute'snowDiv.style.top = '0'snowDiv.style.left = '0'snowDiv.style.color = '#fff'document.body.append(snowDiv) // 插⼊到页⾯接下来,让元素飘落animated(snowDiv) // 传⼊创建的元素// 动态增加元素top值,function animated(div) {div.timer = setInterval(() => {div.style.top = 10 + div.offsetTop + 'px'},50)}接下来,给元素添加随机⽣成的初始化效果let minSize = 10 // ⽣成的最⼩元素let maxSize = 50 // ⽣成的最⼤元素let randomOpacity = 0.5 + Math.random()*0.5 // ⽣成元素的不透明度snowDiv.style.fontSize = minSize + Math.random()*maxSize + 'px' // 元素随机⼤⼩snowDiv.style.opacity = randomOpacity // 元素随机的不透明度下⼀步,添加⽣成元素的随机位置,并且保持可视区域内活动let visualWidth = document.body.offsetWidth || document.documentElement.offsetWidth // 页⾯可视化宽度let visualHeight = document.body.offsetHeight || document.documentElement.offsetHeight // 页⾯可视化⾼度let initPosition = Math.random()*(visualWidth - 80) // 溢出会有滚动条,控制不会溢出,页⾯可视化宽度 - (元素最⼤宽度 + 最⼤宽度/2) snowDiv.style.left = initPosition + 'px' // 随机在可视化区域位置内⽣成元素animated(snowDiv,visualHeight) // 传⼊创建的元素// 动态增加元素top值,当元素超过可视化区域,remove元素function animated(div,visualHeight) {div.timer = setInterval(() => {div.style.top = 10 + div.offsetTop + 'px'if (Number(div.style.top.replace('px','')) > visualHeight - 80) {clearInterval(div.timer)document.body.removeChild(div)}},50)}基本完成:⽣成⼀个随机⼤⼩/不透明度的元素,并且在可视化区域内飘落下⼀步,复制⽣成多个元素:cloneNode()let minSize = 10 // ⽣成的最⼩元素let maxSize = 50 // ⽣成的最⼤元素let delay = 100 // ⽣成元素的间隔时间let snowDiv = document.createElement('div') // 创建divsnowDiv.innerHTML = '❉' // 添加❉内容snowDiv.className = 'snowAnimation' // 添加旋转动画snowDiv.style.position = 'absolute'snowDiv.style.top = '0'snowDiv.style.left = '0'snowDiv.style.color = '#fff'let visualWidth = document.body.offsetWidth || document.documentElement.offsetWidth // 页⾯可视化宽度let visualHeight = document.body.offsetHeight || document.documentElement.offsetHeight // 页⾯可视化⾼度setInterval(() => {let initPosition = Math.random()*(visualWidth - 80) // 溢出会有滚动条,控制不会溢出,页⾯可视化宽度 - (元素最⼤宽度 + 最⼤宽度/2) let randomOpacity = 0.5 + Math.random()*0.5 // ⽣成元素的不透明度let speed = 5 + Math.random()*5 // 元素飘落速度snowDiv.style.fontSize = minSize + Math.random()*maxSize + 'px' // 元素随机⼤⼩snowDiv.style.opacity = randomOpacity // 元素随机的不透明度snowDiv.style.left = initPosition + 'px' // 随机在可视化区域位置内⽣成元素let div = snowDiv.cloneNode(true) // 复制元素document.body.append(div) // 添加复制后的元素animated(div,speed,visualHeight) // 传⼊创建的元素,飘落的速度以及页⾯可视化⾼度},delay)// 动态增加元素top值,当元素超过可视化区域,remove元素function animated(div,speed,visualHeight) {div.timer = setInterval(() => {div.style.top = speed + div.offsetTop + 'px'if (Number(div.style.top.replace('px','')) > visualHeight - 80) {clearInterval(div.timer)document.body.removeChild(div)}},50)}到这⾥就基本完成此效果。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

Action Script 3.0 练习雪花飘落动画
在Flash影片中,如需要使一个类的对象实例在影片中显示,可为对象实例使用stage.addChild()方法。

如需要删除一个已显示对象,则可以使用stage.removeChild()方法。

本练习将使用stage.addChild()方法制作一个雪花飘落的动画,如图6-2所示。

图6-2 雪花飘落动画
在显示和删除对象时,还可以使用stage.addChildAt()方法和stage.removeChildAt()分别为对象添加层次和移除固定层次的对象。

(1)在Flash中新建影片文件“snow.fla”,执行【文件】|【导入】|【导入到库】命令,导入矢量素材“resource.ai”如图6-3所示。

图6-3 导入矢量素材
(2)新建影片剪辑元件“bgimg”,将图形元件“背景_0”拖动到元件中,并将元件实例化为bgimg,用相同的方法创建雪人和雪花的元件,如下所示。

(3)按F9快捷键,编写ActionScript代码,分别将背景和两个雪人添加到影片中,如下所示。

var _bgimg:bgimg=new bgimg();
//将背景图像bgimg实例化
stage.addChild (_bgimg);
//定义背景图像在影片中可见
var _sy:smallyeti=new smallyeti();
//将小雪人图像smallyeti实例化
_sy.x=380;
//定义对象的横坐标
_sy.y=320;
//定义对象的纵坐标
stage.addChild (_sy);
//定义对象在影片中可见
var _ly:yeti=new yeti();
//将雪人图像yeti实例化
_ly.x=430;
//定义对象的横坐标
_ly.y=300;
//定义对象的纵坐标
stage.addChild (_ly);
//定义对象在影片中可见
(4)声明一个变量i,用于计算雪花的数量,并为影片添加监听事件,控制雪花的生成,如下所示。

var i:int=1;
//声明变量i用于计算雪花数量
addEventListener (Event.ENTER_FRAME,snow);
//定义影片播放时监听的事件函数
function snow (event:Event):void {
//创建自定义函数snow()
var scale:Number=Math.random()*.4;
//定义雪花的放大倍数
var _sf:snowflake=new snowflake();
//将雪花的图像snowflake实例化
_sf.x=Math.random()*528;
//定义雪花的随机横坐标
_sf.scaleX=scale;
//定义雪花的横向大小倍数
_sf.scaleY=scale;
//定义雪花的纵向大小倍数
var speed:Number=Math.random()*2;
//声明变量speed为随机生成的雪花下落速度
var RA:Array=new Array(-1,1);
//创建数组RA其值为-1和1
var lf:int=RA[Math.round(Math.random())];
//声明变量lf,其值为-1或1
i++;
//计数变量i叠加
stage.addChild (_sf);
//定义雪花在影片中可见
_sf.addEventListener (Event.ENTER_FRAME,snowfall);
//雪花对象下坠的事件
if (i>1000) {
//当雪花数量大于1000时
this.removeChildAt (3);
//删除影片中显示层次为3(背景为0,小雪人为1,雪人为2,第1个出现的雪花为3)
i=1000;
//雪花上限为1000
}
}
(5)在自定义函数snow()中创建一个新的自定义函数,用于控制每个雪花的旋转、下落以及左右摇晃,如下所示。

function snowfall (event:Event):void {
//创建自定义函数snowfall
_sf.y+=speed;
//为雪花应用下坠的速度
_sf.rotation+=Math.random()*20;
//定义雪花以随机的角速度旋转
_sf.x+=(Math.random()*2)*lf;
//定义雪花左右摇摆
}。

相关文档
最新文档