Flash广告设计与制作-完整版课件(全)

1、多媒体动画设计FLASH 广告设计与制作-化妆品广告一项目目标二项目重点、难点三教学方法四课时安排五学习过程项目目标一知识目标：1、了解Flash广告的特点2、了解Flash广告的分类3、掌握Flash广告设计原则4、了解Flash转场设计5、掌握图片循环动画制作原理技能目标：1、能够进行Flash广告需求分析2、能独立设计Flash广告3、会制作常用的转场效果4、熟练制作动画5、会简单的脚本编程情感目标：根据需求分析及准备素材，并设计出符合主题的Flash广告，并能熟练地制作出，主要训练设计能力以及动画制作能力。项目重点、难点二【项目重点】各种动画的制作【项目难点】各个动画按时间先后以及播放

2、的时长在时间轴上的有序安排组合教学方法三1、讲授法：利用多媒体计算机教室，教师和学生示范演练同步操作，及时解决制作难题；在课堂上注意教学做结合，教师与学生互动，充分调动学生的积极性，培养学生的动手能力与职业技能，提高学生学习的积极性和团队合作意识与沟通能力。2、案例教学法：对于典型项目中的核心技能用生动、直观的案例进行导入。3、启发式教学法：学生掌握案例的制作方法后，对案例涉及的知识技能进行拓展提问，启发学生去思考，使学生能够举一反三，拓宽动画设计思路；4、任务驱动项目教学法：把真实的企业项目作为工作任务引入课堂，引导学生在完成任务的过程中模拟进入岗位角色，并以公司的工作制度、工作流程来要求学

3、生完成作品的创作。课时安排四【课时安排】共计：6学时 任务1 项目分解开场动画制作：2学时任务2 项目分解主体动画制作：2学时 任务3项目分解- 动画控制完善：2学时学习过程五1、创设任务激发兴趣2、学生探究学习3、协作创作4、作品欣赏交流评价5、积极探索课外延伸6、项目小结7、项目评价8、拓展训练创设任务激发兴趣1简要介绍并播放一个名为化妆品广告的Flash广告，并带领学生对这个广告进行分析其设计与制作方法，让学生看到其炫丽的外表下的实质，使学生产生精神上的共鸣，跃跃欲试快速进入学习状态。（1）需求分析本案例是一则品牌化妆品广告，要展示出此品牌的化妆品的一系列产品并能通过化妆后的效果，以此对

4、化妆品进行宣传。根据此要求，设计用三张背景图来构成三场，转场使用的是淡入淡出效果。第一场的背景出现是用遮罩层动画渐显出来的，产品的展示动画方式有闪白，由大到小，文字说明，以及循环滚动图片等，还添加了音乐。动画没有进行重复循环播放，而是播完后就停在最后，只是化妆品的组图在循环滚动播放，当把放到这个循环滚动组图上，则其停止滚动，移开鼠标时，则继续循环滚动播放。（2）任务提出创作一个名为“化妆品广告“的Flash动画作品。明确学习任务：1.布置任务。2.确定作品使用的创作方法。3.教师引领制作。4.协作创作。5.交流评价，培养学生在较短的时间内抓住事物的主要矛盾的能力。学生探究学习21.教师指导学生

5、进行规划，并听根据作品效果，给出作品评价标准。2.及时将学生探究的闪光点与全体学生交流。3.学生规划创作进程：（1）确定作品主题。（2）构思作品呈现方式。（3）选择创作工具。（4）对我们所掌握的知识、技能进行分析，我们进行创作还需学习哪些新知识和技能。培养学生的主动学习意识，为调动学生有效进行探究、创作提供保障。协同创作31.巡视。2.指导。3.调控课堂气氛，展开学生创作，交流协助，师生交流反馈，鼓励学生自主创作。作品欣赏交流评价41.指导学生进行自评。2.引导学生通过网络平台开展互评。3.根据发现的有创意的思路或是新的操作方法，请学生代表通过网络教室进行演示。（1）网上在线呈交作品。（2）欣

6、赏作品。（3）根据评价表和作品创作说明（见附表），进行学生自评、互评、教师评价。对于提交的作品，学生可以通过网络教室平台，对每个作品进行评论。实施作品网上评论，展示自我风采。让学生在尽情欣赏同学们的作品，并毫不保留地对这些作品加以品头论足，审美能力得以提高，语言表达和思维能力也得以训练。积极探索课外延伸5介绍一些好的Flash网站及论坛，让那些对Flash情有独钟的学生得到更大空间的提高，找到展示自己的舞台。项目小结6通过本项目，从设计到制作让学生有了一定的设计及制作动画的能力。对广告的设计原则以及网络广告的类型有了一个整体的了解，对整体动画的制作以及在时间轴上按要求按时间先后组合更得心应手，

