Help creating a book in Flash
Hi there - I'm hoping someone can help me out - I'm new to Flash, and am trying to create a 'book' where the user can turn pages either backwards or forwards. Clicking on the back and forward controls turns the page to the next page or previous one. Each page has one or more videos that can be played.
Right now I have a video of the book in which each page is turned, so that I can advance the video to turn the page (the page turning video is important) and run the video backwards to turn the page back. Doing that with the scrubber bar gives me the effect I want.
How do I set this up so that I have the controls I want? I think I need to set up cue points for the 'open pages' in the movie, but I am stuck at that point. Are there any examples that would help me?
Much appreciate the help!
hi- i had to read and re-read your post a few times to understand what you are asking. i am now assuming that you don't want to make an "e-magazine" type of site as can be found, for example, at http://page-flip.com/products/flippingbook-html-edition/ ( click on "View Demos" )
but that you have a video of a book with each page being turned, and you want the ability to use buttons to turn the pages forward or backwards?
if so, then yes, i would feel that Cue Points are the way to go. Your video needs to be encoded with the Cue Points as 'Navigation' Cue points, not 'Event Cue Points' . You can do this using the Flash Video Encoder that comes with Flash, or if you export from Final Cut as a FLV, you can do it at that time also.
you will need a navigation cue point at each point you want to either navigate to or from. i would assume you want a cue point at the beginning of each turn, and at the end of each turn.
now, you can create 2 buttons and script them so that one will advance to the next turn, and the other will go back a page.
the smoothness and the quality of the effect will all depend on how well you filmed the book, and the placement of the cue points.
the part that confuses me is when you say " Each page has one or more videos that can be played"
does that mean that inside each page are all these other options ( like a standard e-magazine could be set up ? ) or do you mean something else?
otherwise the theory is fairly straight-forward: you are breaking up your video into 'chapters' via cue points, and control them by advancing( or going back) each chapter via a mouse click. the big problem you will first run into is going in reverse. using your scrub bar on a video, you can make the video go in reverse, but as far as i know, there is no method for a FLV to play in reverse. i will look into that though, as now i am curious about that too.
so we have to come up with a work-around. this drove me crazy all day. what i came up with
is to have 2 videos, with 2 video players, superimposed on top of each other.
let's say the page turning forward is in the top player. underneath that, in the other player, is the video of the pages turning in reverse ( any video editor can export the video as reverse frames).
then your code just pays attention first to which button is pressed, toggles the visibility of the top player if necessary, and then plays the correct cue-point/chapter.
the functions make sure that upon coming to the next chapter, the player stops playing(pauses) until the next click.
if i read you wrong, and you DO want an "e-magazine" style site, i do suggest you purchase one of the many packages for sale out there. it is not easy to set up from scratch- definitely not for a new Flash user. the packages make it a snap, though. however, if what i am saying is what you want, then you can look at these 2 examples i posted here:
ww.demetri-media.com/Sven/FlashASbook.html please note that neither the examples, nor the html page is 'pretty' . i am just trying to get the information out there. you will see 2 examples of the same thing. the first example has the 2 video players side by side, so you can get a clearer idea of what is going on, and what needs to be done.
the second one has the 2 players superimposed. obviously, your filming, and placement of cue-points will be crucial to getting this effect to look as clean as possible. i do believe that this is a good job and should get you started on working on this effect.
there might be much better ways out there. i just tried to tackle the problem and come up with something using my arsenal of tricks.
i also added 2 dynamic text boxes to load the info of the cue point names, just for more visual information.
i freely offer my much slaved over code for your use- you can find it on the same page under the SWFs.
i 'hard-coded' everything as it was easier for me to figure out my logic, and to trouble shoot ( yeah, there was lots of that...). also,i always believe it is easier for
someone else, especially beginners, to understand that way. once i would be happy with my code, i would then clean it up, and make it more concise, putting my cue point names into 2 Arrays, and calling the functions that way, taking the redundancy out of the 'removeEventListeners' etc.that would save a lot of code. but for now, well, enough is enough!
let me know if this helps, or if i missed the mark for you .....
Hi there Demetri,
thank you so much for your timely and very helpful post. You are right - I don't want an e-magazine - I actually have two things that are very similar - one is a filmed book, and the other is an electronically generated timeline, both basically are the same thing - they are movies that move backwards and forwards to cue points by winding back and forward. On each open page there is content that can be clicked on which opens other movies or text boxes, but that's the easy bit I think.
I'm going to take a look at you examples today, but wanted to say a huge thanks for your help.
Dimitri - thanks for this - could you do me a huge favor and post your .fla file for this? I would appreciate it,
ok - here is the FLA - although all the code was supplied on the web-page of the examples.
in this file i offset the 2 video players slightly so you can see that they are obviously 2 separate players, which you can then align for the proper effect.
at the moment i have no desire to work on revising the code , which could use some 'optimizing' to eliminate redundancy and make writing it more succint. it was written 'long-hand' for 'ease of learning' purposes.
i would suggest using arrays for the cue points in the two videos, and then maybe exploring the "seekToNextNavCuePoint" and "seekToPrevNavCuePoint" methods which could help shorten this code a lot.
good luck, have fun withit, and do let us know what you do with it - post a link so we can see !
Thanks so much - that helped me to see how it fits together! SO appreciate the help!