Getting SWFs to play only when page is shown

[Digimars]

Hi,

I've browsed through all 13 pages of General Discussion and I know the answer is in
the tutorial section, but for some reason I can't get this to work.

- I have all include files in he correct place
- My xml has the following page:       

Code: [Select]

<page anchor="showcase" buffer="false">
         <img src="../imgs/normal/test.swf" hires="../imgs/normal/test.swf" id="test" overlay="0" iconpos="560 20"/>
</page>
- The test.swf has two frames. For now I want it to stay on frame one, until the user has stopped flipping the page and the test.swf is fully visible.
- The first frame of the test.swf has one layer with keyframe #1 saying:

Code: [Select]

import de.mightypirates.megazine.IMegaZine;
import de.mightypirates.megazine.IPage;
import de.mightypirates.megazine.elements.AbstractElement;
import de.mightypirates.megazine.gui.ILibrary;
import de.mightypirates.megazine.events.MegaZineEvent;

var mz:IMegaZine
function megazineSetup(mz:IMegaZine, page:IPage, even:Boolean):void {    
page.addEventListener(even ? MegaZineEvent.VISIBLE_EVEN : MegaZineEvent.VISIBLE_ODD, onPageVisible);
}
function onPageVisible(e:MegaZineEvent):void
{    
play();
// Page is now visible
}
- And a second layer with keyframe 1 saying:

Code: [Select]

stop();

- I'm exporting in flash player 9 and AS3
- I'm getting no compiler errors

RESULT: Animation in test.swf stays on keyframe 1 and doesn't start playing.

Does anyone know what might be wrong?  

[bnnorman]

It doesn't work for me either.

The megazineSetup method is called - no problem there, just the megazine events not getting through somehow.

BTW...

Adobe help says this "If you no longer need an event listener, remove it by calling removeEventListener(), or memory problems could result. Objects with registered event listeners are not automatically removed from memory because the garbage collector does not remove objects that still have references."

So adding event handlers to the page object would result in memory useage increasing every time such a page were reloaded/unloaded.

Having said that I got this to sort of work. The animations on hidden pages clearly started at frame 2 when the page was turned.

This was on Frame 1 of my animated page. The actual animation started on Frame 2 - but continued to loop although I had a gotoAndStop(1) on the last frame of the animation. It's too late to debug that today.

// start of code on frame 1
stop();

import de.mightypirates.megazine.IMegaZine;
import de.mightypirates.megazine.IPage;
import de.mightypirates.megazine.events.*;


var mz:IMegaZine;
var pg:IPage;
var even:Boolean;
var running:Boolean=false;

function megazineSetup(_mz:IMegaZine, _page:IPage, _even:Boolean):void {

mz=_mz;
pg=_page;
even=_even;

running=false;

addEventListener(Event.ENTER_FRAME,onEnterFrame);

}

function onEnterFrame(evt:Event):void
{

if (pg.getPageVisible(even))
{
if (!running)
   {
   gotoAndPlay(2);
   running=true;
   }
}
else
{
   gotoAndStop(1);
   running=false;
}

}
// end of code on frame 1


A better approach, I think, would be to add calls to a function like megazineSetup() and which "could" be defined on each page and to pass trigger/event info to that. Less elegant than events but avoiding the garbage collection pitfalls.

So, in your page FLA you could do something like this on frame 1:-

// start code
stop(); // animation doesn't play till told to

import de.mightypirates.megazine.events.MegaZineEvent;


function Signal(evt:MegaZineEvent)
{
// in here we could then respond to events passed like this (If I understand the code)

switch (evt.message)
{

case MegaZineEvent.VISIBLE_EVEN:
case MegaZineEvent.VISIBLE_ODD: gotoAndPlay(2); break;

case MegaZineEvent.INVISIBLE_EVEN:
case MegaZineEvent.INVISIBLE_ODD: gotoAndStop(1); break;
}
}

// end code

Sadly, I'm a total newbie on this pageFlip engine so I wouldn't know where to put the calls. It strikes me that the dispatchEvent() calls could be overridden - maybe.

