<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Free Flash Tutorials at FlashMint Tuts &#187; flash menu</title>
	<atom:link href="http://tuts.flashmint.com/tag/flash-menu/feed/" rel="self" type="application/rss+xml" />
	<link>http://tuts.flashmint.com</link>
	<description>Advanced Flash Tutorials and tips</description>
	<lastBuildDate>Wed, 17 Mar 2010 14:16:09 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Creating Flash Menu Tutorial</title>
		<link>http://tuts.flashmint.com/creating-flash-menu-tutorial/</link>
		<comments>http://tuts.flashmint.com/creating-flash-menu-tutorial/#comments</comments>
		<pubDate>Fri, 20 Nov 2009 14:37:22 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Flash Tutorials]]></category>
		<category><![CDATA[flash menu]]></category>

		<guid isPermaLink="false">http://tuts.flashmint.com/?p=108</guid>
		<description><![CDATA[Though website design is a prerogative of professionals, still there is a lot that anyone could do only if he knew how to. Making a menu for a flash website is one of these things. To make one you need to have a tool and to know the procedure. Your tool is Photoshop (mine is [...]]]></description>
			<content:encoded><![CDATA[<p>Though website design is a prerogative of professionals, still there is a lot that anyone could do only if he knew how to. Making a menu for a flash website is one of these things. To make one you need to have a tool and to know the procedure. Your tool is Photoshop (mine is CS3 version), and the procedure is described in every detail in the tutorial below. I tried to make it simple, so that even it is your first time using Photoshop, you don&#8217;t get startled. Each step has screenshots to make it even more clear. Just keep in mind, that if you have a different Photoshop version, the interface might differ slightly.</p>
<p>If you follow each of the listed steps carefully, as a result you will get a flash menu like this:</p>
<p><img class="alignnone" src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dgm4gh6p_100f3t39nf6_b.jpg" alt="" width="870" height="232" /></p>
<p><span id="more-108"></span></p>
<p><strong><span style="text-decoration: underline;">Step 1</span>: <em>creating a shape</em><br />
</strong><br />
Open your Photoshop and create a new document <strong>(Ctrl+N)</strong> with size 600&#215;300 pixels. Set a color for the background: black gives a good contrast, so you can use it unless your menu color is going to be black.<br />
Create a new layer <strong>(Ctrl+Shift+N)</strong> and select a<strong> Rounded Rectangle Tool </strong><strong>(U)</strong><strong>.</strong></p>
<p>In Rounded Rectangle Tool settings activate <strong>Shape Layers</strong> button and set <strong>Radius:8px</strong>.<br />
You can set a different radius value according to your taste, just take some time to experiment.</p>
<p>After you are done with Tool settings, draw a rectangle shape of the needed size (mine is 120x45px). Set the color. Mine is <strong>color:#25b6b1</strong>. To change the color click twice on the layer of your rectangle shape and pick the color you need from palette.</p>
<p><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dgm4gh6p_101hqd3w9dx_b.jpg" alt="" /></p>
<p><strong><span style="text-decoration: underline;">Step 2</span>: <em>adding gradient</em> </strong><br />
Select   <strong>Layer</strong> &gt; <strong>Layer Style </strong>&gt; <strong>Blending Option</strong><em>s</em> and set all the values like shown on the screenshot.  Select <strong>Gradient Overlay</strong> and place a tick in the box next to it.</p>
<p>To change the color click twice on the <strong>Gradient </strong>palette and you&#8217;ll see a color changing tool with four sliders (two on the top and two on the bottom). To set the color for each of the sliders you need to click twice on it. For two sliders on the bottom set <strong>Color:#00fff6. </strong></p>
<p>The sliders on the top change <strong>Opacity</strong> value. Make the right slider active and set <strong>Opacity:0.</strong></p>
<p><strong> </strong></p>
<p><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dgm4gh6p_103c7q4zjd9_b.jpg" alt="" /></p>
<p>When you are done with this, press <strong>OK</strong> and your button will look somewhat like this</p>
<p><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dgm4gh6p_105c7fq9rc7_b.jpg" alt="" /></p>
<p><strong><span style="text-decoration: underline;">Step 3</span>:<em> inner shadow</em> </strong><br />
Go to<strong> Layer </strong>&gt; <strong>Layer Style </strong>&gt; <strong>Blending Options</strong> and select<strong> Stroke</strong>. Set <strong>Size:1px</strong>, <strong>Position:Outside</strong>, <strong>Color:#02fbf2.</strong><br />
Then select <strong>Inner Shadow</strong> and set the <strong>Color:#003e39</strong>, <strong>Opacity:84%</strong>,<strong> Size:9px</strong>.</p>
<p>The result will look like:</p>
<p><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dgm4gh6p_107f5vc3rc7_b.jpg" alt="" /></p>
<p><strong><span style="text-decoration: underline;">Step 4</span>: <em>brush</em></strong><br />
Create a new layer <strong>(Ctrl+Shift+N)</strong> and select a <strong>Brush Tool (B)</strong>. Use a standard Airbrush. Set <strong>Color:#006965</strong>, <strong>Diameter:200px.</strong><strong><br />
</strong></p>
<ul>
<li>Click 2 or 3 times on the top of your button. The more times you click the more intense shadow you will get, so you need to watch for the best result.</li>
<li>Then do a <strong>Ctrl+click</strong> on your button layer in the <strong>Layers</strong> panel at the right side of your screen to highlight this layer.</li>
<li>After this you need to <strong>invert</strong> the highlighting by clicking <strong>Ctrl+Shift+</strong><strong>I. </strong>Now press <strong>Delete. </strong></li>
</ul>
<p><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dgm4gh6p_109g6n7gbgt_b.jpg" alt="" /></p>
<p><strong><span style="text-decoration: underline;">Step 5</span>: <em>transparency</em></strong><br />
Create a new layer <strong>(Ctrl+Shift+N)</strong>. Select a  <strong>Rounded Rectangle Tool </strong><strong>(U) </strong>with the same settings as the previous time. Draw a rectangle object (approximate <strong>Size: 115x25px</strong>, <strong>Color:#79fffa</strong>).<br />
Then click <strong>Add Layer Mask</strong> on your <strong>Layers</strong> panel.</p>
<p><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dgm4gh6p_110ccmxrxw2_b.jpg" alt="" /></p>
<p>Add <strong>Transparency</strong> to the layer using <strong>Gradient Tool (G)</strong>. Hold <strong>Shift</strong> and draw a vertical line of the gradient from the bottom the the top ( gradient <strong>Color: back+white</strong>). <strong></strong></p>
<p><strong> </strong></p>
<p><strong><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dgm4gh6p_111r24gw89_b.jpg" alt="" /></strong></p>
<p><strong><span style="text-decoration: underline;">Step 6</span>: <em>reflection</em></strong><br />
Select the layers with<strong> Shift </strong>button and put them into a folder (<strong>Ctrl+G</strong>) <strong></strong></p>
<p><strong> </strong></p>
<p><strong><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dgm4gh6p_112dnd44c4_b.jpg" alt="" /></strong></p>
<p>Then duplicate this Group by clicking with the right button if your mouse on it and selecting Duplicate Group.<br />
Then you need to <strong>unite</strong> all the layers into one layer. To do this you need to highlight this folder and press <strong>Ctrl+E.</strong><strong></strong></p>
<p><strong><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dgm4gh6p_113f69knsd8_b.jpg" alt="" /></strong></p>
<p><strong> </strong></p>
<p>To look better the button needs to have a reflection. To make a reflection you need to <strong>rotate</strong> your duplicate layer (<strong>Ctrl+T</strong>). Do a right-click on the object and select <strong>Rotate 180&#8242; </strong><strong></strong></p>
<p><strong> </strong></p>
<p><strong><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dgm4gh6p_114cx869qfn_b.jpg" alt="" /><br />
</strong><br />
Place the layer like shown on the screenshot.<br />
And, like before, <strong>Add layer mask</strong> and use the <strong>Gradient Tool</strong> (<strong>Color:transparent and black</strong>). Make your shadow look somewhat like on the screenshot by playing around with opacity. <strong></strong></p>
<p><strong> </strong></p>
<p><strong><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dgm4gh6p_115cksw43c9_b.jpg" alt="" /></strong></p>
<p><strong><span style="text-decoration: underline;">Step 7</span>: <em>text</em></strong><br />
Your button is ready, all you need to do is place a text of its <strong>name</strong>. Select <strong>Horizontal Type tool (T),</strong> click on the place where the text must be and type in your button name. Press <strong>Ctrl+Enter.</strong></p>
<p><strong> </strong></p>
<p>You can also add a shadow effect to the text by following <strong>Layer </strong>&gt; <strong>Layer Style </strong>&gt; <strong>Blending Options </strong>and select <strong>Drop Shadow</strong>. Set parameters about <strong>Opacity:33%</strong>, <strong>Size:5px</strong>, <strong>Color:#019b95.</strong></p>
<p><strong> </strong></p>
<p><strong><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dgm4gh6p_116fs8w92gp_b.jpg" alt="" /><br />
</strong><br />
To finish your flash menu you need to make copies of your button and place them next to each other. It&#8217;s done!</p>
<p><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dgm4gh6p_117jfdz2td3_b.jpg" alt="" /><br />
<strong><span style="text-decoration: underline;">Step 8</span>: <em>cutting parts for Flash animation</em></strong></p>
<p><strong> </strong></p>
<p>Recreating this neat menu in Flash will require 2 elements of the button: <strong>the button itself</strong> and <strong>the shadow</strong>. Let&#8217;s crop &amp; save them.</p>
<p>In the <strong>Layers</strong> section hide all button groups and leave only one button. Hide its shadow and its text. Then use the <strong>Crop Tool</strong> to crop the button. My crop size was about 132*49. And don&#8217;t forget to hide the black background layer. Save the resulting button picture using <strong>File &gt; Save for Web &amp; Devices &gt; Preset : PNG-24 &gt; Save</strong> I have saved it as <strong>bg_button2.png</strong></p>
<p><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dhbfv849_38hs4w5scc_b.jpg" alt="" width="330" height="265" /></p>
<p>Then you need to perform exactly the same steps for <strong>the reflection</strong> of the button. So basically you need to have 2 <strong>.png</strong> files before we move on to <strong>Flash</strong> animation: <strong>bg_button.png</strong> and <strong>reflection.png</strong></p>
<p><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dhbfv849_39g9c3vqd8_b.jpg" alt="" /></p>
<p><strong><span style="text-decoration: underline;">Step 9</span>: <em>first steps in Flash (importing files &amp; inserting layers)</em></strong></p>
<p><strong><em> </em></strong></p>
<p>Open <strong>Adobe Flash CS3</strong> and create a new <strong>Flash File (ActionScript 2)</strong> document. You will need to import 2 image files to library : <strong>bg_button.png</strong> and <strong>reflection.png</strong>. This can be done either by using <strong>File &gt; Import &gt; Import to library</strong> or you can simply <strong>drag&#8217;n'drop</strong> files into the library window.<br />
<strong><br />
</strong><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dhbfv849_40hdn6rsp6_b.jpg" alt="" /></p>
<p><img alt="" /><br />
Drag-n-drop <strong>bg_button.png</strong> to the workspace and convert this object to a <strong>Movie Clip</strong>. This can be done by <strong>Rightclick</strong> <strong>&gt; Convert To Symbol &gt; Movie Clip</strong> or you can simply highlight it with <strong>Selection Tool</strong> (black arrow) and press <strong>F8</strong>. Let&#8217;s name this movie clip &#8220;<strong>whole button</strong>&#8220;.</p>
<p><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dhbfv849_41dck6s9d5_b.jpg" alt="" width="476" height="205" /></p>
<p>After the movie clip is created <strong>doubleclick</strong> on the button image to enter it. You will see that in the address bar <strong>&#8220;whole button&#8221;</strong> movie clip appeared right after the &#8220;<strong>Scene 1</strong>&#8220;. Now we will need to create movie clips for each of the objects of the <strong>&#8220;whole button&#8221;</strong>, there are 3 of them: <strong>button itself</strong>, <strong>reflection</strong> and <strong>text</strong>. Each movie clip should have its own layer and we will need to create 2 more layers called <strong>&#8220;action&#8221;</strong> and <strong>&#8220;button area&#8221;</strong>. Thus I have created 5 total layers with the names: <strong>button, reflection, text, action, button area.<br />
</strong></p>
<p><strong><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dhbfv849_42hzs7qd8_b.jpg" alt="" /></strong></p>
<p><strong><strong><span style="text-decoration: underline;">Step 10</span>: <em>creating Movie Clips</em></strong></strong></p>
<p><strong> </strong></p>
<p>Please pay attention that &#8220;<strong>Layer 1&#8243;</strong> was renamed to &#8220;<strong>button&#8221;</strong> and it still contains the picture of a button. Let&#8217;s select this picture and <strong>convert it to a movie</strong> by pressing <strong>F8</strong>. I have named it &#8220;<strong>mc_button_back</strong>&#8221; and it is under the <strong>&#8220;button&#8221;</strong> layer. Now you will need to select &#8220;<strong>reflection</strong>&#8221; layer, drag-n-drop <strong>reflection.png</strong> from library right under the button (you can use arrow keys to move it more precisely). After this is done press <strong>F8</strong> and <strong>convert it to movie</strong> as well. I have named it &#8220;<strong>mc_reflection</strong>&#8220;. The next step is to add some text to a button.  Choose the &#8220;<strong>text</strong>&#8221; layer, select <strong>Text Tool</strong> and insert some text on the button. You can easily edit the text style by referring to <strong>Properties menu</strong>.</p>
<p><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dhbfv849_432t8p78f2_b.jpg" alt="" /><br />
After setting this up convert the text to <strong>Movie clip</strong> by pressing <strong>F8</strong>. I have named it <strong>&#8220;mc_text&#8221;.</strong> This way we have all our button parts in places and your library should look like this:</p>
<p><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dhbfv849_44fp6d8fd8_b.jpg" alt="" /><br />
<strong><strong><strong><span style="text-decoration: underline;">Step 11</span>: <em>using Timeline &amp; setting an amplitude</em></strong></strong></strong></p>
<p><strong><strong><strong><em> </em></strong></strong></strong></p>
<p>The next step will be to make the button jump and return while hanging a mouse cursor over it. For this purpose we will need to use the <strong>Timeline</strong>.  Let&#8217;s have <strong>10 frames</strong> for button to jump <strong>up </strong>and another <strong>10 frames</strong> to go back <strong>down</strong>. Highlight the first frames of <strong>text</strong>, <strong>reflection</strong> and <strong>button </strong>layers. Press <strong>Alt</strong> and holding it <strong>drag</strong> them to the <strong>10th</strong> frame of the Timeline and release the mouse button. This will copy the frames. Repeat the procedure and copy those three frames further to the <strong>20th</strong> frame.</p>
<p><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dhbfv849_45c9mqphgp_b.jpg" alt="" /></p>
<p>The next step will be to define the <strong>amplitude</strong> assigned to button jumping action. Highlight the 10th frame under the &#8220;<strong>button</strong>&#8221; layer. Be sure that you are using the <strong>Selection Tool</strong>, and define the position of a button in its highest point. Then go to &#8220;<strong>reflection</strong>&#8221; layer and move the reflection a little down, using the down arrow or moving it with the <strong>Selection Tool</strong>. And absolutely the same way fit the text to a button that has jumped up. Now we should have a nice button that is flying above the ground and the reflection slightly moved down.</p>
<p><strong><strong><strong><span style="text-decoration: underline;">Step 12</span>: <em>defining actions<br />
</em></strong></strong></strong></p>
<p>Highlight the &#8220;<strong>action</strong>&#8221; layer. Click on the very first frame and <strong>insert a keyframe</strong>. This can be done by pressing <strong>F6</strong>, or <strong>rightclick &gt; Insert keyframe, </strong>or in the manu above go<strong> Insert </strong><strong>&gt; Timeline &gt; Keyframe</strong>. Then highlight the <strong>10th</strong> frame and press <strong>F6. </strong>Do the same for <strong>20th </strong>frame. Then insert <strong>keyframes</strong> for the <strong>2nd</strong> and <strong>11th</strong> frames. You will have something like this:</p>
<p><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dhbfv849_46dwhqdhpp_b.jpg" alt="" /></p>
<p>Now we will have to define some <strong>keywords</strong> for our action script to refer to. Let&#8217;s <strong>insert an action</strong> to the <strong>1st</strong> and <strong>10th</strong> keyframe of the &#8220;<strong>action</strong>&#8221; layer. This can be done by highlighting a keyframe and pressing <strong>F9</strong>, or you can use <strong>right click</strong> and choose <strong>action</strong> from the dropdown menu. What you need to type in the appeared window is just:  <strong>stop();<br />
</strong></p>
<p><strong><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dhbfv849_47dbwb4mdz_b.jpg" alt="" /></strong></p>
<p><strong> </strong></p>
<p>Don&#8217;t forget to do the same for the <strong>10th</strong> keyframe! Ok. We are almost done with the <strong>&#8220;action&#8221;</strong> layer. Let&#8217;s define the frame names of the <strong>2nd</strong> and <strong>11th</strong> frames. This is done by highlighting a frame and looking down at the <strong>Properties menu</strong>. Name the <strong>2nd</strong> frame &#8220;<strong>over</strong>&#8221; and the <strong>11th</strong> &#8220;<strong>out</strong>&#8220;.<br />
<img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dhbfv849_48d5z4shg6_b.jpg" alt="" /><br />
<strong><strong><strong><span style="text-decoration: underline;">Step 13</span>: <em>creating a button</em></strong></strong></strong></p>
<p><strong><strong><strong><em> </em></strong></strong></strong></p>
<p>Now let&#8217;s finish with automatization. Highlight the &#8220;<strong>button area</strong>&#8221; layer and chose the <strong>Rectangle Tool</strong>. We will need to create a rectangular which will cover our button. (if it does not let you, ensure that you have at least one <strong>frame</strong> in the &#8220;<strong>button</strong>&#8221; layer) Then convert the rectangular to a <strong>Button. </strong>I have named it &#8220;<strong>button action</strong>&#8221;</p>
<p><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dhbfv849_49gz6mbr5z_b.jpg" alt="" /><br />
Now <strong>double click</strong> it and you will go inside the button. Under <strong>Layer 1</strong> hold the first frame with your mouse left button and drag it till the <strong>Hit</strong> column.</p>
<p><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dhbfv849_50g2vfs2tt_b.jpg" alt="" /></p>
<p>To get out of the editing this action you can click somewhere outside the grey rectangle or click the &#8220;<strong>whole button</strong>&#8221; in the navigation bar.<br />
<strong><strong><strong><span style="text-decoration: underline;">Step 14</span>: <em>Setting up animation</em></strong></strong></strong></p>
<p>Now when you can see that your button is <strong>blurred</strong>. It&#8217;s ok. Next we will need to insert some code into this button area to have it working. Press <strong>F9</strong> while having our blurred rectangular chosen and insert the next into the action window:</p>
<p><strong>on(rollOver)</strong></p>
<p><strong>{</strong></p>
<p><strong> gotoAndPlay(&#8220;over&#8221;);</strong></p>
<p><strong>}</strong></p>
<p><strong>on(rollOut)</strong></p>
<p><strong>{</strong></p>
<p><strong> gotoAndPlay(&#8220;out&#8221;);</strong></p>
<p><strong>}</strong><br />
<img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dhbfv849_51cf834gd4_b.jpg" alt="" /></p>
<p>Now we wiil need to define the action itself. Highlight some part of the timeframe for <strong>3</strong> of our objects so that <strong>10th</strong> frame was in the center of the selection. Go down to <strong>Properties</strong> and choose the <strong>Motion</strong> setting for <strong>Tween.</strong><br />
<img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dhbfv849_52ds9zqxcr_b.jpg" alt="" /><strong><strong><strong><span style="text-decoration: underline;"><br />
Step 15</span>: <em>Setting up the framerate and spreading the button area</em></strong></strong></strong></p>
<p><strong><strong><strong><em> </em></strong></strong></strong></p>
<p>The next step will be to set <strong>framerate</strong> to have or button jump faster. This is done by <strong>double clicking</strong> the current frame number.  Use 31 frames per second.<br />
<img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dhbfv849_53dxz9r7sk_b.jpg" alt="" /><br />
And the last thing that needs to be done for button to work &#8211; we must spread the &#8220;<strong>button area</strong>&#8221; layer from <strong>1st</strong> to <strong>20th</strong> frame. You can just click on <strong>20th</strong> frame and press <strong>F5</strong> for it to be done.</p>
<p><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dhbfv849_54cf2cfxds_b.jpg" alt="" /><br />
Our &#8220;<strong>whole button</strong>&#8221; is ready now! Congrats!  You can get out of the button by double clicking outside of it, or pressing <strong>Scene 1</strong>. You can press <strong>Ctrl</strong> + <strong>Enter</strong> to see how well it jumps!</p>
<p><strong><strong><strong><span style="text-decoration: underline;">Step 16</span>: <em>Some more tips</em></strong></strong></strong></p>
<p>Still there are <strong>some tricks</strong> we can do about it. I&#8217;ll show you some of them:</p>
<p>When highlighting the frames area for 3 objects you can set the <strong>Ease</strong> parameter for the button to go smoother. Set it to <strong>100</strong> and see the result!</p>
<p><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dhbfv849_55gjr33kgn_b.jpg" alt="" /><br />
And to have our button animation even more sophisticated we can make the text change its color. For this purpose you will need to refer to the <strong>10th</strong> frame of the &#8220;<strong>text</strong>&#8221; layer. Select the text with the <strong>Selection Tool</strong> and go down to the <strong>Properties</strong> section. In the <strong>Color</strong> drop-down box choose <strong>Tint</strong> and assign black color to the text.</p>
<p><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dhbfv849_56f5d75ddc_b.jpg" alt="" /></p>
<p><strong><strong><strong><span style="text-decoration: underline;">Step 17</span>: compiling the whole flash menu</strong></strong></strong></p>
<p>At last we have our button ready! Now we need to <strong>clone</strong> it and compile the whole menu! Let&#8217;s <strong>duplicate</strong> our home button <strong>movie clip</strong> to make a separate movie clip for each button.</p>
<p><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dhbfv849_57fp4c5wfn_b.jpg" alt="" /></p>
<p>Then ensure that your current place is <strong>Scene 1</strong>, not the &#8220;<strong>whole button&#8221;</strong> and <strong>drag-n-drop</strong> newly created buttons to have the full flash menu. After this we will need to have a separate text movie for each button. You already know how to do this. Just delete the original one from each button, and create its own movie clip for each button.</p>
<p>Your <strong>Flash Menu</strong> is now <strong>complete</strong>. Now you can add another layer at <strong>Scene 1</strong> and draw a big black rectangle for background and our menu is done!</p>
<p><img src="http://tuts.flashmint.com/wp-content/uploads/flashmenu/dhbfv849_58fv894rnk_b.jpg" alt="" /></p>
<p>Here you can check the live DEMO of our COOL flash menu:</p>
<p><object width="550" height="400" data="http://tuts.flashmint.com/wp-content/uploads/main.swf" type="application/x-shockwave-flash"><param name="src" value="http://tuts.flashmint.com/wp-content/uploads/main.swf" /><param name="quality" value="high" /></object></p>
<div id="fb-like" style=""><iframe src="http://www.facebook.com/plugins/like.php?href=http://tuts.flashmint.com/creating-flash-menu-tutorial/&amp;layout=button_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;font=&amp;colorscheme=light&amp;locale=en_US" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:50px; height:25px"></iframe></div>]]></content:encoded>
			<wfw:commentRss>http://tuts.flashmint.com/creating-flash-menu-tutorial/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

