Any help with the origination of the file below would be greatly appreciated.
I know that there are several ways to create the page flip function on a website and am particularly interested in finding out how this website took the actual magazine and created the page flip function that is being utilized for the website.
I know that the site is using either InDesign CS3 or CS4 to create the print version of the magazine. I am wondering if they are using InDesign to publish to a swf or xml or if they are using a different program that automatically generates the code or if they are using Flash or Dreamweaver to create the page flip magazine.
The magazine shows up on the screen inside of a skin that has a bar across the top that allows you to use link buttons to view archives and to scroll to the next or last page etc.
This is the actual coding of the magazine that flips. I printed it by choosing view source while on the screen that contains the actual magazine that flips:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<STYLE type=text/css>
#banner_btn
{
width: 10px;
height: 100%;
background-image:url(banner_btn.gif);
vertical-align: middle;
}
#banner_btn_hor
{
width: 100%;
height: 10px;
background-image:url(banner_btn_hor.gif);
}
#banner
{
overflow: hidden;
vertical-align: middle;
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 12px;
}
#banner *
{
font-family: Lucida Grande, Segoe UI, Tahoma, sans-serif;
font-size: 12px;
color: #000000;
}
#banner a:link
{
color: #00688B;
text-decoration: none;
}
#banner a:visited
{
color: #00688B;
text-decoration: none;
}
#banner a:hover
{
color: #00688B;
text-decoration: underline;
}
#banner a:active
{
color: #00688B;
text-decoration: underline;
}
body {
margin: 0px;
padding: 0px;
}
#vert_text {
writing-mode: tb-rl;
filter: flipv fliph;
}
#logo_center_img
{
position: absolute;
margin: auto;
left: 0px;
top: 0px;
z-index: 100;
}
div.logo_center_img1
{
display:block;
position:absolute;
top:0;
left:0;
background:#ffffff;
z-index: -101;
width:100%;
height:100%;
}
</STYLE>
<title>Title of the Magazine</title>
<script type=“text/javascript” src=“AC_RunActiveContent.js”></script>
<script language=“JavaScript” type=“text/javascript”>
function just_loaded()
{
document.getElementById(‘logo_center_img’).style.display = “none”;
document.getElementById(‘logo_center_img1’).style.display = “none”;
}
function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
var rv = -1; // Return value assumes failure.
if (navigator.appName == ‘Microsoft Internet Explorer’)
{
var ua = navigator.userAgent;
var re = new RegExp(“MSIE ([0-9]{1,}[\.0-9]{0,})”);
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}
function checkVersion()
{
var ver = getInternetExplorerVersion();
if ( ver >= 6.0 && ver < 7.0 )
{
msg = "The version of Internet Explorer you are using does not reliably display publication content.\
You may have to click on the browser window or reload this page to see its content.
For optimal viewing please upgrade your browser to the latest version of Internet Explorer or to Firefox, Safari, or Opera.“;
alert( msg );
}
}
function bookmark(url){
title=document.title ;
if ((navigator.appName == “Microsoft Internet Explorer”) && (parseInt(navigator.appVersion) >= 4)) {
window.external.AddFavorite(url,title);
} else if (navigator.appName == “Netscape”) {
window.sidebar.addPanel(title,url,”");
} else {
alert(“Press CTRL-D (Netscape) or CTRL-T (Opera) to bookmark”);
}
}
function pasarURL(){
return location.href;
}
</script>
</head>
<body bgcolor=“#666666” > <table height=“100%” width=“100%” border=“0” align=“center” cellpadding=“0” cellspacing=“0”>
<tr height=“100%”> <td width=“100%”>
<script type=“text/javascript”>
// <![CDATA[
AC_FL_RunContent( “classid”,“clsid:d27cdb6e-ae6d-11cf-96b8-444553540000”,“codebase”,“http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0",“width”,“100%”,“height”,“100%”,“align”,“middle”,“id”,“mag_app”,“name”,“mag_app”,“allowScriptAccess”,“always”,“src”,“http://d27vj430nutdmd.cloudfront.net/black_new-116”,“quality”,“high”,“wmode”,“transparent”,“bgcolor”,“#000000”,“FlashVars”,“page=1&id_issue=-21681”,“pluginspage”,“http://www.macromedia.com/go/getflashplayer”,“movie”,"http://d27vj430nutdmd.cloudfront.net/black_new-116” ); // ]]>
</script>
<noscript>
<object classid=“clsid:d27cdb6e-ae6d-11cf-96b8-444553540000” codebase=“http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0” width=“100%” height=“100%” align=“middle” id=“mag_app”>
<param name=“allowScriptAccess” value=“always” />
<param name=“movie” value=“http://d27vj430nutdmd.cloudfront.net/black_new-116.swf” /><param name=“quality” value=“high” /><param name=“bgcolor” value=“#000000” /><param name=“wmode” value=“transparent” /><param name=“FlashVars” value=“page=1&id_issue=-21681” />
<embed src=“http://d27vj430nutdmd.cloudfront.net/black_new-116.swf” name=“mag_app” flashvars=“page=1&id_issue=-21681” quality=“high” bgcolor=“#000000” wmode=“transparent” width=“100%” height=“100%” align=“middle” allowScriptAccess=“always” type=“application/x-shockwave-flash” pluginspage=“http://www.macromedia.com/go/getflashplayer” />
<p><a href="/publication/index.php?i=21681&m=&l=&p=2">Next Page</a></p><br /><a href="/1/">Publication List</a>
</object>
</noscript>
</td> </tr></table>
<div class=“logo_center_img1” id=“logo_center_img1”> </div>
<div id=“logo_center_img” align=“center” ><img width=“264” height=“64” src=“/publication/content/13/images/logo_265x65.png”/><br />Loading<br /><img src=“http://virtual.angstromgraphics.com/images/loading_logo.gif”/></div>
<script language=“JavaScript” type=“text/javascript”>
var viewportwidth;
var viewportheight;
if (typeof window.innerWidth != ‘undefined’)
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
else if (typeof document.documentElement != ‘undefined’
&& typeof document.documentElement.clientWidth !=
‘undefined’ && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
else
{
viewportwidth = document.getElementsByTagName(‘body’)[0].clientWidth,
viewportheight = document.getElementsByTagName(‘body’)[0].clientHeight
}
var msgbox = document.getElementById(“logo_center_img”);
var x = (viewportwidth / 2) - 132;
var y = (viewportheight / 2) - 32;
msgbox.style.top = y+“px”;
msgbox.style.left = x+“px”;
msgbox.style.display = “block”;
//setTimeout ( ‘just_loaded()’, 3000 );
</script>
</body>
</html>