7、学到了在动画设计中常用的表现手法以及转场方式，基本能按自己的想法来控制动画。在操作过程中，除了考核记录学生的个人完成情况，还特别考评了学生的审美能力，将综合效果作为考评结果。项目评价7评价项目评价标准满分得分自评教师评素材准备情况掌握素材的搜集渠道，并能解决本项目所需完成的任务10软件操作能力在实际操作过程中对软件使用的熟练程度，是否能在规定时间内完成作品的制作20动画设计能力在实际操作过程中的动画设计能力，能否能够根据项目需求，设计合适的动画30举手发言在教学课程中能积极参加讨论，提出自己的看法和见解10完成作品质量动画作品完成之后的效果，是否达到项目要求，色彩搭配合理，动画设计合理。30总

8、分100拓展训练8根据要求，使用Flash进行设计创作，利用所学内容创作一个Flash广告动画。要求：（1）构思完整，要有主题（2）设计有创意，不同于课本例题。（3）自行设计动画效果，至少包括3种动画类型。（4）将动画作品上传至教师机。本次课训练内容：设计广告动画 参考案例效果如图所示：项目六 FLASH广告设计与制作任务6.1 案例分解开场动画制作任务目标一1、了解Flash广告的特点2、了解Flash广告设计原则与类型3、了解整体动画制作规范4、制作开场动画任务重点、难点、课时安排二【任务重点】制作开场动画【任务难点】按需求在时间轴上安排并制作动画【课时安排】共计：2学时学习过程三1、知识

9、讲解2、步骤详解3、任务小结4、任务评价5、相关素材1Flash广告的特点1）文件占用空间小，传输速度快2）矢量绘图、传播广泛3）动画的输出格式4）强大的交互功能5）可扩展性2Flash广告设计原则把握主题是FLssh广告设计的原则。无论什么样的商业广告都一定会有一个主题也就是它宣传什么。希望从广告的宣传中得到什么效益。所以在制作广告时一定要把主题把握住，根据主题来制作FIash广告。知识讲解13 Flash广告的分类网络广告的分类，可以按照投放目的、投放形式两种划分方法： 投放目的按照投放目的划分方法，是以网络广告投放最终的需求来分类的。一般而言可以分为:信息传播类信息传播类的广告，其目的是

10、将某个消息传播出去，其目的主要是将新产品上市的信息让更多的人知道。品牌广告类 品牌广告，是针对某一个品牌进行的宣传，其目的是为了提升品牌的知名度和美誉度。比如爱立信在通信世界网上投放的介绍自己业绩的广告，就是属于品牌广告。知识讲解1销售/引导类广告销售类广告，目的就是为了销售出去产品。比如大家经常看到的SP的图铃广告都可以归到这类里边去。销售类广告，如果现售的产品是网络产品，那么可以通过实际的销售结果进行衡量。这类广告是属于“抓到老鼠就是好猫”的一类广告，一般不管投放到什么地方去，只要能卖出去东西就可以。不过，这也带来的挂羊头卖狗肉的情况发生。比如SP的包月服务，经常被挂着一些“色情”的头去欺

11、骗用户。 投放形式随着网络广告的不断发展，网络广告的投放形式也不断翻新。现在的网络广告形式有以下几种：片头动画片头动画是指在网站或多媒体光盘前，运用Flash等软件制作的一段动画诠释了整个光盘内容，并浓缩了企业文化的一段简短多媒体动画。它具有简练、精彩的特性。 一段优秀的片头设计，代表了一个可以移动的品牌形象，可以运用在企业对外宣传片、行业展会现场、产品发布会现场、项目洽谈演示文档，甚至企业内部酒会等多个领域。知识讲解1横幅广告（Banner广告）横幅广告是最早采用，也是最常见的广告形式。它是通过网络媒体发布广告信息的一种新型广告形式，它通过在网上放置一定尺寸的广告条来告诉网友相关信息，进一步

