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


65 Comments

Post a comment

Comments pages: 1 2

  1. Ibrahim
    Posted on May 18, 2012 at 11:22 Permalink

    My flash file size is 550 x 421. It works fine in firefox, but in Internet Explorer left are right side are shown a white color? why it will happened?

    Reply
  2. Koen
    Posted on December 24, 2011 at 20:08 Permalink

    Hi

    you know how to put a youtube video in the background instead of the swf?
    1 if even possible, how to get API-controls on them as well? I wanna do a sort of remake of boniver.org

    Reply
  3. umesh shejole
    Posted on December 2, 2011 at 11:33 Permalink

    thank you very much for helpful post

    Reply
  4. Dave
    Posted on November 9, 2011 at 05:13 Permalink

    Great tutorial Malihu. I’m trying to embed a flash movie which is just a slide show, behind a bunch of html content on the home page. I think i’ll have to surrender and just use the SwfObject plugin but I was wondering if it was possible to upload a flash swf and use it as a bg without using any jquery or swfobject, jsut pure css and html.

    Thanks, cheers!

    Reply
  5. Kamal Thind
    Posted on October 9, 2011 at 13:32 Permalink

    Thanks Malihu… Amazing… it works smoothly with Scroll-bar also…

    Reply
  6. Thiyagarajan V
    Posted on September 8, 2011 at 14:56 Permalink

    Thanks,

    nice work

    VTR

    Reply
  7. Catarina Guerreiro
    Posted on July 24, 2011 at 05:04 Permalink

    Perfect! Thank You!

    Reply
  8. Josy
    Posted on May 31, 2011 at 18:05 Permalink

    Nice post dude… really hard to find this topic!
    anyway to run a flv on this?
    🙂

    Reply
    • malihu
      Posted on June 1, 2011 at 13:26 Permalink

      Hm… I’ve done it in the past iirc. I’ll see if I can get some time to create a background flash video version. Thanks for your suggestion Josy 🙂

      Reply
  9. sarfaraz
    Posted on May 5, 2011 at 12:48 Permalink

    I have this script how can i add width to it . instead of stage.width please help me .

    if(_ymouse>=MOVIE_CLIPS._y &&

    _ymouse<MOVIE_CLIPS._y+MOVIE_CLIPS._height)
    {
    screen = Stage.width;
    center=screen/2;
    distance=Math.abs(center-_xmouse);
    reduced=thumbSpeed/center;
    speed=reduced*distance;
    RUN(this);
    }

    Reply
  10. Bryan
    Posted on May 2, 2011 at 05:38 Permalink

    Is there any way to disable the circular loading animation while waiting for the background image to load? Or perhaps move it to the center instead of the top right? Thank you.

    Reply
  11. David Luiz
    Posted on April 13, 2011 at 19:00 Permalink

    Hi it’s me again…
    hey this is very cool script.. my question is that when i add a flash bg the interactivity is no more.. i mean if i use any interactive flash like a image gallery with thumb selection, it dosent do anything..
    thanks..

    Reply
    • malihu
      Posted on April 14, 2011 at 08:46 Permalink

      This is normal because using the script as it is, any swf you’re calling loads externally in the root bg.swf, thus losing its root path (its root becomes level1 while level0 being the bg.swf).

      To use any interactive flash (like image galleries etc.), use only the html markup with the swfobject of the script, changing its embed source (bg.swf).

      Reply
      • David Luiz
        Posted on April 14, 2011 at 17:00 Permalink

        well, you mean to say that if i need interactivity to any flash file .swf then i should have it in background div with 100% width and height and then use divs on top of it with higher Z Index?? Is it possible?
        thanks.

        Reply
  12. Bryan Grezeszak
    Posted on April 9, 2011 at 02:44 Permalink

    Just wanted to point out that setting wmode to “opaque” instead of “transparent” may actually increase the performance a bit.

    There are 3 possible wmodes: “window”, “opaque”, and “transparent”. “window” is the default and shows over any HTML regardless of any CSS/markup you use. “transparent” and “opaque” both don’t perform as well as window, but show in HTML layers properly. “opaque” however should give it a bit better performance since it still has an opaque background to itself like “window” mode, but it still plays nice with html layers like “transparent” mode does 🙂

    Reply
    • malihu
      Posted on April 9, 2011 at 06:51 Permalink

      Thanks for the input Bryan 🙂 It’s true “transparent” wmode is a bit heavy on performance and in reality should only be used to layer an swf over html background.

      Reply
  13. uceceo
    Posted on March 19, 2011 at 15:08 Permalink

    great work malihu!…quick question…since flash is in background is there a way to force a true fullscreen effect so all browser toolbars are gone?…and user presses ESC to exit fullscreen?

    Reply
    • Bryan Grezeszak
      Posted on April 9, 2011 at 02:51 Permalink

      In flash 9,0,28,0 and above wmode “opaque” and “transparent” flash can go fullscreen (before that it couldn’t, only wmode “window” could), but only the flash would go to full screen, not the HTML content over it, so I’m pretty sure that’s not what you want!

      Reply
  14. cino
    Posted on March 18, 2011 at 08:02 Permalink

    thank you so much for sharing great file!
    I have one question…
    is there way I can re-size bg image rather than full screen?
    I’d like to make it smaller as 800 x 380.
    I looked fla file but no clue…
    thanks

    Reply
    • malihu
      Posted on April 13, 2011 at 11:22 Permalink

      All the image sizing happens in actionscript inside Fullscreen_bg function. For example to make images 800×380 you can do:
      function Fullscreen_bg(){ bg_mc._width = 800; bg_mc._height = 380; bg_mc._x = (Stage.width-bg_mc._width)/2; bg_mc._y = (Stage.height-bg_mc._height)/2; }

      Reply
  15. Deki
    Posted on March 15, 2011 at 19:43 Permalink

    Sorry for wrong place for message ..it is not reply

    I noticed that difference in flash appearance in browser with old flash file and corrected flash – http://manos.malihu.gr/tuts/flash_bg/a_bg_swf.swf

    Please can you tell what code in action scripts make flash to works without black background bar around them, or to post fla file

    Best regards

    Reply
    • malihu
      Posted on March 15, 2011 at 19:53 Permalink

      No problem, check above 😉

      Reply
      • Deki
        Posted on March 16, 2011 at 01:51 Permalink

        Hi Malihu

        thanks for quick answer
        ok. Please… problem is next:

        I am trying to put xml slideshow in flash background.

        I have slideshow.swf, slideshow.xml and slideshow folder with photos.

        It is working normal when I start flash standalone, but when I put in html code my slideshow.swf –

        var flashvars = {
        myFile: “slideshow.swf”,
        myFileType: “flash”,
        loadEffect: “Fade”
        };

        .
        .
        .

        swfobject.embedSWF(“bg.swf”, “bg”, “100%”, “100%”, “10.0.45.2”,”expressInstall.swf”, flashvars, params, attributes);

        Nothing happens, it load flash but without photos – probably not loading xml file. Everything are on the root folder.

        Work file slideshow.fla stage is empty…only has action script for slideshow on first frame.

        Am I missing something in code? Maybe something restricted loading xml?

        But when I put my slideshow.swf in – swfobject.embedSWF(“slideshow.swf”, “bg”, “100%”, “100%”, “10.0.45.2”,”expressInstall.swf”, flashvars, params, attributes); – it is

        working but with background bars.

        If need to send you work files?

        Best regards

        Reply
  16. Leo
    Posted on March 4, 2011 at 23:04 Permalink

    Hi,

    Thank you it’s a great tutorial. I just have one question, do you have a coda that could work with action script 3? because my swf i wanna use as a background is created by action script 3.

    Regards,

    Reply
    • malihu
      Posted on March 5, 2011 at 17:11 Permalink

      Hi Leo,

      Unfortunately I don’t have it on AS3.0, only AS2.0. It shouldn’t be too hard to convert it to AS3.0 though.

      Reply
      • Leo
        Posted on March 5, 2011 at 21:28 Permalink

        Thanks for answering.

        Could you please help me converting it. or guide me on how to convert AS2.0 to 3.0?

        Regards,

        Reply
      • Deki
        Posted on March 15, 2011 at 19:26 Permalink

        Hi,

        I noticed that difference in flash appearance in browser with old flash file and corrected flash – http://manos.malihu.gr/tuts/flash_bg/a_bg_swf.swf
        Please can you tell what code in action scripts make flash works without black background bar around them, or to post fla file

        Best regards

        Reply
      • malihu
        Posted on March 15, 2011 at 19:50 Permalink

        @Deki
        The “a_bg_swf.swf” doesn’t contain any actionscript (only static movie clips and timeline animations).

        In order for any swf to work as fullscreen background without black bars, the content (static or dynamic) inside it must not exceed its stage area.

        For instance, if your movie’s stage is 1024×768, the x and y position of movie clips, graphics, buttons etc. that contains, must be less or equal to 1024 and 768 accordingly.

        Reply
  17. Sven Regener
    Posted on March 3, 2011 at 10:13 Permalink

    Hi Malihu,

    well, it is scaling, but on a normal 1280×1024 screen there is a bar at the bottom, which is disappearing when one opens the browser window to more than 1500×1024.

    Thanks once again for your patience.

    Reply
    • malihu
      Posted on March 3, 2011 at 16:55 Permalink

      My bad! Seems that on a_bg_swf.swf, I left some movie clips outside of stage area which resulted an incorrect scaling and calculation of swf dimensions.

      I’ve updated the .zip with the correct a_bg_swf.swf which you can also get here: http://manos.malihu.gr/tuts/flash_bg/a_bg_swf.swf

      Thanks a ton for pointing it and for your comments 🙂

      Reply
      • Sven Regener
        Posted on March 3, 2011 at 18:48 Permalink

        Great! Now it is running well.

        Reply
  18. Sven Regener
    Posted on March 2, 2011 at 18:57 Permalink

    Hi Malihu,

    great idea, fullsize background with flash. Thanks for sharing.

    One question: I have implemented the “a_bg_swf.swf” from your .zip and set the myFileType: to “flash”. Is it correct that the flash animation is not running in fullscreen mode e.g. is not skaling with the browser size?

    Thanks,
    Sven

    Reply
    • malihu
      Posted on March 3, 2011 at 02:52 Permalink

      Hi Sven,
      Thanks you for your comments 🙂
      The demo swf in the .zip file should scale according to browser size. Is it not?

      Reply
      • Sven Regener
        Posted on March 3, 2011 at 10:08 Permalink

        Hi Malihu,

        well, it is scaling, but on a normal 1280×1024 screen there is a black bar at the bottom. Beyond 1500×1024 browsersize the bar is disappearing.

        Must I build a bigger swf file?

        Thanks one again for your patience, not only with me, but with all the other people in the comment sections of you website.

        Reply
  19. James
    Posted on February 7, 2011 at 21:16 Permalink

    Hi Malihu,

    I just posted I hope I’m not posting twice but I don’t see the post.

    Anyway I was asking if I have to do anything special or at all in Flash Cs5 if I wanted to use a swf of my own instead of the one you provided?

    Looking forward to hearing from you.

    Thank you,

    James

    Reply
    • malihu
      Posted on February 8, 2011 at 12:56 Permalink

      For some unknown reason, Akismet tagged your post as psam 😛 No worries. Check the relpy above.

      Reply
  20. James
    Posted on February 7, 2011 at 21:12 Permalink

    Hi Malihu,

    Great tutorial! I have had success running the swf file you included. I have a question though, if I took a flv file converted to swf, how could I get that to play on my background rather than a_bg_swf.swf? Would it just be a matter of changing the name and including the file? Or do I have to do anything in Flash Cs5??

    I appreciate your help and great explanations! 🙂

    Reply
    • malihu
      Posted on February 8, 2011 at 12:52 Permalink

      Just rename and include the file 😉 You can load any swf you want.

      Reply
  21. nikos
    Posted on January 27, 2011 at 13:23 Permalink

    great stuff man!!

    Reply
  22. Brett Widmann
    Posted on January 23, 2011 at 21:03 Permalink

    This is a very nice tutorial. Thank you for the help! I love how this works.

    Reply
  23. Raghibsuleman
    Posted on December 22, 2010 at 10:31 Permalink

    thanks… its new plugin for me
    http://www.raghibsuleman.com/

    Reply
  24. Lubomir
    Posted on November 1, 2010 at 17:15 Permalink

    I played with your code, but I can’t get it to work. So I guess I’ll wait for your implementation. Once you finish, please let me know.

    Reply
    • malihu
      Posted on December 19, 2010 at 17:44 Permalink

      Lubomir, I’ve changed the script so it loads swf files as well as images. Please re-download the files and check the updated post on how to implement it.

      Reply
  25. Lubomir
    Posted on October 30, 2010 at 20:45 Permalink

    Hi, is it possible to adapt your code so it loads .swf file instead of .jpg picture? Thanks in advance.

    Reply
    • malihu
      Posted on October 30, 2010 at 21:47 Permalink

      You would have to edit the .fla and create a new function to load non-bitmapdata files and add a filetype check condition for the “myFile” variable . It’s fairly easy so I’ll try to implement it when I get some time available. Thanks for your suggestion 🙂

      Reply
  26. Martin
    Posted on September 29, 2010 at 02:20 Permalink

    I have IE 8.0.6001, so the same as yours… I can send you the screenshot if that can be helpful. The top bar in IE says “Flash fullscreen background on html – Flash Player Installation”, but nothing happens… I’ve checked this file at work also (the same IE version) with the same result…

    Reply
    • malihu
      Posted on September 29, 2010 at 09:30 Permalink

      I think the problem is related to flash player not updating/ installing properly. Inside the swfobject, try to change the flash version “10.0.45.2” to the latest (10.1.85.3) or a previous one (e.g. 9.0.0.0) and see if it works. If not, I would do complete re-install of the flash player. Let me know the results.

      Reply
      • Martin
        Posted on September 30, 2010 at 05:53 Permalink

        Yes, 9.0.0.0 works! 🙂
        Thank you VERY MUCH for all your support and super fast responses!
        Martin.

        Reply
  27. Caroline
    Posted on September 28, 2010 at 01:27 Permalink

    I adore this website, thank you so much for your help and these tutorials.
    Bonne continuation,
    Caroline

    Reply
    • Martin
      Posted on September 28, 2010 at 21:20 Permalink

      Hello Malihu,
      I success with random image on the background, thanks for your tips! However – I’m sorry for bothering you – there seems to be a problem with IE – no background is displayed, just the html part. Can you tell me what should I change to make it working, please?
      Thank you in advance!
      Martin

      Reply
      • malihu
        Posted on September 29, 2010 at 01:08 Permalink

        Hi Martin,
        I’ve checked the script on IE8 (version 8.0.6001) and it works fine. What version of IE you’re running?

        Reply
  28. Martin
    Posted on September 25, 2010 at 20:04 Permalink

    Thank you soooo much!!!

    Reply
  29. Martin
    Posted on September 24, 2010 at 22:40 Permalink

    Finally I found great file! How difficult is to make the background random (let’s say there are 5 pictures in some ‘img’ folder and every time you refresh the page you’ll get different picture)? Is it possible…?
    Thanks!

    Reply
    • malihu
      Posted on September 25, 2010 at 02:23 Permalink

      Yes it is possible. The image to load is set in javascript (flashvars, myFile) so it’s relatively easy to make a js array of images or a function that gets a random image from a directory at the top of the js tag. Another way would be to declare more than one files inside flashvars (e.g. myFile, myFile1, myFile2 etc.) and make an actionscript function that randomly selects which one to load.

      Reply
      • Martin
        Posted on September 25, 2010 at 02:58 Permalink

        Thank you for your fast reply!

        Reply
      • Martin
        Posted on September 25, 2010 at 03:25 Permalink

        Malihu,
        I was trying to work on .fla file, but I cannot open it (message: ‘Unexpected file format’). I work with Flash CS3, any ideas…?
        Thank you!

        Reply
      • malihu
        Posted on September 25, 2010 at 12:27 Permalink

        Martin,
        The reason for “unexpected file format” message when you open the .fla with flash cs3 is because I have made it with flash cs4.
        I’ve updated the .zip file with an additional cs3 version (folder “cs3” inside .zip) of the .fla so it can be opened with flash cs3. All you need to do is download the http://manos.malihu.gr/tuts/flash_bg/flash_bg.zip again 😉

        Reply
  30. Nam
    Posted on September 17, 2010 at 11:38 Permalink

    Hello

    How to add more pictures to background, so it be a slice show?

    Nice work 🙂

    Reply
    • malihu
      Posted on September 17, 2010 at 18:08 Permalink

      At the moment you can’t simply add more images to make a slideshow. This would require much more actionscript in flash. Good suggestion thought, I might extend this script in the future.

      You might wanna check http://manos.malihu.gr/flash-image-slideshow. If you can combine it with this script’s CSS and SWFObject code you might be able to do it.

      Reply
      • shivam
        Posted on October 10, 2012 at 15:16 Permalink

        Just make ur flash and upload it rename it to bg it will work.

        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