《Animate动画设计与制作实例教程（Animate CC 2019）项目九制作网站》由会员分享，可在线阅读，更多相关《Animate动画设计与制作实例教程（Animate CC 2019）项目九制作网站（41页珍藏版）》请在金锄头文库上搜索。
1、单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,Animate动画设计与制作实例教程（Animate CC 2019）,项目九,制作网站,项目简介,在网络普及的现代社会，越来越多的企业或个人用户开始制作属于自己的动态网站。Animate与其他可以制作网页的动画制作软件相比，具有更强大的交互性。要想使用Animate制作出美观的网页，并使用户能够自由控制动画，首先就必须了解ActionScript的基础知识，以及如何向影片添加交互性动作。,本项目主要介绍在Animate动画设计中经常用
2、到的函数和类对象，并通过3个应用范例，讲解应用Animate CC 2019制作网站的方法和技巧。通过本项目的学习，读者可以掌握实现交互动画的方法，学会使用Animate CC 2019设计、制作网站。,学习目标,掌握影片剪辑控制脚本的使用方法；,掌握网页元素控制脚本的使用方法；,掌握键盘事件的使用方法；,掌握摄影网页、学院招生网站、产品销售网站的制作方法。,ActionScript 3.0脚本在“动作”面板中脚本窗口内进行编辑，如图9-1所示，在“动作”面板中，可以使用内置的“代码片段”工具简化脚本设计和编写，代码片段中集成了常见的各种事件和功能代码。选定对象，直接双击相应代码片段即可把代码
3、添加到编辑框内，根据实际需要完善修改即可，其调入可以直接在“动作”面板中单击脚本选项中的快捷工具图标调入，也可通过在主菜单中执行“窗口”“代码片段”命令，在打开的对话框中调入，如图9-2所示。,9,.1,知识准备交互式动画的制作,图9-1 图9-2,1影片剪辑元件的属性,（1）坐标：Animate场景中的每个对象都有它的坐标，坐标值以像素为单位。Animate场景的左上角为坐标原点，它的坐标位置为(0,0)，前一个表示水平坐标，后一个表示垂直坐标。Animate默认的场景大小为550像素400像素，即场景右下角的坐标为(550,400)。场景中的每一点分别用X和Y表示x坐标值和y坐标值。,（2
4、）鼠标指针位置：利用影片剪辑元件的属性，不但可以获得坐标位置，还可以获得鼠标指针位置，即鼠标指针在影片中的坐标位置。表示鼠标指针坐标属性的关键字是mouseX和mouseY，其中mouseX代表指针的水平坐标位置，mouseY代表指针的垂直坐标位置。,9.1.1影片剪辑控制脚本,（3）旋转方向：rotation属性代表影片剪辑的旋转方向，它是一个角度值，范围为180180，可以是整数，也可以是浮点数。如果将它的值设置在这个范围之外，系统会自动将其转换为这个范围之间的值。,（4）可见性：visible属性即可见性，使用布尔值true（1）或者false（0）表示。为true表示影片剪辑可见，即显
5、示影片剪辑；为false表示影片剪辑不可见，即隐藏影片剪辑。,（5）透明度：alpha属性决定了影片剪辑的透明程度，范围为0100，0代表完全透明，100表示不透明。,（6）缩放属性：影片剪辑的缩放属性包括横向缩放scaleX和纵向缩放scaleY。scaleX和scaleY的值代表相对于“库”面板中原影片剪辑的横向尺寸width和纵向尺寸height的百分比，而与场景中影片剪辑实例的尺寸无关。,（7）尺寸属性：与scaleX/scaleY值的属性不同，width和height代表影片剪辑的绝对宽度和高度，而不是相对比例。,2绝对路径和相对路径,路径分为绝对路径和相对路径，它们的区别是到达目标
6、对象的出发点不同。绝对路径是以当前主场景（即根时间轴）为出发点，以目标对象为结束点；而相对路径则是从发出指令的对象所在的时间轴为出发点，以目标对象为结束点。,3载入库中的影片剪辑,在Animate中，可以从“库”面板中将影片剪辑拖到“舞台”上，使它们出现在SWF文件中。当使用ActionScript 3.0添加影片剪辑时，实际上是将一个影片实例添加到时间轴上。帧是时间轴的一部分，可以使用“动作”面板将ActionScript 3.0代码与帧关联。,用于添加影片剪辑的ActionScript 3.0代码有以下2个。,（1）DisplayObjectContainer类,DisplayObject
7、Container类是可用作显示列表中显示对象容器的所有对象的基类。使用DisplayObjectContainer类可排列显示列表中的显示对象。每个DisplayObjectContainer对象都有自己的子级列表，用于组织对象的z轴顺序。z轴顺序是由前至后，可确定哪个对象绘制在前，哪个对象绘制在后等。,（2）addChild()方法,格式为：public function addChild(child:DisplayObject):DisplayObject,功能：将一个DisplayObject子实例添加到该DisplayObjectContainer实例中。子项将被添加到该Displa
8、yObjectContainer实例中其他子项的前（上）面（要将某子项添加到特定索引位置，应使用addChildAt()方法）。,参数child:DisplayObject是作为该DisplayObjectContainer实例的子项添加的DisplayObject实例。,4拖曳影片剪辑,在ActionScript 3.0中，startDrag()方法的一般形式如下。,publicfunctionstartDrag(lockCenter:Boolean=false,bounds:Rectangle=null):void,该方法允许用户拖动指定的Sprite。Sprite将一直保持可拖动，直到通
9、过调用Sprite.stopDrag()方法来明确停止，或直到将另一个Sprite变为可拖动为止。在同一时间只有一个 Sprite是可拖动的。,lockCenter:Boolean：指定是将可拖动的 Sprite锁定到鼠标指针位置中央（true），还是锁定到用户首次单击该Sprite时所在的点上（false）。,bounds:Rectangle：相对于Sprite父级的坐标值，用于指定Sprite约束矩形。,stopDrag()方法可以实现停止拖曳影片，这个方法没有参数。通过startDrag()方法变为可拖动的Sprite将一直保持可拖动状态，直到添加stopDrag()方法或另一个Spri
10、te变为可拖动状态为止（在同一时间只有一个 Sprite 是可拖动的）。,1fscommand()方法,该方法用于控制Flash播放器的播放环境及播放效果。其语法格式如下。,publicfunctionfscommand(command,args):void,2navigateToURL()方法,navigateToURL()方法位于包中，用于为事件添加超级链接，包括电子邮件链接。其语法格式如下。,navigateToURL(request,window):void,9.1.2网页元素控制脚本,3Loader类,Loader类可用于加载SWF文件或图像（JPG、PNG或GIF）文件。使用loa
11、d()方法来启动加载。被加载的显示对象将作为Loader对象的子级添加。,（1）load()方法,load()方法语法格式如下。,publicfunctionload(request:URLRequest,context:LoaderContext=null):void,（2）unload()方法,unload()方法语法格式如下。,publicfunctionunload():void,4removeChild()方法和removeChildAt()方法,使用removeChild()方法，将影片剪辑实例名作为参数，可以将其从“舞台”上删除。如删除当前时间轴所在“舞台”上的影片剪辑实例myM
12、ovieClip，就可以使用语句：this.removeChild(myMovieClip);。也可以使用removeChildAt()方法使用索引号作为参数删除某个影片剪辑。,5URLLoader类,URLLoader类以文本、二进制数据或URL编码变量的形式从URL下载数据。,格式：URLLoader(request:URLRequest=null),作用：创建URLLoader对象。,参数：request:URLRequest(default=null)是一个URLRequest对象，指定要下载的URL。如果省略该参数，则不开始加载操作。如果已指定参数，则立即开始加载操作。,6计时器、日
13、期、声音类,（1）Timer类,Timer类是Flash Player计时器的接口。可以创建新的Timer对象，以便按指定的时间顺序运行代码。使用start()方法来启动计时器。为timer事件添加事件侦听器，以便将代码设置为按计时器间隔运行。,（2）Date类,Date类表示日期和时间信息。,Date()构造函数的作用是构造一个新的Date对象，该对象将保存指定的日期和时间。,Date()构造函数使用最多7个参数（year、month、millisecond）指定日期和时间。,Date()构造函数语法如下。,publicfunctionDate(yearOrTimevalue:Object,
14、month:Number,date:Number=1,hour:,Number=0,minute:Number=0,second:Number=0,millisecond:Number=0),（3）Sound类,使用Sound类可以创建新的Sound对象、将外部MP3文件加载到该对象并播放该文件、关闭声音流，以及访问有关声音的数据，如有关流中字节数和ID3元数据的信息。,Sound()构造函数：创建一个新的Sound对象。,Play()方法：生成一个新的SoundChannel对象来回放该声音。此方法返回SoundChannel对象，该对象可停止声音并监控音量。,键盘操作也是Animate用户
15、交互操作的重要事件。在ActionScript 3.0中使用KeyboardEvent类来处理键盘操作事件。,它有两种类型的键盘事件：KeyboardEvent.KEY_DOWN和KeyboardEvent.KEY_UP。,KeyboardEvent.KEY_DOWN：定义按下键盘按键时的事件。,KeyboardEvent.KEY_UP：定义松开键盘按键时的事件。,9.1.3键盘事件,9.2.1案例效果分析,本案例制作一个摄影机构的网页，界面采用黑色背景，黑白对比体现了婚纱摄影机构的专业化；导航条设计简洁而实用，极大地方便客户了解企业的产品，进行服务咨询、技术支持等；多张作品图片相互切换，展示
16、了摄影机构精湛的摄影技术和实力。静帧效果如图9-52所示。,9.2,任务一制作菲凡摄影网页,图9-52,9.2.2设计思路,（1）制作3种不同的“遮罩”元件。,（2）依次使用多个遮罩层，形成多张图片相互切换的效果。,（3）制作网站背景。,9.2.3相关知识和技能点,使用影片剪辑元件制作“遮罩”图形；使用遮罩动画制作多张图片相互切换的效果；使用影片剪辑元件制作百叶窗效果。,（1）新建一个Animate CC 2019影片文档，设置舞台尺寸为800像素600像素，其他参数保持默认，保存影片文档为“菲凡摄影.fla”。,（2）执行“文件”“导入”“导入到库”命令，将要使用的素材图片导入“库”面板中。,（3）按Ctrl+F8组合键新建图形元件“百叶”，使用“矩形”工具在“舞台”上绘制一个矩形条，如图9-53所示。,9.2.4任务实施,图9-53,（4）新建影片剪辑元件“百叶动”，将“百叶”图形元件拖到“舞台”中，在第18帧添加关键帧。调整第1帧矩形条的宽度，如图9-54所示，创建传统补间动画，如图9-55所示。新建“图层2”，在第18帧添加关键帧，调出“动作”面板，输入图9-56所示的代码。,
