We embedded a prezi and created a menu. Now, let these two communicate with each other.
In the documentation of the Prezi Player API, there's a full API reference with all the functions you can use. To give you an idea, some functions with a short explanation are given here. This is not the full list.
.getStepCount():
This returns the number of the steps of the prezi.getCurrentStep()
: This returns the actual step number.getTitle()
: This returns the title of the prezi.flyToPreviousStep()
: This moves the prezi to the previous step.flyToNextStep()
: This moves the prezi to the next step.flyToStep(number)
: This moves the prezi to the number you provide.play(milliseconds)
: This starts autoplaying the prezi.pause(milliseconds)
: This is same as .play()
, but pauses if prezi is already playing and starts autoplaying if not playing.stop()
: This stops autoplaying the preziFor our project, we will be using just one API function: .flyToStep()
. This function moves your prezi to the number you provide between the brackets. So, first find out which path step numbers belong to each menu item. But be aware! Developers start counting with 0, which means we have to subtract each number with 1. For example, in our prezi menu item Importance of bees is path number 21. This means we have to use 20 in our code.
The easiest way to add the code to your HTML is using the following code in your hyperlink:
javascript:player.flyToStep(0)
Copy-and-paste it in each hyperlink code between the quotes and change the number of the path step. The following is the new code for our menu:
<div id="menu"> <ul id="nav"> <li><a href="javascript:player.flyToStep(0)">Home</a></li> <li><a href="javascript:player.flyToStep(1)">Bees</a></li> <li><a href="javascript:player.flyToStep(8)">Pollination</a></li> <li><a href="javascript:player.flyToStep(13)">Evolution</a></li> <li><a href="javascript:player.flyToStep(16)">Live together?</a></li> <li><a href="javascript:player.flyToStep(20)">Importance of bees</a></li> <li><a href="javascript:player.flyToStep(23)">Assignment & sources</a></li> <li><a href="javascript:player.flyToStep(24)">The End</a></li> </ul> </div>
Save your new webpage and try it out!