Picture 1
Tutorial
In this tutorial we will go through the basic usage of the bounceMenu on a step-by-step basis. Follow the steps for easy understanding of the component.
1. Drag the BJC Bounce Menu/bounceMenu component from the components panel onto your stage.
2. Set the frame rate to 20-30 fps for smooth effects.
3. Resize the menu. In the vertical mode of the menu the width will affect the pointer if stretched. In the horizontal mode the hight will affect the pointer. More information on the pointer at the 'Creating the pointer' section of this document.
4. Set the Callback parameter to 'myCallback'.
5. Select the Mode of the menu. In the vertical mode the menu items will be above each other and in the horizontal beside each other.
6. If you are creating a link menu with HTTP-links, set the URL target window parameter.
7. Set the Item padding parameter. It's possible to set negative values for more condensed look.
Create a new movieclip as shown in Picture 1 and give it the instance name 'myPointer'. In this section you'll be shown how to create stretchable and non stretchable pointers. A stretchable pointer scales itself to the size of a selected item. A regular pointer just moves to point at the selected item.
Picture 1
1. Create a triangle as shown in Picture 2 and set it so the hotspot points at the left middle point of the triangle. The hotspot of the pointer will point at the vertical middle of a vertical item, and at horizontal middle of a horizontal item. After the menu is done you can adjust the pointer so it will look as you wish.
Picture 2
2. Set the Stretch pointer parameter of the menu component to false.
3. Set the Pointer clip parameter of the menu to 'myPointer'.
4. That's it!
1. Create a rectangle as shown in Picture 3 and set it so the hotspot points at the left middle point of the rectangle. In the horizontal mode the hotspot should point at the top middle point of the shape (Picture 4). It's important to place the shape in the right way so the stretching (scaling) of the pointer would be correct.
 Picture 3 |
 Picture 4 |
2. Set the Stretch pointer parameter of the menu component to true.
3. Set the Pointer clip parameter of the menu to 'myPointer'.
4. That's it!
Please note that the pointers created are the most simple kind. You can create more artistic pointers and even add tween animations and functionality to the pointer.
1. Create a new movieclip as shown in picture 1 and give it the instance name 'myTextField'.
2. Add a dynamic single line textfield and set it's coordinates to 0,0.
3. Set the instance name of the textfield to 'tf'.
4. Select the font of the textfield as you wish and embed the necessary characters. It is important to embed the font for smoother effects.
5. Select the Font size, Text alignment and text colors in the parameters panel of the menu component. Note that the Text alignment parameter has no effect on the horizontal menu.
6. Set the TextField clip parameter to 'myTextField'.
7. That's it!
It is possible to create the menu without coding even one single row of ActionScript by adding items via the component parameters, or you can add items by using the component methods.
1. Select the Static items parameter of the component so the value adding list appears. Click on the '+' button and add some item titles (Picture 5).
Picture 5
2. Select the Static links parameter of the component so the value adding list appears. Click on the '+' button and add some item HTTP-links. Notice that the first link will be added to the first item, the second link to the second item and so on.
3. Press Ctrl+Enter to test the movie.
1. The 'addItem' method will add menu items with the parameters set in the parameters panel.
2. Set the instance name of the menu component to 'myMenu'.
3. Select a frame and add the following code for each menu item:
myMenu.addItem( Item name,itemURL );
Note that the item URL has to include the full link ie. 'http://www.flashloaded.com'. If you set the itemURL to null, the callback function set earlier in the Callback parameter will be called. The function should be place in a frame as the following code:
function myCallback( index ) {
trace( index);
}
Follow the steps from 1 to 3 in the 'Adding items dynamically' section but add the following code instead:
myMenu.addItemCustom( Item name, itemURL, target window, fontSize, fontColor, rollOverColor, selectedColor );
Note that the target window should be _self, _top, _blank or _parent. The font colors should be placed as hex numbers ie. red is 0xFF0000. If you set the itemURL to null, the callback function set earlier in the Callback parameter will be called.
The BJC Bounce Menu component has two Text effect types: scale and move. The scale type scales an item on roll over to the size set in the RollOver size parameter. The move type moves items horizontally in a vertical menu and vertically in a horizontal menu. If the Text alignment is set to 'center' in the vertical menu, the move effect of the items will be disabled. Both effect types can be adjusted with the Easing type and Effect duration parameters. The Elasticity parameter affects only the elastic types of the Easing type parameter.
Press Ctrl+Enter to test the movie. Play with different effect values for different effects.
You can add any kind of actions to your menu items by setting the callback function. You can set the callback from the component parameters or by calling the setCallback method. The following example shows how to set the callback with ActionScript:
// Add some items
myMenu.addItem( "First page", "" );
myMenu.addItem( "Second page", "" );
myMenu.addItem( "Third page", "" );
// Set the callback
myMenu.setCallback( "cbFunc" );
// The callback function
function cbFunc( index )
{
trace( index );
// First button was clicked
if( index == 0 )
{
// Move to the second frame
gotoAndStop( 2 );
}
// Second button was clicked
else if( index == 1 )
{
// Go to the third frame
gotoAndStop( 3 );
}
// Third button was clicked
else if( index == 2 )
{
// Go to the fourth frame
gotoAndStop( 4 );
}
// And so on...
}
So, the index variable that is passed to the callback function, is zero based. This means that the first button is zero, second button is one, and so on. You can add as many if-elses or switch-cases as you wish, there is no limit.
More advanced programmers can also store some additional information in an array that matches with the Bounce Menu items. This can be used to create a more sophisticated construct to the callback function.