flash网站制作的两点浅析

在制作flash网站的时候,一般有两种选择,一种是flash跟随屏幕大小变化,其内部元件相应缩小放大;另一种是flash随屏幕变化大小,其内部元件却不改变大小,只是相应改变其位置。

这两种方式各有各的优点,第一种给观赏者最完整的展示,缺点是在小屏幕上出现过于缩小导致模糊不清的状况,第二种不会有这种状况,但会显示不完整,如何抉择一般都是客户说了算,现在就来说下这两种方式的制作。

一般页面插入flash我使用如下语句:

1
<embed id="swf" bgcolor="#000" height="780" width="1280" quality="high" src="1.swf" type="application/x-shockwave-flash" wmode="transparent"/>

可能有同学说这样不符合W3C标准,在我看来,W3C只是一个验证工具,它是为了更好的规范你的代码写作方式,使你养成良好的编程习惯,并不是页面展现的标准,不需要强求,像下面这段代码:

1
2
3
4
<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="UTF-8"/>

这是本博客所使用的DOCTYPE声明,它就过不了W3C,甚至连meta页面编码声明都是不规范的,但这却是html5提倡的写法,并且被所有的浏览器兼容,发送时要保守;接收时要开放。有兴趣的朋友可以看看这篇文章《HTML5设计原理》

跑题了,接着讲flash,第一种方式很简单,只需设定css样式即可实现,假如你编写的静态页类似下面这样:

1
2
3
<body>
	<embed id="swf" bgcolor="#000" quality="high" src="index1.swf" type="application/x-shockwave-flash" wmode="transparent"/>
</body>

只需添加如下的css样式即可:

1
2
3
4
5
6
7
8
9
10
html{
	overflow:hidden
}
#swf{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0
}

第二种方法有点麻烦,并且要分as2.0和3.0两种,你说Adobe出这代码2.0和3.0差别这么大,这不坑爹么,不过有几句代码是这两种都会用到的,在你的flash第一帧插入如下代码:

1
2
3
stage.scaleMode=StageScaleMode.NO_SCALE;//元件不随舞台大小变化
stage.showDefaultContextMenu=false;//禁用右键
stage.align = StageAlign.TOP_LEFT;//强制舞台从上从左排列

接下来as2.0使用如下代码:

1
2
3
4
5
6
fullscreen = new Object();//创建类
fullscreen.onResize = function() {//swf大小改变时触发
	trace('width='+Stage.width+';height='+Stage.height);
	//此处可以根据舞台大小来重新排列元件位置
};
Stage.addListener(fullscreen);//绑定侦听器

as3.0使用如下代码:

1
2
3
4
5
function resizeDisplay(event:Event):void {
	trace('width='+stage.stageWidth+';height='+stage.stageHeight);
	//注意这里使用的是stageWidth和stageHeight
}
stage.addEventListener(Event.RESIZE, resizeDisplay);

完结,话说我一个本来专门搞js的这几月竟然连着写了3篇as的文,放心,下期预告:使用jquery定制一个自己的弹出提示框,手把手教你哦,亲!不见不散哦!

1 条评论在 “flash网站制作的两点浅析

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据