📄 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"> Basic Tutorial </p>
<P class="normal">In the following tutorial we will go through the basic usage of the BJC Drop Menu. Follow the steps for easy understanding of the component. </P>
<h2 class="style3">Creating the XML source file </h2>
<p class="normal">1. Open Notepad or any text editing application. <br>
<br>
2. Add the following code: <br>
<br>
<font color="#009933"><?xml version="1.0" encoding="utf-8"?><br>
<menu> </font><br>
<br>
3. The XML-nodes for the main menu items look like this:<br>
<br>
<font color="#009933"><mainitem title="Main item 1" link="$2" target="" enabled="true" icon="ico01"><br>
<subitem title="Sub item 1" link="$contacts" target="" enabled="true" icon="ico02" /><br>
<subitem title="Sub item 2 " link="http://www.flashloaded.com" target="_blank" enabled="true" icon="ico02" /><br>
<subitem title="Disabled sub item" link="$3" target="" enabled="false" icon="ico02" /><br>
</mainitem></font><br>
<br>
4. The main item in this example will have it's <strong>title</strong> set to 'Main item 1'. In the <strong>link</strong> attribute, the <strong>$</strong> -symbol in front of a number means that the link is to a frame number. The <strong>$</strong> -symbol in front of a string means that link is to a frame name. <br>
<br>
5. If the <strong>link</strong> attribute is set to an URL (in this case to 'http://www.flashloaded.com'), the item will work as a link to a internet source. You can also set the<strong> target</strong> attribute to define where the browser window will be opened. <br>
<br>
6. The <strong>enabled</strong> attribute defines the availability of the item. If set to true, the item will be enabled. <br>
<br>
7. The<strong> icon</strong> attribute is the linkage id of a movieclip that will be attached as an icon. The icon will be resized to fit in the item. <br>
<br>
8. As described go through the steps from 3 to 7 for each main item. <br>
<br>
9. Add the following code to the last line: <br>
<br>
<font color="#009933"></menu> </font><br>
<br>
10. Save the XML-file. Set the name of the file to menu.xml, and make sure the encoding is set to UTF-8. Save the file in the same directory as the FLA-file will be. </p>
<HR size="1">
<h2 class="style3">Creating the menu</h2>
<p class="normal">Open Flash MX2004 and create a blank file in the same directory as the XML-file. Follow the steps to create the menu. </p>
<p class="normal">1. Drag the BJC Drop Menu component from the components panel on 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 modes, the width of the main menu items will be the same as the component width. In the horizontal mode the width of the main menu items will be related to the length of the item title. Main menu items outside the component will not be shown.<br>
<br>
4. Set the <strong>Source</strong> to the xml-file you created. In this case <strong>menu.xml</strong>. <br>
<br>
5. Set the <strong>Callback</strong> parameter to 'myCallback'. You can add the following code to the main timeline of your application:<br>
<br>
function myCallback( main, sub ) {<br>
trace( "main item: " + main + ", sub item: " + sub ); // this code will run when the user clicks on a menu item<br>
} <br>
<br>
6. 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>
7. Set the<strong> Item padding</strong> parameter. This parameter defines the space between menu items. <br>
<br>
8. Create a <strong>new font</strong> in the library by clicking on the menu icon on the right side of the library window. Select the font you want to use, and set the linkage id to <strong>Font1</strong>. <br>
<br>
9. Set the <strong>Font</strong> parameter to <strong>Font1</strong>. <br>
<br>
10. Set the <strong>text alignment</strong> and the component <strong>colors</strong> as you wish. <br>
<br>
11. Test the menu by pressing Ctrl+Enter.<br>
<br>
12. Play with the effect parameters for different results. </p>
<P class="normal"> </P>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -