Author Topic: HTML Menu bar for MZ3  (Read 12209 times)

shrewd_hound

  • Guest
HTML Menu bar for MZ3
« on: August 05, 2009, 03:59:47 PM »
My boss wanted a way to flip directly to key pages in MZ3, yet keep it with our HTML menu we currently use.  My first thought was to use the powerful deep thinking technology and anchor directly to the Anchor ID using the query string. (<a href=”myDirectory/bin/index.htm#/16”>Go to page 16[/url]) Well, this does work BUT it forces a reload of the SWF… that can be tedious. So after looking around a bit, I took a look at the magazine.js file (bin/magazine/megizine.js)… WOW!!!  This gives you interactivity on so many levels with the magazine.swf that you’ll be hard pressed to not achieve what you are looking for.  All I had to do was call the gotoAnchor function of the MegaZine class from my page and it seamlessly flips to where I want to go.

Here are the modifications I made:
To the index.html page calling the preloader.swf
Code: (html4strict)
  1.    <style type="text/css">
  2. /*
  3.    I have left out all the other styles
  4.    So you can see only the changes I have made
  5. */
  6.        div.outer {
  7.            height: 100%;
  8.    //added width of 80% to give my menu some room
  9.            width:80%;
  10.    //added float right to force it over to give my menu room on the left
  11.            float:right;
  12.        }
  13.    //added a div class of inside that will float left and take up 19%    
  14.        div.inside{
  15.            height: 100%;
  16.            width: 19%;
  17.            float:left;
  18.            color:#000000;
  19.            background: #000000;
  20.        }
  21.        #megazine {
  22.            height: 100%;
  23.            outline: none;
  24.            width: 100%;
  25.        }
  26.    </style>
  27. </head>
  28.    <!-- added a new div to nest the menu inside the anchor tags I set the href to call the gotoAnchor function of the MegaZine class. -->
  29.    <div class="inside">
  30.        <table>
  31.            <tr>
  32.                <td><img src="../../../images/logo.jpg"></td>
  33.            </tr>
  34.            <tr class="yellow">
  35.                <td><a href="javascript:MegaZine.gotoAnchor(6);">Go to page 6</a></td>
  36.            </tr>
  37.            <tr class="green">
  38.                <td><a href="javascript:MegaZine.gotoAnchor(16);">Go to page 16</a></td>
  39.            </tr>
  40.        </table>
  41.    </div>
  42.    <div class="outer">    
  43.        <div id="megazine">
  44.            <h1>MegaZine requires FlashPlayer 9</h1>
  45.            <p><a href="http://www.adobe.com/go/getflashplayer">
  46.                <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a>
  47.            </p>
  48.        </div>
  49.        <p><a href="http://megazine.mightypirates.de/">Powered by MegaZine 3</a></p>
  50.    </div>
  51. </body>
  52.  

I hope some of you find this helpful, If not it is fun to play with!!!


Florian Nuecke: took the liberty of putting it in a proper code block.
« Last Edit: August 12, 2009, 11:06:07 PM by Florian Nücke »

pageflipper

  • Guest
Re: HTML Menu bar for MZ3
« Reply #1 on: August 20, 2009, 06:08:44 PM »
I am having a bit of trouble getting this to work.  I have the href calling the gotoAnchor function properly (i put in a javascript alert in magazine.js to test this).  however, the function is not actually flipping to that page.  I do have the anchor properly defined in the xml file.  My guess is that the javascript is not being able to pass on the command to the swf object. 

Browser: latest firefox, on windows xp

Any ideas?

shrewd_hound

  • Guest
Re: HTML Menu bar for MZ3
« Reply #2 on: August 20, 2009, 07:51:18 PM »
Can you provide your html code?

pageflipper

  • Guest
