Forum Discussion
FLIP BOOK / ROLL PAGE ANIMATION / TRANSITION
Can you tell me how to add more pages to the flipbook?
😁NM, I figured it out. I am so proud of myself!😁 This is really awesome. I can see it being very useful in many lessons.
Keep in mind that this is a rough example demonstrating the functionality. Using it as is will be a bit clunky.
Anyway, to add more pages follow these steps.
- Create additional layers at the top of the layer list, or copy or duplicate one of the existing layers.
- Add whatever content you need to the layer, matching the format of the existing layers
- Increase the countLayers variable value to equal the number of layers used (2 facing pages per layer)
- Add additional togLayer_# variables to match the number of layers used. Set to false.
- On the slide base, add additional triggers for each added layer matching the format of this one
- Make sure the existing Execute JavaScript trigger is at the bottom of this list
- On the slide base, add additional triggers for each added layer matching the format of this one
- On each new layer that you add, insert the following trigger (copy and paste from another layer's trigger list)
- Move this trigger (currently on layer 4) to the bottom of the topmost layer, or the last one in the trigger list you created in step 3 above)
- Set all of the layers you are using as book pages to match these layer properties settings (for each layer, select the gear on the bottom right below the list of layers)
When you publish the project, you should be able to flip through your added pages. Hopefully, I did not forget any steps.
I attached an updated file with some added pages.
For practice, try making a copy of the original project file and then going through the steps to add pages so it looks like the new one. If you have problems, compare your project to this one. Once you can recreate this, then you should be able to add however many pages you need.
p.s.- I removed a few unused variables from the new file that were left over from earlier versions.
It's working beautifully. I am now confused on how to move the book to the side of the screen.
So, here's what I am using it for: I am putting a highly technical document onto each page. The user will then answer a question by clicking through the document to locate the answer.
I need room to put the question on the main slide, not on the flipbook. I will then hide the question and show a new question once the correct answer has been located in the document. I just need room to put the question.
Currently, all the positioning is controlled by the stylesheets (bookblock.css for this).
Given the setup of the demo that was posted here, a quick hack that would let you change position is as follows:
- Edit the JavaScript in the trigger at the bottom of the "When timeline starts on..." section.
- Add the following lines of code below the line containing "//Initialize BookBlock", around line 252.
var style = document.createElement("style"); //make a new stylesheet that can override the existing css rules document.head.appendChild(style); // must append the sheet before you can access sheet property var sheet = style.sheet; // get the style sheet sheet.insertRule(".bb-bookblock {margin: 2.5% auto auto 0;}", 0); //add a new margin rule for the .bb-bookblock classSave the new trigger code.
This changes the left margin to 0. You could also do the right and/or the top margins. You could also insert additional rules to override any of the other styling in the related stylesheets.
Important note:
If you scroll through the code in that trigger you will see several lines in the middle that contain links to files at https://paedagogus.org. These are the css and JavaScript files used in the demo. This is my server. While I don't plan on removing them anytime soon, they could disappear at any time. Ideally, you would either move copies of these files (included in the zip file attached to this post) to your own server, or include static versions inside your SL project. That way, you don't need to worry about their availability, and you will have the ability to edit them.
Right now, you can't edit the css file on the server, which is why the code above was needed to hack in an override.
Math Notermans has a post that details a relatively convenient way to include any files you need directly into your project. If you look at some of my other project posts, you will also find a number of examples of doing this. You can also search for other posts that detail modifying the project html and and adding the external files manually. Since this was more of a demo however, I just linked to my server.
I may do some additional updating of this demo at some point, making it more self-contained and convenient to use, but it won't be for a while.
I downloaded your story. Thanks so much ! Im going to take a deeper dive but was curious if you knew if your triggers could be slide based and not layer based. I have some projects that id love to have this book/ magazine style and then allow them to click on a "page" to see more. (layer) but if this is only layer based... that would be much much more challenging.
So, since the book needs to have access to the previous, current, and next content for the pages, it uses layers since all of the layers can be available at once to the slide. There is no real way to do this effectively across actual different slides, except maybe using a lightbox but that would require an overhaul.
If you just want to pop-up layers on top of the book pages to show additional information or content, then you still can. You specify how many layers should serve as book pages. Any remaining layers can still be used as they normally would, as can master slide layers. These extra layers would, of course, be outside of the book pages so they woul act like overlays rather than actual page content.
For the demo book with content, I copied and pasted (special) from my slides to the layers. That still dropped some triggers and all the cue points, but kept everything else intact, so it wasn't to much work. It would be easier to design the layers from scratch however.
This is a great interaction!!! However, if you click too quickly to move forward or backward with the arrows, the content and images disappear on the pages until you get to the very end or back to the beginning. Is there a way to prevent this?
Keep in mind this is more a proof-of-concept rather than a ready to use solution. There are several issues that need attention before going into production.
There may be timing issues between making the layer content available and loading it into the book page. There may also be an issue with interrupting the flip animation with rapid clicks. Both could possibly be resolved (superficially) by disabling/masking the flip buttons until the animation completes. The animation speed itself can be adjusted and the simplest approach may be to prevent premature clicking.
I will try to come back to this to at some point. The current version was just hacked together to the point of working. It's a bit of a mess.
- Create additional layers at the top of the layer list, or copy or duplicate one of the existing layers.
