XML Menu

[Loyen_]

Hi all, just registered here cause I felt I needed some help with some actionscripting (Yes I am a noob but I'm ready to learn).

My teacher in Adobe Flash CS3 is so slow with the teaching (and some doesn't understand what the .alpha = 0; does in my class so he has to teach them and they just keep us at thesame level). We has just taught my class "trace" (that's hard.. lol ^^).


Anyways, my problem is this:

I've made a XML file which gets loaded into Flash and it gets my animation and adds the labels to the buttons, so far so good, but I am trying to make these buttons do stuff when clicked, like (website menu) if you press "contact" it will show "contact" and if you press "home" it will go to "home" etc.

As I said I'm a bit of a noob to AS3 (started to go through it in class 2weeks ago, but as I said he teachs very slow we are better off on ourselves) so I'm not that sure off how to do this. before starting to talk what I've tried I'll give out the code (it's done after one tutorial with some modifications). Tutorial is found here: http://tutorials.flashmymind.com/2009/02/creating-a-menu-via-xml/
(http://tutorials.flashmymind.com/2009/02/creating-a-menu-via-xml/)
*XML File:

<?xml version="1.0" encoding="UTF-8"?>
<menu>
<links xpos="30" ypos="50">
<link name="Home" href="home" />
<link name="Works" href="works" />
<link name="FAQ" href="faq" />
<link name="About" href="about" />
<link name="Contact" href="contact" />
</links>
</menu>*AS file:

package {
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.xml.*;
import flash.text.TextFieldAutoSize;
/**
* ...
* @ ...
*/
public class Main extends MovieClip {
public var xmlPath:String = "Menu.xml";// XML file
public var settingsXML:XML; // Holds data of the XML file
// Holds tweens so they don't get garbage collected
public var tweensArray:Array = new Array();
public var buttonTween:Tween; // Tweens for the buttons
public var loader = new URLLoader();

public var xpos:Number;
public var ypos:Number;

public function Main():void {
loader.load(new URLRequest(xmlPath)); // Loads xml file
// When xml file is loaded, start function xmlLoaded
loader.addEventListener(Event.COMPLETE, xmlLoaded);
}
public function xmlLoaded(e:Event):void {
// Makes you sure that you get values for the menu
if ((e.target as URLLoader) != null) {
settingsXML = new XML(loader.data);
settingsXML.ignoreWhitespace = true;

xpos = settingsXML.links.@xpos;
ypos = settingsXML.links.@ypos;

// Call function createMenu
createMenu();
}
}
public function createMenu():void {
// Represents a menu item
var menuItem:MenuItem;

var i:uint = 0;
// Makes a new button/xml list file
for each (var link:XML in settingsXML.links.link) {
menuItem = new MenuItem();
// Inserting menu labels
menuItem.menuLabel.text = link.@name;
// If label is longer than textfield, it will autosize
menuItem.menuLabel.autoSize = TextFieldAutoSize.LEFT;
// Insert menu buttons to stage
menuItem.x = xpos + i*110;
menuItem.y = ypos;
menuItem.alpha = 0.5;
// Makes menuItems seen as buttons
menuItem.buttonMode = true;
menuItem.mouseChildren = false;
// Add event listeners for the animations
menuItem.addEventListener(MouseEvent.MOUSE_OVER, mouse_Over);
menuItem.addEventListener(MouseEvent.MOUSE_OUT, mouse_Out);

addChild(menuItem);
// Tells how many menu buttons we have
i++;
}
}
public function mouse_Over(e:Event):void { // Menu button hoover effect
buttonTween = new Tween(e.target, "scaleX", Elastic.easeOut, 1, 1.05, 1, true);
buttonTween = new Tween(e.target, "alpha", Strong.easeOut, 1, .75, 1, true);

}
public function mouse_Out(e:Event):void { // Menu button hoover-off effect
buttonTween = new Tween(e.target, "scaleX", Elastic.easeOut, e.target.scaleX, 1, 1, true);
buttonTween = new Tween(e.target, "alpha", Elastic.easeOut, e.target.alpha, 0.5, 1, true);

}
}
}As you can see I've made a package of the actionscript (instead of writing it directly in Flash) and I've changed colours and such from the tutorial. ^^

So here's what I tried:
I added a variable named "href" as the type of "String" in the main section. Then I added the line "href = link.@href;" into the for loop in function "createMenu", then I added an event listener (under the MOUSE_OVER and MOUSE_OUT ones) that was a MouseEvent.MOUSE_DOWN. Then I added a function for it, and tried trace(href); but it only gave out the last inputed value for href from my XML file for every button.

How do I fix it? :3

[e_owen]

An effective way would be to add a new property called 'href' to MenuItem the MenuItem class which would then always be available. This is done in a similar way to getting the name and applying it to the text field.



menuItem.menuLabel.text = link.@name.toString();
menuItem.href = link.@href.toString();



function mouse_Over(event:MouseEvent):void
{
trace (event.currentTarget.href);
}

[Loyen_]

An effective way would be to add a new property called 'href' to MenuItem the MenuItem class which would then always be available. This is done in a similar way to getting the name and applying it to the text field.

ActionScript Code:

menuItem.menuLabel.text = link.@name.toString();
menuItem.href = link.@href.toString();



ActionScript Code:

function mouse_Over(event:MouseEvent):void
{
trace (event.currentTarget.href);
}



Thanks for the fast response, it works flawless. :3 Thanks, will write more if I need more help.

[Loyen_]

Got another problem now. Trying to make the content window tween when a button has been pressed (it should go out of screen). Now, this works, but when trying to make the content of that page change, not when pressed and goes out (just change before it comes back in) then it gives me errors. Here's the code:

package {
import flash.display.*;
import flash.events.*;
import fl.transitions.*;
import fl.transitions.easing.*;
import flash.net.*;
import flash.xml.*;
import flash.text.*;
/**
* ...
* @ ...
*/
public class Main extends MovieClip {
public var xmlPath:String = "Menu.xml";// XML file
public var settingsXML:XML; // Holds data of the XML file
// Holds tweens so they don't get garbage collected
public var tweensArray:Array = new Array();
public var buttonTween:Tween; // Tweens for the buttons
public var containerTween:Tween;
public var loader = new URLLoader();

public var container_x:Number = 141.6;

public var xpos:Number;
public var ypos:Number;
public var columns:Number;

public var x_counter:Number = 0;
public var y_counter:Number = 0;

public var xspace:Number;
public var yspace:Number;

public var menu_container:MovieClip;

public function Main():void {
loader.load(new URLRequest(xmlPath)); // Loads xml file
// When xml file is loaded, start function xmlLoaded
loader.addEventListener(Event.COMPLETE, xmlLoaded);
}
public function xmlLoaded(e:Event):void {
// Makes you sure that you get values for the menu
if ((e.target as URLLoader) != null) {
settingsXML = new XML(loader.data);
settingsXML.ignoreWhitespace = true;

xpos = settingsXML.links.@xpos;
ypos = settingsXML.links.@ypos;

columns = settingsXML.links.@columns;

xspace = settingsXML.links.@xspace;
yspace = settingsXML.links.@yspace;

menu_container = new MovieClip();
menu_container.x = xpos;
menu_container.y = ypos;
addChild(menu_container);
// Call function createMenu
createMenu();
}
}
public function createMenu():void {
// Represents a menu item
var menuItem:MenuItem;

var i:uint = 0;
// Makes a new button/xml list file
for each (var link:XML in settingsXML.links.link) {

menuItem = new MenuItem();
// Inserting menu labels
menuItem.menuLabel.text = link.@name.toString();
menuItem.href = link.@href.toString();
// If label is longer than textfield, it will autosize
menuItem.menuLabel.autoSize = TextFieldAutoSize.LEFT;
// Insert menu buttons to stage
menuItem.x = (xpos+xspace)*x_counter;
menuItem.y = (ypos+yspace)*y_counter;
menuItem.alpha = 0.5;

// Makes menuItems seen as buttons
menuItem.buttonMode = true;
menuItem.mouseChildren = false;
// Add event listeners for the animations
menuItem.addEventListener(MouseEvent.MOUSE_OVER, mouse_Over);
menuItem.addEventListener(MouseEvent.MOUSE_OUT, mouse_Out);
menuItem.addEventListener(MouseEvent.MOUSE_DOWN, mouse_Down);

menu_container.addChild(menuItem);
// Tells how many menu buttons we have
if(x_counter+1 < columns) {
x_counter++;
} else {
x_counter = 0;
y_counter++;
}
}
}
public function mouse_Over(e:Event):void { // Menu button hoover effect
buttonTween = new Tween(e.target, "scaleX", Elastic.easeOut, 1, 1.05, 1, true);
buttonTween = new Tween(e.target, "alpha", Strong.easeOut, 1, .75, 1, true);

}
public function mouse_Out(e:Event):void { // Menu button hoover-off effect
buttonTween = new Tween(e.target, "scaleX", Elastic.easeOut, e.target.scaleX, 1, 1, true);
buttonTween = new Tween(e.target, "alpha", Elastic.easeOut, e.target.alpha, 0.5, 1, true);
}
public function mouse_Down(e:Event):void {
trace(e.currentTarget.href);
containerTween = new Tween(container, "x", Elastic.easeIn, container_x, container.x = this.stage.stageWidth*1.2, 1, true);
containerTween.addEventListener(TweenEvent.MOTION_ FINISH, containerTweenDone);
}
public function containerTweenDone(e:Event):void {
// container.pressedpage.text = e.currentTarget.href;
// container.gotoAndStop(e.currentTarget.href);
containerTween = new Tween(container, "x", Elastic.easeIn, this.stage.stageWidth*-1.2, container_x, 1, true);
containerTween.removeEventListener(TweenEvent.MOTI ON_FINISH, containerTweenDone);
}
}
}
if you look at function "mouse_Down" you'll see that it traces after the href, right? this works, it prints it out, but! if you look at "containerTweenDone", you'll see I''ve commented out the two first lines. This are the lines that changes the content in the window. They work perfectly in "mouse_Down" but not at all in "containerTweenDone".

Any help? :)

[Loyen_]

Got it working, no problem. :3