Re: HTML Menu bar for MZ3
« Reply #3 on: August 20, 2009, 09:36:35 PM »
Sure... it was already fairly similar to yours.  Am including more than relevant so you have a full picture:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <script type="text/javascript" src="swfobject/swfobject.js"></script>
    <script type="text/javascript" src="swfaddress/swfaddress.js"></script>
    <script type="text/javascript" src="MegaZine/megazine.js"></script>
    <script type="text/javascript">
        swfobject.embedSWF("MegaZine/preloader.swf",       /* Path to the preloader.swf. You probably won't have to change this. You might want to change this to MegaZine.swf, though, if you don't like the preloader. */
                          "MegaZine",                     /* Change this if you use another id for the div to display MegaZine. */
/* (1) */                  "866",                         /* This is the WIDTH of the element used to display MegaZine. */
/* (2) */                  "600",                         /* This is the HEIGHT of the element used to display MegaZine. */
                           "9.0.115",                      /* Required Flash Player version. You probably won't have to change this. */
                           "swfobject/expressInstall.swf", /* Path to the expressInstall.swf to upgrade Flash Player. You probably won't have to change this. */
                           {
                               xmlFile : "MegaZine.xml",   /* Used to pass the name of the xml file to use. Path is relative to the swf! */
                               /* Settings for liquid scaling. If minScale = maxScale liquid scaling is disabled. */
                               minScale : 1.0,             /* Minimum scaling factor. Default is 1.0, i.e. the book can not get smaller than it's 100% size. */
                        maxScale : 1.0,             /* Maximum scaling factor. Default is 1.0, i.e. the book can not get bigger than it's 100% size. */
                               top: 68                     /* Determines the height of the empty space above pages in pixels */
                           },
                           {
/* (3) */                      bgcolor : "#520001",        /* This is the background color used for the Flash element. */
/* (4) */                      wmode : "transparent",    /* Remove the // to enable transparency (show HTML background). Not recommended if using videos. */
                               swliveconnect: "true",
                               allowFullscreen : "false"    /* Required for fullscreen mode. */
                           },
                           {id : "MegaZine"});             /* Required for SWFAddress and JavaScript interaction with the book. */
    </script>
   
    <style type="text/css">
        a, a:visited {
            color: #FFFFFF;
            text-decoration: none;
        }
        a:active {
            color: #FFFFFF;
            text-decoration: none;
        }
        a:hover, a:focus {
            color: #FFFFFF;
            text-decoration: underline;
        }
        body, html {
/* (5) */   /* This is the background color of the whole webpage. */
         background: #520001;
         martin-left: 0px;
           font-family: Verdana, Arial, Helvetica, sans-serif;
            text-align: left;
            width: 99%;
            height: 99%;
        }
        h1 {
            color: #FFFFFF;
        }
        img {
            border: none;
        }
        p {
         left:0px;
            color: #FFFFFF;
            font-size: 0.6em;
        }
        div.outer {
         position: relative;
         background-image: url(MegaZine/src/background.png);
         background-repeat:no-repeat;
         background-positon: center;
         width:990px;
           height: 650px;
        }
        #MegaZine {
         position: absolute;
         //border: white 1px dashed;
            height: 600px;
            width: 792px;
         outline: 0px;
        }

      div.menu {
         position: absolute;
          background-image: url(MegaZine/src/menu.png);
          background-repeat:no-repeat;
          //border: white 1px dashed;
          left: 775px;
          top: 130px;
          width:185px;
          height: 275px;
      }

    </style>

</head>


<body>

 
<table align=center valign=middle cellpadding="0" cellspacing="0" height="100%">
<tr><td>
<div class="outer">   
    <div id="MegaZine">
        <h1>Sorry your computer is not equipped to view this site!</h1>
        <p>Get Adobe Flash player</p>
    </div>
   <div class="menu">
      <table cellspacing=9 align=center valigh=middle border=0><TR><TD>
      <P><P>
      </TD>
      <TR><TD>
      <a href="javascript:MegaZine.gotoAnchor('viraj');">*******[/url]
      <!input type="button" src="images/submit.png" value="Click Here" onClick="">
      </TD></TR><TR><TD>
      <input type="button" src="images/submit.png" value="Click Here" onClick="openthis(2);">
      </TD></TR><TR><TD>
      <input type="button" src="images/submit.png" value="Click Here" onClick="openthis(3);">
      </TD></TR><TR><TD>
      <input type="button" src="images/submit.png" value="Click Here" onClick="openthis(4);">
      </TD></TR><TR><TD>
      <input type="button" src="images/submit.png" value="Click Here" onClick="openthis(5);">
      </TD></TR><TR><TD>
      <input type="button" src="images/submit.png" value="Click Here" onClick="openthis(6);">
      </TD></TR>
      </TABLE>
   </div>

</TD></TR></TABLE>

    </div>
</body>

shrewd_hound

  • Guest
Re: HTML Menu bar for MZ3
« Reply #4 on: August 20, 2009, 11:07:42 PM »
I think this is an issue with the anchor Id you are calling.  If you have not manually changed the anchor in the settings than it would be numeric and not ‘viraj’… 

Flip to the page in your Megazine you’d like to flip to when <a href="javascript:MegaZine.gotoAnchor('viraj');">*******[/url] is clicked. 

In the URL you will see the index of that page.  If the page index is 1, the URL will be yourPageName.html#/1  So if the URL is yourPageName.html#/3  the index for that page would be ‘3’.

Try replacing ‘viraj’ with the numeric anchor ID, I suspect that will clear this up.

Hope this helps!

pageflipper

  • Guest
Re: HTML Menu bar for MZ3
« Reply #5 on: August 20, 2009, 11:56:19 PM »
Thanks, but I have tried this.  The doc said that it can be a string type as well, so i started trying that.  page index number didn't work.  in fact, if I try to call getCurrentPage() or something similar to display the current value in an alert box, it returns null, leading me to believe that somehow the communication between javascript and the swf movie is not working.

