FORUMS: list search recent posts

full screen video background

COW Forums : Adobe Flash

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Jacob North
full screen video background
on Mar 26, 2009 at 8:28:23 pm

Hello,

I am trying to make a website that has a looping, full screen video playing in the background of the site.

An example of what I'm trying to achieve is here: http://www.fuct.com

Any help on how to achieve this effect would be greatly appreciated.

Thanks in advance.



Return to posts index

Abraham Chaffin
Re: full screen video background
on Mar 27, 2009 at 9:51:25 pm

Trick to this is setting the width and height of the video when you embed it in the html to 100% and setting the scale property depending on your needs or the needs of the swf. Then set the margin and padding of the body tag to 0. When you do those things and all you have in the html file is the swf it will be full screen. You can set the loop in the swf file so that it just keeps looping.

Abraham


Return to posts index

Jacob North
Re: full screen video background
on Mar 28, 2009 at 8:10:33 am

^YEs!

YOU the MAN, Dude! Haha

http://www.thehumanritual.com



Thanks.


Return to posts index


Jacob North
Re: full screen video background
on Mar 30, 2009 at 12:04:17 am

Abraham, By now, its no secret, I'm a flash newb.

I'm looking for some further assistance.

http://www.thehumanritual.com

I would like to make the white ICON that fades in, over the video, FREEZE, on its last frame, and STAy there, while the background movie continues to play.

(eventually I want to turn the icon into a button, linking to another section of the site)
..

I'm looking at tutorials on eventhandlers, etc. but I've exhausted every option I've tried so far..

Is there a simple way to make the icon "fade in" and then STAY there (not loop) while the background continues to loop?

Any and all help on this matter is greatly appreciated, everyone.

Thanks.

Jacob


Return to posts index

Abraham Chaffin
Re: full screen video background
on Mar 30, 2009 at 7:38:45 pm

What you want to do is have these separate items be two separate movie clips inside the main movie clip. By doing this you can have three separate time lines and three different possible looping systems.

Right click on your element or elements and choose
Convert to Symbol > Movie Clip

The timeline of the animation movie clip would loop or play if it's simply an embedded movie.

The timeline of the button would play and then stop on the last frame

The main timeline of your scene could be a single frame.

If this doesn't make sense I suggest you take a look at some of the Flash tutorials here:
http://library.creativecow.net/tutorials/adobeflash

to familiarize yourself with the flash interface and the way it works.

Abraham


Return to posts index

Joe Antcliff
Re: full screen video background
on Apr 30, 2010 at 7:16:31 pm

Hi Abraham

could you help me? I have a video and I would like to achieve the same results as that website, with a video playing in the background.

I have a video and that's pretty much all i know, i can use dreamweaver pretty well but I can't use flash very well at all.

So I have my video and I dont know what to do next?

If you could help me that would be great.

Thank you.


Return to posts index


Abraham Chaffin
Re: full screen video background
on May 1, 2010 at 3:17:13 pm

If you have the flash video already you don't really have to use flash past that point. The rest is in Dreamweaver.

The basic steps are as follows:

Set your body styling to have a margin of 0px and a padding of 0px;

Embed your video into a blank html page using DW. Set the width and height param to 100%.

Optional if you want content over the flash background:
Set an extra parameter on the embedded flash named "WMODE" and set the value to "transparent".
Insert a div with absolute positioning and position it wherever you want it using the left and top css parameters. Put whatever you want to over lay the flash background inside the div.

Test it in a browser.

The code would be something like this:


<head>
<style>
body{
margin:0px;
padding: 0px;
}
</style>
</head>
<body><script src="/Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="/Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script type="text/javascript">
AC_FL_RunContent( 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0', 'width', '100%', 'height', '100%', 'src', 'YOUR_SWF_FILE_LOCATION_GOES_HERE', 'quality', 'high', 'pluginspage', 'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash', 'movie','YOUR_SWF_FILE_LOCATION_GOES_HERE', 'scale', 'noscale', 'allowFullScreen', 'true', 'allowscriptaccess', 'always', 'FlashVars','whatever=whatever', 'WMODE','transparent' );
</script>
<div <code>style="position
: absolute; background-color:#000000; width:300px; text-align:center; left:100px; top: 200px; color:#FFFFFF; background-color:#009999;">This is text overlay but it could be anything you want.</div>
</body>
</html>

Abraham


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2018 CreativeCOW.net All Rights Reserved
[TOP]