AS3 Resizing SWF + SWFObject + JavaScript Tweener
Posted: September 27, 2007 at 11:41 pmCame across this cool javascript that tweens a bunch of objects. Javascript Motion Tweener
In the swf:
stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; stage.addEventListener(Event.RESIZE, resizeHandler); var openState:Boolean = true; var closedSize:String = "200"; var openSize:String = "400"; var bg:Shape = new Shape(); bg.graphics.beginFill(0x454545, 1); bg.graphics.drawRect(0, 0, 400, 400); addChild(bg); var bg2:Shape = new Shape(); bg2.graphics.beginFill(0x666666, 1); bg2.graphics.drawRect(0, 0, 400, 20); addChild(bg2); var btn:Sprite = new Sprite(); addChild(btn); btn.x = 10; btn.y = 400-26; btn.graphics.beginFill(0xCCCCCC, 1); btn.graphics.drawRect(0, 0, 100, 16); btn.buttonMode = true; btn.useHandCursor = true; btn.mouseEnabled = true; btn.addEventListener(MouseEvent.CLICK, resizeClickHandler); var label:TextField = new TextField(); label.autoSize = TextFieldAutoSize.CENTER; label.selectable = false; label.mouseEnabled = false; label.defaultTextFormat = new TextFormat("Arial", 11, 0x454545); label.x = 50; label.htmlText = "RESIZE"; btn.addChild(label); function resizeClickHandler(event:MouseEvent):void { try { navigateToURL(new URLRequest("javascript:setHeight("+ ((openState) ? openSize : closedSize) + "," + ((openState) ? closedSize : openSize) +");"),'_self'); openState = !openState; } catch (e:SecurityError) { var alert:TextField = new TextField(); alert.autoSize = TextFieldAutoSize.RIGHT; alert.selectable = false; alert.mouseEnabled = false; alert.defaultTextFormat = new TextFormat("Arial", 11, 0xFFFFFF); alert.x = 390; alert.htmlText = e.toString(); addChild(alert); } } function resizeHandler(event:Event):void { bg.width = stage.stageWidth; bg.height = stage.stageHeight; btn.y = stage.stageHeight - 26; }
And in the html:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>resize test</title>
<script type="text/javascript" src="swfobject.js"></script>
<script language="javascript" src="Tween.js"></script>
<script language="javascript" src="Sequence.js"></script>
</head>
<body bgcolor="#ffffff">
<script type="text/javascript">
// <![CDATA[
function setHeight(start,end) {
t1 = new Sequence();
t1.addChild(new Tween(document.getElementById('flashPulse').style, 'height', Tween.strongEaseOut, start, end, 0.5, 'px'));
t1.start();
}
// ]]>
</script>
<div id="flashPulse" style="width:400px; height:400px;">
</div>
<br>
Some Text
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("resize.swf", "pulseMovie", "100%", "100%", "9.0.0", "#000000");
so.addParam("salign", "LT");
so.addParam("scale", "noscale")
so.addParam("AllowScriptAccess", "always");
so.write("flashPulse");
// ]]>
</script>
</body>
</html>I have yet to fully test this on a windows machine so let me know if there are any problems.
Resize SWF Source Code