Flash舞台随窗口大小动态调整.docx

本文介绍如何建立一个舞台随窗体尺寸大小动态改变的Flash例子，使用的脚本为AS3.0
1. 建立工程

2. 新建一个AS文件，主要实现舞台的动态缩放功能

代码如下：
package {

import flash.display.Sprite;
import flash.display.Stage;
import flash.events.Event;
import flash.external.ExternalInterface;

public class BrowserCanvas {

public static const HACK_MARGIN_BOTTOM:String = "marginBottom"; //Adds a negative bottom margin to object tags to compensate for browser weirdness
public static const HACK_IE_REPARENT:String = "IEReparent"; //In IE, create a container div which encapsulates the object tag in order to hav min/max sizes work
public static const HACK_UNIQUE_ID:String = "uniqueId"; //If you put both an embed and object tag with the same id, this tries to compensate

private var stage:Stage;

private var containerId:String;

private var _width:String;
private var _minWidth:String;
private var _maxWidth:String;

private var _height:String;
private var _minHeight:String;
private var _maxHeight:String;

private var timerSprite:Sprite;

public function BrowserCanvas ( stage:Stage,containerId:String=null , browserHacks:Array=null ) {
trace("BrowserCanvas - Copyright (c) 2008 Noel Billig ()");

this.stage = stage;

timerSprite = new Sprite();
_width = String( stage.stageWidth );
_height = String( stage.stageHeight );
if (browserHacks == null) browserHacks = [HACK_MARGIN_BOTTOM,HACK_IE_REPARENT,HACK_UNIQUE_ID];

this.containerId = containerId;
if (this.containerId == null) this.containerId = ExternalInterface.objectID;
if (this.containerId == null) this.containerId = ExternalInterface.call(JSScripts.GET_FLASH_ID, stage.loaderInfo.url);

if (browserHacks.length != 0) {
this.containerId = ExternalInterface.call(JSScripts.INSERT_BROWSER_HACKS, this.containerId, browserHacks.join(","));
}

}

public function set width(newWidth:String):void {
this._width = formatSize(newWidth);
invalidate();
}

public function set minWidth(newWidth:String):void {
this._minWidth formatSize(newWidth);
invalidate();
}

public function set maxWidth(newWidth:String):void {
this._maxWidth = formatSize(newWidth);
invalidate();
}

public function set height(newHeight:String):void {
this._height = formatSize(newHeight);
invalidate();

}

public function set minHeight(newHeight:String):void {
this._minHeight = formatSize(newHeight);
invalidate();
}

public function set maxHeight(newHeight:String):void {
this._maxHeight = formatSize(newHeight);
invalidate();
}

private function formatSize(size:String):String {
if (size == null) return ""; //Null causes opera to never clear the appropriate values, so use empty string
return (int(size) == 0) ? size : size+"px";
}

private function invalidate():void {
timerSprite.addEventListener(Event.ENTER_FRAME,update);
}

private function update(event:Event):void {
timerSprite.removeEventListener(Event.ENTER_FRAME,update);
ExternalInterface.call(JSScripts.RESIZE_CONTAINER,containerId,_width,_height,_minWidth,_minHeight,_maxWidth,_maxHeight);
}

}

}

class JSScripts {

public static var GET_FLASH_ID:XML =
<![CDATA[
function(swfFullPath) {

var getFileName = function(fullPath) {
var ary = fullPath.split("/");
var fileName = ary[ary.length-1].split(".swf")[0];
return fileName;
}

var ensureId = function(node) {
if (</p><p style='padding:5px 0px;'>13、node.attributes["id"] == null) {
node.setAttribute("id",'swf'+new Date().getTime());
}
}

var matchesTarget = function(fullPath) {
return (getFileName(fullPath) == targetSwfName);
}

var targetSwfName = getFileName(swfFullPath);
//Look through th</p><p style='padding:5px 0px;'>14、e embed nodes for one that matches our swf name
var nodes = document.getElementsByTagName("embed");
for (var i=0; i < nodes.length; i++) {
//Parse just the SWF file name out of the whole src path and check if it matches
if (matchesTarget(nodes[i].attributes["src"].nodeValue)) {</p><p style='padding:5px 0px;'>15、
ensureId(nodes[i]);
return nodes[i].attributes["id"].nodeValue;
}
}

//If we haven't found a matching embed, look through the object nodes
nodes = document.getElementsByTagName("object");
for (var j=0; j < nodes.length; j++) {
//Check if the </p><p style='padding:5px 0px;'>16、object tag has a data node
if (nodes[j].attributes["data"] != null) {
if (matchesTarget(nodes[j].attributes["data"].nodeValue)) {
ensureId(nodes[j]);
return nodes[j].attributes["id"].nodeValue;
}
}

//Grab the param nodes out of this object, and </p><p style='height:0px;padding:0;overflow:hidden'>17、look for one named "movie"
var paramNodes = nodes[j].getElementsByTagName("param");
for (var k=0; k < paramNodes.length; k++) {
if (paramNodes[k].attributes["name"].nodeValue.toLowerCase() == "movie") {
if (matchesTarget(paramNodes[k].attributes["value"].nodeValue)) {
</p><p style='height:0px;padding:0;overflow:hidden'>18、 ensureId(nodes[j]);
return nodes[j].attributes["id"].nodeValue;
}
}
}

}

return null;
}
]]>;

public static var INSERT_BROWSER_HACKS:XML =
<![CDATA[
function (containerId,browserHacks) {

var ob</p><p style='height:0px;padding:0;overflow:hidden'>19、jNode = document.getElementById(containerId);
if (objNode.nodeName.toLowerCase() == "div") return;

//If you make the mistake of naming the object and embed nodes with the same id, firefox will get confused
if ( ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1) ||
</p><p style='height:0px;padding:0;overflow:hidden'>20、 (navigator.userAgent.toLowerCase().indexOf("opera") != -1)) &&
(objNode.nodeName.toLowerCase() == "object") &&
(browserHacks.indexOf("uniqueId") != -1)
) {

//Check if we have an embed tag inside of us, if so, ignore the obj tag
var newNode = objNode.getEle</p><p style='height:0px;padding:0;overflow:hidden'>21、mentsByTagName("embed")[0];
if (newNode != null) {
newNode.setAttribute("id",objNode.attributes["id"].nodeValue);
objNode.attributes["id"].nodeValue += new Date().getTime();
objNode.attributes['width'].nodeValue = "auto";
objNode.attributes['height'].nodeValue = "au</p><p style='height:0px;padding:0;overflow:hidden'>22、to";
objNode.style.width = "";
objNode.style.height = "";
objNode = newNode;
}

}

//All of the browsers but IE seem to put a margin underneath all object/embed tags.
//Seems like a bug, but it's suspicious that it's a problem in all browsers but</p><p style='height:0px;padding:0;overflow:hidden'>23、 IE.
if ( (navigator.userAgent.toLowerCase().indexOf("msie") == -1) &&
(browserHacks.indexOf("marginBottom") != -1)
) {
if (navigator.userAgent.toLowerCase().indexOf("opera") != -1) {
objNode.style.marginBottom = "-4px";
} else {
objNode.style.marginBott</p><p style='height:0px;padding:0;overflow:hidden'>24、om = "-5px";
}
}

//IE has a bug where it doesn't respect the min-height/max-width style settings on an object tag
//To work around this, we reparent the object tag into a div, and use the ref to the div instead.
if ( (navigator.userAgent.toLowerCase().indexOf("m</p><p style='height:0px;padding:0;overflow:hidden'>25、sie") != -1) &&
(objNode.nodeName.toLowerCase() == "object") &&
(browserHacks.indexOf("IEReparent") != -1)
) {

//Insert a parent div above the object node
var newId = "swfContainer"+(new Date().getTime());
divNode = document.createElement('div');
</p><p style='height:0px;padding:0;overflow:hidden'>26、 objNode.parentNode.insertBefore(divNode,objNode);
divNode.setAttribute('id',newId);
divNode.appendChild(objNode);

//Set the parent div to the size of the object node, and the object node to 100%
var getFormattedValue = function(val) {
if ((val.indexOf("px") == </p><p style='height:0px;padding:0;overflow:hidden'>27、1) && (val.indexOf("%") == -1)) return val+"px";
return val;
}
divNode.style.width = getFormattedValue(objNode.attributes['width'].nodeValue);
divNode.style.height = getFormattedValue(objNode.attributes['height'].nodeValue);
objNode.attributes['width'].nodeValue = "10</p><p style='height:0px;padding:0;overflow:hidden'>28、0%";
objNode.attributes['height'].nodeValue = "100%";
return newId;
}
return containerId;
}
]]>;

public static var RESIZE_CONTAINER:XML =
<![CDATA[
function(containerId,width,height,minWidth,minHeight,maxWidth,maxHeight) {
var ob</p><p style='height:0px;padding:0;overflow:hidden'>29、jNode = document.getElementById(containerId);
objNode.style.width = width;
objNode.style.height = height;
objNode.style.minWidth = minWidth;
objNode.style.minHeight = minHeight;
objNode.style.maxWidth = maxWidth;
objNode.style.maxHeight = maxHeight;
objNode.attribu</p><p style='height:0px;padding:0;overflow:hidden'>30、tes.width.nodeValue = width;
objNode.attributes.height.nodeValue = height;
}
]]>;

}

3. 建立Flash文件场景相关的类

package {
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.eventsMouseEvent;
import flash.text.TextField;
import flash.text.TextFormat;
//导入第2节中建立的类
import BrowserCanvas;

[SWF(width="550", height="400", frameRate="30", backgroundColor="#000000")]
public class ResizeSceneClass extends Sprite {

private var canvas:BrowserCanvas;

public function ResizeSceneClass () {
//Set up the stage so we don't scale (you may not want to do this, depending on your desired goal)
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

canvas = new BrowserCanvas(stage);
stage.addEventListener(MouseEvent.CLICK,randomSize);
}
private function randomSize(event:Event=null):void {
canvas.width = String( Math.random()*500 + 200);
canvas.height = String( Math.random()*500 + 200);
}

}

}
4. 把ResizeSceneClass和第1节建立的Flash文件相关

到此完成