正在载入……

Attention, Zin 的交互设计之路。

User interface, user experience and interactive design.

« 发梦:互联网的明天圣诞节中英文(爱情)经典祝福短信全收录 »

Flash满屏幕(全屏)实现方法

经常见到一些演示性或者minisite的站点使用满屏(全屏)的flash播放,当然现在很多视频网站都已经用flash9实现了真正的全屏播放,但是这里不是全屏,而是占据浏览器窗口的整个显示区域,即是100%高度和100%宽度。
需要的技术:css、javascript、actionscript
插件/javascript库:swfobject 点击这里下载

xhtml代码(使用xhtml声明的doctype):

<body id="flash">
<div class="tips">
  <script type="text/javascript">
    document.write(":-(  请安装最新的 <");
  document.write("a href='http://www.adobe.com/go/getflashplayer'>Flash Player<\/a>");
  </script>
  <noscript>
  :-(  请开启 Javascript 后刷新,以正常浏览网站!
  </noscript>
</div>
</body>



css代码:

<style type="text/css">
html, body {
    margin:0;
  padding:0;
  background-color: #fff;
  height: 100%;
}
a {
  color: #666;
}
a:hover {
  color: #333;
}
div.tips {
  width: 500px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -250px;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  line-height: 50px;
}
</style>


javascript代码:

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
   var so = new SWFObject("root.swf", "flashmovie", "100%", "100%", "8", "#000000");
   so.write("flash");
</script>

注:关于swfobject的使用方法,请自行参考下载后的参考文档

actionscript代码:

/* stage */
//flash制作舞台参考对齐宽度
var dw:Number = 1250;
//flash制作舞台参考对齐高度
var dh:Number = 842;
//高度偏移修正
var crh:Number = 0;
var stageListener:Object = new Object();
stageListener.onResize = stageResize;
Stage.addListener(stageListener);
stageResize();
//FUNCTIONS
function stageResize() {
  sw = Stage.width;
  sh = Stage.height;
  //主场景内容屏幕居中
  setPosition(_cont, Math.round(sw/2-dw/2), Math.round(sh/2-dh/2-crh));
  //背景居中
  setPosition(_bg, Math.round(sw/2-dw/2), Math.round(sh/2-dh/2-crh));
  //导航条水平居中顶对齐
  setPosition(_nav, Math.round(sw/2-dw/2), 0);
}
function setPosition(target:MovieClip, tx:Number, ty:Number):Void {
  moveXS(target, tx, 0.5);
  moveYS(target, ty, 0.5);
}

注:具体使用请自行修改,实现的效果是依据屏幕的尺寸自动让部分元件对齐,moveXS及moveYS函数请参考这里

欢迎发表看法:

您的讨论更有价值!

控制面板

<< 2008-12 >>

Sun

Mon

Tue

Wed

Thu

Fri

Sat

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

最近留言