Forum Discussion
FLIP BOOK / ROLL PAGE ANIMATION / TRANSITION
For anyone interested, I assembled a proof of concept example for a pageturn effect in SL using the BookBlocks JavaScript library.
https://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/
This is functional, but still in the Beta stage. It could use some refinement and additional error checkng before going into production. The Codrops page shows several additional variations that are possible. I just implemented a basic version.
This is capable of handling simple content, such as is presented in the attached example SL project file, with the demo below.
https://360.articulate.com/review/content/f4db31b9-ec92-4ae0-8fe8-1929fa04006e/review
It can also handle much more complicated interactive content, including audio, video, animations, and custom JS components. A quick mock-up is shown below with some content I excerpted from another project.
https://360.articulate.com/review/content/d1920505-10e8-407f-bb8b-1276a5284330/review
The BookBlocks library relies on several other .css and Javascript files, including jQuery, which all get loaded in the main script. This process could be streamlined.
To make future page content available in SL, I built the book content from a specified collection of slide layers. This allows you to still use the base slide and master slide as a background, master slide layers as overlays, and additional slide layers (beyond those used for the book content) as overlays as well, if so desired.
Feel free to make improvements and share you progress with others.
Edit: Still can't attach zip files, so use these links for extra files.
I really thank you for sharing this source you made my day
but what if i want to use it in arabic content i want to make it flip RTL
I haven't looked at this code in quite a while.
The simplest answer would be to start on whatever you need to be the first page and switch the next and previous triggers, so next flips RTL and previous flips LTR. You may have some other housekeeping to do to keep track of your position. Just keep the content in reverse reading order in the slide layers.
The better answer is of course adding a RTL toggle option to the code, which would be a great project for someone wanting to practice their JavaScript skills in Storyline.
This is on my list of things to revisit, although I don't really know when that might be.