Home Tutorials Forums Articles Blogs Movies Library Employment Press
Old 07-06-2012, 07:34 PM   #1
TeaCake
Registered User
 
Join Date: Jul 2012
Posts: 12
Default help with a dynamically loaded menu

So I have a menu with options that load dynamically from an XML file and that works pretty well. They've all got eventListeners attached for MouseOvers and that's good too. The place where I'm having an issue is I need to add a Click eventListener to each one that will load the appropriate content for that option. Each option should load the same page with variable content, according to the address specified for that option. I've got the addresses listed with each option inside the XML file, and I've pushed them into an array. I just can't wrap my head around how to get the options to reference them. Here's my code so far:

Code:
var blogData:XMLList;
var blogTotal:Number;

var entryTitle:String;

//Arrays
var entriesArray:Array = new Array();
var entryAddr:Array = new Array();

var blogListLoader: URLLoader = new URLLoader();
blogListLoader.load(new URLRequest("BlogEntries.xml"));
blogListLoader.addEventListener(Event.COMPLETE, loadBlogList);

function loadBlogList(e:Event):void
{
var blogList:XML = new XML(e.target.data);
blogData = blogList.ENTRY;
blogTotal = blogData.length();
}


function loadBlogEntries():void
{
//Load entriesArray
var yTmp:Number = 0;
for (var i:Number = 0; i < blogTotal; i++)
{
    var entryName = blogData[i].@TEXT;
    var entry:TextField = new TextField();
    entriesArray[i] = entry;
    entriesArray[i].textColor = 0x0DAC54;
    entriesArray[i].x = 0;
    entriesArray[i].y = yTmp;
    entriesArray[i].width = 1031;
    entriesArray[i].height = 90.30;
    entriesArray[i].embedFonts = true;
    entriesArray[i].antiAliasType = AntiAliasType.ADVANCED;
    entriesArray[i].defaultTextFormat = listformat;
    entriesArray[i].selectable = false;
    entriesArray[i].wordWrap = true;
    entriesArray[i].text = entryName;
    entriesArray[i].autoSize = TextFieldAutoSize.LEFT;
    entriesArray[i].addEventListener(MouseEvent.MOUSE_OVER , bEntryOvr);
    entriesArray[i].addEventListener(MouseEvent.CLICK , bEntryClick);
    BlogPage.blogEntriesPage.entryList.addChild(entriesArray[i]);
    yTmp = yTmp + 149;

    var Addr = blogData[i].@ADDR;
    entryAddr[i] = Addr;
}



}

function bEntryOvr(event:MouseEvent):void
{
event.target.backgroundColor = 0x0DAC54;
event.target.background = true;
event.target.textColor = 0x000000;
event.target.addEventListener(MouseEvent.MOUSE_OUT , bEntryOut);
}

function bEntryOut(event:MouseEvent):void
{
event.target.background = false;
event.target.textColor = 0x0DAC54;
event.target.removeEventListener(MouseEvent.MOUSE_OUT , bEntryOut);
}

function bEntryClick(event:MouseEvent):void
{
showPage = showBlogEntry;
flashup();
}
I don't imagine it's probably very hard, but it's currently blowing my mind. Any insights are appreciated.

Thanks, -T.
TeaCake is offline   Reply With Quote
Old 07-06-2012, 08:23 PM   #2
svenjoypro
DontJustEnjoyIt,SvEnjoyIt
 
svenjoypro's Avatar
 
Join Date: Sep 2005
Location: California
Posts: 1,389
Default

I'm sure there are other ways of doing this, but this should work for you. Most of Flash's built in classes (MovieClip, Sprite, TextField, etc) have an attribute "name" which you can use to store a symbol's name (obviously). The trick is to use that to your advantage. So for your code I would give each entriesArray[i] a name, like ea0, ea1, ea2, ea3, etc.

ActionScript Code:
... entriesArray[i].name = "ea"+i; // HERE entriesArray[i].addEventListener(MouseEvent.MOUSE_OVER , bEntryOvr); entriesArray[i].addEventListener(MouseEvent.CLICK , bEntryClick);

Then in your click listener get the name, strip off 'ea' and you're left with the array index.

