Skip navigation
danny.abel
Currently Being Moderated

Make site background FLV movie

Sep 12, 2009 7:16 AM

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!).

 
Replies
  • Currently Being Moderated
    Sep 14, 2009 6:20 AM   in reply to danny.abel

    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().

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 14, 2009 11:42 AM   in reply to danny.abel

    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() {
            self.moveTo(0,0);
            self.resizeTo(self.screen.availWidth,self.screen.availHeight);
            }
    </script>

     

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

     

    <body onLoad="bigMe()">

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 14, 2009 5:07 PM   in reply to danny.abel

    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

     

    package
    {
        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();
           
            addChild(holder);
           
            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;
                    }
                    else
                    {
                      onStage.width = stage.stageWidth;
                      onStage.height = stage.stageWidth * ratio;
                    }
            }
            fillBG();
           
            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);
            canvas.draw(stage);
            var bmp:Bitmap = new Bitmap(canvas);
            addChild(bmp);
            removeChild(com);
           
            mesolve = new Dissolve2(canvas);
            mesolve.addEventListener(Event.COMPLETE, nextPage);
            SoundMixer.stopAll();
            var contact:contactUs = new contactUs();
           
            function nextPage(e:Event):void {
                trace("nextPage");
                addChildAt(contact, 0);
                onStage = contact;
                removeChild(bmp);
                }
            }
        }
        }
    }
    // ************************ 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;}

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 19, 2009 4:35 PM   in reply to danny.abel

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 19, 2009 7:54 PM   in reply to danny.abel

    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.


     
    |
    Mark as:
  • Currently Being Moderated
    Sep 20, 2009 9:07 AM   in reply to danny.abel

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

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 20, 2009 10:50 AM   in reply to danny.abel
     
    |
    Mark as:
  • Currently Being Moderated
    Sep 20, 2009 4:36 PM   in reply to danny.abel

    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.

    Attachments:
     
    |
    Mark as:
  • Currently Being Moderated
    Dec 15, 2010 12:19 PM   in reply to AttaBoy2

    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:

    http://activeden.net/item/full-screen-video-background-template-as3-ve rsion/85688

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points