How to put a fullscreen image as a background using Flash

Question

Hey guys!

I wonder how you can put a fullsize background image to a website using Flash, similar to how www.zugspitze.de does.

I can copy the HTML code but what does the flash document looks like?

Thanks for your help. :-)

Answer 1

Something like this should work. Basically, you want to listen for the when the stage is resized, then change the width/height of your image so that it matches in at least one dimension.

package {

    import flash.display.Sprite;
    import flash.events.Event;
    import flash.geom.Rectangle;

    public class BackgroundImage extends Sprite {        
        private var _imageHolder:Sprite = new Sprite();

        public function BackgroundImage() {
            addChild(_imageHolder);
            // load or attach image to _imageHolder.
            // if image is loaded externally, use the event for it's completion to call startResize, otherwise use the ADDED_TO_STAGE event.
            addEventListener(Event.ADDED_TO_STAGE, startResize, false, 0, true);
        }

        private function _startResize($evt:Event):void {
            removeEventListener(Event.ADDED_TO_STAGE, startResize);
            stage.addEventListener(Event.RESIZE, _setScale, false, 0, true);
            setScale(null);
        }

        private function setScale($evt:Event):void {
            var _stageRectangle:Rectangle = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
            if (_imageHolder.width / _stageRectangle.width > _imageHolder.height / _stageRectangle.height) {
                _imageHolder.height = _stageRectangle.height;
                _imageHolder.scaleX = _imageHolder.scaleY;
            } else {
                _imageHolder.width = _stageRectangle.width;
                _imageHolder.scaleY = _imageHolder.scaleX;
            }

        }
    }
}