12、通过吸引网友点击广告进入商家指定的网页，从而达到全面介绍信息、展示产品和及时获得网友反馈等目的。它的特点是，在某一个或者某一类页面的相对固定位置放置广告。 横幅广告将广告、动画和网络结合在一起，是一种新兴的广告媒体。在网络高速发展的时代，商家也越来越重视这被称为“第四媒体”的沟通和营销的新载体。它的推出也反映出全球网络化营销的新趋势。 这种广告，一般是定期更换，手工或者自动的通过统一的系统进行投放。广告由广告主与网站主协商确定，与内容无关。知识讲解1上下文相关广告上下文相关广告，是在Banner广告的基础上，增加广告与上下文的相关性，由广告投放平台通过分析投放广告的页面内容，然后从广告库中提取

13、出相关的广告进行投放。上下文相关广告最早是GOOGLE开始推出，后来，百度、SOGOU等都相近推出。图标广告图标广告就是具有按钮效果的广告，与一般按钮不同的是它不仅可以实现按钮功能，即链接到另外一个网页，同时具有良好的广告效果，因此很多网站经常用它来宣传自己或通过它来建立与其他网站的友情链接。另外，在很多网页上看到的浮动广告也是其中一种形式。弹出式广告弹出式广告的历史之比固定未知广告晚一些。弹出式广告早期是在页面打开的时候，使用JavaScript代码打开新窗口的方式显示广告。后来，逐步的有所变化：一种是JavaScript打开的窗口，不在是一个广告窗口，而直接是内容页面；第二种是部分弹窗广告

14、采取后弹模式，也就是说，当页面载入完成后弹在当前页面后；第三种是部分弹窗广告采取关闭触发的模式，也就是说，当用户关闭窗口，或者离开当前页面的时候弹出；知识讲解1弹出式广告，严重影响用户的访问体验，但是，因为其对ALEXA排名的提升，对宣传效果的突出，使很多广告主对此很是喜爱，价格也比较高，所以弹出式广告一直没有被杜绝。内文提示广告内文提示广告，也叫“划词广告”，即在内文中，划出一些关键字，然后当鼠标移动到上边的时候，使用提示窗口的方式显示相关的广告内容。这种广告形式，比较新颖。广告平台我所知的是宏界。这种广告比较有特色的是既与上下文相关，又不占用页面位置。插件/工具条安装广告随着网络的发展，很

15、多插件、工具条为了获得大量的用户基础，开始有了推广的需求，软件/插件安装广告即应允而生。知识讲解1早期的插件/工具条的安装，都会有明确的提示。因为部分用户对网络知识的了解匮乏，以及对网站的信任，安装率非常高。后来随着插件的泛滥，以及插件给电脑本身带来的危害，用户开始拒绝插件安装。后期的很多插件开始使用病毒手段，在不提示的情况下，强制安装。随着舆论的声讨，以及插件服务商之间的争斗，垃圾插件被广泛的质疑，插件/工具条安装广告也开始逐步走向没落。但是在一定范围内，特别是部分个人网站上仍然存在。在这些广告形式中，目前比较常用的有片头动画、横幅广告、图标广告和弹出式广告。 知识讲解11、背景渐显动画，使

16、用遮罩动画实现，如图所示。步骤详解22. 图像闪烁动画一个图标在背景左上角出现并闪烁几次，通过改变元件的色调，使用逐帧动画实现。如图所示。步骤详解23.化妆产品出现化妆产品出现效果为由大到小，由透明到不透明的效果，由传统补间动画实现；然后闪烁几次，此效果同上做法，如图所示步骤详解2任务小结3通过本任务，让学生学会闪白动画的制作方法，在时间轴上如何按需安排动画以及对动画时间的把握，了解制作整体动画的规范。除了考核记录学生的个人完成情况，还特别考评动画制作是否规范，将综合效果作为考评结果。任务评价4评价项目评价标准满分得分自评教师评素材准备情况掌握素材的搜集渠道，并能解决本项目所需完成的任务10软

17、件操作能力在实际操作过程中对软件使用的熟练程度，是否能在规定时间内完成作品的制作20动画设计能力在实际操作过程中的动画设计能力，能否能够根据项目需求，设计合适的动画30举手发言在教学课程中能积极参加讨论，提出自己的看法和见解10完成作品质量动画作品完成之后的效果，是否达到项目要求，色彩搭配合理，动画设计合理。30总分100相关素材5 项目六 FLASH广告设计与制作任务6.2案例分解主体动画制作任务目标一1、了解常用动画转场效果2、掌握循环背景动画原理2、能够制作循环背景动画3、能够制作转场动画任务重点、难点、课时安排二【任务重点】转场动画制作与循环背景动画制作【任务难点】循环背景动画制作【课

18、时安排】共计：2学时学习过程三1、知识讲解2、步骤详解3、任务小结4、任务评价5、相关素材1Flash转场所谓转场效果，简单来说就是从一个场景（或画面）切换到另一个场景（或画面）时，两者重叠期间用来过渡的动画效果。我们最常见的转场效果一般出现在后期剪辑过的婚庆录像片，或者开会时演讲者使用的PPT幻灯片中，比如马赛克、百叶窗、淡入/淡出等等。 2循环背景动画原理要让Flash中的几张图片循环滚动，最简单的原理就是把连续图片再复制一份接到尾部，待第一张图片滚完之后被复制的接着滚动。原理图示如图所示：知识讲解1不管是用AS控制还是利用帧手工制作都可以使用这个原理，示意图中，共有两张图片为“图片一”和

19、“图片二”并将他复制一组。当第一组滚出显视区时，第二组正好接替进入了显视区回到我们第一帧的起始状态。如果用帧控制，只要直接跳回起始的第一帧就行了;如果是用AS程序控制，我们再把第一组的x轴位置重新设置接到第二组后面也一样可以构成图片循环滚动。知识讲解11. 第二幕动画背景搭建与出现组建第二幕背景，并做从第一场第二场的转场效果，第一场淡出，第二场淡入，淡入淡出效果使用Alpha的透明度来控制，使用传统补间动画完成该动画。效果如图所示。步骤详解22.文字出现动画实现文字宣传功能，分别为从右侧进入以及由小到大，由透明到不透明的动画，两组文字一前一后出现，都是由传统补间动画实现的。如图所示。步骤详解2

20、3. 第三幕背景搭建与出现第三幕背景搭建，实现第二幕与第三幕的转场动画，同样是以第二幕的淡出与第三幕的淡入效果实现的。如图所示，使用传统补间动画完成该动画。步骤详解24. 图片循环动画制作把用本化妆品化妆后的效果图进行循环滚动播放，先把这些图在元件中组合成一个整体，然后使用传统补间动画实现滚动播放效果。再把此图片滚动动画放置于背景的一个具体位置具体区域，此效果使用遮罩动画实现。效果如图所示。步骤详解25. 标语定位动画制作动画最后出现一个标语，由小到大，由透明到不透明效果，出现后在画面中停留一会，移到画面的右上角并缩小，此动画都是由传统补间动画实现的。如图所示。步骤详解2任务小结3通过本任务，

21、学生学会了常用的转场效果并会制作转场动画，基本会做循环背景动画，对时间的把握与在时间轴上动画的安排更加自如。在操作过程中，除了考核记录学生的个人完成情况，还特别考评了动画制作的规范性，将综合效果作为考评结果。任务评价4评价项目评价标准满分得分自评教师评素材准备情况掌握素材的搜集渠道，并能解决本项目所需完成的任务10软件操作能力在实际操作过程中对软件使用的熟练程度，是否能在规定时间内完成作品的制作20动画设计能力在实际操作过程中的动画设计能力，能否能够根据项目需求，设计合适的动画30举手发言在教学课程中能积极参加讨论，提出自己的看法和见解10完成作品质量动画作品完成之后的效果，是否达到项目要求，

22、色彩搭配合理，动画设计合理。30总分100相关素材5 作务6.3案例分解动画控制完善项目六 FLASH广告设计与制作任务目标一1、熟练控制动画2、熟悉影片剪辑控制脚本3、正确运用路径4、熟悉音乐的添加控制任务重点、难点、课时安排二【任务重点】脚本控制动画【任务难点】影片剪辑控制脚本与路径【课时安排】共计：2学时学习过程三1、知识讲解2、步骤详解3、任务小结4、任务评价5、相关素材1为影片剪辑添加鼠标事件onClipEvent影片剪辑事件on是按钮事件影片剪辑其实一样可以当按钮使用。当为影片剪辑本身添加鼠标事件时，其语法以及代码与在按钮上是一样的。 On（事件） 例如：执行的语句。上面的语句没有

23、指明路径，当添加在按钮上时，它控制的是包含有按钮对象的当前时间轴，即按钮的父时间轴；当添加在影片剪辑对象上时，它控制的是影片剪辑对象自身的时间轴，由于控制自身时间轴不需要指明路径，因此也不必在“属性”面板中命名。知识讲解1on (release) play();如果要在影片剪辑上添加控制当前场景的动作，则需要指明路径，如：on （rollOut） _root.play（）;如果要在按钮上添加控制位于同一场景的影片剪辑，则需要在属性面板中为影片剪辑命名，并指明路径，如：on （release） _root.shu_mc.stop（）;路径概念非常重要，在编写动作脚本时，如果路径的指向不正确，就实