pageflipper

  • Guest
Re: HTML Menu bar for MZ3
« Reply #6 on: August 21, 2009, 03:26:36 PM »
Ok, I had been working on a local filesystem, and not viewing through a http connection.  It works.  Thanks.

BTW, any way to move/replace the megazine logo which shows up for a few seconds at load, with another photo?

shrewd_hound

  • Guest
Re: HTML Menu bar for MZ3
« Reply #7 on: August 21, 2009, 03:58:17 PM »
Glad it is working!

If you pay for the license you can, but not in the free version... I think.  The new license plan makes it a lot easier for you to do just this kind of thing, at a real good price.  Hans addresses the license scope in this thread http://megazine.mightypirates.de/forum/index.php/topic,415.0.html

Good luck, if you get a chance post your MegaZine link.  It is always cool to see how people implement them!
« Last Edit: August 21, 2009, 04:00:31 PM by shrewd_hound »

Hans Nücke

  • Administrator
  • Hero Member
  • *****
  • Posts: 960
  • MegaZine3 Sales Manager
Re: HTML Menu bar for MZ3
« Reply #8 on: August 21, 2009, 04:22:05 PM »
I am not the expert but think to remember correctly about a discussion I had with Florian about this (Preloader).

You are allowed to modify what comes with the Zip package (the "Binaries").
That said you can either simply remove the preloader or substitute with what you like more.

Should be OK and fair use...

If still in doubt, just ask again ;-)


mauphie

  • Guest
Re: HTML Menu bar for MZ3
« Reply #9 on: August 25, 2009, 06:08:36 PM »
Thanks for posting this! This is very helpful.

However, I do have one question: Let's say that I have 2 different megazine books (each on their own html page). If I use the current setup, the javascript doesn't differentiate between the books on "advertising.html" and "index.html"

Example:
- index.html has megazine1
- I have buttons for About and Current Issue, pages 3 & 6 of megazine1

- advertising.html has megazine2
- I have buttons for Ads and Rates, pages 2 & 8 of megazine2

The website opens on index.html and I can click to About and Current Issues w/o a problem. I can then also click to advertising.html, no problem. But when I then try to click back to About or Current Issue (index.html), the advertising's megazine2 jumps to those pages, not the index.html

Obviously I'm a javascript noob and I'm sure the answer is super-easy, but I haven't been able to figure it out.


shrewd_hound

  • Guest
Re: HTML Menu bar for MZ3
« Reply #10 on: August 25, 2009, 06:56:11 PM »
So you have a button on advertising.html that you want to do two things.
a) change the page back to index.html
b) flip megazine to page 3 or 6

Is this correct?
if so change the href of the About btn on advertising.html to 'index.html#/3' or 'index.html#/6' for pages 3 and 6 respectivly.  this will open the megazine on index.html directly to page 3 or 6.

so...
www.yoursite.com/index.html#/2   will go to page 2 on the index megazine
www.yoursite.com/advertising.html#/4 will go to page 4 on the advertising megazine

Was that the issue?

mauphie

  • Guest
Re: HTML Menu bar for MZ3
« Reply #11 on: August 26, 2009, 05:05:41 PM »
That is how I initially set up the pages. href="advertising.html#/pg#, etc. etc.
And all that worked fine. You click on any button and it would jump to the correct spread.

When I tried using the javascript you posted, I saw that the pages would flip to the spread instead of jump. I liked this much better, since, hey that's why i wanted to use Megazine.

However, when I try to have 2 books with one set of buttons using the javascript, the messages start getting mixed up between the 2 books. So if I'm in advertising.html and I decide to click on the About btn (to go to the about book), the javascript doesn't differentiate between the 2 books, so it jumps to the page in the advertising book, not the about book.

Ideally I'm looking for a way for the javascript trick to work because I do like flip effect. Obviously the way I had it originally works, so I can always go back if i have to....

I hope that's more clear. I'm just trying to figure out if there's a way to differentiate between 2 books in the javascript code.

shrewd_hound

  • Guest
Re: HTML Menu bar for MZ3
« Reply #12 on: August 26, 2009, 05:54:45 PM »
Would not be easyto do.  Basically, you have two different pages with two different swf's.  So you will always have to load the page, which in turn loads the new swf.  You could create the apperance of it flipping the page by adding a keyword to the query string.  Somthing like makeFlip.  so a href might look like www.yourPage.com/index.html?makeFlip=3 to go to page three and on the index page create a JS function (onLoad) that will start at (theDesiredPage - 3) and flip to the desired page.  This will, when you click on a button in the advertisment.html page, load the index.html, once loaded go to 3 pages before the desired page and then flip to the desired page.