Forum Discussion
FLIP BOOK / ROLL PAGE ANIMATION / TRANSITION
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.
Ah, this makes sense. Thank you so much for your help and patience. I am not a programmer, but I am learning. Your directions are very clear.