[bnnorman]

After some more investigation I got the expected events to work but had to change the megazineSetup() code as follows.

var mz:IMegaZine;
var pg:IPage;
var even:Boolean;
var running:Boolean=false; // used to control the playing of the animation

function megazineSetup(_mz:IMegaZine, _page:IPage, _even:Boolean):void {

mz=_mz;
pg=_page;
even=_even;

running=false;

pg.addEventListener(MegaZineEvent.VISIBLE_EVEN,onVisible);
pg.addEventListener(MegaZineEvent.VISIBLE_ODD,onVisible);
pg.addEventListener(MegaZineEvent.INVISIBLE_EVEN,onInvisible);
pg.addEventListener(MegaZineEvent.INVISIBLE_ODD,onInvisible);
}

The functions onVisible and onInvisible were then called BUT, and here's the rub, I found that onVisible was
only called when the mouse hovered over the page corner (page turn started) which is of no use at all because as soon as I released the mouse the onInvisible event was then sent to the page, yet it was still on top and clearly visible. Very strange and not very helpful.

[Florian Nücke]

What you're doing in the last bit of code is listening to both page side's events (the even and the odd one), and one of the two will clearly always be invisible, unless the page is being dragged or turning.

Anyway, next version (2.0) there will be an extra class for "page sides", which will make the use of the "even" boolean superfluous, and also the different events for even and odd. That should make things clearer and more robust.

[bnnorman]

Ok, I see now that as a page turn starts then the event is sent for that page and that EVEN/ODD refers to the page being exposed.

The problem is that commencing a page animation on this event means it will start before the page is completely exposed - might not be so good if someone manually turns a page very slowly and the animation is short lived.

Your proposed V2.0 change may make make this easier but I would ask that the event is fired when turning is complete because we would not really want to start an animation until the full page turn is complete and the page is fully visible. Alternatively, the choice could be given to the book author if two events were fired in the order VISIBLE then TURN_COMPLETE so that animations could be started before the turn is complete (VISIBLE on its own) or wait till (VISIBLE & TURN_COMPLETE).

I'm gagging to see V2.0 and I have a couple of suggestions:-

1) When a sound is played as a result of clicking on something any chapter/page sound track volume is reduced. This would allow childrens speaking books to be created with a background (keep them happy) audio track.

2) Ability to disable a page from turning. This would allow the creation of interactive books with alternate routes through a story.

3) Overlay page numbers on the actual pages.

[angang]

I'm on the version 2.0 and i have spent 5 hours on the wiki without result...
Is it possible to know how the swf play only when the page is shown ?
The extra class for "page sides" is not commented on the wiki...
Wich file, wich code ?
Thank you

[simonx314]

I am also interested in documentation on how to make swf's only play when the page has finished turning.  Right now I have swf's for each page and they all play at the same time as soon as the book is loaded. 

Another problem is that my swf animations seem to play about 2x or 3x too fast, but swf's sound is truncated when the swf animation loops.  I have tried changing my swf's frame rate to 6 fps, 60fps, nothing seems to affect the speed.  Any ideas?

[Florian Nücke]

The wiki is primarily user oriented, not developer oriented. Have a look at the API instead, where you'll see what dispatches what events and so on.

The engine is compiled to target 31 frames per second, I'm pretty sure this overrides the framerate for loaded content. The easiest solution for you would probably to recompile it with the same framerate you're working with (see the build.properties file in the ant folder of the project in the svn). I posted how to compile the sources not too long ago.

Now, the following is what should work for version 2.x not 1.x.
Note that I did not test this!

This one plays as soon as the page side containing the element is visible

Code: (actionscript3)

import de.mightypirates.megazine.interfaces.IMegaZine;
import de.mightypirates.megazine.interfaces.IPageSide;
import de.mightypirates.utils.events.VisibilityEvent;
stop();
function megazineSetup(mz:IMegaZine, ps:IPageSide):void {
    ps.addEventListener(VisibilityEvent.VISIBLE, handleVisible);
    ps.addEventListener(VisibilityEvent.INVISIBLE, handleInvisible);
    if (pageside.visible) {
        play();
    }
}
function handleVisible(e:Event):void {
    play();
}
function handleInvisible(e:Event):void {
    stop();
}
 

This one starts animations as soon as all animation is done and the containing page side is visible.

Code: (actionscript3)

import de.mightypirates.megazine.interfaces.Constants;
import de.mightypirates.megazine.interfaces.IMegaZine;
import de.mightypirates.megazine.interfaces.IPageSide;
import de.mightypirates.megazine.events.MegaZineFlipStateChangeEvent;
stop();
var pageside:IPageSide;
function megazineSetup(mz:IMegaZine, ps:IPageSide):void {
    pageside = ps;
    mz.addEventListener(MegaZineFlipStateChangeEvent.MEGAZINE_FLIP_STATE_CHANGE, handleFlipStateChange);
    if (mz.flipState == Constants.MEGAZINE_FLIP_STATE_READY && pageside.visible) {
        play();
    }
}
function handleFlipStateChange(e:MegaZineFlipStateChangeEvent):void {
    if (e.newState == Constants.MEGAZINE_FLIP_STATE_READY && pageside.visible) {
        play();
    } else {
        stop();
    }
}
 

[james4551]

Hey guys and Florian, I got this working fine, the only problem on mine is when turning past the spreadpage, as soon as the next two pages load, the right hand side of the spread page jumps back on top of any other pages on the right... I use an animated swf as the background on the spreadpage with a video centered over the top, and both the video and right page seem to keep jumping back onto the top covering any content after it completely. Any ideas on this one?

[Afroshok]

James, as I found out while running some embedded swf, the solution is to make sure that your pages are opaque (on the color settings on the megazine.mz3 for bgcolor is >bgcolor="0xff000000"). the first 2 "ff" denote the alpha channel. This can be per page or the entire megazine.

[Florian Nücke]

Hmmm, sounds strange. Could you send me an example book?

[james4551]

Hey Florian, I'll get an example book to you asap, would you prefer it to be just uploaded online somewhere, or zipped up to download?
If it helps at all I get this error:
** [11:23:14] [  JavaScript   ] Warning: Failed registering basic ExternalInterface functionality.
** [11:23:14] [  JavaScript   ] Warning: Failed registering ExternalInterface functionality for an element.

[Florian Nücke]

A zip would be appreciated, makes it easier to work with to have the files on a local webserver.

The warnings are in all likelyhood unrelated to the issue, it just means the JavaScript communication could not be set up (try adding a allowScriptAccess: "always" in the parameters block to fix that [i.e. where the allowFullscreen thing is]).

[cduchesne]

seems to me this problem hasn't been fixed for 2.0.

Let's be clear, the hint of the next page should not make the next page considered visible.

The user can leave their mouse on the corner and the corner starts to show the corner of the next page. However, the incoming swf begins to play its animations and sounds, despite actionscript interaction code in the incoming swf, even though the next page has not been fully flipped. The incoming page has not finished being visible in its entirety and the full spread is not yet in position, but Megazine seems to consider it visible.

Is it possible to detect when the flipping has ended and the spread is in position?

[Florian Nücke]

@cduchesne: this is expected behavior, nothing to fix there. It is visible, after all. I understood the problem james described more as a depth sorting issue. To do what you want, i.e. only do something if the page is the current "main" page, try this:

Code: (actionscript)

// yadayada imports
 
var pageNumber:int;
function megazineSetup(mz:IMegaZine, ps:IPageSide):void {
    pageNumber = ps.number + (ps.number & 1); // get even number of the double page this page side belongs to
    mz.addEventListener(PageChangeEvent.PAGE_CHANGE, handlePageChange);
}
 
function handlePageChange(e:PageChangeEvent):void {
    if (e.newPage == pageNumber) {
        // Now main page
    } else if (e.oldPage == pageNumber) {
        // No longer main page
    }
}