1 Reply Latest reply on Aug 10, 2010 1:11 PM by Bear Travis

    Embedding in HTML

    Super_Clark

      Hello I dont know if this is where i should post this but i am using magento and i have embeded flash onto a cms page. It works just fine except IE 8 and it is kinda choppy. When i run the build in FC then it gives me a main.html file and i am wondering if i need all of that code in the main.html in order for it to work right because it works just fine when i open that file and  I can only get it to embed in magento  with the magento flash embedder.

       

      Code that Magento Creates

      <p>
      <object width="953" height="600" data="{{media url="/Main.swf"}}" type="application/x-shockwave-flash">
      <param name="data" value="{{media url="/Main.swf"}}" />
      <param name="quality" value="high" />
      <param name="scale" value="exactfit" />
      <param name="salign" value="t" />
      <param name="wmode" value="transparent" />
      <param name="src" value="{{media url="/Main.swf"}}" />
      </object>
      </p>

       

      Code that FC Creates

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <!-- saved from url=(0014)about:internet -->
      <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">   
          <!--
          Smart developers always View Source.
         
          This application was built using Adobe Flex, an open source framework
          for building rich Internet applications that get delivered via the
          Flash Player or to desktops via Adobe AIR.
         
          Learn more about Flex at http://flex.org
          // -->
          <head>
              <title></title>        
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
              <!-- Include CSS to eliminate any default margins/padding and set the height of the html element and
                   the body element to 100%, because Firefox, or any Gecko based browser, interprets percentage as
                   the percentage of the height of its parent container, which has to be set explicitly.  Initially,
                   don't display flashContent div so it won't show if JavaScript disabled.
              -->
              <style type="text/css" media="screen">
                  html, body    { height:100%; }
                  body { margin:0; padding:0; overflow:auto; text-align:center;
                         background-color: #ffffff; }  
                  #flashContent { display:none; }
              </style>
             
              <!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
              <!-- BEGIN Browser History required section -->
              <link rel="stylesheet" type="text/css" href="history/history.css" />
              <script type="text/javascript" src="history/history.js"></script>
              <!-- END Browser History required section --> 
                 
              <script type="text/javascript" src="swfobject.js"></script>
              <script type="text/javascript">
                  <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. -->
                  var swfVersionStr = "10.0.45";
                  <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
                  var xiSwfUrlStr = "playerProductInstall.swf";
                  var flashvars = {};
                  var params = {};
                  params.quality = "high";
                  params.bgcolor = "#ffffff";
                  params.allowscriptaccess = "sameDomain";
                  params.allowfullscreen = "true";
                  var attributes = {};
                  attributes.id = "Main";
                  attributes.name = "Main";
                  attributes.align = "middle";
                  swfobject.embedSWF(
                      "Main.swf", "flashContent",
                      "953", "600",
                      swfVersionStr, xiSwfUrlStr,
                      flashvars, params, attributes);
                  <!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. -->
                  swfobject.createCSS("#flashContent", "display:block;text-align:left;");
              </script>
          </head>
          <body>
              <!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough
                   JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show
                   when JavaScript is disabled.
              -->
              <div id="flashContent">
                  <p>
                      To view this page ensure that Adobe Flash Player version
                      10.0.45 or greater is installed.
                  </p>
                  <script type="text/javascript">
                      var pageHost = ((document.location.protocol == "https:") ? "https://" :    "http://");
                      document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
                                      + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
                  </script>
              </div>
                
                 <noscript>
                  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="953" height="600" id="Main">
                      <param name="movie" value="Main.swf" />
                      <param name="quality" value="high" />
                      <param name="bgcolor" value="#ffffff" />
                      <param name="allowScriptAccess" value="sameDomain" />
                      <param name="allowFullScreen" value="true" />
                      <!--[if !IE]>-->
                      <object type="application/x-shockwave-flash" data="Main.swf" width="953" height="600">
                          <param name="quality" value="high" />
                          <param name="bgcolor" value="#ffffff" />
                          <param name="allowScriptAccess" value="sameDomain" />
                          <param name="allowFullScreen" value="true" />
                      <!--<![endif]-->
                      <!--[if gte IE 6]>-->
                          <p>
                              Either scripts and active content are not permitted to run or Adobe Flash Player version
                              10.0.45 or greater is not installed.
                          </p>
                      <!--<![endif]-->
                          <a href="http://www.adobe.com/go/getflashplayer">
                              <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>
              </noscript>       
         </body>
      </html>

       

      So what code do i need to include from the FC generated main.html file to make it work with magento?

        • 1. Re: Embedding in HTML
          Bear Travis Adobe Employee

          Hi there,

           

          You may want to google "embed swf in html" for more details. The quick answer is there are two ways to embed a swf: actionscript and html. For both of these, there may be multiple methods to embed in different browsers (generally IE does things differently than any other browser). Flash Catalyst uses the script method with an html fallback, which is why that code block is so long. You probably need only one or the other, so the html embed you're getting should work.

           

          Adobe has some documentation about embedding flash in a web page here.

           

          -Bear