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来减少垃圾评论。了解我们如何处理您的评论数据。