Need Help with installing new Flash header please!

kevinperson · #1 06-25-2009, 05:33 AM

Hello,

If anyone can help me with this, I'd really appreciate it! I just got a new Flash header for my site and I'm having a hard time trying to make sense as to how to install it.

I've got three files and I don't know where to put them.
1. HOMS.swf
2. HOMS.html
3. AC_RunActiveContent.js

Now my current header is located in the /head_cat_logo.tpl folder, so I'm pretty sure I just need to add the HOMS.html code there. Right?

As for the two other files, I have no idea where I'm supposed to put there. Plus I was told the following

"The HTML file has all the code you need; you can put the .swf and .js files into different folders, as long as you adjust the path code in the .html file"

I have no idea what that means! Agh!
I'm not a tech guy at all, so any help anyone is able to give me, if you could please give it to me step by step, hopefully I'll be able to figure it out.

Thanks very much!

Very Confused Kevin

WebGuyJD · #2 07-18-2009, 07:10 PM

Hello!

I was having similar trouble. But I found the answer here:
http://forum.x-cart.com/showthread.php?t=46098

If you want to use the AC_RunActiveContent.js
just put that, and your flash file into the the /skins1/ directory.

Then you need to insert the link to the script in the header of your site. On 4.2 this is in /skins1/customer/home.tpl

Make sure you make backups of the originals, just in case you need to restore it.

Not sure if it's the same for 4.1. Just look for the file that has the other header information in it:

Code:

{*
$Id: home.tpl,v 1.1.2.62 2009/04/10 10:52:41 avg Exp $
vim: set ts=2 sw=2 sts=2 et:
*}
<?xml version="1.0" encoding="{$default_charset|default:"iso-8859-1"}"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
{config_load file="$skin_config"}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  {include file="customer/service_head.tpl"}
  <!--[if lt IE 7]>
  <script src="{$SkinDir}/customer/iefix.js" type="text/javascript"></script>
  <![endif]-->

then place the link to your AC_RunActiveContent.js with the following tags:

Code:

{literal} 
<script type="text/javascript" src="/skins1/AC_RunActiveContent.js"></script>
{/literal}

Make sure it points to the location where you put the script file.

Then you need to take the embed code from your HTML file and place that into the body header. In 4.2 this is in: /skins1/customer/head.tpl

You may want to place it in a class style so you can position it. You also want to make sure that the path to the flash file is correct. eg: /skins/flashfile.swf, in ALL instances.

I always use the swfobject.js (2.0) to embed flash files. It provides the best way to serve alternative content, in case the user doesn't have the right plugin.

This is what I did.

loaded the following files to my /skins1/ directory:

swfoject2.js
headerFlash.swf
expressInstall.swf

Then updated this file with my code:
/skins1/customers/home.tpl

Code:

{literal}<script type="text/javascript" src="/skins1/swfobject2.js"></script>

<script type="text/javascript">
        
// vars for navigation    
var flashvars = {};

var params = {};
params.menu = "false";
params.allowFullScreen = "false";
params.scale = "noscale";
params.quality = "high";
params.align = "middle";
params.salign = "center";
params.play = "true";
params.loop = "true";
params.wmode = "transparent";
params.devicefont = "false";
params.bgcolor = "";
params.movie = "headerflash";

var attributes = {};
attributes.id = "headerflash";
attributes.name = "headerflash";

swfobject.embedSWF("/skins1/headerFlash.swf", "flashcontent", "840", "324", "9.0.0","/skins1/expressInstall.swf", flashvars, params, attributes);
        
</script>{/literal}

Then I loaded my nonflash graphic to: /skins1/images/

Added a style called: #flashcontent to the main.css in /skins1/

I only gave this style the size of my flash file: 840 x 324. The positionning is being controlled by the class .header-bg2

The updated this file with the reference to the flashcontent.

/skins1/customer/head.tpl

HTML Code:

<div class="head-bg2"> 
   <div id="flashcontent">     
        <img src="/skin1/images/header2.jpg" alt="header noFlash" width="840" height="324" />
      <!-- e of flashcontent -->  </div>

The swfObject replaces the content of the flashcontent div id with the flash file if the browser has the right version number of the Flash plugin. in this case, it's 9. This can be adjusted in that line above:

HTML Code:

swfobject.embedSWF("/skins1/headerFlash.swf", "flashcontent", "840", "324", "9.0.0","/skins1/expressInstall.swf", flashvars, params, attributes);

The other reason I like this is because if the user doesn't have the right plugin, it will ask the user to express install it. That what the reference is to expressInstall.swf

I hope this helps! It worked for me!



	X-Cart forums © 2001-2020