Call of Duty 2 Homepage... questions

Uncategorized
1

I really like the site design of Call of Duty 2’s website…

http://www.callofduty.com/cod2/

I have extracted some bits of info. What I am basically looking for is how they achieve this.

index.html

 
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="xlib/xscreen.js"></script>
<script type="text/javascript" src="xlib/xwindow.open.js"></script>
<script type="text/javascript" src="xlib/xheight.js"></script>
<title>Call of Duty 2</title>
<style type="text/css">
<!--
body {
 background-color: #000000;
}
-->
</style></head>
<frameset rows="*,1" frameborder="no" border="0" framespacing="0">
  <frame src="main.html" name="mainFrame" id="mainFrame" title="mainFrame" />
  <frame src="blank.html" name="hidden" scrolling="No"/>
</frameset><noframes></noframes>

<body>
</html>

xscreen.js

if(typeof(xScreen) == "undefined") xScreen = {};
xScreen.getWidth = function(){
 return window.screen ? window.screen.availWidth : 0;
};
xScreen.getHeight = function(){
 return window.screen ? window.screen.availHeight : 0;
};

x.window.open.js

// Requires: xscreen.js
if(typeof(xScreen) == "undefined") alert("xScreen Required");
// ||||||||||||||||||||||||||||||||||||||||||||||||||
if(typeof(xWindow) == "undefined") xWindow = {};
xWindow.open = function(url,name,width,height,xpos,ypos,chrome,scroll,fullscreen){
 var x, y, w, h, moveX=0, moveY=0, features="";
 chrome = chrome ? "yes" : "no";
 scroll = scroll ? "yes" : "no";
 features += "toolbar="+chrome;
 features += ",menubar="+chrome;
 features += ",location="+chrome;
 features += ",status="+chrome;
 features += ",scrollbars="+scroll;
 features += ",resizable="+scroll;
 if(width) features += ",width="+width;
 if(height) features += ",height="+height;
 if(fullscreen) features += ",fullscreen=yes";
 if(xpos){
  w = xScreen.getWidth();
  width = parseInt(width);
  switch(xpos){
   case "left": x = 0; break;
   case "center": x = Math.round((w-width)/2); break;
   case "right": x = w-width; break;
   default: x = xpos;
  }
  features += ",screenX="+x+",left="+x;
  var moveX = x;
 }
 if(ypos){
  h = xScreen.getHeight();
  height = parseInt(height);
  switch(ypos){
   case "top": y = 0; break;
   case "middle": y = Math.round((h-height)/2); break;
   case "bottom": y = h-height; break;
   default: y = ypos;
  }
  features += ",screenY="+y+",top="+y;
  var moveY = y;
 }
 xWindow.windowReference = window.open(url,name,features);
};
xWindow.openScroll = function(url,name,width,height){
 this.open(url,name,width,height,false,false,false,"scroll");
};
xWindow.openCenter = function(url,name,width,height){
 this.open(url,name,width,height,"center","middle");
};
xWindow.openCenterScroll = function(url,name,width,height){
 this.open(url,name,width,height,"center","middle",false,"scroll");
};
xWindow.openFull = function(url,name){
 this.open(url,name,xScreen.getWidth(),xScreen.getHeight(),"0","0",false,false);
};
xWindow.openKiosk = function(url,name){
 this.open(url,name,xScreen.getWidth(),xScreen.getHeight(),"0","0",false,false,true);
};

I could not find xheight.js. It seems as though it does not exist. What I am trying to do here is pick this apart and figure out how I could make a site which will fill the screen with a background image like this one. If you click on the screenshots in the menu, it allows you to change the background to whatever thumbnail you choose on the right. This also I am trying to understand.

I would like some direction as to where I could learn more about this. I have no idea how the flash doucment grabs the values from the javascript and then applies them accordingly. I have tested viewing the above site in many resolutions and in many browsers… it looks good in all of them. That is why I am so interested in this.

I also see they make use of frames and are using blank.html as one of the frames. Not sure the reasoning behind this either.

I was going to post this in the Kool Sites section, as I think this site makes excellent use of Flash, and is one of the better flash sites I have seen lately.

If anyone can point me in the right direction on this, I would greatly appreciate it.

Thanks in advance,
G3mInI66

2

Grabbing and downloading files from other sites isn’t really a good approach, it’s called hacking, and can get you a lot of trouble.

From your post, I think you’re asking to grab window size in flash. Do this:

Frame 1:
fscommand(“fullscreen”,“true”);
Stage.scaleMode = “noScale”;

to get window size:
width = Stage.width;
height = Stage.height;

Make sure you set the size of the flash obecjt to 100% at both height and width.

3

i find that site annoying… slow to load… and hard to navigate ( for the average user)

chris