网页动画设计与制作讲义

1、网页动画设计和制作讲义学习指导：在你学习本课程之前，你应当要先学习网页美术设计课程和用户界面设计课程，对网页有了基本的相识。引言网页动画设计和制作课程，确定两个制作项目案例：Flash交互动画广告制作和HTML5交互动画广告制作。网页动画广告具有传播范围广、交互性强、针对性强并且能够精确统计受众的数量和接受程度等种种传统广告不行比拟的优势，受到了广阔广告主的欢迎，成为了品牌推广、商业活动等等重要的宣扬手段之一。矚慫润厲钐瘗睞枥庑赖賃軔朧碍鳝绢。目前网页动画广告的市场正在以惊人的速度增长，网页动画广告发挥的效用越来越显得重要。以致广告界甚至认为互联网络将超越路牌，成为传统四大媒体（电视、广播、报

2、纸、杂志）之后的第五大媒体。因而众多国际级的广告公司都成立了特地的“网络媒体分部”，以开拓网页动画广告的巨大市场。聞創沟燴鐺險爱氇谴净祸測樅锯鳗鲮。定义什么是网页动画广告？网页动画广告指运用专业的广告横幅、文本链接、多媒体的方法，在互联网刊登或发布广告，通过网络传递到互联网用户的一种高科技广告运作方式。残骛楼諍锩瀨濟溆塹籟婭骒東戇鳖納。学习目标通过任务引领型的项目活动，熟识平面设计软件Photoshop和 Illustrator ，网页动画制作软件Flash和Edge，并能将这些软件运用到网页动画设计和制作中，熟识网页动画设计和制作的一般步骤，熟识在设计过程中常用到的色调搭配、图形组合、界面布

3、局学问，以完整网页动画设计为任务，熟识设计过程中的重要环节：项目分析和理解、UI界面分析、交互动作设计表现、动画和节奏制作规划等。形成良好的团结协作精神，主动适应团队工作的职业素养。酽锕极額閉镇桧猪訣锥顧荭钯詢鳕驄。职业实力培育目标能了解网页动画设计和制作涉及的相关行业及岗位工作内容。能了解网页动画设计和制作的通用制作流程。能了解网页动画制作工具Adobe Flash和Adobe Edge的操作运用规范。能驾驭网页动画设计方法及基本制作步骤。能驾驭运用Adobe Flash、Adobe Edge等软件制作网页动画的基本方法。能具备综合运用各方面学问设计并制作网页动画的基本实力。1.1、网页动画

4、广告的历史和前景据艾瑞询问集团近日发布的一份中国网络广告市场份额报告预料，2011年中国网络广告市场规模将达到 370 亿元，和 2007 年的 106 亿元相比增加两倍多。报告对 2007 年中国网络广告市场份额进行了分析，去年中国网络广告持续快速增长，市场规模达 106 亿元，同比增长 753。其中，品牌广告和搜寻引擎广告都不同程度推动中国网络广告市场规模增长，其中品牌广告同比增长 653，搜寻引擎广告 1086。彈贸摄尔霁毙攬砖卤庑诒尔肤亿鳔简。1.2、网页动画广告的优势（1）网页动画广告的传播冲破了时间和空间的限制通过国际互联网络把广告信息 24 小时不间断地传播到世界各地。只要具备上

5、网条件，任何人在任何地点都可以阅读。謀荞抟箧飆鐸怼类蒋薔點鉍杂篓鳐驱。（2）网页动画广告可以精确进行受众信息的统计在互联网上可以通过广告的报表系统可以精确的统计出广告有多少次点击量，以及详细是什么地方的用户，在什么时间段等等即时的数据和信息。从而有助于客商正确评估广告效果，审定广告投放策略，以便达到更好的广告投放效果。厦礴恳蹒骈時盡继價骚卺癩龔长鳏檷。（3）网页动画广告传播模式的交互性、人性化在互联网广告中，用户被赐予了相当大的主动性，用户可以跟内容之间发生许多交互行为，比如用户可以依据主观意愿随意变更信息的来源、依次、数量等等，而内容本身也会依据用户的信息、操作的习惯等等调整信息内容、变更信

6、息显示方式，从而更加迎合用户的须要达到交互的目的。所以我们在网上阅读的时候可以关闭或者缩小广告，也会发觉当我们阅读数码产品内容的时候，呈现的广告也恰好是关于数码产品主题的，而且假如受众对这个广告感爱好的话还可以点击对于的按钮获得更多的信息。这样广告厂商就可以干脆更潜在的消费者建立了某种意义上的联系，假如加上电子商务的协作，完全可以实现实际的购买消费行为。茕桢广鳓鯡选块网羈泪镀齐鈞摟鳎饗。（4）网页动画广告的多媒体性随着互联网渐渐发展成实时的、动态的、交互的多媒体世界时，网页动画广告也同样的具有特别剧烈的多媒体特征。网页动画广告可以把文字、图片、声音、动画、三维、影视等等各个方面结合起来，创建出

7、精美绝伦的视觉效果。鹅娅尽損鹌惨歷茏鴛賴縈诘聾諦鳍皑。1.3、网页动画广告的类型（1）、网幅广告（Banner）网幅广告是互联网上最常见、最基础、最流行的一种广告形式，约占全部互联网广告的百分之六十。网幅广告一般以限定尺度表现商家广告内容的图片形式，放置在广告商的页面上。网幅广告从外形上主要有横幅广告、竖幅广告和方形广告三种；网幅广告从运动形态上分可以分为静态广告、动画广告和交互广告三种。籟丛妈羥为贍偾蛏练淨槠挞曉养鳌顿。（2）、视频广告网络视频广告其实就是电视广告中网络媒介上的移植，主要的投放方式有两种。一种是投放在传统网页上的播放视窗，基本上是在不影响网页载入的状况下在网页的左下角或者其他

8、位置出现视频播放窗口来播放广告，当然用户可以关闭和缩小该窗口；而另外一种就是投放在网络视频中贴片广告，就是人们在网上观看视频的时候，在正是内容播放的前后可能会有几秒钟的插播广告，預頌圣鉉儐歲龈讶骅籴買闥龅绌鳆現。（3）、交互式广告交互式广告的特点在于广告传达的核心在于交互操作所呈现的信息传达。原来很不起眼的广告正是由于受众的交互操作而产生了视觉上的巨大变更和感官刺激，这是这种交互过程的信息传递即达到广告宣扬的目的，也让受众在不知不觉中加深了广告内容的印象。目前网络上常用的交互式广告有交互嬉戏性广告、条幅扩展式广告两种，当然还有一些创意性的交互广告。渗釤呛俨匀谔鱉调硯錦鋇絨钞陉鳅陸。（4）、推广

9、网站广告推广网站是现在网页动画广告整体营销战略中特别重要的一个环节，尤其是对品牌概念推广或者新产品的推广。1.4、网页动画广告的要素（1）广告主广告主即广告的传播者，网页动画广告的广告主就是通过网络发布自己的广告内容的企业、机构或个人。（2）广告内容广告内容是广告要素的主体，对于受众，他们干脆接触的就是广告内容。（3）广告媒介广告媒介是指传递广告讯息的载体。网页动画广告的媒介就是国际互联网络。更详细地说，网上一个个Web页面，就是网页动画广告的载体。网页动画广告媒介和传统广告媒介最大的不同是网页动画广告媒介所具有的实时互动性，因此也被称为互动媒介。在网上，人们可以自主地搜寻、选择广告，想看什么

10、就看什么，对于受众，这种广告媒介更具自主性和消遣性。铙誅卧泻噦圣骋贶頂廡缝勵罴楓鳄烛。（4）广告受众广告受众即广告所针对的目标对象，也可以说明为广告讯息的接收者。网页动画广告的受众就是广阔上网的人网民擁締凤袜备訊顎轮烂蔷報赢无貽鳃闳。（5）广告效果广告效果指一次特定时期内的广告所取得的结果，以及和预先目标的距离。广告的最终效果干脆体现广告的胜利和否。贓熱俣阃歲匱阊邺镓騷鯛汉鼉匮鲻潰。1.5、网页动画广告和 FLASH1）、Flash 和 Photoshop、Illustrator 实现无缝链接，Flash 软件可支持干脆导入 PSD 文件和 AI 文件并保留结构和图层，把你设计的创意快速导入到

11、 Flash 软件中起先制作。坛摶乡囂忏蒌鍥铃氈淚跻馱釣缋鲸鎦。2）、Flash 基于时间轴的动画是基于传统动画的方式，并赐予了高度的自由度，为你的网页动画广告增加动感。蜡變黲癟報伥铉锚鈰赘籜葦繯颓鲷洁。3）、Flash 供应的绘图工具可以让你轻松绘制常见的矢量图形，并协作色调功能可以绘制你想要的形态和色调效果買鲷鴯譖昙膚遙闫撷凄届嬌擻歿鲶锖。4）、运用新的 ActionScript 3.0 语言节约时间, 该语言具有改进的性能、增加的敏捷性及更加直观和结构化的开发，为你的网页动画广告加入非凡的交互功能。綾镝鯛駕櫬鹕踪韦辚糴飙钪麦蹣鲵殘。5）、运用全面的视频支持, 创建、编辑和部署流和渐进式下

