Check the preview for the Free 3D Image Zoom Menu XML AS3:

Features

• XML configuration file easy to setup
• Dynamic image mirror & roll over image coloring
• Mouse/keys camera movement speed adjustment
• Support for external URLs and browser window resize
• Optionally set the main XML configuration file path in HTML using FlashVars

Download file from here

License

You are free to use the flash 3d zoom menu files in any project personal / commercial as long as you not redistribute / resell the functionality provided with the downloaded product without the author’s written permission. You may modify its content in case you want to use the product for a custom project.

Take a look at the example below:

Menu Features

• XML configuration file easy to setup
• Dynamic image mirror
• Roll over image coloring
• Roll over image zooming
• Mouse speed adjustment
• External URLs support
• Image titles support
• Optionally set the XML configuration file path in HTML using FlashVars

If you want to learn more about how Lightbox was used and download the example files follow this tutorial. You are free to use the files inside the 2DZoomMenuLightbox.zip in any project personal / commercial as long as you don’t try to hide Flashtuning logo located in the top left corner of the flash movie. If you don’t want to have the logo, you must purchase the commercial package that is available on Flashtuning.net.

Here is what we’ll end up with:

1. Open up Flash and create a new ActionScript 3.0 file.

2. Create a new MovieClip (Insert->New Symbol). I named it “about”. Draw a rounded rectangle (I put 10 for the roundness) and create a TextField for the button’s name.(I typed ABOUT). Check the image bellow.

3. For the other two menu items duplicate the about MovieClip(right click on it in the library – Duplicate). Drag each buttons on the stage, align them and give each an instance name. (about, work, contact)

4. Open the Actions tab and import this classes.

import flash.filters.BitmapFilterQuality;
import flash.filters.GlowFilter;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

5. We’ll make each MovieClip to behave like a button. The aux1 variable is used on the mouseOverHandler to know witch item must have the glow effect. Attach for each button the mouse handler functions for rollOver and rollOut.

var aux1;

about.mouseChildren = false;
about.buttonMode = true;
about.useHandCursor = true;

work.mouseChildren = false;
work.buttonMode = true;
work.useHandCursor = true;

contact.mouseChildren = false;
contact.buttonMode = true;
contact.useHandCursor = true;

about.addEventListener("mouseOver", mouseOverHandler);
about.addEventListener("mouseOut", mouseOutHandler);
work.addEventListener("mouseOver", mouseOverHandler);
work.addEventListener("mouseOut", mouseOutHandler);
contact.addEventListener("mouseOver", mouseOverHandler);
contact.addEventListener("mouseOut", mouseOutHandler);

6. Create the glow filters and attach them for each button.

var aboutGlow:GlowFilter = new GlowFilter(0xD13083, 1, 2, 2, 2, 3, false, false);
var workGlow:GlowFilter = new GlowFilter(0xD13083, 1, 2, 2, 2, 3, false, false);
var contactGlow:GlowFilter = new GlowFilter(0xD13083, 1, 2, 2, 2, 3, false, false);

var aboutGlowX:Tween = new Tween(aboutGlow, "blurX", Regular.easeOut, 2, 2, 1, true);
var aboutGlowY:Tween = new Tween(aboutGlow, "blurY", Regular.easeOut, 2, 2, 1, true);
var workGlowX:Tween = new Tween(workGlow, "blurX", Regular.easeOut, 2, 2, 1, true);
var workGlowY:Tween = new Tween(workGlow, "blurY", Regular.easeOut, 2, 2, 1, true);
var contactGlowX:Tween = new Tween(contactGlow, "blurX", Regular.easeOut, 2, 2, 1, true);
var contactGlowY:Tween = new Tween(contactGlow, "blurY", Regular.easeOut, 2, 2, 1, true);

aboutGlowX.addEventListener("motionChange", aboutFunc);
workGlowX.addEventListener("motionChange", workFunc);
contactGlowX.addEventListener("motionChange", contactFunc);

function aboutFunc(e:TweenEvent) {
	about.filters = [aboutGlow];
}
function workFunc(e:TweenEvent) {
	work.filters = [workGlow];
}
function contactFunc(e:TweenEvent) {
	contact.filters = [contactGlow];
}

7. The mouse handler functions for rollOver and rollOut.

function mouseOverHandler(e:MouseEvent):void {
	aux1 = e.target.name;
	switch (aux1) {
		case "about" :
			{
				aboutGlowX.continueTo(10, 0.5);
				aboutGlowY.continueTo(10, 0.5);
				break;

			};
		case "work" :
			{
				workGlowX.continueTo(10, 0.5);
				workGlowY.continueTo(10, 0.5);
				break;

			};
		case "contact" :
			{
				contactGlowX.continueTo(10,  0.5);
				contactGlowY.continueTo(10,  0.5);
				break;

		}
	}
};
function mouseOutHandler(e:MouseEvent):void {
	aboutGlowX.continueTo(2, 1);
	aboutGlowY.continueTo(2, 1);
	workGlowX.continueTo(2, 1);
	workGlowY.continueTo(2, 1);
	contactGlowX.continueTo(2, 1);
	contactGlowY.continueTo(2, 1);

}

8. All code:

import flash.filters.BitmapFilterQuality;
import flash.filters.GlowFilter;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

var aux1;

about.mouseChildren = false;
about.buttonMode = true;
about.useHandCursor = true;

work.mouseChildren = false;
work.buttonMode = true;
work.useHandCursor = true;

contact.mouseChildren = false;
contact.buttonMode = true;
contact.useHandCursor = true;

about.addEventListener("mouseOver", mouseOverHandler);
about.addEventListener("mouseOut", mouseOutHandler);
work.addEventListener("mouseOver", mouseOverHandler);
work.addEventListener("mouseOut", mouseOutHandler);
contact.addEventListener("mouseOver", mouseOverHandler);
contact.addEventListener("mouseOut", mouseOutHandler);

var aboutGlow:GlowFilter = new GlowFilter(0xD13083, 1, 2, 2, 2, 3, false, false);
var workGlow:GlowFilter = new GlowFilter(0xD13083, 1, 2, 2, 2, 3, false, false);
var contactGlow:GlowFilter = new GlowFilter(0xD13083, 1, 2, 2, 2, 3, false, false);

var aboutGlowX:Tween = new Tween(aboutGlow, "blurX", Regular.easeOut, 2, 2, 1, true);
var aboutGlowY:Tween = new Tween(aboutGlow, "blurY", Regular.easeOut, 2, 2, 1, true);
var workGlowX:Tween = new Tween(workGlow, "blurX", Regular.easeOut, 2, 2, 1, true);
var workGlowY:Tween = new Tween(workGlow, "blurY", Regular.easeOut, 2, 2, 1, true);
var contactGlowX:Tween = new Tween(contactGlow, "blurX", Regular.easeOut, 2, 2, 1, true);
var contactGlowY:Tween = new Tween(contactGlow, "blurY", Regular.easeOut, 2, 2, 1, true);

aboutGlowX.addEventListener("motionChange", aboutFunc);
workGlowX.addEventListener("motionChange", workFunc);
contactGlowX.addEventListener("motionChange", contactFunc);

function aboutFunc(e:TweenEvent) {
	about.filters = [aboutGlow];
}
function workFunc(e:TweenEvent) {
	work.filters = [workGlow];
}
function contactFunc(e:TweenEvent) {
	contact.filters = [contactGlow];
}
function mouseOverHandler(e:MouseEvent):void {
	aux1 = e.target.name;
	switch (aux1) {
		case "about" :
			{
				aboutGlowX.continueTo(10, 0.5);
				aboutGlowY.continueTo(10, 0.5);
				break;

			};
		case "work" :
			{
				workGlowX.continueTo(10, 0.5);
				workGlowY.continueTo(10, 0.5);
				break;

			};
		case "contact" :
			{
				contactGlowX.continueTo(10,  0.5);
				contactGlowY.continueTo(10,  0.5);
				break;

		}
	}
};
function mouseOutHandler(e:MouseEvent):void {
	aboutGlowX.continueTo(2, 1);
	aboutGlowY.continueTo(2, 1);
	workGlowX.continueTo(2, 1);
	workGlowY.continueTo(2, 1);
	contactGlowX.continueTo(2, 1);
	contactGlowY.continueTo(2, 1);

}

Here is what we’ll end up with:

1. Open up Flash and create a new ActionScript 3.0 file.

2. Create a new MovieClip (Insert->New Symbol). I named it “mainButton”. Check the “Export for Actionscript” box. We will use this generic button to create the other buttons using Actionscript.

3.a Now inside the MovieClip we will create the button elements. Select the Text Tool and type “Home”. You can change it to whatever you like. Give it an instance name – “txt1″. Also don’t forget to embed the font because we will use it for animation. See the image below for other properties.

3.b Create a new layer and draw a rectangle. I gave it a radial gradient and here are the other values: width: 100 ; height: 1.8 ; x: -50; y: 10;

3.c Create another layer. Draw another rectangle and copy the “Home” TextField and paste it in this layer you created. Change the instance name with “txt2″. Select both the rectangle and the TextField and press F8 to create another MovieClip with them. Name it “txtButtom”. Also give it an instance name “txtButtom”. See the images below for reference.

3.d Now we will create a layer mask. Make a new layer and move it to the top. Here you will draw a rectangle(see the images below for reference, the red rectangle is the mask) and after that right click on the layer and select “Mask”. Move the other layers according to the image below. The last layer is the hit area, copy the rectangle from the mask layer and paste it here and set the Alpha property for the rectangle to 0.

4.a Now we’ll move to the Actionscript. Get out from the “mainButton”. In the first layer of the scene, open up the Actions tab. We’ll import the transitions libraries and create instances of the “mainButton”.

import fl.transitions.easing.*;
import fl.transitions.*;

var home = new mainButton();
this.addChild(home);

home.x= 80;
home.y=40;

var portfolio = new mainButton();
this.addChild(portfolio);

portfolio.txt1.text = "PORTFOLIO";
portfolio.txtButtom.txt2.text = "PORTFOLIO";
portfolio.x= home.x + home.width;
portfolio.y=home.y;

var contact = new mainButton();
this.addChild(contact);

contact.txt1.text = "CONTACT";
contact.txtButtom.txt2.text = "CONTACT";
contact.x= portfolio.x + portfolio.width;
contact.y=home.y;

4.b We’ll add button properties and listenes to the instances for RollOver and RollOut.

home.buttonMode = true;
home.useHandCursor = true;
home.mouseChildren = false;

portfolio.buttonMode = true;
portfolio.useHandCursor = true;
portfolio.mouseChildren = false;

contact.buttonMode = true;
contact.useHandCursor = true;
contact.mouseChildren = false;

home.addEventListener("mouseOver", mouseRollOver);
portfolio.addEventListener("mouseOver", mouseRollOver);
contact.addEventListener("mouseOver", mouseRollOver);

home.addEventListener("mouseOut", mouseRollOut);
portfolio.addEventListener("mouseOut", mouseRollOut);
contact.addEventListener("mouseOut", mouseRollOut);

4.c And finally create the mouseRollOver and mouseRollOut functions.

function mouseRollOver(e:MouseEvent) {

	var easingFunc = Back.easeOut;
	var xsa = 30;
	var xfa =-5;
	var duration =0.5;
	var myTween:Tween = new Tween(e.target.txtButtom, "y", easingFunc, xsa, xfa, duration, true);

	var easingFunc2 = Regular.easeOut;
	var xsa2 = -16.3;
	var xfa2 = -46;
	var duration2 =0.5;
	var myTween2:Tween = new Tween(e.target.txt1, "y", easingFunc2, xsa2, xfa2, duration2, true);

}

function mouseRollOut(e:MouseEvent) {

	var easingFunc3 = Regular.easeOut;
	var xsa3 = -5;
	var xfa3 =30;
	var duration3 = 0.5;
	new Tween(e.target.txtButtom, "y", easingFunc3, xsa3, xfa3, duration3, true);

	var easingFunc4 = Regular.easeOut;
	var xsa4 = -46;
	var xfa4 = -16.3;
	var duration4 = 0.5;
	new Tween(e.target.txt1, "y", easingFunc4, xsa4, xfa4, duration4, true);
}

5. Enjoy and experiment with other tweening effects. Download the source file.

As a flash lover, I enjoy the animated flash menus because they are interactive and eye-catching. So I decide to share with you 20 navigation menus that caught my attention on FlashComponents.net. Hope they inspire you and if you got a flash menu that you like, share with us.

1. Dock Menu XML 3.0
Mac OS X Style Dock Menu.

2. XML Tweened Menu
File is prepared for HTML and Flash use (FlashVars and drag&drop). All settings can be changed via XML (slider colors, radius, position, text colors, tweens)

3. Sliding Accordion XML Menu
Sliding XML Menu with accordion effect.

4. Curve Menu CS
CurveMenu CS is a component which can help designer or developer to add a unique curved menu in their Flash website. It is a navigation menu with perfect sliding effect and unique touch control.

5. Two Level Menu

6. Blur Scale XML Menu
Scaling & blurring horizontal menu with XML.

7. Drop Down Tree Menu
The Drop Down Tree Menu V3 is a flash component designed to help you load a tree menu structure in a drop-down fashion.

8. Tsunami Text Menu

9. 3D Image Zoom Menu XML
3D XML driven menu with perspective ,depth, items zooming and coloring.

10. H-Menu

11. Elastic Menu
Very easy to set up, that component will generate a horizontal or vertical menu with your own designed buttons. You can set few parameters, and you are good to go!

12. Xml Tree Menu

13. XML Sliding Menu 2

14. XML Accordion Icon Menu
The XML Accordion Icon Menu displays images in a vertical menu that opens like an accordion. Icons, titles, URL, and themes, are defined in an external XML file.

15. Ultra XML Menu
You can adjust button colors, font, tween type, speed, sliding direction, align.

16. 3D Image Rotator Carousel XML
Easy to adjust parameters for fading effects, perspective manipulation, keyboard and/or mouse enabled movements and rotation to setup your desired 3D Carousel in minutes.

17. Horizontal Dynamic Neon Menu

18. XML Bounce Up Menu

19. Cool Horizontal Menu

20. Elastic Flash Menu