This website uses cookies to personalise ads and to analyse traffic ok
web design

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.
http://opensource.org/licenses/MIT


63 Comments

Post a comment

Comments pages: 1 2

  1. Aamir Shah
    Posted on December 20, 2012 at 14:52 Permalink

    Can u please make the a_bg_swf.swf as a slideshow file, which can automatically slideshow the pictures.. I tried my file but igot blank result on this a_bg_swf file works.. what can be the problem

    Reply
  2. Datgs
    Posted on October 27, 2012 at 10:41 Permalink

    Hi,

    Please help me how to make the flash background like this http://liebehuman.net/gallery2/main.html

    Reply
  3. allison
    Posted on July 28, 2012 at 02:33 Permalink

    phew, you saved me from looking like a total idiot with my client 🙂 promised him we could put some animation in the background and then i couldn’t find a tutorial that actually worked til this.. thank you

    Reply

Comments pages: 1 2

Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php