12 Replies Latest reply on Jul 27, 2011 11:30 AM by kglad

    Fullscreen Flash Video Landing Page

    Flashy86

      Hi guys,

       

       

      I'm new here, and Flash is a complete unknown to me, but I'm making a website for someone who wants their landing page to be a full screen video they've provided me with...which will re-direct to the Home page once it's finished playing.

       

      Can anyone give me advice or tips on how to do this?

       

      I think I got something working when I tried doing it about 6 months ago, but the video has changed now and I've completely forgotten what a did (and if it was even right).

       

      Am i right in thinking that I should convert the video (which is currently in *.MOV format) to FLV? Or would F4V be a better option?

       

      My biggest concern is people visiting the site not having flash installed (or a compatible version) and just re-directing them past the video...seeing as this site will be used to sell products it'd be a nightmare if no one could actually reach it!

       

       

      Anyway, any help would be greatly appreciated!

        • 1. Re: Fullscreen Flash Video Landing Page
          kglad Adobe Community Professional & MVP

          if you want to play video in flash, use an flv or f4v.   f4v may give you better video quality so if you're able to use it, do so.

           

          and, if this is a web app, you can't start fullscreen.  the user will need to click something to trigger the change to fullscreen.

          • 2. Re: Fullscreen Flash Video Landing Page
            Flashy86 Level 1

            Thanks for the reply kglad.

             

            I just want a bog standard html page which includes the video, shows it in full screen on open and then re-directs somewhere else after it plays.

             

            I know this is possible because I did it before...I just can't remember how! Just to clarify though, by fullscreen I mean taking up the whole browser window, rather than the whole monitor.

             

            I'd rather do this the easiest way possible, so it doesn't have to be done in Flash, but I don't know of any other methods.

            • 3. Re: Fullscreen Flash Video Landing Page
              kglad Adobe Community Professional & MVP

              that's full-browswer, not fullscreen.

               

              and yes, full-browser is easy:  publish your html for 100%x100% (file/publish settings/html/size and select percent from the combobox).

              • 4. Re: Fullscreen Flash Video Landing Page
                Flashy86 Level 1

                Ah ok, good to know.

                 

                So how exactly do I:

                 

                a) put this new f4v video file into the web page/flash page?

                b) set it up to play and then re-direct?

                c) support things like users not having flash installed/the correct version of flash installed?

                 

                If there are any guides for this that you know of I'd be very thankful because I'm guessing there's quite a few steps involved to do all of this!

                • 5. Re: Fullscreen Flash Video Landing Page
                  kglad Adobe Community Professional & MVP

                  a) put this new f4v video file into the web page/flash page?

                  create a fla, add an flvplayback component to your stage and assign its source to be your flv/f4v

                  b) set it up to play and then re-direct?

                  after you complete a, b will be easy

                  c) support things like users not having flash installed/the correct version of flash installed?

                  the code in your flash published html will take care of that.  you can edit that html to do other things if flash is not detected.

                  • 6. Re: Fullscreen Flash Video Landing Page
                    Flashy86 Level 1

                    Thanks.

                     

                     

                    The issue I've got at the moment is if Flash isn't installed, it shows the 'Get Flash Player' button, rather than just re-directing to the Home page instead.

                     

                    The 'Action Script' code I have for the file is:

                    flv.addEventListener(Event.COMPLETE,Redirect);

                     

                    function Redirect(e:Event){

                    navigateToURL(new URLRequest("http://localhost:4184/Website/Home.aspx"),"_self");

                    }

                     

                    which seems to re-direct, but I had to make the folder the page is stored in a trusted folder for it to work without throwing an error (I think this is because it's currently re-directing to a localhost address).

                     

                    Any ideas how to get it working as it should?

                    • 7. Re: Fullscreen Flash Video Landing Page
                      kglad Adobe Community Professional & MVP

                      copy and paste the html page that embeds your swf and i'll show you what you need to change.

                       

                      p.s.  please mark helpful/correct responses, if there are any.

                      • 8. Re: Fullscreen Flash Video Landing Page
                        Flashy86 Level 1

                        Thanks very much kglad.

                         

                        The code is below.

                         

                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

                        <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

                             <head>

                                  <title>AOC</title>

                                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                                  <style type="text/css" media="screen">

                                  html, body { height:100%; background-color: #ffffff;}

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

                                  #flashContent { width:100%; height:100%; }

                                  </style>

                             </head>

                             <body>

                                  <div id="flashContent">

                                       <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" id="AOC" align="middle">

                                            <param name="movie" value="AOC.swf" />

                                            <param name="quality" value="high" />

                                            <param name="bgcolor" value="#000000" />

                                            <param name="play" value="true" />

                                            <param name="loop" value="true" />

                                            <param name="wmode" value="window" />

                                            <param name="scale" value="noborder" />

                                            <param name="menu" value="true" />

                                            <param name="devicefont" value="false" />

                                            <param name="salign" value="" />

                                            <param name="allowScriptAccess" value="sameDomain" />

                                            <!--[if !IE]>-->

                                            <object type="application/x-shockwave-flash" data="AOC.swf" width="100%" height="100%">

                                                 <param name="movie" value="AOC.swf" />

                                                 <param name="quality" value="high" />

                                                 <param name="bgcolor" value="#000000" />

                                                 <param name="play" value="true" />

                                                 <param name="loop" value="true" />

                                                 <param name="wmode" value="window" />

                                                 <param name="scale" value="noborder" />

                                                 <param name="menu" value="true" />

                                                 <param name="devicefont" value="false" />

                                                 <param name="salign" value="" />

                                                 <param name="allowScriptAccess" value="sameDomain" />

                                            <!--<![endif]-->

                                                 <a href="http://www.adobe.com/go/getflash">

                                                      <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />

                                                 </a>

                                            <!--[if !IE]>-->

                                            </object>

                                            <!--<![endif]-->

                                       </object>

                                  </div>

                             </body>

                        </html>

                        • 9. Re: Fullscreen Flash Video Landing Page
                          kglad Adobe Community Professional & MVP

                           

                           

                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

                          <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

                               <head>

                                    <title>AOC</title>

                                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                                    <style type="text/css" media="screen">

                                    html, body { height:100%; background-color: #ffffff;}

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

                                    #flashContent { width:100%; height:100%; }

                                    </style>

                               </head>

                               <body>

                                    <div id="flashContent">

                                     &nbs p;   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" id="AOC" align="middle">

                                     &nbs p;        <param name="movie" value="AOC.swf" />

                                     &nbs p;        <param name="quality" value="high" />

                                     &nbs p;        <param name="bgcolor" value="#000000" />

                                     &nbs p;        <param name="play" value="true" />

                                     &nbs p;        <param name="loop" value="true" />

                                     &nbs p;        <param name="wmode" value="window" />

                                     &nbs p;        <param name="scale" value="noborder" />

                                     &nbs p;        <param name="menu" value="true" />

                                     &nbs p;        <param name="devicefont" value="false" />

                                     &nbs p;        <param name="salign" value="" />

                                     &nbs p;        <param name="allowScriptAccess" value="sameDomain" />

                                     &nbs p;        <!--[if !IE]>-->

                                     &nbs p;        <object type="application/x-shockwave-flash" data="AOC.swf" width="100%" height="100%">

                                     &nbs p;           &n bsp; <param name="movie" value="AOC.swf" />

                                     &nbs p;           &n bsp; <param name="quality" value="high" />

                                     &nbs p;           &n bsp; <param name="bgcolor" value="#000000" />

                                     &nbs p;           &n bsp; <param name="play" value="true" />

                                     &nbs p;           &n bsp; <param name="loop" value="true" />

                                     &nbs p;           &n bsp; <param name="wmode" value="window" />

                                     &nbs p;           &n bsp; <param name="scale" value="noborder" />

                                     &nbs p;           &n bsp; <param name="menu" value="true" />

                                     &nbs p;           &n bsp; <param name="devicefont" value="false" />

                                     &nbs p;           &n bsp; <param name="salign" value="" />

                                     &nbs p;           &n bsp; <param name="allowScriptAccess" value="sameDomain" />

                                     &nbs p;        <!--<![endif]-->

                                     &nbs p;           &n bsp; <a href="http://www.yourdomain.com/yourhtml.html">put some message here </a>

                                     &nbs p;        <!--[if !IE]>-->

                                     &nbs p;        </object>

                                     &nbs p;        <!--<![endif]-->

                                     &nbs p;   </object>

                                    </div>

                               </body>

                          </html>

                           

                           

                          • 10. Re: Fullscreen Flash Video Landing Page
                            Flashy86 Level 1

                            Will that auto-redirect the page if you don't have the correct flash player/flash player installed?

                            • 11. Re: Fullscreen Flash Video Landing Page
                              Flashy86 Level 1

                              Any ideas how to get that working?