12、载的 Flash Video。运用独立的视频编码器、Alpha 通道支持、高质量视频编解码器、嵌入的提示点、视频导入支持、 QuickTime 导入和字幕显示等等, 确保获得最佳的视频体验。驅踬髏彦浃绥譎饴憂锦諑琼针咙鲲鏵。6）、运用 Flash Lite 软件为移动设备创建交互式应用程序和界面。1.6、网页动画广告和HTML5(Edge)HTML5网页动画制作(Adobe Edge Animate)主要是通过 HTML5、JavaScript、jQuery 和 CSS3 制作跨平台、跨阅读器的网页动画，其生成的基于 HTML5 的互动媒体能更便利的通过互联网传输，特殊是更兼容移动互联网。猫虿

13、驢绘燈鮒诛髅貺庑献鵬缩职鲱样。Adobe Edge Animate，目的是在阅读器互动媒体领域取代 Flash 平台,创作HTML5动画，在将来的网页动画领域发挥更大的作用。其特点：锹籁饗迳琐筆襖鸥娅薔嗚訝摈馍鲰钵。建立的应用文件特别小而精炼，可以弥补移动设备的储存卡容量相对较小，也减轻设备的运算量，从而节约电源最优化的程序代码及图片，可以弥补移动设备的连线速度较慢的问题，节约移动设备的网络流量2.1、网页动画广告的策划流程（1）、确定网页动画广告的预定目标网页动画广告的目的就是通过广告内容信息的传达使消费者能够对品牌或者产品有肯定的认知和认同感，从而触动消费行为。構氽頑黉碩饨荠龈话骛門戲鷯瀏

14、鲮晝。（2）、确定网页动画广告的目标群体简洁来说就是确定网页动画广告希望让哪些人来看，确定他们是哪个群体、哪个阶层、哪个区域。（3）、进行网络广告创意及策略选择在这个策划环节中，广告主要确定广告的形式，确定广告内容或者主题，比如广告标题是一句吸引消费者的带有概括性、观念性和主导性的语言。发展互动性：如在网页动画广告上增加嬉戏功能，提高访问者对广告的爱好。合理支配网络广告发布的时间因素：网页动画广告的时间策划是其策略决策的重要方面。輒峄陽檉簖疖網儂號泶蛴镧釃邊鲫釓。（4）、选择网络广告发布渠道及方式网上发布广告的渠道和形式众多，各有长短2.2、网络广告的表现元素（1）、文字元素在广告设计中，文字

15、是必不行少的一种元素在一个网络广告创意中，必定有广告的标题、广告内容等等（2）、图形元素和动态图形图形元素特殊是动态图形元素是比文字更直观的信息元素，也是最简洁体现艺术性和设计性的元素。而动态图形更是能够在有限的广告空间中把运动的图片信息通过速度、颜色、大小等等不同的运动组合方式把更多的信息传达给观众。尧侧閆繭絳闕绚勵蜆贅瀝纰縭垦鲩换。（3）、视频元素视频元素是最近几年网页动画广告渐渐风行起来的一个广告视觉元素，相比于文字图片，视频的视觉冲击力更强，感官刺激更直观，具有剧烈的吸引用户的实力。识饒鎂錕缢灩筧嚌俨淒侬减攙苏鲨运。（4）、交互元素网页动画广告中交互元素主要指的是用户和广告进行交互操作

16、的方式。由于交互设计目的的差异性便会产生不同的交互动作模式，常用的主要有：点击（onClick）、鼠标移动（onMouseMove）、移上去（onMouseOver）、移开时（onMouseOut）、拖动（startDrag）、停止拖动（stopDrag）和键盘的操作等等。凍鈹鋨劳臘锴痫婦胫籴铍賄鹗骥鲧戲。3.1、互动汽车广告实例制作3.2、大众汽车互动广告实例制作讲解网页动画广告中比较流行的一种广告形式，就是交互广告制作。通过实例的操作讲解了你须要知道的关于如何发挥FLASH中交互脚本的创建性运用结合广告的动画技巧来创作出令人印象深刻的交互广告。而所涉及的交互脚本AS3则是整个交互性的核心所在，特殊在后一个广告实例中，我们学习了如何给对象绑定不同的鼠标事务（鼠标移上去、鼠标离开、鼠标移到）以及循环事务的方法，如何运用if推断语句来进行一些奇妙的应用。AS3的语法和类库都比较困难，况且还有许多的外置库的开发，但是对于网页动画广告来说，并没有涉及到特别困难的交互应用层面的脚本，所以这些脚本还并不是特别困难和难以理解的，应当也可以被广阔的设计人员所接受并能理解应用。恥諤銪灭萦欢煬鞏鹜錦聰櫻郐燈鲦軫。4.1、手风琴横幅交互动画广告实例制作4.2、光标跟随交互动画广告实例制作讲解网页动画广告中比较先进的HTML5广告形式，利用A