Search code examples
flashcs3

Scale image in flash to match size defined in html


I have a flash movie that loads images dynamically from an xml file. I want to re-use this .swf file on different pages, however the images on page1 are all 400 x 200 and the images on page2 are all 745 x 422. When i try to reuse this on another page, the loaded images are shrunken (resized) - i would like them to match whats defined in the width/height, but they get scaled depending on how the stage is scaled.

im using a loader (AS3) for the image that places them on a container(sprite)

slideLoader.load(new URLRequest(xmlSlideshow..image[intCurrentSlide].@src));

I have tried making the stage various sizes to start, but i would really like it to be irrelavant if possible - ie: 50 x 50. Then in html the width/height would be set to the width/height of the images being loaded.

Im not a flash wizard so please forgive me if im not clear, i'll try to give more insight if needed.


Solution

  • Couple of things... firstly you'll need to specify your app not to scale. (AS3 code)

    stage.scaleMode = StageScaleMode.NO_SCALE;
    stage.align = StageAlign.TOP_LEFT;
    

    Then once your image is loaded (add a listener to the slideLoader object), execute a javascript function using flash's ExternalInterface class.

    ExternalInterface.call('resizeFlashMovie', slideLoader.width, slideLoader.height);
    

    And your javascript function would be something like this:

    function resizeFlashMovie(width, height) {
        var flash = document.getElementById('yourFlashMovieId');
        flash.style.width = width+'px';
        flash.style.height = height+'px';
    }