PG Software Development

UPDATED March 2, 2017: As of the PowerPac v13.186.8+ page transitions can be either setup as outlined in this post OR they can be set up using the NEW tools provided at the ToolBook authoring level. While the method in this post is more flexible, the authoring tools provided are all most users will ever need.

PowerPac's Page Transition Author-level Menu

menu.png (24.11 KiB) Viewed 9454 times

As of PowerPac v13.180.4, PAGE TRANSITIONS can be easily included in your web applicaitons.

What can pgAnimateCSS() do?

• Apply any of some 46 animations to the entire ToolBook page to create transition effects.
• Sends a user event to the current page when the full transition into the page has completed.
• All features of pgAnimateCSS(), including duration and timing parameters are supported for page transitions. This permits changing the speed (or duration) of the transition and the CSS timing function (easing in/out etc.) used to apply the effects.
• Custom CSS files can be used to create effects not included in the PowerPac API library.

Limitations:

• Only page enter effects can be applied.
• HTML 5 browsers are required. IE9-10 has limited CSS transitioning ability and these browser should be tested if support for them is required. However, of the 47 animations in the PowerPac API, they all work in IE11. There are NO ISSUES with Mozilla or Chrome-based (Webkit) browsers.

Here is an embedded example:
In this example, the DHTML application calls pgAnimateCSS() on enter book to tansition to the first page using a rollin effect. As you click through to additional page of this demo, the transition used is randomly selected from an array of 21 effects. The page responds to the user event when the page transition completes and places the text in the field which indicates the page name, and the transition effect that was just used.

DOWNLOAD THE SOURCE FILE(S) FOR THIS DEMO:

How to Create Page Transitions

1. Start a PowerPac-enabled book. Create three or four pages for the book using a common background.
2. Draw a previous and next button on the background of the first page.
   Make sure the hyperlink of the buttons are set to go to the next and previous pages.
3. Create two Action global variables and name them transition and transArray.
   Set an initial value for transition = rollin
   (This will be the page transition that will be applied to the first page of our book when it loads.)
4. Set the following action for the on load book event:
   (Notice that for page transitions, we set tbName = "system" and we use our initial value for the variable transition for the css_animation to use. This causes the first page to transition in using the rollin effect.)
   

   

   Actions for on load book

   Image 1.png (12.5 KiB) Viewed 9572 times

   
   
5. For the on load page event of the first page of your book, enter the following logic:
   (The logic checks if a value has been assigned to transArray and if not it creates a shuffled or randomized array using pgSort_Shuffle().)
   

   

   Actions for on load page of first page

   Image 2.png (15.05 KiB) Viewed 9572 times

   
   
6. Add the following actions for BOTH the Next and Previous buttons:
   (The logic will shuffle our transArray[ ] and set the transition variable to whatever random transition effect is found in transArray [ 0 ] after the array has been shuffled/randomized.)
   

   

   Actions for on click of Next and Previous buttons

   Image 3.png (13.71 KiB) Viewed 9572 times

   
   
7. Add an unload page action for each page of your book that looks like this:
   (The logic uses the current transition value as the effect when transitioning to the next page.)
   

   

   Action for on unload page of each page.

   Image 4.png (12.48 KiB) Viewed 9572 times

   
   
8. Save and export your book and test your page transitions.
9. If you want to capture the on user event when the page transition has completed, here is the one I used in the demo:
   (In real world use, you would probably create a sharedAction to make this easier.)
   

   

   Actions of on user event of each page.

   Image 5.png (28.65 KiB) Viewed 9572 times

ENJOY!
YOUR COMMENTS ARE ALWAYS WELCOME.
(Of course, all of this is compatible with the XML capabilities of the PowerPac as well. Unfortunately, showing how to do this with XML files is beyond the scope of this article. However, send me an email at [email protected] and we can provide assistance.)