It has been Christmas for me, since I hit James’s blog. Every day I am getting fresh ideas about how to customize the overall appearance of storyline. Today I shall discuss one of his ideas of using Javascript to create a customized menu.
We can create this basis the fact that the javascript takes the variable from storyline and toggles it, whenever the user clicks to view menu. This change is noticed by the Storyline which then toggles the menu state to visible/ invisible basis the value of the variable.
Now let’s do this. We assume that there are 3 screens that need to be put into menu.
Step 1: Goto Slide Master and create a layer called menu on the first (master) slide.
Step 2:
Create a variable (example, ‘menuState’), whose value will be captured by Javascript.
Step 3:
Create a new menu item in the player and name it ‘Menu’ (or whatever name, you might want to put. I put it ‘New_Menu’).
Step 4: Now edit the trigger for the menu to execute the following JavaScript. Notice that it is used to toggle the state of the variable ‘menuState’ to in/out whenever it is executed:
var player = GetPlayer();//find the Flash Player
var menuState = player.GetVar(“menuState”)//get the current value or our sl variable
if (menuState == “out”) {//if the menu is out
player.SetVar(“menuState”, “in”)//tell the flash player to set the variable to ‘in’
} else {
player.SetVar(“menuState”, “out”)//tell the flash player to set the variable to ‘out
}
Step 5:
Create the menu on the ‘menu’ layer.
Step 6: Put triggers to connect the menu items to the corresponding screens. Remember to hide the menu when the user clicks a menu item.
Step 7: Finally, put triggers on the base layer of the Slide Master, to hide/ unhide the ‘menu’ layer. This will show the ‘menu layer’ whenever you click on ‘New_Menu’.
And we are done! You can download the demo storyline file, to see how it works.