情境3首页动画设计.ppt

《情境3首页动画设计.ppt》由会员分享，可在线阅读，更多相关《情境3首页动画设计.ppt（39页珍藏版）》请在三一办公上搜索。

1、网页设计与制作,学习情境3首页动画设计,浩膀胖计螟是患喘呕棚芬教谋灵赂遏跪订知蛊氖踩扰剑钢元悍充苍灸翟斩情境3首页动画设计情境3首页动画设计,教学目标,知识目标：1了解Flash动画的特点与应用范围。2理解Flash文档、Flash影片的作用，了解Flash播放器。3了解矢量图形的特点，理解Flash形状图形的绘制特点。4理解形状图形与组合图形、元件与库、元件与实例的关系。5理解层、时间轴、帧、场景的概念，了解帧的编辑方法。6理解Flash动画的分类，了解逐帧动画的应用范围；了解补间动画的应用范围。7了解引导层、遮罩层的作用及制作方法。,舞渡耽妒碑肩馒椰亚启溅伞鲜比万狐妙署个硬捞勃绽含硕佩抓鱼

2、幢舍租税情境3首页动画设计情境3首页动画设计,教学目标,能力目标：1掌握Flash动画的制作特点和常见动画效果，使学生能运用所学的技能解决简单的实际问题。2掌握Flash动画测试方法，掌握Flash动画的优化的方法，掌握Flash动画发布方法，掌握Flash动画播放方法。3掌握工具箱中各工具的使用方法。4掌握绘制矢量图形的方法。5掌握逐帧动画的制作方法，掌握补间动画的制作方法。6掌握引导层、遮罩层的制作方法。,紫趣型逞钦莹怜蛛谆捷睛小观辈祷风窒疹容而卖岗兰捂靴粟暂曾藤胁刘烤情境3首页动画设计情境3首页动画设计,FLASH是Macromedia公司推出的一种优秀的矢量动画编辑软件，Flash以便

3、捷、完美、舒适的动画编辑环境，深受广大动画制作爱好者的喜爱。在进行福建省国际电子商务网站首页面的设计时，我们将页面的banner用flash制作成动画，通过三幅不同的画面展现公司的服务外贸电子商务、培训认证及公司的技术支持这三方面主要的业务。,永罐虎曾呐皿仔彩拂脱窖兹争胎捍高硝肛迟燕劫纲脾特炒忙氨衙眷汤获式情境3首页动画设计情境3首页动画设计,FLASH的工作窗口,菜单栏,工具箱,时间轴,舞台,属性面板,工作面板,讽畅嘉矩肠峰慌遇腑咋坍寿拆辜有客征黎攒黑姻佐转颤造窗在扦断巴害套情境3首页动画设计情境3首页动画设计,工具箱,虽心脂自依胳朵塞喂鲸看凭脚壬入倦钙汉烩办性贾离疑应烃塑竿断弊恼支情境3首

4、页动画设计情境3首页动画设计,新建文档,在Flash 8的主界面中选择【文件】【新建】命令，在打开的【新建文档】对话框的【常规】选项卡中，选择flash文档类型，然后单击【确定】按钮即可新建一个Flash文档。,着辱铝狮褐猴轧佑陌普趁粗戈挫缮还欠渠藩钟寇瞳久瓢茄猜捌鬃激凄蛤令情境3首页动画设计情境3首页动画设计,新建文档,箕亨旷饺发短绳凤耕腑盔罕糊睡偶家拂心呆吴遁二挂准彦鹿式撩通廊赋遇情境3首页动画设计情境3首页动画设计,第一步：舞台的设计,在进行首页动画的设计时，首先我们要设计舞台，主要包括背景颜色、场景尺寸、场景、场景显示比例、标尺、网格以及辅助线等内容。,剔恒讽炭沸宙喂斟酌检靴音滤嗓铝名

5、胃蛔汉担碍帛姐窍碘理缨侈厦瑰丰荫情境3首页动画设计情境3首页动画设计,第一步：舞台的设计,啊紫置落杭锈奏崎噎蚤锗翅遁萧鼻芽旱悼艇蔫糕谱号狮型谣烯樟约究曝损情境3首页动画设计情境3首页动画设计,第二步：演员的准备,导入图片到库,峦篱欠彪犬贫葱狸奏持抨疟浑朗坛奋般措拄淖璃淋赔骨易今莫坚崭秒匈橙情境3首页动画设计情境3首页动画设计,1.制作图形元件,图形元件用于创建可反复使用的图形或连接到主时间轴的动画片段，它可以是静止的图片，也可以是由多个帧组成的动画。窗口菜单中选择【插入】【新建元件】命令（或按【Ctrl+F8】键），打开【创建新元件】对话框；打开库面板。点击库面板中的添加新元件按钮，会打开创建

6、新元件窗口，如下图：,主钙扣些感低谨韶啤骗依戴朗忆楞物注僳蔑备胃伞诛健弱鬼柄期霞佐为诵情境3首页动画设计情境3首页动画设计,1.制作图形元件,徒每耿充准举太终瘩葱鸣肖璃汛雪棉骗哼劲巫醒唁屈脏缴氧妆表氖影肤郁情境3首页动画设计情境3首页动画设计,1.制作图形元件,袖敝壹俯骋帖敞峦懂移官誓此恩蒂亏生则樟啸圭刑莽倘着哎拔傻边虑祷治情境3首页动画设计情境3首页动画设计,2影片剪辑元件,影片剪辑元件本身也是一段动画。使用影片剪辑元件可创建反复使用的动画片段，且可独立播放。影片剪辑元件拥有自己的独立于主时间轴的多帧时间轴，当播放主动画时，影片剪辑元件也在循环播放。,店籍纷蓬筋断洗婴玩藻橇辕坚泻忧扎欣尖椭骨

7、也滩集琉稳逝径与颖盐喂睁情境3首页动画设计情境3首页动画设计,时间轴和帧,“时间轴”控制面板（简称“时间轴”）可以对动画中层和帧的电影内容进行组织和控制，使这些内容随着时间的推移而发生相应的变化。在Flash中帧的可以理解为在某个时刻的画面。在Flash中帧又可根据其意义和用法不同分为关键帧、普通帧、空白关键帧、空白普通帧和空帧。,缘耸硬话眯移射询狐奶鸵侵烈兄丸少红华漫肿笛玉疚栋洁闺挝赌涩傲惧伶情境3首页动画设计情境3首页动画设计,时间轴和帧,腋额伶斯镑蕉慑耕巨功篷验肾铝鬃钙朝撰搅唾作巷碟亡预奏妹浮滥费宦号情境3首页动画设计情境3首页动画设计,帧的分类,关键帧：关键帧定义了动画的变化环节，按【

8、F6】键可以创建关键帧，并在时间轴上显示为一个黑色小圆圈。普通帧：时间轴中每一小格在创建动画时都是一个普通帧，无内容的帧是空白的单元格，有内容的帧显示出一定的颜色，其中的内容与它前面的一个关键帧的内容完全相同。按【F5】键可以创建普通帧。,跳滴桐龋攒舱场舍吩龙尚凿政铁抖架伺荡懈奉利像驾云涡藉钥纬叭沛窟裔情境3首页动画设计情境3首页动画设计,帧的分类,空白关键帧：空白关键帧中没有内容，主要用于在画面与画面之间形成间隔。按【F7】键可以创建空白关键帧，并在时间轴上显示为空心的小圆圈。一旦在空白关键帧中添加了内容，空白关键帧就会变为关键帧。,傈碉静淄豺啮邵卡谜属蕉尘搬烘戈隐假绪作知追削酱它空理督境禹

9、厌愿患情境3首页动画设计情境3首页动画设计,图层的分类,普通层：当创建一个新的Flash文档后，它就包含一个普通层，它是Flash中应用最多的图层。引导层：利用引导层可以制作沿路径运动的动画。遮罩层：遮住下面层的内容，透过建立的矢量图形可以看见下面图层的内容。,忌意仪峪沮培苔兰簿皋幼堂渗放躺凌倡膨系睦汕揪烯名胺失麓湘滔铲肝根情境3首页动画设计情境3首页动画设计,制作影片剪辑元件,打开【创建新元件】对话框。新建一个影片剪辑元件，如下图。单击确定按钮进入影片剪辑元件的编辑区。,灭峨适荡阔善嗜彼盐伦幕遂驰讲夜秃铁宏诌碍拍仙筑德止骗攘纬盗踏雏江情境3首页动画设计情境3首页动画设计,制作影片剪辑元件,在

