Flash background with html content

Set a flash fullscreen background with html content on top and customize it within the html via SWFObject variables.

Why a flash background? Because we can 😉 and all the cool things flash does.

The code

Load the SWFObject that’ll embed the flash straight from Google CDN

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script>

The css with some custom fonts via Google fonts API

@import url(http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light);
@import url(http://fonts.googleapis.com/css?family=Reenie+Beanie);
*{margin:0; padding:0; border:0;}
html,body{width:100%; height:100%;}
body{background:#000;}
#bg{position:fixed; left:0; top:0; z-index:1;}
#container{position:absolute; width:100%; height:100%; min-width:620px; z-index:2;}
#container .content{width:540px; color:#fff; margin:40px;}
#container .content h1{font-family:'Josefin Sans Std Light', arial, serif; font-size:48px;}
#container .content p{font-family:'Reenie Beanie', arial, serif; font-size:24px; margin:30px 0;}
#container .content p.alt{color:#000; background:#fff; padding:5px 10px;}
#container .content img{border:5px solid #fff;}

The markup

<!-- html content -->
<div id="container">
  <div class="content">
    <h1>This is html content placed above flash</h1>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate consequat massa, non ultrices enim aliquam vitae. Proin at ante ac nisl ultricies dignissim. Ut enim nunc, malesuada eu cursus sit amet, ultricies sit amet nunc. Aliquam rutrum mi nec eros cursus hendrerit.
 
    <img src="a_thumbnail.jpg" height="188" width="250">
    <p class="alt">Sed dui turpis, accumsan ac porta nec, mollis venenatis mi. Integer eget elit turpis, non congue nulla. Nullam blandit iaculis diam, sit amet gravida sem tempor in.</p>
  </div>
</div>
 
<!-- flash background -->
<div id="bg">
  <script type="text/javascript">
  var flashvars = {
    myFile: "a_bg_img.jpg", //set the file URL that flash will load
    myFileType: "image", //set filetype (values: image, flash)
    loadEffect: "Fade" //set load effect - options: "Fade", "Wipe", "Iris", "PixelDissolve", "Photo"
  };
  var params = {
    id: "bg",
    name: "bg",
    wmode: "transparent",
    menu: "false"
  };
  var attributes = {
    id: "bg",
    name: "bg",
    wmode: "transparent",
    menu: "false"
  };
 
  swfobject.embedSWF("bg.swf", "bg", "100%", "100%", "10.0.45.2","expressInstall.swf", flashvars, params, attributes);
  </script>
</div>

Note the 3 variables (“myFile”, “myFileType” and “loadEffect”) inside SWFObject script. You can set the file that’ll be loaded in flash (“myFile”), set its file-type (“myFileType”) with values “image” or “flash” accordingly and the loading effect by setting an option in “loadEffect” variable. The available options are:

• Fade – Fades in background
• Wipe – Reveals background with a diagonal mask
• Iris – Reveals background with a centered mask
• PixelDissolve – Reveals background in blocks
• Photo – Reveals background with a photographic-flash effect

For example, to load an image, you set its URL in “myFile” (e.g. myFile: "a_bg_img.jpg") and set its filetype as “image” (myFileType: "image"). To load an external SWF, you set its URL in “myFile” (e.g. myFile: "a_bg_swf.swf") and set its filetype as “flash” (myFileType: "flash").

The actionscript (as 2.0)

Stage.scaleMode = "noScale";
Stage.align = "TL";
 
import flash.display.*;
import mx.transitions.*;
import mx.transitions.easing.*;
 
preloader._x=Stage.width-preloader._width-25;
preloader._y=55;
 
function loadBitmapData(url:String, target:MovieClip) {
    var imgMC:MovieClip = target.createEmptyMovieClip("imgMC",target.getNextHighestDepth());
    var listener:Object = new Object();
    listener.tmc = target;
    listener.onLoadInit = function(mc:MovieClip) {
        mc._visible = false;
 
        if(myFileType=="image"){
            var bitmap:BitmapData = new BitmapData(mc._width, mc._height, true);
            this.tmc.attachBitmap(bitmap, this.tmc.getNextHighestDepth(),"auto", true);
            bitmap.draw(mc);
        } else {
            mc.loadMovie(myFile);
        }
 
        Fullscreen_bg();
        _quality="BEST"; //for best image quality set to "BEST", for better performance set to "HIGH"
        TransitionManager.start(preloader, {type:Fade, direction:Transition.OUT, duration:1, easing:None.easeInOut});
        if(loadEffect=="Fade"){
            TransitionManager.start(bg_mc, {type:Fade, direction:Transition.IN, duration:3, easing:None.easeInOut});
        } else if(loadEffect=="Wipe"){
            TransitionManager.start(bg_mc, {type:Wipe, direction:Transition.IN, duration:3, easing:Regular.easeInOut, startPoint:1});
        } else if(loadEffect=="Iris"){
            TransitionManager.start(bg_mc, {type:Iris, direction:Transition.IN, duration:3, easing:Regular.easeInOut, startPoint:0});
        } else if(loadEffect=="PixelDissolve"){
            TransitionManager.start(bg_mc, {type:PixelDissolve, direction:Transition.IN, duration:3, easing:Regular.easeInOut});
        } else if(loadEffect=="Photo"){
            TransitionManager.start(bg_mc, {type:Photo, direction:Transition.IN, duration:2, easing:Regular.easeOut});
        }
 
        sizeListener = new Object();
        sizeListener.onResize = function() {
            Fullscreen_bg();
        }
        Stage.addListener(sizeListener);
    };
    var loader:MovieClipLoader = new MovieClipLoader();
    loader.addListener(listener);
    loader.loadClip(url, imgMC);
}
 
createEmptyMovieClip("bg_mc", getNextHighestDepth());
bg_mc.createEmptyMovieClip("cont", bg_mc.getNextHighestDepth());
loadBitmapData(myFile, bg_mc.cont);
 
function Fullscreen_bg(){
    picHeight = new Object ();
    picHeight = bg_mc._height / bg_mc._width;
    picWidth = new Object ();
    picWidth = bg_mc._width / bg_mc._height;
    if ((Stage.height / Stage.width) < picHeight) {
        bg_mc._width = Stage.width;
        bg_mc._height = picHeight * bg_mc._width;
    } else {
        bg_mc._height = Stage.height;
        bg_mc._width = picWidth * bg_mc._height;
    };
    bg_mc._x = (Stage.width-bg_mc._width)/2;
    bg_mc._y = (Stage.height-bg_mc._height)/2;
}

That’s about it. The download archive contains the source .fla so you can customize it as you like. Have fun!

License

This work is released under the MIT License.
You are free to use, study, improve and modify it wherever and however you like.
https://opensource.org/licenses/MIT

Donating helps greatly in developing and updating free software and running this blog 🙂