打印

闻西研究所:解剖官网首页FLASH动画

闻西研究所:解剖官网首页FLASH动画

每当我想飞上蓝天,就想起了XX航空~啊不,每当我们连上官网时,就能看到顶部一段震撼的FLASH动画,相信大家Loading也费了不少时间吧。这个FLASH的确有点大,据我估计,有近3MB。如此大的一个片头动画,到底里面有些什么呢?本人本着专业研究精神,对此动画进行了全面解剖,主要做的是,分析其网页代码,下面整个FLASH及分解该FLASH。

以下内容,可能包含暴力及X情成分,请家长陪同....。啊不,以下的内容可能会涉及到一些专业滴软件和工具,菜鸟级别的人如果看不懂,可以回复投诉我,但不能人身攻击。

好了,首先要做的是,打开星际2官网,也就是www.starcraft2.com。不能上网的同志,请您直接跳过这一步。

我们可以看到,整个官网是非常华丽的。当然,前提是你的IE中安装了FLASH插件,如果你没装,那么出来的将是纯HTML的网页,是没有任何动画的,所以,我们严重建议你先安装FLASH插件,下载地址是:http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash

然后,我们来看下整个顶部,专业术语是:Head(专业吧)。是怎么一个构造:

当打开首页时,首先,将会LOADING首页的动画,可以会费去你一些时间,你可以去喝杯咖啡什么的,用56K猫上网的同志,请明早同一时间再来。

LOADING完毕之后,动画便开始播放了,首先,那个大门将会打开,然后就是发布会时那一段CG的剪接版,非常华丽,具体是怎么一个华丽法,相信都不用我说了,我这次是来解剖这段动画的。


然后,我们开始解剖,首先要做的是,查看首页的所有源代码。由于官网是采用了XML技术,而且还进行了加密。不能通过IE的查看源文件功能看到源代码的,你只会得到这些源代码:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="layout/frontpage.xsl"?>
<page lang="en_us">
  <frontpage/>
</page>

而通过第三方软件,就可以查看得到,在这里,我用Maxthon(傲游)浏览器的pageview插件查看源码,你可以于这里下载Maxthon,pageview的使用方法非常简单,直接点击插件栏的Pageview小图标


打开pageview后,你将可以看到首页的所有源码及媒体信息,非常强大!


点击“源码”查看首页的源代码


下载源码

熟悉网页制作的朋友,通过解读此源代码,可以大概知道官网构造是如何。当然了,我是专业的网页制作人员,这些我基本上都懂了。我们只取所需部分,那就是首页的FLASH动画,在下面这一段冗长代码中,我们找到了FLASH动画的绝对路径。
引用:
<DIV id=splash>
<OBJECT id=splashFlash height=467 width=960 classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000><PARAM NAME="_cx" VALUE="25400"><PARAM NAME="_cy" VALUE="12356"><PARAM NAME="FlashVars" VALUE=""><PARAM NAME="Movie" VALUE="http://us.media.blizzard.com/starcraft2/flash/en_us/main_intro4.swf"><PARAM NAME="Src" VALUE="http://us.media.blizzard.com/starcraft2/flash/en_us/main_intro4.swf"><PARAM NAME="WMode" VALUE="Window"><PARAM NAME="Play" VALUE="0"><PARAM NAME="Loop" VALUE="-1"><PARAM NAME="Quality" VALUE="AutoHigh"><PARAM NAME="SAlign" VALUE="LT"><PARAM NAME="Menu" VALUE="0"><PARAM NAME="Base" VALUE="/flash/global"><PARAM NAME="AllowScriptAccess" VALUE=""><PARAM NAME="Scale" VALUE="ShowAll"><PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE="000000"><PARAM NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM NAME="SeamlessTabbing" VALUE="1"><PARAM NAME="Profile" VALUE="0"><PARAM NAME="ProfileAddress" VALUE=""><PARAM NAME="ProfilePort" VALUE="0"><PARAM NAME="AllowNetworking" VALUE="all"><PARAM NAME="AllowFullScreen" VALUE="false">
<embed name= "splashFlash" src="http://us.media.blizzard.com/starcraft2/flash/en_us/main_intro4.swf" wmode="window" menu="" bgcolor="#000000" width="960" height="467" quality="autohigh" pluginspage="http://www.macromedia.com/go/getflas/new-hplayer" type="application/x-shockwave-flash" salign="tl" base="/flash/global" flashvars="&flang=en_us&maintxtaccess=ACCESS GRANTED&maintxtnetwork=ACCESSING MARINE CORPS NETWORK&maintxtloading=LOADING COMPLETED&maintxtskipintro=SKIP INTRO&maintxtskipintro_deltax=0&maintxtskipintro_deltay=0&maintxtmoviecinematic=PLAY CINEMATIC TRAILER&maintxtmoviecinematictitle=CINEMATIC TRAILER&maintxtmoviegameplay=DOWNLOAD GAMEPLAY VIDEO&maintxtmoviegameplaytitle=GAMEPLAY VIDEO&maintxtmovieartwork=PLAY ARTWORK/GAMEPLAY TRAILER&maintxtmovieartworktitle=ARTWORK/GAMEPLAY TRAILER&maintxtspecies=SPECIES&maintxtclosemovie=CLOSE&maintxtclosemovie_deltax=&maintxtmenucolornav=FF9C00&maintxtmenuhovernav=ffd700&mainvideointrourl=http://us.media.blizzard.com/starcraft2/movies/video_intro.flv&mainvideocinematicurl=http://us.media.blizzard.com/starcraft2/movies/video_cinematic_english.flv&mainvideoartworkurl=http://us.media.blizzard.com/starcraft2/movies/video_artwork.flv&mainvideogameplayurl=/movies.xml%23m5&maintxtmoviecontrolurl=http://us.media.blizzard.com/starcraft2/flash/global/moviecontrols.swf&maintxtnoflash=SWITCH TO NO-FLASH VERSION&maintxtnoflashcommand=Javascript: toggleFlash();&maintxtnoflashparams=&maintxtportraitprotoss=PROTOSS SECTION&maintxtportraitterran=TERRAN SECTION&maintxtportraitzerg=ZERG SECTION&maintxtportraitstatus=STATUS&maintxtportraitonline=ONLINE&maintxtportraitcomingsoon=COMING SOON&maintxtportraitnotavailable=NOT AVAILABLE&maintxtportraitprotoss=PROTOSS SECTION&maintxtportraitterran=TERRAN SECTION&maintxtportraitzerg=ZERG SECTION&mainlinkprotoss=/features/protoss/&mainlinkterran=/features/terran/&mainlinkzerg=/features/zerg/&maininterfaceurl=http://us.media.blizzard.com/starcraft2/flash/en_us/main_interface4.swf&mainloaderfontsize=&mainloaderfontsmall=&mainloaderfontperct=&txtportraitssize=&txtmoviessizecinematic=&cinematictrailery=&artworktrailery=&gameplaytrailery=" /></OBJECT></DIV>
在上面的代码中,我们找到三个文件,分别是main_intro4.swf,video_intro.flv和main_interface4.swf,main_intro4.swf是控制器,其任务是执行LOADING进度条,播放video_inrto.flv动画和切换main_interface4.swf。video_inrto.flv是那一小段演示动画,而main_inrto4.swf则是最后的导航。我们重点来解剖main_inrto4.swf ,这个高达2MB的文件。

利用迅雷将http://us.media.blizzard.com/starcraft2/flash/en_us/main_interface4.swf下载下来,然后,我们需要用到一个工具-硕思闪客精灵,官方网站http://www.sothink.com,这个工具可以帮我们分解这个SWF文件,提取里面的媒体和代码,还可以将其转换为FLA源文件,直接用FLASH编辑。

安装运行该工具,打开main_interface4.swf。


在右侧的资源栏中,列出该SWF包含的所有媒体信息,声音,动画和视频等等。可以将资源全部导出为文件,将资源分类前面的小框钩上,点击导出按钮。


选好导出保存目录,导出文件类型后,确认导出,将所有媒体保存在指定目录里。


好,FLASH动画己解剖完毕了,所有的资源都己分解并分类,我们可以从中找到一些有用的素材,像声音和图片,还有视频。希望大家会喜欢,我己将一些比较有趣的东西放上来,让大家下载:
http://www.fs2you.com/files/3fede3b0-ebf9-11dc-b614-0014221f3995/

enjoy~

作者:星际十年@SC2c.com , 转载请注明星际争霸2中文论坛.
附件: 您所在的用户组无法下载或查看附件
忙自己的事。。。

星际十年 再续辉煌

TOP

我他喵的这个寒啊~~~~~你看叫兽的视频上瘾了?开头这么搞~~~~~~~~
征婚,有意者带照片PM

向着sc2c第一喷子的目标前进

要冷静,要和谐,要动脑子

TOP

我有点昏。。。
我不是专业的。。
话说这个的用处。。

TOP

话说这个DISCUZ的美化做得相当专业
是LZ做的吗?

TOP

不懂不懂 太专业了

TOP

多谢大师!!

TOP

对你的视频比较感兴趣,楼主辛苦

TOP

不错 很专业

TOP

为什么我导出视频文件要出错呢,会自动关闭!

版主有没有好点的闪客精灵

TOP

楼主运用的软件习惯跟我很象,说的都能理解。

thx楼主运用的软件习惯跟我很象,说的都能理解。楼主运用的软件习惯跟我很象,说的都能理解。
SC.

TOP

 11 12