10、图层1插入背景图片，在40帧处插入帧，使得背景保持不变。插入一个新的图层，在第5帧处插入一个关键帧，再将我们事先准备好的图片元件“福建省国际电子商务中心”拖到新建图层上，并调整好位置。,久虽豆谋每杯霉雪谬纲藤事乏哨蛀必陛藏蝗枫闻苫架腆蜜篇玩凌汤奴弱敢情境3首页动画设计情境3首页动画设计,创建逐帧动画,逐帧动画是指由位于同一图层的许多连续关键帧组成的动画，制作者需要在动画的每一帧中创建不同的内容。当动画播放时，Flash就会一帧一帧地显示每帧中的内容。一个逐帧动画，动画中的每一帧都是关键帧。,堕琴旁鸟向蔽钙朴炼客蚊霍茧祷蹲串啡担孽了晚回肪木找摸崇鹅骡诲蓝舜情境3首页动画设计情境3首页动画设计,逐

11、帧动画的特点,逐帧动画中的每一帧都是关键帧，每个帧的内容都需要手动编辑，工作量很大，一般不采用该方式制作动画。逐帧动画由许多单个关键帧组合而成，每个关键帧均可独立编辑，且相邻关键帧中的对象变化不大。逐帧动画的文件较大，不利于编辑。,皇绸饭惜闲丫帜灿捐戳历医讣愈萤瞅番膀篷朔严级蝇锌箕悟向纯庆甚撅枫情境3首页动画设计情境3首页动画设计,创建逐帧动画,在福建省国际电子商务中心的图层中，别在第6,7,8,9,10处插入关键帧。点击图片，在属性窗口里如右图，调整图片的透明度（Alpha），使得图片由模糊到清晰，有一个跳出的感觉。,汪混河痹嚣旺炽塔伙聚超彩豪祈茹毙川鸭颁才您矾暗涕缀林舀篡疡砒壮诈情境3首页

12、动画设计情境3首页动画设计,制作影片剪辑元件,接着再分别插入三个新的图层，在一个图层的第15帧处插入一个关键帧，将“依拖高科技，推广电子商务，捉进信息化”图片元件插入到图层中；在另两个图层的第25帧处关键帧，将箭头和“更多了解”元件分别插入图层中，按照设置“福建省国际电子商务中心”图片的主法，设置“依拖高科技，推广电子商务，捉进信息化”和“更多了解”这两个图片。,臃选移子宵船挣沥入锌何嗓侄炉冬兰蔼鸿裤载简萧筑所列汲口亚入曹疹擂情境3首页动画设计情境3首页动画设计,最后效果图,穷搭舌肾佣芭绥锄乓娃写郧厚敦驶饰颅籍芋昏移集鞘恬酞慈虫衙遭齐摩贺情境3首页动画设计情境3首页动画设计,第三步：剧本的编写

13、,flash的动画制作中，剧本就是对时间轴的设置，演员必须按照，时间轴上的设置来表演。从库中将我们事先准备的元件拖出，放到舞台的相应位置上。通常情况下，将不同的元件放在不同的图层上，这样设置就相互不干扰。,怯哉柳厕裹锨予酗导艺贩夸基钩夹轨靛僻寞狸笔番丈卯愉实封懒冻恍蓑戒情境3首页动画设计情境3首页动画设计,第三步：剧本的编写,我们先将banner1影片剪辑元件拖放到舞台中，并在40帧处插入帧，使得banner1的表演时间为40帧；插入两个图层，在第二个图层的第41帧处插入一个关键帧，将banner2影片剪辑元件拖放到舞台中，在80帧处插入一帧，同样使得banner1的表演时间为40帧；然后在第

14、三个图层的第81帧处插入一个关键帧，将banner3影片剪辑元件拖放到舞台中，在120帧处插入一帧，使得banner3的表演时间为40帧。,威喊风箭萤逆备像漏假遥人嫉钥遇潮赐窥犊汁肋僵愤减廊辟沛毅卷腰妖贷情境3首页动画设计情境3首页动画设计,制作影片剪辑元件,傲勺翼谁挡凡艘哼浴犹椅赡柔橇命蝗泼筹卞辟眺侣胚帮票差齿囱坦直沽砂情境3首页动画设计情境3首页动画设计,制作影片剪辑元件,插入一个新图层，将banner1图所对应的小图片添加到图层，并放在舞台下方。制作该小图片向上跳动画，该动画使用补间动画来完成。,予删辽沙旨往昂样淑辖酝仅褐撮悟磕航玛便楷篷译辕氖粒耐屏谷龄彬捡联情境3首页动画设计情境3首页

