Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation Flash file/movie reading an XML to create a Menu

    Hi

    I have a flash file that reads an xml file to generate the menus. However the menu is coming out like a horizontal menu where as i want it vertical one below the other.

    The flash file is main.fla:-

    Code:
    // set stage settings
    
    var fileStage:Stage=this.stage;
    fileStage.scaleMode=StageScaleMode.NO_SCALE;
    fileStage.align=StageAlign.TOP_LEFT;
    
    // import caurina tweener
    
    import caurina.transitions.Tweener;
    
    // main timeline object
    
    var index:Object=this;
    
    // New Xml Object
    
    var fileXml:XML;
    
    // check how many menu items we have.
    
    var totalMenuItems:Number;
    
    // prevents null errors
    
    var firstLoad:Boolean = true;
    
    // New URL Request - Add a complete event listener to load the site once the load has been completed.
    
    var xmlLoader:URLLoader = new URLLoader();
    xmlLoader.load (new URLRequest("main.xml"));
    xmlLoader.addEventListener( Event.COMPLETE, createSite);
    
    function createSite(e:Event) {
        
        // store the xml file in our xml variable
        
        fileXml=new XML(e.target.data);
        
        // use a constructor function to use the xml
        
        index.createMainMenu(fileXml.menu);
        
    }
    
    function createMainMenu(xmlData:XMLList) {
        
        // create the length of our menu
        
        index.totalMenuItems=xmlData.*.length();
        
        // create a movie clip with the instance name menu_clip and add it to the stage.
        
        // then use a for loop to create our menu
        
        for (var i:uint = 0; i < index.totalMenuItems; i++) {
            
            /*
            create a movieclip and export for actionscript with the class name: menuItem
            it should contain one dynamic textbox with the instance name of menu_item_text.
            */
            
            // create our new menu item
            
            var menu_item:menuItem = new menuItem();
            
            // set the identification
            
            menu_item.name="id"+i;
            menu_item.id=i;
            
            // set the menu item deep link plus formatting with split and join. toLowerCase() makes every character lowercase
            
            menu_item.deep_link = xmlData.item.@item_name[i].split(" ").join("_").split("/").join("_").toLowerCase();
            
            // give it a button cursor & make the target the button and not its children
            
            menu_item.buttonMode=true;
            menu_item.mouseChildren=false;
            
            // position our menu items dynamically
            
            menu_item.x = (i * menu_item.width);
            
            // add the xml values to the text box inside the new item.
            
            menu_item.menu_item_text.text=xmlData.item.@item_name[i];
            
            // add the module address to the menu variable / It will come in useful later.
            
            menu_item.item_module=xmlData.item.@item_module[i];
            
            /*
            create a new layer and place the menu_clip movieclip onto that layer.
            Give it an instance name of menu_clip
            */
            
            // assign events to menu buttons. place the functions to handle these events below the createMainMenu function
            
            // rollover & rollout effects
            
            menu_item.addEventListener(MouseEvent.MOUSE_OVER, menuRollOver);
            menu_item.addEventListener(MouseEvent.MOUSE_OUT, menuRollOut);
            menu_item.addEventListener(MouseEvent.MOUSE_DOWN, menuPress);
            
            /*
            this variable contains a function that will contain the events when the swfaddress in changed.
            */
            
            menu_item.init = function () {
                
                /*
                create a new movieclip and call it module_clip, then place it on a new layer then give it
                the instance name of module_clip
                */
                
                // new variable that has contains the path of the swf we are loading in.
                
                var module:String = this.item_module;
                
                // fade out our current module if any, then commence the load of our new module using the tweener's onComplete function
                
                Tweener.addTween( index.module_clip, {alpha: 0, time: 2, transition:"easeOutExpo", onComplete:function () {
                        
                        index.createModule(module);
                        
                        if (index.firstLoad == false) {
                            
                            index.module_clip.removeChildAt(0);
                            
                        }
                        
                }});
                
                for (var i:uint = 0; i < index.totalMenuItems; i++) {
                    
                    var button:MovieClip = index.menu_clip.getChildByName("id" + i) as MovieClip;
                    
                    if( button != this ) {
                        
                        button.enabled = true;
                        button.addEventListener(MouseEvent.MOUSE_OUT, menuRollOut);
                        button.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OUT));
                        
                        } else {
                        
                        button.enabled = false;
                        button.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OVER));
                        button.removeEventListener(MouseEvent.MOUSE_OUT, menuRollOut);
                        
                    }
                }
            }
            
            // add each menu item to the menu_clip movieclip using addChild()
            
            index.menu_clip.addChild(menu_item);
            
        }
        
        // function to handle swfaddress events.
        
        function handleSWFAddress(e:SWFAddressEvent) {
            
            /*
            set html title names
            */
            
            var htmlTitle:String= "XML Deeplinking Tutorial";
            for (var i:Number = 0; i < e.pathNames.length; i++) {
                htmlTitle+=' / '+String(e.pathNames[i].substr(0,1).toUpperCase()+e.pathNames[i].substr(1)).split("_").join(" ");
            }
            
            /*
            
            to format the html title we use the split and join technique. It replaces _ with a space. We make it a string to ensure it is useable.
            
            String(e.pathNames[i].substr(0,1).toUpperCase()+e.pathNames[i].substr(1)).split("_").join(" ");
            
            */
            
            // this function does all the work and assigns the html title
            
            SWFAddress.setTitle(htmlTitle);
            
            // create a for loop to iterate through the total number fo menu items. hence we use index.totalMenuitems to do so.
            
            /*
            You may be wondering why I am using n instead of i in the for loop. Well Adobe failed to realise that if there are two for loops in the same function
            and both loops are iterating through the variable i it throws an error. Using n or another var solves this error.
            */
            
            
            for (var n:uint = 0; n < index.totalMenuItems; n++) {
                
                // this var is used to iterate through all our menu items
                
                // this var is referenced to the first menu item
                
                var button:MovieClip = index.menu_clip.getChildByName("id"+ n) as MovieClip;
                
                // the if statement below is the most important part of our code.
                
                // SWFAddress.getValue() is explained in the next step
                
                // we need to get rid of the "/" on the front in order for it to equal the button's deep link
                
                if (button.deep_link == SWFAddress.getValue().split("/")[1]) {
                    
                    // if any of button deep links equal the URL set then it initiates the menu_item.init function we set earlier
                    
                    button.init();
                    
                    // to stop the code we use return.
                    
                    return;
                    
                }
            }
            
            var firstButton:MovieClip = index.menu_clip.getChildByName("id" + 0) as MovieClip;
            
            // use the dispatch event to fire the press event on the first button. This then sets the deep link.
            
            // Therefore the for loop above will load the first module.
            
            firstButton.dispatchEvent( new MouseEvent(MouseEvent.MOUSE_DOWN));
            
        }
        
        SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress);
        
    }
    
    function menuRollOver(e:MouseEvent) {
        
        // menu button variable - We use getChildByName to aim at the correct menu item
        
        // e.target.id is referring to the menu_item.id we defined earlier.
        
        var button:MovieClip=index.menu_clip.getChildByName("id"+e.target.id) as MovieClip;
        
        // set the animation using caurina tweener
        
        Tweener.addTween( button, {alpha: 0.5, time: 2, transition:"easeOutExpo"});
        
    }
    
    function menuRollOut(e:MouseEvent) {
        
        // menu button variable - We use getChildByName to aim at the correct menu item
        
        // e.target.id is referring to the menu_item.id we defined earlier.
        
        var button:MovieClip=index.menu_clip.getChildByName("id"+e.target.id) as MovieClip;
        
        // set the animation using caurina tweener
        
        Tweener.addTween( button, {alpha: 1, time: 2, transition:"easeOutExpo"});
        
    }
    
    function menuPress(e:MouseEvent) {
        
        // SWFAddress set value function
        
        SWFAddress.setValue(e.target.deep_link);
        
    }
    
    
    /*
    this is the function that loads the selected module
    */
    
    function createModule (url:String) {
        
        // we create a new loader
        
        var loader:Loader = new Loader();
        
        // we create a new url request for our loader
        
        var moduleURL:URLRequest = new URLRequest(url);
        
        // we add event listeners to the loader. some are not necessary but I included them for convenience
        
        loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);
        
        // when the module has loaded we trigger the complete with a event listener.
        
        loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
        loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, loadError);
        loader.load(moduleURL);
        
        function loadProgress (e:ProgressEvent) {
            
        }
        
        // triggered when module has loaded
        
        function loadComplete (e:Event) {
            
            // fade in the module
            
            Tweener.addTween( index.module_clip, {alpha: 1, time: 2, transition:"easeOutExpo"});
            
            // add the current module to the module_clip movieclip by using addChild
            
            index.module_clip.addChild(e.currentTarget.content);
            
            // now we have the first load we set firstLoad to false
            
            index.firstLoad = false;
            
        }
        
        function loadError (e:Event) {
            
            trace("error");
            
        }
    }
    Where as the XML menu is created using:-

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    
    <xml>
    
    <menu>
    
    <item 
    
    item_name = "Test"
    item_module = "home.swf"
    
     />
     
    <item 
    
    item_name = "About"
    item_module = "about.swf"
    
     />
     
     <item 
    
    item_name = "Portfolio"
    item_module = "portfolio.swf"
    
     />
     
     <item 
    
    item_name = "Contact"
    item_module = "contact.swf"
    
     />
     
     <item 
    
    item_name = "Contact"
    item_module = "contact.swf"
    
     />
     
     <item 
    
    item_name = "Contact"
    item_module = "contact.swf"
    
     />
     
     <item 
    
    item_name = "Contact"
    item_module = "contact.swf"
    
     />
    
    </menu>
    
    </xml>
    Each button triggers a swf movie which plays on load. Just a bit buggered at how to get the menu to position each item one below the other.

  • #2
    Regular Coder
    Join Date
    Nov 2009
    Location
    Scotland / Glasgow
    Posts
    184
    Thanks
    1
    Thanked 19 Times in 19 Posts
    Change
    Code:
    menu_item.x = (i * menu_item.width);
    to
    Code:
    menu_item.y = (i * menu_item.height);
    .:To me AS is like LEGO, Only for the big Kids :.
    - Site - Blog - Glasgow Flasher


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •