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
The Discussion
see what everyone is saying
when I submitted this post I got an error, so I'm not sure if this will be a repeat? anyway thank you for the code! I've been looking for something like this for a while! thanks!
one question! why do I get and error when running your code?
SecurityError: Error #2051? hopefully you can help! thanks again!
FYI, stage.stageWidth and stage.stageHeight in IE6 don't work.
You might need to change the security permission in the html embedding of the swf. Without seeing the code, that's my best guess.
[...] solution was already given on http://blog.hydrotik.com/2007/09/27/as3-resizing-swf-swfobject-javascript-tweener/, and hes got all credits on this, but there wasnt a flex adaptation. Althogh it shouldnt be [...]
Hi.
I wrote a post on my blog pointing to this page, and wrote also a small flex app with your code (as and html and javascript).
Thought youd like to know
Great app!
Thanks Gabriela!
I should redo this with Go and HydroTween. lol
i d'loaded the src files for this, but it seems if i republish the .fla all i see on the html page is a black square… no button, no gray background, nothing.
anyone have any ideas why that may be happening?
Try re-downloading the link. I fixed an error. I would also check to see if you have strict error checking on.
[...] 所以就變的看起來這麼複雜了 首先還是拜一下GOOGLE 擲出了這篇AS3 Resizing SWF + SWFObject + JavaScript Tweener 一看簡直完美^^ 趕緊下載Javascript Motion [...]
Hi there,
I uploaded your files to my server to test them.
http://www.fruitfuldesignstudio.com/resize/resize.html
When you click your resize button, it changes from its large to small size, but when you click the button to take it back to the large size it jumps. Would you kow why this is happening. I've been viewing it on firefox v2 and Camino 1.6.4.
When i view your example on the same 2 browsers, it works fine. Are the files for download the same as the ones that you're previwing?
There are some issues in some browsers with the width and height properties on the stage object. Check out the link above from Gabriela.