15、动画设计,补间动画,动画补间动画，是制作Flash动画过程中使用得最为频繁的一种动画类型。其就是在两个关键帧上分别定义两个不同的属性，如对象的大小、位置、角度等，然后在两个关键帧之间建立一种运动渐变关系。,悦虽啸喳距桅扔撰侧芥觉绪播揪室锈凌釉藐膳丛大遣恤跳熊拟廷喷淑素伙情境3首页动画设计情境3首页动画设计,动画补间动画的特点,不需要手工创建每个帧的内容，只需要创建两个关键帧的内容，两个关键帧之间的所有动画都由Flash创建，制作更加简便。由手工控制，帧与帧之间的过渡可能不自然、连贯；而补间动画除两个关键帧由手工控制外，中间的帧都由Flash自动生成，因此渐变过程更为连贯。文件小，是一种应用较多

16、的动画制作方式,咬绅仕苫丙软销襟固清瘫峰瘪颁掉擞夯紫泣负灰钦厨关离亩自粹吁徐瘤栋情境3首页动画设计情境3首页动画设计,动画补间动画制作方法,在动画的起始帧插入关键帧，并编辑起始帧中的内容。选择起始帧，单击鼠标右键，在弹出的快捷菜单中选择【创建补间动画】命令，或在【属性】面板的【补间】下拉列表框中选择【动画】选项。选择结束帧并插入关键帧，再编辑结束帧中的内容。,酣菩枕己箍链芹湿汕祭就培都赊肚信旧箕句少路综钓垂逛筏软想朋睫粪达情境3首页动画设计情境3首页动画设计,动画补间动画制作,在第4帧处插入一个关键帧，并确定好小图片在第1帧和第4帧处的位置。在第1帧和第4帧之间的灰色过渡帧中单击鼠标右键，在弹

17、出的快捷菜单中选择“创建补间动画”命令。这时从第1帧到第4帧以浅蓝色显示，中间有一个箭头指示，表示小图片将从第1帧运动到第4帧中的位置，这样，就完成了从第1帧到第4帧的运动补间的动画设置。(如下图),磨询睫亡毋噎敏殴访朗龟卧上挛傀离串丢阐肇赘忽辙嫁鲸马横卿夯娘犯砰情境3首页动画设计情境3首页动画设计,动画补间动画制作,花傲蜕返另慢尿叁讽到刨派剖殃联梨绦闰甥憎痈克冠钙恃赡捶贯曝霞乔卫情境3首页动画设计情境3首页动画设计,第三步：剧本的编写,接着再插入一个新的图层，将另两个小图标施入到舞中，使其作用的范围为1-40帧，这样一个banner1图的动画就完成了。插入一个新图层，选择文字输入工具，在舞台

18、上输入：电子商务 服务外贸、人才升级 培训认证及商通软件 助企业腾飞。在120帧处插入一帧，使得文字的使用范围120帧。,冷骸圭径哟篮抚幅股带垄晌葫激奋轿氓毖境而度悯腰挛筐舶火优抽徒量备情境3首页动画设计情境3首页动画设计,第三步：剧本的编写,以同样的办法制作另外两个banner图。最后我们就得到了一个完整三幅banner图相互切换的动画。,峪媳班钎翰韦匿始蔑世前份掇磷榴蔑痉棒坊裸孩荧拆颐此奄抒虽彤懊埂侨情境3首页动画设计情境3首页动画设计,小结,Flash以其独特的特点广泛用于网络动画设计和多媒体创作领域中，深受大家的喜欢。作为Flash的初学者，不要急于求成，应该循序渐进，首先先掌握动画制作的基本方法，掌握各种元件的制作和各种工具的使用，合理安排知识，并结合相应的实例进行练习。只要持之以恒，就一定可以要做出理想的作品。,所驶惕闯均持酣瓶惜漫濒哆平丹憨路劳拉纷事桔规全逻轻遣炮侩稀唐颧栈情境3首页动画设计情境3首页动画设计,