Book opening, closing, page turning effect (not working, or WIP)
Posted: Tue Feb 18, 2020 6:53 pm
I'm working on something else I intend to give to the Cookbook/Public Domain, and it's coming along okay but I need some help (project files attached below).
I'm displaying a book object with pre-defined text (so that many books could use this same code). It is supposed to do the following:
1. open as it drops in from the top of the screen (or close as it flies off the screen) --- mostly working
2. displays pre-defined text on two facing pages that change with buttons to go to the next or previous page --- working totally fine
3. uses an animated page flip graphic, which displays as the pages change --- sort of working
4. as the pages change - the displayed text should be hidden before the replacing page's text is revealed - and it should be hidden with either:
a. a transform that changes the xzoom, to squish its width as if it is turning with the page
b. an image dissolve that wipes across the screen as the page turns
5. the replacing text should be displayed using the same sort of transition.
4. & 5. --- not working at all. I have no idea... well I have some idea*
Currently, the code changes the displayed text INSTANTLY (then plays the page turn animation, which is kind of awkward) - I mean, that's how I coded it, so this is not unexpected. But I'm not sure how to reconfigure it to get a transition in there, or have new text appearing as the old text is being hidden, since it's currently set up to only display the current text and replace that display with the next text.
I don't know how to get any farther than this right now, but I'll keep working on it. I could really use some coding help.
*Update:
I think what I need is a third (or a third and fourth), transitional text that is blank " " until the page turns. I've thought it out like this:
Step 1. The two texts of the current pages are displayed on the screen, with a static book background, until the user clicks a next page or previous page button
Step 2. The page flip animation image begins, on a higher zorder than those texts.
Step 3. The transitional text (on a higher zorder than the paper graphics) becomes the text of the moving page, and moves to a position appropriate for that page.
Step 4. The page text on that side becomes the new text (but it is hidden by the paper, which will move and reveal it)
Step 5. The transitional text xzoom squishes until it reaches 0 (at this point the paper animation is at the midpoint)
(if I used two transitional texts - one for each side, then the current one would stop at this point, and the rest would be the other side's transitional text)
Step 6. The transitional text becomes the new text of the facing page.
Step 7. The transitional text unsquishes from xzoom 0 to xzoom 1 - moving and/or changing its xanchor to the facing page.
Step 8. The paper and transitional text cover over the old text of the facing page text.
Step 9. THEN the facing page text becomes the new facing page text -
Step 10. as the transition text and the page flip animation are hidden, and the transition text returns to blank " ".
Step 11. I figure out how to code any of the stuff I just said!
The project files are attached (updated since I originally posted):
I'm displaying a book object with pre-defined text (so that many books could use this same code). It is supposed to do the following:
1. open as it drops in from the top of the screen (or close as it flies off the screen) --- mostly working
2. displays pre-defined text on two facing pages that change with buttons to go to the next or previous page --- working totally fine
3. uses an animated page flip graphic, which displays as the pages change --- sort of working
4. as the pages change - the displayed text should be hidden before the replacing page's text is revealed - and it should be hidden with either:
a. a transform that changes the xzoom, to squish its width as if it is turning with the page
b. an image dissolve that wipes across the screen as the page turns
5. the replacing text should be displayed using the same sort of transition.
4. & 5. --- not working at all. I have no idea... well I have some idea*
Currently, the code changes the displayed text INSTANTLY (then plays the page turn animation, which is kind of awkward) - I mean, that's how I coded it, so this is not unexpected. But I'm not sure how to reconfigure it to get a transition in there, or have new text appearing as the old text is being hidden, since it's currently set up to only display the current text and replace that display with the next text.
I don't know how to get any farther than this right now, but I'll keep working on it. I could really use some coding help.
*Update:
I think what I need is a third (or a third and fourth), transitional text that is blank " " until the page turns. I've thought it out like this:
Step 1. The two texts of the current pages are displayed on the screen, with a static book background, until the user clicks a next page or previous page button
Step 2. The page flip animation image begins, on a higher zorder than those texts.
Step 3. The transitional text (on a higher zorder than the paper graphics) becomes the text of the moving page, and moves to a position appropriate for that page.
Step 4. The page text on that side becomes the new text (but it is hidden by the paper, which will move and reveal it)
Step 5. The transitional text xzoom squishes until it reaches 0 (at this point the paper animation is at the midpoint)
(if I used two transitional texts - one for each side, then the current one would stop at this point, and the rest would be the other side's transitional text)
Step 6. The transitional text becomes the new text of the facing page.
Step 7. The transitional text unsquishes from xzoom 0 to xzoom 1 - moving and/or changing its xanchor to the facing page.
Step 8. The paper and transitional text cover over the old text of the facing page text.
Step 9. THEN the facing page text becomes the new facing page text -
Step 10. as the transition text and the page flip animation are hidden, and the transition text returns to blank " ".
Step 11. I figure out how to code any of the stuff I just said!
The project files are attached (updated since I originally posted):
