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!).
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().
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?
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()">
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;}
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.
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!
About garbage collection you might find this interesting http://www.gskinner.com/blog/archives/2006/07/as3_weakly_refe.html
also http://forums.adobe.com/thread/103443?tstart=0 is useful.
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.
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
North America
Europe, Middle East and Africa
Asia Pacific