WordPress Flash Navigation

Consider this beta, and not heavily tested. Just wanted to get it out there while I’m still working on it.

For a recent project a client wanted more control over the display of their WordPress navigation. They wanted to be able to use any font. They also wanted a dynamic fold-able navigation that enables access to all categories without re-loading the page. This was a perfect project for me since I use WordPress all over the mofo place. For example, you can see the navigation in use over there to the right. Also, as I’ve stated previously, I’m a big fan of leveraging the many publishing outlets I already use. So, I buit the nav in Flash connecting to WordPress via XMLRPC using some classes from http://mattism.com/. This essentially allows me to use WordPress as a content management system for Flash. You could obviously see how this could be applied to entire sites, like I have with my homepage. I’ve thought about building this a WordPress plugin, and maybe down the road I will, but I doubt it as I’ll probably jump ship and start another project per usual. Besides, everyone knows you can’t make money writing WordPress plugins.

How It Works:
Flash calls _rpc.call(“wp.getCategories”) to xmlrpc.php which returns an array of categories. I use this array to create a bunch of MovieClip()s. These clips add TextFields as children, are sorted and have events applied to them that enable the interactions. Two fonts reside in the library. One for the top node and one for the child and grandchildren nodes.

Features [the current goods]:

  • Dynamic – Works dynamically with WordPress categories. You update your categories in WordPress, they show properly in Flash
  • Sorting – Dynamically sorts top nodes. Controlled by WordPress plugin my category order. For this to work I had to make a small addition to the WordPress xmlrpc.php, located in your WordPress root folder, to return the category term order. Added line 2776 – $struct['order'] = $cat->term_order;
  • Page recognition – Recognizes the page you’re on and dynamically opens navigation to the parent node of said page onload. I could have used XMLRPC tomake this call, I’m sure. However, I opted to pass in the page url via Flashvars and run a check to find a match. When a match is found the nav opens to it’s parent node.
  • Folding – Uses Grant Skinner GTween for interactions.
  • Multiple – Allows posts to live under multiple category nodes.

Wish List [the future goods]:

  • Multiline – Currently only supports single line category titles, so you’re limited in char length
  • Scrolling – Currently the length of your category list is limited to the length of the swf. I plan to add functions to enable scrolling of the list based on mouseY. This will free up the nav to be as long as you desire.
  • Post count – Do people really use this though? Probably not as its annoying.
  • Levels – Currently the nav only supports 3 levels. It would be nice to be infinite.
  • Build in the rest of WordPress feature support for tag cloud, recent comments etc.

Total devel time: 2 days, or about 12 hours.

I’d love to see where other people take the code and what people build with it.

Source Code:
wpNavMain.as

/**
* wpNavMain by Chris Teso. Mar 19, 2009
* Visit www.christeso.com/blog for documentation, updates and more free code.
*
*
* Copyright (c) 2009 Chris Teso
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
**/
package
{
        import flash.display.*;

        public class wpNavMain extends Sprite
        {

                /*
                ========================================================
                | Constructor
                ========================================================
                */

                public function wpNavMain ()
                {
                        stage.align = StageAlign.TOP_LEFT;

                        // add nav
                        var wp:Wp = new Wp()
                        addChild( wp )
                }
        }
}

Wp.as

/**
* Wp by Chris Teso. Mar 19, 2009
* Visit www.christeso.com/blog for documentation, updates and more free code.
*
*
* Copyright (c) 2009 Chris Teso
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
**/

