bahattab
13-06-2008, 12:47 PM
Dear Friend,
Hello & welcome back to Firewire, your friendly guide to the exciting world of web-design & web-solutions!
Adjusting more number of products / buttons on horizontal panel makes it congested. Using Flash MX Action Script a menu / product panel can be created where in products / buttons scrolls left to right or vise-a-versa based on movement of mouse pointer.
Click here (http://www.layoutgalaxy.com/html/news49free.zip) to download the source (.fla) file.
http://www.atyafonline.com/vb/imgcache/290.png 1. Create a new movie with Dimensions of 500px. X 100px. and fps = 24 with white color as Background Color
http://www.atyafonline.com/vb/imgcache/291.png
2. Save the flash file as 'scrollmenu.fla'
http://www.atyafonline.com/vb/imgcache/292.png
1. Select frame 1 on Layer 1 and rename it as 'Background'
2. With the help of 'Rectangle Tool' create a rectangle patch as background of the movie
http://www.atyafonline.com/vb/imgcache/293.png
http://www.atyafonline.com/vb/imgcache/294.png 1. Choose Insert > New Symbol
2. Create a Button and name it as 'button1'
http://www.atyafonline.com/vb/imgcache/295.png 3. Choose File > Import to import a button image. Here we have imported 'button.gif'
4. Rename the layer as 'Button'
http://www.atyafonline.com/vb/imgcache/296.png 5. Select frame 4 at 'Hit' stage
6. Choose Insert > Frame
7. Choose Insert > Layer and rename the layer as 'Button Name'
8. With the help of 'Text Tool' type the button name as 'About Us'
http://www.atyafonline.com/vb/imgcache/297.png 9. Select frame 2 (i.e. 'Over' stage) on Button Name layer and choose Insert > Keyframe
10. Select the About Us text on frame 2 and change the color of the text i.e. make it more darker to create a mouseover.
http://www.atyafonline.com/vb/imgcache/298.png
11. Similarly, create buttons for Products, Services, Clients, Portfolio, Contact Us and name it as button2, button3, button4, button5 and button6
http://www.atyafonline.com/vb/imgcache/299.png 1. Come back into Scene 1
2. Choose Insert > Layer to add a new layer above Background layer and name it as 'Buttons Menu'
3. Choose Window > Library > button1 (Button)
4. Select and drag the button1 on Buttons Menu layer
http://www.atyafonline.com/vb/imgcache/300.png
5. Select button1 and choose Insert > Convert to Symbol
6. Convert it into a Movie Clip with Center registration point selected and name it as 'menu'
http://www.atyafonline.com/vb/imgcache/301.png
7. Double click the menu movie clip to go inside it
8. Rename the existing layer as 'About Us'
9. Choose Insert > Layer to add a new layer and name it as 'Products'
10. Choose Window > Library > button2 (Button)
11. Select and drag the button2 on Products layer and place it next to About Us button i.e. button1
http://www.atyafonline.com/vb/imgcache/302.png
12. Similarly drag remaining buttons on different layers and place them in a line at equal distances. (The distance between two buttons should be 129.7)
http://www.atyafonline.com/vb/imgcache/303.png
http://www.atyafonline.com/vb/imgcache/304.png 1. Come back into Scene 1
2. Select the menu movie clip on the stage and choose Window > Properties to open the Properties panel
3. In the Properties panel type the Instance Name as 'menu'
http://www.atyafonline.com/vb/imgcache/305.png
4. In the Properties panel type X location of instance as '56' and Y location of instance as '50'
http://www.atyafonline.com/vb/imgcache/306.png 5. With the help of Left Arrow key on the keyboard move the menu movie clip to its left so that last four buttons appear on the stage i.e. Services, Clients, Portfolio, Contact Us
6. In the Properties panel check the X location of instance. It should be something near to -202 to -204. To be very precise it should be '-204'. Note down this X position as it will be used in Actionscript later on.
http://www.atyafonline.com/vb/imgcache/307.png
7. In the Properties panel type X location of instance as '56' to bring the menu to its original position
8. Choose Insert > Layer to add a new layer and name it as 'Mask'
9. With the help of 'Rectangle Tool' create a rectangle patch so that it covers first four buttons under it.
http://www.atyafonline.com/vb/imgcache/308.png
10. Select the Mask layer and right click (Command > Click for Mac) the mouse to select 'Mask' option
http://www.atyafonline.com/vb/imgcache/309.png
11. Choose Insert > Layer to add a new layer and name it as 'Actions'
12. Select frame 3 on Actions layer and choose Insert > Keyframe
13. Select the third keyframe on the Actions layer and choose Window > Actions
14. In the Actions panel type the following actions
mouseX = _xmouse; menuX = menu._x; if (mouseX > 280) { diff = (mouseX-280)/15; } if (mouseX < 220) { diff = (220-mouseX)/15; } if (mouseX <= 250 && menuX <= 56) { setProperty("menu", _x, menuX+diff); } if (mouseX >= 250 && menuX >= -204) { setProperty("menu", _x, menuX-diff); } if (menu._x >= 56) { menu._x = 56; } else if (menu._x <= -204) { menu._x = -204; } gotoAndPlay(2);
http://www.atyafonline.com/vb/imgcache/310.png
// mouseX = _xmouse;
The 'mouseX' variable stores the value of X position of the mouse
// menuX = menu._x;
The 'menuX' variable stores the value of X position of the menu movie clip
// if (mouseX > 280) { diff = (mouseX-280)/15; } This condition checks whether the value of mouseX is greater than 280. If it is true then it stores the value of the equation ((mouseX-280)/15) into a new variable called 'diff'
// if (mouseX < 220) { diff = (220-mouseX)/15; } This condition checks whether the value of mouseX is less than 220. If it is true then it stores the value of the equation ((220-mouseX)/15) into 'diff'
// if (mouseX <= 250 && menuX <= 56) { setProperty("menu", _x, menuX+diff); } This condition checks whether the value of mouseX is less than or equal to 250 as well as the value of menuX is less than or equal to 56. If this condition is true, then X position of the menu movie clip is set according to the value of equation (menuX+diff)
// if (mouseX >= 250 && menuX >= -204) { setProperty("menu", _x, menuX-diff); } This condition checks whether the value of mouseX is greater than or equal to 250 as well as the value of menuX is greater than or equal to -204. If the condition is true, then X position of the menu movie clip is set according to the value of equation (menuX-diff)
// if (menu._x >= 56) { menu._x = 56; } else if (menu._x <= -204) { menu._x = -204; } This condition checks whether the X position of menu movie clip is greater than or equal to 56. If it is true then the X position of the menu movie clip is set to 56. Else if the X position of the menu movie clip is less than or equal to -204, the X position of the menu movie clip is set to -204 // gotoAndPlay(2);
After reading all above actions in a sequence, the actionscript will read this action and then the actionscript will move to frame 2 and come again into frame 3 to read the above actions. Thus actions on frame 3 will be read repeatedly by the actionscript.
15. Select frame 3 on all other remaining layers and choose Insert > Frame
16. Choose Insert > Layer to add a new layer above Actions layer and name it as 'Outline'
17. With the help of 'Rectangle Tool' create a stage outline
18. Choose Control > Test Movie
Move the mouse in horizontal direction and check how the menu scrolls in other direction of the mouse.
Such kind of menu can be used for the web site as well as for presentations. You can replace the buttons with small thumbnails for presentation.
Regards,
Manoj Kotak.
The author is Director of Image Online Pvt. Ltd.
Developer of Layout Galaxy web site design templates for photoshop and Flash. (http://www.layoutgalaxy.com/index.php4)
http://www.layoutgalaxy.com/html/htmnewletter49-page1.htm
Hello & welcome back to Firewire, your friendly guide to the exciting world of web-design & web-solutions!
Adjusting more number of products / buttons on horizontal panel makes it congested. Using Flash MX Action Script a menu / product panel can be created where in products / buttons scrolls left to right or vise-a-versa based on movement of mouse pointer.
Click here (http://www.layoutgalaxy.com/html/news49free.zip) to download the source (.fla) file.
http://www.atyafonline.com/vb/imgcache/290.png 1. Create a new movie with Dimensions of 500px. X 100px. and fps = 24 with white color as Background Color
http://www.atyafonline.com/vb/imgcache/291.png
2. Save the flash file as 'scrollmenu.fla'
http://www.atyafonline.com/vb/imgcache/292.png
1. Select frame 1 on Layer 1 and rename it as 'Background'
2. With the help of 'Rectangle Tool' create a rectangle patch as background of the movie
http://www.atyafonline.com/vb/imgcache/293.png
http://www.atyafonline.com/vb/imgcache/294.png 1. Choose Insert > New Symbol
2. Create a Button and name it as 'button1'
http://www.atyafonline.com/vb/imgcache/295.png 3. Choose File > Import to import a button image. Here we have imported 'button.gif'
4. Rename the layer as 'Button'
http://www.atyafonline.com/vb/imgcache/296.png 5. Select frame 4 at 'Hit' stage
6. Choose Insert > Frame
7. Choose Insert > Layer and rename the layer as 'Button Name'
8. With the help of 'Text Tool' type the button name as 'About Us'
http://www.atyafonline.com/vb/imgcache/297.png 9. Select frame 2 (i.e. 'Over' stage) on Button Name layer and choose Insert > Keyframe
10. Select the About Us text on frame 2 and change the color of the text i.e. make it more darker to create a mouseover.
http://www.atyafonline.com/vb/imgcache/298.png
11. Similarly, create buttons for Products, Services, Clients, Portfolio, Contact Us and name it as button2, button3, button4, button5 and button6
http://www.atyafonline.com/vb/imgcache/299.png 1. Come back into Scene 1
2. Choose Insert > Layer to add a new layer above Background layer and name it as 'Buttons Menu'
3. Choose Window > Library > button1 (Button)
4. Select and drag the button1 on Buttons Menu layer
http://www.atyafonline.com/vb/imgcache/300.png
5. Select button1 and choose Insert > Convert to Symbol
6. Convert it into a Movie Clip with Center registration point selected and name it as 'menu'
http://www.atyafonline.com/vb/imgcache/301.png
7. Double click the menu movie clip to go inside it
8. Rename the existing layer as 'About Us'
9. Choose Insert > Layer to add a new layer and name it as 'Products'
10. Choose Window > Library > button2 (Button)
11. Select and drag the button2 on Products layer and place it next to About Us button i.e. button1
http://www.atyafonline.com/vb/imgcache/302.png
12. Similarly drag remaining buttons on different layers and place them in a line at equal distances. (The distance between two buttons should be 129.7)
http://www.atyafonline.com/vb/imgcache/303.png
http://www.atyafonline.com/vb/imgcache/304.png 1. Come back into Scene 1
2. Select the menu movie clip on the stage and choose Window > Properties to open the Properties panel
3. In the Properties panel type the Instance Name as 'menu'
http://www.atyafonline.com/vb/imgcache/305.png
4. In the Properties panel type X location of instance as '56' and Y location of instance as '50'
http://www.atyafonline.com/vb/imgcache/306.png 5. With the help of Left Arrow key on the keyboard move the menu movie clip to its left so that last four buttons appear on the stage i.e. Services, Clients, Portfolio, Contact Us
6. In the Properties panel check the X location of instance. It should be something near to -202 to -204. To be very precise it should be '-204'. Note down this X position as it will be used in Actionscript later on.
http://www.atyafonline.com/vb/imgcache/307.png
7. In the Properties panel type X location of instance as '56' to bring the menu to its original position
8. Choose Insert > Layer to add a new layer and name it as 'Mask'
9. With the help of 'Rectangle Tool' create a rectangle patch so that it covers first four buttons under it.
http://www.atyafonline.com/vb/imgcache/308.png
10. Select the Mask layer and right click (Command > Click for Mac) the mouse to select 'Mask' option
http://www.atyafonline.com/vb/imgcache/309.png
11. Choose Insert > Layer to add a new layer and name it as 'Actions'
12. Select frame 3 on Actions layer and choose Insert > Keyframe
13. Select the third keyframe on the Actions layer and choose Window > Actions
14. In the Actions panel type the following actions
mouseX = _xmouse; menuX = menu._x; if (mouseX > 280) { diff = (mouseX-280)/15; } if (mouseX < 220) { diff = (220-mouseX)/15; } if (mouseX <= 250 && menuX <= 56) { setProperty("menu", _x, menuX+diff); } if (mouseX >= 250 && menuX >= -204) { setProperty("menu", _x, menuX-diff); } if (menu._x >= 56) { menu._x = 56; } else if (menu._x <= -204) { menu._x = -204; } gotoAndPlay(2);
http://www.atyafonline.com/vb/imgcache/310.png
// mouseX = _xmouse;
The 'mouseX' variable stores the value of X position of the mouse
// menuX = menu._x;
The 'menuX' variable stores the value of X position of the menu movie clip
// if (mouseX > 280) { diff = (mouseX-280)/15; } This condition checks whether the value of mouseX is greater than 280. If it is true then it stores the value of the equation ((mouseX-280)/15) into a new variable called 'diff'
// if (mouseX < 220) { diff = (220-mouseX)/15; } This condition checks whether the value of mouseX is less than 220. If it is true then it stores the value of the equation ((220-mouseX)/15) into 'diff'
// if (mouseX <= 250 && menuX <= 56) { setProperty("menu", _x, menuX+diff); } This condition checks whether the value of mouseX is less than or equal to 250 as well as the value of menuX is less than or equal to 56. If this condition is true, then X position of the menu movie clip is set according to the value of equation (menuX+diff)
// if (mouseX >= 250 && menuX >= -204) { setProperty("menu", _x, menuX-diff); } This condition checks whether the value of mouseX is greater than or equal to 250 as well as the value of menuX is greater than or equal to -204. If the condition is true, then X position of the menu movie clip is set according to the value of equation (menuX-diff)
// if (menu._x >= 56) { menu._x = 56; } else if (menu._x <= -204) { menu._x = -204; } This condition checks whether the X position of menu movie clip is greater than or equal to 56. If it is true then the X position of the menu movie clip is set to 56. Else if the X position of the menu movie clip is less than or equal to -204, the X position of the menu movie clip is set to -204 // gotoAndPlay(2);
After reading all above actions in a sequence, the actionscript will read this action and then the actionscript will move to frame 2 and come again into frame 3 to read the above actions. Thus actions on frame 3 will be read repeatedly by the actionscript.
15. Select frame 3 on all other remaining layers and choose Insert > Frame
16. Choose Insert > Layer to add a new layer above Actions layer and name it as 'Outline'
17. With the help of 'Rectangle Tool' create a stage outline
18. Choose Control > Test Movie
Move the mouse in horizontal direction and check how the menu scrolls in other direction of the mouse.
Such kind of menu can be used for the web site as well as for presentations. You can replace the buttons with small thumbnails for presentation.
Regards,
Manoj Kotak.
The author is Director of Image Online Pvt. Ltd.
Developer of Layout Galaxy web site design templates for photoshop and Flash. (http://www.layoutgalaxy.com/index.php4)
http://www.layoutgalaxy.com/html/htmnewletter49-page1.htm