Using MegaZine to model a single piece of paper

[kopitejay]

Hey guys

I'm working on idea of modelling a single piece of paper (a page on each side) using the MegaZine classes.
The idea is that when you turn over the piece of paper the back page is positioned in the same place as the front page (As it would in real life when you turn a piece of paper over).
At the moment when I use the MegaZine classes the front (right) page is displayed on the right and back (left) is displayed on the left. (classical ebook)
I know at this point in time it would be a difficult scenario to model.

So I am looking for an alternative solution at this time.
My idea is to move the whole megazine object when the page turn has completed.
My question for this scenario is:

How do I know programmatically when the page has finished turning?
Is there and event that triggers?
Or is there a point in the code of the classes where I can insert a trigger?

I've tried to get my head around this scenario but am failing at the moment.
Just need a little guidance then should be able to tackle it.

Cheers
Jay

[Florian Nücke]

The MegaZine class fires a MegaZineEvent of type MegaZineEvent.PAGE_CHANGE if the page changes, you should be able to work with that. I.e. start a tween to the appropriate location when it's dispatched (use the page property of the event to see which way to move).

[kopitejay]

Cheers Florian

I'll have a go at that today.

thanks
Jay

[kopitejay]

Hi Florian

Just a query.
This is my test code, just to see that the event was being triggered.

Code: [Select]

//Listen for when page is changed
function pageChange_listen(e:MegaZineEvent):void
{
//Display page number
txt_msg.text = e.page.toString();
}
_mz.addEventListener(MegaZineEvent.PAGE_CHANGE, pageChange_listen);
I'm just curious about the output in the txt_msg text box.
I was expecting page numbers 0 and 1 for front and back respectively.
But I received 0 and 2.
Am I right in thinking that e.page takes the value of the right hand page (even if it doesn't exist)?

Cheers
Jay

[Florian Nücke]

Yep, it's always the number of the right page, starting the count at zero. I.e. if the pageoffset is not set the page number displayed below - 1.

[kopitejay]

Cheers Florian

I have used the PAGE_CHANGE event you suggested and I have managed to get the page to move to the centre when the page has changed. 
Here is my code:

Code: [Select]

//Listen for when page is changed
function pageChange_listen(e:MegaZineEvent):void
{
//If front page is shown, move _mz to the front position
if(e.page == 0)
{
var MoveFront:Tween = new Tween(_mz, "x", Regular.easeOut, _mz.x, frontPos, 10, false);
}
//If back page is shown, move _mz to the back position
else if(e.page == 2)
{
var MoveBack:Tween = new Tween(_mz, "x", Regular.easeOut, _mz.x, backPos, 10, false);
}
}
_mz.addEventListener(MegaZineEvent.PAGE_CHANGE, pageChange_listen);
This solves the problem I was having but now introduces a new issue into the fold.  :'(

When the user zooms into the document, the whole zoom container is not centred on the screen.
My next query is how and where can I set up the zoom container so it centres to the stage and not to the _mz movieclip?
I presume that the code I will need to change is based in the file ZoomContainer.as?

Another related query is where abouts is the code so I can move the buttons in the zoom container?

Cheers
Jay

[Florian Nücke]

Hi Jay,

you're right, it's the ZoomContainer class you'll want to change. Have a look at the setSizes function, lines 556:

Code: [Select]

x = (_normalWidth - width) * 0.5;
You'll need a new variable holding the current offset (equaling the value of your frontPos / backPos), and subtract that from the above.
To update that variable I'd recommend you to add a setter and change it from within the onPageChange function in the MegaZine class. How you get the values in there (i.e. hardcode them or get them from the "outside" via another getter) is up to you.

The positioning of the buttons / thumbnail box is performed within the updateThumbBox function in the ZoomContainer class. It should suffice to change the _thumbBackground.x (and if you need it add .y) as the other values are relative to those. So lines 750 and 770.

Regards,
Florian

[kopitejay]

Cheers again Florian

I have updated the code and all is working fine.
I updated the onPageChange function as so:

Code: [Select]

private function onPageChange(e:MegaZineEvent):void {
_currentPage = e.page;
if(e.page == 0)
{
_zoomContainer.zoomOffset = -400;
}
else
{
_zoomContainer.zoomOffset = 800;
}
dispatchEvent(new MegaZineEvent(MegaZineEvent.PAGE_CHANGE, e.page));
}
And I updated the zoomContainer by adding the variable:

Code: [Select]

private var _zoomOffset:int = -400;
Then inserted the setter zoomOffset:

Code: [Select]

public function set zoomOffset(newOffSet:int):void {
this._zoomOffset = newOffSet;
x = x - _zoomOffset;
}
Works great. Thanks for your help.
I'm now moving onto the positioning of the buttons now.

Cheers
Jay

[kopitejay]

Hi Florian

Another related query for you.
I want to scale down the whole zoom thumb area to about 1/2 size.

I've attempted to change it but I'm having problems with the thumb drag rectangle.
I've identified the variable _scale, which I have divided by 2 to reduce the thumb image size.
I'm just struggling to find whereabouts I can scale down the rest of the zoom thumb area.

Where abouts should I be looking?

Many thanks
Cheers
Jay

[Florian Nücke]

The main sizing and stuff is done in the updateThumbBox function (in the ZoomContainer class). The actual size is currently based on the background's (main display area's) size to scale properly when going into fullscreen. You'll see some / 5s in the width assignment, try changing these to / 10 or something.