Interactive Table of Contents

[jaglavek]

There is a very specific layout for a table of contents.  The only way I can seem to make text clickable is to use Megazine's <nav> and place a <link> within.  However, the font is very custom.  Does anyone know if either of the following are possible...if so how?

1. Embed a new font and use it within Megazine via <font face="">
2. Use an image (without the zoom icon) within <nav> and have it trigger a page flip
3. Make the Table of Contents a SWF that can trigger page flips when items are clicked within it. 

Any help is greatly appreciated.

Thanks
-j

[jaglavek]

I've been able to use a <area> to define a click area.  However, it would still be nice to know how to have a page SWF interact with Megazine. 

[Hans Nücke]

I created kind of content page on my own with .jpg and .png files:
one background picture with all text and icons ; with all flexibility Adobe PS CS4 (or another tool) offers.
I prepared some dummy and empty png "pictures" of a size that fits my clickable area needs; e.g. "link 100.png" with a height of 100px.
I position that "picture" at the correct coordinates (in PS CS4 I can read the pixels in the ruler) over the content picutre and link it using the url attribute to the appropriate anchor; like this:
          <img src="data/2009/vacation/bali-ov2009/dev/link.png" left="30" top="140"  url="anchor:Ausflug 1" >
         <title lang="de">Gehe zu Ausflug 1</title>
         <title lang="en">Go to Excursion 1</title>
         </img>

Not ideal yet, since some manual work. But a work around for the moment.
The result can be seen here:
http://photo-muc.de/megazine.php?xmlfile=data/2009/vacation/bali-ov2009/megazine.xml#/2

Just the way I did it...

[bnnorman]

Jaglavek

If you create a contents SWF you should be able to access all the IMegaZine methods. So I would imagine this code (untested) would do the job - assuming one button instance imaginatively called btn.

import de.mightypirates.megazine.interfaces.IMegaZine;
import de.mightypirates.megazine.interfaces.IPage;

var Mz:IMegaZine;
var Page:IPage;

function megazineSetup(mz:IMegaZine, page:IPage, even:Boolean):void{
      Mz = mz;
      Page=page;
}



btn.addEventListener(MouseEvent.CLICK,ButtonPress);

function ButtonPress(evt:MouseEvent)
{
   Mz.gotoPage(pageNum,instant); // pageNum is a uint zero based,
instant, if true, navigates direct to the page (I think)
}

[jaglavek]

thanks!  I'll give it a try. 

[bnnorman]

I also got this to work using V1.38 - also posted elsewhere on this forum.

Using the flash accepted HTML control for text boxes you can specify font face, etc.

   <page id="Contents" >
   <img src="pages/left page.png" />
   <txt align="center" left="20" height="50" width="260" top="10" priority="50">
      <content lang="en"><![CDATA[<font face="Comic SANS MS" size="40"><b>Contents</b></font>]]></content>
   </txt>
   <nav height="300" width="300" top="100" left="20" hover="0x0000FF" color="0x00FF00">
      <lnk url="anchor:SettingOut"><![CDATA[<font face="Comic SANS MS">Chapter 1 - Setting out</font>]]></lnk>
      <lnk url="anchor:ForestWalk"><![CDATA[<font face="Arial">Chapter 2 - Forest Walk</font>]]></lnk>
      <lnk url="anchor:WoodCutters"><![CDATA[<b>Chapter 3 - Meeting Wolfie</b>]]></lnk>
      <lnk url="anchor:EndingChooser"><![CDATA[<b>Chapter 4 - Ending Chooser</b>]]></lnk>
   </nav>
   </page>


The only problem I found was the hover attribute for <nav> doesn't seem to work - the links are just made bold(er).

[3dsign]

Hi there!

I created a button (called goto) in the megazine.fla stage.  Then I copied in the first frame the code that bnnorman suggested, obviously changing the instance name of the button.   But when I click on the button, get this error:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
   at de.mightypirates.megazine::Main/ButtonPress()

Could you help me with this code, please?? Or could you tell me how must I do it??   I need this ASAP 

Thanks a lot!

[bnnorman]

The button instance name I used was btn. You appear to have called yours goto so I'm guessing your code should be:-

goto.addEventListener(MouseEvent.CLICK,ButtonPress);

If you copied and pasted the code did you fix the wrapped comment line?

i.e this should all be on one line:-

Mz.gotoPage(pageNum,instant); // pageNum is a uint zero based,
instant, if true, navigates direct to the page (I think)

[3dsign]

Hi bnnorman, thanks for your reply.

Yes, That's my code, and I fixed that comment when I pasted it.  But it doesn't work    Now I'm trying to load the megazine in a container (another swf) and created the same button there, but I don't know how to code the action to go to a specific page of the megazine.

I hope you can help me.

[bnnorman]

You haven't said which bit isn't working - the event call to ButtonPress() or the Mz.gotoPage(...) bit.

If you load the book into another container then the path to the methods will begin with the container instance name.