Making it work

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 prezi

Prepare for lift off

It is important to know that developers start counting with 0.

Engage thrusters

For 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!

Note

There's a much nicer way of programming this in JavaScript, but for our project this works perfectly and is easy to understand.

Objective complete – mini debriefing

In this task, we added the JavaScript code to our menu to communicate with our prezi. We used the function .flyToStep() for it. A full reference of functions of the Prezi Player API can be found in its documentation.

Classified intel

Now, our basic project is finished, play around with some parameters and functions. For example, leave out the parameters controls and explorable and see what happens.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.137.217.17