ActionScript Code:
function bEntryClick(event:MouseEvent):void {    var i:int = int(String(event.target.name).substring(2));    //i now contains the array index of the clicked TextField    trace(entriesArray[i].text);    showPage = showBlogEntry;    flashup(); }

Hopefully this is what you're asking for.
svenjoypro is offline   Reply With Quote
Old 07-06-2012, 08:31 PM   #3
[afz]snickelfitz
Senior Member
 
[afz]snickelfitz's Avatar
 
Join Date: Dec 2011
Location: Tucson, AZ
Posts: 2,408
Default

Heres'a very basic set of classes that use an internal xml object (for clarity and simplicity; the downstream processes are the same for external XML)
The Btn class illustrates the use of setters and getters to assign and retrieve private instance properties as well as executing other code while doing so. (such as assigning a string to the textfield.text, resizing the button shape to fit the text, and repositioning the textfield.)

The links are assigned to an instance property of the button class, then retrieved in the click handler.

>

Create a new empty AS3 FLA; save to a folder on the desktop.
Paste the following code blocks into new AS3 class files, named as shown, and save them to the same directory as the FLA.
Set the Document class of the FLA to Main.
Compile the SWF.

Main.as
ActionScript Code:
package {     import flash.display.*;     import flash.events.*;         public class Main extends Sprite     {         private var xml:XML;         private var menu:Sprite;                 public function Main()         {             xml =             <site>                 <item title="Home" link="home.swf"/>                 <item title="About us" link="about.swf"/>                 <item title="Portfolio" link="porfolio.swf"/>                 <item title="Contact Us" link="contact.swf"/>                 <item title="Gallery" link="gallery.swf"/>             </site>                         menu = new Sprite();             var pad:Number = 2;             var bY:Number = 0;                         for each (var itm in xml.item)             {                 var b:Btn = new Btn();                 b.link = itm.@link;                 b.label = itm.@title;                 b.addEventListener(MouseEvent.CLICK, onClick, false, 0, true);                 b.x = 0;                 b.y = bY;                 menu.addChild(b);                                 bY = menu.height + pad;             }                         addChild(menu);         }                 private function onClick(e:MouseEvent):void         {             trace(e.target.link);         }     } }

Btn.as
ActionScript Code:
package {     import flash.display.*;     import flash.events.*;     import flash.text.*;         public class Btn extends Sprite     {         private var _link:String;         private var _label:String;         private var btnLabel:TextField;         private var btnBase:Shape;         private var labelText:String;                 public function Btn()         {             btnBase = new Shape();             var g:Graphics = btnBase.graphics;             g.beginFill(0xEEEEEE);             g.drawRect(0,0,120,30);             g.endFill();             addChild(btnBase);                         btnLabel = new TextField();             btnLabel.autoSize = TextFieldAutoSize.LEFT;             this.label = "default";             addChild(btnLabel);                         mouseChildren = false;             buttonMode = true;             addEventListener(MouseEvent.ROLL_OVER, onOver, false, 0, true);             addEventListener(MouseEvent.ROLL_OUT, onOut, false, 0, true);         }                 private function onOver(e:MouseEvent):void         {             labelText = _label;             this.label = "Click this button to trace its link!"             btnBase.alpha = .5         }                 private function onOut(e:MouseEvent):void         {             this.label = labelText;             btnBase.alpha = 1;         }                 public function set link(value:String):void         {             _link = value;         }                 public function get link():String         {             return _link;         }                 public function set label(value:String):void         {             _label = value;             btnLabel.text = _label;             btnBase.width = btnLabel.width + 20;             btnBase.height = btnLabel.height + 20;             btnLabel.x = btnBase.width/2 - btnLabel.width/2;             btnLabel.y = btnBase.height/2 - btnLabel.height/2;         }                 public function get label():String         {             return _label;         }     } }

Last edited by [afz]snickelfitz; 07-06-2012 at 08:40 PM.
[afz]snickelfitz is offline   Reply With Quote
Old 07-07-2012, 04:03 AM   #4
TeaCake
Registered User
 
Join Date: Jul 2012
Posts: 12
Default

Thanks guys! I ended up going with Svenjoy's solution as it was very quick to implement and did what I needed. I appreciate your answer as well Snickelfitz, but it's a little beyond the scope of what I can comprehend at this point. Looks nice though. I'm sure I'll revisit at some point.

Thanks!
TeaCake is offline   Reply With Quote
Reply


Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:34 AM.

///
Follow actionscriptorg on Twitter

 


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management plugin by RedTyger
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.