《网页动画设计与制作》讲义

网页动画设计与制作讲义学习指导：在你学习本课程之前，你应该要先学习网页美术设计课程和用户界面设计课程，对网页有了基本的认识。引言网页动画设计与制作课程，确定两个制作项目案例：Flash交互动画广告制作和HTML5交互动画广告制作。网页动画广告具有传播范围广、交互性强、针对性强并且能够精确统计受众的数量和接受程度等种种传统广告不可比拟的优势，受到了广大广告主的欢迎，成为了品牌推广、商业活动 等等重要的宣传手段之一。b5E2RGbC目前网页动画广告的市场正在以惊人的速度增长，网页动画广告发挥的效用越来越显得重要。以致广告界甚至认为互联网络将超越路牌，成为传统四大媒体（电视、广播、报纸、杂志）之后的第五大媒体。因而众多国际级的广告公司都成立了专门的“网络媒体分部”，以开拓网页动画广告的巨大市场。p1EanqFD定义什么是网页动画广告？网页动画广告指运用专业的广告横幅、文本链接、多媒体的方法，在互联网刊登或发布广告，通过网络传递到互联网用户的一种高科技广告运作方式。DXDiTa9E学习目标通过任务引领型的项目活动，熟悉平面设计软件Photoshop和 Illustrator ，网页动画制作软件Flash和Edge，并能将这些软件运用到网页动画设计与制作中，熟悉网页动画设计与制作的一般步骤，熟悉在设计过程中常用到的色彩搭配、图形组合、界面布局知识，以完整网页动画设计为任务，熟悉设计过程中的重要环节：项目分析与理解、UI界面分析、交互动作设计表现、动画和节奏制作规划等。形成良好的团结协作精神，主动适应团队工作的职业素养。RTCrpUDG职业能力培养目标l 能了解网页动画设计与制作涉及的相关行业及岗位工作内容。l 能了解网页动画设计与制作的通用制作流程。l 能了解网页动画制作工具Adobe Flash和Adobe Edge的操作使用规范。l 能掌握网页动画设计方法及基本制作步骤。l 能掌握运用Adobe Flash、Adobe Edge等软件制作网页动画的基本方法。l 能具备综合运用各方面知识设计并制作网页动画的基本能力。1.1、网页动画广告的历史和前景据艾瑞咨询集团近日发布的一份中国网络广告市场份额报告预测，2011年中国网络广告市场规模将达到 370 亿元，与 2007 年的 106 亿元相比增加两倍多。 报告对 2007 年中国网络广告市场份额进行了分析，去年中国网络广告持续快速增长，市场规模达 106 亿元， 同比增长 753。其中，品牌广告和搜索引擎广告都不同程度推动中国网络广告市场规模 增长，其中品牌广告同比增长 653，搜索引擎广告 1086。5PCzVD7H1.2、网页动画广告的优势（1） 网页动画广告的传播冲破了时间和空间的限制通过国际互联网络把广告信息 24 小时不间断地传播到世界各地。只要具备上网条 件，任何人在任何地点都可以阅读。jLBHrnAI（2） 网页动画广告可以精确进行受众信息的统计在互联网上可以通过广告的报表系统可以精确的统计出广告有多少次点击量，以及具体是什么地方的用户，在什么时间段等等即时的数据和信息。 从而有助于客商正确评估广告效果，审定广告投放策略，以便达到更好的广告投放效果。xHAQX74J（3） 网页动画广告传播模式的交互性、人性化在互联网广告中，用户被赋予了相当大的主动性，用户可以跟内容之间发生很多交互行为，比如用户可以根据主观意愿随意 改变信息的来源、顺序、数量等等，而内容本身也会根据用户的信息、操作的习惯等等调 整信息内容、改变信息显示方式，从而更加迎合用户的需要达到交互的目的。所以我们在网上浏览的时候可以关闭或者缩小广告，也会发现当我们浏览数码产品内容的时候，呈现的广告也恰好是关于数码产品主题的，而且如果受众对这个广告感兴趣的话还可以点击对于的按钮获取更多的信息。这样广告厂商就可以直接更潜在的消费者建立了某种意义上的联系，如果加上电子商务的配合，完全可以实现实际的购买消费行为。LDAYtRyK（4） 网页动画广告的多媒体性随着互联网逐渐发展成实时的、动态的、交互的多媒体世界时，网页动画广告也同样的具有非常强烈的多媒体特征。网页动画广告可以把文字、图片、声音、动画、 三维、影视等等各个方面结合起来，创造出美轮美奂的视觉效果。Zzz6ZB2L1.3、网页动画广告的类型（1）、网幅广告（Banner）网幅广告是互联网上最常见、最基础、最流行的一种广告形式，约占所有互联网广告的百分之六十。网幅广告一般以限定尺度表现商家广告内容的图片形式，放置在广告商的页面上。网幅广告从外形上主要有横幅广告、竖幅广告和方形广告三种；网幅广告从运动形态上分可以分为静态广告、动画广告和交互广告三种。dvzfvkwM（2）、视频广告网络视频广告其实就是电视广告中网络媒介上的移植，主要的投放方式有两种。一种是投放在传统网页上的播放视窗，基本上是在不影响网页载入的情况下在网页的左下角或者 其他位置出现视频播放窗口来播放广告，当然用户可以关闭和缩小该窗口；而另外一种就是投放在网络视频中贴片广告，就 是人们在网上观看视频的时候，在正是内容播放的前后可能会有几秒钟的插播广告，rqyn14ZN（3）、交互式广告交互式广告的特点在于广告传达的核心在于交互操作所呈现的信息传达。本来很不起眼 的广告正是由于受众的交互操作而产生了视觉上的巨大变化和感官刺激，这是这种交互过程 的信息传递即达到广告宣传的目的，也让受众在不知不觉中加深了广告内容的印象。目前网 络上常用的交互式广告有交互游戏性广告、条幅扩展式广告两种，当然还有一些创意性的交 互广告。EmxvxOtO（4）、推广网站广告推广网站是现在网页动画广告整体营销战略中非常重要的一个环节，尤其是对品牌概念推广或者新产品的推广。1.4、网页动画广告的要素（1）广告主广告主即广告的传播者，网页动画广告的广告主就是通过网络发布自己的广告内容的企业、 机构或个人。（2）广告内容广告内容是广告要素的主体，对于受众，他们直接接触的就是广告内容。（3）广告媒介广告媒介是指传递广告讯息的载体。网页动画广告的媒介就是国际互联网络。更具体地说，网上一个个Web页面，就是网页动画广告的载体。网页动画广告媒介与传统广告媒介最大的不同是网页动画广告媒介所具有的实时互动性，因此也被称为互动媒介。在网上，人们可以自主地搜索、 选择广告，想看什么就看什么，对于受众，这种广告媒介更具自主性和娱乐性。SixE2yXP（4）广告受众广告受众即广告所针对的目标对象，也可以解释为广告讯息的接收者。网页动画广告的受众就是广大上网的人网民6ewMyirQ（5）广告效果广告效果指一次特定时期内的广告所取得的结果，以及与预先目标的距离。广告的最终效果直接体现广告的成功与否。kavU42VR1.5、网页动画广告和 FLASH1）、Flash 和 Photoshop、Illustrator 实现无缝链接，Flash 软件可支持直接导入 PSD 文件和 AI 文件并保留结构和图层，把你设计的创意快速导入到 Flash 软件中开始制作。y6v3ALoS2）、Flash 基于时间轴的动画是基于传统动画的方式，并给予了高度的自由度，为你的网页动画广告增添动感。M2ub6vST3）、Flash 提供的绘图工具可以让你轻松绘制常见的矢量图形，并配合色彩功能可 以绘制你想要的形状和色彩效果0YujCfmU4）、使用新的 ActionScript 3.0 语言节省时间, 该语言具有改进的性能、增强的灵活性 及更加直观和结构化的开发，为你的网页动画广告加入非凡的交互功能。eUts8ZQV5）、使用全面的视频支持, 创建、编辑和部署流和渐进式下载的 Flash Video。使用独 立的视频编码器、Alpha 通道支持、高质量视频编解码器、嵌入的提示点、视频导入支持、 QuickTime 导入和字幕显示等等, 确保获得最佳的视频体验。sQsAEJkW6）、使用 Flash Lite 软件为移动设备创建交互式应用程序和界面。1.6、网页动画广告和 HTML5(Edge)HTML5网页动画制作(Adobe Edge Animate)主要是通过 HTML5、JavaScript、jQuery 和 CSS3 制作跨平台、跨浏览器的网页动画，其生成的基于 HTML5 的互动媒体能更方便的通过互联网传输，特别是更兼容移动互联网。GMsIasNXAdobe Edge Animate，目的是在浏览器互动媒体领域取代 Flash 平台,创作HTML5动画，在未来的网页动画领域发挥更大的作用。其特点：TIrRGchYl 建立的应用文件非常小而精炼，可以弥补移动设备的储存卡容量相对较小，也减轻设备的运算量，从而节省电源l 最优化的程序代码及图片，可以弥补移动设备的连线速度较慢的问题，节省移动设备的网络流量2.1、网页动画广告的策划流程（1）、确定网页动画广告的预定目标网页动画广告的目的就是通过广告内容信息的传达使消费者能够对品牌或者产品有一定的认知和认同感，从而触动消费行为。7EqZcWLZ（2）、确定网页动画广告的目标群体简单来说就是确定网页动画广告希望让哪些人来看，确定他们是哪个群体、哪个阶层、哪个区域。（3）、进行网络广告创意及策略选择在这个策划环节中，广告主要确定广告的形式，确定广告内容或者主题，比如广告标题是一句吸引消费者的带有概括性、观念性和主导性的语言。发展互动性：如在网页动画广告上增加游戏功能，提高访问者对广告的兴趣。合理安排网络广告发布的时间因素：网页动画广告的时间策划是其策略决策的重要方面。lzq7IGf0（4）、选择网络广告发布渠道及方式网上发布广告的渠道和形式众多，各有长短2.2、网络广告的表现元素（1）、文字元素在广告设计中，文字是必不可少的一种元素在一个网络广告创意中，必定有广告的标题、广告内容等等（2）、图形元素和动态图形图形元素特别是动态图形元素是比文字更直观的信息元素，也是最容易体现艺术性和设计性的元素。而动态图形更是能够在有限的广告空间中把运动的图片信息通过速度、颜色、大小等等不同的运动组合方式把更多的信息传达给观众。zvpgeqJ1（3）、视频元素视频元素是最近几年网页动画广告逐渐风行起来的一个广告视觉元素，相比于文字图片， 视频的视觉冲击力更强，感官刺激更直观，具有强烈的吸引用户的能力。NrpoJac3（4）、交互元素网页动画广告中交互元素主要指的是用户和广告进行交互操作的方式。由于交互设计目的的差异性便会产生不同的交互动作模式，常用的主要有：点击（onClick）、鼠标移动（onMouseMove）、移上去（onMouseOver）、移开时（onMouseOut）、拖动（startDrag）、停止拖动（stopDrag） 和键盘的操作等等。1nowfTG43.1、 互动汽车 广告实例制作3.2、大众汽车互动广告实例制作讲解网页动画广告中比较流行的一种广告形式，就是交互广告制作。通过实例的操作讲解了你需要知道的关于如何发挥 FLASH 中交互脚本的创造性运用结合广告的动画技巧 来创作出令人印象深刻的交互广告。而所涉及 的交互脚本 AS3 则是整个交互性的核心所在，特别在后一个广告实例中，我们学习了如何给对象绑定不同的鼠标事件（鼠标移上去、鼠标离开、鼠标移到）以及循环事件的方法，如何使用 if 判断语句来进行一些巧妙的应用。AS3 的语法和类库都比较复杂，况且还有很多的外置库的开发，但是对于网页动画广告来说，并没有涉及到非常复杂的交互应用层面的脚本，所以这些脚本还并不是非常复杂和难以理解的，应该也可以被广大的设计人员所接受并能理解应用。fjnFLDa54.1、手风琴横幅交互动画广告实例制作4.2、光标跟随交互动画广告实例制作讲解网页动画广告中比较先进的HTML5广告形式，利用Adob