package
{
        import com.gskinner.motion.*
        import com.mattism.http.xmlrpc.*;
        import com.mattism.http.xmlrpc.util.*;
        import flash.filters.*;
        import flash.media.*;
        import flash.ui.*;
        import flash.display.*;
        import flash.events.*;
        import flash.net.*;
        import flash.utils.*;
        import flash.geom.*;
        import flash.text.*;
        import fl.transitions.*;
        import fl.transitions.easing.*;
        import flash.system.SecurityPanel;
        import flash.system.Security;

        public class Wp extends Sprite
        {

                /*
                ========================================================
                | Private Variables                         | Data Type
                ========================================================
                */
                private var _navArray:Array = new Array();
                private var _rpc:Connection;
                private var _topFont:Font = new topFont();
                private var _roadSign:Font = new roadSign();
                private var _topFmt:TextFormat = new TextFormat()
                private var _currUrl:String = ""
                private var _hideTimer:Timer

                private var _textYPad:int = 16
                private var _navSpeed:Number = .2
                /*
                ========================================================
                | Constructor
                ========================================================
                */

                public function Wp ()
                {
                        loadRpc()
                }

                private function checkPage()
                {
                        // load in title
                        var paramList:Object = this.root.loaderInfo.parameters;

                        // set var to hold text
                        var _currUrl:String = paramList["url"]

                        //_currUrl = "http://www.christeso.com/index.php/category/portfolio/truth/truth-found/"

                        // scan through array and open nav to that one
                        for( var i=0;i MovieClip(mc.parent).origY )
                                        {
                                                yLeap = _navArray[i].mc.origY + ( _totOpen*_textYPad )
                                                new GTween( _navArray[i].mc, _navSpeed, {y:yLeap} )
                                        }
                                        else
                                        {
                                                yLeap = _navArray[i].mc.origY
                                                new GTween( _navArray[i].mc, _navSpeed, {y:yLeap} )
                                        }
                                }

                                // push down child nodes as long as they are below the node you're on and are a child of the node you're on
                                if( _navArray[i].childMc != null )
                                {
                                        if( _navArray[i].childMc.parent == mc.parent )
                                        {
                                                if( _navArray[i].childMc.origY > mc.origY )
                                                {
                                                        yLeap = _navArray[i].childMc.origY + ( _totOpen*_textYPad )
                                                        new GTween( _navArray[i].childMc, _navSpeed, {y:yLeap} )
                                                }
                                                else
                                                {
                                                        yLeap = _navArray[i].childMc.origY
                                                        new GTween( _navArray[i].childMc, _navSpeed, {y:yLeap} )
                                                }
                                        }
                                }

                                // make grandchildren visible
                                if( _navArray[i].grandChildMc != null )
                                {
                                        if( _navArray[i].grandChildMc.parent == mc )
                                        {
                                                _navArray[i].grandChildMc.visible = true
                                                new GTween( _navArray[i].grandChildMc, _navSpeed, {alpha:1} )
                                        }
                                        else
                                        {
                                                new GTween( _navArray[i].grandChildMc, _navSpeed/2, {alpha:0, autoHide:true} )
                                        }
                                }
                        }
                }

                private function hideGrandChildren( e:Event )
                {
                        // amount to go down
                        var yLeap:Number;                        

                        // ok we can prob do this in one big loop
                        for( var i=0;i

Download CS4 AS3 FLA and Classes

Enjoy.

  • Joe Langdon

    Hi, thanks for posting your menu. I have had a go at making it work on my wordpress site. http://dev.klapp.no/wordpress/wpNav.htmlIt loads the second level fine, but I can´t seem to get the third level to show up. Would be nice if you could take a look and tell me if I have missed something.Thanks

  • Name

    Hi ChrisFirst of all, congratulations for your WordPress Flash Navigation, it’s a very usefull code, thanks for share your work.I have noticed that is easy to decompile your swf file and get the passwordand user for your WorpPress account. Maybe you can create another userwith less permissions to your account to receive the data from wordpress,or work in the code to make it stronger.

  • Alex

    Hi, Chris. Well I sopouse this it’s work, because I see it. But, I Have a Little dude, like to many people not so Expert like me. How To install this Wonderfull Tool, or where I did have to Put it’s files. Sorry i’m a beginer in this Area.TksSincereleyAlex

  • Sky

    Hi, Chris, I love your solution on manipulating wordpress categories by usingactionscript, but I have one question here: to use the wp.getCategories, youhave to embed the username and password into the source code, and anyonecan decompile the flash file by using some tools like swf decompiler, and getthe password, right?thanks.

  • Usif

    great man .. go ahead and make us a plugin if you had the time ..God bless

  • Lee

    Yes please make us the plugin, I’m pulling my hair out here trying to figure out how to use a flash menu on a wordpress site.

  • SypeCoigelype

    advantage of sales.* Buy products that save money. Consider quality alternatives to national brands. Staples ink and toner products, for example, offer consumersyour visitors are allowed to download. If the average amount of page views per visitor is assumed constant, the allowable bandwidth restricts how many visitors youthe debate? Maybe third world debt should be renounced by the countries that carry it. This is fair and practical. Why Penis Width Is More Important Than You’dCan you remember the first videogames that introduced the world to the joys of videogames? I’m talking about the ones that were introduced in the 80s. We had thesince the content will be focused, well researched and will have a lot of related keywords, your blog is very likely to be featured in the search engine findings.general practitioner ’s help for this. The Value of R … About Company Law Services In India-trademark , Patent And Companyforeclosures. Financial hardships can strike anyone at any time, and when they are severe enough to force someone to fall behind in their mortgage payments, it mighttime off from your work routine, as it provides new perspectives to your decisions as a consumer, and makes you reconsider the shopping choices you make every day.your very first foray into building an ecommerce site. The World Wide Web is growing wider and opportunities increase as well. We may never know what the futurepair easy regular preservation, cleaning, storage as well as best usage tips that you should know and perform. All of them just take solely twenty minutes or perhaps http://slowdown.co.uk/site2/702-car-gps-mounts.php – car gps mounts This effect is called “greenhouse effect” or a “warming effect” that can be experienced due to “greenhouse gases”. Imagine what the glass canopy of a greenhouse aims youТll find that the Phoenix has no shortage of things to do and places to see. Stock Photos That SellStock-Photos-That-Sell/68946 If you want to make money with Penis Hygiene This is also an important thing to remember. Practicing penis hygiene is an important thing to do. If you are circumcised, then its easier to keep your companies to make their websites as winning since they might live. When it comes to search engine optimization, strategic efforts and knowledge on latest SEO problems.Making sure that your home or office is clean can also ensure a healthier environment for breathing. Dust and mold carry a great deal of bacteria throughout lot about affirmations nowadays, but an affirmation like УI am exercising every dayФ is not going to work if you are not exercising every day, simply because you Health Coach – See also anxiety attack causes and natural anxiety cure at 5 Biggest Legitimate Internet Home Business website and access the Chicago foreclosure listings there. Or you can call Illinois Public Records at 603-557-1000 for whatever information you need. There is plenty quality affordable internet web site hosting provider. But how do you recognize an affordable internet web site hosting provider that will deliver quality service to work. If you want to get a hard erection, you need to boost blood flow to and into the penile tissue so it can swell with blood and an erection is the visible HTML web pages that include a detailed description of the company, which wishes to sell a particular product in the market. The artistic and perfect portrayal of the tournament or even some single player game rooms, you will need to pay a small entrance fee. The money play is recommended only for experienced players, although you D&G, & Prada are some of the many available on BestBuyEyeGlasses. Prescription eyeglasses and lenses should be fashionable and practical, so let loose and sport the with multiple of currencies and heaps of advantages are there in your pathway. You can successfully go on the road of success. There are lots of automated systems online marketing methods that are ideal for any business including accounting services and CPA firms. Virtual reality has touched million lives through wires and http://slowdown.co.uk/site2/575-free-nextel-gps.php – free nextel gps the best timing for your procedure. One of the most common reasons for dental implant failure is the improper completion of the healing process. Additional risksWith New Security PolicyPrevent-data-leakages-in-your-company-with-new-security-policy/172739 Locating sensitive files is one of the most important tasks ofmotivational coaches or mentors stimulate us to dream as big as possible to reach a goal in our lives. This may work well for confident people who are used toclosed your eyes, I wish you relax and think of a cruise. Ready? Do it now. Close your eyes and think СcruiseТ. IТll waitЕ Welcome back. Am I right? Of course IТmtreatment program Chemical And Fire Resistant UniformsChemical-and-Fire-Resistant-Uniforms/988718 Industrial uniforms need to look good, be durable, and most

  • gyroglyph

    Great work!For those having difficulty getting started.1.You may first need to enable XML-RPC publishing protocols. in the wordpress admin panel.2. Then open the FLA in Flash and edit the WP.as file, filling in the necessary fields.3. Publish the FLA to a SWF, and watch the output panel for errors. If it all checks out you should see categories from your wordpress populate the SWF and output panel.4. Upload the SWF, all AS files and COM folder to your active theme’s directory5. type the swf’s address into your browser and you should see the working swf popullated with categories. embed in an HTML file for developement before placing it in a PHP template file.This is a wonderful package, and is a great starting point for those interested in FLASH/Wordpress development. Chris, I hope you don’t mind me “commenting” these installation tips.

  • awariat

    1 eneble in settings/wriiting/remote publishing…2. necessary fields in private function loadRpc() adress,pass,user

  • blackbird

    hey there, if i wanted to add sound to the generated titles pulled from my categories… where can i find the hover function – seems to be some already but im not 100%, im pretty new to as3. thanks

  • Spencer Haley

    I do search engine optimization and websites for businesses in San Diego. I found this site in google when searching about some Flash navigation problems. Great post. I have been working on http://scrippspediatricdentistry.com and I was having some problems with the Flash nav header. I think your post might help me fix my problems. Do you know how this method affects Flash search engine optimization? I think it sounds pretty SEO friendly. You can check all the websites I am making at http://414.bz Thanks!