15 Replies Latest reply: Dec 15, 2010 12:19 PM by ikixxx RSS

    Make site background FLV movie

    danny.abel Community Member

      Hello --- I am trying to create a Flash website where the background is an FLV movie like (http://www.kmotionmedia.com/ or http://brooklynfoundry.com).  I would also like the site to resize depending on the size of the viewers browser window (I assume there is a javascript command for this).  I am using Flash CS3 with AS3. 


      I am a bit of newbie and have only incorporated videos into sites using the Flash prefab components.  Does anyone have any idea how I might do this?  Any help would be greatly appreciated.  My client needs this website finished by Wednesday (oh boy!).

        • 1. Re: Make site background FLV movie
          Rob Dillon MVP

          If you don't care about audio sync, then the solution is simple. Just import the flv into your Flash movie, size the movie to fill the stage area. The flv will just play with no on screen controls. Playing an flv with sound in the timeline will usually result in a loss of sync. It may be slight or severe.


          To resize the browser window, look at the Javascript functions resize() and resizeTo().

          • 2. Re: Make site background FLV movie
            danny.abel Community Member

            Hi Rob -- thank you so much for your response!  Will the java code that you gave me allow the website to automatically fill whatever browser window that it is viewed on?  And if so (I am very unsophisticated with java) where do I type in the code?  Within the HTML file or the action script?

            Also, what is the AS3 command for automatically looping an FLV?

            • 3. Re: Make site background FLV movie
              Rob Dillon MVP

              If you import the flv into its own movieclip and place that movieclip on the main timeline, you don't need to do anything to have it loop. Movieclips loop unless you tell them not to.


              You want to write a javascript function for the head section of your HTML doc. Something like this:


              <SCRIPT LANGUAGE="JavaScript">
                  function bigMe() {


              and then call that function from the body tag of the HTML:


              <body onLoad="bigMe()">

              • 4. Re: Make site background FLV movie
                AttaBoy2 Community Member

                I have a example of what I think you want http://www.cybermountainwebservices.com/client0/date/

                the code:


                // com is the instance name of my FLVPlayBack component.
                // it is the only thing placed on stage at author time
                //btnHolder is a movieclip in the library that holds the
                //buttons which are also MovieClips
                //initial size of the video 320 X 213 which also the
                //initial size of the stage


                    import flash.display.*;
                    import flash.display.BitmapData;
                    import flash.display.IBitmapDrawable;
                    import flash.media.*;
                    import flash.events.*;
                    import jim.interactive.*;
                    import btnHolder;


                    public class WebSite extends MovieClip
                        var mesolve:Dissolve2; // Dissolve2 lives in jim.interactive
                        var holder:btnHolder;
                        public function WebSite()
                            stage.align = StageAlign.TOP_LEFT;
                            stage.scaleMode = StageScaleMode.NO_SCALE;
                            holder = new btnHolder();
                        var onStage:*;
                        onStage = com;
                        var ratio:Number;
                        var rRatio:Number;
                        ratio = onStage.height/onStage.width;
                        rRatio = onStage.width/onStage.height;
                        var newRatio:Number;
                        function fillBG(evt:Event = null):void
                            newRatio = stage.stageHeight/stage.stageWidth;
                            holder.x = stage.stageWidth - (holder.width +25);
                            holder.y = 50;
                            if (newRatio > ratio)
                                 onStage.height = stage.stageHeight;
                                 onStage.width = stage.stageHeight * rRatio;
                                  onStage.width = stage.stageWidth;
                                  onStage.height = stage.stageWidth * ratio;
                        stage.addEventListener(Event.RESIZE, fillBG);
                        // ************************* buttons ***************
                        this.holder.mcContact.buttonMode = true;
                        this.holder.mcContact.addEventListener(MouseEvent.CLICK, gotoContact);
                        function gotoContact(e:MouseEvent){
                        var canvas:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, false, 0xffffffff);
                        var bmp:Bitmap = new Bitmap(canvas);
                        mesolve = new Dissolve2(canvas);
                        mesolve.addEventListener(Event.COMPLETE, nextPage);
                        var contact:contactUs = new contactUs();
                        function nextPage(e:Event):void {
                            addChildAt(contact, 0);
                            onStage = contact;
                // ************************ buttons end ************


                In the publish settings under html tab set the dimensions to percent 100 100

                In the html make these css rules

                body {margin: 0; padding:0; overflow: auto;}

                • 5. Re: Make site background FLV movie
                  danny.abel Community Member

                  Hi Jim --- thank you so much for your suggestion.  my only question is can i still use the code for the video background if I have created buttons and text boxes on the stage?  i have done a considerable amount of work already and i wouldn't really know how to code everything on the site as animated movie clips.  rob -- the problem with doing it the way you suggested is that it stretches everything out to fit the browser.  i am trying to keep the buttons and text a stationary size.

                  • 6. Re: Make site background FLV movie
                    AttaBoy2 Community Member

                    the buttons and text in my example don't change size but they're not stationary.  The var holder in my example is what holds the buttons as you can see it is set to change position as the stage width and height change. If you gave holder a fixed x and y  then it would remain stationary.

                    • 7. Re: Make site background FLV movie
                      danny.abel Community Member

                      hi jim -- the way i have my site set up is that i have a container file with 6 key frames along a timeline.  i have set up stationary buttons along the bottom of the stage with EventListeners attached them so that when i click on a new button it jumps to a corresponding keyframe.  upon reaching the new keyframe a UILoader Component loads an external SWF file with the background video and lot of other information.  to see the site in action you can go to flatbushpictures.com. 


                      on top of the sizing issues we have already discussed, i have just realized that when a new swf file is loaded the other swf file continues playing in the background, making the site move incredibly slowly.


                      do you have any idea about how to deal with this, while still maintaining the previous specifications i was attempting to accomplish?


                      thank you so much for all of your help!

                      • 8. Re: Make site background FLV movie
                        AttaBoy2 Community Member

                        That's going to be a awsome site when you get the kinks out. The people in it seem very indecisive.  Getting all the processes to die when you load  a new swf is a pain AS2 seemed much better at that.  You should probably start a new discussion on that.

                        • 9. Re: Make site background FLV movie
                          danny.abel Community Member

                          yeah, you're telling me.  i just opening another thread on this issue, but given the specifications that i have explained do you think your method would allow me to stretch the site to full screen?  still having trouble with that as well...

                          • 10. Re: Make site background FLV movie
                            AttaBoy2 Community Member

                            If you mean maximized browser no problem but as for full screen that's a different animal that I have no experience with.

                            • 11. Re: Make site background FLV movie
                              danny.abel Community Member

                              no, sorry.  i mean maximize the browser.  basically have my site interact with the web browser in the same way your site does.

                              • 13. Re: Make site background FLV movie
                                danny.abel Community Member

                                yeah, that stuff is interesting.  i think some of it might help me.  any new ideas about the browser stuff?

                                • 14. Re: Make site background FLV movie
                                  AttaBoy2 Community Member

                                  If by "browser stuff" you mean issues you're having with the liquid full browser stuff then I should mention that when I was looking at your site I noticed that when I changed the width or height seperately it would take a while for your swf to react and fill in the space so you might take a good look at how I use the width to height ratios to keep everything smooth.  Your site isn't online now so I cant recall if the page has a 5pixel default margin around it or if in IE theres a scrollbar on the right thest css rules fill fix those issues.

                                  body {margin: 0; padding:0; overflow:auto} I'll upload that site so you can play with it.

                                  • 15. Re: Make site background FLV movie

                                    I was looking for the same thing , and I found this.

                                    There is a complete solution  for video background behind the html site ( content )

                                    It can also be integrated in a wordpress blog.

                                    Check it out here: