A Flash Developer Resource Site

Results 1 to 4 of 4

Thread: Swfaddress Back & Forward problem

  1. #1
    Twansparant Twandeman's Avatar
    Join Date
    May 2004
    Location
    Amsterdam
    Posts
    197

    Question Swfaddress Back & Forward problem

    Hi there,

    I'm trying out swfaddress (v 2.4) for the first time in my XML driven website and I almost got it working properly accept for the Back & Forward handling.

    My menu is build up from XML nodes, when pressing one of the menu buttons, a variable is set, the appropiate function gets called and swfaddress changes the URL address and page title correctly.
    When I go directly to one of the deeplinks in my browser, the variable is not set yet so I construct the variable and it's function from the swfaddress deeplink and the correct page gets loaded. So far so good!

    However if I press Back or Forward in my browser only the URL address changes correctly but the page title stays the same and the function doesn't get called. Somehow the Back & Forward button don't fire the SWFAddress.onChange function...

    I'm so close! Could someone how a look to see what I'm missing in my AS?
    I don't see it anymore... Any help is appreciated! My AS:

    Actionscript Code:
    // SWFAddress include
    #include "com/swfaddress/SWFAddress.as"

    // Load XML
    var myXML = new XML();
    myXML.ignoreWhite = true;
    myXML.onLoad = function(success) {
        if (success) {
            makehoofdmenu();
            SWFAddress.onChange();
        } else {
            trace("The XML could not be loaded");
        }
    };
    // Prevent XML caching
    myXML.load("content.xml?cachebuster=" + new Date().getTime());

    // Menu
    var tmpWidth = 25;
    var spacing = 20;
    var Status:Number = 0;

    var hoofdmenuitems:Array;
    var hoofdmenutotal;
    var page:Number = NaN;
    var pages:Array;
    var tmpl:Array;
    var button:Array;
    var activeNo:Number = NaN;

    function makehoofdmenu() { 
        hoofdmenuitems = myXML.firstChild.childNodes[1].childNodes;
        hoofdmenutotal = hoofdmenuitems.length;
        pages = [];
        tmpl = [];
        button = [];
       
        for (s=0; s<hoofdmenutotal; s++) {
           
            pages[s] = hoofdmenuitems[s].attributes.title;
            tmpl[s] = hoofdmenuitems[s].attributes.template;
            button[s] = hoofdmenu.items.createEmptyMovieClip(s, hoofdmenu.items.getNextHighestDepth());
            button[s].createTextField("title", 1, 0, 0, 1, 15);
            button[s].title.setNewTextFormat(Avenir);
            button[s].title.embedFonts = true;
            button[s].title.autoSize = true;
            button[s].title.html = true;
            button[s].title.antiAliasType = "advanced";
            button[s].title.selectable = false;
            button[s].title.htmlText = pages[s];
           
            // Aligning
            button[s]._x = (button[s-1]._x + button[s-1].title.textWidth) + spacing;
           
            // Functions
            button[s].buttonNo = s;
            button[s].onRollOver = function() {
                if(this.buttonNo != page){
                    select = new Color(this);
                    select.setRGB(0x000000);
                }
                activeNo = this.buttonNo;
                SWFAddress.setStatus(pages[activeNo].toLowerCase());
            }
            button[s].onRollOut = function() {
                if(this.buttonNo != page){
                    deSelect = new Color(this);
                    deSelect.setRGB(0xFFFFFF);
                }
                SWFAddress.resetStatus();
            }
            button[s].onRelease = function() {
                activatePage(activeNo);
            }
        }
    };
       

    // SWFAddress handling
    SWFAddress.onChange = function() {
        var value = SWFAddress.getValue();
        // If URL is direct check witch page it is
        if (isNaN(activeNo)) {
            pagename = value.substr(1, value.length).toUpperCase();
            getPageURL();
        }
       
        // HTML Title
        var title = 'TITLE';   
        var names = SWFAddress.getPathNames();
        for (var i = 0; i < names.length; i++) {
            title += ' - ' + names[i].substr(0,1).toUpperCase() + names[i].substr(1);
        }
        SWFAddress.setTitle(title);
    }


    // Activate Page from URL name
    function getPageURL() {
        for (s=0; s<hoofdmenutotal; s++) {
            // Loop through pages to check witch is the right one
            pages[s] = hoofdmenuitems[s].attributes.title;
            if (pages[s] == pagename) {
                activatePage(s);
            }
        }
    }

    // Activate Page
    function activatePage(p:Number) {
        var showFunctie = eval("show"+tmpl[p]);
        var hideFunctie = eval("hide"+tmpl[p]);
       
        if (tmpl[p] == "link") {
            var link = hoofdmenuitems[p].firstChild.nodeValue;
            getURL(link, "_blank");
        // If it's a page
        } else {
            if (isNaN(page)) {
                Status ++;
                showFunctie(p);
                selectActive(p);
                SWFAddress.setValue(pages[p].toLowerCase());
                page = p;
            } else {
                if (page != p) {
                    if (tmpl[page] == "werk") {
                        randomBG();
                        var movie:MovieClip = eval("hoofdmenu.content."+tmpl[page]);
                        movie.removeMovieClip();
                        eval("imageflow_"+current).removeMovieClip();
                        image_info.removeMovieClip();
                    } else {
                        var movie:MovieClip = eval("hoofdmenu.content."+tmpl[page]);
                        movie.removeMovieClip();
                    }
                    showFunctie(p);
                    selectActive(p);
                    SWFAddress.setValue(pages[p].toLowerCase());
                    page = p;
                } else {
                    Status = 0;
                    page = NaN;
                    SWFAddress.setValue("");
                    deselect();
                    hideFunctie();
                }
            }
        }
    };

    Thanks for your time!
    Cheers
    Toine Kamps | Design & Coding
    toinekamps.com

  2. #2
    Twansparant Twandeman's Avatar
    Join Date
    May 2004
    Location
    Amsterdam
    Posts
    197
    I think I solved the problem!
    Not sure how, but I will tell/show what I've changed;

    First of all make sure you load the swfaddress javascript file after the swfobject file file in your index.html like this:
    PHP Code:
    <script src="js/swfobject.js" type="text/javascript" charset="utf-8"></script>
    <
    script src="js/swfaddress.js" type="text/javascript" charset="utf-8"></script>

    <
    script type="text/javascript">
        var 
    attributes = {
            
    id"myid"
        
    };
        var 
    params = {
            
    scale"noscale",
            
    wmode"transparant",
            
    allowscriptaccess"*"
        
    };
        
    swfobject.embedSWF("myswf.swf""flashcontent""100%""100%""9.0.0""js/expressInstall.swf"attributesparams);
    </
    script
    Not sure if that was the problem, but it's recommended.
    Secondly, I forgot to upload the SWFAddressEvent.as file, I only uploaded the SWFAddress.as file.

    I also adjusted my AS a bit:
    Instead of calling the activatePage function directly on the menu buttons, I set the SWFAddress Value and let the SWFAddress.onChange function call the activatePage function.

    My new AS:
    Actionscript Code:
    // SWFAddress include
    #include "com/swfaddress/SWFAddress.as"

    // Load XML
    var myXML = new XML();
    myXML.ignoreWhite = true;
    myXML.onLoad = function(success) {
        if (success) {
            makehoofdmenu();
            SWFAddress.onChange();
        } else {
            trace("The XML could not be loaded");
        }
    };
    // Prevent XML caching
    myXML.load("content.xml?cachebuster=" + new Date().getTime());

    // Menu
    var tmpWidth = 25;
    var spacing = 20;

    var hoofdmenuitems:Array;
    var hoofdmenutotal;
    var page:Number = NaN;
    var pages:Array;
    var tmpl:Array;
    var button:Array;
    var activeNo:Number = NaN;

    function makehoofdmenu() {  
        hoofdmenuitems = myXML.firstChild.childNodes[1].childNodes;
        hoofdmenutotal = hoofdmenuitems.length;
        pages = [];
        tmpl = [];
        button = [];
       
        for (s=0; s<hoofdmenutotal; s++) {
           
            pages[s] = hoofdmenuitems[s].attributes.title;
            tmpl[s] = hoofdmenuitems[s].attributes.template;
            button[s] = hoofdmenu.items.createEmptyMovieClip(s, hoofdmenu.items.getNextHighestDepth());
            button[s].createTextField("title", 1, 0, 0, 1, 15);
            button[s].title.setNewTextFormat(Avenir);
            button[s].title.embedFonts = true;
            button[s].title.autoSize = true;
            button[s].title.html = true;
            button[s].title.antiAliasType = "advanced";
            button[s].title.selectable = false;
            button[s].title.htmlText = pages[s];
           
            // Aligning
            button[s]._x = (button[s-1]._x + button[s-1].title.textWidth) + spacing;
           
            // Functions
            button[s].buttonNo = s;
            button[s].onRollOver = function() {
                if(this.buttonNo != page){
                    select = new Color(this);
                    select.setRGB(0x000000);
                }
                activeNo = this.buttonNo;
                SWFAddress.setStatus(pages[activeNo].toLowerCase());
            }
            button[s].onRollOut = function() {
                if(this.buttonNo != page){
                    deSelect = new Color(this);
                    deSelect.setRGB(0xFFFFFF);
                }
                SWFAddress.resetStatus();
            }
            button[s].Status = 0;
            button[s].onRelease = function() {
                this.Status ++;
                activeNo = this.buttonNo;
                if (this.Status > 1) {
                    this.Status = 0;
                    activatePage(activeNo);
                } else {
                    SWFAddress.setValue(pages[activeNo].toLowerCase());
                }
            }
        }
    };
       

    // SWFAddress handling
    SWFAddress.onChange = function():Void {
       
        var value = SWFAddress.getValue();
        // If URL is direct check witch page it is
        pagename = value.substr(1, value.length).toUpperCase();
        getPageURL();
       
        // HTML Title
        var title = 'MY TITLE';
        var names = SWFAddress.getPathNames();
        for (var i = 0; i < names.length; i++) {
            title = 'TITLE - ' + names[i].substr(0,1).toUpperCase() + names[i].substr(1);
        }
        SWFAddress.setTitle(title);
    }

    // Activate Page from URL name
    function getPageURL() {
        for (s=0; s<hoofdmenutotal; s++) {
            // Loop through pages to check witch is the right one
            pages[s] = hoofdmenuitems[s].attributes.title;
            if (pages[s] == pagename) {
                activeNo = s;
                activatePage(s);
            }
        }
    }


    // Activate Page
    function activatePage(p:Number) {  
        var showFunctie = eval("show"+tmpl[p]);
        var hideFunctie = eval("hide"+tmpl[p]);
       
        // If it's a link
        if (tmpl[p] == "link") {
            var link = hoofdmenuitems[p].firstChild.nodeValue;
            getURL(link, "_blank");
        // If it's a page
        } else {
            if (isNaN(page)) {
                showFunctie(p);
                selectActive(p);
                page = p;
            } else {
                if (page != p) {
                    if (tmpl[page] == "werk") {
                        randomBG();
                        var movie:MovieClip = eval("hoofdmenu.content."+tmpl[page]);
                        movie.removeMovieClip();
                        eval("imageflow_"+current).removeMovieClip();
                        image_info.removeMovieClip();
                    } else {
                        var movie:MovieClip = eval("hoofdmenu.content."+tmpl[page]);
                        movie.removeMovieClip();
                    }
                    showFunctie(p);
                    selectActive(p);
                    page = p;
                } else {
                    deselect();
                    hideFunctie();
                    page = NaN;
                    activeNo = NaN;
                    SWFAddress.setValue("");
                }
            }
        }
    };

    I hope I can help someone with this piece of AS!
    Cheers
    Toine Kamps | Design & Coding
    toinekamps.com

  3. #3
    Twansparant Twandeman's Avatar
    Join Date
    May 2004
    Location
    Amsterdam
    Posts
    197

    Exclamation

    Hmm, although I seem to be the only one who is replying here,
    I'm sad to say my solution above only seems to work on a Mac (don't ask me why because I don't have a clue).
    I tested it on a Windows PC in Internet Explorer 7 & Firefox and it does not work properly. I think the activatePage function is called twice.
    So I'm back where I was:

    + Deeplinking directly from url is working
    + Menu buttons work and change the address & title correctly
    - The Back & Forward buttons change the address & title correctly but do NOT load the correct page

    What I need to do is to differentiate in the SWFAddress.onChange function if the change is being made by clicking one of the menu buttons or by pressing Back or Forward in your browser.

    My current AS:
    Actionscript Code:
    // SWFAddress include
    #include "com/swfaddress/SWFAddress.as"

    // Load XML
    var myXML = new XML();
    myXML.ignoreWhite = true;
    myXML.onLoad = function(success) {
        if (success) {
            makehoofdmenu();
            SWFAddress.onChange();
        } else {
            trace("The XML could not be loaded");
        }
    };
    // Prevent XML caching
    myXML.load("content.xml?cachebuster=" + new Date().getTime());

    // Hoofdmenu
    var tmpWidth = 25;
    var spacing = 20;

    var hoofdmenuitems:Array;
    var hoofdmenutotal;
    var page:Number = NaN;
    var pages:Array;
    var tmpl:Array;
    var button:Array;
    var activeNo:Number = NaN;
    var activateState:Number = 0;

    function makehoofdmenu() {
        hoofdmenuitems = myXML.firstChild.childNodes[1].childNodes;
        hoofdmenutotal = hoofdmenuitems.length;
        pages = [];
        tmpl = [];
        button = [];
       
        for (s=0; s<hoofdmenutotal; s++) {
            pages[s] = hoofdmenuitems[s].attributes.title;
            tmpl[s] = hoofdmenuitems[s].attributes.template;
            button[s] = hoofdmenu.items.createEmptyMovieClip(s, hoofdmenu.items.getNextHighestDepth());
            button[s].createTextField("title", 1, 0, 0, 1, 15);
            button[s].title.setNewTextFormat(Avenir);
            button[s].title.embedFonts = true;
            button[s].title.autoSize = true;
            button[s].title.html = true;
            button[s].title.antiAliasType = "advanced";
            button[s].title.selectable = false;
            button[s].title.htmlText = pages[s];
           
            // Aligning
            button[s]._x = (button[s-1]._x + button[s-1].title.textWidth) + spacing;
           
            // Functions
            button[s].buttonNo = s;
            button[s].onRollOver = function() {
                if(this.buttonNo != page){
                    select = new Color(this);
                    select.setRGB(0x000000);
                }
                activeNo = this.buttonNo;
                SWFAddress.setStatus(pages[activeNo].toLowerCase());
            }
            button[s].onRollOut = function() {
                if(this.buttonNo != page){
                    deSelect = new Color(this);
                    deSelect.setRGB(0xFFFFFF);
                }
                SWFAddress.resetStatus();
            }
            button[s].onRelease = function() {
                activateState = 1;
                activatePage(activeNo);
            }
        }
    };

    // SWFAddress handling
    SWFAddress.onChange = function() {
        var value = SWFAddress.getValue();
        // If URL is direct check wich page it is
        if (isNaN(activeNo)) {
            pagename = value.substr(1, value.length).toUpperCase();
            getPageURL(); // is working
        } else {
            // If change was invoked by browser
            if (activateState == 0) {
                pagename = value.substr(1, value.length).toUpperCase();
                getPageURL(); // is not working
            // If change was invoked by button click
            } else {
                // Reset
                activateState = 0; // is working
            }
        }
        // HTML Title
        var title = 'TITLE';   
        var names = SWFAddress.getPathNames();
        for (var i = 0; i < names.length; i++) {
            title += ' - ' + names[i].substr(0,1).toUpperCase() + names[i].substr(1);
        }
        SWFAddress.setTitle(title);
    }

    // Activate Page from URL name
    function getPageURL() {
        for (s=0; s<hoofdmenutotal; s++) {
            // Loop through pages to check witch is the right one
            pages[s] = hoofdmenuitems[s].attributes.title;
            if (pages[s] == pagename) {
                activeNo = s;
                activateState = 0;
                activatePage(s);
            }
        }
    }

    // Activate Page
    function activatePage(p:Number) {
        var showFunctie = eval("show"+tmpl[p]);
        var hideFunctie = eval("hide"+tmpl[p]);
       
        if (tmpl[p] == "link") {
            var link = hoofdmenuitems[p].firstChild.nodeValue;
            getURL(link, "_blank");
        // If it's a page
        } else {
            if (isNaN(page)) {
                Status ++;
                showFunctie(p);
                selectActive(p);
                SWFAddress.setValue(pages[p].toLowerCase());
                page = p;
            } else {
                if (page != p) {
                    if (tmpl[page] == "werk") {
                        randomBG();
                        var movie:MovieClip = eval("hoofdmenu.content."+tmpl[page]);
                        movie.removeMovieClip();
                        eval("imageflow_"+current).removeMovieClip();
                        image_info.removeMovieClip();
                    } else {
                        var movie:MovieClip = eval("hoofdmenu.content."+tmpl[page]);
                        movie.removeMovieClip();
                    }
                    showFunctie(p);
                    selectActive(p);
                    SWFAddress.setValue(pages[p].toLowerCase());
                    page = p;
                } else {
                    Status = 0;
                    deselect();
                    hideFunctie();
                    page = NaN;
                    activeNo = NaN;
                    SWFAddress.setValue("");
                }
            }
        }  
    };

    Any thoughts? I have been cracking my head on this one...
    Any help is welcome! Thanks
    Toine Kamps | Design & Coding
    toinekamps.com

  4. #4
    Twansparant Twandeman's Avatar
    Join Date
    May 2004
    Location
    Amsterdam
    Posts
    197

    Wink

    For those who are interested, here's my final solution!
    Tested in Firefox 3.6, Safari 5 & Chrome on Mac and Internet Explorer 7, Firefox 3.6 & Chrome on Windows Vista.

    My AS:
    Actionscript Code:
    // SWFAddress include
    #include "com/swfaddress/SWFAddress.as"

    // Load XML
    var myXML = new XML();
    myXML.ignoreWhite = true;
    myXML.onLoad = function(success) {
        if (success) {
            makehoofdmenu();
            getPageURL();
        } else {
            trace("The XML could not be loaded");
        }
    };
    // Prevent XML caching
    myXML.load("content.xml?cachebuster=" + new Date().getTime());

    // Hoofdmenu
    var tmpWidth = 25;
    var spacing = 20;

    var hoofdmenuitems:Array;
    var hoofdmenutotal;
    var page:Number = NaN;
    var pages:Array;
    var tmpl:Array;
    var button:Array;
    var activateState:Number = 0;

    function makehoofdmenu() {
        hoofdmenuitems = myXML.firstChild.childNodes[1].childNodes;
        hoofdmenutotal = hoofdmenuitems.length;
        pages = [];
        tmpl = [];
        button = [];
       
        for (s=0; s<hoofdmenutotal; s++) {
            pages[s] = hoofdmenuitems[s].attributes.title;
            tmpl[s] = hoofdmenuitems[s].attributes.template;
            button[s] = hoofdmenu.items.createEmptyMovieClip(s, hoofdmenu.items.getNextHighestDepth());
            button[s].createTextField("title", 1, 0, 0, 1, 15);
            button[s].title.setNewTextFormat(Avenir);
            button[s].title.embedFonts = true;
            button[s].title.autoSize = true;
            button[s].title.html = true;
            button[s].title.antiAliasType = "advanced";
            button[s].title.selectable = false;
            button[s].title.htmlText = pages[s];
           
            // Aligning
            button[s]._x = (button[s-1]._x + button[s-1].title.textWidth) + spacing;
           
            // Functions
            button[s].buttonNo = s;
            button[s].onRollOver = function() {
                if(this.buttonNo != page){
                    select = new Color(this);
                    select.setRGB(0x000000);
                }
                SWFAddress.setStatus(pages[this.buttonNo].toLowerCase());
            }
            button[s].onRollOut = function() {
                if(this.buttonNo != page){
                    deSelect = new Color(this);
                    deSelect.setRGB(0xFFFFFF);
                }
                SWFAddress.resetStatus();
            }
            button[s].onRelease = function() {
                activateState ++;
                activatePage(this.buttonNo);
            }
        }
    };

    var value:String;

    // SWFAddress handling
    SWFAddress.onChange = function() {
        value = SWFAddress.getValue();
        handleChange();
        // HTML Title
        var title = 'TITLE';   
        var names = SWFAddress.getPathNames();
        for (var i = 0; i < names.length; i++) {
            title += ' - ' + names[i].substr(0,1).toUpperCase() + names[i].substr(1);
        }
        SWFAddress.setTitle(title);
    }

    function handleChange() {
        // If change was invoked by browser
        if (activateState == 0) {
            pagename = value.substr(1, value.length).toUpperCase();
            getPageURL();
        }
    }

    // Called when new page is fully loaded
    function resetState() {
        activateState = 0;
    }

    // Activate Page from URL name
    function getPageURL() {
        pagename = value.substr(1, value.length).toUpperCase();
        for (s=0; s<hoofdmenutotal; s++) {
            // Loop through pages to check witch is the right one
            pages[s] = hoofdmenuitems[s].attributes.title;
            if (pages[s] == pagename) {
                activatePage(s);
            }
        }
    }


    // Activate Page
    function activatePage(p:Number) {
        var showFunctie = eval("show"+tmpl[p]);
        var hideFunctie = eval("hide"+tmpl[p]);
       
        if (tmpl[p] == "link") {
            var link = hoofdmenuitems[p].firstChild.nodeValue;
            getURL(link, "_blank");
        // If it's a page
        } else {
            if (isNaN(page)) {
                Status ++;
                showFunctie(p);
                selectActive(p);
                SWFAddress.setValue(pages[p].toLowerCase());
                page = p;
            } else {
                if (page != p) {
                    if (tmpl[page] == "werk") {
                        randomBG();
                        var movie:MovieClip = eval("hoofdmenu.content."+tmpl[page]);
                        movie.removeMovieClip();
                        eval("imageflow_"+current).removeMovieClip();
                        image_info.removeMovieClip();
                    } else {
                        var movie:MovieClip = eval("hoofdmenu.content."+tmpl[page]);
                        movie.removeMovieClip();
                    }
                    showFunctie(p);
                    selectActive(p);
                    SWFAddress.setValue(pages[p].toLowerCase());
                    page = p;
                } else {
                    Status = 0;
                    deselect();
                    hideFunctie();
                    page = NaN;
                    SWFAddress.setValue("");
                }
            }
        }
    };
    Toine Kamps | Design & Coding
    toinekamps.com

Tags for this Thread

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center