bjornson’s blog

this blog is very young, come again to watch it grow

AS3 + JavaScript = Resizable SWF in HTML

with 8 comments


I recently needed to resize an swf dynamically within an HTML document and could decided to combine JavaScript with AS3. So here is my solution in three simple steps:

  1. I wrote a simple JavaScript file that allows resizing of elements in an animated fashion.
  2. I embedded the swf in the HTML file in a <div> container with the style attribute “overflow:hidden;” and an id called “swf_container”.
  3. To ensure the desired effect I added stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT;
  4. Now I added a button in the Flash file that caused navigateToURL(new URLRequest(“JavaScript:sizeById(‘swf_container’,500,150,5)”), “_self”); and with this calling the JavaScript function and resizing itself.

If you want to try this yourself you can download the JavaScript file sizebyid.js and recreate what I did with it or download the whole sample.zip including the -.Fla, the -.swf, the -.js and the -.html file.

Of course you can try it out first:

Click the arrow in the top left corner to toggle sizes of the sample.

You can also use the following html form that calls the same JavaScript function

px width
px height
steps (fewer steps=faster)

Written by bjornson

November 5th, 2008 at 7:41 pm

8 Responses to 'AS3 + JavaScript = Resizable SWF in HTML'

Subscribe to comments with RSS or TrackBack to 'AS3 + JavaScript = Resizable SWF in HTML'.

  1. I’m trying to use this, cause I created a gallery and I’m loading images bigger then the stage size.

    I’ll let you know if everything goes well.

    Anyway Thanks in advance

    :P

    mitomane

    13 Feb 09 at 5:50 pm

  2. Thanks so much.I’m looking for it! :X

    yew

    7 Apr 09 at 6:47 am

  3. Very nice, however after downloading the sample.zip the flash button does not resize the window. Works on your site of course but I cannot get it to work on my local machine.

    Thoughts?
    Thanks!

    lhex

    20 May 09 at 6:19 am

  4. @Ihex:
    On your local machine you need to make the file a trusted site, because it attempts to speak to a local file (the javascript file).
    Either you test it on a webserver (i recommend xampp for local server tests) where you do not need to change the settings or you use the flash settings manager (just google it) to add the file to the trusted list.
    I hope this helps.

    bjornson

    21 May 09 at 10:34 pm

  5. Thanks bjornson that worked!

    lhex

    20 Jun 09 at 6:30 am

  6. Thanks for sharing your example, but it seems there’s an issue with IE8. Could you help please ?

    evasion

    7 Sep 09 at 6:47 pm

  7. Very cool post — great blog!

    Lou K.

    2 Mar 10 at 11:43 pm

  8. Thanks Bjornson! I just tried to make simple page curl just from the top RIGHT corner. Here’s my simplyfied example from top RIGHT corner: http://vinniytened.netai.net/resize/kampas
    Opera & Safari plays that nice, but Firefox, Chrome & IE (off course ) plays that buggy (with blinking…).
    Please, if you have any solution. Here is my example files: http://vinniytened.netai.net/resize/kampas/resize.rar
    Thanks in advance!

    Vinni

    1 Jul 11 at 11:17 pm

Leave a Reply