AS3 Papervision + Sound Visualizer + Line3D + Tweener - Part 2 FF07
AS3 Javascript Call Sequencer + Omniture + Google Analytics

AS3 Resizing SWF + SWFObject + JavaScript Tweener

Came across this cool javascript that tweens a bunch of objects. Javascript Motion Tweener

Here’s an example

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(0×454545, 1);
bg.graphics.drawRect(0, 0, 400, 400);
addChild(bg);

var bg2:Shape = new Shape();
bg2.graphics.beginFill(0×666666, 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, 0×454545);
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

This entry was posted on Thursday, September 27th, 2007 at 11:41 pm and is filed under AS3, Flash, HTML, Source Code. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

9 Responses to “AS3 Resizing SWF + SWFObject + JavaScript Tweener”

  1. Alfonso M Says:
    July 23rd, 2008 at 10:44 am

    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!

  2. djdonovan Says:
    July 23rd, 2008 at 6:22 pm

    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.

  3. Gabriela Trindade Perry: HCI, Ergonomia, Flex » Blog Archive » Resize swf flex Says:
    August 13th, 2008 at 6:29 am

    [...] 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 [...]

  4. Gabriela Trindade Perry Says:
    August 13th, 2008 at 6:32 am

    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!

  5. djdonovan Says:
    August 13th, 2008 at 6:59 am

    Thanks Gabriela!

  6. djdonovan Says:
    August 13th, 2008 at 6:59 am

    I should redo this with Go and HydroTween. lol

  7. Jeremy Says:
    August 19th, 2008 at 12:39 pm

    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?

  8. djdonovan Says:
    August 19th, 2008 at 1:23 pm

    Try re-downloading the link. I fixed an error. I would also check to see if you have strict error checking on.

  9. 在EC-CUBE中插入FLASH　by swfobject+JavaScript Tweener | JustFLY::JustBlog:: Says:
    September 29th, 2008 at 10:31 pm

    [...] 所以就變的看起來這麼複雜了 首先還是拜一下GOOGLE 擲出了這篇AS3 Resizing SWF + SWFObject + JavaScript Tweener 一看簡直完美^^ 趕緊下載Javascript Motion [...]

Leave a Reply