24、现不了预期的效果。知识讲解1为影片剪辑添加动作的方法是，选中场景上要为其添加动作的影片剪辑，这时“动作”面板标题栏上显示的标题是“动作-影片剪辑”，这表明当前要为其添加脚本的对象是影片剪辑，然后在脚本编辑窗口中添加动作。2路径路径分为绝对路径与相对路径。1）绝对路径如果校长要找学生，可以先找到下一级的老师，老师在找下一级的学生，表示如下：校长.老师.学生主场景（_root）好比是校长，主场景中的影片剪辑（mcA）好比是老师，影片剪辑（mc1）好比是学生，如果要在主场景中访问影片剪辑 mc1，用如下方式：知识讲解1_root.mcA.mc1;在Flash影片中从起点调用影片剪辑，这样的语法称为绝

25、对路径。范例：使用绝对路径（1）打开Flash，新建一个Flash文档。（2）在主场景中建立一个实例名为mcA的影片剪辑实例，双击mcA进入元件的编辑场景，建立一个实例名为mc1的影片剪辑实例。（3）返回主场景，新建一层，单击此层的第一帧，打开“动作”面板，输入下列代码：trace（_root.mcA._width）;trace（_root.mcA.mc1._width）;（4）测试影片，观看“输出”面板中输出的数据，如图所示。知识讲解1_root.mcA.mc1;在Flash影片中从起点调用影片剪辑，这样的语法称为绝对路径。范例：使用绝对路径（1）打开Flash，新建一个Flash文档。（2

26、）在主场景中建立一个实例名为mcA的影片剪辑实例，双击mcA进入元件的编辑场景，建立一个实例名为mc1的影片剪辑实例。（3）返回主场景，新建一层，单击此层的第一帧，打开“动作”面板，输入下列代码：trace（_root.mcA._width）;trace（_root.mcA.mc1._width）;（4）测试影片，观看“输出”面板中输出的数据，如图所示。知识讲解1返回主场景，把主场景第一帧的代码中改为：trace（mcA._width）;trace（mcA.mc1._width）;测试结果一样的。（5）返回主场景，把第一帧中的代码加上注释，在主场景中加入一个按钮，单击按钮，打开动作面板，输入下

27、列代码：on（release）trace（_root.mcA._width）;trace（_root.mcA.mc1._width）;测试影片，单击按钮，观看测试结果。知识讲解1on（release）trace（mcA._width）;trace（mcA.mc1._width）;测试影片：单击按钮，观看测试结果，测试结果不变。从测试结果可看出，主场景中的按钮上的代码可以看成是在主场景中的时间轴上执行，所以可以不加_root。知识讲解1（6）返回主场景，把按钮中的代码加上注释，双击场景中的影片剪辑实例，在第一帧上加上下列代码：trace（_root.mcA._width）;trace（_root

28、.mcA.mc1._width）;测试影片，结果与前面相同。（7）关闭测试窗口，把第一帧上的代码改为trace（mcA._width）;trace（mcA.mc1._width）;测试影片，结果错误，如图6-55所示。从测试结果可以看出，影片剪辑有自己的时间轴，它的代码是在自己的时间轴上执行。所以必须加路径_root。通过使用绝对路径，可以在影片的任意位置调用影片剪辑的属性。当影片剪辑的实例的路径变了，就要修改很多代码。知识讲解12）相对路径Flash文件可以由多个影片组成，一个影片可以从外部动态地导入到另一个影片的影片剪辑中，比如，影片1.swf被导入到影片main.swf中的影片剪辑实例m

29、c中，如果在影片1.swf中的程序中有_root，导入到mc后，不再是主场景，所以路径改变，这时1.swf中的代码就不能正确地执行，这时，就要用相对路径来解决这个问题。相对路径是以自己所处的起点去访问其它的变量或影片剪辑。范例：使用相对路径（1）新建一个Flash文档（2）建立如图所示的影片剪辑实例及结构知识讲解1（3）单击主场景的第一帧，打开“动作”面板，输入下列代码：var root_var=“_root”;/在主场景中定义一个字符串变量，代表主场景（4）在4个影片剪辑实例的时间轴的第一帧上分别定义一个变量，如下所示：在mcB中：var mcB_var=“mcB”;在mc2中：var mc2_var=“mc2”;在mcA中：var mcA_var=“mcA”;在mc1中：var mc1_var=“mc1”;（5）在mcB的时间轴上的第一帧上输入下列代码： trace（_parent.root_var）;知识讲解1（6