📄 tutorial.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style1 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.normal0 { color: #FF00FF;
font-weight: bold;
}
.normal1 { color: #CC0033;
font-weight: bold;
}
.style2 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; }
.style3 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; }
.style5 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.style7 { color: #FF0000;
font-weight: bold;
}
.style8 { color: #0000FF;
font-weight: bold;
}
.style9 { color: #009933;
font-weight: bold;
}
-->
</style>
</head>
<body>
<p class="title"> Tutorial</p>
<P class="normal">In this tutorial we will go through the basic usage of the BJC Bounce Menu on a step-by-step basis. Follow the steps for easy understanding of the component. </P>
<h2 class="normal">Creating the menu</h2>
<p class="normal">1. Drag the BJC Bounce Menu component from the components panel onto your stage.<br>
<br>
2. Set the frame rate to 20-30 fps for smooth effects.<br>
<br>
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.<br>
<br>
4. Set the <strong>Callback</strong> parameter to 'myCallback'.<br>
<br>
5. Select the <strong>Mode</strong> of the menu. In the vertical mode the menu items will be above each other and in the horizontal beside each other. <br>
<br>
6. If you are creating a link menu with HTTP-links, set the <strong>URL target</strong> window parameter.<br>
<br>
7. Set the<strong> Item padding</strong> parameter. It's possible to set negative values for more condensed look.</p>
<HR size="1">
<span class="normal">
<!-- setSelected -->
</span>
<h2 class="normal">Creating the pointer </h2>
<p class="normal"> 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. <br>
<br>
<img src="images/menu_img1.png" width="414" height="439"> <br>
<strong>Picture 1</strong> </p>
<h4 class="normal">Creating a non stretchable pointer </h4>
<p class="normal">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.<br>
<br>
<img src="images/menu_img2.png" width="172" height="336"> <br>
<strong>Picture 2</strong> <br>
<br>
2. Set the <strong>Stretch pointer</strong> parameter of the menu component to false.<br>
<br>
3. Set the <strong>Pointer clip</strong> parameter of the menu to 'myPointer'. <br>
<br>
4. That's it! </p>
<h4 class="normal">Creating a stretchable pointer</h4>
<p class="normal">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.</p>
<table border="0">
<tr>
<td><span class="normal"><img src="images/menu_img3.png" width="172" height="336"><br>
</span>
<p class="normal"><strong>Picture 3</strong></p></td>
<td><span class="normal"><img src="images/menu_img4.png" width="172" height="336"><br>
</span>
<p class="normal"><strong>Picture 4</strong></p></td>
</tr>
</table>
<p class="normal"> 2. Set the <strong>Stretch pointer</strong> parameter of the menu component to true.<br>
<br>
3. Set the <strong>Pointer clip</strong> parameter of the menu to 'myPointer'. <br>
<br>
4. That's it!</p>
<p class="normal">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.</p>
<HR size="1">
<span class="normal">
<!-- addItem -->
</span>
<h2 class="normal">Creating the textfield clip </h2>
<p class="normal"> 1. Create a new movieclip as shown in picture 1 and give it the instance name 'myTextField'. <br>
<br>
2. Add a dynamic single line textfield and set it's coordinates to 0,0. <br>
<br>
3. Set the instance name of the textfield to 'tf'.<br>
<br>
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.<br>
<br>
5. Select the <strong>Font size, Text alignment</strong> and <strong>text colors</strong> in the parameters panel of the menu component. Note that the <strong>Text alignment</strong> parameter has no effect on the horizontal menu.<br>
<br>
6. Set the<strong> TextField clip</strong> parameter to 'myTextField'. <br>
<br>
7. That's it! </p>
<HR size="1">
<h2 class="normal">Adding items</h2>
<p class="normal">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. </p>
<h4 class="normal">Adding static items </h4>
<p class="normal">1. Select the <strong>Static items</strong> parameter of the component so the value adding list appears. Click on the '+' button and add some item titles (Picture 5).<br>
<br>
<img src="images/menu_img5.png" width="240" height="288"> <br>
<strong>Picture 5 </strong><br>
<br>
2. Select the <strong>Static links</strong> 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.<br>
<br>
3. Press Ctrl+Enter to test the movie. </p>
<h4 class="normal">Adding items dynamically </h4>
<p class="normal">1. The 'addItem' method will add menu items with the parameters set in the parameters panel. <br>
<br>
2. Set the instance name of the menu component to 'myMenu'. <br>
<br>
3. Select a frame and add the following code for each menu item:<br>
<br>
myMenu.addItem( Item name,itemURL ); <br>
<br>
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 <strong>Callback</strong> parameter will be called. The function should be place in a frame as the following code:<br>
<br>
<font color="#009933">function myCallback( index ) {<br>
trace( index);<br>
} </font></p>
<h4 class="normal">Adding customized items </h4>
<p class="normal">Follow the steps from 1 to 3 in the 'Adding items dynamically' section but add the following code instead: <br>
<br>
myMenu.addItemCustom( Item name, itemURL, target window, fontSize, fontColor, rollOverColor, selectedColor );<br>
<br>
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.</p>
<HR size="1">
<span class="normal">
<!-- addItemCustom -->
</span>
<h2 class="normal">Testing and adjusting effects </h2>
<p class="normal">The BJC Bounce Menu component has two <strong>Text effect types</strong>: scale and move. The scale type scales an item on roll over to the size set in the <strong>RollOver size</strong> parameter. The move type moves items horizontally in a vertical menu and vertically in a horizontal menu. If the <strong>Text alignment</strong> 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 <strong>Easing type</strong> and <strong>Effect duration</strong> parameters. The <strong>Elasticity</strong> parameter affects only the elastic types of the <strong>Easing type</strong> parameter. <br>
<br>
Press Ctrl+Enter to test the movie. Play with different effect values for different effects. </p>
<HR size="1">
<h2 class="normal">Setting the callback and moving between frames </h2>
<p class="normal"> 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: <br>
<br>
<br>
<font color="#009933">// Add some items <br>
myMenu.addItem( "First page", "" ); <br>
myMenu.addItem( "Second page", "" ); <br>
myMenu.addItem( "Third page", "" ); <br>
<br>
// Set the callback <br>
myMenu.setCallback( "cbFunc" ); <br>
<br>
// The callback function <br>
function cbFunc( index ) <br>
{<br>
trace( index );<br>
<br>
// First button was clicked<br>
if( index == 0 )<br>
{<br>
// Move to the second frame<br>
gotoAndStop( 2 );<br>
}<br>
// Second button was clicked<br>
else if( index == 1 )<br>
{<br>
// Go to the third frame<br>
gotoAndStop( 3 );<br>
}<br>
// Third button was clicked<br>
else if( index == 2 )<br>
{<br>
// Go to the fourth frame<br>
gotoAndStop( 4 );<br>
}<br>
<br>
// And so on...<br>
}</font><br>
<br>
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. <br>
<br>
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. </p>
<P class="normal"> </P>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -